@trimble-oss/moduswebcomponents
Version:
Modus Web Components is a modern, accessible UI library built with Stencil JS that provides reusable web components following Trimble's Modus design system. This updated version focuses on improved flexibility, enhanced theming options, comprehensive cust
49 lines (48 loc) • 1.74 kB
TypeScript
/**
* Generic Shadow DOM Host Helper for Storybook
*
* This helper creates a reusable shadow host element that can wrap any Modus component
* without naming conflicts between different stories.
*/
interface ShadowHostConfig<T = unknown> {
/** The tag name of the Modus component to create (e.g., 'modus-wc-button') */
componentTag: string;
/** Function to map story args to component properties */
propsMapper: (args: T, element: HTMLElement) => void;
/** Default content/children for the component (optional) */
defaultContent?: string | Node[];
}
/**
* Creates a generic shadow host component class.
* Each story should create its own unique element name to avoid conflicts.
*
* @example
* ```typescript
* // In button.stories.ts
* const ButtonShadowHost = createShadowHostClass('button-shadow-host', {
* componentTag: 'modus-wc-button',
* propsMapper: (args, el) => {
* el.color = args.color;
* el.size = args.size;
* // ... other props
* },
* defaultContent: 'Click me'
* });
*
* export const ShadowDomParent: Story = {
* render: (args) => {
* if (!customElements.get('button-shadow-host')) {
* customElements.define('button-shadow-host', ButtonShadowHost);
* }
* return html`<button-shadow-host .props=${{ ...args }}></button-shadow-host>`;
* }
* };
* ```
*/
export declare function createShadowHostClass<T = unknown>(config: ShadowHostConfig<T>): typeof HTMLElement;
/**
* Alternative: Simple function to create shadow host inline
* Use this if you prefer inline class definition in stories
*/
export declare function createShadowHost<T = Record<string, unknown>>(elementName: string, config: ShadowHostConfig<T>): void;
export {};