feat: bundling for UI Components (#42549)

Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>

.gitignore

@@ -179,3 +179,6 @@ api-server/lib/*
 curriculum/dist
 curriculum/build
 client/static/_redirects
+
+### UI Components ###
+tools/ui-components/dist

tools/ui-components/.babelrc.json

@@ -0,0 +1,14 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "browsers": [">0.25%", "not dead"]
+        }
+      }
+    ],
+    "@babel/preset-react"
+  ],
+  "plugins": [["transform-react-remove-prop-types", { "removeImport": true }]]
+}

tools/ui-components/package.json

@@ -24,6 +24,10 @@
   },
   "devDependencies": {
     "@babel/core": "7.14.6",
+    "@babel/preset-env": "^7.14.5",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^19.0.0",
+    "@rollup/plugin-node-resolve": "^13.0.0",
     "@storybook/addon-actions": "6.2.9",
     "@storybook/addon-essentials": "6.2.9",
     "@storybook/addon-links": "6.2.9",
@@ -32,13 +36,22 @@
     "@testing-library/react": "11.2.7",
     "autoprefixer": "10.2.6",
     "babel-loader": "8.2.2",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
+    "cross-env": "^7.0.3",
     "postcss": "8.3.5",
     "postcss-import": "14.0.2",
-    "tailwindcss": "2.2.2"
+    "tailwindcss": "2.2.2",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.52.1",
+    "rollup-plugin-postcss": "^4.0.0",
+    "rollup-plugin-terser": "^7.0.2"
   },
   "scripts": {
     "storybook": "start-storybook -p 6006",
     "storybook:theming": "npm run storybook --no-manager-cache",
-    "build-storybook": "build-storybook"
+    "build-storybook": "build-storybook",
+    "build": "cross-env NODE_ENV=production rollup -c",
+    "dev": "cross-env NODE_ENV=development rollup -c -w",
+    "clean": "rimraf dist/*"
   }
 }

tools/ui-components/rollup.config.js

@@ -0,0 +1,37 @@
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import babel from '@rollup/plugin-babel';
+import postcss from 'rollup-plugin-postcss';
+import commonjs from '@rollup/plugin-commonjs';
+import { terser } from 'rollup-plugin-terser';
+
+const production = process.env.NODE_ENV !== 'development';
+
+const config = {
+  input: 'src/index.js',
+  output: [
+    {
+      file: 'dist/bundle.js',
+      format: 'cjs'
+    },
+    {
+      file: 'dist/bundle.esm.js',
+      format: 'es'
+    },
+    {
+      file: 'dist/bundle.iife.js',
+      format: 'iife',
+      globals: { react: 'React' },
+      name: 'uiComponents'
+    }
+  ],
+  plugins: [
+    nodeResolve(),
+    postcss(),
+    babel({ babelHelpers: 'bundled' }),
+    commonjs(),
+    production && terser()
+  ],
+  external: ['react']
+};
+
+export default config;

tools/ui-components/src/index.js

@@ -1 +1,2 @@
 // Use this file as the entry point for component export
+export * from './button';