143 lines
3.0 KiB
TypeScript
143 lines
3.0 KiB
TypeScript
import type { Meta, StoryFn } from '@storybook/react';
|
|
import { Box, Settings, Users } from 'lucide-react';
|
|
import {
|
|
ReactStateDeclaration,
|
|
UIRouter,
|
|
UIRouterReact,
|
|
UIView,
|
|
hashLocationPlugin,
|
|
servicesPlugin,
|
|
} from '@uirouter/react';
|
|
|
|
import { WidgetTabs, Tab } from './WidgetTabs';
|
|
|
|
// Create a UIRouter instance with a dummy state so `Link to="."` works
|
|
function withRouter(Story: () => JSX.Element) {
|
|
const router = new UIRouterReact();
|
|
router.plugin(servicesPlugin);
|
|
router.plugin(hashLocationPlugin);
|
|
|
|
// Register a dummy state that renders the Story
|
|
const storyState: ReactStateDeclaration = {
|
|
name: 'storybook',
|
|
url: '/?tab',
|
|
component: Story,
|
|
};
|
|
router.stateRegistry.register(storyState);
|
|
|
|
// Set initial state (UIRouter component calls start() automatically)
|
|
router.urlService.rules.initial({ state: 'storybook' });
|
|
router.urlService.rules.otherwise({ state: 'storybook' });
|
|
|
|
return (
|
|
<UIRouter router={router}>
|
|
<UIView />
|
|
</UIRouter>
|
|
);
|
|
}
|
|
|
|
const meta: Meta<typeof WidgetTabs> = {
|
|
title: 'Components/Widget/WidgetTabs',
|
|
component: WidgetTabs,
|
|
decorators: [withRouter],
|
|
};
|
|
|
|
export default meta;
|
|
|
|
const defaultTabs: Tab[] = [
|
|
{
|
|
name: 'Overview',
|
|
widget: <div>Overview content</div>,
|
|
selectedTabParam: 'overview',
|
|
},
|
|
{
|
|
name: 'Settings',
|
|
widget: <div>Settings content</div>,
|
|
selectedTabParam: 'settings',
|
|
},
|
|
{
|
|
name: 'Users',
|
|
widget: <div>Users content</div>,
|
|
selectedTabParam: 'users',
|
|
},
|
|
];
|
|
|
|
const tabsWithIcons: Tab[] = [
|
|
{
|
|
name: 'Overview',
|
|
icon: Box,
|
|
widget: <div>Overview content</div>,
|
|
selectedTabParam: 'overview',
|
|
},
|
|
{
|
|
name: 'Settings',
|
|
icon: Settings,
|
|
widget: <div>Settings content</div>,
|
|
selectedTabParam: 'settings',
|
|
},
|
|
{
|
|
name: 'Users',
|
|
icon: Users,
|
|
widget: <div>Users content</div>,
|
|
selectedTabParam: 'users',
|
|
},
|
|
];
|
|
|
|
interface StoryArgs {
|
|
currentTabIndex: number;
|
|
tabs: Tab[];
|
|
useContainer?: boolean;
|
|
}
|
|
|
|
function Template({ currentTabIndex, tabs, useContainer }: StoryArgs) {
|
|
return (
|
|
<WidgetTabs
|
|
currentTabIndex={currentTabIndex}
|
|
tabs={tabs}
|
|
useContainer={useContainer}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export const Default: StoryFn<StoryArgs> = Template.bind({});
|
|
Default.args = {
|
|
currentTabIndex: 0,
|
|
tabs: defaultTabs,
|
|
};
|
|
|
|
export const WithIcons: StoryFn<StoryArgs> = Template.bind({});
|
|
WithIcons.args = {
|
|
currentTabIndex: 0,
|
|
tabs: tabsWithIcons,
|
|
};
|
|
|
|
export const SecondTabSelected: StoryFn<StoryArgs> = Template.bind({});
|
|
SecondTabSelected.args = {
|
|
currentTabIndex: 1,
|
|
tabs: tabsWithIcons,
|
|
};
|
|
|
|
export const WithoutContainer: StoryFn<StoryArgs> = Template.bind({});
|
|
WithoutContainer.args = {
|
|
currentTabIndex: 0,
|
|
tabs: tabsWithIcons,
|
|
useContainer: false,
|
|
};
|
|
|
|
export const TwoTabs: StoryFn<StoryArgs> = Template.bind({});
|
|
TwoTabs.args = {
|
|
currentTabIndex: 0,
|
|
tabs: [
|
|
{
|
|
name: 'Tab 1',
|
|
widget: <div>Tab 1 content</div>,
|
|
selectedTabParam: 'tab1',
|
|
},
|
|
{
|
|
name: 'Tab 2',
|
|
widget: <div>Tab 2 content</div>,
|
|
selectedTabParam: 'tab2',
|
|
},
|
|
],
|
|
};
|