echoulen/storybook-addon-styled-component-theme

storybook addon

Hi there 👋, I'm Carlos Li

• 🔭 I’m currently working on NextDrive
• 🤔 I’m looking for help with PS5 buying (done 🎉)
• ♠️ Mainly use Kotlin (Springboot) > Dart (Flutter ) > Typescript (React > Vue > Nest js)

storybook-addon-styled-component-theme's Issues

How to export component with theme?

How to export component with theme? I would like to set theme and import component with that theme to app

Does it work for Vue? What should be passed to withThemesProvider?

I have 2 questions that remain after reading the readme:

• Can I expect this to work in Vue?
• What do theme1 and theme2 look like in the below example?

const themes = [theme1, theme2];
addDecorator(withThemesProvider(themes));

Are they JS objects? HTML els with styles? Or, something else?

Remember selected theme across stories

Is it possible to keep selected theme active across stories?

Generally if I pick a theme and browse storybook, I'd like the selected theme to stay active.

Request: Add optional config for custom ThemeProvider

When using a custom-defined ThemeInterface with TypeScript (see: https://www.styled-components.com/docs/api#define-a-theme-interface), the ThemesProvider.js file in this addon needs access to the exported, custom-typed ThemeProvider.

I've managed to make this work properly by changing the import in

storybook-addon-styled-component-theme/src/ThemesProvider.tsx

Line 5 in cdc4cc9

import {ThemeProvider} from "styled-components";

to go to my typed ThemeProvider, but it would be really great to be able to configure this via the withThemesProvider function (or some other configurable way).

Emotion support

Would it be possible to use this with Emotion without totally reworking it? They have a similar ThemeProvider: https://emotion.sh/docs/theming

CustomProvider not working as expected

I'm trying to use this addon to switch between themes on ChakraProvider ( from http://next.chakra-ui.com/ ) but for some unknown reason my Chakra Component doesn't seem to be aware of the Provider.

I have written a pretty detailed explanation of my implementation here.

Is there any extra steps needed in order to make it work?

Maybe i have implemented the CustomProvider wrong?

With Theme.js

I'm using styled-components with Next.js like this:

Theme.js

import { createGlobalStyle } from 'styled-components'

export const lightTheme = {
  bg: {
    primary: '#FFF',
    matt: '#FAFAFA',
  },
  text: {
    primary: '#0E2A3E',
    secondary: '#2f3037',
  },
  ...
}

export const darkTheme = {
  bg: {
    primary: '#050505',
    matt: '#121212'
  },
  text: {
    primary: '#FBFBFC',
    secondary: '#e3e4e8',
  },
  ...
}

export const GlobalStyle = createGlobalStyle`
  
  body {
    font-family: Geomanist, -apple-system, system-ui, BlinkMacSystemFont, Helvetica Neue, sans-serif;
		-webkit-font-smoothing: antialiased;
		background-color: ${props => props.theme.bg.primary};
  } 
  ...

_app.jsx

class MyApp extends App {

  render() {
    const { Component, pageProps } = this.props
    return (
        <Providers>
          <Component {...pageProps} />
        </Providers>
    )
  }
}

export default MyApp

components/Providers.tsx

import React from 'react';
import useDarkMode from 'use-dark-mode';
import { ThemeProvider } from 'styled-components'
import { GlobalStyle, lightTheme, darkTheme } from './Theme';

export default ({ children }) => {
  const { value } = useDarkMode(false)
  const theme = value ? darkTheme : lightTheme

  const [mounted, setMounted] = React.useState(false)

  React.useEffect(() => {
    setMounted(true)
  }, [])
    
  const body = 
    <ThemeProvider theme={theme}>
      <GlobalStyle />
      {children}
    </ThemeProvider>

  // prevents ssr flash for mismatched dark mode
  if (!mounted) {
      return <div style={{ visibility: 'hidden' }}>{body}</div>
  }

  return body
}

.storybook/config.js

import { configure, addDecorator } from '@storybook/react';
import { withThemesProvider } from 'storybook-addon-styled-component-theme';
import { lightTheme, darkTheme } from '../components/Theme';

const themes = [darkTheme, lightTheme];
addDecorator(withThemesProvider(themes));
// automatically import all files ending in *.stories.tsx
configure(require.context('../stories', true, /\.stories\.tsx?$/), module);

I can pass darkTheme and lightTheme and works perfectly well but how to pass GlobalStyle to apply on all my stories, outside of the plugin ?

Support for storybook ^6.1.0 version

Hi, just to report that this library doesn't seem to work with the latest version of storybook.

I'm currently using the last version of storybook-addon-styled-component-theme which is 1.3.0 with storybook version 6.0.26 and everything works perfectly.

But when I upgrade to any storybook version after 6.1.0 the themes don't change correctly.

Thank you for this useful addon.

addDecorator question.

Hey, i love this addon it's really great. My config is as follows

addDecorator(withThemesProvider(themes));

Which works great but i'd also like to add something like this

addDecorator(story => <Main>{story}</Main>)

and have main also respond to the theme changes when the UI buttons are clicked... but if i do it this way Main as a decorator has no access to the theme... any ideas?

As a work around i've done this

const stories = storiesOf("Buttons/ButtonAction", module).addDecorator(
  story => <Main>{story()}</Main>
);

stories.add("usage", () => <ButtonAction>Button Action</ButtonAction>, {
  info: "This is a buttonAction"
});

which works fine but Main will show up in my story source which is kinda not what i want.

withThemesProvider global decorator breaks storyshot snapshots

Description

It appears that using a global decorator will break the snapshots generated by jest + storyshots. The result of each snapshot will be null

Example:

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Storyshots @components/atoms/Button Primary 1`] = `null`;

exports[`Storyshots @components/atoms/Button Secondary 1`] = `null`;

I tried experimenting with the storyshots and babel config itself but nothing seems to be working.

Steps to reproduce

Clone a sample storybook + snapshots repo (like this one: https://github.com/solepano/storybook-sample) and add withThemeProviders decorator.

Theme selection button set to 'serif'

The font for the buttons are not set, so set to 'serif'. I'm using @storybook/react v3.4.11.

Can I create a PR to set the font-family?

Support for Storybook v7

In storybook v7, addDecorator has been removed.

Providing a single theme means story is not rendered

Hiya, thanks for the cool addon. Mostly wanted to document this in case it helps anyone else, but when I tried to use the withThemesProvider decorator and only provided a single theme, the story was blank. When I added a second theme, it worked. Would be great to have an error message for this if possible as it was hard to debug why nothing rendered.

Code sample that was blank:

import React from 'react';
import { storiesOf } from '@storybook/react';
import GlobalStylesDecorator from '../../../../.storybook/utils/GlobalStylesDecorator';
import { withThemesProvider } from 'storybook-addon-styled-component-theme';
import myTheme from '../../../../theme';

const themes = [myTheme];

storiesOf('Some module, module)
    .addDecorator(GlobalStylesDecorator)
    .addDecorator(withThemesProvider(themes))
    .add('SomeComponent', () => {
        return <h1>Hi</h1>;
    });

Fixed by adding other theme to the array:

import React from 'react';
import { storiesOf } from '@storybook/react';
import GlobalStylesDecorator from '../../../../.storybook/utils/GlobalStylesDecorator';
import { withThemesProvider } from 'storybook-addon-styled-component-theme';
import myTheme from '../../../../theme';

const themes = [myTheme, myTheme];   *<----- here*

storiesOf('Some module, module)
    .addDecorator(GlobalStylesDecorator)
    .addDecorator(withThemesProvider(themes))
    .add('SomeComponent', () => {
        return <h1>Hi</h1>;
    });

Themes showing up in every addon tab

Themes are showing up at the bottom of every addon tab instead of just in the themes tab. Not sure if it's a bug or if I'm missing something. I managed to fix it by changing register.js and Themes.js but not sure if there's an easier way.

Is it possible to customize themes selector buttons style?

Hi, thanks for the addon, is really useful and powerful!
I would like to customize the l&f of the buttons to select theme, i.e. border-radius, bg-color and stuff like that. Is there a way to do that?

Light and Dark theme switcher is not working.

I have used styled-components in my reactjs app and I have two themes, light and dark. It is working in react app.

I have integrated the styled-components-theme as follow -:

yarn add storybook-addon-styled-component-theme --dev

Add a decorator to stories in .storybook/preview.js

import { addDecorator } from "@storybook/react";
import { withThemesProvider } from "storybook-addon-styled-component-theme";
import { ThemeProvider } from "styled-components";
    
const themes = [theme1, theme2];
addDecorator(withThemesProvider(themes), ThemeProvider);

Add to .storybook/main.js

module.exports = {
  ...
  addons: [
    ...
    "storybook-addon-styled-component-theme/dist/preset"
  ]
};

After I have configured, my default light theme is working in storybook. But the issue is I don't know how to switch to dark theme. I saw Themes tab and there is white and black button. When I click the button, nothing happened.May I know how to add theme switcher in storybook. Thanks.

Here is my example stories

import React from "react";
import { jsxDecorator } from "storybook-addon-jsx";
import Table from "../Table";

const columns = [];

const data = [];


export default {
  title: 'Components/Table',
  component: Table,
  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
  argTypes: {
    //backgroundColor: { control: 'color' },
  },
  decorators: [jsxDecorator],

};

export const BasicTable = () => {
  
  return (
    <div style={{ margin: "30px" }}>
      <Table
        title="Operator List"
        columns={columns}
        data={data}
      />
    </div>
  );
};

Question: How can I use the theme toggle with a GlobalStyle decorator?

Hey, First of all - thanks for your awesome plugin!
I do not know if this is possible, maybe someone can give me advice.
I am using a decorator to add my GlobalStyles to storybook like so:

// .storybook/config.js
import { configure } from '@storybook/react'
import { addDecorator } from '@storybook/react';
import { withThemesProvider } from 'storybook-addon-styled-component-theme'
import { getTheme } from '../theme/index'
import { ThemeProvider } from 'styled-components'
import GlobalStyles from '../theme/GlobalStyles'

const themes = [getTheme('light'), getTheme('dark')]

addDecorator(withThemesProvider(themes))

function withGlobalStyles(storyFn) {
  return (
    <React.Fragment>
      <ThemeProvider theme={themes[0]}>
        <GlobalStyles />
      </ThemeProvider>
      {storyFn()}
    </React.Fragment>
  )
}

addDecorator(withGlobalStyles)

// automatically import all files ending in *.stories.js
const req = require.context('../stories', true, /.stories.js$/)
function loadStories () {
  req.keys().forEach(filename => req(filename))
}

configure(loadStories, module)

As you can see, I hardcoded the theme into the ThemeProvider.
Is there a way to get the 'active' theme from the plugin in the decorator function?

Does not look good for storybook 5.1.9

In storybook 5.1.9 a style is appliedto the Selectors, that overflows the area:

I cannot open the iframe url i get id=undefined

Hi there,

Maybe some one knows a solution that you cannot open a iframe url? this is used for example to embed it somewhere else on a website. What i noticed is that the id says id=undefined in the development console. If i remove the storybook addon everything works fine but if i add it i get a blanco page when i trying to open the iframe.html?id=VALIDID

Does some one have also those issues?

Kind regards

Importing the addon makes React throw "unique key prop" warning in console

Hi,

I've started using this addon with Storybook for React, and I've noticed that, while working fine, a "unique key prop" warning appears in the console. It happens just by importing the addon.

Let me know if you need more details. Cheers!

dist folder not included in package

version 1.2.0 introduced a change that resulted in no dist folder being included in the npm package.

opening a pr to fix this

The absense of CHANGELOG.md

Please, provide with Changelog.md. It is highly important when you'd like to update packages.
Thank you!

Panel Layout Broken for Themes With A Name of More Than One Word

The buttons have a fixed height which doesn't allow the container to expand to contain the text.

"storybook-addon-styled-component-theme": "^1.2.5"
"@storybook/addons": "^5.0.11",
"@storybook/react": "^5.0.11",

Dosen't work with storybook/html

My story .js file

import { storiesOf } from '@storybook/html';
import { withThemesProvider } from 'storybook-addon-styled-component-theme';
import header from '../../templates/partials/header.html';
import '../../styles/partials/index.scss';

const defaultTheme = {
	name: 'Green',
	backgroundColor: 'green',
	textColor: 'white'
};

const darkTheme = {
	name: 'Red',
	backgroundColor: 'red',
	textColor: 'white'
};

const getAllThemes = () => [defaultTheme, darkTheme];

storiesOf('Simple Header', module)
	.addDecorator(withThemesProvider(getAllThemes()))
	.add('Header', () => header);

My addons.js

import 'storybook-addon-styled-component-theme/dist/register';

Error

ERROR in ./node_modules/storybook-addon-styled-component-theme/dist/ThemesProvider.js Module not found: Error: Can't resolve 'styled-components' in 'C:\Projects\LCA\UI\node_modules\storybook-addon-styled-component-theme\dist'

Versions:

"@storybook/html": "^4.0.0-alpha.16",
"storybook-addon-styled-component-theme": "^1.0.3",

switch themes doesn't work with default props

When added a defaultProps theme, switching themes is not working.

Example:

config.js

import { withThemesProvider } from 'storybook-addon-styled-component-theme';
...
const themes = [theme1, theme2];
...
addDecorator(withThemesProvider(themes));

Button.stories.js

storiesOf('Button', module)
  .addDecorator(withKnobs)
  .add(
    'with default props',
    () => (<Button data="button">{getData(text, 'texts', 'Click me')}</Button>)
  )

Button.js

const Button = props => {
  const { children, data, href } = props
  const Component = href ? StyledLink : StyledButton
  return (
    <Component {...props} data-w={data}>
      {children}
    </Component>
  )
}
...
Button.defaultProps = {
  disabled: false,
  theme: {
    palette: {
      primaryDark: "#3A66AB",
      inverse: "#FFF",
      primary: "#0082ff"
    },
    typography: {
      button: {
        fontSize: ".875rem",
        fontWeight: "700",
        lineHeight: "1.14"
      }
    },
    spacer: {
      medium: "1rem"
    },
    buttons: {
      borderRadius: "0"
    }
  }
}

Support for Storybook v6.5

Hey,

Have tried to install this on Storybook v6.5.9. I've followed the docs but getting no Themes panel appearing in the Storybook app. Any ideas? I'm happy to post up the contents of config files, etc if needed for debugging. Cheers

Not loading multiple themes

Hi, I'm having some difficulty loading the themes into my storybook.
Going through the documentation, I was able to set up the package with the add on correctly instantiated.

config.js

import { configure, addDecorator } from "@storybook/react";
import { withInfo } from "@storybook/addon-info";
import { withThemesProvider } from 'storybook-addon-styled-component-theme';

import GlobalStyle from "./decorators/globalStyle";
import themes from "../src/components/common/themes";

const demoThemes = [
  themes.default,
  themes.dark
]

addDecorator(
  withInfo({
    inline: true,
    header: false,
    source: false,
    maxPropsIntoLine: 1
  })
);
addDecorator(GlobalStyle);
addDecorator(withThemesProvider(demoThemes))
const req = require.context('../src', true, /\.stories\.js$/); // <- import all the stories at once
function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module)

addons.js

import '@storybook/addon-actions/register'
// import '@storybook/addon-viewport/register';
// import '@storybook/addon-knobs/register'
import "@storybook/addon-storysource/register"
import '@storybook/addon-links/register'
import 'storybook-addon-styled-component-theme/dist/src/register'; // v1.1.0^

storybook-addon-styled-component-theme": "^1.2.0"
On the main Storybook, I am able to see the Themes map directly to the number of elements in the array of options.

Once I trigger a theme change, the above error occurs.
I know the theme is loaded into the storyboard because if I put a theme that is invalid, the following error occurs.

Is this a reload issue?
Any advice would be appreciated.

Possible to pass own wrapper?

Hi there, is it possible to pass my own custom theme wrappers instead of just a theme object? Reason for this being that I also want to pass some global styles for each theme too?

Ie

<MyTheme>
     <GlobalStyles/>
     {children}
</MyTheme>

refactor to hooks

vulnerability CVE-2020-15168 is introduced by package node-fetch

Hi, @echoulen, a vulnerability CVE-2020-15168 is introduced in [email protected] via:
● [email protected] ➔ [email protected] ➔ [email protected] ➔ [email protected] ➔ [email protected]

However, recompose is a legacy package, which has not been maintained for about 3 years.
Is it possible to migrate recompose to other package to remediate this vulnerability?

I noticed several migration records in other js repo for storybook-addon-styled-component-theme:

1. in react-dnd, version 7.4.1 ➔ 7.4.2, remove recompose via commit
2. in @nivo/legends, version 0.67.0 ➔ 0.68.0, remove recompose via commit

Thanks.

Storybook 5 on-device UI React Native

Hi, should this addon work for React Native without server? (Storybook 5.1)
I'm struggling to make it work.
Thanks

Open story in new tab button doesn't work

Clicking on the icon at the top of storybook that opens the component on its own in a new tab doesn't seem to work when using this module.

Storybook v5 button display issue

When using the addon in Storybook v5, the buttons appear like this

(Firefox 65)

This addon removes function from the theme object

functions are valid in the theme object but this addon removes them.

Is there a good reason ?

Thanks

Inconsistency in import style

Almost every other storybook addon exports from the root index file, so by using "storybook-addon-styled-component-theme/dist/preset" as the root it's causing inconsistency with the established import pattern of storybook

Change iframe background with theme selection

Is there a way to change the background colour of the iframe/body element when a different them is selected? Currently we're using the addon-backgrounds plugin as well which gives us some capability, but the workflow of changing theme, then changing background isn't that streamlined.

It would be great if selecting the theme actively applied a background colour instead. I've tried emulating this using wrappers but to no success. Open to ideas on whether this is (or could be) possible.

Storybook 5.x canvas view broken

We are using storybook 5.x with styled-component-theme addon, here the full versions:

    "@storybook/addon-actions": "5.2.5",
    "@storybook/addon-knobs": "5.2.5",
    "@storybook/addon-notes": "5.2.5",
    "@storybook/addon-options": "5.2.5",
    "@storybook/addon-viewport": "5.2.5",
    "storybook-addon-styled-component-theme": "^1.2.5",
    "@storybook/react": "5.2.5",

There was no error on the browser and the storybook console however when I click the 'canvas view' button, the canvas view only shows a blank page.

After disabling all plugins one by one, I noticed styled-component is the culprit.

Just removing the addDecorator part is enough for making canvas view again.

Live links:
https://mph-global.appspot.com/

Sample story:
https://mph-global.appspot.com/?path=/story/welcome-to--storybook

Not working canvas view:
https://mph-global.appspot.com/iframe.html?id=welcome-to--storybook

Theme Object Is Altered

I pass in an 'api' object with functions as part of my theme. So my theme looks something like this:

const theme = {
  ...
  api: {
    alpha: () => {}
    bravo: () => {}
  }
}

When using this addon, my api object is transformed to an empty object. When it is received by my components it now looks like this:

const theme = {
  ...
  api: {}
}

Remember theme selection

First of all, this is a great plugin!

Do you have any plans to include the theme selection as a query string in the url? So the selected theme will persist when changing components and also allow linking to different themes.

RowStyle not getting applied

Just loaded up this addon and noticed RowStyle css is not getting applied, resulting in stretched buttons.

use this addon for angular 6+ apps

Hallo guys!

how can I add this addon for angular apps?

I need to switch between global multiple customer themes like customer-main-light.css and customer-main-dark.css, because we don't write a styles for components separate.

Is possible with this addon?

If I see example, u use only global props with custom props in component...