From aa40501c952de1c0ac99a927175352c9ad8154c2 Mon Sep 17 00:00:00 2001 From: Danny Date: Thu, 20 May 2021 22:04:09 +0100 Subject: [PATCH] fix: use modern build of storybook to fix unresolved promises and other issues caused by polyfills [6.0] (#174) * fix(): update all dependencies to latest alpha with fix for polyfils * refactor: promise finally button * refactor: rename the globtest folder --- addons/ondevice-actions/package.json | 6 +- addons/ondevice-backgrounds/package.json | 6 +- addons/ondevice-knobs/package.json | 8 +- addons/ondevice-notes/package.json | 10 +- app/react-native-server/package.json | 12 +- .../src/client/manager/provider.js | 2 +- app/react-native/babel.js | 26 - app/react-native/package.json | 12 +- app/react-native/src/preview/Preview.tsx | 14 +- .../components/OnDeviceUI/OnDeviceUI.tsx | 2 +- .../components/OnDeviceUI/addons/Addons.tsx | 2 +- .../StoryListView/StoryListView.tsx | 5 +- .../components/StoryView/StoryView.tsx | 2 +- app/react-native/tsconfig.json | 13 +- examples/native/.storybook/main.js | 6 +- .../components/Button1/Button.stories.tsx | 23 +- .../globtest/Buttonx/Buttonx.stories.tsx | 8 - examples/native/globtest/Buttonx/index.ts | 1 - examples/native/metro.config.js | 3 + .../AnotherButton/AnotherButton.stories.tsx | 7 + .../AnotherButton/AnotherButton.tsx} | 0 .../other_components/AnotherButton/index.ts | 1 + examples/native/package.json | 15 +- package.json | 4 +- yarn.lock | 4204 ++++++++++------- 25 files changed, 2609 insertions(+), 1783 deletions(-) delete mode 100644 app/react-native/babel.js delete mode 100644 examples/native/globtest/Buttonx/Buttonx.stories.tsx delete mode 100644 examples/native/globtest/Buttonx/index.ts create mode 100644 examples/native/other_components/AnotherButton/AnotherButton.stories.tsx rename examples/native/{globtest/Buttonx/Buttonx.tsx => other_components/AnotherButton/AnotherButton.tsx} (100%) create mode 100644 examples/native/other_components/AnotherButton/index.ts diff --git a/addons/ondevice-actions/package.json b/addons/ondevice-actions/package.json index b992d809a8..d5ffe1681c 100644 --- a/addons/ondevice-actions/package.json +++ b/addons/ondevice-actions/package.json @@ -26,13 +26,13 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.0.28", - "@storybook/core-events": "6.0.28", + "@storybook/addons": "6.3.0-alpha.33", + "@storybook/core-events": "6.3.0-alpha.33", "core-js": "^3.0.1", "fast-deep-equal": "^2.0.1" }, "devDependencies": { - "@storybook/addon-actions": "6.0.28" + "@storybook/addon-actions": "6.3.0-alpha.33" }, "peerDependencies": { "@storybook/addon-actions": "*", diff --git a/addons/ondevice-backgrounds/package.json b/addons/ondevice-backgrounds/package.json index 1e4c91655d..db27f1eaee 100644 --- a/addons/ondevice-backgrounds/package.json +++ b/addons/ondevice-backgrounds/package.json @@ -31,9 +31,9 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.0.28", - "@storybook/api": "6.0.28", - "@storybook/client-api": "6.0.28", + "@storybook/addons": "6.3.0-alpha.33", + "@storybook/api": "6.3.0-alpha.33", + "@storybook/client-api": "6.3.0-alpha.33", "core-js": "^3.0.1", "prop-types": "^15.7.2" }, diff --git a/addons/ondevice-knobs/package.json b/addons/ondevice-knobs/package.json index b3185177c7..a7baeedfda 100644 --- a/addons/ondevice-knobs/package.json +++ b/addons/ondevice-knobs/package.json @@ -28,8 +28,8 @@ }, "dependencies": { "@emotion/native": "^10.0.14", - "@storybook/addons": "6.0.28", - "@storybook/core-events": "6.0.28", + "@storybook/addons": "6.3.0-alpha.33", + "@storybook/core-events": "6.3.0-alpha.33", "core-js": "^3.0.1", "deep-equal": "^1.0.1", "prop-types": "^15.7.2", @@ -38,10 +38,10 @@ "tinycolor2": "^1.4.1" }, "devDependencies": { - "@storybook/addon-knobs": "6.0.28" + "@storybook/addon-knobs": "6.3.0-alpha.21" }, "peerDependencies": { - "@storybook/addon-knobs": "6.0.28", + "@storybook/addon-knobs": "^6", "react": "*", "react-native": "*" }, diff --git a/addons/ondevice-notes/package.json b/addons/ondevice-notes/package.json index 5b423f56f9..a8603de527 100644 --- a/addons/ondevice-notes/package.json +++ b/addons/ondevice-notes/package.json @@ -28,11 +28,11 @@ }, "dependencies": { "@emotion/core": "^10.0.20", - "@storybook/addons": "6.0.28", - "@storybook/api": "6.0.28", - "@storybook/client-api": "6.0.28", - "@storybook/client-logger": "6.0.28", - "@storybook/core-events": "6.0.28", + "@storybook/addons": "6.3.0-alpha.33", + "@storybook/api": "6.3.0-alpha.33", + "@storybook/client-api": "6.3.0-alpha.33", + "@storybook/client-logger": "6.3.0-alpha.33", + "@storybook/core-events": "6.3.0-alpha.33", "core-js": "^3.0.1", "prop-types": "^15.7.2", "react-native-simple-markdown": "^1.1.0" diff --git a/app/react-native-server/package.json b/app/react-native-server/package.json index 4a2f682566..b0ee98380a 100644 --- a/app/react-native-server/package.json +++ b/app/react-native-server/package.json @@ -31,12 +31,12 @@ "prepare": "node ../../scripts/prepare.js" }, "dependencies": { - "@storybook/addons": "6.0.28", - "@storybook/api": "6.0.28", - "@storybook/channel-websocket": "6.0.28", - "@storybook/core": "6.0.28", - "@storybook/core-events": "6.0.28", - "@storybook/ui": "6.0.28", + "@storybook/addons": "6.3.0-alpha.33", + "@storybook/api": "6.3.0-alpha.33", + "@storybook/channel-websocket": "6.3.0-alpha.33", + "@storybook/core": "6.3.0-alpha.33", + "@storybook/core-events": "6.3.0-alpha.33", + "@storybook/ui": "6.3.0-alpha.33", "commander": "^4.0.1", "core-js": "^3.0.1", "global": "^4.3.2", diff --git a/app/react-native-server/src/client/manager/provider.js b/app/react-native-server/src/client/manager/provider.js index 4d54264b5d..bc05b6d819 100644 --- a/app/react-native-server/src/client/manager/provider.js +++ b/app/react-native-server/src/client/manager/provider.js @@ -2,7 +2,7 @@ import React from 'react'; import { Consumer } from '@storybook/api'; import { Provider } from '@storybook/ui'; import createChannel from '@storybook/channel-websocket'; -import addons from '@storybook/addons'; +import { addons } from '@storybook/addons'; import Events from '@storybook/core-events'; import uuid from 'uuid'; import PreviewHelp from './components/PreviewHelp'; diff --git a/app/react-native/babel.js b/app/react-native/babel.js deleted file mode 100644 index 3d02fa4948..0000000000 --- a/app/react-native/babel.js +++ /dev/null @@ -1,26 +0,0 @@ -/* eslint-disable import/no-dynamic-require */ -/* eslint-disable global-require */ -import preval from 'preval.macro'; - -export const stories = preval` -const path = require("path") -console.log("preval") -const cwd = process.cwd() -const {stories} = require(path.join(cwd, "/.storybook/main.js")) -const fs = require("fs") -fs.writeFileSync(path.join(cwd, "/storybook.requires.js"), "") - -const fileContent = stories.map((story)=>{ - return "require('" + story + "')" -}).join(";") - -fs.writeFileSync(path.join(cwd, "/storybook.requires.js"), fileContent,{encoding:'utf8',flag:'w'}) - -module.exports = {default: ""} - -`; - -// console.log(stories); -// stories.forEach((story) => { -// require(story); -// }); diff --git a/app/react-native/package.json b/app/react-native/package.json index 0c5856fd65..bb9344fccf 100644 --- a/app/react-native/package.json +++ b/app/react-native/package.json @@ -27,16 +27,16 @@ "babel.js" ], "scripts": { - "prepare": "node ../../scripts/prepare.js" + "prepare": "tsc" }, "dependencies": { "@emotion/core": "^10.0.20", "@emotion/native": "^10.0.14", - "@storybook/addons": "6.0.28", - "@storybook/channel-websocket": "6.0.28", - "@storybook/channels": "6.0.28", - "@storybook/client-api": "6.0.28", - "@storybook/core-events": "6.0.28", + "@storybook/addons": "6.3.0-alpha.33", + "@storybook/channel-websocket": "6.3.0-alpha.33", + "@storybook/channels": "6.3.0-alpha.33", + "@storybook/client-api": "6.3.0-alpha.33", + "@storybook/core-events": "6.3.0-alpha.33", "chokidar": "^3.4.3", "core-js": "^3.0.1", "emotion-theming": "^10.0.19", diff --git a/app/react-native/src/preview/Preview.tsx b/app/react-native/src/preview/Preview.tsx index 672d9d4217..fffbcfac06 100644 --- a/app/react-native/src/preview/Preview.tsx +++ b/app/react-native/src/preview/Preview.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { ThemeProvider } from 'emotion-theming'; -import addons from '@storybook/addons'; +import { addons } from '@storybook/addons'; import Events from '@storybook/core-events'; import Channel from '@storybook/channels'; import { StoryStore, ClientApi } from '@storybook/client-api'; @@ -75,10 +75,12 @@ export default class Preview { if (modules && modules.length > 0) { modules.forEach((m) => { const { default: meta, ...namedExports } = m; - const kind = this._clientApi.storiesOf(meta.title, m); - Object.entries(namedExports).forEach(([name, storyFn], i) => { - kind.add(name, storyFn as any); - }); + if (meta) { + const kind = this._clientApi.storiesOf(meta.title, m); + Object.entries(namedExports).forEach(([name, storyFn], i) => { + kind.add(name, storyFn as any); + }); + } }); } }; @@ -101,7 +103,7 @@ export default class Preview { this._asyncStorage = params.asyncStorage; } - this._channel.on(Events.SET_CURRENT_STORY, (d) => { + this._channel.on(Events.SET_CURRENT_STORY, (d: { storyId: string }) => { this._selectStoryEvent(d); }); diff --git a/app/react-native/src/preview/components/OnDeviceUI/OnDeviceUI.tsx b/app/react-native/src/preview/components/OnDeviceUI/OnDeviceUI.tsx index 88edd35673..759a35b9a9 100644 --- a/app/react-native/src/preview/components/OnDeviceUI/OnDeviceUI.tsx +++ b/app/react-native/src/preview/components/OnDeviceUI/OnDeviceUI.tsx @@ -1,5 +1,5 @@ import styled from '@emotion/native'; -import addons from '@storybook/addons'; +import { addons } from '@storybook/addons'; import Channel from '@storybook/channels'; import { StoryStore } from '@storybook/client-api'; import React, { PureComponent } from 'react'; diff --git a/app/react-native/src/preview/components/OnDeviceUI/addons/Addons.tsx b/app/react-native/src/preview/components/OnDeviceUI/addons/Addons.tsx index f6bb9fc6ab..d990f97bc3 100644 --- a/app/react-native/src/preview/components/OnDeviceUI/addons/Addons.tsx +++ b/app/react-native/src/preview/components/OnDeviceUI/addons/Addons.tsx @@ -1,7 +1,7 @@ import React, { PureComponent } from 'react'; import { SafeAreaView } from 'react-native'; import styled from '@emotion/native'; -import addons from '@storybook/addons'; +import { addons } from '@storybook/addons'; import AddonsList from './List'; import AddonWrapper from './Wrapper'; import { Label } from '../../Shared/text'; diff --git a/app/react-native/src/preview/components/StoryListView/StoryListView.tsx b/app/react-native/src/preview/components/StoryListView/StoryListView.tsx index 6a8c0648fd..5fee8cc956 100644 --- a/app/react-native/src/preview/components/StoryListView/StoryListView.tsx +++ b/app/react-native/src/preview/components/StoryListView/StoryListView.tsx @@ -1,7 +1,6 @@ import styled from '@emotion/native'; -import addons from '@storybook/addons'; -import { StoryStore } from '@storybook/client-api'; -import { StoreItem } from '@storybook/client-api/dist/types'; +import { addons } from '@storybook/addons'; +import { StoryStore, StoreItem } from '@storybook/client-api'; import Events from '@storybook/core-events'; import React, { Component, FunctionComponent } from 'react'; import { StyleSheet } from 'react-native'; diff --git a/app/react-native/src/preview/components/StoryView/StoryView.tsx b/app/react-native/src/preview/components/StoryView/StoryView.tsx index a07b077f80..558c876c7b 100644 --- a/app/react-native/src/preview/components/StoryView/StoryView.tsx +++ b/app/react-native/src/preview/components/StoryView/StoryView.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { StoreItem } from '@storybook/client-api/dist/types'; +import { StoreItem } from '@storybook/client-api'; import { Text, View, StyleSheet } from 'react-native'; interface Props { diff --git a/app/react-native/tsconfig.json b/app/react-native/tsconfig.json index 6a4f8e20e1..72b5d05182 100644 --- a/app/react-native/tsconfig.json +++ b/app/react-native/tsconfig.json @@ -1,11 +1,20 @@ { - "extends": "../../tsconfig.json", "compilerOptions": { "baseUrl": ".", + "jsx": "react-native", "rootDir": "./src", + "module": "ESNext", + "skipDefaultLibCheck": true, + "skipLibCheck": true, + "target": "ESNext", + "lib": ["ESNext"], + "allowSyntheticDefaultImports": true, "paths": { "@emotion/native": ["src/typings.d.ts"] - } + }, + "outDir": "dist/", + "moduleResolution": "node", + "declaration": true }, "include": ["src/**/*"], "exclude": ["src/__tests__/**/*"] diff --git a/examples/native/.storybook/main.js b/examples/native/.storybook/main.js index e304fb68b0..5017e65af3 100644 --- a/examples/native/.storybook/main.js +++ b/examples/native/.storybook/main.js @@ -1,4 +1,6 @@ module.exports = { - //stories: ['./components/*/*.stories.?(ts|tsx|js|jsx)', './globtest/Buttonx/Buttonx.stories.tsx'], - stories: ['./components/Button/Button.stories.tsx'], + stories: [ + './components/*/*.stories.?(ts|tsx|js|jsx)', + './other_components/AnotherButton/AnotherButton.stories.tsx', + ], }; diff --git a/examples/native/components/Button1/Button.stories.tsx b/examples/native/components/Button1/Button.stories.tsx index df1378c2c5..3aae17df07 100644 --- a/examples/native/components/Button1/Button.stories.tsx +++ b/examples/native/components/Button1/Button.stories.tsx @@ -1,7 +1,22 @@ -import { storiesOf } from '@storybook/react-native'; import React from 'react'; +import { storiesOf } from '@storybook/react-native'; import { Button } from './Button'; -storiesOf('button2', module) - .add('example2', () =>