Migrated mds to use emotion Library

- Migration to emotion library
- Fixed styles for compoents
- Simplified Themes & direct use of colors
- Removal of obsolete components (ActionsList, InformativeMessage, MainContainer, Menu, Pill)
- Renamed components to match specification (CommentBox => TextArea, ReadBox => CodeSnippet, Switch => Toggle)

Signed-off-by: Benjamin Perez <[email protected]>

.babelrc.json

@@ -9,8 +9,11 @@
         }
       }
     ],
-    "@babel/preset-typescript",
-    "@babel/preset-react"
+    [
+      "@babel/preset-react",
+      { "runtime": "automatic", "importSource": "@emotion/react" }
+    ],
+    "@babel/preset-typescript"
   ],
-  "plugins": []
+  "plugins": ["@emotion/babel-plugin"]
 }

.storybook/main.jsx

@@ -0,0 +1,40 @@
+import remarkGfm from "remark-gfm";
+
+module.exports = {
+  stories: ["../src/**/**/*.mdx", "../src/**/**/*.stories.@(js|jsx|ts|tsx)"],
+
+  core: {
+    disableTelemetry: true,
+  },
+
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    "storybook-dark-mode",
+    {
+      name: "@storybook/addon-docs",
+      options: {
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm],
+          },
+        },
+      },
+    },
+    "@storybook/addon-webpack5-compiler-babel",
+    "@chromatic-com/storybook",
+    "@storybook/addon-themes",
+  ],
+
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
+
+  docs: {},
+
+  typescript: {
+    reactDocgen: "react-docgen-typescript",
+  },
+};

.storybook/preview.jsx

@@ -0,0 +1,69 @@
+import React from "react";
+import { themes } from "@storybook/theming";
+import { darkColors, lightColors } from "../src/global/themes";
+
+import { withThemeFromJSXProvider } from "@storybook/addon-themes";
+import { Global, css } from "@emotion/react";
+
+export const parameters = {
+  actions: {},
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  darkMode: {
+    light: {
+      ...themes.normal,
+      appBg: "#F6F7F9",
+    },
+  },
+  /*darkMode: {
+    dark: {
+      ...themes.dark,
+      appBg: darkColors.dark,
+      appContentBg: darkColors.dark,
+      appBorderColor: darkColors.divisorColor,
+      barTextColor: darkColors.mainGrey,
+      textColor: darkColors.mainGrey,
+      barSelectedColor: darkColors.mainWhite,
+      barBg: darkColors.dark,
+      inputBg: darkColors.dark,
+      inputBorder: darkColors.mainGrey,
+      colorSecondary: darkColors.mainRed,
+    },
+    light: {
+      ...themes.normal,
+      appBg: lightColors.white,
+      appContentBg: lightColors.white,
+      appBorderColor: lightColors.divisorColor,
+      barTextColor: lightColors.mainGrey,
+      textColor: lightColors.mainGrey,
+      barSelectedColor: lightColors.mainBlue,
+      barBg: lightColors.white,
+      inputBg: lightColors.white,
+      inputBorder: lightColors.mainGrey,
+      colorSecondary: lightColors.mainBlue,
+    },
+  },*/
+};
+
+const GlobalStyles = () => (
+  <Global
+    styles={css`
+      body {
+        font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial,
+          sans-serif;
+      }
+    `}
+  />
+);
+
+export const decorators = [
+  withThemeFromJSXProvider({
+    GlobalStyles, // Adds your GlobalStyles component to all stories
+  }),
+];
+
+export const tags = ["autodocs"];

.storybook/preview.tsx

@@ -1,7 +1,7 @@
 import { Preview } from "@storybook/react";
-import { themes } from "@storybook/theming";
+import { themes, ensure } from "@storybook/theming";
 
-import { darkColors, lightColors } from "../src/global/themes";
+import { darkModeColors, lightModeColors } from "../src";
 
 const preview: Preview = {
   parameters: {
@@ -12,32 +12,39 @@ const preview: Preview = {
         date: /Date$/,
       },
     },
+    docs: {
+      theme: ensure(themes.dark),
+    },
     darkMode: {
       dark: {
         ...themes.dark,
-        appBg: darkColors.dark,
-        appContentBg: darkColors.dark,
-        appBorderColor: darkColors.divisorColor,
-        barTextColor: darkColors.mainGrey,
-        textColor: darkColors.mainGrey,
-        barSelectedColor: darkColors.mainWhite,
-        barBg: darkColors.dark,
-        inputBg: darkColors.dark,
-        inputBorder: darkColors.mainGrey,
-        colorSecondary: darkColors.mainRed,
+        appBg: darkModeColors["Color/Neutral/Bg/colorBgSections"],
+        appContentBg: darkModeColors["Color/Neutral/Bg/colorBgSections"],
+        appBorderColor:
+          darkModeColors["Color/Neutral/Border/colorBorderSubtle"],
+        barTextColor: darkModeColors["Color/Neutral/Text/colorTextLabel"],
+        textColor: darkModeColors["Color/Neutral/Text/colorText"],
+        barSelectedColor: darkModeColors["Color/Base/Royal/6"],
+        barBg: darkModeColors["Color/Neutral/Icon/colorIcon"],
+        inputBg: darkModeColors["Color/Neutral/Bg/colorBgFields"],
+        inputBorder: darkModeColors["Color/Neutral/Border/colorBorderSubtle"],
+        colorSecondary:
+          darkModeColors["Color/Brand/Primary/colorPrimaryBorder"],
       },
       light: {
         ...themes.normal,
-        appBg: lightColors.white,
-        appContentBg: lightColors.white,
-        appBorderColor: lightColors.divisorColor,
-        barTextColor: lightColors.mainGrey,
-        textColor: lightColors.mainGrey,
-        barSelectedColor: lightColors.mainBlue,
-        barBg: lightColors.white,
-        inputBg: lightColors.white,
-        inputBorder: lightColors.mainGrey,
-        colorSecondary: lightColors.mainBlue,
+        appBg: lightModeColors["Color/Neutral/Bg/colorBgSections"],
+        appContentBg: lightModeColors["Color/Neutral/Bg/colorBgSections"],
+        appBorderColor:
+          lightModeColors["Color/Neutral/Border/colorBorderSubtle"],
+        barTextColor: lightModeColors["Color/Neutral/Text/colorTextLabel"],
+        textColor: lightModeColors["Color/Neutral/Text/colorText"],
+        barSelectedColor: lightModeColors["Color/Base/Royal/6"],
+        barBg: lightModeColors["Color/Neutral/Icon/colorIcon"],
+        inputBg: lightModeColors["Color/Neutral/Bg/colorBgFields"],
+        inputBorder: lightModeColors["Color/Neutral/Border/colorBorderSubtle"],
+        colorSecondary:
+          lightModeColors["Color/Brand/Primary/colorPrimaryBorder"],
       },
     },
   },