feat(tools): create ui-components package and setup Storybook (#41920)

* feat(client): basic Storybook setup

* Revert "feat(client): basic Storybook setup"

This reverts commit f55e249.

* feat(tools): create ui-components package and setup Storybook

* Add ui-components to lerna.json

lerna.json

@@ -14,7 +14,8 @@
     "tools/contributor/one-off-scripts",
     "tools/crowdin",
     "tools/scripts/build",
-    "tools/scripts/seed"
+    "tools/scripts/seed",
+    "tools/ui-components"
   ],
   "command": {
     "bootstrap": {
@@ -24,7 +25,8 @@
         "tools/contributor/dashboard-app/server",
         "tools/contributor/lib/",
         "tools/contributor/one-off-scripts",
-        "tools/crowdin"
+        "tools/crowdin",
+        "tools/ui-components"
       ]
     }
   },

package.json

@@ -74,6 +74,7 @@
     "start": "npm-run-all ensure-env -p develop:server serve:client",
     "start-ci": "npm-run-all ensure-env -p start:server serve:client",
     "start:server": "cd ./api-server && npm start",
+    "storybook": "cd ./tools/ui-components && npm run storybook",
     "test": "npm-run-all ensure-env build:curriculum build-workers -p test:*",
     "test-curriculum-full-output": "cd ./curriculum && npm run test:full-output",
     "test:client": "cd ./client && npm test",

tools/ui-components/.storybook/main.js

@@ -0,0 +1,8 @@
+module.exports = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.js'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-postcss'
+  ]
+};

tools/ui-components/.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/addons';
+import theme from './theme';
+
+addons.setConfig({
+  theme
+});

tools/ui-components/.storybook/preview.js

@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/
+    }
+  }
+};

tools/ui-components/.storybook/theme.js

@@ -0,0 +1,8 @@
+import { create } from '@storybook/theming';
+
+export default create({
+  base: 'light',
+  brandTitle: 'freeCodeCamp.org',
+  brandImage:
+    'https://cdn.freecodecamp.org/platform/universal/fcc_secondary.svg'
+});