Merge pull request #3006 from mozilla/room-ui-redesign

Room UI Redesign

.babelrc

@@ -29,15 +29,10 @@
     ]
   ],
   "plugins": [
-    [
-      "react-intl",
-      {
-        "messagesDir": "./public/messages",
-        "enforceDescriptions": false
-      }
-    ],
+    // TODO: When i18n build pipeline is finished move to: [ "react-intl", { "removeDefaultMessage": true } ]
+    "react-intl",
     "transform-react-jsx-img-import",
-    "@babel/proposal-class-properties",
+    ["@babel/proposal-class-properties", { "loose": true }],
     "@babel/proposal-object-rest-spread",
     // Samsung Internet on the Oculus Go version is stuck at version 5.2, which is a 
     // Chromium 51, as of this writing. It needs babel to transpile async/await.

.circleci/config.yml

@@ -1,9 +1,14 @@
-version: 2
-jobs:
-  build:
-    docker:
-      - image: circleci/node:10-browsers
+version: 2.1
+
+aliases:
+  - &defaults
     working_directory: ~/repo
+    docker:
+      - image: circleci/node:14.5-browsers
+
+jobs:
+  build_and_test:
+    <<: *defaults
     steps:
       - checkout
       - restore_cache:
@@ -18,3 +23,26 @@ jobs:
       - run: npm test
       - store_artifacts:
           path: dist
+      - persist_to_workspace:
+          root: .
+          paths:
+            - node_modules
+  deploy_storybook:
+    <<: *defaults
+    steps:
+      - checkout
+      - attach_workspace:
+          at: .
+      - run: npm run deploy-storybook -- --ci
+
+workflows:
+  version: 2
+  build_test_and_deploy_storybook:
+    jobs:
+      - build_and_test
+      - deploy_storybook:
+          requires:
+            - build_and_test
+          filters:
+            branches:
+              only: room-ui-redesign

.eslintrc.js

@@ -10,7 +10,7 @@ module.exports = {
     AFRAME: true,
     NAF: true
   },
-  plugins: ["prettier", "react", "react-hooks"],
+  plugins: ["prettier", "react", "react-hooks", "@calm/react-intl"],
   rules: {
     "prettier/prettier": "error",
     "prefer-const": "error",
@@ -20,7 +20,30 @@ module.exports = {
     // Light console usage is useful but remove debug logs before merging to master.
     "no-console": "off",
     "react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "warn"
+    "react-hooks/exhaustive-deps": "warn",
+    // TODO: Move to throwing lint errors for react-intl once migration is complete
+    "@calm/react-intl/missing-formatted-message": [
+      "warn",
+      {
+        noTrailingWhitespace: true,
+        ignoreLinks: true,
+        enforceLabels: true,
+        enforceImageAlts: true,
+        enforceInputProps: false
+      }
+    ],
+    "@calm/react-intl/missing-attribute": [
+      "warn",
+      {
+        noTrailingWhitespace: true,
+        noSpreadOperator: true,
+        requireDescription: false,
+        formatDefineMessages: true,
+        requireIdAsString: true,
+        requireDefaultMessage: true
+      }
+    ],
+    "@calm/react-intl/missing-values": "warn"
   },
   extends: ["prettier", "plugin:react/recommended", "eslint:recommended"]
 };

.gitignore

@@ -65,3 +65,5 @@ dist/
 certs/
 results/
 .ret.credentials
+src/assets/locales/en.json
+src/assets/locales/extracted-messages.json

.storybook/main.js

@@ -0,0 +1,52 @@
+const path = require("path");
+
+module.exports = {
+  stories: ["../src/react-components/**/*.stories.mdx", "../src/react-components/**/*.stories.js"],
+  addons: ["@storybook/addon-links", "@storybook/addon-essentials", "storybook-addon-designs"],
+  webpackFinal: async config => {
+    config.module.rules.push({
+      test: /\.scss$/,
+      use: [
+        "style-loader",
+        {
+          loader: "css-loader",
+          options: {
+            importLoaders: "1",
+            localIdentName: "[name]__[local]___[hash:base64:5]",
+            modules: true,
+            camelCase: true
+          }
+        },
+        "sass-loader"
+      ],
+      include: path.resolve(__dirname, "..", "src")
+    });
+
+    const fileLoaderRule = config.module.rules.find(rule => rule.test.test(".svg"));
+    fileLoaderRule.exclude = /\.svg$/;
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: [
+        {
+          loader: "@svgr/webpack",
+          options: {
+            titleProp: true,
+            replaceAttrValues: { "#000": "{props.color}" },
+            template: require("../src/react-components/icons/IconTemplate"),
+            svgoConfig: {
+              plugins: {
+                removeViewBox: false,
+                mergePaths: false,
+                convertShapeToPath: false,
+                removeHiddenElems: false
+              }
+            }
+          }
+        },
+        "url-loader"
+      ]
+    });
+
+    return config;
+  }
+};

.storybook/preview-head.html

@@ -0,0 +1,7 @@
+<!-- Add extra elements to the head of the preview iframe here. -->
+<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet"> 
+<style>
+  .sb-show-main {
+    padding: 0 !important;
+  }
+</style>

.storybook/preview.js

@@ -0,0 +1,58 @@
+import React, { useEffect } from "react";
+import { useAccessibleOutlineStyle } from "../src/react-components/input/useAccessibleOutlineStyle";
+import "../src/react-components/styles/global.scss";
+import { WrappedIntlProvider } from "../src/react-components/wrapped-intl-provider";
+import { MINIMAL_VIEWPORTS } from "@storybook/addon-viewport";
+import { AVAILABLE_LOCALES } from "../src/assets/locales/locale_config";
+import { setLocale } from "../src/utils/i18n";
+
+const Layout = ({ children, locale }) => {
+  useAccessibleOutlineStyle();
+
+  useEffect(
+    () => {
+      setLocale(locale);
+    },
+    [locale]
+  );
+
+  return <WrappedIntlProvider>{children}</WrappedIntlProvider>;
+};
+
+export const decorators = [
+  (Story, context) => (
+    <Layout locale={context.globals.locale}>
+      <Story />
+    </Layout>
+  )
+];
+
+export const parameters = {
+  viewport: {
+    viewports: {
+      ...MINIMAL_VIEWPORTS,
+      oculusQuest: {
+        name: "Oculus Quest",
+        styles: {
+          width: "800px",
+          height: "450px"
+        }
+      }
+    }
+  }
+};
+
+const locales = Object.entries(AVAILABLE_LOCALES).map(([value, title]) => ({ title, value }));
+locales.unshift({ title: "Browser Default", value: "browser" });
+
+export const globalTypes = {
+  locale: {
+    name: "Locale",
+    description: "Active locale",
+    defaultValue: "browser",
+    toolbar: {
+      icon: "globe",
+      items: locales
+    }
+  }
+};

README.md

@@ -45,6 +45,8 @@ Join us on our [Discord Server](https://discord.gg/CzAbuGu) or [follow us on Twi
 
 Read our [contributor guide](./CONTRIBUTING.md) to learn how you can submit bug reports, feature requests, and pull requests.
 
+We're also looking for help with localization. The Hubs redesign has a lot of new text and we need help from people like you to translate it. Follow the [localization docs](./src/assets/locales/README.md) to get started.
+
 Contributors are expected to abide by the project's [Code of Conduct](./CODE_OF_CONDUCT.md) and to be respectful of the project and people working on it. 
 
 ## Additional Resources