fix(#1216): storybook config

.eslintrc

@@ -1,5 +1,5 @@
 {
-	"extends": ["airbnb", "prettier"],
+	"extends": ["airbnb", "prettier", "plugin:storybook/recommended"],
 	"parser": "@babel/eslint-parser",
 	"env": {
     "browser": true,

.storybook/main.js

@@ -1,29 +1,35 @@
-const path = require('path');
-
-module.exports = {
+/** @type { import('@storybook/react-webpack5').StorybookConfig } */
+const config = {
   stories: ['../client/**/*.stories.(jsx|mdx)'],
   addons: [
-    '@storybook/addon-actions',
-    '@storybook/addon-docs',
-    '@storybook/addon-knobs',
     '@storybook/addon-links',
-    'storybook-addon-theme-playground/dist/register'
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions'
   ],
-  webpackFinal: async config => {
-    // do mutation to the config
-
-    const rules = config.module.rules;
-
-    // modify storybook's file-loader rule to avoid conflicts with svgr
-    const fileLoaderRule = rules.find(rule => rule.test.test('.svg'));
-    fileLoaderRule.exclude = path.resolve(__dirname, '../client');
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {}
+  },
+  docs: {
+    autodocs: 'tag'
+  },
+  async webpackFinal(config) {
+    // https://storybook.js.org/docs/react/builders/webpack
+    // this modifies the existing image rule to exclude .svg files
+    // since we want to handle those files with @svgr/webpack
+    const imageRule = config.module.rules.find(rule => rule.test.test('.svg'))
+    imageRule.exclude = /\.svg$/
 
-    // use svgr for svg files
-    rules.push({
+    // configure .svg files to be loaded with @svgr/webpack
+    config.module.rules.push({
       test: /\.svg$/,
-      use: ["@svgr/webpack"],
+      use: ['@svgr/webpack']
     })
 
-    return config;
+    return config
   },
 };
+
+export default config;
+
+

.storybook/preview.js

@@ -1,31 +1,21 @@
 import React from 'react';
-import { addDecorator, addParameters } from '@storybook/react';
-import { withKnobs } from "@storybook/addon-knobs";
-import { withThemePlayground } from 'storybook-addon-theme-playground';
-import { ThemeProvider } from "styled-components";
+import { Provider } from 'react-redux';
 
-import theme, { Theme } from '../client/theme';
+import ThemeProvider from '../client/modules/App/components/ThemeProvider';
+import configureStore from '../client/store';
+import '../client/styles/build/css/main.css'
 
-addDecorator(withKnobs);
+const initialState = window.__INITIAL_STATE__;
 
-const themeConfigs = Object.values(Theme).map(
-  name => {
-    return { name, theme: theme[name] };
-  }
-);
+const store = configureStore(initialState);
 
-addDecorator(withThemePlayground({
-  theme: themeConfigs,
-  provider: ThemeProvider
-}));
+export const decorators = [
+  (Story) => (
+    <Provider store={store}>
+      <ThemeProvider>
+        <Story />
+      </ThemeProvider>
+    </Provider>
+  ),
+]
 
-addParameters({
-  options: {
-    /**
-     * display the top-level grouping as a "root" in the sidebar
-     */
-    showRoots: true,
-  },
-})
-
-// addDecorator(storyFn => <ThemeProvider theme={theme}>{storyFn()}</ThemeProvider>);

client/common/Button.stories.jsx

@@ -1,22 +1,22 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
-import { boolean, text } from '@storybook/addon-knobs';
 
 import Button from './Button';
 import { GithubIcon, DropdownArrowIcon, PlusIcon } from './icons';
 
 export default {
   title: 'Common/Button',
-  component: Button
+  component: Button,
+  args: {
+    children: 'this is the button',
+    label: 'submit',
+    disabled: false
+  }
 };
 
-export const AllFeatures = () => (
-  <Button
-    disabled={boolean('disabled', false)}
-    type="submit"
-    label={text('label', 'submit')}
-  >
-    {text('children', 'this is the button')}
+export const AllFeatures = (args) => (
+  <Button disabled={args.disabled} type="submit" label={args.label}>
+    {args.children}
   </Button>
 );
 

client/common/icons.stories.jsx

@@ -1,16 +1,20 @@
 import React from 'react';
-import { select } from '@storybook/addon-knobs';
 
 import * as icons from './icons';
 
 export default {
   title: 'Common/Icons',
-  component: icons
+  component: icons,
+  argTypes: {
+    variant: {
+      options: Object.keys(icons),
+      control: { type: 'select' },
+      default: icons.CircleFolderIcon
+    }
+  }
 };
 
-export const AllIcons = () => {
-  const names = Object.keys(icons);
-
-  const SelectedIcon = icons[select('name', names, names[0])];
+export const Icons = (args) => {
+  const SelectedIcon = icons[args.variant || 'CircleInfoIcon'];
   return <SelectedIcon />;
 };

client/components/Nav/NavDropdownMenu.jsx

@@ -11,10 +11,10 @@ function NavDropdownMenu({ id, title, children }) {
 
   const { createDropdownHandlers } = useContext(NavBarContext);
 
-  const handlers = useMemo(() => createDropdownHandlers(id), [
-    createDropdownHandlers,
-    id
-  ]);
+  const handlers = useMemo(
+    () => createDropdownHandlers(id),
+    [createDropdownHandlers, id]
+  );
 
   return (
     <li className={classNames('nav__item', isOpen && 'nav__item--open')}>

client/components/Nav/NavMenuItem.jsx

@@ -8,10 +8,10 @@ function NavMenuItem({ hideIf, ...rest }) {
 
   const { createMenuItemHandlers } = useContext(NavBarContext);
 
-  const handlers = useMemo(() => createMenuItemHandlers(parent), [
-    createMenuItemHandlers,
-    parent
-  ]);
+  const handlers = useMemo(
+    () => createMenuItemHandlers(parent),
+    [createMenuItemHandlers, parent]
+  );
 
   if (hideIf) {
     return null;

client/components/createRedirectWithUsername.jsx

@@ -22,8 +22,7 @@ function mapStateToProps(state) {
 
 const ConnectedRedirectToUser = connect(mapStateToProps)(RedirectToUser);
 
-const createRedirectWithUsername = (url) => (props) => (
-  <ConnectedRedirectToUser {...props} url={url} />
-);
+const createRedirectWithUsername = (url) => (props) =>
+  <ConnectedRedirectToUser {...props} url={url} />;
 
 export default createRedirectWithUsername;

client/modules/IDE/components/Console.jsx

@@ -206,12 +206,8 @@ const Console = () => {
   const isExpanded = useSelector((state) => state.ide.consoleIsExpanded);
   const isPlaying = useSelector((state) => state.ide.isPlaying);
   const { theme, fontSize } = useSelector((state) => state.preferences);
-  const {
-    collapseConsole,
-    expandConsole,
-    clearConsole,
-    dispatchConsoleEvent
-  } = bindActionCreators({ ...IDEActions, ...ConsoleActions }, useDispatch());
+  const { collapseConsole, expandConsole, clearConsole, dispatchConsoleEvent } =
+    bindActionCreators({ ...IDEActions, ...ConsoleActions }, useDispatch());
 
   const cm = useRef({});
 

client/modules/IDE/components/FileNode.jsx

@@ -40,13 +40,8 @@ function parseFileName(name) {
 }
 
 function FileName({ name }) {
-  const {
-    baseName,
-    firstLetter,
-    lastLetter,
-    middleText,
-    extension
-  } = parseFileName(name);
+  const { baseName, firstLetter, lastLetter, middleText, extension } =
+    parseFileName(name);
   return (
     <span className="sidebar__file-item-name-text">
       <span>{firstLetter}</span>

client/modules/IDE/components/Toolbar.jsx

@@ -86,8 +86,8 @@ class Toolbar extends React.Component {
     });
     const nameContainerClass = classNames({
       'toolbar__project-name-container': true,
-      'toolbar__project-name-container--editing': this.props.project
-        .isEditingName
+      'toolbar__project-name-container--editing':
+        this.props.project.isEditingName
     });
 
     const canEditProjectName = this.canEditProjectName();

client/modules/IDE/pages/MobileIDEView.jsx

@@ -210,41 +210,43 @@ const handleGlobalKeydown = (props, cmController) => (e) => {
   }
 };
 
-const autosave = (autosaveInterval, setAutosaveInterval) => (
-  props,
-  prevProps
-) => {
-  const {
-    autosaveProject,
-    preferences,
-    ide,
-    selectedFile: file,
-    project,
-    isUserOwner
-  } = props;
-
-  const { selectedFile: oldFile } = prevProps;
-
-  const doAutosave = () => autosaveProject(true);
-
-  if (isUserOwner && project.id) {
-    if (preferences.autosave && ide.unsavedChanges && !ide.justOpenedProject) {
-      if (file.name === oldFile.name && file.content !== oldFile.content) {
-        if (autosaveInterval) {
-          clearTimeout(autosaveInterval);
+const autosave =
+  (autosaveInterval, setAutosaveInterval) => (props, prevProps) => {
+    const {
+      autosaveProject,
+      preferences,
+      ide,
+      selectedFile: file,
+      project,
+      isUserOwner
+    } = props;
+
+    const { selectedFile: oldFile } = prevProps;
+
+    const doAutosave = () => autosaveProject(true);
+
+    if (isUserOwner && project.id) {
+      if (
+        preferences.autosave &&
+        ide.unsavedChanges &&
+        !ide.justOpenedProject
+      ) {
+        if (file.name === oldFile.name && file.content !== oldFile.content) {
+          if (autosaveInterval) {
+            clearTimeout(autosaveInterval);
+          }
+          console.log('will save project in 20 seconds');
+          setAutosaveInterval(setTimeout(doAutosave, 20000));
         }
-        console.log('will save project in 20 seconds');
-        setAutosaveInterval(setTimeout(doAutosave, 20000));
+      } else if (autosaveInterval && !preferences.autosave) {
+        clearTimeout(autosaveInterval);
+        setAutosaveInterval(null);
       }
-    } else if (autosaveInterval && !preferences.autosave) {
+    } else if (autosaveInterval) {
       clearTimeout(autosaveInterval);
       setAutosaveInterval(null);
     }
-  } else if (autosaveInterval) {
-    clearTimeout(autosaveInterval);
-    setAutosaveInterval(null);
-  }
-};
+  };
 
 // ide, preferences, project, selectedFile, user, params, unsavedChanges, expandConsole, collapseConsole,
 // stopSketch, startSketch, getProject, clearPersistedState, autosaveProject, saveProject, files

client/utils/responsive.jsx

@@ -20,8 +20,9 @@ export const mobileFirst = (MobileComponent, Fallback) => (props) => {
   );
 };
 
-export const responsiveForm = (DesktopComponent) => (props) => (
-  <ResponsiveForm>
-    <DesktopComponent {...props} />
-  </ResponsiveForm>
-);
+export const responsiveForm = (DesktopComponent) => (props) =>
+  (
+    <ResponsiveForm>
+      <DesktopComponent {...props} />
+    </ResponsiveForm>
+  );