@kadconsulting/dry/dist/src/components/FolderSelector/FolderSelector.stories.js

KAD Reusable Component Library

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { useRef } from 'react';
import FolderSelector from './FolderSelector';
export default {
    title: 'Components/FolderSelector',
    component: FolderSelector,
    argTypes: {
        tabs: {
            control: 'object',
            description: 'Array of tab objects with id, title, and content',
        },
    },
};
// Utility function to generate tabs
const generateTabs = (num) => {
    return Array.from({ length: num }, (_, index) => ({
        id: `tab${index + 1}`,
        title: `Tab ${index + 1}`,
        content: `Content for Tab ${index + 1}`,
    }));
};
const Template = (args) => (_jsx(FolderSelector, { ...args }));
export const Default = Template.bind({});
Default.args = {
    tabs: generateTabs(3),
};
export const WithManyTabs = Template.bind({});
WithManyTabs.args = {
    tabs: generateTabs(10),
};
export const WithRef = () => {
    const ref = useRef(null);
    const tabs = Default.args.tabs;
    const handleClick = () => {
        ref.current?.setActiveTab('tab2');
    };
    return (_jsxs(_Fragment, { children: [_jsx("button", { onClick: handleClick, children: "Set Active Tab to Tab 2" }), _jsx(FolderSelector, { ref: ref, tabs: tabs })] }));
};
export const CustomContent = Template.bind({});
CustomContent.args = {
    tabs: [
        {
            id: 'tab1',
            title: 'Tab 1',
            content: (_jsxs("div", { children: [_jsx("h3", { children: "Custom Heading" }), _jsx("p", { children: "Some custom content." })] })),
        },
        {
            id: 'tab2',
            title: 'Tab 2',
            content: (_jsx("div", { children: _jsx("img", { src: 'image_url.jpg', alt: 'Custom Image' }) })),
        },
    ],
};
export const Vertical = Template.bind({});
Vertical.args = {
    tabs: [
        {
            id: 'tab1',
            title: 'Tab 1',
            content: (_jsxs("div", { children: [_jsx("h3", { children: "Custom Heading" }), _jsx("p", { children: "Some custom content." })] })),
        },
        {
            id: 'tab2',
            title: 'Tab 2',
            content: (_jsx("div", { children: _jsx("div", { children: "test content" }) })),
        },
    ],
    vertical: true,
};
//# sourceMappingURL=FolderSelector.stories.js.map