@xplor-education/core-stencil-components 2.0.0

package/dist/collection/components/xplor-tooltip/xplor-tooltip.js

@@ -0,0 +1,311 @@
+import { Host, h } from "@stencil/core";
+export class XplorTooltip {
+    constructor() {
+        this.position = 'top';
+        this.trigger = 'hover';
+        this.arrow = true;
+        this.open = false;
+        this.disabled = false;
+        this.tooltipStyle = {};
+        this.arrowStyle = {};
+        this.handleMouseEnter = () => {
+            if (this.disabled)
+                return;
+            if (this.hideTimeout) {
+                clearTimeout(this.hideTimeout);
+            }
+            this.showTooltip();
+        };
+        this.handleMouseLeave = () => {
+            if (this.disabled)
+                return;
+            this.hideTimeout = setTimeout(() => {
+                this.hideTooltip();
+            }, 100);
+        };
+        this.handleClick = () => {
+            if (this.disabled)
+                return;
+            if (this.trigger === 'click') {
+                this.open = !this.open;
+                if (this.open) {
+                    requestAnimationFrame(() => this.updatePosition());
+                }
+            }
+        };
+    }
+    componentDidLoad() {
+        if (this.trigger === 'hover') {
+            this.setupHoverListeners();
+        }
+    }
+    disconnectedCallback() {
+        this.cleanupListeners();
+        if (this.hideTimeout) {
+            clearTimeout(this.hideTimeout);
+        }
+    }
+    setupHoverListeners() {
+        if (this.triggerEl) {
+            this.triggerEl.addEventListener('mouseenter', this.handleMouseEnter);
+            this.triggerEl.addEventListener('mouseleave', this.handleMouseLeave);
+        }
+    }
+    cleanupListeners() {
+        if (this.triggerEl) {
+            this.triggerEl.removeEventListener('mouseenter', this.handleMouseEnter);
+            this.triggerEl.removeEventListener('mouseleave', this.handleMouseLeave);
+        }
+    }
+    handleDocumentClick(event) {
+        if (this.trigger === 'click' && this.open) {
+            const target = event.target;
+            if (!this.el.contains(target)) {
+                this.open = false;
+            }
+        }
+    }
+    showTooltip() {
+        this.open = true;
+        requestAnimationFrame(() => this.updatePosition());
+    }
+    hideTooltip() {
+        this.open = false;
+    }
+    updatePosition() {
+        if (!this.triggerEl || !this.tooltipEl)
+            return;
+        const triggerRect = this.triggerEl.getBoundingClientRect();
+        const tooltipRect = this.tooltipEl.getBoundingClientRect();
+        const gap = 8; // Space between trigger and tooltip
+        const arrowSize = this.arrow ? 6 : 0;
+        let top = 0;
+        let left = 0;
+        let arrowTop = '';
+        let arrowLeft = '';
+        let arrowTransform = '';
+        switch (this.position) {
+            case 'top':
+                top = triggerRect.top - tooltipRect.height - gap - arrowSize;
+                left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+                arrowTop = '100%';
+                arrowLeft = '50%';
+                arrowTransform = 'translateX(-50%) rotate(45deg)';
+                break;
+            case 'bottom':
+                top = triggerRect.bottom + gap + arrowSize;
+                left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
+                arrowTop = '-6px';
+                arrowLeft = '50%';
+                arrowTransform = 'translateX(-50%) rotate(45deg)';
+                break;
+            case 'left':
+                top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
+                left = triggerRect.left - tooltipRect.width - gap - arrowSize;
+                arrowTop = '50%';
+                arrowLeft = '100%';
+                arrowTransform = 'translateY(-50%) rotate(45deg)';
+                break;
+            case 'right':
+                top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
+                left = triggerRect.right + gap + arrowSize;
+                arrowTop = '50%';
+                arrowLeft = '-6px';
+                arrowTransform = 'translateY(-50%) rotate(45deg)';
+                break;
+        }
+        // Keep tooltip within viewport
+        const viewportPadding = 8;
+        if (left < viewportPadding) {
+            left = viewportPadding;
+        }
+        else if (left + tooltipRect.width > window.innerWidth - viewportPadding) {
+            left = window.innerWidth - tooltipRect.width - viewportPadding;
+        }
+        if (top < viewportPadding) {
+            top = viewportPadding;
+        }
+        else if (top + tooltipRect.height > window.innerHeight - viewportPadding) {
+            top = window.innerHeight - tooltipRect.height - viewportPadding;
+        }
+        this.tooltipStyle = {
+            top: `${top}px`,
+            left: `${left}px`,
+        };
+        this.arrowStyle = {
+            top: arrowTop,
+            left: arrowLeft,
+            transform: arrowTransform,
+        };
+    }
+    render() {
+        return (h(Host, { key: '472521bc51295f0b7dcc4d17c0aef70df5c7181e' }, h("div", { key: '9458cc629deea68c914e7214a762498ff9c3d4c8', class: "tooltip-trigger", ref: (el) => (this.triggerEl = el), onClick: this.handleClick }, h("slot", { key: 'f5f6d6c85270fdca9b345dc9fed31b776c5d6358', name: "trigger" })), this.open && (h("div", { key: 'd56f6b7f8e2d4c0b6425a85a290e330978645e74', class: {
+                'tooltip': true,
+                [`tooltip--${this.position}`]: true,
+            }, style: this.tooltipStyle, ref: (el) => (this.tooltipEl = el), role: "tooltip" }, h("div", { key: '0b5735ca4b5d591dbec6f6ca6b2e47233b391198', class: "tooltip__content" }, h("slot", { key: 'c4e8c76025b546b8aa485f3f9d37ee7ecf7fbddd' }, this.content)), this.arrow && (h("div", { key: '373c339feda5732f8c5f2307deea89f2d66969ba', class: "tooltip__arrow", style: this.arrowStyle }))))));
+    }
+    static get is() { return "xplor-tooltip"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xplor-tooltip.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xplor-tooltip.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "position": {
+                "type": "string",
+                "attribute": "position",
+                "mutable": false,
+                "complexType": {
+                    "original": "TooltipPosition",
+                    "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
+                    "references": {
+                        "TooltipPosition": {
+                            "location": "local",
+                            "path": "/Users/darryn.lee-warden/Documents/DEV/xplor_design_system/apps/core-stencil-components/src/components/xplor-tooltip/xplor-tooltip.tsx",
+                            "id": "src/components/xplor-tooltip/xplor-tooltip.tsx::TooltipPosition"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'top'"
+            },
+            "trigger": {
+                "type": "string",
+                "attribute": "trigger",
+                "mutable": false,
+                "complexType": {
+                    "original": "TooltipTrigger",
+                    "resolved": "\"click\" | \"hover\" | \"manual\"",
+                    "references": {
+                        "TooltipTrigger": {
+                            "location": "local",
+                            "path": "/Users/darryn.lee-warden/Documents/DEV/xplor_design_system/apps/core-stencil-components/src/components/xplor-tooltip/xplor-tooltip.tsx",
+                            "id": "src/components/xplor-tooltip/xplor-tooltip.tsx::TooltipTrigger"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "'hover'"
+            },
+            "arrow": {
+                "type": "boolean",
+                "attribute": "arrow",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "open": {
+                "type": "boolean",
+                "attribute": "open",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "content": {
+                "type": "string",
+                "attribute": "content",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "tooltipStyle": {},
+            "arrowStyle": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleDocumentClick",
+                "target": "document",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=xplor-tooltip.js.map

package/dist/collection/components/xplor-tooltip/xplor-tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xplor-tooltip.js","sourceRoot":"","sources":["../../../src/components/xplor-tooltip/xplor-tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Element, Listen } from '@stencil/core';\n\nexport type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';\nexport type TooltipTrigger = 'hover' | 'click' | 'manual';\n\n@Component({\n    tag: 'xplor-tooltip',\n    styleUrl: 'xplor-tooltip.scss',\n    scoped: true,\n})\nexport class XplorTooltip {\n    @Element() el: HTMLElement;\n\n    @Prop() position: TooltipPosition = 'top';\n    @Prop() trigger: TooltipTrigger = 'hover';\n    @Prop() arrow: boolean = true;\n    @Prop({ mutable: true }) open: boolean = false;\n    @Prop() content: string;\n    @Prop() disabled: boolean = false;\n\n    @State() tooltipStyle: any = {};\n    @State() arrowStyle: any = {};\n\n    private triggerEl: HTMLDivElement;\n    private tooltipEl: HTMLDivElement;\n    private hideTimeout: any;\n\n    componentDidLoad() {\n        if (this.trigger === 'hover') {\n            this.setupHoverListeners();\n        }\n    }\n\n    disconnectedCallback() {\n        this.cleanupListeners();\n        if (this.hideTimeout) {\n            clearTimeout(this.hideTimeout);\n        }\n    }\n\n    private setupHoverListeners() {\n        if (this.triggerEl) {\n            this.triggerEl.addEventListener('mouseenter', this.handleMouseEnter);\n            this.triggerEl.addEventListener('mouseleave', this.handleMouseLeave);\n        }\n    }\n\n    private cleanupListeners() {\n        if (this.triggerEl) {\n            this.triggerEl.removeEventListener('mouseenter', this.handleMouseEnter);\n            this.triggerEl.removeEventListener('mouseleave', this.handleMouseLeave);\n        }\n    }\n\n    private handleMouseEnter = () => {\n        if (this.disabled) return;\n        if (this.hideTimeout) {\n            clearTimeout(this.hideTimeout);\n        }\n        this.showTooltip();\n    };\n\n    private handleMouseLeave = () => {\n        if (this.disabled) return;\n        this.hideTimeout = setTimeout(() => {\n            this.hideTooltip();\n        }, 100);\n    };\n\n    private handleClick = () => {\n        if (this.disabled) return;\n        if (this.trigger === 'click') {\n            this.open = !this.open;\n            if (this.open) {\n                requestAnimationFrame(() => this.updatePosition());\n            }\n        }\n    };\n\n    @Listen('click', { target: 'document' })\n    handleDocumentClick(event: MouseEvent) {\n        if (this.trigger === 'click' && this.open) {\n            const target = event.target as Node;\n            if (!this.el.contains(target)) {\n                this.open = false;\n            }\n        }\n    }\n\n    private showTooltip() {\n        this.open = true;\n        requestAnimationFrame(() => this.updatePosition());\n    }\n\n    private hideTooltip() {\n        this.open = false;\n    }\n\n    private updatePosition() {\n        if (!this.triggerEl || !this.tooltipEl) return;\n\n        const triggerRect = this.triggerEl.getBoundingClientRect();\n        const tooltipRect = this.tooltipEl.getBoundingClientRect();\n        const gap = 8; // Space between trigger and tooltip\n        const arrowSize = this.arrow ? 6 : 0;\n\n        let top = 0;\n        let left = 0;\n        let arrowTop = '';\n        let arrowLeft = '';\n        let arrowTransform = '';\n\n        switch (this.position) {\n            case 'top':\n                top = triggerRect.top - tooltipRect.height - gap - arrowSize;\n                left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;\n                arrowTop = '100%';\n                arrowLeft = '50%';\n                arrowTransform = 'translateX(-50%) rotate(45deg)';\n                break;\n\n            case 'bottom':\n                top = triggerRect.bottom + gap + arrowSize;\n                left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;\n                arrowTop = '-6px';\n                arrowLeft = '50%';\n                arrowTransform = 'translateX(-50%) rotate(45deg)';\n                break;\n\n            case 'left':\n                top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;\n                left = triggerRect.left - tooltipRect.width - gap - arrowSize;\n                arrowTop = '50%';\n                arrowLeft = '100%';\n                arrowTransform = 'translateY(-50%) rotate(45deg)';\n                break;\n\n            case 'right':\n                top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;\n                left = triggerRect.right + gap + arrowSize;\n                arrowTop = '50%';\n                arrowLeft = '-6px';\n                arrowTransform = 'translateY(-50%) rotate(45deg)';\n                break;\n        }\n\n        // Keep tooltip within viewport\n        const viewportPadding = 8;\n        if (left < viewportPadding) {\n            left = viewportPadding;\n        } else if (left + tooltipRect.width > window.innerWidth - viewportPadding) {\n            left = window.innerWidth - tooltipRect.width - viewportPadding;\n        }\n\n        if (top < viewportPadding) {\n            top = viewportPadding;\n        } else if (top + tooltipRect.height > window.innerHeight - viewportPadding) {\n            top = window.innerHeight - tooltipRect.height - viewportPadding;\n        }\n\n        this.tooltipStyle = {\n            top: `${top}px`,\n            left: `${left}px`,\n        };\n\n        this.arrowStyle = {\n            top: arrowTop,\n            left: arrowLeft,\n            transform: arrowTransform,\n        };\n    }\n\n    render() {\n        return (\n            <Host>\n                <div\n                    class=\"tooltip-trigger\"\n                    ref={(el) => (this.triggerEl = el)}\n                    onClick={this.handleClick}\n                >\n                    <slot name=\"trigger\" />\n                </div>\n\n                {this.open && (\n                    <div\n                        class={{\n                            'tooltip': true,\n                            [`tooltip--${this.position}`]: true,\n                        }}\n                        style={this.tooltipStyle}\n                        ref={(el) => (this.tooltipEl = el)}\n                        role=\"tooltip\"\n                    >\n                        <div class=\"tooltip__content\">\n                            <slot>{this.content}</slot>\n                        </div>\n                        {this.arrow && (\n                            <div\n                                class=\"tooltip__arrow\"\n                                style={this.arrowStyle}\n                            />\n                        )}\n                    </div>\n                )}\n            </Host>\n        );\n    }\n}\n"]}

package/dist/collection/globals/globals.js

@@ -0,0 +1,32 @@
+// import { setMode } from '@stencil/core';
+// setMode((elm) => {
+//   // NOTE: you can write whatever you want here - it's up to you. This
+//   // function must return one of the style "modes" defined in step 1.
+//   return (elm as any).mode || elm.getAttribute('mode') || 'default';
+// });
+import { setMode, getMode } from "@stencil/core";
+// import { Mode } from '../utils/interfaces';
+let defaultMode;
+export const getBrand = (ref) => {
+    return (ref && getMode(ref)) || defaultMode;
+};
+// const isAllowedBrand = (elmMode: string) => ['default', 'next'].includes(elmMode);
+// const isWebComponentElement = (elm: any) => elm.tagName && elm.tagName.startsWith('XDS-');
+export default () => {
+    setMode((elm) => {
+        while (elm) {
+            return elm.mode || elm.getAttribute('mode') || 'default';
+            // const elmMode = (elm as any).mode || elm.getAttribute('mode');
+            // if (elmMode) {
+            //   if (isAllowedBrand(elmMode)) {
+            //     return elmMode;
+            //   } else if (isWebComponentElement(elm)) {
+            //     console.warn('Invalid mode: "' + elmMode + '", expected: "default" or "next"');
+            //   }
+            // }
+            // elm = elm.parentElement;
+        }
+        // return 'default';
+    });
+};
+//# sourceMappingURL=globals.js.map

package/dist/collection/globals/globals.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"globals.js","sourceRoot":"","sources":["../../src/globals/globals.ts"],"names":[],"mappings":"AAAA,2CAA2C;AAE3C,qBAAqB;AACrB,yEAAyE;AACzE,wEAAwE;AACxE,uEAAuE;AACvE,MAAM;AAEN,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACjD,8CAA8C;AAE9C,IAAI,WAAgB,CAAC;AAErB,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,GAAS,EAAO,EAAE;IACzC,OAAO,CAAC,GAAG,IAAI,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,WAAW,CAAC;AAC9C,CAAC,CAAC;AAEF,qFAAqF;AACrF,6FAA6F;AAE7F,eAAe,GAAG,EAAE;IAClB,OAAO,CAAC,CAAC,GAAQ,EAAE,EAAE;QACnB,OAAO,GAAG,EAAE,CAAC;YACX,OAAQ,GAAW,CAAC,IAAI,IAAI,GAAG,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,SAAS,CAAC;YAClE,iEAAiE;YACjE,iBAAiB;YACjB,mCAAmC;YACnC,sBAAsB;YACtB,6CAA6C;YAC7C,sFAAsF;YACtF,MAAM;YACN,IAAI;YACJ,2BAA2B;QAC7B,CAAC;QAED,oBAAoB;IACtB,CAAC,CAAC,CAAC;AACL,CAAC,CAAC","sourcesContent":["// import { setMode } from '@stencil/core';\n\n// setMode((elm) => {\n//   // NOTE: you can write whatever you want here - it's up to you. This\n//   // function must return one of the style \"modes\" defined in step 1.\n//   return (elm as any).mode || elm.getAttribute('mode') || 'default';\n// });\n\nimport { setMode, getMode } from '@stencil/core';\n// import { Mode } from '../utils/interfaces';\n\nlet defaultMode: any;\n\nexport const getBrand = (ref?: any): any => {\n  return (ref && getMode(ref)) || defaultMode;\n};\n\n// const isAllowedBrand = (elmMode: string) => ['default', 'next'].includes(elmMode);\n// const isWebComponentElement = (elm: any) => elm.tagName && elm.tagName.startsWith('XDS-');\n\nexport default () => {\n  setMode((elm: any) => {\n    while (elm) {\n      return (elm as any).mode || elm.getAttribute('mode') || 'default';\n      // const elmMode = (elm as any).mode || elm.getAttribute('mode');\n      // if (elmMode) {\n      //   if (isAllowedBrand(elmMode)) {\n      //     return elmMode;\n      //   } else if (isWebComponentElement(elm)) {\n      //     console.warn('Invalid mode: \"' + elmMode + '\", expected: \"default\" or \"next\"');\n      //   }\n      // }\n      // elm = elm.parentElement;\n    }\n\n    // return 'default';\n  });\n};\n"]}

package/dist/collection/index.js

@@ -0,0 +1,2 @@
+export * from './components';
+//# sourceMappingURL=index.js.map

package/dist/collection/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC","sourcesContent":["export * from './components';\n"]}

package/dist/collection/stories/Button.js

@@ -0,0 +1,17 @@
+import "./button.css";
+/** Primary UI component for user interaction */
+export const createButton = ({ primary = false, size = 'medium', backgroundColor, label, onClick, }) => {
+    const btn = document.createElement('button');
+    btn.type = 'button';
+    btn.innerText = label;
+    if (onClick) {
+        btn.addEventListener('click', onClick);
+    }
+    const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+    btn.className = ['storybook-button', `storybook-button--${size}`, mode].join(' ');
+    if (backgroundColor) {
+        btn.style.backgroundColor = backgroundColor;
+    }
+    return btn;
+};
+//# sourceMappingURL=Button.js.map

package/dist/collection/stories/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/stories/Button.ts"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AAetB,gDAAgD;AAChD,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,OAAO,GAAG,KAAK,EACf,IAAI,GAAG,QAAQ,EACf,eAAe,EACf,KAAK,EACL,OAAO,GACK,EAAE,EAAE;IAChB,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IAC7C,GAAG,CAAC,IAAI,GAAG,QAAQ,CAAC;IACpB,GAAG,CAAC,SAAS,GAAG,KAAK,CAAC;IACtB,IAAI,OAAO,EAAE,CAAC;QACZ,GAAG,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IACzC,CAAC;IAED,MAAM,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,6BAA6B,CAAC;IACnF,GAAG,CAAC,SAAS,GAAG,CAAC,kBAAkB,EAAE,qBAAqB,IAAI,EAAE,EAAE,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAElF,IAAI,eAAe,EAAE,CAAC;QACpB,GAAG,CAAC,KAAK,CAAC,eAAe,GAAG,eAAe,CAAC;IAC9C,CAAC;IAED,OAAO,GAAG,CAAC;AACb,CAAC,CAAC","sourcesContent":["import './button.css';\n\nexport interface ButtonProps {\n  /** Is this the principal call to action on the page? */\n  primary?: boolean;\n  /** What background color to use */\n  backgroundColor?: string;\n  /** How large should the button be? */\n  size?: 'small' | 'medium' | 'large';\n  /** Button contents */\n  label: string;\n  /** Optional click handler */\n  onClick?: () => void;\n}\n\n/** Primary UI component for user interaction */\nexport const createButton = ({\n  primary = false,\n  size = 'medium',\n  backgroundColor,\n  label,\n  onClick,\n}: ButtonProps) => {\n  const btn = document.createElement('button');\n  btn.type = 'button';\n  btn.innerText = label;\n  if (onClick) {\n    btn.addEventListener('click', onClick);\n  }\n\n  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';\n  btn.className = ['storybook-button', `storybook-button--${size}`, mode].join(' ');\n\n  if (backgroundColor) {\n    btn.style.backgroundColor = backgroundColor;\n  }\n\n  return btn;\n};\n"]}

package/dist/collection/stories/Button.stories.js

@@ -0,0 +1,50 @@
+import { fn } from "@storybook/test";
+import { createButton } from "./Button";
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+    title: 'Example/Button',
+    tags: ['autodocs'],
+    render: (args) => {
+        // You can either use a function to create DOM elements or use a plain html string!
+        // return `<div>${label}</div>`;
+        return createButton(args);
+    },
+    argTypes: {
+        backgroundColor: { control: 'color' },
+        label: { control: 'text' },
+        onClick: { action: 'onClick' },
+        primary: { control: 'boolean' },
+        size: {
+            control: { type: 'select' },
+            options: ['small', 'medium', 'large'],
+        },
+    },
+    // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
+    args: { onClick: fn() },
+};
+export default meta;
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Primary = {
+    args: {
+        primary: true,
+        label: 'Button',
+    },
+};
+export const Secondary = {
+    args: {
+        label: 'Button',
+    },
+};
+export const Large = {
+    args: {
+        size: 'large',
+        label: 'Button',
+    },
+};
+export const Small = {
+    args: {
+        size: 'small',
+        label: 'Button',
+    },
+};
+//# sourceMappingURL=Button.stories.js.map

package/dist/collection/stories/Button.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.stories.js","sourceRoot":"","sources":["../../src/stories/Button.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAGrC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,iGAAiG;AACjG,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,gBAAgB;IACvB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE;QACf,mFAAmF;QACnF,gCAAgC;QAChC,OAAO,YAAY,CAAC,IAAI,CAAC,CAAC;IAC5B,CAAC;IACD,QAAQ,EAAE;QACR,eAAe,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE;QACrC,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,OAAO,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE;QAC9B,OAAO,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;QAC/B,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC;SACtC;KACF;IACD,wJAAwJ;IACxJ,IAAI,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE;CACI,CAAC;AAE9B,eAAe,IAAI,CAAC;AAGpB,wFAAwF;AACxF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,OAAO,EAAE,IAAI;QACb,KAAK,EAAE,QAAQ;KAChB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,KAAK,EAAE,QAAQ;KAChB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,IAAI,EAAE;QACJ,IAAI,EAAE,OAAO;QACb,KAAK,EAAE,QAAQ;KAChB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,IAAI,EAAE;QACJ,IAAI,EAAE,OAAO;QACb,KAAK,EAAE,QAAQ;KAChB;CACF,CAAC","sourcesContent":["import type { Meta, StoryObj } from '@storybook/html';\nimport { fn } from '@storybook/test';\n\nimport type { ButtonProps } from './Button';\nimport { createButton } from './Button';\n\n// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export\nconst meta = {\n  title: 'Example/Button',\n  tags: ['autodocs'],\n  render: (args) => {\n    // You can either use a function to create DOM elements or use a plain html string!\n    // return `<div>${label}</div>`;\n    return createButton(args);\n  },\n  argTypes: {\n    backgroundColor: { control: 'color' },\n    label: { control: 'text' },\n    onClick: { action: 'onClick' },\n    primary: { control: 'boolean' },\n    size: {\n      control: { type: 'select' },\n      options: ['small', 'medium', 'large'],\n    },\n  },\n  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args\n  args: { onClick: fn() },\n} satisfies Meta<ButtonProps>;\n\nexport default meta;\ntype Story = StoryObj<ButtonProps>;\n\n// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args\nexport const Primary: Story = {\n  args: {\n    primary: true,\n    label: 'Button',\n  },\n};\n\nexport const Secondary: Story = {\n  args: {\n    label: 'Button',\n  },\n};\n\nexport const Large: Story = {\n  args: {\n    size: 'large',\n    label: 'Button',\n  },\n};\n\nexport const Small: Story = {\n  args: {\n    size: 'small',\n    label: 'Button',\n  },\n};\n"]}

package/dist/collection/stories/Header.js

@@ -0,0 +1,41 @@
+import { createButton } from "./Button";
+import "./header.css";
+export const createHeader = ({ user, onLogout, onLogin, onCreateAccount }) => {
+    const header = document.createElement('header');
+    const wrapper = document.createElement('div');
+    wrapper.className = 'storybook-header';
+    const logo = `<div>
+    <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+      <g fill="none" fillRule="evenodd">
+        <path
+          d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+          fill="#FFF" />
+        <path
+          d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
+          fill="#555AB9" />
+        <path d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z" fill="#91BAF8" />
+      </g>
+    </svg>
+    <h1>Acme</h1>
+  </div>`;
+    wrapper.insertAdjacentHTML('afterbegin', logo);
+    const account = document.createElement('div');
+    if (user) {
+        const welcomeMessage = `<span class="welcome">Welcome, <b>${user.name}</b>!</span>`;
+        account.innerHTML = welcomeMessage;
+        account.appendChild(createButton({ size: 'small', label: 'Log out', onClick: onLogout }));
+    }
+    else {
+        account.appendChild(createButton({ size: 'small', label: 'Log in', onClick: onLogin }));
+        account.appendChild(createButton({
+            size: 'small',
+            label: 'Sign up',
+            onClick: onCreateAccount,
+            primary: true,
+        }));
+    }
+    wrapper.appendChild(account);
+    header.appendChild(wrapper);
+    return header;
+};
+//# sourceMappingURL=Header.js.map

package/dist/collection/stories/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../src/stories/Header.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,cAAc,CAAC;AAStB,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,eAAe,EAAe,EAAE,EAAE;IACxF,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IAEhD,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9C,OAAO,CAAC,SAAS,GAAG,kBAAkB,CAAC;IAEvC,MAAM,IAAI,GAAG;;;;;;;;;;;;;SAaN,CAAC;IAER,OAAO,CAAC,kBAAkB,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;IAE/C,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9C,IAAI,IAAI,EAAE,CAAC;QACT,MAAM,cAAc,GAAG,qCAAqC,IAAI,CAAC,IAAI,cAAc,CAAC;QACpF,OAAO,CAAC,SAAS,GAAG,cAAc,CAAC;QACnC,OAAO,CAAC,WAAW,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC;IAC5F,CAAC;SAAM,CAAC;QACN,OAAO,CAAC,WAAW,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC;QACxF,OAAO,CAAC,WAAW,CACjB,YAAY,CAAC;YACX,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,SAAS;YAChB,OAAO,EAAE,eAAe;YACxB,OAAO,EAAE,IAAI;SACd,CAAC,CACH,CAAC;IACJ,CAAC;IACD,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAC7B,MAAM,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IAE5B,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC","sourcesContent":["import { createButton } from './Button';\nimport './header.css';\n\nexport interface HeaderProps {\n  user?: { name: string };\n  onLogin?: () => void;\n  onLogout?: () => void;\n  onCreateAccount?: () => void;\n}\n\nexport const createHeader = ({ user, onLogout, onLogin, onCreateAccount }: HeaderProps) => {\n  const header = document.createElement('header');\n\n  const wrapper = document.createElement('div');\n  wrapper.className = 'storybook-header';\n\n  const logo = `<div>\n    <svg width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" xmlns=\"http://www.w3.org/2000/svg\">\n      <g fill=\"none\" fillRule=\"evenodd\">\n        <path\n          d=\"M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z\"\n          fill=\"#FFF\" />\n        <path\n          d=\"M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z\"\n          fill=\"#555AB9\" />\n        <path d=\"M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z\" fill=\"#91BAF8\" />\n      </g>\n    </svg>\n    <h1>Acme</h1>\n  </div>`;\n\n  wrapper.insertAdjacentHTML('afterbegin', logo);\n\n  const account = document.createElement('div');\n  if (user) {\n    const welcomeMessage = `<span class=\"welcome\">Welcome, <b>${user.name}</b>!</span>`;\n    account.innerHTML = welcomeMessage;\n    account.appendChild(createButton({ size: 'small', label: 'Log out', onClick: onLogout }));\n  } else {\n    account.appendChild(createButton({ size: 'small', label: 'Log in', onClick: onLogin }));\n    account.appendChild(\n      createButton({\n        size: 'small',\n        label: 'Sign up',\n        onClick: onCreateAccount,\n        primary: true,\n      })\n    );\n  }\n  wrapper.appendChild(account);\n  header.appendChild(wrapper);\n\n  return header;\n};\n"]}

package/dist/collection/stories/Header.stories.js

@@ -0,0 +1,28 @@
+import { fn } from "@storybook/test";
+import { createHeader } from "./Header";
+const meta = {
+    title: 'Example/Header',
+    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+    tags: ['autodocs'],
+    render: (args) => createHeader(args),
+    parameters: {
+        // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
+        layout: 'fullscreen',
+    },
+    // More on argTypes: https://storybook.js.org/docs/api/argtypes
+    args: {
+        onLogin: fn(),
+        onLogout: fn(),
+        onCreateAccount: fn(),
+    },
+};
+export default meta;
+export const LoggedIn = {
+    args: {
+        user: {
+            name: 'Jane Doe',
+        },
+    },
+};
+export const LoggedOut = {};
+//# sourceMappingURL=Header.stories.js.map

package/dist/collection/stories/Header.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.stories.js","sourceRoot":"","sources":["../../src/stories/Header.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,EAAE,EAAE,MAAM,iBAAiB,CAAC;AAGrC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,gBAAgB;IACvB,0HAA0H;IAC1H,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC;IACpC,UAAU,EAAE;QACV,2FAA2F;QAC3F,MAAM,EAAE,YAAY;KACrB;IACD,+DAA+D;IAC/D,IAAI,EAAE;QACJ,OAAO,EAAE,EAAE,EAAE;QACb,QAAQ,EAAE,EAAE,EAAE;QACd,eAAe,EAAE,EAAE,EAAE;KACtB;CAC0B,CAAC;AAE9B,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,IAAI,EAAE;QACJ,IAAI,EAAE;YACJ,IAAI,EAAE,UAAU;SACjB;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU,EAAE,CAAC","sourcesContent":["import type { Meta, StoryObj } from '@storybook/html';\nimport { fn } from '@storybook/test';\n\nimport type { HeaderProps } from './Header';\nimport { createHeader } from './Header';\n\nconst meta = {\n  title: 'Example/Header',\n  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs\n  tags: ['autodocs'],\n  render: (args) => createHeader(args),\n  parameters: {\n    // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout\n    layout: 'fullscreen',\n  },\n  // More on argTypes: https://storybook.js.org/docs/api/argtypes\n  args: {\n    onLogin: fn(),\n    onLogout: fn(),\n    onCreateAccount: fn(),\n  },\n} satisfies Meta<HeaderProps>;\n\nexport default meta;\ntype Story = StoryObj<HeaderProps>;\n\nexport const LoggedIn: Story = {\n  args: {\n    user: {\n      name: 'Jane Doe',\n    },\n  },\n};\n\nexport const LoggedOut: Story = {};\n"]}

package/dist/collection/stories/Page.js

@@ -0,0 +1,85 @@
+import { createHeader } from "./Header";
+import "./page.css";
+export const createPage = () => {
+    const article = document.createElement('article');
+    let user;
+    let header = null;
+    const rerenderHeader = () => {
+        const wrapper = document.getElementsByTagName('article')[0];
+        wrapper.replaceChild(createHeaderElement(), wrapper.firstChild);
+    };
+    const onLogin = () => {
+        user = { name: 'Jane Doe' };
+        rerenderHeader();
+    };
+    const onLogout = () => {
+        user = undefined;
+        rerenderHeader();
+    };
+    const onCreateAccount = () => {
+        user = { name: 'Jane Doe' };
+        rerenderHeader();
+    };
+    const createHeaderElement = () => {
+        return createHeader({ onLogin, onLogout, onCreateAccount, user });
+    };
+    header = createHeaderElement();
+    article.appendChild(header);
+    const section = `
+  <section class="storybook-page">
+    <h2>Pages in Storybook</h2>
+    <p>
+      We recommend building UIs with a
+      <a
+        href="https://blog.hichroma.com/component-driven-development-ce1109d56c8e"
+        target="_blank"
+        rel="noopener noreferrer">
+        <strong>component-driven</strong>
+      </a>
+      process starting with atomic components and ending with pages.
+    </p>
+    <p>
+      Render pages with mock data. This makes it easy to build and review page states without
+      needing to navigate to them in your app. Here are some handy patterns for managing page data
+      in Storybook:
+    </p>
+    <ul>
+      <li>
+        Use a higher-level connected component. Storybook helps you compose such data from the
+        "args" of child component stories
+      </li>
+      <li>
+        Assemble data in the page component from your services. You can mock these services out
+        using Storybook.
+      </li>
+    </ul>
+    <p>
+      Get a guided tutorial on component-driven development at
+      <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
+        Storybook tutorials
+      </a>
+      . Read more in the
+      <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">docs</a>
+      .
+    </p>
+    <div class="tip-wrapper">
+      <span class="tip">Tip</span>
+      Adjust the width of the canvas with the
+      <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+        <g fill="none" fillRule="evenodd">
+          <path
+            d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0
+            01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0
+            010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
+            id="a"
+            fill="#999" />
+        </g>
+      </svg>
+      Viewports addon in the toolbar
+    </div>
+  </section>
+`;
+    article.insertAdjacentHTML('beforeend', section);
+    return article;
+};
+//# sourceMappingURL=Page.js.map