Newly Pregnant Mom

    @builder.io/storybook
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.3 • Public • Published

    @builder.io/storybook

    Addon for integrating Builder.io to allow drag and drop page building inside storybook.

    Try it live

    Play around with our Storybook embedded editor example refer to our design systems example for lots of examples using your deisgn system + custom components + storybook.

    example

    Install

    npm install @builder.io/storybook

    How to use

    Make a free account over at Builder.io and grab your public API key from your organization page

    Using your components in the editor

    See this design systems example for lots of examples using your deisgn system + custom components + storybook

    👉Tip: want to limit page building to only your components? Try components only mode

    Register a component

    import { Builder } from '@builder.io/react';
    
    class SimpleText extends React.Component {
      render() {
        return <h1>{this.props.text}</h1>;
      }
    }
    
    Builder.registerComponent(SimpleText, {
      name: 'Simple Text',
      inputs: [{ name: 'text', type: 'string' }],
    });

    in .storybook/preview.js Add builderDecorator as a global decorator for your storybook and pass BuilderComponent as a parameter

    import { addParameters, addDecorator } from '@storybook/react';
    import { BuilderComponent } from '@builder.io/react';
    import { builderDecorator } from '@builder.io/storybook';
    // builder-settings is where you configure your builder instance: init with api key, add custom menus ..
    import '../src/builder-settings';
    
    // add global decorator
    addDecorator(builderDecorator);
    
    // pass preview component
    addParameters({
      builder: {
        component: BuilderComponent,
      },
    });

    Mixed Content errors when hosting on insecure http

    Our embedded editor is on https and it'll try to load your current setup from your localhost, which when served on http will be blocked by the browser, you can fix this by serving storybook on https (ie. start-storybook -p 9009 -s public --https --ssl-cert [path-to.crt] -ssl-key [path-to.key])

    Or As a workaround, on Chrome you can allow insecure content on localhost, by toggling the insecure content option here chrome://settings/content/siteDetails?site=http%3A%2F%2Flocalhost%3A9009

    Learn more

    Keywords

    none

    Install

    npm i @builder.io/storybook

    DownloadsWeekly Downloads

    5

    Version

    0.0.3

    License

    MIT

    Unpacked Size

    21.7 kB

    Total Files

    18

    Last publish

    Collaborators

    • murtaza-haveliwala
    • gustavohgs
    • sanyamkamat
    • shyam-builder
    • manucorporat
    • steve8708
    • samijaber
    • caleb.amsden
    • teleaziz123
    • mrkoreye
    • dkendal
    • mhevery
    • adamdbradley