fix: storybook does not work (#838)

Co-authored-by: Tobias Åström <tsm@qlik.com>

.github/CONTRIBUTING.md

@@ -40,8 +40,8 @@ This is a multi-package repository which uses [lerna](https://github.com/lerna/l
   - `enigma-mocker`: Public JavaScript API which creates a mocked enigma app to renders visualizations without a connected Qlik engine
   - `snapshooter`: Public JavaScript API which captures rendered charts as images
   - `conversion`: [private] Provides conversion functionality to extensions with hyperCubes.
-  - `theme`: [private] Access/consume the currently applied theme
-  - `locale`: [private] Handle translation string to generate all locales
+  - `theme`: [private] Provides access and consumption of the currently applied theme
+  - `locale`: [private] Handles translation strings and generates all locales
 - `commands` - CLI commands
   - `build`: cli command to build a supernova
   - `cli`: entry point for all cli commands
@@ -55,14 +55,14 @@ This is a multi-package repository which uses [lerna](https://github.com/lerna/l
 ### Development workflow
 
 - `yarn` install all dependencies
-- `yarn run build` generates UMD bundles for all packages and a ESM bundle for stardust
-- `yarn run lint` checks code style
+- `yarn run build` generate UMD bundles for all packages and an ESM bundle for stardust
+- `yarn run lint` check code style
 - `yarn run format` format code style
-- `yarn run test` runs all tests
+- `yarn run test` run all tests
 
 ### Cutting a release
 
-**Prerelase**
+**Pre-release**
 
 ```sh
 npx lerna version --no-git-tag-version --no-push --no-conventional-commits --preid alpha --exact
@@ -136,4 +136,4 @@ The `<scope>` of the commit is optional and can be omitted. When used though, it
 
 ## <a name="cla"></a> Signing the CLA
 
-We need you to sign our Contributor License Agreement (CLA) before we can accept your Pull Request. Visit this link for more information: https://github.com/qlik-oss/open-source/blob/master/sign-cla.md.
+We need you to sign our Contributor License Agreement (CLA) before we can accept your Pull Request. Visit this link for more information: <https://github.com/qlik-oss/open-source/blob/master/sign-cla.md>.

.storybook/addons.js

@@ -1 +0,0 @@
-import '@storybook/addon-knobs/register';

.storybook/config.js

@@ -1,41 +0,0 @@
-import React from 'react';
-import { addDecorator, addParameters, configure } from '@storybook/react';
-import { withKnobs } from '@storybook/addon-knobs';
-import { create } from '@storybook/theming';
-import { createTheme, ThemeProvider } from '@nebula.js/ui/theme';
-
-import InstanceContext from '../apis/nucleus/src/contexts/InstanceContext';
-
-const translator = {
-  get(s) {
-    return s;
-  },
-};
-
-const t = createTheme('light');
-
-addDecorator((storyFn) => {
-  return <ThemeProvider theme={t}>{storyFn()}</ThemeProvider>;
-});
-
-addDecorator((storyFn) => {
-  return <InstanceContext.Provider value={{ translator }}>{storyFn()}</InstanceContext.Provider>;
-});
-
-addDecorator(withKnobs);
-
-const storybookTheme = create({
-  base: 'light',
-
-  brandTitle: 'nebula.js',
-  brandUrl: 'https://github.com/qlik-oss/nebula.js',
-  brandImage: 'https://raw.githubusercontent.com/qlik-oss/nebula.js/master/docs/assets/logos/nebula.png',
-});
-
-addParameters({
-  options: {
-    theme: storybookTheme,
-  },
-});
-
-configure(require.context('../apis', true, /__stories__\/.+\.jsx?$/), module);

.storybook/main.js

@@ -0,0 +1,17 @@
+module.exports = {
+  stories: [
+    '../apis/nucleus/src/components/**/__stories__/**/*.stories.mdx',
+    '../apis/nucleus/src/components/**/__stories__/**/*.stories.@(js|jsx|ts|tsx)',
+  ],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-controls',
+    '@storybook/addon-docs',
+  ],
+  framework: '@storybook/react',
+  core: {
+    builder: '@storybook/builder-webpack5',
+  },
+};

.storybook/presets.js

@@ -1 +0,0 @@
-module.exports = ['@storybook/addon-docs/react/preset'];

.storybook/preview.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { createTheme, ThemeProvider } from '@nebula.js/ui/theme';
+
+import InstanceContext from '../apis/nucleus/src/contexts/InstanceContext';
+
+const translator = {
+  get(s) {
+    return s;
+  },
+};
+
+const t = createTheme('light');
+
+export const decorators = [
+  (Story) => (
+    <ThemeProvider theme={t}>
+      <InstanceContext.Provider value={{ translator }}>
+        <Story />
+      </InstanceContext.Provider>
+    </ThemeProvider>
+  ),
+];
+
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+};

apis/nucleus/src/components/selections/__stories__/app-selections.stories.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Grid } from '@material-ui/core';
-import { text, boolean } from '@storybook/addon-knobs'; // eslint-disable-line
+
 import { AppSelections } from '../AppSelections';
 
 export default {

apis/nucleus/src/components/selections/__stories__/multi-field.stories.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Grid } from '@material-ui/core';
-import { text, boolean } from '@storybook/addon-knobs'; // eslint-disable-line
+
 import MultiState from '../MultiState';
 
 export default {

apis/nucleus/src/components/selections/__stories__/one-field.stories.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Grid } from '@material-ui/core';
-import { text, boolean } from '@storybook/addon-knobs'; // eslint-disable-line
+
 import OneField from '../OneField';
 
 export default {
@@ -25,8 +24,11 @@ const api = {
     return false;
   },
 };
-
-const states = [
+const info = {
+  states: ['$'],
+  qField: 'Product',
+};
+const selections = [
   { info: 'None', qTotal: 0 },
   {
     info: 'One locked',
@@ -60,28 +62,46 @@ const states = [
   },
 ];
 
-const stateFn = (state) => (
-  <OneField
-    api={api}
-    field={{
-      states: [text('State', '$')],
-      selections: [{ qField: text('Field', 'Product'), ...state, qLocked: !!state.qLocked }],
-    }}
-  />
-);
+function Template(args) {
+  const { states, qLocked, ...rest } = args;
 
-export const fields = () => (
-  <Grid container spacing={1} wrap="nowrap">
-    <Grid item>{stateFn(states[0])}</Grid>
-    <Grid item>{stateFn(states[1])}</Grid>
-    <Grid item>{stateFn(states[2])}</Grid>
-    <Grid item>{stateFn(states[3])}</Grid>
-    <Grid item>{stateFn(states[4])}</Grid>
-  </Grid>
-);
+  return (
+    <OneField
+      api={api}
+      field={{
+        states,
+        selections: [{ ...rest, qLocked: !!qLocked }],
+      }}
+    />
+  );
+}
 
-export const none = () => stateFn(states[0]);
-export const locked = () => stateFn(states[1]);
-export const one = () => stateFn(states[2]);
-export const some = () => stateFn(states[3]);
-export const all = () => stateFn(states[4]);
+export const locked = Template.bind({});
+locked.args = {
+  ...info,
+  ...selections[1],
+};
+
+export const none = Template.bind({});
+none.args = {
+  ...info,
+  ...selections[0],
+};
+
+export const one = Template.bind({});
+one.args = {
+  ...info,
+  ...selections[2],
+};
+
+export const some = Template.bind({});
+some.args = {
+  ...info,
+  ...selections[3],
+};
+
+export const all = Template.bind({});
+all.args = {
+  ...info,
+  ...selections[4],
+};

package.json

@@ -11,7 +11,8 @@
     "locale:generate": "node apis/locale/scripts/generate-all.mjs",
     "lint": "eslint packages apis commands --ext .js,.jsx",
     "lint:check": "eslint --print-config ./aw.config.js | eslint-config-prettier-check",
-    "start:ui": "start-storybook",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook",
     "spec": "lerna run spec --stream --concurrency 99 && lerna run ts --stream --concurrency 99 ",
     "test": "yarn run test:unit",
     "mashup": "node scripts/start-mashup.js",
@@ -44,9 +45,16 @@
     "@rollup/plugin-json": "4.1.0",
     "@rollup/plugin-node-resolve": "13.3.0",
     "@rollup/plugin-replace": "4.0.0",
-    "@storybook/addon-docs": "6.4.22",
-    "@storybook/addon-knobs": "6.4.0",
-    "@storybook/react": "6.4.22",
+    "@storybook/addon-docs": "6.5.6",
+    "@storybook/addon-controls": "6.5.6",
+    "@storybook/addon-actions": "6.5.6",
+    "@storybook/addon-essentials": "6.5.6",
+    "@storybook/addon-interactions": "6.5.6",
+    "@storybook/addon-links": "6.5.6",
+    "@storybook/builder-webpack5": "6.5.6",
+    "@storybook/manager-webpack5": "6.5.6",
+    "@storybook/react": "6.5.6",
+    "@storybook/testing-library": "0.0.11",
     "babel-loader": "8.2.5",
     "babel-plugin-istanbul": "6.1.1",
     "body-parser": "1.20.0",
@@ -60,8 +68,9 @@
     "eslint-plugin-mocha": "10.0.4",
     "eslint-plugin-prettier": "4.0.0",
     "eslint-plugin-react": "7.29.4",
+    "eslint-plugin-storybook": "0.5.12",
     "express": "4.18.1",
-    "husky": "^7.0.4",
+    "husky": "7.0.4",
     "jimp": "0.16.1",
     "lerna": "4.0.0",
     "lint-staged": "12.4.1",