Skip to content

Commit 37d653f

Browse files
tlow92dannyhw
tlow92
and
dannyhw
authored
migrate withStorybook to typescript (#633)
* fix: migrate withStorybook to typescript * fix: with storybook exports configuration * fix: account for vscode not finding exports * do same for preview * fix: update snapshots --------- Co-authored-by: Daniel Williams <[email protected]>
1 parent 1287053 commit 37d653f

File tree

13 files changed

+210
-199
lines changed

13 files changed

+210
-199
lines changed

‎examples/expo-example/.storybook/storybook.requires.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -56,7 +56,7 @@ declare global {
5656

5757
const annotations = [
5858
require("./preview"),
59-
require("@storybook/react-native/dist/preview"),
59+
require("@storybook/react-native/preview"),
6060
require("@storybook/addon-actions/preview"),
6161
];
6262

‎examples/expo-example/App.tsx

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { Text, View } from 'react-native';
2-
import Constants from 'expo-constants';
32

43
function App() {
54
return (
@@ -18,7 +17,7 @@ function App() {
1817

1918
let AppEntryPoint = App;
2019

21-
if (Constants.expoConfig?.extra?.storybookEnabled === 'true') {
20+
if (process.env.EXPO_PUBLIC_STORYBOOK_ENABLED === 'true') {
2221
AppEntryPoint = require('./.storybook').default;
2322
}
2423

‎examples/expo-example/app.config.js

-3
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,5 @@ module.exports = {
55
web: {
66
bundler: 'metro',
77
},
8-
extra: {
9-
storybookEnabled: process.env.STORYBOOK_ENABLED,
10-
},
118
userInterfaceStyle: 'automatic',
129
};

‎examples/expo-example/package.json

+4-4
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@
44
"private": true,
55
"main": "index.js",
66
"scripts": {
7-
"android": "STORYBOOK_ENABLED=true expo start --android",
8-
"ios": "STORYBOOK_ENABLED=true expo start --ios",
9-
"web": "STORYBOOK_ENABLED=true expo start --web",
10-
"storybook": "STORYBOOK_ENABLED=true expo start -c",
7+
"android": "EXPO_PUBLIC_STORYBOOK_ENABLED=true expo start --android",
8+
"ios": "EXPO_PUBLIC_STORYBOOK_ENABLED=true expo start --ios",
9+
"web": "EXPO_PUBLIC_STORYBOOK_ENABLED=true expo start --web",
10+
"storybook": "EXPO_PUBLIC_STORYBOOK_ENABLED=true expo start -c",
1111
"storybook:web": "storybook dev -p 6006 -c ./.storybook-web",
1212
"build-web-storybook": "storybook build -c ./.storybook-web",
1313
"storybook-generate": "sb-rn-get-stories --config-path=./.storybook",

‎packages/react-native/metro/withStorybook.d.ts

-72
This file was deleted.

‎packages/react-native/metro/withStorybook.js

+1-106
Original file line numberDiff line numberDiff line change
@@ -1,106 +1 @@
1-
const path = require('path');
2-
3-
const { generate } = require('../scripts/generate');
4-
const { WebSocketServer } = require('ws');
5-
6-
module.exports = (
7-
config,
8-
{ configPath, enabled = true, websockets, useJs = false, onDisabledRemoveStorybook = false } = {
9-
enabled: true,
10-
useJs: false,
11-
onDisabledRemoveStorybook: false,
12-
}
13-
) => {
14-
if (!enabled) {
15-
if (onDisabledRemoveStorybook) {
16-
return {
17-
...config,
18-
resolver: {
19-
...config.resolver,
20-
resolveRequest: (context, moduleName, platform) => {
21-
const resolveFunction = config?.resolver?.resolveRequest
22-
? config?.resolver?.resolveRequest
23-
: context.resolveRequest;
24-
25-
if (moduleName.startsWith('storybook') || moduleName.startsWith('@storybook')) {
26-
return {
27-
type: 'empty',
28-
};
29-
}
30-
31-
return resolveFunction(context, moduleName, platform);
32-
},
33-
},
34-
};
35-
}
36-
37-
return config;
38-
}
39-
40-
if (websockets) {
41-
const port = websockets.port ?? 7007;
42-
43-
const host = websockets.host ?? 'localhost';
44-
45-
const wss = new WebSocketServer({ port, host });
46-
47-
wss.on('connection', function connection(ws) {
48-
console.log('websocket connection established');
49-
50-
ws.on('error', console.error);
51-
52-
ws.on('message', function message(data) {
53-
try {
54-
const json = JSON.parse(data.toString());
55-
56-
wss.clients.forEach((wsClient) => wsClient.send(JSON.stringify(json)));
57-
} catch (error) {
58-
console.error(error);
59-
}
60-
});
61-
});
62-
}
63-
64-
generate({
65-
configPath: configPath ?? path.resolve(process.cwd(), './.storybook'),
66-
useJs,
67-
});
68-
69-
return {
70-
...config,
71-
transformer: {
72-
...config.transformer,
73-
unstable_allowRequireContext: true,
74-
},
75-
resolver: {
76-
...config.resolver,
77-
resolveRequest: (context, moduleName, platform) => {
78-
const resolveFunction = config?.resolver?.resolveRequest
79-
? config?.resolver?.resolveRequest
80-
: context.resolveRequest;
81-
82-
const isStorybookModule =
83-
moduleName.startsWith('storybook') || moduleName.startsWith('@storybook');
84-
85-
const theContext = isStorybookModule
86-
? {
87-
...context,
88-
unstable_enablePackageExports: true,
89-
unstable_conditionNames: ['import'],
90-
}
91-
: context;
92-
93-
const resolveResult = resolveFunction(theContext, moduleName, platform);
94-
95-
// workaround for template files with invalid imports
96-
if (resolveResult?.filePath?.includes?.('@storybook/react/template/cli')) {
97-
return {
98-
type: 'empty',
99-
};
100-
}
101-
102-
return resolveResult;
103-
},
104-
},
105-
};
106-
};
1+
module.exports = require('../dist/metro/withStorybook.js');

‎packages/react-native/package.json

+7-2
Original file line numberDiff line numberDiff line change
@@ -22,15 +22,20 @@
2222
"sb-rn-get-stories": "./bin/get-stories.js",
2323
"sb-rn-watcher": "./bin/watcher.js"
2424
},
25+
"exports": {
26+
".": "./dist/index.js",
27+
"./metro/withStorybook": "./dist/metro/withStorybook.js",
28+
"./preview": "./dist/preview.js"
29+
},
2530
"files": [
2631
"bin/**/*",
2732
"dist/**/*",
2833
"README.md",
2934
"*.js",
3035
"*.d.ts",
3136
"scripts/*",
32-
"metro/*",
33-
"template/**/*"
37+
"template/**/*",
38+
"metro/**/*"
3439
],
3540
"scripts": {
3641
"dev": "npx --yes tsx buildscripts/gendtsdev.ts && tsup --watch",

‎packages/react-native/preview.js

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
module.exports = require('./dist/preview.js');

‎packages/react-native/scripts/__snapshots__/generate.test.js.snap

+5-5
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ import "@storybook/addon-ondevice-actions/register";
2727
}
2828
2929
30-
const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')];
30+
const annotations = [require('./preview'),require("@storybook/react-native/preview"), require('@storybook/addon-actions/preview')];
3131
3232
global.STORIES = normalizedStories;
3333
@@ -77,7 +77,7 @@ import "@storybook/addon-ondevice-actions/register";
7777
}
7878
7979
80-
const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')];
80+
const annotations = [require('./preview'),require("@storybook/react-native/preview"), require('@storybook/addon-actions/preview')];
8181
8282
global.STORIES = normalizedStories;
8383
@@ -127,7 +127,7 @@ import "@storybook/addon-ondevice-actions/register";
127127
}
128128
129129
130-
const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')];
130+
const annotations = [require('./preview'),require("@storybook/react-native/preview"), require('@storybook/addon-actions/preview')];
131131
132132
global.STORIES = normalizedStories;
133133
@@ -177,7 +177,7 @@ import "@storybook/addon-ondevice-actions/register";
177177
}
178178
179179
180-
const annotations = [require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')];
180+
const annotations = [require("@storybook/react-native/preview"), require('@storybook/addon-actions/preview')];
181181
182182
global.STORIES = normalizedStories;
183183
@@ -222,7 +222,7 @@ import "@storybook/addon-ondevice-actions/register";
222222
223223
224224
225-
const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')];
225+
const annotations = [require('./preview'),require("@storybook/react-native/preview"), require('@storybook/addon-actions/preview')];
226226
227227
global.STORIES = normalizedStories;
228228

‎packages/react-native/scripts/generate.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ function generate({ configPath, absolute = false, useJs = false }) {
4848

4949
const registerAddons = main.addons?.map((addon) => `import "${addon}/register";`).join('\n');
5050

51-
const doctools = 'require("@storybook/react-native/dist/preview")';
51+
const doctools = 'require("@storybook/react-native/preview")';
5252

5353
// TODO: implement presets or something similar
5454
const enhancer = main.addons?.includes('@storybook/addon-ondevice-actions')

0 commit comments

Comments
 (0)