Upgrade frontend to utilize new storybook conventions and next-i18nex…

…t, and upgrade packages

{{cookiecutter.project_name}}/frontend/.storybook/i18n.js

@@ -0,0 +1,16 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+import sv from '../public/locales/sv/common.json';
+
+i18n.use(initReactI18next).init({
+  resources: {
+    sv: { translation: sv },
+  },
+  fallbackLng: 'sv',
+  defaultLocale: 'sv',
+  locales: ['sv'],
+  debug: true,
+});
+
+export default i18n;

{{cookiecutter.project_name}}/frontend/.storybook/main.js

@@ -1,31 +1,62 @@
 const path = require('path');
 
 module.exports = {
-    stories: [
-        '../stories/**/*.stories.js',
-        '../components/**/*.stories.js',
-        '../containers/**/*.stories.js',
-    ],
-    core: {
-        builder: "webpack5",
+  staticDirs: ['../public'],
+  stories: [
+    '../stories/**/*.stories.js',
+    '../components/**/*.stories.js',
+    '../containers/**/*.stories.js',
+  ],
+  core: {
+    builder: 'webpack5',
+  },
+  babel: async (options) => {
+    options.presets = ['next/babel'];
+    return {
+      ...options,
+    };
+  },
+  addons: [
+    '@storybook/addon-viewport',
+    '@storybook/addon-a11y',
+    '@storybook/addon-backgrounds',
+    {
+      name: 'storybook-addon-next',
+      options: {
+        nextConfigPath: path.resolve(__dirname, '../next.config.js'),
+      },
     },
-    babel: async (options) => {
-        options.presets = ['next/babel'];
-        return {
-            ...options,
-        };
-    },
-    addons: [
-        '@storybook/addon-viewport',
-        '@storybook/addon-a11y',
-    ],
-    presets: [path.resolve(__dirname, 'next-preset.js')],
-    features: {
-        babelModeV7: true
-    }
-    // webpackFinal: async (baseConfig) => {
-    //   //const nextConfig = require('../next.config.js');
-    //   // merge whatever from nextConfig into the webpack config storybook will use
-    //   return { ...baseConfig };
-    // },
+  ],
+  features: {
+    babelModeV7: true,
+  },
+  webpackFinal: (config) => {
+    /**
+     * Fixes issue with `next-i18next` and is ready for webpack@5
+     * @see https://github.com/isaachinman/next-i18next/issues/1012#issuecomment-792697008
+     * @see https://github.com/storybookjs/storybook/issues/4082#issuecomment-758272734
+     * @see https://webpack.js.org/migrate/5/
+     */
+    const imageRule = config.module.rules.find((rule) =>
+      rule.test.test('.svg')
+    );
+    imageRule.exclude = /\.svg$/;
+
+    // add your rule as normal
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ['@svgr/webpack'],
+    });
+
+    config.resolve.fallback = {
+      fs: false,
+      tls: false,
+      net: false,
+      module: false,
+      path: require.resolve('path-browserify'),
+      crypto: false,
+    };
+
+    return config;
+  },
 };

{{cookiecutter.project_name}}/frontend/.storybook/preview.js

@@ -1,25 +1,52 @@
-import { addParameters } from '@storybook/client-api';
 import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+import { I18nextProvider } from 'react-i18next';
+import i18n from './i18n';
 
 import '../styles/index.css';
 
+export const decorators = [
+  (storyFn) => <I18nextProvider i18n={i18n}>{storyFn()}</I18nextProvider>,
+];
+
 const customViewports = {
-    gridSL: {
-        name: 'GRID - SL - Fluid',
-        styles: {
-            width: '500px',
-            height: '950px',
-        },
+  gridSL: {
+    name: 'GRID - SL - Fluid',
+    styles: {
+      width: '500px',
+      height: '950px',
     },
-    gridS: {
-        name: 'GRID - S - Fluid',
-        styles: {
-            width: '375px',
-            height: '950px',
-        },
+  },
+  gridS: {
+    name: 'GRID - S - Fluid',
+    styles: {
+      width: '375px',
+      height: '950px',
     },
+  },
 };
 
-addParameters({
-    viewport: { viewports: { ...customViewports, ...INITIAL_VIEWPORTS } },
-});
+export const parameters = {
+  layout: 'fullscreen',
+  viewport: { viewports: { ...customViewports, ...INITIAL_VIEWPORTS } },
+  backgrounds: {
+    default: 'white',
+    values: [
+      {
+        name: 'white',
+        value: '#fff',
+      },
+      {
+        name: 'primary pink',
+        value: '#c40064',
+      },
+      {
+        name: 'primary orange',
+        value: '#c9472d',
+      },
+      {
+        name: 'dark grey',
+        value: '#333',
+      },
+    ],
+  },
+};

{{cookiecutter.project_name}}/frontend/next-i18next.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  i18n: {
+    defaultLocale: 'sv',
+    locales: ['sv' /*'en'*/],
+  },
+};

{{cookiecutter.project_name}}/frontend/next.config.js

@@ -1,52 +1,51 @@
-const withPlugins = require('next-compose-plugins');
+const { i18n } = require('./next-i18next.config');
 
 const { withSentryConfig } = require('@sentry/nextjs');
 
 const basePath = '';
 
 let nextConfig = {
-    webpack5: true,
-    trailingSlash: true,
-    productionBrowserSourceMaps: true,
-    basePath,
+  trailingSlash: true,
+  productionBrowserSourceMaps: true,
+  basePath,
+  i18n,
 };
 
 const withSvgr = (nextConfig = {}) => {
-    return Object.assign({}, nextConfig, {
-        webpack(config) {
-            config.module.rules.push({
-                test: /\.svg$/i,
-                issuer: /\.[jt]sx?$/,
-                use: [{ loader: '@svgr/webpack', options: { ref: true } }],
-            });
-            return config;
-        },
-    });
+  return Object.assign({}, nextConfig, {
+    webpack(config) {
+      config.module.rules.push({
+        test: /\.svg$/i,
+        issuer: /\.[jt]sx?$/,
+        use: ['@svgr/webpack'],
+      });
+      return config;
+    },
+  });
 };
 
 const SentryWebpackPluginOptions = {
-    // Additional config options for the Sentry Webpack plugin. Keep in mind that
-    // the following options are set automatically, and overriding them is not
-    // recommended:
-    //   release, url, org, project, authToken, configFile, stripPrefix,
-    //   urlPrefix, include, ignore
-
-    silent: true,
-    dryRun: process.env.IGNORE_SENTRY ? true : false,
-    // For all available options, see:
-    // https://github.com/getsentry/sentry-webpack-plugin#options.
+  // Additional config options for the Sentry Webpack plugin. Keep in mind that
+  // the following options are set automatically, and overriding them is not
+  // recommended:
+  //   release, url, org, project, authToken, configFile, stripPrefix,
+  //   urlPrefix, include, ignore
+
+  silent: true,
+  dryRun: process.env.IGNORE_SENTRY ? true : false,
+  // For all available options, see:
+  // https://github.com/getsentry/sentry-webpack-plugin#options.
 };
 
-nextConfig = withSentryConfig(nextConfig, SentryWebpackPluginOptions);
+// nextConfig = withSentryConfig(nextConfig, SentryWebpackPluginOptions);
 
 // const withBundleAnalyzer = require('@next/bundle-analyzer')({
 //     enabled: process.env.ANALYZE === 'true',
 // });
 
-module.exports = withPlugins(
-    [
-        withSvgr,
-        //withBundleAnalyzer,
-    ],
-    nextConfig
-);
+module.exports = () => {
+  const plugins = [withSvgr];
+  return plugins.reduce((acc, plugin) => plugin(acc), {
+    ...nextConfig,
+  });
+};