richie-education 2.16.0 → 2.18.0

package/.eslintrc.json

@@ -42,6 +42,13 @@
     "import/extensions": "off",
     "import/no-cycle": ["off"],
     "import/no-dynamic-require": "off",
+    "import/order": [
+      "error",
+      {
+        "groups": ["builtin", "external", "internal", "parent", "sibling", "index"],
+        "alphabetize": { "order": "ignore" }
+      }
+    ],
     "import/prefer-default-export": "off",
     "jsx-a11y/click-events-have-key-events": "off",
     "jsx-a11y/label-has-associated-control": "warn",
@@ -76,6 +83,7 @@
     "react/style-prop-object": ["error", { "allow": ["FormattedNumber"] }]
   },
   "settings": {
-    "polyfills": ["fetch", "Promise"]
+    "polyfills": ["fetch", "Promise"],
+    "import/resolver": "webpack"
   }
 }

package/.storybook/__mocks__/utils/context.ts

@@ -0,0 +1,15 @@
+import { ContextFactory } from 'utils/test/factories';
+
+let context = {
+  joanie_backend: {
+    endpoint: 'http://localhost:8071',
+  },
+  authentication: {
+    backend: 'dummy',
+    endpoint: 'http://localhost:8073',
+  },
+};
+
+(window as any).__richie_frontend_context__ = {
+  context: ContextFactory(context).generate(),
+};

package/.storybook/main.js

@@ -1,17 +1,26 @@
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 module.exports = {
-  "stories": [
-    "../stories/**/*.stories.mdx",
-    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
-    "../js/**/*.stories.@(js|jsx|ts|tsx)",
+  stories: [
+    '../stories/**/*.stories.mdx',
+    '../stories/**/*.stories.@(js|jsx|ts|tsx)',
+    '../js/**/*.stories.@(js|jsx|ts|tsx)',
   ],
-  "addons": [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions"
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
   ],
-  "framework": "@storybook/react",
-  "core": {
-    "builder": "@storybook/builder-webpack5"
+  framework: '@storybook/react',
+  core: {
+    builder: '@storybook/builder-webpack5',
   },
-  staticDirs: ['../../richie/static', '../../richie/apps/core/templates/richie'],
-}
+  staticDirs: [
+    { from: '../../richie/static', to: '/static' },
+    { from: '../../richie/apps/core/static', to: '/static' },
+    '../../richie/apps/core/templates/richie',
+  ],
+  webpackFinal: async (config, { configType }) => {
+    config.resolve.plugins = [new TsconfigPathsPlugin()];
+    return config;
+  },
+};

package/.storybook/preview-head.html

@@ -1 +1 @@
-<link rel="stylesheet" type="text/css" href="/richie/css/main.css">
+<link rel='stylesheet' type='text/css' href='/static/richie/css/main.css'>

package/.storybook/preview.tsx

@@ -1,18 +1,19 @@
-import { useState } from "react";
-import { useAsyncEffect } from "../js/utils/useAsyncEffect";
+import { useState } from 'react';
+import { IntlProvider } from 'react-intl';
+import { useAsyncEffect } from '../js/utils/useAsyncEffect';
+import './__mocks__/utils/context';
 
 export const parameters = {
-  actions: {argTypesRegex: "^on[A-Z].*"},
+  actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
     matchers: {
       color: /(background|color)$/i,
       date: /Date$/,
     },
   },
-}
-
+};
 
-const IconsWrapper = props => {
+const IconsWrapper = (props) => {
   const [symbols, setSymbols] = useState('');
 
   useAsyncEffect(async () => {
@@ -23,7 +24,7 @@ const IconsWrapper = props => {
 
   return (
     <div>
-      <div dangerouslySetInnerHTML={{__html: symbols}}/>
+      <div dangerouslySetInnerHTML={{ __html: symbols }} />
       {props.children}
     </div>
   );
@@ -31,8 +32,10 @@ const IconsWrapper = props => {
 
 export const decorators = [
   (Story) => (
-    <IconsWrapper>
-      <Story/>
-    </IconsWrapper>
+    <IntlProvider locale="en">
+      <IconsWrapper>
+        <Story />
+      </IconsWrapper>
+    </IntlProvider>
   ),
-];
+];