myrentokil-components-library 1.0.331 → 1.0.366

package/README.md

@@ -165,6 +165,71 @@ generated by Styled Components during snapshot testing. It ensures that the
 class names in snapshots remain consistent, regardless of the test run
 environment.
 
+## Components structure
+
+### Atoms
+
+Atoms are the smallest UI components, representing individual elements with no dependencies on other components.
+
+- Button
+- Icon
+
+### Molecules
+
+Molecules are simple UI components composed of atoms, forming more complex structures.
+
+- DropdownList
+
+### Organisms
+
+Organisms are complex UI components composed of molecules and/or atoms, representing larger sections of a user interface.
+
+- Navbar
+
+## Module Federation - Micro Frontend
+
+Our components library can be exported using module federation structure to use the components in multiple repositories at the same time. This is a great advantage for many reasons, we can control all of them following the design system, we can ensure that this is the source of truth around all the platforms. and we will reduce the amount of work for the future implementations.
+
+In case we want to export a component you have to:
+- Create the component (follow the instructions above)
+- Include the component into webpack.config.js inside "exposes"
+- Run npm run build:mf
+- Run the container app, check if module federation config is ok.
+- Import your component there. This is just an example:
+
+```bash
+   // webpack.config.js
+   const { dependencies } = require('./package.json');
+
+   module.exports = {
+   name: 'remote',
+   remotes: {
+      componentsLibrary: "componentsLibrary@http://localhost:3002/remoteEntry.js"
+   },
+   filename: 'remoteEntry.js',
+   shared: {
+      'react': {
+         singleton: true,
+         requiredVersion: dependencies['react'],
+      },
+      'react-dom': {
+         singleton: true,
+         requiredVersion: dependencies['react-dom'],
+      },
+   },
+   };
+
+
+   // index.tsx or In your page
+   import React, { Suspense, lazy } from 'react';
+   const Chip = lazy(() => import('componentsLibrary/Chip'));
+
+   // Implementation
+   <Suspense fallback="h1">
+      <Chip variant="primary" text="text" />
+   </Suspense>
+```
+
 ## Useful Links
 
 - [React Testing Library Documentation](https://testing-library.com/docs/react-testing-library/intro/)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "myrentokil-components-library",
-  "version": "1.0.331",
+  "version": "1.0.366",
   "description": "myRentokil shared components library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -12,7 +12,10 @@
     "dist"
   ],
   "scripts": {
+    "start": "node server.js",
     "rollup": "rollup -c",
+    "build:mf": "rm -rf dist/ && prettier --write src/ && npm run build:module-federation && storybook build",
+    "build:module-federation": "webpack --config webpack.config.js",
     "build": "rm -rf dist/ && prettier --write src/ && rollup -c && storybook build",
     "build:esm": "tsc --module CommonJS --outDir dist/esm",
     "build:cjs": "tsc --module CommonJS --outDir dist/cjs",
@@ -38,6 +41,7 @@
     "@storybook/addon-interactions": "^7.0.24",
     "@storybook/addon-links": "^7.0.24",
     "@storybook/blocks": "^7.0.24",
+    "@storybook/client-api": "^7.6.16",
     "@storybook/react": "^7.0.24",
     "@storybook/react-webpack5": "^7.0.24",
     "@storybook/testing-library": "^0.0.14-next.2",
@@ -54,6 +58,7 @@
     "chromatic": "^7.4.0",
     "eslint": "^8.46.0",
     "eslint-plugin-react": "^7.33.1",
+    "express": "^4.18.2",
     "file-loader": "^6.2.0",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
@@ -68,7 +73,9 @@
     "storybook": "^7.0.24",
     "styled-components": "^5.3.9",
     "ts-jest": "^29.1.1",
-    "typescript": "^4.4.4"
+    "ts-loader": "^9.5.1",
+    "typescript": "^4.4.4",
+    "webpack-cli": "^5.1.4"
   },
   "peerDependencies": {
     "react": "^18.0.0",