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} />
);