Storybook 적용

설치

# 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,
};