[GH-ISSUE #699] Introduce React Storybook #369

New issue

Closed

opened 2026-03-03 00:20:37 +03:00 by kerem · 0 comments

kerem commented

2026-03-03 00:20:37 +03:00

Owner

Originally created by @Rokt33r on GitHub (Nov 28, 2020).
Original GitHub issue: https://github.com/BoostIO/BoostNote-App/issues/699

Originally assigned to: @rohjs on GitHub.

FYI: how to apply theme

import styled from '../lib/styled'
import React, { FC, PropsWithChildren, ComponentType } from 'react'
import { ThemeProvider } from 'styled-components'
import { lightTheme, darkTheme } from '../lib/styled/themes'
import { Story } from '@storybook/react/types-6-0'

interface ThemedWrapperProps {
  theme?: 'light' | 'dark'
}

export const ThemedWrapper: FC<ThemedWrapperProps> = ({
  theme = 'light',
  children,
}) => {
  return (
    <ThemeProvider theme={theme === 'light' ? lightTheme : darkTheme}>
      <StyledBackground>{children}</StyledBackground>
    </ThemeProvider>
  )
}

const StyledBackground = styled.div`
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px;
  background-color: ${({ theme }) => theme.baseBackgroundColor};
  box-sizing: border-box;
`

export type ThemedStory<P> = Story<
  { theme: 'dark' | 'light' } & PropsWithChildren<P>
>

export function createThemedTemplate<P = {}>(
  Component: ComponentType<P>
): {
  Template: ThemedStory<P>
  themeArgType: {}
} {
  return {
    Template: ({ theme, ...args }: any) => {
      return (
        <ThemedWrapper theme={theme}>
          <Component {...args} />
        </ThemedWrapper>
      )
    },
    themeArgType: {
      defaultValue: 'light',
      control: {
        type: 'inline-radio',
        options: ['light', 'dark'],
      },
    },
  }
}

Originally created by @Rokt33r on GitHub (Nov 28, 2020). Original GitHub issue: https://github.com/BoostIO/BoostNote-App/issues/699 Originally assigned to: @rohjs on GitHub. FYI: how to apply theme ```ts import styled from '../lib/styled' import React, { FC, PropsWithChildren, ComponentType } from 'react' import { ThemeProvider } from 'styled-components' import { lightTheme, darkTheme } from '../lib/styled/themes' import { Story } from '@storybook/react/types-6-0' interface ThemedWrapperProps { theme?: 'light' | 'dark' } export const ThemedWrapper: FC<ThemedWrapperProps> = ({ theme = 'light', children, }) => { return ( <ThemeProvider theme={theme === 'light' ? lightTheme : darkTheme}> <StyledBackground>{children}</StyledBackground> </ThemeProvider> ) } const StyledBackground = styled.div` position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 10px; background-color: ${({ theme }) => theme.baseBackgroundColor}; box-sizing: border-box; ` export type ThemedStory = Story< { theme: 'dark' | 'light' } & PropsWithChildren > export function createThemedTemplate( Component: ComponentType ): { Template: ThemedStory themeArgType: {} } { return { Template: ({ theme, ...args }: any) => { return ( <ThemedWrapper theme={theme}> <Component {...args} /> </ThemedWrapper> ) }, themeArgType: { defaultValue: 'light', control: { type: 'inline-radio', options: ['light', 'dark'], }, }, } } ```

kerem

2026-03-03 00:20:37 +03:00

closed this issue
added the
documentation 📚
label

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

starred/BoostNote-App#369

No description provided.

Rows
Columns