naver/storybook-addon-preview

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

storybook-addon-preview's Issues

Add `create-react-app` CSB preset for React

Possible implementation

New Presets

• ReactJS - create-react-app
• ReactTS - create-react-app-typescript

Note
I can raise a PR for this feature, if agreed

Support for Storybook dark theme

When I was update to theme.dark, It looks like awful.
and support theme type is normal, light, dark
Support it?

Support globals

Storybook provide args and globals but storybook-addon-preview seems support only args.
Can we add globals support ?

control variables not shown in preview

Hi,

I have some trouble understanding how to reflect the variables from controls to the preview.
Do i need knobs or does it work with the @storybook/addon-controls? Also when using vue framework.

Also I am a bit unsure how the codesandbox will transfer the files, is it through the tabs name?

Does the tab property have a close dependency to language and codesandbox?

TestTable.stories.js

export default {
  title: 'Components/Table',
  decorators: [withPreview],
  argTypes: {
      name: { control: 'text' }
  },
};

const exampleTemplate = (args, {argTypes}) => ({
    components: {TestTable},
    props: Object.keys(argTypes),
    template: '<test-table :name="name"></test-table>',
});

export const DefaultTable = exampleTemplate.bind({})

PreviewExample.parameters = {
    preview: [
        {
            tab: "Vue",
            template: previewTemplate`
                <test-table :name="name"></test-table>
            `,
            copy: true,
            codesandbox: DEFAULT_VUE_CODESANDBOX([]),
        },
    ],
}

This doesn't work when mixing tab, language and codesandbox:

export const PreviewExample = exampleTemplate.bind({})

PreviewExample.parameters = {
    preview: [
        {
            tab: "Random",
            template: previewTemplate`
                <test-table></test-table>
            `,
            language: "html",
            copy: true,
            codesandbox: DEFAULT_VUE_CODESANDBOX([]),
        },
    ],
}

And how do I use this in my example?:

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: ["[email protected]"],
});

Sincerely,
leu2tm

Plugin doesn't work with Storybook 7

Following the instructions in the readme, I can't get the plugin to register.

Using:

module.exports = {
    addons: [
        "storybook-addon-preview/register"
    ],
};

The whole storybook fails to load and fails when the plugin tries to .default.getConfig()

When using the ESM version:

module.exports = {
    addons: [
        "storybook-addon-preview/esm/register"
    ],
};

The plugin seems to load, but the panels are never loaded even with a single component and the code in the example, the panel does not load.

We're using storybook 7.6.12 for all code and addons. From some investigation it looks like some storybook 6 dependencies are being loaded. I don't know if this is the cause but it's not working

`knobs` is always an empy object

Hello

I use this plugin to display code sample relatives to selected knobs.
But when I tried to update Storybook to v6 and storybook-addon-preview to v2, all my knobs was undefined.

After investigation the object passed through the template function is always empty

An extract from the story config where the console.log(knobs) print always an empty object.

    preview: [
      {
        tab: 'Javascript',
        template: knobs => {
          console.log(knobs) // empty object
          return `<ui-avatar size="${knobs['Size']}"></ui-avatar>`;
        },
        language: 'html',
        copy: false,
      }
    ]

An extract from my package.json

"@storybook/addon-a11y": "6.1.21",
"@storybook/addon-knobs": "6.1.21",
"@storybook/addon-viewport": "6.1.21",
"@storybook/html": "6.1.21",
"@storybook/theming": "6.1.21",
"storybook-addon-preview": "2.1.0",

Request a new major version for storybook 7

Hello,

I suggest to build a new major version for storybook7

• drop support of storybook < 7
• support storybook from v7 and more recent
• Drop support of deprecated storybook-knobs (only deal with args and globals)

Silent faillure in built storybook

Hello,

I have some silent fails when the template is a function.
From this try/catch :

https://github.com/naver/storybook-addon-preview/blob/master/src/PreviewPanel.tsx#L66-L70

        try {
            text = template(nextProps, globals);
        } catch (e) {
            text = "";
        }

It happen only on built storybook.
When it's served for dev it doesn't happen.
I suspect Terser/Babel or something else to alter the function making it unable to be stringified properly.

I didn't identified why some functions fails and some others not.
It seems to fail more often for direct return arrow function :

template: (args) => /* html */ `
  <ce-avatar
    size="${args.size}"
    ${args.color ? `color='${args.color}'` : ''}
    ${args.type === 'picture' ? `src="assets/images/avatars/29.jpg"` : ''}
    ${args.type === 'initials' ? `initials="${args.initials}"` : ''}
  ></ce-avatar>
`,

Dark theme

I see that a dark theme was added but i'm unsure how to apply it in my code. could someone help me? I just want to have my code preview using a dark theme background colour and I'm not sure how to do that.

	preview: {
		template: renderCodePreview(Primary),
		language: 'html',
		copy: true
	},

When there is no preview, no preview is displayed.

please update react to 18

highlight comment appear in html.

<!-- [highlight] AA -->
<div></div>

highlight comment appear in html.
And highlight doesn't work either. Only in html.

SyntaxError: Cannot use import statement outside a module

I'm trying to add this code view to the example on storybook but i get this error in my tests

 FAIL  src/components/TaskList.test.js
  ● Test suite failed to run

    /Applications/MAMP/htdocs/ORGANIMI/taskbox/node_modules/storybook-addon-preview/dist/index.js:5
    import addons, { makeDecorator } from '@storybook/addons';
    ^^^^^^

    SyntaxError: Cannot use import statement outside a module

    > 1 | import { withPreview, previewTemplate, DEFAULT_VANILLA_CODESANDBOX } from "storybook-addon-preview";
        | ^
      2 | import React from 'react';
      3 | import { action } from '@storybook/addon-actions';
      4 | 

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
      at Object.<anonymous> (src/components/Task.stories.js:1:1)

I followed all tthe install instructions tho my implementation may be off.

import { withPreview, previewTemplate, DEFAULT_VANILLA_CODESANDBOX } from "storybook-addon-preview";
import React from 'react';
import { action } from '@storybook/addon-actions';

import Task from './Task';
import { withKnobs, text, boolean, number } from "@storybook/addon-knobs";

const opt1 = boolean("opt1", false);
const opt2 = number("num1", 0);
export default {
  component: Task,
  title: 'Task',
  // Our exports that end in "Data" are not stories.
  excludeStories: /.*Data$/,
  decorators:[withKnobs, withPreview],
  preview: [
    {
        tab: "Vanilla",
        template: previewTemplate`
const inst = new Instance({
opt1: ${"opt1"},
num1: ${"num1"},
});
        `,
        language: "js",
        copy: true,
        codesandbox: DEFAULT_VANILLA_CODESANDBOX(["@egjs/infinitegrid"]),
    },
]
};

export const taskData = {
  id: '1',
  title: 'Test Task',
  state: 'TASK_INBOX',
  updatedAt: new Date(2018, 0, 1, 9, 0),
};

export const actionsData = {
  onPinTask: action('onPinTask'),
  onArchiveTask: action('onArchiveTask'),
};

export const Default = () => <Task task={{ ...taskData }} {...actionsData} />;

export const Pinned = () => <Task task={{ ...taskData, state: 'TASK_PINNED' }} {...actionsData} />;

export const Archived = () => (
  <Task task={{ ...taskData, state: 'TASK_ARCHIVED' }} {...actionsData} />
);

Support for Storybook 6's "Controls"

We're starting a new project, and Storybook-Addon-Preview appears to provide one of the primary functionalities that we're looking to include in our Storybook.

Unfortunately, the latest Storybook version —6— replaces the old "Knobs" plug-in with a new "Controls" plug-in 1, which is included by default, and more importantly, it appears to replace the "Knobs" plug-in completely.

Do y'all have a timeline for when Storybook-Addon-Preview will be able to use "Controls" instead of "Knobs"?

Provide a way to enable custom Codesandbox PRESETS

I would like to create my own preset using Next JS & Tailwind for a project.

It would be awesome if you could extent the API to do that.

Possibly, it can be done using the below changes IMO,

export function getCodeSandBox(param: { framework: string, customPreset?: { [key: string]: any } , files: { [key: string]: any }, userDependencies: string[] }) {
    const { framework, files = {}, userDependencies = [] } = param;
    const {
        dependencies,
        devDependencies,
        template,
        files: presetFiles,
    } = customPreset || presets[framework];

Prettier

Can we integrate prettier to display the code preview ?

How to use the addon with CSF?

Hi,

The Preview addon is working fine when I use the format defined in the documentation.
stories.addDecorator(withKnobs).addDecorator(withPreview);

But how can I use this with the Component Story Format?

export default {
  title: 'Example/Button',
  component: Button,
  argTypes: {
    backgroundColor: { control: 'color' },
  },
} as Meta;

const Template: Story<Page> = (args: Page) => ({
  component: Page,
  props: args,
});

export const LoggedIn = Template.bind({});