General question about Storybook

Developer Support
1

I am running Storybook and want to point to the same themed components that Plasmic uses. I am using a registerChakraProvider(loader); in Plasmic. But How does StoryBook see this?

I assume I need a seperate React App not connected to Plasmic, yet point to the same theme files to extent the theme:

// Create react app
...
<ChakraProvider theme={theme}>
  <App />
</ChakraProvider>

Possible? Am I on the right track?

2

You ultimately just need to make sure Storybook sees the same provided theme, see https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack

3

I see. So I’ve added this code to .storyBook/preview.js but it does take effect.
Should I be using https://chakra-ui.com/getting-started/with-storybook ?
Maybe thats the issue.

import React from 'react';

import { ChakraProvider, ChakraProviderProps } from "@chakra-ui/react";
import { theme as proTheme } from "../theme/src/index";
import { extendTheme, theme as baseTheme } from "@chakra-ui/react";

const theme = extendTheme(
    {
      colors: { ...baseTheme.colors, brand: baseTheme.colors.yellow },
    },
    proTheme
  );

export const decorators = [
  (Story) => (
    
    <ChakraProvider theme={theme}>
      {Story()}
    </ChakraProvider>
  ),
];

export const parameters = {
  actions: { argTypesRegex: "^on[A-Z].*" },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
}
4

If I use the this, the Chakra docs say I need:

const theme = require('../path/to/your/theme')

export const parameters = {
  chakra: {
    theme,
  },
}

Yet this doesn’t work either