fix: use modern build of storybook to fix unresolved promises and oth…

…er 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

@@ -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": "*",

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"
   },

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": "*"
   },

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"

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",

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';

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",

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);
     });
 

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';

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';

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';

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 {

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__/**/*"]

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',
+  ],
 };

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', () => <Button text="test3" onPress={() => null} />)
-  .add('example3', () => <Button text="test4" onPress={() => null} />);
+const testing = () => {
+  const timeout = new Promise((resolve) => {
+    setTimeout(() => {
+      resolve('hi');
+    }, 1000);
+  });
+  timeout
+    .then((res) => {
+      console.log(res);
+    })
+    .finally(() => {
+      console.log('resolved ');
+    });
+};
+
+storiesOf('button promise', module)
+  .add('finally', () => <Button text="Do a promise" onPress={testing} />)
+  .add('nothing', () => <Button text="test4" onPress={() => null} />);

examples/native/metro.config.js

@@ -16,4 +16,7 @@ module.exports = {
       },
     }),
   },
+  resolver: {
+    resolverMainFields: ['sbmodern', 'main'],
+  },
 };

examples/native/other_components/AnotherButton/AnotherButton.stories.tsx

@@ -0,0 +1,7 @@
+import { storiesOf } from '@storybook/react-native';
+import React from 'react';
+import { Button } from './AnotherButton';
+
+storiesOf('Another Button', module)
+  .add('another button example', () => <Button text="test" onPress={() => null} />)
+  .add('again', () => <Button text="test2" onPress={() => null} />);

examples/native/other_components/AnotherButton/index.ts

@@ -0,0 +1 @@
+export { Button } from './AnotherButton';

examples/native/package.json

@@ -27,14 +27,9 @@
     "preset": "react-native"
   },
   "dependencies": {
-    "@storybook/addon-actions": "6.0.28",
-    "@storybook/addon-knobs": "6.0.28",
-    "@storybook/addon-links": "6.0.28",
-    "@storybook/addon-ondevice-actions": "^5.3.23",
-    "@storybook/addon-ondevice-backgrounds": "^5.3.23",
-    "@storybook/addon-ondevice-knobs": "^5.3.25",
-    "@storybook/addon-ondevice-notes": "^5.3.23",
-    "@storybook/addons": "6.0.28",
+    "@storybook/addon-actions": "6.3.0-alpha.33",
+    "@storybook/addon-links": "6.3.0-alpha.33",
+    "@storybook/addons": "6.3.0-alpha.33",
     "@storybook/react-native": "5.3.25",
     "@storybook/react-native-server": "5.3.23",
     "react": "16.13.1",
@@ -59,8 +54,8 @@
     "metro-react-native-babel-preset": "^0.59.0",
     "prettier": "^2.0.5",
     "react-test-renderer": "16.13.1",
-    "ts-jest": "^26.1.4",
-    "typescript": "^3.8.3"
+    "ts-jest": "^26.5.6",
+    "typescript": "^4.2.4"
   },
   "detox": {
     "test-runner": "jest",

package.json

@@ -151,7 +151,6 @@
     "babel-plugin-emotion": "^10.0.20",
     "babel-plugin-macros": "^2.7.0",
     "babel-plugin-require-context-hook": "^1.0.0",
-    "babel-preset-vue": "^2.0.2",
     "chalk": "^3.0.0",
     "codecov": "^3.5.0",
     "codelyzer": "^5.0.0",
@@ -185,7 +184,6 @@
     "jest-jasmine2": "^24.8.0",
     "jest-matcher-utils": "^24.8.0",
     "jest-raw-loader": "^1.0.1",
-    "jest-vue-preprocessor": "^1.5.0",
     "jest-watch-typeahead": "^0.4.0",
     "lerna": "^3.19.0",
     "lint-staged": "^9.4.1",
@@ -210,7 +208,7 @@
     "trash": "^6.1.1",
     "ts-dedent": "^1.1.0",
     "ts-jest": "^24.0.2",
-    "typescript": "^3.4.0",
+    "typescript": "^4.2.4",
     "wait-on": "^3.3.0"
   },
   "engines": {