설치
# Add Storybook
npx -p @storybook/cli sb init
시작
# Start the component explorer on port 6006;
yarn storybook
Hamburger.tsx
import { FC } from 'react'
import styles from "./Hamburger.module.css";
interface Props {
onToggle?: () => void;
isOpen: boolean;
fixed?: boolean;
dark?: boolean;
left?: boolean;
}
const Hamburger:FC<Props> = ({isOpen, fixed=false, dark=false, left=false, ...props}:Props)=> {
const leftStyle = left ? styles.left : styles.right;
const darkStyle = dark ? styles.dark : '';
return (<>
<button
aria-label="Open Menu"
className={`${isOpen && !fixed ? styles.opend : ""} ${styles.hamburger}`}
onClick={props.onToggle}>
<div className={`${leftStyle} ${darkStyle} ${styles.wrapper}`}>
<i className={styles.line}></i>
<i className={styles.line}></i>
<i className={styles.line}></i>
</div>
</button>
</>);
}
export default Hamburger
Hamburger.stories.tsx
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { useArgs } from '@storybook/client-api';
import Hamburder from '../components/Hamburger';
export default {
title: 'Example/Hamburger',
component: Hamburder,
} as ComponentMeta<typeof Hamburder>;
const Template: ComponentStory<typeof Hamburder> = (args) =>{
const [{ isOpen }, updateArgs] = useArgs();
const handleToggle = () =>{
updateArgs({isOpen: !isOpen});
args.onToggle?.();
}
return (
<header style={{justifyContent: args.left ? "flex-start" : "flex-end", padding: "0 20px", height:64, display:"flex", alignItems: "center", background: args.dark ? "rgb(0, 21, 41)" :"#EFEFEF"}}>
<span>
<Hamburder isOpen={isOpen} left={args.left} dark={args.dark} fixed={args.fixed} onToggle={handleToggle} />
</span>
</header>
);
}
export const Basic = Template.bind({});
Basic.args = {
left: false,
dark: false,
fixed: false,
};