All Projects → naver → Storybook Addon Preview

naver / Storybook Addon Preview

Licence: mit
Storybook Addon Preview can show user selected knobs in various framework code in Storybook

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to Storybook Addon Preview

Addon Smart Knobs
🧠 This Storybook plugin uses @storybook/addon-knobs but creates the knobs automatically based on PropTypes.
Stars: ✭ 215 (+400%)
Mutual labels:  addon, storybook
storybook-addon-mock
This addon allows you to mock fetch or XMLHttpRequest in the storybook.
Stars: ✭ 67 (+55.81%)
Mutual labels:  addon, storybook
storybook-xstate-addon
A storybook addon to assist with writing stories that rely on xstate
Stars: ✭ 48 (+11.63%)
Mutual labels:  addon, storybook
Storybook Addon Styled Component Theme
storybook addon
Stars: ✭ 168 (+290.7%)
Mutual labels:  addon, storybook
msw-storybook-addon
Mock API requests in Storybook with Mock Service Worker.
Stars: ✭ 168 (+290.7%)
Mutual labels:  addon, storybook
Storybook Addon Jest
REPO/PACKAGE MOVED - React storybook addon that show component jest report
Stars: ✭ 177 (+311.63%)
Mutual labels:  addon, storybook
storybook-addon-next
A no config Storybook addon that makes Next.js features just work in Storybook
Stars: ✭ 184 (+327.91%)
Mutual labels:  addon, storybook
react-bones
💀 Dead simple content loading components for React and React-Native. 💀
Stars: ✭ 42 (-2.33%)
Mutual labels:  storybook, preview
storybook-styled-components
No description or website provided.
Stars: ✭ 76 (+76.74%)
Mutual labels:  addon, storybook
storybook-addon-headless
A Storybook addon to preview content from a headless CMS in components
Stars: ✭ 23 (-46.51%)
Mutual labels:  addon, storybook
React Storybook Addon Props Combinations
Given possible values for each prop, renders your component with all combinations of prop values.
Stars: ✭ 130 (+202.33%)
Mutual labels:  addon, storybook
Storybook Addon Material Ui
Addon for storybook wich wrap material-ui components into MuiThemeProvider. 📃 This helps and simplifies development of material-ui based components.
Stars: ✭ 513 (+1093.02%)
Mutual labels:  addon, storybook
Storybook Addon
Develop themable components with Emotion/Styled Components/Material-UI with help of Storybook & React Theming
Stars: ✭ 122 (+183.72%)
Mutual labels:  addon, storybook
Addon Jsx
This Storybook addon show you the JSX / template of the story
Stars: ✭ 209 (+386.05%)
Mutual labels:  addon, storybook
create-material-ui-app
create-react-app + storybook + storybook-addon-material-ui
Stars: ✭ 55 (+27.91%)
Mutual labels:  addon, storybook
Storycap
A Storybook Addon, Save the screenshot image of your stories 📷 via puppeteer.
Stars: ✭ 451 (+948.84%)
Mutual labels:  addon, storybook
Storybook Addon A11y
REPO/PACKAGE MOVED - Storybook addon to help, improving accessibility within you're react components.
Stars: ✭ 37 (-13.95%)
Mutual labels:  addon, storybook
Vscode Materialdesignicons Intellisense
Provides intellisense, search and hover preview for Material Design Icons
Stars: ✭ 21 (-51.16%)
Mutual labels:  preview
Djangocms Googlemap
django CMS Google Map is a set of plugins for django CMS that allow you to implement Google Map into your website.
Stars: ✭ 35 (-18.6%)
Mutual labels:  addon
Latex4coreldraw
This is a addon for CorelDRAW. It allows to add and edit Latex equations or symbols easily.
Stars: ✭ 20 (-53.49%)
Mutual labels:  addon

Storybook Addon Preview

npm version

Storybook Addon Preview can show user selected controls(args)) or knobs in various framework code in Storybook

Getting Started

  • Storybook 6 or newer is required.
  • If you use Storybook 5, use version 1.x.
npm i storybook-addon-preview --dev

.storybook/addons.js

import "storybook-addon-preview/register";

Now, write your stories with preview.

How to use with controls(args)

import { previewTemplate, DEFAULT_VANILLA_CODESANDBOX } from "storybook-addon-preview";
// CSF https://storybook.js.org/docs/react/api/csf

export default {
    title: "Example",
    decorators: [withKnobs, withPreview],
    parameters: {
        preview: [
            {
                tab: "Vanilla",
                template: previewTemplate`
    const inst = new Instance({
        opt1: ${"opt1"},
        num1: ${"num1"},
    });
                `,
                language: "ts",
                copy: true,
                codesandbox: DEFAULT_VANILLA_CODESANDBOX(["@egjs/infinitegrid"]),
            },
        ],
    },
}

export default {
    title: "Example",
}
export const example = e => {
    e.opt1;
    e.num1;
    return ....;
}
example.parameters = {
    preview: [
        {
            tab: "Vanilla",
            template: previewTemplate`
const inst = new Instance({
    opt1: ${"opt1"},
    num1: ${"num1"},
});
            `,
            language: "ts",
            copy: true,
            codesandbox: DEFAULT_VANILLA_CODESANDBOX(["@egjs/infinitegrid"]),
        },
    ],
};
example.args = {
    opt1: false,
    num1: 0,
};
example.argTypes = {
    opt1: {
        control: { type: "boolean" },
        defaultValue: false,
    },
    num1: {
        control: { type: "number" },
        defaultValue: 0,
    },
};

How to use with knobs

import { withPreview, previewTemplate, DEFAULT_VANILLA_CODESANDBOX } from "storybook-addon-preview";
import { withKnobs, boolean, number } from "@storybook/addon-knobs";

const stories = storiesOf("Example", module);

stories.addDecorator(withKnobs).addDecorator(withPreview);

stories.add("example", e => {
    const opt1Value = boolean("opt1", false);
    const num1Value = number("num1", 0);

    return ....;
}, {
    preview: [
        {
            tab: "Vanilla",
            template: previewTemplate`
const inst = new Instance({
    opt1: ${"opt1"},
    num1: ${"num1"},
});
            `,
            language: "ts",
            copy: true,
            codesandbox: DEFAULT_VANILLA_CODESANDBOX(["@egjs/infinitegrid"]),
        },
    ]
});
// CSF https://storybook.js.org/docs/react/api/csf

export default {
    title: "Example",
    decorators: [withKnobs, withPreview],
    parameters: {
        preview: [
            {
                tab: "Vanilla",
                template: previewTemplate`
    const inst = new Instance({
        opt1: ${"opt1"},
        num1: ${"num1"},
    });
                `,
                language: "ts",
                copy: true,
                codesandbox: DEFAULT_VANILLA_CODESANDBOX(["@egjs/infinitegrid"]),
            },
        ],
    },
}
export const example = e => {
    const opt1Value = boolean("opt1", false);
    const num1Value = number("num1", 0);

    return ....;
}

InfiniteGrid's Storybook Example

Properties

Name Type Description
tab string preview can show multiple tab and can determine the name of the tab. If you have the same name, you can show multiple codes on one tab.
template string, function, template Code to display on the screen. If you use knobs, use previewTemplate. If the knobs are not used, they can be represented as strings.
args or knobs object Custom args or knobs to use in preview templates, except those used in stories,
continue boolean If the tab name is the same and the code is different, enable true if you want to continue the line number.
language string Language to highlight the code in the template (js, ts, jsx, tsx, html, css)
codesandbox function Link the code you used to the code sandbox.
copy boolean Whether to show the copy code button

Template

  • If the template is code that does not use knobs, you can just write it as string type.
{
    template: `
const inst = new Instance({
    opt1: 1,
    num1: 1,
});
`,
}
  • If you simply want to express knobs as they are, use previewTemplate function
import { previewTemplate } from "storybook-addon-preview";

{
    args: {
        args1: true,
    },
    template: previewTemplate`
const inst = new Instance({
    opt1: ${"opt1"},
    num1: ${"num1"},
    args1: ${"args1"},
});
`,
}
  • Use functions if you want to work with variables
{
    args: {
        args1: true,
    },
    template: knobs => `
const inst = new Instance({
    opt1: ${knobs.opt1},
    num1: ${knobs.num1},
    args1: ${knobs.args1},
});
`,
}

Highlight

  • If you want to highlight your code, add a [highlight] comment.
[
    {
        template: previewTemplate`
    const inst = new Instance({
        /* [highlight] highlight opt1 */
        opt1: ${"opt1"},
        num1: ${"num1"},
    });
        `,
        language: "js",
    },
    {
        template: previewTemplate`
<!-- [highlight] highlight html -->
<div style="width: ${"width"}px;"></div>
        `,
        language: "html",
    },
]
  • If you want to highlight your code area, add the [highlight-start] and [highlight-end] comments.
[
    {
        template: previewTemplate`
    const inst = new Instance({
        /* [highlight-start] highlight options */
        opt1: ${"opt1"},
        num1: ${"num1"},
        /* [highlight-end] */
    });
    `,
    },
    {
        template: previewTemplate`
<!-- [highlight-start] highlight html -->
<div style="width: ${"width"}px;"></div>
<!-- [highlight-end] -->
        `,
        language: "html",
    },
]

Props

Easily use options or props or use props template when you have many options

export interface PropsOptions {
    indent?: number;
    wrap?: string;
    prefix?: string;
}
  • DEFAULT_PROPS_TEMPLATE(names: string[], options: PropsOptions)
import { previewTemplate, DEFAULT_PROPS_TEMPLATE } from "storybook-addon-preview";

{
    template: previewTemplate`
/* [highlight] You can see opt1, num1 options. */
const inst = new Instance({
${DEFAULT_PROPS_TEMPLATE(["opt1", "num1"], { indent: 4 })}
});
`,
}
  • JSX_PROPS_TEMPLATE(names: string[], options: PropsOptions)
import { previewTemplate, JSX_PROPS_TEMPLATE } from "storybook-addon-preview";

{
    template: previewTemplate`
/* [highlight] You can see opt1, num1 options. */
<Instance
${JSX_PROPS_TEMPLATE(["opt1", "num1"], { indent: 4 })}
    />
`,
    language: "jsx",
}
  • ANGULAR_PROPS_TEMPLATE(names: string[], options: PropsOptions)
import { previewTemplate, ANGULAR_PROPS_TEMPLATE } from "storybook-addon-preview";

{
    template: previewTemplate`
/* [highlight] You can see opt1, num1 options. */
<ngx-instance
${ANGULAR_PROPS_TEMPLATE(["opt1", "num1"], { indent: 4 })}
    ></ngx-instance>
`,
    language: "html",
}
  • VUE_PROPS_TEMPLATE(names: string[], options: PropsOptions)
import { previewTemplate, VUE_PROPS_TEMPLATE } from "storybook-addon-preview";

{
    template: previewTemplate`
/* [highlight] You can see opt1, num1 options. */
<vue-instance
${VUE_PROPS_TEMPLATE(["opt1", "num1"], { indent: 4 })}
    ></vue-instance>
`,
    language: "html",
}
  • LIT_PROPS_TEMPLATE(names: string[], options: PropsOptions)
import { previewTemplate, LIT_PROPS_TEMPLATE } from "storybook-addon-preview";

{
    template: previewTemplate`
/* [highlight] You can see opt1, num1 options. */
html${"`"}<lit-instance
${LIT_PROPS_TEMPLATE(["opt1", "num1"], { indent: 4 })}
    ></lit-instance>${"`"};
`,
    language: "js",
}

CodeSandBox

Link the code you used to the code sandbox. There is a dependency and initial settings file for linking code sandboxes. The frameworks we support are react, angular, svelte, lit, preact, and vue.

const CodeSandboxTemplate = (previews) => ({
    // react, angular, svelte, lit, preact, vue
    framework: "FRAMEWORK_TYPE",
      files: {
        // Tab name and code order (Mostly 0)
        "src/App.tsx": previews["TAB NAME"][0],
        "src/styles.css": previews["TAB NAME2"][0],
    },
    // External modules except framework modules used in code
    userDependencies: ["@egjs/[email protected]"],
});

You can use the default codesandbox presets.

  • External modules except framework modules used in code
// DEFAULT_(VANILLA)_CODESANDBOX
// DEFAULT_(REACT)_CODESANDBOX
// DEFAULT_(ANGULAR)_CODESANDBOX
type DEFAULT_FRAMEWORK_CODESANDBOX = (dependencies: string[]) => CodeSandboxTemplate;
  • The codesandbox presets provided in the preview are vanilla, react, angular, vue, preact, lit and svelte.
Name Required Tab Names Code
DEFAULT_VANILLAJS_CODESANDBOX(JS) HTML, VANILLA, CSS(optional) View Code
DEFAULT_VANILLA_CODESANDBOX(TS) HTML, VANILLA, CSS(optional) View Code
DEFAULT_REACT_CODESANDBOX(TS) React, CSS(optional) View Code
DEFAULT_REACTJS_CODESANDBOX(TS) ReactJS, CSS(optional) View Code
DEFAULT_ANGULAR_CODESANDBOX Angular(html, component, module), CSS(optional) View Code
DEFAULT_VUE_CODESANDBOX Vue View Code
DEFAULT_SVELTE_CODESANDBOX Svelte View Code
DEFAULT_LIT_CODESANDBOX Lit, CSS(optional) View Code

The following explains how to use the default codesandbox preset.

import {
    DEFAULT_VANILLA_CODESANDBOX,
    DEFAULT_REACT_CODESANDBOX,
    DEFAULT_ANGULAR_CODESANDBOX,
} from "storybook-addon-preview";

{
    preview: [
        {
            // previews["HTML"][0]
            tab: "HTML",
            template: ...,
        },
        {
            // previews["CSS"][0]
            tab: "CSS",
            template: ...,
        },
        {
            // previews["Vaniila"][0]
            tab: "Vanilla",
            template: ...,
            codesandbox: DEFAULT_REACT_CODESANDBOX(["@egjs/infinitegrid"]),
        }
        {
            // previews["React"][0]
            tab: "React",
            template: ...,
            codesandbox: DEFAULT_REACT_CODESANDBOX(["@egjs/react-infinitegrid"]),
        },
        {
            // previews["Angular"][0]
            tab: "Angular",
            description: "app.component.html",
            template: ...,
            language: "markup",
            codesandbox: DEFAULT_ANGULAR_CODESANDBOX(["@egjs/ngx-infinitegrid"]),
        },
        {
            // previews["Angular"][1]
            tab: "Angular",
            description: "app.component.ts",
            template: ...,
            language: "tsx",
            codesandbox: DEFAULT_ANGULAR_CODESANDBOX(["@egjs/ngx-infinitegrid"]),
        },
        {
            // previews["Angular"][2]
            tab: "Angular",
            description: "app.module.ts",
            template: ...,
            language: "typescript",
            codesandbox: DEFAULT_ANGULAR_CODESANDBOX(["@egjs/ngx-infinitegrid"]),
        },
    ],
}

License

storybook-addon-preview is released under the MIT license.

Copyright (c) 2020-present NAVER Corp.

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.  IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].