Never Print Magazines

    theme-playground
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.3 • Public • Published

    theme-playground

    npm version Codecov Coverage CircleCI code style: prettier

    Installation

    1. Install the package

    npm install -D theme-playground
     
    yarn add -D theme-playground

    2. Add it to your app

    You can use the withThemePlayground HOC

    import withThemePlayground from 'theme-playground';
    import { ThemeProvider } from 'styled-components';
     
    const options = {
      theme: {
        colors: {
          primary: 'red'
        },
        fontSize: '80px'
      },
      hide: process.env.NODE_ENV !== 'development'
    };
     
    const App = ({ theme }) => (
      <ThemeProvider theme={theme}>
        <Components />
      </ThemeProvider>
    );
     
    export default withThemePlayground(App, options);

    ... or the ThemePlayground component with a render function.

    import { ThemePlayground } from 'theme-playground';
    import { ThemeProvider } from 'styled-components';
     
    const options = {
      theme: {
        colors: {
          primary: 'red'
        },
        fontSize: '80px'
      }
    };
     
    const App = () => (
      <ThemePlayground {...options}>
        {theme => (
          <ThemeProvider theme={theme}>
            <Components />
          </ThemeProvider>
        )}
      </ThemePlayground>
    );

    useThemePlayground hook

    import { useThemePlayground } from 'theme-playground';
    import { ThemeProvider } from 'styled-components';
     
    const ChildComponent = () => {
      const { theme, name } = useThemePlayground();
     
      return (
        <div>
          <p>Current theme: {name}</p>
          <pre>{JSON.stringify(theme, null, 2)}</pre>
        </div>
      );
    };

    Options

    theme

    objectArray<{ name: string, theme: object }> | required

    The theme object or multiple themes as an array of objects. Look at the Multiple Themes section for an example.

    overrides

    object | optional

    Optional override components of default components. Look at the Overrides section for detailed documentation.

    config

    object | optional

    An additional config object can be added. Look at the Config section for detailed documentation.

    config.labelFormat

    "path" || "startCase" || (path: string[]) => string | default: "startCase"

    config.showCode

    boolean | default: true

    Set to false no code component will be rendered.

    Multiple Themes

    To add multiple themes, add an Array to the theme key. Each theme must have a name and a theme key.

    import withThemePlayground from 'theme-playground';
    import { ThemeProvider } from 'styled-components';
     
    import defaultTheme from 'path/to/default/theme';
    import anotherTheme from 'path/to/another/theme';
     
    const options = {
      theme: [
        { name: 'Theme', theme: defaultTheme },
        { name: 'Another Theme', theme: anotherTheme }
      ]
    };
     
    const App = ({ theme }) => (
      <ThemeProvider theme={theme}>
        <Components />
      </ThemeProvider>
    );
     
    export default withThemePlayground(App, options);

    Config

    Example

    import withThemePlayground from 'theme-playground';
    import { ThemeProvider } from 'styled-components';
     
    import theme from 'path/to/theme';
     
    const options = {
      theme,
      config: {
        // One of "path"
        labelFormat: 'path', // "button.color"
        // or "startCase"
        labelFormat: 'startCase', // "Button Color"
        // or a custom function
        labelFormat: path => {
          // path is equal to ["button", "color"]
          return path.join('-'); // "button-color"
        },
        showCode: true || false
      }
    };
     
    const App = ({ theme }) => (
      <ThemeProvider theme={theme}>
        <Components />
      </ThemeProvider>
    );
     
    export default withThemePlayground(App, options);

    Overrides

    theme-playground will render a default component based on the theme value. If you want to customize them, you can override the default components by adding an overrides object to the decorator.

    As a key use the theme object path, e.g 'button.spacing'

    Example

    import withThemePlayground from 'theme-playground';
    import { ThemeProvider } from 'styled-components';
     
    import theme from 'path/to/theme';
     
    const config = {
      theme,
      overrides: {
        'button.spacing': {
          type: 'counter',
          label: 'Button Spacing',
          description: 'Spacing for all buttons',
          min: 1,
          max: 20,
          steps: 1
        },
        'button.color.primary': {
          type: 'color',
          label: 'Button Primary Color'
        }
      }
    };
     
    const App = ({ theme }) => (
      <ThemeProvider theme={theme}>
        <Components />
      </ThemeProvider>
    );
     
    export default withThemePlayground(App, options);

    Hide specific theme values

    It is also possible to hide specific theme values or objects, e.g.:

    const overrides = {
      breakpoints: {
        hidden: true
      },
      'button.spacing': {
        hidden: true
      }
    };

    Override components

    Color

    'theme.path': {
      type: 'color',
      hidden: Boolean,
      label: String | 'Theme Path',
      description: String | null
    }

    Counter

    'theme.path': {
      type: 'counter',
      hidden: Boolean,
      label: String | 'Theme Path',
      description: String | null,
      min: Number | 0,
      max: Number | 100,
      steps: Number | 1
    }

    Select

    'theme.path': {
      type: 'select',
      hidden: Boolean,
      label: String | 'Theme Path',
      description: String | null
      options: [
        {
          value: String,
          label: String
        }
      ]
    }

    Shorthand

    'theme.path': {
      type: 'shorthand',
      hidden: Boolean,
      label: String | 'Theme Path',
      description: String | null
    }

    Switch

    'theme.path': {
      type: 'switch',
      hidden: Boolean,
      label: String | 'Theme Path',
      description: String | null
    }

    Range

    'theme.path': {
      type: 'range',
      hidden: Boolean,
      label: String | 'Theme Path',
      description: String | null,
      min: Number | 0,
      max: Number | 100,
      steps: Number | 1
    }

    Default components

    theme-playground will render the following components based on the value.

    Switch

    boolean

    Counter

    number

    Input

    string

    Textarea

    string && string.length >= 40

    Range

    string && string.endsWith("px" || "rem" || "em" || "%")

    Color

    string && string.startsWith("#" || "rgba" || "rgba") || label.includes("color")

    Shorthand

    object && Object.keys(object).length === 4 && Object.keys(object).includes("top" && "right" && "bottom" && "left")

    Install

    npm i theme-playground

    DownloadsWeekly Downloads

    0

    Version

    0.1.3

    License

    MIT

    Unpacked Size

    28.1 kB

    Total Files

    21

    Last publish

    Collaborators

    • jeslage