Storybook tips: Contextを使っているコンポーネントのStoryを書く

export const Header = memo(() => {
  const { user } = useContext(AuthContext)

  return (
    <header>
      <ServiceLogo></ServiceLogo>
      {
        user && user.type === 'teacher' && <Text>{user.name}</Text>
      }
      {
        user && <LogOutButton></LogOutButton>
      }
    </header>
  )
})

export default {
  component: Header
} as ComponentMeta<typeof Header>

// 以下のそれぞれのストーリーで、Providerから返ってくるuserのオブジェクトが異なる
export const ByTeacher: ComponentStoryObj<typeof Header> = {
}
export const ByLogoutUser: ComponentStoryObj<typeof Header> = {
}
export const ByStudent: ComponentStoryObj<typeof Header> = {
}

const withChakra = (StoryFn: Function) => {
  return (
    <ChakraProvider theme={theme}>
      <StoryFn />
    </ChakraProvider>
  );
};

export const decorators = [withChakra]; // ここに書き足すと、全ストーリーに同じProviderが強制的に適用される

export const ByTeacher: ComponentStoryObj<typeof Header> = {
  decorators: [
    (Story) => {
      return (
        <AuthContext.Provider
          value={{
            user: {
              type: 'teacher',
              name: 'taro'
            },
            dispatch: () => undefined as any,
          }}
        >
          <Story />
        </AuthContext.Provider>
      );
    },
  ],
};