@xplortech/apollo-core 2.11.0 → 3.0.0

package/dist/collection/components/xpl-select/select.stories.js

@@ -1,297 +0,0 @@
-import { v4 as uuid } from "uuid";
-import iconData from "@xplortech/apollo-icons/build/data.json";
-export default {
-    title: 'Components/Select',
-    parameters: {
-        actions: {
-            handles: ['selectChange', 'dropdownStateChange', 'changeEvent', 'triggerDropdown'],
-        },
-    },
-    argTypes: {
-        label: {
-            type: { name: 'string', required: true },
-        },
-        description: {
-            type: { name: 'string', required: false },
-        },
-        disabled: {
-            type: {
-                name: 'boolean',
-            },
-        },
-        error: {
-            type: {
-                name: 'boolean',
-            },
-        },
-        errorMessage: {
-            type: { name: 'string', required: false },
-        },
-        mode: {
-            options: ['single', 'multi'],
-            control: {
-                type: 'select',
-            },
-        },
-        truncate: {
-            type: {
-                name: 'boolean',
-            },
-        },
-        customDisplayValue: {
-            type: {
-                name: 'boolean',
-            },
-        },
-        customDisplayValueContent: {
-            type: { name: 'string', required: false },
-        },
-        selectIcon: {
-            options: Object.keys(iconData),
-            control: {
-                type: 'select',
-            },
-        },
-        selectedValues: {
-            control: 'text',
-            defaultValue: '',
-            description: 'Comma-separated list of selected values',
-        },
-        subtitle: {
-            control: 'text',
-            defaultValue: 'Subtitle',
-            description: 'Text to use for all subtitles',
-        },
-        preventDefaultTriggerDropdown: {
-            type: {
-                name: 'boolean',
-            },
-            description: 'Prevent the default action when triggerDropdown event fires',
-        },
-    },
-    tags: ['beta'],
-};
-const script = (choices, { id, scriptSelectedValues = null, preventDefault = false }) => `
-    (function() {
-        const select = document.getElementById("${id}");
-        select.choices = ${JSON.stringify(choices)};
-
-        if (${(scriptSelectedValues === null || scriptSelectedValues === void 0 ? void 0 : scriptSelectedValues.length) > 0}) {
-            select.selectedValues = ${JSON.stringify(scriptSelectedValues)};
-        }
-
-        // Add reset functionality for Storybook
-        window['resetSelect_${id}'] = function() {
-            if (select && typeof select.reset === 'function') {
-                select.reset();
-            }
-        };
-
-        // Handle preventDefault for triggerDropdown event
-        if (${preventDefault}) {
-            select.addEventListener('triggerDropdown', function(event) {
-                event.preventDefault();
-            });
-        }
-    })();
-`;
-export const Select = ({ label, description, disabled, error, errorMessage, mode, truncate, customDisplayValue, customDisplayValueContent, selectedValues, selectIcon, subtitle, preventDefaultTriggerDropdown, }) => {
-    const choices = [
-        {
-            groupName: 'Group 1',
-            options: [
-                {
-                    label: 'Choice 1',
-                    subtitle: `${subtitle}`,
-                },
-                {
-                    label: 'Choice 2',
-                    subtitle: `${subtitle}`,
-                },
-                {
-                    label: 'Choice 3',
-                    subtitle: `${subtitle}`,
-                },
-            ],
-        },
-        {
-            groupName: 'Group 2',
-            options: [
-                {
-                    label: 'Choice 4',
-                },
-                {
-                    label: 'Choice 5',
-                },
-                {
-                    label: 'Choice 6',
-                },
-            ],
-        },
-    ];
-    const id = uuid();
-    let attrs = ` id="${id}"`;
-    if (label)
-        attrs += ` label="${label}"`;
-    if (description)
-        attrs += ` description="${description}"`;
-    if (mode !== 'single')
-        attrs += ` mode="${mode}"`;
-    if (disabled)
-        attrs += ` disabled`;
-    if (error)
-        attrs += ` error${errorMessage ? `="${errorMessage}"` : ''}`;
-    if (mode === 'multi' && !truncate)
-        attrs += ` truncate="false"`;
-    if (customDisplayValue)
-        attrs += ` custom-display-value`;
-    if (selectIcon)
-        attrs += ` select-icon="${selectIcon}"`;
-    const scriptSelectedValues = mode === 'multi' ? selectedValues.split(',') : selectedValues;
-    const resetButtonId = `resetBtn_${id}`;
-    return `
-        <div style="width:75vw">
-            <div style="position: relative; min-width: 200px; width: 100%">
-                <xpl-select${attrs} placeholder="Choose ${mode === 'multi' ? 'Multiple' : 'One'}">
-                    ${customDisplayValue
-        ? `<div slot="custom-display-value">${customDisplayValueContent || ''}</div>`
-        : ''}
-                </xpl-select>
-                <div style="margin-top: 10px;">
-                    <button id="${resetButtonId}" style="padding: 8px 16px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;">
-                        Reset Select
-                    </button>
-                </div>
-            </div>
-        </div>
-        <script>
-            ${script(choices, { id, scriptSelectedValues, preventDefault: preventDefaultTriggerDropdown })}
-            document.getElementById('${resetButtonId}').addEventListener('click', function() {
-                window['resetSelect_${id}']();
-            });
-        </script>
-    `;
-};
-Select.args = {
-    label: 'Select',
-    description: 'Lorem ipsum dolor sit amet',
-    disabled: false,
-    error: false,
-    errorMessage: '',
-    mode: 'single',
-    truncate: true,
-    customDisplayValue: false,
-    customDisplayValueContent: 'Custom Display Value',
-    selectedValues: '',
-    subtitle: 'Subtitle',
-    selectIcon: '',
-    preventDefaultTriggerDropdown: false,
-};
-Select.parameters = {
-    layout: 'centered',
-    'web-component': {
-        render: Select(Select.args),
-    },
-    html: {
-        render: ((_) => {
-        })(Select.args),
-    },
-    design: {
-        type: 'figma',
-        url: 'https://www.figma.com/design/MjjYek73MFnHmVNdm45Sd1/Apollo-Web?node-id=6-1396&p=f&t=vVY2x58f7oPprNSr-11',
-    },
-};
-export const SelectWValues = ({ label, description, disabled, error, errorMessage, mode, truncate, customDisplayValue, customDisplayValueContent, selectedValues, selectIcon, preventDefaultTriggerDropdown, }) => {
-    const scriptSelectedValues = mode === 'multi' ? selectedValues.split(',') : selectedValues;
-    const choices = [
-        {
-            label: 'Choice 1',
-            value: 'choice-1',
-        },
-        {
-            label: 'Choice 2',
-            value: 'choice-2',
-        },
-        {
-            label: 'Choice 3',
-            value: 'choice-3',
-        },
-        {
-            label: 'Choice 4',
-            value: 'choice-4',
-        },
-        {
-            label: 'Choice 5',
-            value: 'choice-5',
-        },
-        {
-            label: 'Choice 6',
-            value: 'choice-6',
-        },
-    ];
-    const id = uuid();
-    let attrs = ` id="${id}"`;
-    if (label)
-        attrs += ` label="${label}"`;
-    if (description)
-        attrs += ` description="${description}"`;
-    if (mode !== 'single')
-        attrs += ` mode="${mode}"`;
-    if (disabled)
-        attrs += ` disabled`;
-    if (error)
-        attrs += ` error${errorMessage ? `="${errorMessage}"` : ''}`;
-    if (mode === 'multi' && !truncate)
-        attrs += ` truncate="false"`;
-    if (customDisplayValue)
-        attrs += ` custom-display-value`;
-    if (selectIcon)
-        attrs += ` select-icon="${selectIcon}"`;
-    const resetButtonId = `resetBtn_${id}`;
-    return `
-        <div style="width:75vw">
-            <div style="position: relative; min-width: 200px; width: 100%">
-                <xpl-select${attrs} placeholder="Choose ${mode === 'multi' ? 'Multiple' : 'One'}">
-                    ${customDisplayValue
-        ? `<div slot="custom-display-value">${customDisplayValueContent || ''}</div>`
-        : ''}
-                </xpl-select>
-                <div style="margin-top: 10px;">
-                    <button id="${resetButtonId}" style="padding: 8px 16px; background: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;">
-                        Reset Select
-                    </button>
-                </div>
-            </div>
-        </div>
-        <script>
-            ${script(choices, { id, scriptSelectedValues, preventDefault: preventDefaultTriggerDropdown })}
-            document.getElementById('${resetButtonId}').addEventListener('click', function() {
-                window['resetSelect_${id}']();
-            });
-        </script>
-    `;
-};
-SelectWValues.args = {
-    label: 'Select',
-    description: 'Lorem ipsum dolor sit amet',
-    disabled: false,
-    error: false,
-    errorMessage: '',
-    mode: 'multi',
-    truncate: true,
-    customDisplayValue: false,
-    customDisplayValueContent: 'Custom Display Value',
-    selectedValues: 'choice-1,choice-2',
-    selectIcon: '',
-    preventDefaultTriggerDropdown: false,
-};
-SelectWValues.parameters = {
-    layout: 'centered',
-    'web-component': {
-        render: SelectWValues(SelectWValues.args),
-    },
-    html: {
-        render: ((_) => {
-        })(SelectWValues.args),
-    },
-};