@kadconsulting/dry
Version:
KAD Reusable Component Library
70 lines • 2.31 kB
JavaScript
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