feat: add storybook addon that supports Module Federation remote containers

.github/workflows/release.yml

@@ -11,6 +11,7 @@ on:
           - all
           - nextjs-mf
           - node
+          - storybook-addon
           - typescript
           - utils
           - native-federation-typescript
@@ -46,7 +47,7 @@ jobs:
       - name: Build
         shell: bash
         run: |
-          yarn nx run-many --target=build --projects=typescript,utils,node,nextjs-mf,native-federation-typescript,native-federation-tests
+          yarn nx run-many --target=build --projects=typescript,utils,node,nextjs-mf,storybook-addon,native-federation-typescript,native-federation-tests
       - name: Version
         shell: bash
         run: |

apps/reactRemoteUI/.babelrc

@@ -0,0 +1,11 @@
+{
+  "presets": [
+    [
+      "@nrwl/react/babel",
+      {
+        "runtime": "automatic"
+      }
+    ]
+  ],
+  "plugins": []
+}

apps/reactRemoteUI/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

apps/reactRemoteUI/jest.config.ts

@@ -0,0 +1,11 @@
+/* eslint-disable */
+export default {
+  displayName: 'reactRemoteUI',
+  preset: '../../jest.preset.js',
+  transform: {
+    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nrwl/react/plugins/jest',
+    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nrwl/react/babel'] }],
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageDirectory: '../../coverage/apps/reactRemoteUI',
+};

apps/reactRemoteUI/module-federation.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  name: 'reactRemoteUI',
+  exposes: {
+    './Button': './src/Button',
+  },
+};

apps/reactRemoteUI/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "react-remote-ui",
+  "version": "1.0.0",
+  "devDependencies": {
+    "@module-federation/storybook-addon": "0.0.1",
+    "@module-federation/utilities": "1.6.1"
+  }
+}

apps/reactRemoteUI/project.json

@@ -0,0 +1,107 @@
+{
+  "name": "reactRemoteUI",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "apps/reactRemoteUI/src",
+  "projectType": "application",
+  "targets": {
+    "build": {
+      "executor": "@nrwl/webpack:webpack",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
+      "options": {
+        "compiler": "babel",
+        "outputPath": "dist/apps/reactRemoteUI",
+        "index": "apps/reactRemoteUI/src/index.html",
+        "baseHref": "/",
+        "main": "apps/reactRemoteUI/src/main.ts",
+        "tsConfig": "apps/reactRemoteUI/tsconfig.app.json",
+        "assets": [
+          "apps/reactRemoteUI/src/favicon.ico"
+        ],
+        "styles": ["apps/reactRemoteUI/src/styles.scss"],
+        "scripts": [],
+        "isolatedConfig": true,
+        "webpackConfig": "apps/reactRemoteUI/webpack.config.js"
+      },
+      "configurations": {
+        "development": {
+          "extractLicenses": false,
+          "optimization": false,
+          "sourceMap": true,
+          "vendorChunk": true
+        },
+        "production": {
+          "fileReplacements": [
+            {
+              "replace": "apps/reactRemoteUI/src/environments/environment.ts",
+              "with": "apps/reactRemoteUI/src/environments/environment.prod.ts"
+            }
+          ],
+          "optimization": true,
+          "outputHashing": "all",
+          "sourceMap": false,
+          "namedChunks": false,
+          "extractLicenses": true,
+          "vendorChunk": false,
+          "webpackConfig": "apps/reactRemoteUI/webpack.config.prod.js"
+        }
+      }
+    },
+    "serve": {
+      "executor": "@nrwl/react:module-federation-dev-server",
+      "defaultConfiguration": "development",
+      "options": {
+        "buildTarget": "reactRemoteUI:build",
+        "hmr": true,
+        "port": 4201
+      },
+      "configurations": {
+        "development": {
+          "buildTarget": "reactRemoteUI:build:development"
+        },
+        "production": {
+          "buildTarget": "reactRemoteUI:build:production",
+          "hmr": false
+        }
+      }
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["apps/reactRemoteUI/**/*.{ts,tsx,js,jsx}"]
+      }
+    },
+    "test": {
+      "executor": "@nrwl/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "apps/reactRemoteUI/jest.config.ts",
+        "passWithNoTests": true
+      },
+      "configurations": {
+        "ci": {
+          "ci": true,
+          "codeCoverage": true
+        }
+      }
+    },
+    "serve-static": {
+      "executor": "@nrwl/web:file-server",
+      "defaultConfiguration": "development",
+      "options": {
+        "buildTarget": "reactRemoteUI:build",
+        "port": 4201
+      },
+      "configurations": {
+        "development": {
+          "buildTarget": "reactRemoteUI:build:development"
+        },
+        "production": {
+          "buildTarget": "reactRemoteUI:build:production"
+        }
+      }
+    }
+  },
+  "tags": []
+}

apps/reactRemoteUI/src/Button/Button.module.css

@@ -0,0 +1,78 @@
+:root {
+	--color-white: white;
+	--primary-color: #0075E1;
+	--primary-color-light: #e6f2fd;
+	--secondary-color: #8C8C8C;
+	--secondary-color-light: #DADADA;
+}
+
+.button {
+	padding: 12px;
+	border-radius: 4px;
+	outline: none;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+	gap: 8px;
+	white-space: nowrap;
+	background-image: none;
+	background-color: transparent;
+	border: 1px solid transparent;
+	cursor: pointer;
+	transition: all .2s cubic-bezier(.645,.045,.355,1);
+	user-select: none;
+	touch-action: manipulation;
+	font-size: 16px;
+	line-height: 1.5;
+}
+
+.button:disabled {
+	cursor: not-allowed;
+}
+
+.primary {
+	border-color: var(--primary-color);
+	background-color: var(--primary-color);
+	color: var(--color-white);
+}
+
+.primary .icon {
+	fill: var(--color-white);
+}
+
+.primary:disabled {
+	border-color: var(--secondary-color);
+	background-color: var(--secondary-color);
+	color: var(--secondary-color-light);
+}
+
+.primary:disabled .icon {
+	fill: var(--secondary-color-light);
+}
+
+.secondary {
+	border-color: var(--primary-color);
+	background-color: var(--color-white);
+	color: var(--primary-color);
+}
+
+.secondary .icon {
+	fill: var(--primary-color);
+}
+
+.secondary:hover {
+	border-color: var(--primary-color);
+	background-color: var(--primary-color-light);
+	color: var(--primary-color);
+}
+
+.secondary:disabled {
+	border-color: var(--secondary-color);
+	background-color: var(--color-white);
+	color: var(--secondary-color);
+}
+
+.secondary:disabled .icon {
+	fill: var(--secondary-color);
+}

apps/reactRemoteUI/src/Button/Button.tsx

@@ -0,0 +1,26 @@
+import React, { HTMLProps } from 'react';
+import classNames from 'classnames';
+
+import styles from './Button.module.css';
+
+type ButtonProps = {
+  type?: 'button' | 'submit' | 'reset' | undefined;
+  variant?: 'primary' | 'secondary';
+} & HTMLProps<HTMLButtonElement>;
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ children, className, variant = 'primary', ...props }, ref) => {
+    const cssClasses = classNames(styles.button, {
+      [styles.primary]: variant === 'primary',
+      [styles.secondary]: variant === 'secondary',
+    });
+
+    return (
+      <button {...props} ref={ref} className={`${cssClasses} ${className}`}>
+        {children}
+      </button>
+    );
+  }
+);
+
+export default Button;

apps/reactRemoteUI/src/Button/index.ts

@@ -0,0 +1 @@
+export { default } from './Button';

apps/reactRemoteUI/src/bootstrap.tsx

@@ -0,0 +1,16 @@
+import { StrictMode } from 'react';
+import * as ReactDOM from 'react-dom/client';
+
+import Button from './Button';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+root.render(
+  <StrictMode>
+    <div>
+      UI Library Button:
+      <Button>Test Button</Button>
+    </div>
+  </StrictMode>
+);

apps/reactRemoteUI/src/environments/environment.prod.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  production: true,
+};

apps/reactRemoteUI/src/environments/environment.ts

@@ -0,0 +1,6 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// When building for production, this file is replaced with `environment.prod.ts`.
+
+export const environment = {
+  production: false,
+};

apps/reactRemoteUI/src/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>ReactRemoteUi</title>
+    <base href="/" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

apps/reactRemoteUI/src/main.ts

@@ -0,0 +1 @@
+import('./bootstrap');

apps/reactRemoteUI/src/styles.scss

@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */

apps/reactRemoteUI/tsconfig.app.json

@@ -0,0 +1,23 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["node"]
+  },
+  "files": [
+    "../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+    "../../node_modules/@nrwl/react/typings/image.d.ts"
+  ],
+  "exclude": [
+    "jest.config.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.js",
+    "src/**/*.test.js",
+    "src/**/*.spec.jsx",
+    "src/**/*.test.jsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}

apps/reactRemoteUI/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json"
+}