richie 2.24.1__py2.py3-none-any.whl → 2.25.0__py2.py3-none-any.whl

frontend/.eslintignore

@@ -0,0 +1,4 @@
+# Don't lint node_modules
+node_modules
+# LexPersona iframe script
+iframe-manager.js

frontend/.eslintrc.json

@@ -0,0 +1,95 @@
+{
+  "env": {
+    "browser": true,
+    "jest": true,
+    "es6": true
+  },
+  "extends": [
+    "airbnb",
+    "airbnb-typescript",
+    "plugin:compat/recommended",
+    "plugin:prettier/recommended",
+    "plugin:storybook/recommended"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    /*
+      To use eslint with VSCode and see lint error directly in file,
+      you have to install dbaeumer.vscode-eslint extension
+      and you may have to tweak your workspace settings with:
+      "eslint.workingDirectories": ["src/frontend"]
+
+      As frontend is not at the root of the repository,
+      this setting allows ESLint extension to find the ./tsconfig.json file
+    */
+    "project": "./tsconfig.json",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "plugins": ["formatjs", "@typescript-eslint"],
+  /* Disable some rules to be iso with tslint which was previously used */
+  "rules": {
+    "@typescript-eslint/explicit-member-accessibility": ["error", { "accessibility": "no-public" }],
+    "@typescript-eslint/lines-between-class-members": "off",
+    "@typescript-eslint/no-use-before-define": "off",
+    "arrow-parens": "error",
+    "consistent-return": "off",
+    "default-case": "off",
+    "formatjs/no-multiple-whitespaces": "error",
+    "formatjs/enforce-description": "error",
+    "formatjs/enforce-default-message": "error",
+    "global-require": "off",
+    "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",
+    "no-console": ["error", { "allow": ["warn"] }],
+    "no-else-return": "off",
+    "no-empty-function": "off",
+    "no-nested-ternary": "warn",
+    "no-param-reassign": "off",
+    "no-plusplus": "off",
+    "no-promise-executor-return": "off",
+    "no-prototype-builtins": "off",
+    "no-return-assign": "off",
+    "no-return-await": "off",
+    "no-undef": "off",
+    "no-underscore-dangle": "off",
+    "no-useless-escape": "off",
+    "prefer-template": "off",
+    "react/button-has-type": "off",
+    "react/destructuring-assignment": "off",
+    "react/function-component-definition": [
+      "error",
+      { "namedComponents": "arrow-function", "unnamedComponents": "arrow-function" }
+    ],
+    "react/jsx-boolean-value": "off",
+    "react/jsx-fragments": "off",
+    "react/jsx-props-no-spreading": "off",
+    "react/jsx-uses-react": "off",
+    "react/no-array-index-key": "warn",
+    "react/prop-types": "off",
+    "react/react-in-jsx-scope": "off",
+    "react/require-default-props": "off",
+    "react/style-prop-object": ["error", { "allow": ["FormattedNumber"] }]
+  },
+  "settings": {
+    "polyfills": ["fetch", "Promise"],
+    "import/resolver": {
+      "webpack": {},
+      "node": {
+        "extensions": [".js", ".cjs"]
+      }
+    }
+  }
+}

frontend/.nvmrc

@@ -0,0 +1 @@
+20.11.0

frontend/.prettierignore

@@ -0,0 +1,5 @@
+js/translations/*
+i18n/**/*
+public-path.js
+# LexPersona iframe script
+iframe-manager.js

frontend/.storybook/__mocks__/utils/context.ts

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

frontend/.storybook/main.js

@@ -0,0 +1,39 @@
+import { dirname, join } from "path";
+
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+module.exports = {
+  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)', '../js/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@storybook/addon-interactions'),
+    getAbsolutePath('@storybook/addon-webpack5-compiler-babel'),
+  ],
+  framework: {
+    name: getAbsolutePath('@storybook/react-webpack5'),
+    options: {},
+  },
+  staticDirs: [{
+    from: './public',
+    to: '/static',
+  }, {
+    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;
+  },
+  docs: {
+    autodocs: false,
+  },
+};
+
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, "package.json")));
+}

frontend/.storybook/preview-body.html

@@ -0,0 +1 @@
+<div id="modal-exclude" style="height: auto;"></div>

frontend/.storybook/preview-head.html

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

frontend/.storybook/preview.tsx

@@ -0,0 +1,47 @@
+import { useState } from 'react';
+import { IntlProvider } from 'react-intl';
+import { CunninghamProvider } from '@openfun/cunningham-react';
+import { Preview } from '@storybook/react';
+import { useAsyncEffect } from 'hooks/useAsyncEffect';
+import './__mocks__/utils/context';
+
+export const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  }
+};
+
+const IconsWrapper = (props) => {
+  const [symbols, setSymbols] = useState('');
+
+  useAsyncEffect(async () => {
+    const response = await fetch('/icons.html');
+    const body = await response.text();
+    setSymbols(body);
+  }, []);
+
+  return (
+    <div>
+      <div dangerouslySetInnerHTML={{ __html: symbols }} />
+      {props.children}
+    </div>
+  );
+};
+
+export const decorators = [
+  (Story) => (
+    <IntlProvider locale="en">
+      <IconsWrapper>
+        <CunninghamProvider>
+          <Story />
+        </CunninghamProvider>
+      </IconsWrapper>
+    </IntlProvider>
+  ),
+];

frontend/babel.config.js

@@ -0,0 +1,31 @@
+module.exports = {
+  plugins: [
+    [
+      'react-intl',
+      {
+        ast: true,
+        extractFromFormatMessageCall: true,
+        idInterpolationPattern: '[sha512:contenthash:base64:6]',
+      },
+    ],
+    ['@babel/plugin-syntax-dynamic-import'],
+  ],
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        corejs: 3,
+        forceAllTransforms: true,
+        targets: 'last 1 version, >0.2%, IE 11',
+        useBuiltIns: 'usage',
+      },
+    ],
+    [
+      '@babel/preset-react',
+      {
+        runtime: 'automatic',
+      },
+    ],
+    '@babel/preset-typescript',
+  ],
+};

frontend/cunningham.cjs

@@ -0,0 +1,78 @@
+/* Custom Cunningham Tokens for Richie
+
+   In a child project, you can override those tokens by creating a token file like this one,
+   merge your custom tokens with default Richie ones then by using cunningham cli to generate
+   sass and ts tokens files (take a look to the `build-theme` command within package.json
+   see it in action).
+
+   E.g:
+     const tokens = require('richie-education/cunningham.cjs')
+     module.exports = {
+       theme: {
+          ...tokens.themes.default
+          colors: {
+            ...tokens.colors,
+            'your-black': '#1E1E1E',
+          },
+       },
+*/
+
+module.exports = {
+  themes: {
+    default: {
+      theme: {
+        font: {
+          families: { base: 'Hind', accent: 'Montserrat' },
+        },
+        colors: {
+          'primary-100': '#ffcad1',
+          'primary-200': '#f19597',
+          'primary-300': '#e86a6f',
+          'primary-400': '#f2444b',
+          'primary-500': '#f72c30',
+          'primary-600': '#e81f2f',
+          'primary-700': '#d60f29',
+          'primary-800': '#c90022',
+          'primary-900': '#bb0014',
+          'secondary-100': '#eff8ff',
+          'secondary-200': '#eaf3fd',
+          'secondary-300': '#e2ebf5',
+          'secondary-400': '#c0c9d3',
+          'secondary-500': '#a3abb4',
+          'secondary-600': '#79818a',
+          'secondary-700': '#656c75',
+          'secondary-800': '#454d55',
+          'secondary-900': '#242b32',
+          black: '#090909',
+          'dark-grey': '#232323',
+          charcoal: '#29303b',
+          'slate-grey': '#686868',
+          'battleship-grey': '#686f7a',
+          'light-grey': '#d2d2d2',
+          silver: '#d5dbe0',
+          azure2: '#eceff1',
+          smoke: '#fdfdfd',
+          white: '#ffffff',
+          denim: '#0067b7',
+          firebrick6: '#f72c30',
+          'purplish-grey': '#726c74',
+          grey32: '#525151',
+          grey59: '#969696',
+          grey87: '#dfdfdf',
+          indianred3: '#df484b',
+          midnightblue: '#141b2c',
+          mantis: '#76ce68',
+        },
+      },
+      components: {
+        button: {
+          'font-family': 'Montserrat',
+        },
+        dashboardListAvatar: {
+          saturation: 30,
+          lightness: 55,
+        },
+      },
+    },
+  },
+};

frontend/i18n/compile-translations.js

@@ -0,0 +1,84 @@
+#! /usr/bin/env node
+const path = require('path');
+const fs = require('fs');
+const yargs = require('yargs');
+const { glob } = require('glob');
+const { merge } = require('cljs-merge');
+
+/**
+ * compile-translations
+ * 
+ * formatjs/cli compile and compile-folder methods do not allow merge.
+ * So we need your own compile method.
+ * 
+ * Without specify option, this script compile all translations files includes
+ * in i18n/locales into js/translations
+ * 
+ * You can provide a search pattern to include other translation sources. If several files have the
+ * same name, they will be merged.
+ * 
+ * Usage: ./compile-translations.js [search_patterns] [--ignore] [--outDir <path_to_output_files]
+ * 
+ * 
+ * ARGUMENTS:
+ *  search_pattern      list of patterns to search additional translation files (support only json)
+ *  --ignore            a pattern to ignore a path where search files (e.g ./node_modules)
+ *  --outDir            output directory
+ * 
+ */
+
+
+// Transparently includes Richie default translation files to lighten command
+const LOCALES_PATTERN = path.resolve(__dirname, `./locales/*.json`);
+// Output directory
+const OUT_DIR = yargs.argv.outDir || path.resolve(__dirname, `../js/translations`);
+
+
+(async () => {
+  const { ignore, _: patterns } = yargs.argv
+  const filesPattern = [
+    LOCALES_PATTERN,
+    ...patterns.map((filepath) => path.resolve(process.cwd(), filepath))
+  ];
+
+  // Search files and group paths found by filename
+  const files = await glob(filesPattern, { nodir: true, ignore }, (error) => {
+      if (error) throw new Error(error);
+  }).then((matches) => matches.flat().reduce((outputs, filePath) => {
+    const matchCutter = /.*\/(?<filename>.*)\.(?<ext>.{2,4})$/;
+    const [, filename, ext] = filePath.match(matchCutter);
+    if (ext !== 'json') throw new Error('Only JSON files are supported!');
+
+    if (filename in outputs) {
+      return {
+        ...outputs,
+        [filename]: [...outputs[filename], filePath]
+      }
+    }
+
+    return {
+      ...outputs,
+      [filename]: [filePath],
+    }
+  }, {}));
+
+  Object.entries(files).forEach(([filename, paths]) => {
+    // Get file content
+    const jsons = paths.map((filePath) => require(path.join(filePath)));
+    let translations = jsons.shift();
+
+    // If a translation contains several objects, we merged them
+    if (jsons.length > 0) {
+      translations = jsons.reduce((src, target) => {
+        return merge({ src, target });
+      }, translations);
+    }
+
+    // Write json files into output directory with format required by react-intl
+    fs.writeFile(
+      path.join(OUT_DIR, `${filename}.json`),
+      JSON.stringify(Object.entries(translations).reduce((acc, [key, { message }]) => ({ ...acc, [key]: message }), {})),
+      (error) => { if (error) throw new Error(error) }
+    );
+  })
+})();