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

package.json

@@ -72,6 +72,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 -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'
+});

tools/ui-components/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@freecodecamp/ui",
+  "version": "0.0.1",
+  "author": "freeCodeCamp <team@freecodecamp.org>",
+  "license": "BSD-3-Clause",
+  "description": "The freeCodeCamp.org open-source UI components",
+  "main": "index.js",
+  "dependencies": {
+    "react": "16.14.0",
+    "react-dom": "16.14.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.14.0",
+    "@storybook/addon-actions": "^6.2.9",
+    "@storybook/addon-essentials": "^6.2.9",
+    "@storybook/addon-links": "^6.2.9",
+    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/react": "^6.2.9",
+    "babel-loader": "^8.2.2"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
+  }
+}