Skip to content

Commit

Permalink
migrate withStorybook to typescript (#633)
Browse files Browse the repository at this point in the history
* 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]>
  • Loading branch information
tlow92 and dannyhw authored Oct 27, 2024
1 parent 1287053 commit 37d653f
Show file tree
Hide file tree
Showing 13 changed files with 210 additions and 199 deletions.
2 changes: 1 addition & 1 deletion examples/expo-example/.storybook/storybook.requires.ts
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ declare global {

const annotations = [
require("./preview"),
require("@storybook/react-native/dist/preview"),
require("@storybook/react-native/preview"),
require("@storybook/addon-actions/preview"),
];

Expand Down
3 changes: 1 addition & 2 deletions examples/expo-example/App.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { Text, View } from 'react-native';
import Constants from 'expo-constants';

function App() {
return (
Expand All @@ -18,7 +17,7 @@ function App() {

let AppEntryPoint = App;

if (Constants.expoConfig?.extra?.storybookEnabled === 'true') {
if (process.env.EXPO_PUBLIC_STORYBOOK_ENABLED === 'true') {
AppEntryPoint = require('./.storybook').default;
}

Expand Down
3 changes: 0 additions & 3 deletions examples/expo-example/app.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,5 @@ module.exports = {
web: {
bundler: 'metro',
},
extra: {
storybookEnabled: process.env.STORYBOOK_ENABLED,
},
userInterfaceStyle: 'automatic',
};
8 changes: 4 additions & 4 deletions examples/expo-example/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@
"private": true,
"main": "index.js",
"scripts": {
"android": "STORYBOOK_ENABLED=true expo start --android",
"ios": "STORYBOOK_ENABLED=true expo start --ios",
"web": "STORYBOOK_ENABLED=true expo start --web",
"storybook": "STORYBOOK_ENABLED=true expo start -c",
"android": "EXPO_PUBLIC_STORYBOOK_ENABLED=true expo start --android",
"ios": "EXPO_PUBLIC_STORYBOOK_ENABLED=true expo start --ios",
"web": "EXPO_PUBLIC_STORYBOOK_ENABLED=true expo start --web",
"storybook": "EXPO_PUBLIC_STORYBOOK_ENABLED=true expo start -c",
"storybook:web": "storybook dev -p 6006 -c ./.storybook-web",
"build-web-storybook": "storybook build -c ./.storybook-web",
"storybook-generate": "sb-rn-get-stories --config-path=./.storybook",
Expand Down
72 changes: 0 additions & 72 deletions packages/react-native/metro/withStorybook.d.ts

This file was deleted.

107 changes: 1 addition & 106 deletions packages/react-native/metro/withStorybook.js
Original file line number Diff line number Diff line change
@@ -1,106 +1 @@
const path = require('path');

const { generate } = require('../scripts/generate');
const { WebSocketServer } = require('ws');

module.exports = (
config,
{ configPath, enabled = true, websockets, useJs = false, onDisabledRemoveStorybook = false } = {
enabled: true,
useJs: false,
onDisabledRemoveStorybook: false,
}
) => {
if (!enabled) {
if (onDisabledRemoveStorybook) {
return {
...config,
resolver: {
...config.resolver,
resolveRequest: (context, moduleName, platform) => {
const resolveFunction = config?.resolver?.resolveRequest
? config?.resolver?.resolveRequest
: context.resolveRequest;

if (moduleName.startsWith('storybook') || moduleName.startsWith('@storybook')) {
return {
type: 'empty',
};
}

return resolveFunction(context, moduleName, platform);
},
},
};
}

return config;
}

if (websockets) {
const port = websockets.port ?? 7007;

const host = websockets.host ?? 'localhost';

const wss = new WebSocketServer({ port, host });

wss.on('connection', function connection(ws) {
console.log('websocket connection established');

ws.on('error', console.error);

ws.on('message', function message(data) {
try {
const json = JSON.parse(data.toString());

wss.clients.forEach((wsClient) => wsClient.send(JSON.stringify(json)));
} catch (error) {
console.error(error);
}
});
});
}

generate({
configPath: configPath ?? path.resolve(process.cwd(), './.storybook'),
useJs,
});

return {
...config,
transformer: {
...config.transformer,
unstable_allowRequireContext: true,
},
resolver: {
...config.resolver,
resolveRequest: (context, moduleName, platform) => {
const resolveFunction = config?.resolver?.resolveRequest
? config?.resolver?.resolveRequest
: context.resolveRequest;

const isStorybookModule =
moduleName.startsWith('storybook') || moduleName.startsWith('@storybook');

const theContext = isStorybookModule
? {
...context,
unstable_enablePackageExports: true,
unstable_conditionNames: ['import'],
}
: context;

const resolveResult = resolveFunction(theContext, moduleName, platform);

// workaround for template files with invalid imports
if (resolveResult?.filePath?.includes?.('@storybook/react/template/cli')) {
return {
type: 'empty',
};
}

return resolveResult;
},
},
};
};
module.exports = require('../dist/metro/withStorybook.js');
9 changes: 7 additions & 2 deletions packages/react-native/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,20 @@
"sb-rn-get-stories": "./bin/get-stories.js",
"sb-rn-watcher": "./bin/watcher.js"
},
"exports": {
".": "./dist/index.js",
"./metro/withStorybook": "./dist/metro/withStorybook.js",
"./preview": "./dist/preview.js"
},
"files": [
"bin/**/*",
"dist/**/*",
"README.md",
"*.js",
"*.d.ts",
"scripts/*",
"metro/*",
"template/**/*"
"template/**/*",
"metro/**/*"
],
"scripts": {
"dev": "npx --yes tsx buildscripts/gendtsdev.ts && tsup --watch",
Expand Down
1 change: 1 addition & 0 deletions packages/react-native/preview.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
module.exports = require('./dist/preview.js');
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ import "@storybook/addon-ondevice-actions/register";
}
const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')];
const annotations = [require('./preview'),require("@storybook/react-native/preview"), require('@storybook/addon-actions/preview')];
global.STORIES = normalizedStories;
Expand Down Expand Up @@ -77,7 +77,7 @@ import "@storybook/addon-ondevice-actions/register";
}
const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')];
const annotations = [require('./preview'),require("@storybook/react-native/preview"), require('@storybook/addon-actions/preview')];
global.STORIES = normalizedStories;
Expand Down Expand Up @@ -127,7 +127,7 @@ import "@storybook/addon-ondevice-actions/register";
}
const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')];
const annotations = [require('./preview'),require("@storybook/react-native/preview"), require('@storybook/addon-actions/preview')];
global.STORIES = normalizedStories;
Expand Down Expand Up @@ -177,7 +177,7 @@ import "@storybook/addon-ondevice-actions/register";
}
const annotations = [require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')];
const annotations = [require("@storybook/react-native/preview"), require('@storybook/addon-actions/preview')];
global.STORIES = normalizedStories;
Expand Down Expand Up @@ -222,7 +222,7 @@ import "@storybook/addon-ondevice-actions/register";
const annotations = [require('./preview'),require("@storybook/react-native/dist/preview"), require('@storybook/addon-actions/preview')];
const annotations = [require('./preview'),require("@storybook/react-native/preview"), require('@storybook/addon-actions/preview')];
global.STORIES = normalizedStories;
Expand Down
2 changes: 1 addition & 1 deletion packages/react-native/scripts/generate.js
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ function generate({ configPath, absolute = false, useJs = false }) {

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

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

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

0 comments on commit 37d653f

Please sign in to comment.