@storybook/react-native 10.0.0-beta.9 → 10.0.0-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -21,10 +21,6 @@ interface WithStorybookOptions {
|
|
|
21
21
|
* The path to the Storybook config folder. Defaults to './.rnstorybook'.
|
|
22
22
|
*/
|
|
23
23
|
configPath?: string;
|
|
24
|
-
/**
|
|
25
|
-
* Whether Storybook is enabled. Defaults to true.
|
|
26
|
-
*/
|
|
27
|
-
enabled?: boolean;
|
|
28
24
|
/**
|
|
29
25
|
* WebSocket configuration for syncing storybook instances or sending events to storybook.
|
|
30
26
|
*/
|
|
@@ -34,9 +30,9 @@ interface WithStorybookOptions {
|
|
|
34
30
|
*/
|
|
35
31
|
useJs?: boolean;
|
|
36
32
|
/**
|
|
37
|
-
*
|
|
33
|
+
* if false, we will attempt to remove storybook from the js bundle.
|
|
38
34
|
*/
|
|
39
|
-
|
|
35
|
+
enabled?: boolean;
|
|
40
36
|
/**
|
|
41
37
|
* Whether to include doc tools in the storybook.requires file. Defaults to true.
|
|
42
38
|
*/
|
|
@@ -50,12 +46,33 @@ interface WithStorybookOptions {
|
|
|
50
46
|
/**
|
|
51
47
|
* Configures Metro bundler to work with Storybook in React Native.
|
|
52
48
|
* This function wraps a Metro configuration to enable Storybook usage.
|
|
49
|
+
* This is intended to replace the withStorybook function in the future.
|
|
53
50
|
*
|
|
54
|
-
* @param config - The Metro bundler configuration to be modified.
|
|
51
|
+
* @param config - The Metro bundler configuration to be modified. This should be a valid Metro config object
|
|
52
|
+
* that includes resolver, transformer, and other Metro-specific options.
|
|
55
53
|
* @param options - Options to customize the Storybook configuration.
|
|
56
|
-
* @
|
|
54
|
+
* @param options.configPath - The path to the Storybook config folder. Defaults to './.rnstorybook'.
|
|
55
|
+
* This is where your main.js/ts and preview.js/ts files are located.
|
|
56
|
+
* @param options.websockets - WebSocket configuration for syncing storybook instances or sending events.
|
|
57
|
+
* When provided, creates a WebSocket server for real-time communication.
|
|
58
|
+
* @param options.websockets.port - The port WebSocket server will listen on. Defaults to 7007.
|
|
59
|
+
* @param options.websockets.host - The host WebSocket server will bind to. Defaults to 'localhost'.
|
|
60
|
+
* @param options.useJs - Whether to use JavaScript files for Storybook configuration instead of TypeScript.
|
|
61
|
+
* When true, generates storybook.requires.js instead of storybook.requires.ts.
|
|
62
|
+
* Defaults to false.
|
|
63
|
+
* @param options.removeStorybook - If enabled is false and this is true, attempts to remove
|
|
64
|
+
* storybook modules from the JavaScript bundle to reduce bundle size.
|
|
65
|
+
* Defaults to false.
|
|
66
|
+
* @param options.docTools - Whether to include doc tools in the storybook.requires file.
|
|
67
|
+
* Doc tools provide additional documentation features. Defaults to true.
|
|
68
|
+
* @param options.liteMode - Whether to use lite mode for the storybook. In lite mode, the default
|
|
69
|
+
* storybook UI is mocked out so you don't need to install all its dependencies
|
|
70
|
+
* like reanimated etc. This is useful for reducing bundle size and dependencies.
|
|
71
|
+
* Defaults to false.
|
|
72
|
+
* @returns The modified Metro configuration with Storybook support enabled.
|
|
57
73
|
*
|
|
58
74
|
* @example
|
|
75
|
+
* ```javascript
|
|
59
76
|
* const { getDefaultConfig } = require('expo/metro-config');
|
|
60
77
|
* const withStorybook = require('@storybook/react-native/metro/withStorybook');
|
|
61
78
|
* const path = require('path');
|
|
@@ -64,14 +81,36 @@ interface WithStorybookOptions {
|
|
|
64
81
|
* const config = getDefaultConfig(projectRoot);
|
|
65
82
|
*
|
|
66
83
|
* module.exports = withStorybook(config, {
|
|
67
|
-
* enabled: true,
|
|
68
84
|
* configPath: path.resolve(projectRoot, './.rnstorybook'),
|
|
69
85
|
* websockets: { port: 7007, host: 'localhost' },
|
|
70
86
|
* useJs: false,
|
|
71
87
|
* docTools: true,
|
|
72
|
-
*
|
|
88
|
+
* liteMode: false,
|
|
89
|
+
* });
|
|
90
|
+
* ```
|
|
91
|
+
*
|
|
92
|
+
* @example
|
|
93
|
+
* ```javascript
|
|
94
|
+
* // Minimal configuration
|
|
95
|
+
* const { getDefaultConfig } = require('expo/metro-config');
|
|
96
|
+
* const withStorybook = require('@storybook/react-native/metro/withStorybook');
|
|
97
|
+
*
|
|
98
|
+
* const config = getDefaultConfig(__dirname);
|
|
99
|
+
* module.exports = withStorybook(config);
|
|
100
|
+
* ```
|
|
101
|
+
*
|
|
102
|
+
* @example
|
|
103
|
+
* ```javascript
|
|
104
|
+
* // Disable Storybook in production
|
|
105
|
+
* const { getDefaultConfig } = require('expo/metro-config');
|
|
106
|
+
* const withStorybook = require('@storybook/react-native/metro/withStorybook');
|
|
107
|
+
*
|
|
108
|
+
* const config = getDefaultConfig(__dirname);
|
|
109
|
+
* module.exports = withStorybook(config, {
|
|
110
|
+
* removeStorybook: process.env.EXPO_PUBLIC_STORYBOOK_ENABLED !== "true",
|
|
73
111
|
* });
|
|
112
|
+
* ```
|
|
74
113
|
*/
|
|
75
114
|
declare function withStorybook(config: MetroConfig, options?: WithStorybookOptions): MetroConfig;
|
|
76
115
|
|
|
77
|
-
export { withStorybook
|
|
116
|
+
export { withStorybook };
|
|
@@ -7,6 +7,10 @@ var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
|
7
7
|
var __commonJS = (cb, mod) => function __require() {
|
|
8
8
|
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
|
|
9
9
|
};
|
|
10
|
+
var __export = (target, all) => {
|
|
11
|
+
for (var name in all)
|
|
12
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
13
|
+
};
|
|
10
14
|
var __copyProps = (to, from, except, desc) => {
|
|
11
15
|
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
16
|
for (let key of __getOwnPropNames(from))
|
|
@@ -23,6 +27,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
23
27
|
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
24
28
|
mod
|
|
25
29
|
));
|
|
30
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
26
31
|
|
|
27
32
|
// scripts/common.js
|
|
28
33
|
var require_common = __commonJS({
|
|
@@ -240,24 +245,28 @@ export const view${useJs ? "" : ": View"} = global.view;
|
|
|
240
245
|
});
|
|
241
246
|
|
|
242
247
|
// src/metro/withStorybook.ts
|
|
248
|
+
var withStorybook_exports = {};
|
|
249
|
+
__export(withStorybook_exports, {
|
|
250
|
+
withStorybook: () => withStorybook
|
|
251
|
+
});
|
|
252
|
+
module.exports = __toCommonJS(withStorybook_exports);
|
|
243
253
|
var path = __toESM(require("path"));
|
|
244
254
|
var import_generate = __toESM(require_generate());
|
|
245
255
|
var import_ws = require("ws");
|
|
246
256
|
var import_common = require("storybook/internal/common");
|
|
247
257
|
var import_telemetry = require("storybook/internal/telemetry");
|
|
248
258
|
function withStorybook(config, options = {
|
|
249
|
-
enabled: true,
|
|
250
259
|
useJs: false,
|
|
251
|
-
|
|
260
|
+
enabled: true,
|
|
252
261
|
docTools: true,
|
|
253
|
-
liteMode: false
|
|
262
|
+
liteMode: false,
|
|
263
|
+
configPath: path.resolve(process.cwd(), "./.rnstorybook")
|
|
254
264
|
}) {
|
|
255
265
|
const {
|
|
256
|
-
configPath,
|
|
257
|
-
enabled = true,
|
|
266
|
+
configPath = path.resolve(process.cwd(), "./.rnstorybook"),
|
|
258
267
|
websockets,
|
|
259
268
|
useJs = false,
|
|
260
|
-
|
|
269
|
+
enabled = true,
|
|
261
270
|
docTools = true,
|
|
262
271
|
liteMode = false
|
|
263
272
|
} = options;
|
|
@@ -268,24 +277,36 @@ function withStorybook(config, options = {
|
|
|
268
277
|
});
|
|
269
278
|
}
|
|
270
279
|
if (!enabled) {
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
resolver
|
|
275
|
-
|
|
276
|
-
resolveRequest
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
return
|
|
280
|
+
return {
|
|
281
|
+
...config,
|
|
282
|
+
resolver: {
|
|
283
|
+
...config.resolver,
|
|
284
|
+
resolveRequest: (context, moduleName, platform) => {
|
|
285
|
+
const resolveFunction = config?.resolver?.resolveRequest ? config.resolver.resolveRequest : context.resolveRequest;
|
|
286
|
+
if (moduleName.startsWith("storybook") || moduleName.startsWith("@storybook")) {
|
|
287
|
+
return {
|
|
288
|
+
type: "empty"
|
|
289
|
+
};
|
|
290
|
+
}
|
|
291
|
+
if (moduleName === "tty" || moduleName === "os") {
|
|
292
|
+
return {
|
|
293
|
+
type: "empty"
|
|
294
|
+
};
|
|
284
295
|
}
|
|
296
|
+
const resolved = resolveFunction(context, moduleName, platform);
|
|
297
|
+
if (resolved.filePath?.includes?.(`${configPath}/index.tsx`)) {
|
|
298
|
+
return {
|
|
299
|
+
filePath: path.resolve(__dirname, "../stub.js"),
|
|
300
|
+
type: "sourceFile"
|
|
301
|
+
};
|
|
302
|
+
}
|
|
303
|
+
if (resolved.filePath?.includes?.(configPath)) {
|
|
304
|
+
return { type: "empty" };
|
|
305
|
+
}
|
|
306
|
+
return resolved;
|
|
285
307
|
}
|
|
286
|
-
}
|
|
287
|
-
}
|
|
288
|
-
return config;
|
|
308
|
+
}
|
|
309
|
+
};
|
|
289
310
|
}
|
|
290
311
|
if (websockets) {
|
|
291
312
|
const port = websockets.port ?? 7007;
|
|
@@ -305,7 +326,7 @@ function withStorybook(config, options = {
|
|
|
305
326
|
});
|
|
306
327
|
}
|
|
307
328
|
(0, import_generate.generate)({
|
|
308
|
-
configPath
|
|
329
|
+
configPath,
|
|
309
330
|
useJs,
|
|
310
331
|
docTools
|
|
311
332
|
});
|
|
@@ -346,4 +367,7 @@ function withStorybook(config, options = {
|
|
|
346
367
|
}
|
|
347
368
|
};
|
|
348
369
|
}
|
|
349
|
-
|
|
370
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
371
|
+
0 && (module.exports = {
|
|
372
|
+
withStorybook
|
|
373
|
+
});
|
package/dist/stub.js
ADDED
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
var __defProp = Object.defineProperty;
|
|
2
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
3
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
4
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
5
|
+
var __export = (target, all) => {
|
|
6
|
+
for (var name in all)
|
|
7
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
8
|
+
};
|
|
9
|
+
var __copyProps = (to, from, except, desc) => {
|
|
10
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
11
|
+
for (let key of __getOwnPropNames(from))
|
|
12
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
13
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
14
|
+
}
|
|
15
|
+
return to;
|
|
16
|
+
};
|
|
17
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
18
|
+
|
|
19
|
+
// src/stub.tsx
|
|
20
|
+
var stub_exports = {};
|
|
21
|
+
__export(stub_exports, {
|
|
22
|
+
default: () => stub_default
|
|
23
|
+
});
|
|
24
|
+
module.exports = __toCommonJS(stub_exports);
|
|
25
|
+
var import_react_native = require("react-native");
|
|
26
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
27
|
+
var Stub = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
28
|
+
import_react_native.View,
|
|
29
|
+
{
|
|
30
|
+
style: {
|
|
31
|
+
flex: 1,
|
|
32
|
+
alignItems: "center",
|
|
33
|
+
justifyContent: "center",
|
|
34
|
+
padding: 16
|
|
35
|
+
},
|
|
36
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: { fontSize: 20, textAlign: "center" }, children: "Storybook is disabled in the withStorybook metro wrapper." })
|
|
37
|
+
}
|
|
38
|
+
);
|
|
39
|
+
var stub_default = Stub;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@storybook/react-native",
|
|
3
|
-
"version": "10.0.0-
|
|
3
|
+
"version": "10.0.0-rc.1",
|
|
4
4
|
"description": "A better way to develop React Native Components for your app",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -24,10 +24,10 @@
|
|
|
24
24
|
"exports": {
|
|
25
25
|
".": "./dist/index.js",
|
|
26
26
|
"./metro/withStorybook": "./dist/metro/withStorybook.js",
|
|
27
|
-
"./metro/withStorybookConfig": "./dist/metro/withStorybookConfig.js",
|
|
28
27
|
"./preview": "./dist/preview.js",
|
|
29
28
|
"./scripts/generate": "./scripts/generate.js",
|
|
30
|
-
"./preset": "./preset.js"
|
|
29
|
+
"./preset": "./preset.js",
|
|
30
|
+
"./stub": "./dist/stub.js"
|
|
31
31
|
},
|
|
32
32
|
"files": [
|
|
33
33
|
"bin/**/*",
|
|
@@ -49,10 +49,10 @@
|
|
|
49
49
|
},
|
|
50
50
|
"dependencies": {
|
|
51
51
|
"@storybook/global": "^5.0.0",
|
|
52
|
-
"@storybook/react": "10.0.0-
|
|
53
|
-
"@storybook/react-native-theming": "^10.0.0-
|
|
54
|
-
"@storybook/react-native-ui": "^10.0.0-
|
|
55
|
-
"@storybook/react-native-ui-common": "^10.0.0-
|
|
52
|
+
"@storybook/react": "10.0.0-rc.1",
|
|
53
|
+
"@storybook/react-native-theming": "^10.0.0-rc.1",
|
|
54
|
+
"@storybook/react-native-ui": "^10.0.0-rc.1",
|
|
55
|
+
"@storybook/react-native-ui-common": "^10.0.0-rc.1",
|
|
56
56
|
"commander": "^8.2.0",
|
|
57
57
|
"dedent": "^1.5.1",
|
|
58
58
|
"deepmerge": "^4.3.0",
|
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
"jotai": "^2.6.2",
|
|
75
75
|
"react": "19.1.0",
|
|
76
76
|
"react-native": "0.81.4",
|
|
77
|
-
"storybook": "10.0.0-
|
|
77
|
+
"storybook": "10.0.0-rc.1",
|
|
78
78
|
"tsup": "^8.5.0",
|
|
79
79
|
"typescript": "~5.9.2",
|
|
80
80
|
"universal-test-renderer": "^0.6.0"
|
|
@@ -108,5 +108,5 @@
|
|
|
108
108
|
"publishConfig": {
|
|
109
109
|
"access": "public"
|
|
110
110
|
},
|
|
111
|
-
"gitHead": "
|
|
111
|
+
"gitHead": "b1b99bb72fa5713564390e65d556f1ec47c8c7b3"
|
|
112
112
|
}
|
|
@@ -1,116 +0,0 @@
|
|
|
1
|
-
import { MetroConfig } from 'metro-config';
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* Options for configuring WebSockets used for syncing storybook instances or sending events to storybook.
|
|
5
|
-
*/
|
|
6
|
-
interface WebsocketsOptions {
|
|
7
|
-
/**
|
|
8
|
-
* The port WebSocket server will listen on. Defaults to 7007.
|
|
9
|
-
*/
|
|
10
|
-
port?: number;
|
|
11
|
-
/**
|
|
12
|
-
* The host WebSocket server will bind to. Defaults to 'localhost'.
|
|
13
|
-
*/
|
|
14
|
-
host?: string;
|
|
15
|
-
}
|
|
16
|
-
/**
|
|
17
|
-
* Options for configuring Storybook with React Native.
|
|
18
|
-
*/
|
|
19
|
-
interface WithStorybookOptions {
|
|
20
|
-
/**
|
|
21
|
-
* The path to the Storybook config folder. Defaults to './.rnstorybook'.
|
|
22
|
-
*/
|
|
23
|
-
configPath?: string;
|
|
24
|
-
/**
|
|
25
|
-
* WebSocket configuration for syncing storybook instances or sending events to storybook.
|
|
26
|
-
*/
|
|
27
|
-
websockets?: WebsocketsOptions;
|
|
28
|
-
/**
|
|
29
|
-
* Whether to use JavaScript files for Storybook configuration instead of TypeScript. Defaults to false.
|
|
30
|
-
*/
|
|
31
|
-
useJs?: boolean;
|
|
32
|
-
/**
|
|
33
|
-
* if true, we will attempt to remove storybook from the js bundle.
|
|
34
|
-
*/
|
|
35
|
-
removeStorybook?: boolean;
|
|
36
|
-
/**
|
|
37
|
-
* Whether to include doc tools in the storybook.requires file. Defaults to true.
|
|
38
|
-
*/
|
|
39
|
-
docTools?: boolean;
|
|
40
|
-
/**
|
|
41
|
-
* Whether to use lite mode for the storybook. Defaults to false.
|
|
42
|
-
* This will mock out the default storybook ui so you don't need to install all its dependencies like reanimated etc.
|
|
43
|
-
*/
|
|
44
|
-
liteMode?: boolean;
|
|
45
|
-
}
|
|
46
|
-
/**
|
|
47
|
-
* Configures Metro bundler to work with Storybook in React Native.
|
|
48
|
-
* This function wraps a Metro configuration to enable Storybook usage.
|
|
49
|
-
* This is intended to replace the withStorybook function in the future.
|
|
50
|
-
*
|
|
51
|
-
* @param config - The Metro bundler configuration to be modified. This should be a valid Metro config object
|
|
52
|
-
* that includes resolver, transformer, and other Metro-specific options.
|
|
53
|
-
* @param options - Options to customize the Storybook configuration.
|
|
54
|
-
* @param options.configPath - The path to the Storybook config folder. Defaults to './.rnstorybook'.
|
|
55
|
-
* This is where your main.js/ts and preview.js/ts files are located.
|
|
56
|
-
* @param options.websockets - WebSocket configuration for syncing storybook instances or sending events.
|
|
57
|
-
* When provided, creates a WebSocket server for real-time communication.
|
|
58
|
-
* @param options.websockets.port - The port WebSocket server will listen on. Defaults to 7007.
|
|
59
|
-
* @param options.websockets.host - The host WebSocket server will bind to. Defaults to 'localhost'.
|
|
60
|
-
* @param options.useJs - Whether to use JavaScript files for Storybook configuration instead of TypeScript.
|
|
61
|
-
* When true, generates storybook.requires.js instead of storybook.requires.ts.
|
|
62
|
-
* Defaults to false.
|
|
63
|
-
* @param options.removeStorybook - If enabled is false and this is true, attempts to remove
|
|
64
|
-
* storybook modules from the JavaScript bundle to reduce bundle size.
|
|
65
|
-
* Defaults to false.
|
|
66
|
-
* @param options.docTools - Whether to include doc tools in the storybook.requires file.
|
|
67
|
-
* Doc tools provide additional documentation features. Defaults to true.
|
|
68
|
-
* @param options.liteMode - Whether to use lite mode for the storybook. In lite mode, the default
|
|
69
|
-
* storybook UI is mocked out so you don't need to install all its dependencies
|
|
70
|
-
* like reanimated etc. This is useful for reducing bundle size and dependencies.
|
|
71
|
-
* Defaults to false.
|
|
72
|
-
* @returns The modified Metro configuration with Storybook support enabled.
|
|
73
|
-
*
|
|
74
|
-
* @example
|
|
75
|
-
* ```javascript
|
|
76
|
-
* const { getDefaultConfig } = require('expo/metro-config');
|
|
77
|
-
* const withStorybook = require('@storybook/react-native/metro/withStorybook');
|
|
78
|
-
* const path = require('path');
|
|
79
|
-
*
|
|
80
|
-
* const projectRoot = __dirname;
|
|
81
|
-
* const config = getDefaultConfig(projectRoot);
|
|
82
|
-
*
|
|
83
|
-
* module.exports = withStorybook(config, {
|
|
84
|
-
* configPath: path.resolve(projectRoot, './.rnstorybook'),
|
|
85
|
-
* websockets: { port: 7007, host: 'localhost' },
|
|
86
|
-
* useJs: false,
|
|
87
|
-
* docTools: true,
|
|
88
|
-
* liteMode: false,
|
|
89
|
-
* });
|
|
90
|
-
* ```
|
|
91
|
-
*
|
|
92
|
-
* @example
|
|
93
|
-
* ```javascript
|
|
94
|
-
* // Minimal configuration
|
|
95
|
-
* const { getDefaultConfig } = require('expo/metro-config');
|
|
96
|
-
* const withStorybook = require('@storybook/react-native/metro/withStorybook');
|
|
97
|
-
*
|
|
98
|
-
* const config = getDefaultConfig(__dirname);
|
|
99
|
-
* module.exports = withStorybook(config);
|
|
100
|
-
* ```
|
|
101
|
-
*
|
|
102
|
-
* @example
|
|
103
|
-
* ```javascript
|
|
104
|
-
* // Disable Storybook in production
|
|
105
|
-
* const { getDefaultConfig } = require('expo/metro-config');
|
|
106
|
-
* const withStorybook = require('@storybook/react-native/metro/withStorybook');
|
|
107
|
-
*
|
|
108
|
-
* const config = getDefaultConfig(__dirname);
|
|
109
|
-
* module.exports = withStorybook(config, {
|
|
110
|
-
* removeStorybook: process.env.EXPO_PUBLIC_STORYBOOK_ENABLED !== "true",
|
|
111
|
-
* });
|
|
112
|
-
* ```
|
|
113
|
-
*/
|
|
114
|
-
declare function withStorybookConfig(config: MetroConfig, options?: WithStorybookOptions): MetroConfig;
|
|
115
|
-
|
|
116
|
-
export { withStorybookConfig as default, withStorybookConfig };
|
|
@@ -1,360 +0,0 @@
|
|
|
1
|
-
var __create = Object.create;
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __commonJS = (cb, mod) => function __require() {
|
|
8
|
-
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
|
|
9
|
-
};
|
|
10
|
-
var __export = (target, all) => {
|
|
11
|
-
for (var name in all)
|
|
12
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
13
|
-
};
|
|
14
|
-
var __copyProps = (to, from, except, desc) => {
|
|
15
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
16
|
-
for (let key of __getOwnPropNames(from))
|
|
17
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
18
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
19
|
-
}
|
|
20
|
-
return to;
|
|
21
|
-
};
|
|
22
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
23
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
24
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
25
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
26
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
27
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
28
|
-
mod
|
|
29
|
-
));
|
|
30
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
31
|
-
|
|
32
|
-
// scripts/common.js
|
|
33
|
-
var require_common = __commonJS({
|
|
34
|
-
"scripts/common.js"(exports2, module2) {
|
|
35
|
-
var { globToRegexp } = require("storybook/internal/common");
|
|
36
|
-
var path2 = require("path");
|
|
37
|
-
var fs = require("fs");
|
|
38
|
-
var cwd = process.cwd();
|
|
39
|
-
var toRequireContext = (specifier) => {
|
|
40
|
-
const { directory, files } = specifier;
|
|
41
|
-
const match = globToRegexp(`./${files}`);
|
|
42
|
-
return {
|
|
43
|
-
path: directory,
|
|
44
|
-
recursive: files.includes("**") || files.split("/").length > 1,
|
|
45
|
-
match
|
|
46
|
-
};
|
|
47
|
-
};
|
|
48
|
-
var supportedExtensions = ["js", "jsx", "ts", "tsx", "cjs", "mjs"];
|
|
49
|
-
function getFilePathExtension({ configPath }, fileName) {
|
|
50
|
-
for (const ext of supportedExtensions) {
|
|
51
|
-
const filePath = path2.resolve(cwd, configPath, `${fileName}.${ext}`);
|
|
52
|
-
if (fs.existsSync(filePath)) {
|
|
53
|
-
return ext;
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
return null;
|
|
57
|
-
}
|
|
58
|
-
function ensureRelativePathHasDot(relativePath) {
|
|
59
|
-
return relativePath.startsWith(".") ? relativePath : `./${relativePath}`;
|
|
60
|
-
}
|
|
61
|
-
function getPreviewExists({ configPath }) {
|
|
62
|
-
return !!getFilePathExtension({ configPath }, "preview");
|
|
63
|
-
}
|
|
64
|
-
function resolveAddonFile(addon, file, extensions = ["js", "mjs", "ts"], configPath) {
|
|
65
|
-
if (!addon || typeof addon !== "string") return null;
|
|
66
|
-
try {
|
|
67
|
-
const basePath = `${addon}/${file}`;
|
|
68
|
-
require.resolve(basePath);
|
|
69
|
-
return basePath;
|
|
70
|
-
} catch (_error) {
|
|
71
|
-
}
|
|
72
|
-
for (const ext of extensions) {
|
|
73
|
-
try {
|
|
74
|
-
const filePath = `${addon}/${file}.${ext}`;
|
|
75
|
-
require.resolve(filePath);
|
|
76
|
-
return filePath;
|
|
77
|
-
} catch (_error) {
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
if (addon.startsWith("./") || addon.startsWith("../")) {
|
|
81
|
-
try {
|
|
82
|
-
const extension = getFilePathExtension({ configPath }, `${addon}/${file}`);
|
|
83
|
-
if (extension) {
|
|
84
|
-
return `${addon}/${file}`;
|
|
85
|
-
}
|
|
86
|
-
} catch (_error) {
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
return null;
|
|
90
|
-
}
|
|
91
|
-
function getAddonName(addon) {
|
|
92
|
-
if (typeof addon === "string") return addon;
|
|
93
|
-
if (typeof addon === "object" && addon.name && typeof addon.name === "string") return addon.name;
|
|
94
|
-
console.error("Invalid addon configuration", addon);
|
|
95
|
-
return null;
|
|
96
|
-
}
|
|
97
|
-
module2.exports = {
|
|
98
|
-
toRequireContext,
|
|
99
|
-
getFilePathExtension,
|
|
100
|
-
ensureRelativePathHasDot,
|
|
101
|
-
getPreviewExists,
|
|
102
|
-
resolveAddonFile,
|
|
103
|
-
getAddonName
|
|
104
|
-
};
|
|
105
|
-
}
|
|
106
|
-
});
|
|
107
|
-
|
|
108
|
-
// scripts/generate.js
|
|
109
|
-
var require_generate = __commonJS({
|
|
110
|
-
"scripts/generate.js"(exports2, module2) {
|
|
111
|
-
var {
|
|
112
|
-
toRequireContext,
|
|
113
|
-
ensureRelativePathHasDot,
|
|
114
|
-
getPreviewExists,
|
|
115
|
-
resolveAddonFile,
|
|
116
|
-
getAddonName
|
|
117
|
-
} = require_common();
|
|
118
|
-
var { normalizeStories, globToRegexp, loadMainConfig } = require("storybook/internal/common");
|
|
119
|
-
var fs = require("fs");
|
|
120
|
-
var path2 = require("path");
|
|
121
|
-
var cwd = process.cwd();
|
|
122
|
-
async function generate2({
|
|
123
|
-
configPath,
|
|
124
|
-
/* absolute = false, */
|
|
125
|
-
useJs = false,
|
|
126
|
-
docTools = true
|
|
127
|
-
}) {
|
|
128
|
-
const storybookRequiresLocation = path2.resolve(
|
|
129
|
-
cwd,
|
|
130
|
-
configPath,
|
|
131
|
-
`storybook.requires.${useJs ? "js" : "ts"}`
|
|
132
|
-
);
|
|
133
|
-
const main = await loadMainConfig({ configDir: configPath, cwd });
|
|
134
|
-
const storiesSpecifiers = normalizeStories(main.stories, {
|
|
135
|
-
configDir: configPath,
|
|
136
|
-
workingDir: cwd
|
|
137
|
-
});
|
|
138
|
-
const normalizedStories = storiesSpecifiers.map((specifier) => {
|
|
139
|
-
const reg = globToRegexp(`./${specifier.files}`);
|
|
140
|
-
const { path: p, recursive: r, match: m } = toRequireContext(specifier);
|
|
141
|
-
const pathToStory = ensureRelativePathHasDot(path2.posix.relative(configPath, p));
|
|
142
|
-
return `{
|
|
143
|
-
titlePrefix: "${specifier.titlePrefix}",
|
|
144
|
-
directory: "${specifier.directory}",
|
|
145
|
-
files: "${specifier.files}",
|
|
146
|
-
importPathMatcher: /${reg.source}/,
|
|
147
|
-
${useJs ? "" : "// @ts-ignore"}
|
|
148
|
-
req: require.context(
|
|
149
|
-
'${pathToStory}',
|
|
150
|
-
${r},
|
|
151
|
-
${m}
|
|
152
|
-
),
|
|
153
|
-
}`;
|
|
154
|
-
});
|
|
155
|
-
const registeredAddons = [];
|
|
156
|
-
for (const addon of main.addons) {
|
|
157
|
-
const registerPath = resolveAddonFile(
|
|
158
|
-
getAddonName(addon),
|
|
159
|
-
"register",
|
|
160
|
-
["js", "mjs", "jsx", "ts", "tsx"],
|
|
161
|
-
configPath
|
|
162
|
-
);
|
|
163
|
-
if (registerPath) {
|
|
164
|
-
registeredAddons.push(`import "${registerPath}";`);
|
|
165
|
-
}
|
|
166
|
-
}
|
|
167
|
-
const docToolsAnnotation = 'require("@storybook/react-native/preview")';
|
|
168
|
-
const enhancers = [];
|
|
169
|
-
if (docTools) {
|
|
170
|
-
enhancers.push(docToolsAnnotation);
|
|
171
|
-
}
|
|
172
|
-
for (const addon of main.addons) {
|
|
173
|
-
const previewPath = resolveAddonFile(
|
|
174
|
-
getAddonName(addon),
|
|
175
|
-
"preview",
|
|
176
|
-
["js", "mjs", "jsx", "ts", "tsx"],
|
|
177
|
-
configPath
|
|
178
|
-
);
|
|
179
|
-
if (previewPath) {
|
|
180
|
-
enhancers.push(`require('${previewPath}')`);
|
|
181
|
-
continue;
|
|
182
|
-
}
|
|
183
|
-
}
|
|
184
|
-
let options = "";
|
|
185
|
-
let optionsVar = "";
|
|
186
|
-
const reactNativeOptions = main.reactNative;
|
|
187
|
-
if (reactNativeOptions && typeof reactNativeOptions === "object") {
|
|
188
|
-
optionsVar = `const options = ${JSON.stringify(reactNativeOptions, null, 2)}`;
|
|
189
|
-
options = "options";
|
|
190
|
-
}
|
|
191
|
-
const previewExists = getPreviewExists({ configPath });
|
|
192
|
-
if (previewExists) {
|
|
193
|
-
enhancers.unshift("require('./preview')");
|
|
194
|
-
}
|
|
195
|
-
const annotations = `[
|
|
196
|
-
${enhancers.join(",\n ")}
|
|
197
|
-
]`;
|
|
198
|
-
const globalTypes = `
|
|
199
|
-
declare global {
|
|
200
|
-
var view: View;
|
|
201
|
-
var STORIES: typeof normalizedStories;
|
|
202
|
-
}
|
|
203
|
-
`;
|
|
204
|
-
const fileContent = `/* do not change this file, it is auto generated by storybook. */
|
|
205
|
-
import { start, updateView${useJs ? "" : ", View"} } from '@storybook/react-native';
|
|
206
|
-
|
|
207
|
-
${registeredAddons.join("\n")}
|
|
208
|
-
|
|
209
|
-
const normalizedStories = [
|
|
210
|
-
${normalizedStories.join(",\n ")}
|
|
211
|
-
];
|
|
212
|
-
|
|
213
|
-
${useJs ? "" : globalTypes}
|
|
214
|
-
|
|
215
|
-
const annotations = ${annotations};
|
|
216
|
-
|
|
217
|
-
global.STORIES = normalizedStories;
|
|
218
|
-
|
|
219
|
-
${useJs ? "" : "// @ts-ignore"}
|
|
220
|
-
module?.hot?.accept?.();
|
|
221
|
-
|
|
222
|
-
${optionsVar}
|
|
223
|
-
|
|
224
|
-
if (!global.view) {
|
|
225
|
-
global.view = start({
|
|
226
|
-
annotations,
|
|
227
|
-
storyEntries: normalizedStories,
|
|
228
|
-
${options ? ` ${options},` : ""}
|
|
229
|
-
});
|
|
230
|
-
} else {
|
|
231
|
-
updateView(global.view, annotations, normalizedStories${options ? `, ${options}` : ""});
|
|
232
|
-
}
|
|
233
|
-
|
|
234
|
-
export const view${useJs ? "" : ": View"} = global.view;
|
|
235
|
-
`;
|
|
236
|
-
fs.writeFileSync(storybookRequiresLocation, fileContent, {
|
|
237
|
-
encoding: "utf8",
|
|
238
|
-
flag: "w"
|
|
239
|
-
});
|
|
240
|
-
}
|
|
241
|
-
module2.exports = {
|
|
242
|
-
generate: generate2
|
|
243
|
-
};
|
|
244
|
-
}
|
|
245
|
-
});
|
|
246
|
-
|
|
247
|
-
// src/metro/withStorybookConfig.ts
|
|
248
|
-
var withStorybookConfig_exports = {};
|
|
249
|
-
__export(withStorybookConfig_exports, {
|
|
250
|
-
default: () => withStorybookConfig_default,
|
|
251
|
-
withStorybookConfig: () => withStorybookConfig
|
|
252
|
-
});
|
|
253
|
-
module.exports = __toCommonJS(withStorybookConfig_exports);
|
|
254
|
-
var path = __toESM(require("path"));
|
|
255
|
-
var import_generate = __toESM(require_generate());
|
|
256
|
-
var import_ws = require("ws");
|
|
257
|
-
var import_common = require("storybook/internal/common");
|
|
258
|
-
var import_telemetry = require("storybook/internal/telemetry");
|
|
259
|
-
function withStorybookConfig(config, options = {
|
|
260
|
-
useJs: false,
|
|
261
|
-
removeStorybook: false,
|
|
262
|
-
docTools: true,
|
|
263
|
-
liteMode: false,
|
|
264
|
-
configPath: path.resolve(process.cwd(), "./.rnstorybook")
|
|
265
|
-
}) {
|
|
266
|
-
const {
|
|
267
|
-
configPath = path.resolve(process.cwd(), "./.rnstorybook"),
|
|
268
|
-
websockets,
|
|
269
|
-
useJs = false,
|
|
270
|
-
removeStorybook = false,
|
|
271
|
-
docTools = true,
|
|
272
|
-
liteMode = false
|
|
273
|
-
} = options;
|
|
274
|
-
const disableTelemetry = (0, import_common.optionalEnvToBoolean)(process.env.STORYBOOK_DISABLE_TELEMETRY);
|
|
275
|
-
if (!disableTelemetry && !removeStorybook) {
|
|
276
|
-
const event = process.env.NODE_ENV === "production" ? "build" : "dev";
|
|
277
|
-
(0, import_telemetry.telemetry)(event, {}).catch((e) => {
|
|
278
|
-
});
|
|
279
|
-
}
|
|
280
|
-
if (removeStorybook) {
|
|
281
|
-
return {
|
|
282
|
-
...config,
|
|
283
|
-
resolver: {
|
|
284
|
-
...config.resolver,
|
|
285
|
-
resolveRequest: (context, moduleName, platform) => {
|
|
286
|
-
const resolveFunction = config?.resolver?.resolveRequest ? config.resolver.resolveRequest : context.resolveRequest;
|
|
287
|
-
if (moduleName.startsWith("storybook") || moduleName.startsWith("@storybook")) {
|
|
288
|
-
return {
|
|
289
|
-
type: "empty"
|
|
290
|
-
};
|
|
291
|
-
}
|
|
292
|
-
return resolveFunction(context, moduleName, platform);
|
|
293
|
-
}
|
|
294
|
-
}
|
|
295
|
-
};
|
|
296
|
-
}
|
|
297
|
-
if (websockets) {
|
|
298
|
-
const port = websockets.port ?? 7007;
|
|
299
|
-
const host = websockets.host ?? "localhost";
|
|
300
|
-
const wss = new import_ws.WebSocketServer({ port, host });
|
|
301
|
-
wss.on("connection", function connection(ws) {
|
|
302
|
-
console.log("WebSocket connection established");
|
|
303
|
-
ws.on("error", console.error);
|
|
304
|
-
ws.on("message", function message(data) {
|
|
305
|
-
try {
|
|
306
|
-
const json = JSON.parse(data.toString());
|
|
307
|
-
wss.clients.forEach((wsClient) => wsClient.send(JSON.stringify(json)));
|
|
308
|
-
} catch (error) {
|
|
309
|
-
console.error(error);
|
|
310
|
-
}
|
|
311
|
-
});
|
|
312
|
-
});
|
|
313
|
-
}
|
|
314
|
-
(0, import_generate.generate)({
|
|
315
|
-
configPath,
|
|
316
|
-
useJs,
|
|
317
|
-
docTools
|
|
318
|
-
});
|
|
319
|
-
return {
|
|
320
|
-
...config,
|
|
321
|
-
transformer: {
|
|
322
|
-
...config.transformer,
|
|
323
|
-
unstable_allowRequireContext: true
|
|
324
|
-
},
|
|
325
|
-
resolver: {
|
|
326
|
-
...config.resolver,
|
|
327
|
-
resolveRequest: (context, moduleName, platform) => {
|
|
328
|
-
const resolveFunction = config?.resolver?.resolveRequest ? config.resolver.resolveRequest : context.resolveRequest;
|
|
329
|
-
const shouldUseCustomResolveConfig = moduleName.startsWith("storybook") || moduleName.startsWith("@storybook") || moduleName.startsWith("uuid");
|
|
330
|
-
const theContext = shouldUseCustomResolveConfig ? {
|
|
331
|
-
...context,
|
|
332
|
-
unstable_enablePackageExports: true,
|
|
333
|
-
unstable_conditionNames: ["import"]
|
|
334
|
-
} : context;
|
|
335
|
-
const resolveResult = resolveFunction(theContext, moduleName, platform);
|
|
336
|
-
if (resolveResult?.filePath?.includes?.("@storybook/react/template/cli")) {
|
|
337
|
-
return {
|
|
338
|
-
type: "empty"
|
|
339
|
-
};
|
|
340
|
-
}
|
|
341
|
-
if (moduleName === "tty" || moduleName === "os") {
|
|
342
|
-
return {
|
|
343
|
-
type: "empty"
|
|
344
|
-
};
|
|
345
|
-
}
|
|
346
|
-
if (liteMode && resolveResult?.filePath?.includes?.("@storybook/react-native-ui") && !resolveResult?.filePath?.includes?.("@storybook/react-native-ui-lite") && !resolveResult?.filePath?.includes?.("@storybook/react-native-ui-common")) {
|
|
347
|
-
return {
|
|
348
|
-
type: "empty"
|
|
349
|
-
};
|
|
350
|
-
}
|
|
351
|
-
return resolveResult;
|
|
352
|
-
}
|
|
353
|
-
}
|
|
354
|
-
};
|
|
355
|
-
}
|
|
356
|
-
var withStorybookConfig_default = withStorybookConfig;
|
|
357
|
-
// Annotate the CommonJS export names for ESM import in node:
|
|
358
|
-
0 && (module.exports = {
|
|
359
|
-
withStorybookConfig
|
|
360
|
-
});
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
module.exports = require('../dist/metro/withStorybookConfig.js');
|