{"id":18888916,"url":"https://github.com/naver/storybook-addon-preview","last_synced_at":"2025-08-20T20:32:23.384Z","repository":{"id":38315834,"uuid":"243436494","full_name":"naver/storybook-addon-preview","owner":"naver","description":"Storybook Addon Preview can show user selected knobs in various framework code in Storybook","archived":false,"fork":false,"pushed_at":"2023-06-01T16:59:58.000Z","size":1365,"stargazers_count":66,"open_issues_count":10,"forks_count":10,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-08-08T19:57:48.733Z","etag":null,"topics":["addon","egjs","naver","preview","storybook"],"latest_commit_sha":null,"homepage":"https://naver.github.io/egjs-infinitegrid/storybook/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/naver.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-02-27T05:12:23.000Z","updated_at":"2024-09-07T10:41:49.000Z","dependencies_parsed_at":"2024-06-18T15:59:51.558Z","dependency_job_id":"a1aa4de0-deef-4572-8e3b-2ba9e9c9d6a2","html_url":"https://github.com/naver/storybook-addon-preview","commit_stats":{"total_commits":87,"total_committers":6,"mean_commits":14.5,"dds":0.05747126436781613,"last_synced_commit":"4a8664cb6dfe8f539a5c2e2877d70071db932cb8"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/naver/storybook-addon-preview","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/naver%2Fstorybook-addon-preview","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/naver%2Fstorybook-addon-preview/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/naver%2Fstorybook-addon-preview/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/naver%2Fstorybook-addon-preview/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/naver","download_url":"https://codeload.github.com/naver/storybook-addon-preview/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/naver%2Fstorybook-addon-preview/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270946068,"owners_count":24672890,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-18T02:00:08.743Z","response_time":89,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["addon","egjs","naver","preview","storybook"],"created_at":"2024-11-08T07:46:37.441Z","updated_at":"2025-08-20T20:32:22.990Z","avatar_url":"https://github.com/naver.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Storybook Addon Preview\n\n[![npm version](https://img.shields.io/npm/v/storybook-addon-preview.svg?style=flat-square\u0026color=007acc\u0026label=Version)](https://badge.fury.io/js/storybook-addon-preview)\n\nStorybook Addon Preview can show user selected [controls(args))](https://github.com/storybookjs/storybook/tree/master/addons/controls) or [knobs](https://github.com/storybookjs/storybook/tree/master/addons/knobs) in various framework code in [Storybook](https://storybook.js.org/)\n\n\n\n[![](https://raw.githubusercontent.com/naver/storybook-addon-preview/master/images/screenshot.png)](https://naver.github.io/egjs-infinitegrid/storybook/)\n\n## Getting Started\n* Storybook 6 or newer is required.\n* If you use Storybook 5, use version 1.x.\n\n\n```\nnpm i storybook-addon-preview --dev\n```\n\n\n.storybook/main.js\n\n```js\nmodule.exports = {\n    addons: [\n        \"storybook-addon-preview/register\"\n    ],\n};\n```\n\nNow, write your stories with preview.\n\n### How to use with controls(args)\n* [Install @storybook/addon-controls](https://github.com/storybookjs/storybook/tree/master/addons/controls)\n```js\nimport { previewTemplate, DEFAULT_VANILLA_CODESANDBOX } from \"storybook-addon-preview\";\n// CSF https://storybook.js.org/docs/react/api/csf\n\nexport default {\n    title: \"Example\",\n}\nexport const example = e =\u003e {\n    e.opt1;\n    e.num1;\n    return ....;\n}\nexample.parameters = {\n    preview: [\n        {\n            tab: \"Vanilla\",\n            template: previewTemplate`\nconst inst = new Instance({\n    opt1: ${\"opt1\"},\n    num1: ${\"num1\"},\n});\n            `,\n            language: \"ts\",\n            copy: true,\n            codesandbox: DEFAULT_VANILLA_CODESANDBOX([\"@egjs/infinitegrid\"]),\n        },\n    ],\n};\nexample.args = {\n    opt1: false,\n    num1: 0,\n};\nexample.argTypes = {\n    opt1: {\n        control: { type: \"boolean\" },\n        defaultValue: false,\n    },\n    num1: {\n        control: { type: \"number\" },\n        defaultValue: 0,\n    },\n};\n```\n### How to use with knobs (deprecated)\n* [Install @storybook/addon-knobs](https://github.com/storybookjs/storybook/tree/master/addons/knobs)\n```js\nimport { withPreview, previewTemplate, DEFAULT_VANILLA_CODESANDBOX } from \"storybook-addon-preview\";\nimport { withKnobs, boolean, number } from \"@storybook/addon-knobs\";\n\nconst stories = storiesOf(\"Example\", module);\n\nstories.addDecorator(withKnobs).addDecorator(withPreview);\n\nstories.add(\"example\", e =\u003e {\n    const opt1Value = boolean(\"opt1\", false);\n    const num1Value = number(\"num1\", 0);\n\n    return ....;\n}, {\n    preview: [\n        {\n            tab: \"Vanilla\",\n            template: previewTemplate`\nconst inst = new Instance({\n    opt1: ${\"opt1\"},\n    num1: ${\"num1\"},\n});\n            `,\n            language: \"ts\",\n            copy: true,\n            codesandbox: DEFAULT_VANILLA_CODESANDBOX([\"@egjs/infinitegrid\"]),\n        },\n    ]\n});\n// CSF https://storybook.js.org/docs/react/api/csf\n\nexport default {\n    title: \"Example\",\n    decorators: [withKnobs, withPreview],\n    parameters: {\n        preview: [\n            {\n                tab: \"Vanilla\",\n                template: previewTemplate`\n    const inst = new Instance({\n        opt1: ${\"opt1\"},\n        num1: ${\"num1\"},\n    });\n                `,\n                language: \"ts\",\n                copy: true,\n                codesandbox: DEFAULT_VANILLA_CODESANDBOX([\"@egjs/infinitegrid\"]),\n            },\n        ],\n    },\n}\nexport const example = e =\u003e {\n    const opt1Value = boolean(\"opt1\", false);\n    const num1Value = number(\"num1\", 0);\n\n    return ....;\n}\n```\n\n\n[InfiniteGrid's Storybook Example](https://github.com/naver/egjs-infinitegrid/blob/master/packages/infinitegrid/stories/templates/preview.ts)\n\n### Properties\n\n```ts\nexport interface PreviewParameter {\n    /**\n     * The name of the tab to appear in the preview panel\n     */\n    tab?: string;\n    /**\n     * Code to appear in the corresponding tab of the preview panel.\n     */\n    template?: string\n    | ((props: Record\u003cstring, any\u003e, globals: Record\u003cstring, any\u003e) =\u003e any)\n    | ReturnType\u003ctypeof previewTemplate\u003e;\n    /**\n     * Description of the corresponding template code\n     */\n    description?: string;\n    /**\n     * Custom args or knobs that can be used in the preview template.\n     */\n    knobs?: Record\u003cstring, any\u003e;\n    /**\n     * Custom args or knobs that can be used in the preview template.\n     */\n    args?: Record\u003cstring, any\u003e;\n    /**\n     * Whether to display the copy button\n     */\n    copy?: boolean;\n    /**\n     * Language to highlight its code (\"html\", \"css\", \"jsx\", \"tsx\", \"ts\", \"js\")\n     */\n    language?: string;\n    /**\n     * Language presets to link to codesandbox\n     * @see {@link https://github.com/naver/storybook-addon-preview/blob/master/README.md}\n     */\n    codesandbox?: CodeSandboxValue\n    | ((previewMap: Record\u003cstring, string[]\u003e) =\u003e CodeSandboxValue);\n    /**\n     * Whether to share line numbers when tab names are the same\n     */\n    continue?: boolean;\n    /**\n     * Formatting type for that code if you want formatting\n     * Only \"html\" is supported as built-in support.\n     * If you want to use custom formatter, use `previewFormatter` config in manager.js\n     * @see {@link https://github.com/naver/storybook-addon-preview/blob/master/README.md}\n     */\n    format?: string | boolean;\n}\n```\n\n### Formatting\nStorybook basically uses the standalone version of `prettier` and `parser-html`.\nSo PreviewParameter format only supports \"html\".\n\nIf you use a custom formatter, be careful as the file size may increase.\n\nSee: https://prettier.io/docs/en/browser.html\n\n```js\n// .storybook/manager.js\nimport { addons } from \"@storybook/addons\";\nimport * as prettier from \"prettier/standalone\";\nimport * as htmlParser from \"prettier/parser-html\";\nimport * as babelParser from \"prettier/parser-babel\";\nimport * as postCSSParser from \"prettier/parser-postcss\";\n\naddons.setConfig({\n    previewFormatter: (format, code) =\u003e {\n        if (format === \"tsx\") {\n            return prettier.format(code, {\n                parser: \"babel-ts\",\n                plugins: [\n                    htmlParser,\n                    babelParser,\n                    postCSSParser,\n                ],\n            });\n        } else if (format === \"vue\") {\n            return prettier.format(code, {\n                parser: \"vue\",\n                plugins: [\n                    htmlParser,\n                    babelParser,\n                    postCSSParser,\n                ],\n            });\n        }\n        return code;\n    },\n});\n```\n\n```js\n// stories.js\n\nexport const Story = {\n    parameters: {\n        preview: [\n            {\n                tab: \"Vanilla\",\n                template: `\nconst inst = new Instance({\n    opt1: \"opt1\",\n    num1: \"num1\",\n});\n                `,\n                language: \"ts\",\n                format: \"tsx\",\n            },\n        ],\n    }\n}\n```\n\n### Template\n* If the template is code that does not use knobs, you can just write it as `string` type.\n```js\n{\n    template: `\nconst inst = new Instance({\n    opt1: 1,\n    num1: 1,\n});\n`,\n}\n```\n* If you simply want to express knobs as they are, use `previewTemplate` function\n```js\nimport { previewTemplate } from \"storybook-addon-preview\";\n\n{\n    args: {\n        args1: true,\n    },\n    template: previewTemplate`\nconst inst = new Instance({\n    opt1: ${\"opt1\"},\n    num1: ${\"num1\"},\n    args1: ${\"args1\"},\n});\n`,\n}\n```\n* Use functions if you want to work with variables\n```js\n{\n    args: {\n        args1: true,\n    },\n    template: (props, globals) =\u003e `\nconst inst = new Instance({\n    opt1: ${props.opt1},\n    num1: ${props.num1},\n    args1: ${props.args1},\n});\n`,\n}\n```\n\n\n\n#### Highlight\n* If you want to highlight your code, add a `[highlight]` comment.\n\n```js\n[\n    {\n        template: previewTemplate`\n    const inst = new Instance({\n        /* [highlight] highlight opt1 */\n        opt1: ${\"opt1\"},\n        num1: ${\"num1\"},\n    });\n        `,\n        language: \"js\",\n    },\n    {\n        template: previewTemplate`\n\u003c!-- [highlight] highlight html --\u003e\n\u003cdiv style=\"width: ${\"width\"}px;\"\u003e\u003c/div\u003e\n        `,\n        language: \"html\",\n    },\n]\n```\n* If you want to highlight your code area, add the `[highlight-start]` and `[highlight-end]` comments.\n```js\n[\n    {\n        template: previewTemplate`\n    const inst = new Instance({\n        /* [highlight-start] highlight options */\n        opt1: ${\"opt1\"},\n        num1: ${\"num1\"},\n        /* [highlight-end] */\n    });\n    `,\n    },\n    {\n        template: previewTemplate`\n\u003c!-- [highlight-start] highlight html --\u003e\n\u003cdiv style=\"width: ${\"width\"}px;\"\u003e\u003c/div\u003e\n\u003c!-- [highlight-end] --\u003e\n        `,\n        language: \"html\",\n    },\n]\n```\n\n#### Props\nEasily use options or props or use props template when you have many options\n```ts\nexport interface PropsOptions {\n    indent?: number;\n    wrap?: string;\n    prefix?: string;\n}\n```\n* DEFAULT_PROPS_TEMPLATE(names: string[], options: PropsOptions)\n```js\nimport { previewTemplate, DEFAULT_PROPS_TEMPLATE } from \"storybook-addon-preview\";\n\n{\n    template: previewTemplate`\n/* [highlight] You can see opt1, num1 options. */\nconst inst = new Instance({\n${DEFAULT_PROPS_TEMPLATE([\"opt1\", \"num1\"], { indent: 4 })}\n});\n`,\n}\n```\n* JSX_PROPS_TEMPLATE(names: string[], options: PropsOptions)\n```js\nimport { previewTemplate, JSX_PROPS_TEMPLATE } from \"storybook-addon-preview\";\n\n{\n    template: previewTemplate`\n/* [highlight] You can see opt1, num1 options. */\n\u003cInstance\n${JSX_PROPS_TEMPLATE([\"opt1\", \"num1\"], { indent: 4 })}\n    /\u003e\n`,\n    language: \"jsx\",\n}\n```\n* ANGULAR_PROPS_TEMPLATE(names: string[], options: PropsOptions)\n```js\nimport { previewTemplate, ANGULAR_PROPS_TEMPLATE } from \"storybook-addon-preview\";\n\n{\n    template: previewTemplate`\n/* [highlight] You can see opt1, num1 options. */\n\u003cngx-instance\n${ANGULAR_PROPS_TEMPLATE([\"opt1\", \"num1\"], { indent: 4 })}\n    \u003e\u003c/ngx-instance\u003e\n`,\n    language: \"html\",\n}\n```\n* VUE_PROPS_TEMPLATE(names: string[], options: PropsOptions)\n```js\nimport { previewTemplate, VUE_PROPS_TEMPLATE } from \"storybook-addon-preview\";\n\n{\n    template: previewTemplate`\n/* [highlight] You can see opt1, num1 options. */\n\u003cvue-instance\n${VUE_PROPS_TEMPLATE([\"opt1\", \"num1\"], { indent: 4 })}\n    \u003e\u003c/vue-instance\u003e\n`,\n    language: \"html\",\n}\n```\n* LIT_PROPS_TEMPLATE(names: string[], options: PropsOptions)\n```js\nimport { previewTemplate, LIT_PROPS_TEMPLATE } from \"storybook-addon-preview\";\n\n{\n    template: previewTemplate`\n/* [highlight] You can see opt1, num1 options. */\nhtml${\"`\"}\u003clit-instance\n${LIT_PROPS_TEMPLATE([\"opt1\", \"num1\"], { indent: 4 })}\n    \u003e\u003c/lit-instance\u003e${\"`\"};\n`,\n    language: \"js\",\n}\n```\n\n### CodeSandBox\nLink the code you used to the code sandbox.\nThere is a dependency and initial settings file for linking code sandboxes.\nThe frameworks we support are react, angular, svelte, lit, preact, and vue.\n\n```js\nconst CodeSandboxValue = {\n    // https://github.com/codesandbox/codesandbox-importers/blob/master/packages/import-utils/src/create-sandbox/templates.ts#L63\n    template: \"vue-cli\",\n    files: {\n        \"src/main.js\": `\nimport Vue from \"vue\";\nimport App from \"./App.vue\";\n\nVue.config.productionTip = false;\n\nnew Vue({\nrender: h =\u003e h(App)\n}).$mount(\"#app\");\n    `,\n        \"src/App.vue\": {\n            tab: \"Vue\",\n        },\n    },\n    dependencies: {\n        \"vue\": \"^2.6.0\",\n    },\n    userDependencies: [\"@egjs/vue-infinitegrid@^3\"],\n});\n```\n\n#### You can use the default codesandbox presets.\n* External modules except framework modules used in code\n\n```ts\n// DEFAULT_(VANILLA)_CODESANDBOX\n// DEFAULT_(REACT)_CODESANDBOX\n// DEFAULT_(ANGULAR)_CODESANDBOX\ntype DEFAULT_FRAMEWORK_CODESANDBOX: CodeSandboxTemplate = (userDependencies?: string[], files?: FilesParam) =\u003e CodeSandboxValue;\n```\n\n* The codesandbox presets provided in the preview are vanilla, react, angular, vue, preact, lit and svelte.\n\n|Name|Default Tab Names|Code|\n|----|---|---|\n|DEFAULT_VANILLAJS_CODESANDBOX(JS)|HTML, VANILLA, CSS(optional)|[View Code](https://github.com/naver/storybook-addon-preview/blob/master/src/codesandbox/VanillaJS.ts)|\n|DEFAULT_VANILLA_CODESANDBOX(TS)|HTML, VANILLA, CSS(optional)|[View Code](https://github.com/naver/storybook-addon-preview/blob/master/src/codesandbox/Vanilla.ts)|\n|DEFAULT_REACT_CODESANDBOX(TS)|React, CSS(optional)|[View Code](https://github.com/naver/storybook-addon-preview/blob/master/src/codesandbox/React.ts)\n|DEFAULT_REACTJS_CODESANDBOX(TS)|ReactJS, CSS(optional)|[View Code](https://github.com/naver/storybook-addon-preview/blob/master/src/codesandbox/ReactJS.ts)\n|DEFAULT_ANGULAR_CODESANDBOX|Angular(html, component, module), CSS(optional)|[View Code](https://github.com/naver/storybook-addon-preview/blob/master/src/codesandbox/Angular.ts)|\n|DEFAULT_VUE_CODESANDBOX|Vue|[View Code](https://github.com/naver/storybook-addon-preview/blob/master/src/codesandbox/Vue.ts)|\n|DEFAULT_VUE3_CODESANDBOX|Vue3|[View Code](https://github.com/naver/storybook-addon-preview/blob/master/src/codesandbox/Vue3.ts)|\n|DEFAULT_SVELTE_CODESANDBOX|Svelte|[View Code](https://github.com/naver/storybook-addon-preview/blob/master/src/codesandbox/Svelte.ts)|\n|DEFAULT_LIT_CODESANDBOX|Lit, CSS(optional)|[View Code](https://github.com/naver/storybook-addon-preview/blob/master/src/codesandbox/Lit.ts)|\n\n\n#### The following explains how to use the default codesandbox preset.\n\n\n```ts\nimport {\n    DEFAULT_VANILLA_CODESANDBOX,\n    DEFAULT_REACT_CODESANDBOX,\n    DEFAULT_ANGULAR_CODESANDBOX,\n} from \"storybook-addon-preview\";\n\n{\n    preview: [\n        {\n            // { tab: \"HTML\" }\n            tab: \"HTML\",\n            template: ...,\n        },\n        {\n            // { tab: \"CSS\" }\n            tab: \"CSS\",\n            template: ...,\n        },\n        {\n            // { tab: \"Vanilla\" }\n            tab: \"Vanilla\",\n            template: ...,\n            codesandbox: DEFAULT_VANILLA_CODESANDBOX([\"@egjs/infinitegrid\"]),\n        },\n        {\n            // { tab: \"React\" }\n            tab: \"React\",\n            template: ...,\n            codesandbox: DEFAULT_REACT_CODESANDBOX([\"@egjs/react-infinitegrid\"]),\n        },\n        {\n            // { tab: \"Angular\", index: 0 }\n            tab: \"Angular\",\n            description: \"app.component.html\",\n            template: ...,\n            language: \"markup\",\n            codesandbox: DEFAULT_ANGULAR_CODESANDBOX([\"@egjs/ngx-infinitegrid\"]),\n        },\n        {\n            // { tab: \"Angular\", index: 1 }\n            tab: \"Angular\",\n            description: \"app.component.ts\",\n            template: ...,\n            language: \"tsx\",\n            codesandbox: DEFAULT_ANGULAR_CODESANDBOX([\"@egjs/ngx-infinitegrid\"]),\n        },\n        {\n            // { tab: \"Angular\", index: 2 }\n            tab: \"Angular\",\n            description: \"app.module.ts\",\n            template: ...,\n            language: \"typescript\",\n            codesandbox: DEFAULT_ANGULAR_CODESANDBOX([\"@egjs/ngx-infinitegrid\"]),\n        },\n    ],\n}\n```\n\n#### Change tab names\n\nCheck the code sandbox preset code for the file names.\n\n```js\nimport {\n    DEFAULT_VANILLA_CODESANDBOX,\n    DEFAULT_REACT_CODESANDBOX,\n    DEFAULT_ANGULAR_CODESANDBOX,\n} from \"storybook-addon-preview\";\n\n{\n    preview: [\n        {\n            tab: \"Custom HTML\",\n            template: ...,\n        },\n        {\n            tab: \"Custom CSS\",\n            template: ...,\n        },\n        {\n            tab: \"Vanilla\",\n            template: ...,\n            codesandbox: DEFAULT_VANILLA_CODESANDBOX([\"@egjs/infinitegrid\"], {\n                \"index.html\": {\n                    tab: \"Custom HTML\",\n                    template: \"html\",\n                    values: {\n                        cssFiles: [\"src/styles.css\"],\n                        jsFiles: [\"src/index.ts\"],\n                    },\n                },\n                \"src/styles.css\" : { tab: \"Custom CSS\" },\n            }),\n        },\n        {\n            tab: \"Angular Component HTML\",\n            description: \"app.component.html\",\n            template: ...,\n            language: \"markup\",\n            codesandbox: DEFAULT_ANGULAR_CODESANDBOX([\"@egjs/ngx-infinitegrid\"], {\n                \"src/app/app.component.html\": { tab: \"Angular Component HTML\" },\n                \"src/app/app.component.ts\": { tab: \"Angular Component\" },\n                \"src/app/app.module.ts\": { tab: \"Angular Module\" },\n            }),\n        },\n        {\n            tab: \"Angular Component\",\n            description: \"app.component.ts\",\n            template: ...,\n            language: \"tsx\",\n            codesandbox: DEFAULT_ANGULAR_CODESANDBOX([\"@egjs/ngx-infinitegrid\"], {\n                \"src/app/app.component.html\": { tab: \"Angular Component HTML\" },\n                \"src/app/app.component.ts\": { tab: \"Angular Component\" },\n                \"src/app/app.module.ts\": { tab: \"Angular Module\" },\n            }),\n        },\n        {\n            tab: \"Angular Module\",\n            description: \"app.module.ts\",\n            template: ...,\n            language: \"typescript\",\n            codesandbox: DEFAULT_ANGULAR_CODESANDBOX([\"@egjs/ngx-infinitegrid\"], {\n                \"src/app/app.component.html\": { tab: \"Angular Component HTML\" },\n                \"src/app/app.component.ts\": { tab: \"Angular Component\" },\n                \"src/app/app.module.ts\": { tab: \"Angular Module\" },\n            }),\n        },\n    ],\n};\n```\n#### Make Custom CodeSandbox\n\n* `template` is based on [this](https://github.com/codesandbox/codesandbox-importers/blob/master/packages/import-utils/src/create-sandbox/templates.ts#L63) logic.\n* `dependencies`, `devDependencies`, `scripts` are based on `package.json`'s `dependencies`, `devDependencies`, `scripts`\n* `userDependencies` are dependencies of type array. ([`vue@^2.6.0`])\n* `files` has string, [CodeFileTab(object)](https://github.com/naver/storybook-addon-preview/blob/master/src/types.ts), and null types.\n    * CodeFileTab: Returns the preview tab as a string value.\n    * null: Delete the existing file.\n\nCodeSandbox supports various templates. To use the template, you need to define the basic files yourself. Please refer to the template in the CodeSandbox.\n\n```js\nexport const DEFAULT_VUE_CODESANDBOX: CodeSandboxTemplate = (userDependencies = [], files = {}) =\u003e {\n    return {\n        template: \"vue-cli\",\n        files: {\n            \"src/main.js\": `\nimport Vue from \"vue\";\nimport App from \"./App.vue\";\n\nVue.config.productionTip = false;\n\nnew Vue({\n    render: h =\u003e h(App)\n}).$mount(\"#app\");\n        `,\n            \"src/App.vue\": {\n                tab: \"Vue\",\n            },\n            ...files,\n        },\n        dependencies: {\n            \"vue\": \"^2.6.0\",\n        },\n        userDependencies,\n    };\n};\n\n```\n\n\n## Contributing\nSee [CONTRIBUTING.md](https://github.com/naver/storybook-addon-preview/blob/master/CONTRIBUTING.md).\n\n\n\n## License\n**storybook-addon-preview** is released under the [MIT license](https://raw.githubusercontent.com/naver/egjs/master/LICENSE.txt).\n\n\n```\nCopyright (c) 2020-present NAVER Corp.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in\nall copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.  IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN\nTHE SOFTWARE.\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnaver%2Fstorybook-addon-preview","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnaver%2Fstorybook-addon-preview","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnaver%2Fstorybook-addon-preview/lists"}