@module-federation/storybook-addon 0.0.0-chore-bump-node-22-20260710161714

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 ScriptedAlchemy LLC (Zack Jackson) Zhou Shaw (zhouxiao)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,165 @@
+# Storybook addon for Module Federation
+
+This addon enables to consume remote Module Federated apps/components
+
+## Install
+
+```shell
+# with NPM
+npm install @module-federation/storybook-addon
+
+# with Yarn
+yarn add @module-federation/storybook-addon
+```
+
+## Configuration
+
+In file `./storybook/main.js`:
+
+```js
+const moduleFederationConfig = {
+  // Module Federation config
+};
+
+const storybookConfig = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    // other addons,
+    {
+      name: '@module-federation/storybook-addon',
+      options: {
+        moduleFederationConfig,
+      },
+    },
+  ],
+  framework: '@storybook/react',
+  core: {
+    builder: '@storybook/builder-webpack5', // is required webpack 5 builder
+  },
+};
+
+module.exports = storybookConfig;
+```
+
+---
+
+### Rsbuild App or Rslib Module
+
+```js
+import { dirname, join } from 'node:path';
+import type { StorybookConfig } from 'storybook-react-rsbuild';
+
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, 'package.json')));
+}
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  framework: {
+    name: getAbsolutePath('storybook-react-rsbuild'),
+    options: {},
+  },
+  addons: [
+    {
+      name: '@module-federation/storybook-addon/preset',
+      options: {
+        // add remote here and then you can load remote in your story
+        remotes: {
+          'rslib-module':
+            'rslib-module@http://localhost:3000/mf/mf-manifest.json',
+        },
+      },
+    },
+  ],
+};
+
+export default config;
+
+```
+
+### For the [NX](https://nx.dev/getting-started/intro) projects:
+
+Replace Nx module federation wiring in `webpack.config.js` with a plain webpack config that uses `withModuleFederation`.
+Example:
+
+```javascript
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const { withModuleFederation } = require('@module-federation/storybook-addon');
+const baseConfig = require('./module-federation.config');
+
+module.exports = withModuleFederation(baseConfig, { dts: false })({
+  mode: 'development',
+  context: __dirname,
+  entry: {
+    main: path.resolve(__dirname, 'src/main.ts'),
+  },
+  plugins: [new HtmlWebpackPlugin({ template: path.resolve(__dirname, 'src/index.html') })],
+});
+```
+
+In file `./storybook/main.js`:
+
+```js
+const nxModuleFederationConfig = {
+  // Module Federation config
+};
+
+const storybookConfig = {
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    // other addons,
+    {
+      name: '@module-federation/storybook-addon',
+      options: {
+        nxModuleFederationConfig,
+      },
+    },
+  ],
+  framework: '@storybook/react',
+  core: {
+    builder: '@storybook/builder-webpack5', // is required webpack 5 builder
+  },
+};
+
+module.exports = storybookConfig;
+```
+
+## Usage
+
+```jsx
+import React, { Suspense } from 'react';
+
+const LazyButton = React.lazy(() => import('remote/Button'));
+
+const Button = (props) => (
+  <Suspense fallback={<p>Please wait...</p>}>
+    <LazyButton {...props} />
+  </Suspense>
+);
+
+export default {
+  title: 'ModuleFederation/Button',
+  component: Button,
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary'],
+    },
+  },
+};
+
+const Template = (args) => <Button {...args} />;
+
+export const Primary = Template.bind({ variant: 'primary' });
+Primary.args = {
+  variant: 'primary',
+  children: 'Button',
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  variant: 'secondary',
+  children: 'Button',
+};
+```