import { ComponentMeta } from '@storybook/react'; import { Button, SlideOut, SlideOutEnterFrom, SlideOutSize } from '@tih/ui'; import React, { useState } from 'react'; const slideOutEnterFrom: ReadonlyArray = ['start', 'end']; const slideOutSize: ReadonlyArray = ['sm', 'md', 'lg', 'xl']; export default { title: 'SlideOut', component: SlideOut, argTypes: { title: { control: 'text', }, enterFrom: { options: slideOutEnterFrom, control: { type: 'select' }, }, size: { options: slideOutSize, control: { type: 'select' }, }, }, } as ComponentMeta; export function Basic({ children, enterFrom, size, title, }: Pick< React.ComponentProps, 'children' | 'enterFrom' | 'size' | 'title' >) { const [isShown, setIsShown] = useState(false); return (
); } Basic.args = { title: 'Navigation', children:
Hello World
, enterFrom: 'end', size: 'md', };