Discover AI-native insights at Testμ Conference‘25

How to use ThemeStack method in storybook-root

Best JavaScript code snippet using storybook-root

preview.js

1import { document } from 'global';2import React, { Fragment, useEffect } from 'react';3import isChromatic from 'chromatic/isChromatic';4import {5  Global,6  ThemeProvider,7  themes,8  createReset,9  convert,10  styled,11  useTheme,12} from '@storybook/theming';13import { withCssResources } from '@storybook/addon-cssresources';14import { DocsPage } from '@storybook/addon-docs/blocks';15import addHeadWarning from './head-warning';16if (process.env.NODE_ENV === 'development') {17  if (!process.env.DOTENV_DEVELOPMENT_DISPLAY_WARNING) {18    addHeadWarning('dotenv-env', 'Dotenv development file not loaded');19  }20  if (!process.env.STORYBOOK_DISPLAY_WARNING) {21    addHeadWarning('env-glob', 'Global storybook env var not loaded');22  }23  if (process.env.DISPLAY_WARNING) {24    addHeadWarning('env-extra', 'Global non-storybook env var loaded');25  }26}27addHeadWarning('preview-head-not-loaded', 'Preview head not loaded');28addHeadWarning('dotenv-file-not-loaded', 'Dotenv file not loaded');29const ThemeBlock = styled.div(30  {31    position: 'absolute',32    top: 0,33    left: 0,34    right: '50vw',35    width: '50vw',36    height: '100vh',37    bottom: 0,38    overflow: 'auto',39    padding: 10,40  },41  ({ theme }) => ({42    background: theme.background.app,43    color: theme.color.defaultText,44  }),45  ({ side }) =>46    side === 'left'47      ? {48          left: 0,49          right: '50vw',50        }51      : {52          right: 0,53          left: '50vw',54        }55);56const ThemeStack = styled.div(57  {58    position: 'relative',59    minHeight: 'calc(50vh - 15px)',60  },61  ({ theme }) => ({62    background: theme.background.app,63    color: theme.color.defaultText,64  })65);66const ThemedSetRoot = () => {67  const theme = useTheme();68  useEffect(() => {69    document.body.style.background = theme.background.app;70    document.body.style.color = theme.defaultText;71    return () => {72      //73    };74  });75  return null;76};77export const decorators = [78  withCssResources,79  (StoryFn, { globals: { theme = 'light' } }) => {80    switch (theme) {81      case 'side-by-side': {82        return (83          <Fragment>84            <ThemeProvider theme={convert(themes.light)}>85              <Global styles={createReset} />86            </ThemeProvider>87            <ThemeProvider theme={convert(themes.light)}>88              <ThemeBlock side="left">89                <StoryFn />90              </ThemeBlock>91            </ThemeProvider>92            <ThemeProvider theme={convert(themes.dark)}>93              <ThemeBlock side="right">94                <StoryFn />95              </ThemeBlock>96            </ThemeProvider>97          </Fragment>98        );99      }100      case 'stacked': {101        return (102          <Fragment>103            <ThemeProvider theme={convert(themes.light)}>104              <Global styles={createReset} />105            </ThemeProvider>106            <ThemeProvider theme={convert(themes.light)}>107              <ThemeStack side="left">108                <StoryFn />109              </ThemeStack>110            </ThemeProvider>111            <ThemeProvider theme={convert(themes.dark)}>112              <ThemeStack side="right">113                <StoryFn />114              </ThemeStack>115            </ThemeProvider>116          </Fragment>117        );118      }119      default: {120        return (121          <ThemeProvider theme={convert(themes[theme])}>122            <Global styles={createReset} />123            <ThemedSetRoot />124            <StoryFn />125          </ThemeProvider>126        );127      }128    }129  },130];131export const parameters = {132  exportedParameter: 'exportedParameter',133  a11y: {134    config: {},135    options: {136      checks: { 'color-contrast': { options: { noScroll: true } } },137      restoreScroll: true,138    },139  },140  options: {141    storySort: (a, b) =>142      a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, undefined, { numeric: true }),143  },144  docs: {145    theme: themes.light,146    page: () => <DocsPage subtitleSlot={({ kind }) => `Subtitle: ${kind}`} />,147  },148};149export const globals = {150  foo: 'fooValue',151};152export const globalTypes = {153  foo: { defaultValue: 'fooDefaultValue' },154  bar: { defaultValue: 'barDefaultValue' },155  theme: {156    name: 'Theme',157    description: 'Global theme for components',158    defaultValue: isChromatic() ? 'stacked' : 'light',159    toolbar: {160      icon: 'circlehollow',161      items: [162        { value: 'light', icon: 'circlehollow', title: 'light' },163        { value: 'dark', icon: 'circle', title: 'dark' },164        { value: 'side-by-side', icon: 'sidebar', title: 'side by side' },165        { value: 'stacked', icon: 'bottombar', title: 'stacked' },166      ],167    },168  },169  locale: {170    name: 'Locale',171    description: 'Internationalization locale',172    defaultValue: 'en',173    toolbar: {174      icon: 'globe',175      items: [176        { value: 'en', right: 'ðºð¸', title: 'English' },177        { value: 'es', right: 'ðªð¸', title: 'EspaÃ±ol' },178        { value: 'zh', right: 'ð¨ð³', title: 'ä¸æ' },179        { value: 'kr', right: 'ð°ð·', title: 'íêµì´' },180      ],181    },182  },...

ThemeProvider.jsx

Source: ThemeProvider.jsx

1import React, { Component } from 'react';2import _ from 'lodash';3import PropTypes from 'prop-types';4import { ThemeProvider as EThemeProvider } from 'emotion-theming';5import { generateTheme } from './theme';6import { setRuntimeTheme } from './runtime';7let themeStack = [];8const themeMap = {};9const updateRuntimeTheme = () => {10    setRuntimeTheme(themeMap[themeStack[themeStack.length - 1]]);11};12class ThemeProvider extends Component {13    constructor(props) {14        super(props);15        const theme = this.getMergedTheme(props.theme);16        this.cache = JSON.stringify(theme);17        this.state = {18            theme19        };20        this.uid = _.uniqueId('_theme_provider_');21        themeStack.push(this.uid);22        themeMap[this.uid] = theme;23        updateRuntimeTheme();24    }25    static propTypes = {26        /**27         * èªå®ä¹ä¸»é¢28         */29        theme: PropTypes.object.isRequired30    };31    getMergedTheme = theme => {32        return generateTheme(theme);33    };34    componentWillReceiveProps(nextProps) {35        const { theme } = nextProps;36        if (JSON.stringify(theme) !== this.cache) {37            const mergedTheme = this.getMergedTheme(theme);38            this.cache = JSON.stringify(theme);39            this.setState(40                {41                    theme: mergedTheme42                },43                () => {44                    themeMap[this.uid] = mergedTheme;45                    updateRuntimeTheme();46                }47            );48        }49    }50    componentWillUnmount = () => {51        delete themeMap[this.uid];52        themeStack = themeStack.filter(uid => uid !== this.uid);53        updateRuntimeTheme();54    };55    render() {56        // eslint-disable-next-line no-unused-vars57        const { theme: _theme, ...rest } = this.props;58        const { theme } = this.state;59        return <EThemeProvider theme={theme} {...rest} />;60    }61}...

Using AI Code Generation

1import React from 'react';2import ThemeStack from 'storybook-root-decorator';3import { storiesOf } from '@storybook/react';4import { withInfo } from '@storybook/addon-info';5import { withKnobs } from '@storybook/addon-knobs';6storiesOf('test', module)7  .addDecorator(withInfo)8  .addDecorator(withKnobs)9  .addDecorator(ThemeStack)10  .add('test', () => {11    return <div>test</div>;12  });13import React from 'react';14import { ThemeProvider } from 'styled-components';15import { lightTheme } from '../src/theme';16export default story => (17  <ThemeProvider theme={lightTheme}>{story()}</ThemeProvider>18);19export const lightTheme = {20  colors: {21  },22};23import { configure } from '@storybook/react';24configure(require.context('../src', true, /\.stories\.js$/), module);25const path = require('path');26module.exports = ({ config }) => {27  config.module.rules.push({28    loaders: [require.resolve('@storybook/addon-storysource/loader')],29  });30  config.resolve.alias = {31    'storybook-root-decorator': path.resolve(__dirname, '../storybook-root-decorator.js'),32  };33  return config;34};35import React from 'react';36import { ThemeProvider } from 'styled-components';37import { lightTheme } from '../src/theme';38export default story => (39  <ThemeProvider theme={lightTheme}>{story()}</ThemeProvider>40);41const path = require('path');42module.exports = ({ config }) => {43  config.module.rules.push({44    loaders: [require.resolve('@storybook/addon-storysource/loader')],45  });46  config.resolve.alias = {47    'storybook-root-decorator': path.resolve(__dirname

Using AI Code Generation

1import { ThemeStack } from 'storybook-root-decorator';2import { storiesOf } from '@storybook/react';3import { withKnobs } from '@storybook/addon-knobs';4import { withInfo } from '@storybook/addon-info';5import MyComponent from './MyComponent';6const stories = storiesOf('MyComponent', module);7stories.addDecorator(withKnobs);8stories.addDecorator(withInfo);9stories.add('default', () => {10  return <MyComponent />;11});12stories.add('dark theme', () => {13  return (14    <ThemeStack themes={['dark']}>15  );16});17stories.add('dark theme + custom theme', () => {18  return (19    <ThemeStack themes={['dark', { background: 'blue' }]}>20  );21});22stories.add('dark theme + custom theme + custom theme', () => {23  return (24    <ThemeStack themes={['dark', { background: 'blue' }, { background: 'red' }]}>25  );26});27import React from 'react';28import PropTypes from 'prop-types';29import styled, { ThemeProvider } from 'styled-components';30  background: ${props => props.theme.background};31  color: ${props => props.theme.color};32`;33const MyComponent = ({ theme }) => {34  return (35    <ThemeProvider theme={theme}>36  );37};38MyComponent.propTypes = {39};40MyComponent.defaultProps = {41  theme: {42  },43};44export default MyComponent;45import { addDecorator } from '@storybook/react';46import { withThemesProvider } from 'storybook-addon-styled-component-theme';47import { ThemeProvider } from 'styled-components';48import { defaultTheme, darkTheme } from '../src/theme';49const themes = [defaultTheme, darkTheme];50addDecorator(withThemesProvider(themes));51export const defaultTheme = {52};53export const darkTheme = {

Using AI Code Generation

1import { ThemeStack } from 'storybook-root';2import { storiesOf } from '@storybook/react';3import { withKnobs, text } from '@storybook/addon-knobs';4storiesOf('ThemeStack', module)5  .addDecorator(withKnobs)6  .add('default', () => (7      theme={text('Theme', 'light')}8      themeStack={text('Theme Stack', 'light|dark')}9  ));10export { ThemeStack } from './ThemeStack';11import React, { Component } from 'react';12import PropTypes from 'prop-types';13export class ThemeStack extends Component {14  static propTypes = {15  };16  render() {17    const { theme, themeStack, children } = this.props;18    const themeStackArray = themeStack.split('|');19    const index = themeStackArray.indexOf(theme);20    const themeStackArraySplice = themeStackArray.splice(index);21    const themeStackString = themeStackArraySplice.join(' ');22    return (23      <div className={themeStackString}>24        {children}25    );26  }27}28.light {29  background-color: #fff;30}31.dark {32  background-color: #000;33}34import React from 'react';35import { shallow } from 'enzyme';36import { ThemeStack } from './ThemeStack';37describe('ThemeStack', () => {38  it('renders without crashing', () => {39    const wrapper = shallow(40    );41    expect(wrapper).toMatchSnapshot();42  });43});44import { ThemeStack } from 'storybook-root';45addParameters({46  options: {47  },48});49import { ThemeStack } from 'storybook-root';50addDecorator(storyFn =>

Using AI Code Generation

1import { ThemeStack } from 'storybook-root-decorator';2import { theme } from 'theme';3export const decorators = [ThemeStack(theme)];4export const parameters = {5  actions: { argTypesRegex: '^on[A-Z].*' },6};7import { createMuiTheme } from '@material-ui/core/styles';8import { red } from '@material-ui/core/colors';9const theme = createMuiTheme({10  palette: {11    primary: {12    },13    secondary: {14    },15    error: {16    },17    background: {18    },19  },20});21export { theme };22import React from 'react';23import { Button } from './button';24export default {25  argTypes: {26    backgroundColor: { control: 'color' },27  },28};29const Template = (args) => <Button {...args} />;30export const Primary = Template.bind({});31Primary.args = {32};33export const Secondary = Template.bind({});34Secondary.args = {35};36export const Large = Template.bind({});37Large.args = {38};39export const Small = Template.bind({});40Small.args = {41};42import React from 'react';43import { Header } from './header';44export default {45};46const Template = (args) => <Header {...args} />;47export const Default = Template.bind({});48Default.args = {49};50import React from 'react';51import { Icon } from './icon';52export default {53};54const Template = (args) => <Icon {...args} />;55export const Default = Template.bind({});56Default.args = {57};58import React from 'react';59import { Input } from

Using AI Code Generation

1import { ThemeStack } from 'storybook-root-decorator'2  (Story) => (3export const parameters = {4  actions: { argTypesRegex: '^on[A-Z].*' },5}6import { ThemeStack } from 'storybook-root-decorator'7  (Story) => (8export const parameters = {9  actions: { argTypesRegex: '^on[A-Z].*' },10}11module.exports = {12  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],13  webpackFinal: async (config) => {14    config.module.rules.push({15      include: path.resolve(__dirname, '../'),16    })17  },18}19import { ThemeProvider } from 'styled-components'20import { ThemeStack } from 'storybook-root-decorator'21import { theme } from '../src/theme'22  (Story) => (23    <ThemeProvider theme={theme}>24export const parameters = {25  actions: { argTypesRegex: '^on[A-Z].*' },26}27module.exports = {28  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],29  webpackFinal: async (config) => {30    config.module.rules.push({

Using AI Code Generation

1import { ThemeStack } from 'storybook-root'2import { useTheme } from '@material-ui/core/styles'3import { ThemeProvider } from '@material-ui/styles'4export const ThemeDecorator = (storyFn) => {5  const theme = useTheme()6  return (7    <ThemeProvider theme={theme}>8      <ThemeStack>{storyFn()}</ThemeStack>9}10import { ThemeDecorator } from '../test'11addDecorator(ThemeDecorator)12import { ThemeDecorator } from '../test'13addDecorator(ThemeDecorator)14module.exports = {15  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],16  webpackFinal: async (config) => {17    config.resolve.alias['storybook-root'] = path.resolve(__dirname, '..')18  },19}20import { createMuiTheme } from '@material-ui/core/styles'21import { ThemeProvider } from '@material-ui/styles'22import { ThemeStack } from 'storybook-root'23const theme = createMuiTheme({24  palette: {25    primary: {26    },27    secondary: {28    },29    error: {30    },31    background: {32    },33  },34})35export const ThemeDecorator = (storyFn) => {36  return (37    <ThemeProvider theme={theme}>38      <ThemeStack>{storyFn()}</ThemeStack>39}40import { ThemeDecorator } from './theme'41addDecorator(ThemeDecorator)42module.exports = {43  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],44  webpackFinal: async (config) => {45    config.resolve.alias['storybook-root'] = path.resolve(__dirname, '..')46  },47}

Using AI Code Generation

1import { ThemeProvider } from 'styled-components';2import { ThemeStack } from 'storybook-root-decorator';3import { theme } from './src/theme';4  Story => (5    <ThemeProvider theme={theme}>6];7import { ThemeProvider } from 'styled-components';8import { ThemeStack } from 'storybook-root-decorator';9import { theme } from '../src/theme';10  Story => (11    <ThemeProvider theme={theme}>12];13import { ThemeProvider } from 'styled-components';14import { ThemeStack } from 'storybook-root-decorator';15import { theme } from '../src/theme';16  Story => (17    <ThemeProvider theme={theme}>18];19import { ThemeProvider } from 'styled-components';20import { ThemeStack } from 'storybook-root-decorator';21import { theme } from '../src/theme';22  Story => (23    <ThemeProvider theme={theme}>24];

Using AI Code Generation

1import { ThemeStack } from 'storybook-root-decorator';2import { theme } from '@some/package';3export default {4  decorators: [ThemeStack([theme])],5};6export const test = () => (7);8import { ThemeStack } from 'storybook-root-decorator';9import { theme } from '@some/package';10export const decorators = [ThemeStack([theme])];11import { ThemeStack } from 'storybook-root-decorator';12import { theme } from '@some/package';13export const parameters = {14  decorators: [ThemeStack([theme])],15};16import { ThemeStack } from 'storybook-root-decorator';17import { theme } from '@some/package';18addDecorator(ThemeStack([theme]));19import { ThemeStack } from 'storybook-root-decorator';20import { theme } from '@some/package';21addParameters({22  decorators: [ThemeStack([theme])],23});24import { ThemeStack } from 'storybook-root-decorator';25import { theme } from '@some/package';26export const decorators = [ThemeStack([theme])];27import { ThemeStack } from 'storybook-root-decorator';28import { theme } from '@some/package';29export const parameters = {30  decorators: [ThemeStack([theme])],31};32import { ThemeStack } from 'storybook-root-decorator';33import { theme } from '@some/package';34addDecorator(ThemeStack([theme]));

Using AI Code Generation

1import { ThemeProvider } from "@material-ui/core/styles";2import { ThemeProvider as StyledComponentsThemeProvider } from "styled-components";3import { ThemeProvider as EmotionThemeProvider } from "@emotion/react";4import { theme } from "./src/theme";5import { ThemeStack } from "storybook-root-decorator";6import { themeDecorator } from "storybook-addon-material-ui";7  (Story) => (8    <ThemeStack themes={[theme]}>9      <ThemeProvider theme={theme}>10        <StyledComponentsThemeProvider theme={theme}>11          <EmotionThemeProvider theme={theme}>12];13import { createMuiTheme } from "@material-ui/core/styles";14const theme = createMuiTheme({15  palette: {16    primary: {17    },18    secondary: {19    },20  },21});22export { theme };23import React from "react";24import MyButton from "./MyButton";25export default {26};27const Template = (args) => <MyButton {...args} />;28export const Primary = Template.bind({});29Primary.args = {30};31export const Secondary = Template.bind({});32Secondary.args = {33};34export const Large = Template.bind({});35Large.args = {36};37export const Small = Template.bind({});38Small.args = {39};40import React from "react";41import Button from "@material-ui/core/Button";42import { makeStyles } from "@material-ui/core/styles";43const useStyles = makeStyles((theme) => ({44  root: {45    margin: theme.spacing(1),46  },47  label: {48  },49}));50const MyButton = (props) =>

Blogs

Check out the latest blogs from LambdaTest on this topic:

Failures may be inevitable, but that doesn’t prevent success

How to increase and maintain team motivation

The best agile teams are built from people who work together as one unit, where each team member has both the technical and the personal skills to allow the team to become self-organized, cross-functional, and self-motivated. These are all big words that I hear in almost every agile project. Still, the criteria to make a fantastic agile team are practically impossible to achieve without one major factor: motivation towards a common goal.

Stop Losing Money. Invest in Software Testing

I was once asked at a testing summit, “How do you manage a QA team using scrum?” After some consideration, I realized it would make a good article, so here I am. Understand that the idea behind developing software in a scrum environment is for development teams to self-organize.

Introducing LambdaTest Analytics: Test Reporting Made Awesome ????

Collecting and examining data from multiple sources can be a tedious process. The digital world is constantly evolving. To stay competitive in this fast-paced environment, businesses must frequently test their products and services. While it’s easy to collect raw data from multiple sources, it’s far more complex to interpret it properly.

An Interactive Guide To CSS Hover Effects

Building a website is all about keeping the user experience in mind. Ultimately, it’s about providing visitors with a mind-blowing experience so they’ll keep coming back. One way to ensure visitors have a great time on your site is to add some eye-catching text or image animations.

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.