React-styleguidist: Add custom checkbox to the style guide UI?

[FezVrasta]

I have a set of components that are styled using CSS Custom Properties, these CSS variables are defined according to the closest [data-theme] attribute they find.

I'd need a way to add a checkbox to the examples box, or to the whole page, to toggle between data-theme=light and data-theme=dark

Is there any way to do this?

[FezVrasta]

So, I thought I could use the styleguideComponents property to override Preview, but all I get is an error...

  styleguideComponents: {
    Preview: './src/demo/Preview.jsx',
  },

// Preview.jsx
// @flow
import React from 'react';
import RsgPreview from 'rsg-components/Preview';

export default function Preview(props) {
  return (
    <div>
      foobar
      <RsgPreview {...props} />
    </div>
  );
}

 FAIL  Failed to compile

./node_modules/react-styleguidist/lib/rsg-components/Playground/Playground.js
Module not found: Can't resolve 'rsg-components/Preview' in '/Users/federicozivolo/foobar/react-components/node_modules/react-styleguidist/lib/rsg-components/Playground'

Why?

[sapegin]

You're trying to import the same file:

import RsgPreview from 'rsg-components/Preview';

But why not override Wrapper component instead, it's made for that?

[FezVrasta]

Oh I thought that import was to import the original component. Isn't there any way to simply extend an existing component so that I don't have to reimplement all its logic?

About Wrapper, I'll try thanks

[sapegin]

Sure, there is:

import RsgPreview from 'react-styleguidist/lib/rsg-components/Preview';

Would be cool to update the docs with this example.

styleguideComponents creates a webpack alias like rsg-components/Preview -> your file, so all imports inside Styleguidist code would use your file.

[FezVrasta]

Thanks it worked!