Merge remote-tracking branch 'upstream/develop' into refactor/redux-toolkit

# Conflicts:
#	client/modules/App/App.jsx
#	package-lock.json

Author: lindapaiste

.babelrc

@@ -51,7 +51,16 @@
     "development": {
       "plugins": [
         "babel-plugin-styled-components",
-        "react-hot-loader/babel"
+        "react-refresh/babel"
+      ],
+      "presets": [
+        [
+          "@babel/preset-react",
+          {
+            "development": true,
+            "runtime": "automatic"
+          }
+        ]
       ]
     }
   },

.eslintrc

@@ -1,5 +1,5 @@
 {
-	"extends": ["airbnb", "prettier"],
+	"extends": ["airbnb", "prettier", "plugin:storybook/recommended"],
 	"parser": "@babel/eslint-parser",
 	"env": {
     "browser": true,
@@ -20,6 +20,7 @@
     "no-console": 0,
     "no-alert": 0,
     "no-underscore-dangle": 0,
+    "no-useless-catch": 2,
     "max-len": [1, 120, 2, {"ignoreComments": true, "ignoreTemplateLiterals": true}],
     "quote-props": [1, "as-needed"],
     "no-unused-vars": [1, {"vars": "local", "args": "none"}],

.github/workflows/deploy.yml

@@ -23,7 +23,9 @@ jobs:
         with:
           ref: release
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v1
+        uses: docker/setup-buildx-action@v2
+        with:
+          platforms: linux/amd64,linux/arm64
       - name: Login to Docker Hub
         uses: docker/login-action@v1
         with:

.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-head.html

@@ -0,0 +1,5 @@
+<script>
+    // https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/176#issuecomment-683150213
+    window.$RefreshReg$ = () => {};
+    window.$RefreshSig$ = () => () => {};
+</script>

.storybook/preview.js

@@ -1,31 +1,25 @@
 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 { MemoryRouter } from 'react-router';
 
-import theme, { Theme } from '../client/theme';
+import ThemeProvider from '../client/modules/App/components/ThemeProvider';
+import configureStore from '../client/store';
+import '../client/i18n-test';
+import '../client/styles/storybook.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}>
+      <MemoryRouter>
+        <ThemeProvider>
+          <Story />
+        </ThemeProvider>
+      </MemoryRouter>
+    </Provider>
+  ),
+]
 
-addParameters({
-  options: {
-    /**
-     * display the top-level grouping as a "root" in the sidebar
-     */
-    showRoots: true,
-  },
-})
-
-// addDecorator(storyFn => <ThemeProvider theme={theme}>{storyFn()}</ThemeProvider>);

client/browserHistory.js

@@ -0,0 +1,5 @@
+import { createBrowserHistory } from 'history';
+
+const browserHistory = createBrowserHistory();
+
+export default browserHistory;

client/common/Button.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Link } from 'react-router';
+import { Link } from 'react-router-dom';
 
 import { remSize, prop } from '../theme';
 

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/ButtonOrLink.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
+
+/**
+ * Helper for switching between <button>, <a>, and <Link>
+ */
+const ButtonOrLink = ({ href, children, ...props }) => {
+  if (href) {
+    if (href.startsWith('http')) {
+      return (
+        <a href={href} target="_blank" rel="noopener noreferrer" {...props}>
+          {children}
+        </a>
+      );
+    }
+    return (
+      <Link to={href} {...props}>
+        {children}
+      </Link>
+    );
+  }
+  return <button {...props}>{children}</button>;
+};
+
+/**
+ * Accepts all the props of an HTML <a> or <button> tag.
+ */
+ButtonOrLink.propTypes = {
+  /**
+   * If providing an href, will render as a link instead of a button.
+   * Can be internal or external.
+   * Internal links will use react-router.
+   * External links should start with 'http' or 'https' and will open in a new window.
+   */
+  href: PropTypes.string,
+  /**
+   * Content of the button/link.
+   * Can be either a string or a complex element.
+   */
+  children: PropTypes.node.isRequired
+};
+
+ButtonOrLink.defaultProps = {
+  href: null
+};
+
+export default ButtonOrLink;

client/common/ButtonOrLink.test.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor, history } from '../test-utils';
+import ButtonOrLink from './ButtonOrLink';
+
+describe('ButtonOrLink', () => {
+  const clickHandler = jest.fn();
+
+  afterEach(() => {
+    clickHandler.mockClear();
+  });
+
+  it('can render a clickable button', () => {
+    render(<ButtonOrLink onClick={clickHandler}>Text</ButtonOrLink>);
+    const button = screen.getByRole('button');
+    expect(button).toBeInstanceOf(HTMLButtonElement);
+    expect(button).toContainHTML('<button>Text</button>');
+    fireEvent.click(button);
+    expect(clickHandler).toHaveBeenCalled();
+  });
+
+  it('can render an external link', () => {
+    render(<ButtonOrLink href="https://p5js.org">p5</ButtonOrLink>);
+    const link = screen.getByRole('link');
+    expect(link).toBeInstanceOf(HTMLAnchorElement);
+    expect(link).toHaveAttribute('href', 'https://p5js.org');
+  });
+
+  it('can render an internal link with react-router', async () => {
+    render(<ButtonOrLink href="/about">About</ButtonOrLink>);
+
+    const link = screen.getByText('About');
+    fireEvent.click(link);
+
+    await waitFor(() => expect(history.location.pathname).toEqual('/about'));
+  });
+});

client/common/icons.jsx

@@ -13,15 +13,18 @@ import DropdownArrow from '../images/down-filled-triangle.svg';
 import Preferences from '../images/preferences.svg';
 import Play from '../images/triangle-arrow-right.svg';
 import More from '../images/more.svg';
+import Editor from '../images/editor.svg';
+import Account from '../images/account.svg';
 import Code from '../images/code.svg';
 import Save from '../images/save.svg';
 import Terminal from '../images/terminal.svg';
-
 import Folder from '../images/folder-padded.svg';
-
 import CircleTerminal from '../images/circle-terminal.svg';
 import CircleFolder from '../images/circle-folder.svg';
 import CircleInfo from '../images/circle-info.svg';
+import Add from '../images/add.svg';
+import Filter from '../images/filter.svg';
+import Cross from '../images/cross.svg';
 
 // HOC that adds the right web accessibility props
 // https://www.scottohara.me/blog/2019/05/22/contextual-images-svgs-and-a11y.html
@@ -83,16 +86,19 @@ export const GoogleIcon = withLabel(Google);
 export const PlusIcon = withLabel(Plus);
 export const CloseIcon = withLabel(Close);
 export const ExitIcon = withLabel(Exit);
+export const EditorIcon = withLabel(Editor);
+export const AccountIcon = withLabel(Account);
 export const DropdownArrowIcon = withLabel(DropdownArrow);
 export const PreferencesIcon = withLabel(Preferences);
 export const PlayIcon = withLabel(Play);
 export const MoreIcon = withLabel(More);
 export const TerminalIcon = withLabel(Terminal);
 export const CodeIcon = withLabel(Code);
 export const SaveIcon = withLabel(Save);
-
 export const FolderIcon = withLabel(Folder);
-
+export const CrossIcon = withLabel(Cross);
 export const CircleTerminalIcon = withLabel(CircleTerminal);
 export const CircleFolderIcon = withLabel(CircleFolder);
 export const CircleInfoIcon = withLabel(CircleInfo);
+export const AddIcon = withLabel(Add);
+export const FilterIcon = withLabel(Filter);

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