Has anyone pulled real data into storybook?

Get Help and Help Others
1

Has anyone gotten this to work?

I have a themes database so I can skin my app w/different themes

I want to choose the desired theme in Storybook from the database of themes – not by manipulating the theme mock return data

I want to pull from my api backend for real (based upon a chosen param) and then wrap that theme around all stories globally

The same way I retrieve and wrap the theme around my pages in my layout

2

I have an app which can be put behind any Url – I search a list of url fragments to find the 1st one the Url, and that determines which theme the app will use

in my App.tsx

  <RedwoodApolloProvider>
    <ThemesFromUrlCell hrefLike={window.location.href} />
    <Routes />
  </RedwoodApolloProvider>

ThemesFromUrlCell.tsx comes back with a lot of theme info which gets set into a themeState

In my ThemedPageLayout.tsx I merge my custom theme with the base [mui] provided theme and wrap the page with the mui theme provider

const ThemedPageLayout = ({ children }) => {
  const defaultTheme = useTheme() // get mui default theme
  const themeInfo = ThemeStore.useState((s) => s) // get chosen overrides
  const muiTheme = rehydrateTheme(defaultTheme, themeInfo.theme) // apply overrides
  return (
      <ThemeProvider theme={muiTheme}>
        {children}
      </ThemeProvider>
  )
}

all of my components need only then use the provided theme and it’s overrides

const theme = useTheme()
return (
    <FormControlLabel
        sx={theme['colorControls']}
    />
)

I have a mocked return for the ThemesFromUrlCell – but I don’t want to use it in all my other stories.

I have a dropdown menu in the Storybook controls bar which I want to load with url frags to replace it’s dummy data

export const globalTypes = {
  fragment: {
    name: 'Url-Fragment',
    description: 'href url frag',
    defaultValue: 'demo',
    toolbar: {
      icon: 'circlehollow',
      // Array of plain string values as if taken from ThemeFromUrlFrag.urlFrag column
      items: ['not', 'real', 'data'],
      showName: true,
      dynamicTitle: true,
    },
  },
};

I want the selection of a fragment from that menu to be used to select which theme my components are given

3

Making a network request in Storybook seems strange to me.

What if you wrote a script that queries your themes and generated a stories file per component with the theme as a setting?

1 Like
4

@dthyresson thanks for the sanity check!

Executing a script to change themes in Storybook is just fine.

I extracted the mock theme data to a single file that I can rewrite at will, then use that file as desired in Storybook.

5

Problem now is that I get a

Warning: React has detected a change in the order of Hooks called by StorybookProvider. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks

   Previous render            Next render
   ------------------------------------------------------
1. useState                   useState
2. useEffect                  useEffect
3. undefined                  useContext
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

    at StorybookProvider (http://localhost:7910/main.iframe.bundle.js:35218:3)
    at InnerThemeProvider (http://localhost:7910/main.iframe.bundle.js:12166:70)
    at ThemeProvider (http://localhost:7910/main.iframe.bundle.js:11907:5)
    at ThemeProvider (http://localhost:7910/main.iframe.bundle.js:12186:5)
    at StyledEngineProvider (http://localhost:7910/main.iframe.bundle.js:12071:5)
    at unboundStoryFn (http://localhost:7910/main.iframe.bundle.js:53085:12)
    at ErrorBoundary (http://localhost:7910/main.iframe.bundle.js:50084:5)

this is my web/config/storybook.preview file

import { createTheme } from '@mui/material/styles'
import { StyledEngineProvider } from '@mui/material'
import { ThemeProvider } from '@mui/material/styles'
import themeOverrides from 'src/mocks/mock-theme'
import defaultTheme from 'src/mocks/mock-theme-default'
import { rehydrateTheme } from 'src/states/ThemeStore'
const muiTheme = rehydrateTheme(createTheme(defaultTheme), themeOverrides) // apply overrides

export const decorators = [
  (Story) => (
    <StyledEngineProvider injectFirst>
      <ThemeProvider theme={muiTheme}>
        <Story />
      </ThemeProvider>
    </StyledEngineProvider>
  )
]
6

Hi @ajoslin103 - thanks for reporting this, and sorry you are running into it.

Will you please open an issue on GitHub? While a nice to have, if you can also provide a link to a repo with which we can reproduce this issue; that will greatly help us in diagnosing the problem.

7

do we have an easy-up way to create a repo ?

gitpod or something ?

or are we still - create from scratch

8

I think the suggestion is to fork GitHub - redwoodjs/gitpod-starter: Create a new Redwood project using Gitpod ( cc @dom / @danny )

1 Like