@makcbrain/storybook-framework-react-esbuild 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Maksim Kadochnikov
+
+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,146 @@
+# @makcbrain/storybook-framework-react-esbuild
+
+Storybook framework for React with esbuild builder.
+
+## Description
+
+This framework integrates React with Storybook using esbuild as the build system. It supports autodocs and MDX.
+
+**Supported React versions:** 16.8 - 19
+
+**Note:** Static build is not supported.
+
+## Installation
+
+```bash
+npm install --save-dev @makcbrain/storybook-framework-react-esbuild
+```
+
+## Configuration
+
+### Basic Setup
+
+`.storybook/main.ts`:
+
+```typescript
+import type { StorybookConfig } from '@makcbrain/storybook-framework-react-esbuild';
+
+const config: StorybookConfig = {
+  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: ['@storybook/addon-docs'],
+  framework: {
+    name: '@makcbrain/storybook-framework-react-esbuild',
+  },
+};
+
+export default config;
+```
+
+### Framework Options
+
+```typescript
+const config: StorybookConfig = {
+  stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+  framework: {
+    name: '@makcbrain/storybook-framework-react-esbuild',
+    options: {
+      // Builder options
+      builder: {
+        esbuildConfig: ({ isProduction }) => {
+          return {
+            sourcemap: !isProduction,
+            minify: isProduction,
+          };
+        },
+      },
+      // Enable React strict mode
+      strictMode: true,
+      // Use React 17 legacy root API (default: false)
+      legacyRootApi: false,
+    },
+  },
+};
+```
+
+### esbuild Configuration
+
+#### builder.esbuildConfig (Recommended)
+
+Use `builder.esbuildConfig` to provide your project's esbuild configuration. The framework will automatically add required properties such as `entryPoints` with story files and necessary plugins.
+
+**This is the recommended approach for most users.**
+
+```typescript
+const config: StorybookConfig = {
+  stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+  framework: {
+    name: '@makcbrain/storybook-framework-react-esbuild',
+    options: {
+      builder: {
+        esbuildConfig: ({ isProduction }) => {
+          // Return your project's esbuild config
+          // Framework will merge this with required Storybook settings
+          return {
+            sourcemap: !isProduction,
+            target: 'es2020',
+            jsxDev: !isProduction,
+          };
+        },
+      },
+    },
+  },
+};
+```
+
+#### esbuildFinal (Advanced)
+
+Use `esbuildFinal` only when you need to patch the final esbuild configuration after the framework has applied all settings. This is rarely needed.
+
+```typescript
+const config: StorybookConfig = {
+  stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+  framework: {
+    name: '@makcbrain/storybook-framework-react-esbuild',
+  },
+  esbuildFinal: (config) => {
+    // Modify the final esbuild config if needed
+    // Most users should use builder.esbuildConfig instead
+    return config;
+  },
+};
+```
+
+## Type Definitions
+
+### StorybookConfig
+
+Main configuration type for `.storybook/main.ts`.
+
+### FrameworkOptions
+
+- `builder`: Builder-specific options
+  - `esbuildConfig`: Function that returns your project's esbuild configuration. The framework will merge this with required Storybook settings.
+- `strictMode`: Enable React strict mode (boolean)
+- `legacyRootApi`: Use React 17 legacy root API (boolean, default: false)
+
+## Features
+
+- **React 16.8 - 19**: Support for React versions from 16.8 to 19
+- **Autodocs**: Automatic documentation generation from component props
+- **MDX Support**: Write documentation in MDX format
+- **TypeScript**: Full TypeScript support with type checking
+- **Source Maps**: Configurable source map generation
+
+## Limitations
+
+- Static build is not supported
+- No Hot Module Replacement (stories reload on file changes)
+
+## License
+
+MIT
+
+## Links
+
+- [Builder Package](https://www.npmjs.com/package/@makcbrain/storybook-builder-esbuild)
+- [Storybook Documentation](https://storybook.js.org)

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from '@storybook/react';
+export { __definePreview as definePreview } from '@storybook/react';
+export type * from './types.ts';

package/dist/index.js

@@ -0,0 +1,2 @@
+export * from '@storybook/react';
+export { __definePreview as definePreview } from '@storybook/react';

package/dist/preset.d.ts

@@ -0,0 +1,4 @@
+import type { PresetProperty } from 'storybook/internal/types';
+import type { StorybookConfig } from './types.ts';
+export declare const core: PresetProperty<'core'>;
+export declare const esbuildFinal: StorybookConfig['esbuildFinal'];

package/dist/preset.js

@@ -0,0 +1,11 @@
+import { dirname, join } from 'node:path';
+const getAbsolutePath = (value) => {
+    return dirname(require.resolve(join(value, 'package.json')));
+};
+export const core = {
+    builder: getAbsolutePath('@makcbrain/storybook-builder-esbuild'),
+    renderer: getAbsolutePath('@storybook/react'),
+};
+export const esbuildFinal = async (config) => {
+    return config;
+};

package/dist/types.d.ts

@@ -0,0 +1,29 @@
+import type { BuilderOptions, StorybookConfigEsbuild } from '@makcbrain/storybook-builder-esbuild';
+import type { CompatibleString, StorybookConfig as StorybookConfigBase } from 'storybook/internal/types';
+type FrameworkName = CompatibleString<'@makcbrain/storybook-framework-react-esbuild'>;
+export type FrameworkOptions = {
+    builder?: BuilderOptions;
+    /**
+     * Enables <StrictMode> for React.
+     */
+    strictMode?: boolean;
+    /**
+     * Use React's legacy root API to mount components
+     *
+     * React has introduced a new root API with React 18.x to enable a whole set of new features (e.g.
+     * concurrent features) If this flag is true, the legacy Root API is used to mount components to
+     * make it easier to migrate step by step to React 18.
+     *
+     * @default false
+     */
+    legacyRootApi?: boolean;
+};
+type StorybookConfigFramework = {
+    framework: FrameworkName | {
+        name: FrameworkName;
+        options: FrameworkOptions;
+    };
+};
+/** The interface for Storybook configuration in `main.ts` files. */
+export type StorybookConfig = Omit<StorybookConfigBase, keyof StorybookConfigEsbuild | keyof StorybookConfigFramework> & StorybookConfigEsbuild & StorybookConfigFramework;
+export {};

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,54 @@
+{
+	"name": "@makcbrain/storybook-framework-react-esbuild",
+	"version": "1.0.0",
+	"author": "Maksim Kadochnikov <makс.brain@gmail.com>",
+	"description": "Framework for Storybook with supporting React and esbuild",
+	"license": "MIT",
+	"type": "module",
+	"keywords": [
+		"storybook",
+		"esbuild",
+		"framework",
+		"react",
+		"builder"
+	],
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/makcbrain/storybook-esbuild.git",
+		"directory": "packages/framework-react-esbuild"
+	},
+	"bugs": {
+		"url": "https://github.com/makcbrain/storybook-esbuild/issues"
+	},
+	"homepage": "https://github.com/makcbrain/storybook-esbuild#readme",
+	"publishConfig": {
+		"access": "public"
+	},
+	"main": "./dist/index.js",
+	"module": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"files": [
+		"dist",
+		"LICENSE",
+		"package.json"
+	],
+	"dependencies": {
+		"@makcbrain/storybook-builder-esbuild": "0.1.0",
+		"@storybook/react": "9.1.13"
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"default": "./dist/index.js"
+		},
+		"./preset": {
+			"types": "./dist/preset.d.ts",
+			"default": "./dist/preset.js"
+		},
+		"./package.json": "./package.json"
+	},
+	"scripts": {
+		"build": "rm -rf dist && bunx tsc",
+		"prepublishOnly": "(cd ../../ && bun run precommit) && bun run build"
+	}
+}