storybookjs / react-native Goto Github PK
View Code? Open in Web Editor NEW📓 Storybook for React Native!
Home Page: https://storybook.js.org
License: MIT License
📓 Storybook for React Native!
Home Page: https://storybook.js.org
License: MIT License
Describe the bug
I cannot find addon tab in @storybook/react-native-server v5.3.3.
I have been using addons well like addon-knobs in v5.3.0-alpha.45 as below.
"@storybook/addon-actions": "5.3.3",
"@storybook/addon-knobs": "5.3.3",
"@storybook/addon-links": "5.3.3",
"@storybook/addon-ondevice-actions": "5.3.3",
"@storybook/addon-ondevice-knobs": "5.3.3",
"@storybook/addons": "5.3.3",
"@storybook/react-native": "5.3.3",
"@storybook/react-native-server": "v5.3.0-alpha.45",
There is no addons tab
"@storybook/addon-actions": "5.3.3",
"@storybook/addon-knobs": "5.3.3",
"@storybook/addon-links": "5.3.3",
"@storybook/addon-ondevice-actions": "5.3.3",
"@storybook/addon-ondevice-knobs": "5.3.3",
"@storybook/addons": "5.3.3",
"@storybook/react-native": "5.3.3",
"@storybook/react-native-server": "5.3.3",
storybook/addons.js
import '@storybook/addon-actions/register'
import '@storybook/addon-links/register'
import '@storybook/addon-knobs/register'
To Reproduce
Steps to reproduce the behavior:
yarn storybook
Expected behavior
Can use Addon tab
System:
Environment Info:
System:
OS: macOS Mojave 10.14.6
CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
Binaries:
Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node
Yarn: 1.21.1 - /usr/local/bin/yarn
npm: 6.9.0 - ~/.nvm/versions/node/v10.16.0/bin/npm
Browsers:
Chrome: 79.0.3945.117
Firefox: 72.0.1
Safari: 13.0.4
npmPackages:
@storybook/addon-actions: 5.3.3 => 5.3.3
@storybook/addon-knobs: 5.3.3 => 5.3.3
@storybook/addon-links: 5.3.3 => 5.3.3
@storybook/addon-ondevice-actions: 5.3.3 => 5.3.3
@storybook/addon-ondevice-knobs: 5.3.3 => 5.3.3
@storybook/addons: 5.3.3 => 5.3.3
@storybook/react-native: 5.3.3 => 5.3.3
@storybook/react-native-server: 5.3.3 => 5.3.3
Describe the bug
Using the addon-ondevice-notes addon breaks storybook on the device. The following error is seen immediately on startup (or refresh of the simulator as the case may be):
In addition to the message about story
being null when trying to evaluate story.parameters
, I've noticed that selection
in this case is an empty object, with no storyId
.
https://github.com/storybookjs/storybook/blob/master/addons/ondevice-notes/src/components/Notes.tsx#L27
To Reproduce
Steps to reproduce the behavior:
notes
parameter to some BUT NOT ALL component stories. E.g.:storiesOf('CheckBox', module)
.addDecorator(getStory => <Container>{getStory()}</Container>)
.addParameters({ notes: 'This component is currently unused in-app.' })
.add('Unselected', () => <CheckBoxField label="Reticulate splines" />)
.add('Selected', () => <CheckBoxField label="Reticulate splines" active />);
storiesOf('UserFollowRow', module)
.addDecorator(getStory => <Container>{getStory()}</Container>)
.add('is following', () => <UserFollowRow user={MOCK_USER} isFollowing />)
.add('is not following', () => (
<UserFollowRow user={MOCK_USER} isFollowing={false} />
))
react-native start --reset-cache
.react-native run-ios
.Expected behavior
Notes show up in addons for components that have notes parameters set on their stories, and no error shows up preventing storybook from being used.
System:
Environment Info:
System:
OS: macOS 10.15.2
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Binaries:
Node: 10.16.3 - ~/.nvm/versions/node/v10.16.3/bin/node
Yarn: 1.21.1 - ~/.nvm/versions/node/v10.16.3/bin/yarn
npm: 6.13.6 - ~/.nvm/versions/node/v10.16.3/bin/npm
Browsers:
Chrome: 81.0.4044.113
Firefox: 74.0.1
Safari: 13.0.4
npmPackages:
@storybook/addon-actions: 5.3.13 => 5.3.13
@storybook/addon-links: 5.3.13 => 5.3.13
@storybook/addon-notes: 5.3.13 => 5.3.13
@storybook/addon-ondevice-notes: ^5.3.18 => 5.3.18
@storybook/addons: 5.3.13 => 5.3.13
@storybook/node-logger: 5.3.13 => 5.3.13
@storybook/react-native: 5.3.13 => 5.3.13
@storybook/react-native-server: ^5.3.11 => 5.3.18
Additional context
Within my package.json
:
"dependencies": {
...
"react": "16.12.0",
"react-native": "0.61.5",
...
},
"devDependencies": {
"@babel/core": "^7.8.4",
"@babel/plugin-transform-runtime": "^7.7.6",
"@babel/preset-env": "^7.8.4",
"@babel/preset-flow": "^7.0.0",
"@babel/runtime": "^7.8.4",
"@babel/runtime-corejs2": "^7.8.4",
"@storybook/addon-actions": "5.3.13",
"@storybook/addon-links": "5.3.13",
"@storybook/addon-notes": "5.3.13",
"@storybook/addon-ondevice-notes": "^5.3.18",
"@storybook/addons": "5.3.13",
"@storybook/node-logger": "5.3.13",
"@storybook/react-native": "5.3.13",
"@storybook/react-native-server": "^5.3.11",
"babel-core": "^7.0.0-bridge.0",
"babel-eslint": "^10.0.3",
"babel-jest": "25.1.0",
"babel-plugin-module-resolver": "4.0.0",
"babel-runtime": "^6.26.0",
"eslint": "^6.7.2",
"eslint-config-airbnb": "^18.0.1",
"eslint-import-resolver-babel-module": "5.1.2",
"eslint-plugin-flowtype": "^4.5.2",
"eslint-plugin-import": "^2.20.1",
"eslint-plugin-jest": "23.8.2",
"eslint-plugin-jsx-a11y": "6.2.3",
"eslint-plugin-prettier": "3.1.2",
"eslint-plugin-react": "^7.18.3",
"eslint-plugin-react-hooks": "2.5.1",
"flow-bin": "0.115.0",
"flow-typed": "2.6.2",
"jest": "^25.1.0",
"jest-junit": "^10.0.0",
"lint-staged": "10.0.8",
"lodash-cli": "4.17.5",
"metro-react-native-babel-preset": "^0.58.0",
"prettier": "2.0.3",
"react-dom": "16.12.0",
"react-native-checkmate": "^0.2.0",
"react-test-renderer": "^16.12.0",
"shared-git-hooks": "1.2.1"
}
Moved issue: storybook-eol/react-native-storybook#50 (comment)
Hi @macrozone
Shall we continue discussing the issue here. Thanks
Describe the bug
My stories don't appear in browser.
On (android) simulator i can see the stories
I have also tried running adb reverse tcp:7007 tcp:7007
this command and nothing happens
I even changed the port then also nothing happened
To Reproduce
Steps to reproduce the behavior:
https://github.com/alexakasanjeev/magento_react_native.git
git checkout bug/storybook-server-not-working
npm run storybook
npm start
react-native run-android
Expected behavior
It should have shown the stories on the browser
Code snippets
package.json
{
"name": "magento_react_native",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest",
"prestorybook": "rnstl",
"storybook": "start-storybook -p 7007"
},
"dependencies": {
"@react-native-community/async-storage": "^1.3.0",
"axios": "^0.18.0",
"prop-types": "^15.7.2",
"react": "16.8.3",
"react-native": "0.59.5",
"react-native-gesture-handler": "^1.1.0",
"react-native-swiper": "^1.5.14",
"react-native-vector-icons": "^6.4.1",
"react-navigation": "^3.3.2",
"react-navigation-header-buttons": "^2.2.0",
"react-redux": "7.1.0-alpha.4",
"redux": "^4.0.1",
"redux-logger": "^3.0.6",
"redux-saga": "^1.0.2"
},
"devDependencies": {
"@storybook/addon-actions": "^5.1.11",
"@storybook/react-native": "^5.1.11",
"@storybook/react-native-server": "^5.1.11",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "24.3.1",
"babel-loader": "^8.0.6",
"eslint": "^5.15.3",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.12.4",
"eslint-plugin-react-native": "^3.6.0",
"jest": "24.3.1",
"metro-react-native-babel-preset": "0.53.0",
"react-native-storybook-loader": "^1.8.0",
"react-test-renderer": "16.8.4"
},
"jest": {
"preset": "react-native"
},
"config": {
"react-native-storybook-loader": {
"searchDir": [
"./src"
],
"pattern": "**/stories.js"
}
}
}
System:
Environment Info:
System:
OS: Linux 4.15 Ubuntu 18.04.2 LTS (Bionic Beaver)
CPU: (4) x64 Intel(R) Core(TM) i5-6200U CPU @ 2.30GHz
Binaries:
Node: 10.15.3 - /usr/local/bin/node
Yarn: 1.17.3 - /usr/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
Browsers:
Chrome: 76.0.3809.87
Firefox: 68.0.1
npmPackages:
@storybook/addon-actions: ^5.1.11 => 5.1.11
@storybook/react-native: ^5.1.11 => 5.1.11
@storybook/react-native-server: ^5.1.11 => 5.1.11
npmGlobalPackages:
@storybook/cli: 5.0.11
Additional context
similar issue storybookjs/storybook#6489
Is your feature request related to a problem? Please describe.
Storysource addon is not supported on react-native
Describe the solution you'd like
Makes react-native storybook server handle the loading of source.
Are you able to assist bring the feature to reality?
yes, I developed a simple/naive npm package that do the job : react-native-storysource-transformer
Is this solution should be integrated in this project or as standalone ?
I would be happy to contribute if needed.
Describe the bug
I use StoryBook with React Native which works nicely. I can use the StoryBook web UI in the browser on my laptop to select different Stories on my device emulator. I was hoping to achieve the same with the Knobs
addon, but it doesn't really work like I expected: The knobs are only availabe on my emulator screen, but not on the web UI in my browser.
To Reproduce
Steps to reproduce the behavior:
@storybook/addon-knobs
@storybook/addon-ondevice-knobs
Expected behavior
I was expecting to find a knob-menu in the StoryBook web UI as well.
System:
Environment Info:
System:
OS: Linux 5.6 Arch Linux
CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
Binaries:
Node: 12.16.2 - ~/.asdf/installs/nodejs/12.16.2/bin/node
Yarn: 1.22.4 - /usr/bin/yarn
npm: 6.14.4 - ~/.asdf/installs/nodejs/12.16.2/bin/npm
Browsers:
Firefox: 76.0
Describe the bug
The links
addon doesn't seem to work on React Native.
Undefined is not a function (near '...api.on...')
Simply followed the instructions.
api.on is in the docs though so I'm not sure why it's not working.
https://github.com/storybookjs/storybook/blob/next/addons/links/src/manager.ts#L7
To Reproduce
React native app with storybook 5.2.0-beta.0 and @storybook/[email protected]. Adding the import to rn-addons.js is enough, it throws the error.
Expected behavior
Links 😄
System:
Describe the bug
Running start-storybook
doesn't work. Instead the process crashes and gives the following error:
/Users/loshan/Repos/{PROJECT_NAME_HERE}/node_modules/enhanced-resolve/lib/Resolver.js:254
const idxQuery = identifier.indexOf("?");
^
TypeError: identifier.indexOf is not a function
at Resolver.parse (/Users/loshan/Repos/{PROJECT_NAME_HERE}/node_modules/enhanced-resolve/lib/Resolver.js:254:31)
at resolver.getHook.tapAsync (/Users/loshan/Repos/{PROJECT_NAME_HERE}/node_modules/enhanced-resolve/lib/ParsePlugin.js:16:28)
at AsyncSeriesBailHook.eval [as callAsync] (eval at create (/Users/loshan/Repos/{PROJECT_NAME_HERE}/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:7:1)
at Resolver.doResolve (/Users/loshan/Repos/{PROJECT_NAME_HERE}/node_modules/enhanced-resolve/lib/Resolver.js:235:16)
at resolver.getHook.tapAsync (/Users/loshan/Repos/{PROJECT_NAME_HERE}/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:34:13)
at AsyncSeriesBailHook.eval [as callAsync] (eval at create (/Users/loshan/Repos/{PROJECT_NAME_HERE}/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:7:1)
at Resolver.doResolve (/Users/loshan/Repos/{PROJECT_NAME_HERE}/node_modules/enhanced-resolve/lib/Resolver.js:235:16)
at resolver.getHook.tapAsync (/Users/loshan/Repos/{PROJECT_NAME_HERE}/node_modules/enhanced-resolve/lib/AliasFieldPlugin.js:43:13)
at _next0 (eval at create (/Users/loshan/Repos/{PROJECT_NAME_HERE}/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:638:1)
at _fn0 (eval at create (/Users/loshan/Repos/{PROJECT_NAME_HERE}/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:660:1)
at resolver.getHook.tapAsync (/Users/loshan/Repos/{PROJECT_NAME_HERE}/node_modules/enhanced-resolve/lib/AliasPlugin.js:53:11)
at AsyncSeriesBailHook.eval [as callAsync] (eval at create (/Users/loshan/Repos/{PROJECT_NAME_HERE}/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:652:1)
at Resolver.doResolve (/Users/loshan/Repos/{PROJECT_NAME_HERE}/node_modules/enhanced-resolve/lib/Resolver.js:235:16)
at DescriptionFileUtils.loadDescriptionFile (/Users/loshan/Repos/{PROJECT_NAME_HERE}/node_modules/enhanced-resolve/lib/DescriptionFilePlugin.js:38:14)
at forEachBail (/Users/loshan/Repos/{PROJECT_NAME_HERE}/node_modules/enhanced-resolve/lib/DescriptionFileUtils.js:51:12)
at args (/Users/loshan/Repos/{PROJECT_NAME_HERE}/node_modules/enhanced-resolve/lib/forEachBail.js:30:14)
To Reproduce
Steps to reproduce the behavior:
$ npx -p @storybook/cli sb init --type react_native
$ npm run storybook
Expected behavior
Storybook should work.
System:
Environment Info:
System:
OS: macOS 10.14.6
CPU: (4) x64 Intel(R) Core(TM) i5-6500 CPU @ 3.20GHz
Binaries:
Node: 11.14.0 - ~/.nvm/versions/node/v11.14.0/bin/node
Yarn: 1.17.3 - ~/.nvm/versions/node/v11.14.0/bin/yarn
npm: 6.11.2 - ~/.nvm/versions/node/v11.14.0/bin/npm
Browsers:
Chrome: 76.0.3809.132
Firefox: 66.0.5
Safari: 12.1.2
npmPackages:
@storybook/addon-actions: ^5.1.11 => 5.1.11
@storybook/addon-links: ^5.1.11 => 5.1.11
@storybook/addons: ^5.1.11 => 5.1.11
@storybook/react-native: ^5.1.11 => 5.1.11
@storybook/react-native-server: ^5.1.11 => 5.1.11
npmGlobalPackages:
@storybook/cli: 5.1.11
Additional context
This is a duplicate of issue storybookjs/storybook#5223. Unfortunately that issue received no replies and was auto closed by the bot due to inactivity.
Is your feature request related to a problem? Please describe.
I'm new user of Storybook. We're using it on a React Native project. I've upgraded to the @next
version to remove a warning about AsyncStorage
per the recommendation here: https://github.com/storybookjs/storybook/issues/6078#issuecomment-549834805
Now, I see a new warning, which suggests I follow the MIGRATION.md
guide, which takes me here: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#react-native-async-storage
I see the solutions (thank you for those!), but now I'm wondering if I'm choosing the right one.
Use
null
to disable Async Storage completely.
Also wondering, "What are the benefits of using AsyncStorage within Storybook? It doesn't tell me, and I am struggling to find any documentation around this.
The only relevant info I've found is the PR which adds in the new change:
Describe the solution you'd like
I'd love to see some documentation around why, I as a developer, should use AsyncStorage with React Native Storybook.
Describe alternatives you've considered
I could just leave it as is and not say anything, but I figure I'm not the only one who may stumble into this scenario. And I like what Storybook provides for us, so I'd like to give back.
Are you able to assist bring the feature to reality?
Yes, I'd be happy to update the docs or the MIGRATION.md
.
Additional context
Add any other context or screenshots about the feature request here.
Describe the bug
The inclusion of Storybook inside a React Native app seems to remove the implementation of Promise.prototype.finally
. Causing the Promise.resolve(...).finally is not a function error
to occur.
To Reproduce
Steps to reproduce the behavior:
npx -p @storybook/cli sb init --type react_native
(no server)toString
on Promise.prototype.finally
but after importing Storybook (you have to use require
in this instance, not import
, so the ordering works for the test to see that finally
starts off being an actual function) it’s no undefined.Example repo here, https://github.com/benjaminreid/SBPromiseTest
Expected behavior
Promise.prototype.finally
to no be removed.
Screenshots
N/A
Code snippets
finally
is valid here, but after the inclusion of Storybook, it’s undefined
.
console.log('Before:', Promise.prototype.finally.toString());
const StoryBook = require('./storybook');
console.log('After:', Promise.prototype.finally);
System:
Environment Info:
System:
OS: macOS Mojave 10.14.6
CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
Binaries:
Node: 10.16.0 - /var/folders/94/btf_scw12xbdnqv5dtv2t2hr0000gn/T/fnm-shell-8148567/bin/node
Yarn: 1.17.3 - /usr/local/bin/yarn
npm: 6.9.0 - /var/folders/94/btf_scw12xbdnqv5dtv2t2hr0000gn/T/fnm-shell-8148567/bin/npm
Browsers:
Chrome: 77.0.3865.90
Firefox: 69.0.1
Safari: 13.0.2
npmPackages:
@storybook/react-native: ^5.3.0-alpha.17 => 5.3.0-alpha.17
Additional context
In my instance redux-persist
use this in their onBeforeLift
callback.
Describe the bug
I've implemented @storybook/addon-links but when I try to create link Storybook crashes with the error written as the title.
I am using Storybook 5.3.9 for ReactNative.
To Reproduce
Configure storybook as follows:
import { getStorybookUI, configure } from '@storybook/react-native';
import '@storybook/addon-links/register';
configure(() => {
require('./Stories');
}, module);
const StorybookUIRoot = getStorybookUI({ tabOpen: 0 });
export default StorybookUIRoot;
import { storiesOf } from '@storybook/react-native';
import { linkTo } from '@storybook/addon-links';
import { Button } from 'Button';
const stories = storiesOf('STORY', module);
stories.add('first', () => {
return <Button onPress={linkTo('STORY', 'second')} />;
});
stories.add('second', () => {
return <Button onPress={linkTo('STORY', 'first')} />;
});
I can see both first and second component in the side menu, but when I press the button then Storybook crashes with global._ STORYBOOK_STORY_STORE __.getSelection undefined
Expected behavior
Link to another story should work
System:
Binaries:
Node: 8.16.0 - ~/.nvm/versions/node/v8.16.0/bin/node
Yarn: 1.13.0 - /usr/local/bin/yarn
npm: 6.4.1 - ~/.nvm/versions/node/v8.16.0/bin/npm
Cant use import {useHeaderHeight} from '@react-navigation/stack'
Error: Couldn't find the header height. Are you inside a screen in Stack?
Code snippets
import React from 'react';
import {View, Image} from 'react-native';
import {useHeaderHeight} from '@react-navigation/stack';
// style
import style from './header.styles';
// assets
import NatiivoLogo from '../../../assets/images/natiivo-logo-white-a.png';
import NatiivoWord from '../../../assets/images/natiivo-word-white-a.svg';
const Header = (): React$Node => {
return (
<View style={[style.container, {height: useHeaderHeight()}]}>
<View style={[style.containerLogos, {height: useHeaderHeight()}]}>
<View style={style.wrapperLogo}>
<Image source={NatiivoLogo} style={style.natiivoLogo} />
</View>
<View style={style.wrapperWord}>
{/* $FlowExpectedError */}
<NatiivoWord height={16} width={99} />
</View>
</View>
</View>
);
};
onGestureEvent not firing within storybook on react native but is firing outside story book.
<PanGestureHandler onGestureEvent={this._onPanGestureEvent}/>
Confirmed this by extracting the component and running the same code outside of a storybook story.
Describe the bug
After upgrading to React Native 59.2, I'm no longer able to run storybook the way I did previously. Whenever I try to load my app while the storybook server is running, I get the following exception:
error: bundling failed: Error: Unable to resolve module
@babel/runtime/helpers/interopRequireDefault
from/project/mobile/storybook/index.js
: Module@babel/runtime/helpers/interopRequireDefault
does not exist in the Haste module mapThis might be related to facebook/react-native#4968
To resolve try the following:
- Clear watchman watches:
watchman watch-del-all
.- Delete the
node_modules
folder:rm -rf node_modules && npm install
.- Reset Metro Bundler cache:
rm -rf /tmp/metro-bundler-cache-*
ornpm start -- --reset-cache
.- Remove haste cache:
rm -rf /tmp/haste-map-react-native-packager-*
.
at ModuleResolver.resolveDependency (/project/mobile/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:183:15)
at ResolutionRequest.resolveDependency (/project/mobile/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18)
at DependencyGraph.resolveDependency (/project/mobile/node_modules/metro/src/node-haste/DependencyGraph.js:283:16)
at Object.resolve (/project/mobile/node_modules/metro/src/lib/transformHelpers.js:261:42)
at dependencies.map.result (/project/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:399:31)
at Array.map ()
at resolveDependencies (/project/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:396:18)
at /project/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:269:33
at Generator.next ()
at asyncGeneratorStep (/project/mobile/node_modules/metro/src/DeltaBundler/traverseDependencies.js:87:24)
To Reproduce
Steps to reproduce the behavior:
yarn storybook
where storybook is defined as "storybook start -p 7007 | yarn start --projectRoot storybook"
react-native run-ios
Expected behavior
Code snippets
If applicable, add code samples to help explain your problem.
System:
Additional context
"dependencies": {
"date-fns": "^2.0.0-alpha.25",
"date-time-format-timezone": "^1.0.21",
"es6-error": "^4.1.1",
"instabug-reactnative": "^8.1.3",
"intl": "^1.2.5",
"libphonenumber-js": "^1.4.2",
"react": "16.8.3",
"react-native": "0.59.2",
"react-native-amplitude-analytics": "^0.2.6",
"react-native-animatable": "^1.3.0",
"react-native-bottomsheet": "^1.9.3",
"react-native-calendars": "^1.21.0",
"react-native-collapsible": "^1.3.0",
"react-native-color-matrix-image-filters": "^5.0.1",
"react-native-device-info": "^0.25.1",
"react-native-firebase": "^5.1.0",
"react-native-haptic": "^1.0.1",
"react-native-image-picker": "^0.27.1",
"react-native-mail": "^3.0.7",
"react-native-navigation": "^2.16.0",
"react-native-permissions": "^1.1.1",
"react-native-section-list-get-item-layout": "^2.2.3",
"react-native-segmented-control-tab": "^3.3.1",
"react-native-sms": "^1.8.0",
"react-native-splash-screen": "^3.1.1",
"unstated": "^2.1.1"
},
"devDependencies": {
"@babel/core": "^7.0.0",
"@babel/runtime": "^7.0.0",
"@storybook/addon-actions": "^4.0.2",
"@storybook/addon-links": "^4.0.2",
"@storybook/addons": "^4.0.2",
"@storybook/react-native": "^4.0.2",
"babel-core": "^7.0.0-0",
"babel-eslint": "^10.0.1",
"babel-jest": "^23.6.0",
"babel-loader": "^8.0.4",
"colors": "^1.3.1",
"eslint": "^5.8.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-config-prettier": "^3.1.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jest": "^22.0.0",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-prettier": "^3.0.0",
"eslint-plugin-react": "^7.11.0",
"eslint-plugin-react-native": "^3.5.0",
"glob": "^7.1.2",
"jest": "^23.6.0",
"jest-fetch-mock": "^1.6.6",
"metro-react-native-babel-preset": "^0.49.0",
"prettier": "^1.15.1",
"prop-types": "^15.6.2",
"react-dom": "16.6.1",
"react-test-renderer": "16.6.1"
},
What I've already tried
@storybook/react-native
package to the latest available version, 5.1.0-alpha.17
, but still got the same error.We should move react-native and its affiliated packages to its own monorepo: https://github.com/storybookjs/react-native
We want to be able to release and version RN independently of the rest of Storybook:
@storybook/react-native
but we are unable to make those changes due to semverapp/react-native
, app/react-native-server
, and app/examples-native
to the monorepo @GongregDescribe the bug
The index.d.ts declares this type:
export declare const storiesOf: (...args: any[]) => any;
This 'breaks' code completion (in that there isnt any) and requires explicitly defining the types of the chain functions.
src/Exercises.stories.tsx:26:19 - error TS7006: Parameter 'getStory' implicitly has an 'any' type.
26 .addDecorator(getStory => <CenterView>{getStory()}</CenterView>)
~~~~~~~~
@storybook/react
is typed properly.
Long time ago when I was creating new UI for React Native my first version looked like this:
I see a benefit of having ability to display addons/navigation at the bottom of the screen.
Quite often the components are actually not that big of the size, by using panel
at the bottom we could avoid scaling preview altogether.
The panel could be dragable to increase/reduce its size.
RN on-device should match storybook web UI look and feel:
It would be awesome to have the FlowJS definitions for Storybook v.5.
Describe the bug
When I run @storybook/react-native-server
(5.3.6) I can't connect via local network e.g http://192.168.190.232:7007/
To Reproduce
I used this guide https://storybook.js.org/docs/guides/guide-react-native/
Expected behavior
I can connect via localhost and also via local ip adress. Thus I can develop in simulator but also on real device.
Screenshots
If applicable, add screenshots to help explain your problem.
Code snippets
If applicable, add code samples to help explain your problem.
System:
Please paste the results of npx -p @storybook/cli@next sb info
here.
System:
OS: macOS 10.15.2
CPU: (4) x64 Intel(R) Core(TM) i7-7567U CPU @ 3.50GHz
Binaries:
Node: 10.17.0 - /usr/local/bin/node
Yarn: 1.21.1 - /usr/local/bin/yarn
npm: 6.13.4 - /usr/local/bin/npm
Browsers:
Chrome: 79.0.3945.130
Firefox: 68.0.1
Safari: 13.0.4
npmPackages:
@storybook/addon-actions: ^5.3.6 => 5.3.6
@storybook/addon-links: ^5.3.6 => 5.3.6
@storybook/addons: ^5.3.6 => 5.3.6
@storybook/react-native: ^5.3.6 => 5.3.6
@storybook/react-native-server: ^5.3.6 => 5.3.6
Additional context
Add any other context about the problem here.
Hi ,
First of all storybook is amazing!.
I am trying to use it for building design system library for react-native.
I have installed react-native through react-native init and configured storybook through sb init
On running storybook server, i am able to view default stories on mobile device but web shows default stories but on selecting it changes in mobile and view is not there in web
Since i want to share the design stories with others and viewable on site (final deploy)
What is the general process to view react native stories on mobile(this is working fine) as well as web view as i do not find any solution 😞
I have gone through this below issues and tried configuring but does not help and i need some proper configuration even after future update of sb
Please advise on this situation.
one
two
three
Below version
"react": "16.9.0",
"react-native": "0.61.5",
"@storybook/addon-actions": "^5.2.8",
"@storybook/addon-links": "^5.2.8",
"@storybook/addons": "^5.2.8",
"@storybook/react-native": "^5.2.8",
"@storybook/react-native-server": "^5.2.8"
storybook version :- 5.2.8
When you start react-native-server, open notes tab and select a different story, storybook starts switching between old and new story back and forth.
If you have canvas open it does not happen.
Describe the bug
React Native's async storage has been deprecated. This means that when using Storybook with RN 0.59, a warning appears (see screenshot).
This is on @storybook/react-native: 4.1.14
. I'm unsure if 5.x is affected.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
A warning not to appear 🙈
System:
Additional context
I'm going to try and make a PR for this - it should be trivial to fix by moving over to the community-supported version of async storage.
Describe the bug
Changing the theme to dark with react native causes some storybook's welcome text to be unreadable...
To Reproduce
Change the theme to dark by adding this in your ./storybook/index.js
Expected behavior
Storybook server with readable text.
Code snippets
import { addParameters } from '@storybook/react-native';
import { themes } from '@storybook/theming';
addParameters({
options: {
theme: themes.dark,
},
});
System:
System:
OS: macOS 10.15.2
CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
Binaries:
Node: 12.12.0 - /usr/local/bin/node
Yarn: 1.19.1 - /usr/local/bin/yarn
npm: 6.13.6 - /usr/local/bin/npm
Browsers:
Chrome: 80.0.3987.149
Firefox: 72.0.2
Safari: 13.0.4
npmPackages:
@storybook/addon-actions: ^5.3.18 => 5.3.18
@storybook/addon-links: ^5.3.18 => 5.3.18
@storybook/addons: ^5.3.18 => 5.3.18
@storybook/react-native: ^5.3.18 => 5.3.18
@storybook/react-native-server: ^5.3.18 => 5.3.18
@storybook/theming: ^5.3.18 => 5.3.18
Additional context
Add any other context about the problem here.
Describe the bug
When running storyshots
the following error occurs. Running the storybook within the app on the device works as expected:
FAIL ./storyshots.test.ts
● Test suite failed to run
RangeError: Maximum call stack size exceeded
at Function.get [Symbol.species] (<anonymous>)
at Array.slice (<anonymous>)
at Resolver.resolveStubModuleName (node_modules/jest-resolve/build/index.js:375:49)
at Symbol (node_modules/core-js/modules/es.symbol.description.js:25:75)
at Symbol (node_modules/core-js/modules/es.symbol.description.js:25:106)
at Symbol (node_modules/core-js/modules/es.symbol.description.js:25:106)
at Symbol (node_modules/core-js/modules/es.symbol.description.js:25:106)
To Reproduce
Steps to reproduce the behavior:
@storybook/addon-storyshots
storyshots.test.ts
as per READMEyarn test
Expected behavior
Snapshots to be generated
Code snippets
storybook/index.ts
import { getStorybookUI, configure } from '@storybook/react-native';
import { loadStories } from './storyLoader';
configure(() => {
loadStories()
}, module);
configure(loadStories, module);
// Refer to https://github.com/storybooks/storybook/tree/master/app/react-native#start-command-parameters
// To find allowed options for getStorybookUI
const StorybookUIRoot = getStorybookUI({});
export default StorybookUIRoot;
storyshots.test.ts
import initStoryshots from '@storybook/addon-storyshots';
initStoryshots();
button.stories.ts
import { Button } from './Button';
import { storiesOf } from '@storybook/react-native';
storiesOf('Button', module)
.add('Default', () => (<Button title='My Button' color='#fafafa' onPress={null}></Button>
));
System:
Describe the bug
I use storybook in my RN project. I want to load my storybook only when i'm in dev mode.
To do so in my react navigation stack i do this :
const SwitchNavigator = createSwitchNavigator({
Landing: LandingScreen,
SignIn: SignInScreen,
App: DrawerNavigator,
Storybook: () => {
if (__DEV__) {
const StorybookUI = React.lazy(() => import('../storybook'));
return (
<Suspense fallback={Fragment}>
<StorybookUI />
</Suspense>
);
}
return <View />;
},
This seems to cause problems with the action addon. I've got this error
However, if in node_modules/@storybook/addon-actions/dist/preview/withActions.js at line 60, i change this :
var root = _global.document && _global.document.getElementById('root');
to this
var root = _global.document && _global.document.getElementById && _global.document.getElementById('root');
It works fine.
Thanks in advance for your help.
*
To Reproduce
Steps to reproduce the behavior:
Expected behavior
I should see my storybook
System:
System:
OS: macOS Mojave 10.14.6
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Binaries:
Node: 13.3.0 - /usr/local/bin/node
Yarn: 1.21.1 - /usr/local/bin/yarn
npm: 6.13.2 - /usr/local/bin/npm
Browsers:
Chrome: 79.0.3945.130
Safari: 13.0.5
npmPackages:
@storybook/addon-actions: ^5.2.8 => 5.3.2
@storybook/addon-knobs: ^5.2.8 => 5.3.2
@storybook/addon-links: ^5.2.8 => 5.3.2
@storybook/addon-ondevice-actions: ^5.2.8 => 5.3.2
@storybook/addon-ondevice-knobs: ^5.2.8 => 5.3.2
@storybook/addons: ^5.2.8 => 5.3.2
@storybook/react-native: ^5.3.3 => 5.3.3
@storybook/react-native-server: ^5.3.3 => 5.3.3
Additional context
Add any other context about the problem here.
It should be possible to support addons rendered in WebView. That way we could reuse addons both in web and in React Native.
I've tried to do POC for this and it seems to be possible.
But the current idea is that every addon would get a separate webview. That might bring performance issues. We need to inspect it.
Are there react-native examples with the last storybook's version?
Describe the bug
Object addon cannot be created using variable created with object(), only by direct function
To Reproduce
Try to create an addon like this:
let styleVar = object('CVStyle', {backgroundColor: 'red'}, 'GROUP-ID1');
storiesOf('ActionsScreen', module)
.addDecorator(withKnobs)
.add('default view', () => (
<CenteredView style={styleVar}>
<AppWithControllerim>
<ActionsScreen actions={testActions} >
</ActionsScreen>
<Button onPress={action('clicked-a-button')}>Click Me</Button>
</AppWithControllerim>
</CenteredView>
)
);
^ doesn't work. The knobs tab simply shows: NO KNOBS.
But this does work:
storiesOf('ActionsScreen', module)
.addDecorator(withKnobs)
.add('default view', () => (
<CenteredView style={object('CVStyle', {backgroundColor: 'red'}, 'GROUP-ID1')}>
<AppWithControllerim>
<ActionsScreen actions={testActions} >
</ActionsScreen>
<Button onPress={action('clicked-a-button')}>Click Me</Button>
</AppWithControllerim>
</CenteredView>
)
);
Expected behavior
Both cases should work the same.
Screenshots
If applicable, add screenshots to help explain your problem.
System:
Please paste the results of npx -p @storybook/cli@next sb info
here.
Environment Info:
System:
OS: macOS Mojave 10.14.6
CPU: (8) x64 Intel(R) Core(TM) i7-4980HQ CPU @ 2.80GHz
Binaries:
Node: 10.19.0 - /usr/local/bin/node
Yarn: 1.22.0 - ~/.yarn/bin/yarn
npm: 6.13.4 - /usr/local/bin/npm
Browsers:
Chrome: 81.0.4044.122
Firefox: 69.0
Safari: 12.1.2
npmPackages:
@storybook/addon-actions: ^5.3.18 => 5.3.18
@storybook/addon-knobs: ^5.3.18 => 5.3.18
@storybook/addon-notes: ^5.3.18 => 5.3.18
@storybook/addon-ondevice-actions: ^5.3.18 => 5.3.18
@storybook/addon-ondevice-knobs: ^5.3.18 => 5.3.18
@storybook/addon-ondevice-notes: ^5.3.18 => 5.3.18
@storybook/react-native: 5.3.18 => 5.3.18
@storybook/react-native-server: ^5.3.18 => 5.3.18
npmGlobalPackages:
@storybook/cli: 5.2.8
The RN code is not tested as much as it should.
We should add:
Describe the bug
Using the Notes add-on for the INITIAL Story that is loaded crashes the app and throws a JS error
Any Story selected after the initial one WILL NOT crash
To Reproduce
TypeError: Cannot read property of 'selection' of null
Expected behavior
Should see the text passed in (or auto-generated notes)
Screenshots
(with bug and workaround)
Code snippets
// rn-addons.js
import '@storybook/addon-ondevice-notes/register';
...
// someStory.js
simpleComponentsStory.add('someName', SomeComponent, { notes: 'some notes'})
System:
Nexus 5X (Android 9.+) device emulator
Dev/debugging mode
"react-native": "0.59.8"
"@storybook/addon-backgrounds": "^5.2.0-beta.17"
"@storybook/addon-knobs": "^5.2.0-beta.17"
"@storybook/addon-ondevice-backgrounds": "^5.2.0-beta.17"
"@storybook/addon-ondevice-knobs": "^5.2.0-beta.17"
"@storybook/addon-ondevice-notes": "^5.2.0-beta.17"
"@storybook/react-native": "^5.2.0-beta.17"
System:
OS: macOS 10.14.6
CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
Binaries:
Node: 8.11.2 - ~/.nvm/versions/node/v8.11.2/bin/node
Yarn: 1.17.3 - /usr/local/bin/yarn
npm: 5.6.0 - ~/.nvm/versions/node/v8.11.2/bin/npm
Browsers:
Chrome: 75.0.3770.100
Safari: 12.1.2
Additional context
No issues pre-migration on 4.1.6
Reproducible on 5.1.9
and 5.20-beta-17
What is the difference between this repo and the one at https://github.com/storybookjs/storybook/tree/master/app/react-native
?
Describe the bug
Screenshots
If applicable, add screenshots to help explain your problem.
Additional context
is there any solution?
It would help a lot to display story list as a full screen list instead of half screen. Since now the story names are sometimes too long to properly fit the sidebar.
Some people have requested functionality to display a nested tree instead of one level list (#2833). It shouldn't be too difficult to implement (I hope).
The main concern I have is that adding multiple level tree can be a performance issue in RN.
You need to setup CRNA example and try to work on App/OnDeviceUI files.
You can contact me or anyone from contributors in slack.
I'm using @storybook/react-native
and @storybook/react-native-server
and having the same issue (or at least same error message) as described here: storybookjs/storybook#6471 (comment) (ie. synthetic event is used for performance reasons error
)
@storybook/react-native
: No addons are shown on the device (under the addons
tab on iOS Simulator)@storybook/react-native-server
: Unlike @storybook/react-native
, the addons
tab displays as expected. However, when clicking a button with an action()
handler on it (eg.<Button onPress={action("clicked-text")}>
), a "synthetic event handler" error is thrown recursively.storybook/stories/index.js
)storiesOf("Button", module)
.addDecorator(getStory => <CenterView>{getStory()}</CenterView>)
.add("with text", () => (
<Button onPress={action("clicked-text")}>
<Text>Hello Button</Text>
</Button>
))
The error below recurses
Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're %s `%s` on a released/nullified synthetic event. %s. If you must keep the original synthetic event around, use event.persist(). See https://fb.me/react-event-pooling for more information., accessing the property, target, This is set to null
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:619:8 in warningWithoutStack
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:1577:10 in warn
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:1569:9 in get$$1
* [native code]:null in stringify
- node_modules/@storybook/react-native/node_modules/@storybook/channel-websocket/dist/index.js:67:46 in sendNow
- node_modules/@storybook/react-native/node_modules/@storybook/channel-websocket/dist/index.js:56:21 in send
- node_modules/@storybook/channels/dist/index.js:126:32 in handler
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:152:14 in _callTimer
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:200:17 in _callImmediatesPass
- node_modules/react-native/Libraries/Core/Timers/JSTimers.js:464:30 in callImmediates
* [native code]:null in callImmediates
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:320:6 in __callImmediates
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:135:6 in <unknown>
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:297:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:134:17 in flushedQueue
* [native code]:null in flushedQueue
* [native code]:null in callFunctionReturnFlushedQueue
@storybook/react-native-server
)@storybook/react-native
)Also, if you're wondering why I'm using
@storybook/[email protected]
instead of@storybook/[email protected]
please see this issue: storybookjs/storybook#6769
"scripts": {
"android": "expo start --android",
"build": "yarn run build:components",
"build:components": "webpack --config ./webpack.components.js",
"eject": "expo eject",
"expo": "expo start",
"ios": "expo start --ios",
"start": "npm-run-all --parallel expo storybook",
"storybook": "start-storybook -p 7007"
},
"dependencies": {
"@emotion/native": "^10.0.11",
"expo": "^32.0.0",
"native-base": "^2.12.1",
"react": "16.5.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-router": "^5.0.0"
},
"devDependencies": {
"@babel/preset-react": "^7.0.0",
"@emotion/core": "^10.0.10",
"@storybook/addon-actions": "^5.0.11",
"@storybook/addon-links": "^5.0.11",
"@storybook/addon-storysource": "^5.0.11",
"@storybook/addons": "^5.0.11",
"@storybook/react-native": "^5.0.11",
"@storybook/react-native-server": "5.1.0-alpha.7",
"babel-core": "^6.26.3",
"babel-loader": "^8.0.5",
"babel-preset-expo": "^5.0.0",
"babel-runtime": "^6.26.0",
"duplicate-package-checker-webpack-plugin": "^3.0.0",
"emotion-theming": "^10.0.10",
"npm-run-all": "^4.1.5",
"prop-types": "^15.7.2",
"react-dom": "16.5.0",
"size-plugin": "^1.2.0",
"storybook-react-router": "^1.0.5",
"webpack-cli": "^3.3.2",
"webpack-node-externals": "^1.7.2"
},
import "@storybook/addon-actions/register";
import "@storybook/addon-links/register";
import "@storybook/addon-storysource/register";
import "@storybook/addon-ondevice-actions/register";
import "@storybook/addon-ondevice-links/register";
import "@storybook/addon-ondevice-storysource/register";
Haven't found a quick fix yet (besides not using @storybook/addon-actions
/ @storybook/addon-ondevice-actions
).
I'm going to try upgrading react-dom
like suggested here:
storybookjs/storybook#6471 (comment)
I'll update if that progresses the "synthetic event" error.
Describe the bug
When running the on device storybook on react native, as soon as I select one of my stories, I get an error: TypeError: Cannot read property 'name' of undefined
.
To Reproduce
Expected behavior
Story should render as usual without errors
Screenshots
video here
Code snippets
If applicable, add code samples to help explain your problem.
System:
ondevice-knobs
, ondevice-backgrounds
and ondevice-notes
Additional context
I tried using the latest stable version as well (5.1.9), it didn't give errors but it wouldn't do anything when I clicked my stories in the navigator.
Describe the bug
When trying to install Storybook with the most recent release of Expo, the process fails at installing dependencies
with the error No matching version found for @storybook/react-native@^5.0.6
.
To Reproduce
Steps to reproduce the behavior:
expo init ProjectName
getstorybook
Expected behavior
Storybook would install properly and I would be a happy boy.
System:
Log dump
245 verbose stack @storybook/react-native: No matching version found for @storybook/react-native@^5.0.6
245 verbose stack at pickManifest (C:\Users\krist\AppData\Roaming\nvm\v11.4.0\node_modules\npm\node_modules\npm-pick-manifest\index.js:65:11)
245 verbose stack at fetchPackument.then.packument (C:\Users\krist\AppData\Roaming\nvm\v11.4.0\node_modules\npm\node_modules\pacote\lib\fetchers\registry\manifest.js:52:18)
245 verbose stack at tryCatcher (C:\Users\krist\AppData\Roaming\nvm\v11.4.0\node_modules\npm\node_modules\bluebird\js\release\util.js:16:23)
245 verbose stack at Promise._settlePromiseFromHandler (C:\Users\krist\AppData\Roaming\nvm\v11.4.0\node_modules\npm\node_modules\bluebird\js\release\promise.js:512:31)
245 verbose stack at Promise._settlePromise (C:\Users\krist\AppData\Roaming\nvm\v11.4.0\node_modules\npm\node_modules\bluebird\js\release\promise.js:569:18)
245 verbose stack at Promise._settlePromise0 (C:\Users\krist\AppData\Roaming\nvm\v11.4.0\node_modules\npm\node_modules\bluebird\js\release\promise.js:614:10)
245 verbose stack at Promise._settlePromises (C:\Users\krist\AppData\Roaming\nvm\v11.4.0\node_modules\npm\node_modules\bluebird\js\release\promise.js:693:18)
245 verbose stack at Async._drainQueue (C:\Users\krist\AppData\Roaming\nvm\v11.4.0\node_modules\npm\node_modules\bluebird\js\release\async.js:133:16)
245 verbose stack at Async._drainQueues (C:\Users\krist\AppData\Roaming\nvm\v11.4.0\node_modules\npm\node_modules\bluebird\js\release\async.js:143:10)
245 verbose stack at Immediate.Async.drainQueues [as _onImmediate] (C:\Users\krist\AppData\Roaming\nvm\v11.4.0\node_modules\npm\node_modules\bluebird\js\release\async.js:17:14)
245 verbose stack at processImmediate (timers.js:632:19)
Describe the bug
Following the release of [email protected], legacy "hot module reloading" and "live reloading" have been merged in a single new "fast refresh" mode to hot reload components (more details in this blog post).
Unfortunately, this new mode does not work with storybook as I get WARN Story with id button--default-view already exists in the store!
errors when fast refresh kicks in.
Since livereload isn't an option anymore, it makes developing components with storybook highly impractical as you don't have any refresh anymore.
To Reproduce
Steps to reproduce the behavior:
react-native init AwesomeProject --version react-native@next
Expected behavior
Working fast refresh while editing a story
System:
Environment Info:
System:
OS: macOS 10.14.5
CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
Binaries:
Node: 10.16.0 - ~/.nvm/versions/node/v10.16.0/bin/node
Yarn: 1.17.3 - /usr/local/bin/yarn
npm: 6.9.0 - ~/.nvm/versions/node/v10.16.0/bin/npm
Browsers:
Chrome: 76.0.3809.132
Firefox: 68.0.1
Safari: 12.1.1
npmPackages:
@storybook/react-native: ^5.1.11 => 5.1.11
Note that I'm using the following hack to have working hooks:
addDecorator(Story => <Story />);
To support fast refresh we need to limit storiesOf usage to a single one in a file.
We should be able to check the amount of calls by checking module.
Currently the web preview for React Native storybooks is empty, as it uses the device to display the components.
It would be interesting to embed a device directly in the storybook webpage via a tool like https://appetize.io/
Here's a demo, via Themoji/ios#12 (comment)
My only concern is https://appetize.io/pricing -- hard to tell if the free plan is a 100-minute total usage cap, such that it might not be a good fit.
Related to storybookjs/storybook#836
Describe the bug
Versions of simple-markdown
prior to 0.4.4 are vulnerable to Cross-Site Scripting. See https://www.npmjs.com/advisories/815 for more info
Describe the bug
If I run the TypeScript compiler to review the errors in my project, it reports errors from:
@storybook/addons
@storybook/client-api
@types/reach__router
The last one is used by @storybook/router
as mentioned in #8095. By using what is suggested in that issue, I can remove only one of the seventeen errors. I started with a clean build of React Native and I have no problems. Once I install the clean build of Storybook, I get the errors.
To Reproduce
npx react-native init AwesomeTSProject --template react-native-template-typescript --npm
cd AwesomeTSProject/
npx -p @storybook/cli sb init --use-npm --type react_native
npx tsc
Expected behavior
I expect the TypeScript compiler to not throw any errors.
Command Line Output
node_modules/@storybook/addons/dist/types.d.ts:1:23 - error TS2688: Cannot find type definition file for 'node'.
1 /// <reference types="node" />
~~~~
node_modules/@storybook/client-api/dist/client_api.d.ts:1:23 - error TS2688: Cannot find type definition file for 'node'.
1 /// <reference types="node" />
~~~~
node_modules/@storybook/client-api/dist/config_api.d.ts:1:23 - error TS2688: Cannot find type definition file for 'node'.
1 /// <reference types="node" />
~~~~
node_modules/@storybook/client-api/dist/story_store.d.ts:1:23 - error TS2688: Cannot find type definition file for 'lodash/common/common'.
1 /// <reference types="lodash/common/common" />
~~~~~~~~~~~~~~~~~~~~
node_modules/@storybook/client-api/dist/story_store.d.ts:2:23 - error TS2688: Cannot find type definition file for 'lodash/common/array'.
2 /// <reference types="lodash/common/array" />
~~~~~~~~~~~~~~~~~~~
node_modules/@storybook/client-api/dist/story_store.d.ts:3:23 - error TS2688: Cannot find type definition file for 'lodash/common/collection'.
3 /// <reference types="lodash/common/collection" />
~~~~~~~~~~~~~~~~~~~~~~~~
node_modules/@storybook/client-api/dist/story_store.d.ts:4:23 - error TS2688: Cannot find type definition file for 'lodash/common/date'.
4 /// <reference types="lodash/common/date" />
~~~~~~~~~~~~~~~~~~
node_modules/@storybook/client-api/dist/story_store.d.ts:5:23 - error TS2688: Cannot find type definition file for 'lodash/common/function'.
5 /// <reference types="lodash/common/function" />
~~~~~~~~~~~~~~~~~~~~~~
node_modules/@storybook/client-api/dist/story_store.d.ts:6:23 - error TS2688: Cannot find type definition file for 'lodash/common/lang'.
6 /// <reference types="lodash/common/lang" />
~~~~~~~~~~~~~~~~~~
node_modules/@storybook/client-api/dist/story_store.d.ts:7:23 - error TS2688: Cannot find type definition file for 'lodash/common/math'.
7 /// <reference types="lodash/common/math" />
~~~~~~~~~~~~~~~~~~
node_modules/@storybook/client-api/dist/story_store.d.ts:8:23 - error TS2688: Cannot find type definition file for 'lodash/common/number'.
8 /// <reference types="lodash/common/number" />
~~~~~~~~~~~~~~~~~~~~
node_modules/@storybook/client-api/dist/story_store.d.ts:9:23 - error TS2688: Cannot find type definition file for 'lodash/common/object'.
9 /// <reference types="lodash/common/object" />
~~~~~~~~~~~~~~~~~~~~
node_modules/@storybook/client-api/dist/story_store.d.ts:10:23 - error TS2688: Cannot find type definition file for 'lodash/common/seq'.
10 /// <reference types="lodash/common/seq" />
~~~~~~~~~~~~~~~~~
node_modules/@storybook/client-api/dist/story_store.d.ts:11:23 - error TS2688: Cannot find type definition file for 'lodash/common/string'.
11 /// <reference types="lodash/common/string" />
~~~~~~~~~~~~~~~~~~~~
node_modules/@storybook/client-api/dist/story_store.d.ts:12:23 - error TS2688: Cannot find type definition file for 'lodash/common/util'.
12 /// <reference types="lodash/common/util" />
~~~~~~~~~~~~~~~~~~
node_modules/@storybook/client-api/dist/story_store.d.ts:50:42 - error TS7016: Could not find a declaration file for module 'lodash'. '/Users/cjduncana/Development/personal/rngmtf/node_modules/lodash/lodash.js' implicitly has an 'any' type.
Try `npm install @types/lodash` if it exists or add a new declaration (.d.ts) file containing `declare module 'lodash';`
50 pushToManager: (() => void) & import("lodash").Cancelable;
~~~~~~~~
node_modules/@types/reach__router/index.d.ts:14:30 - error TS2304: Cannot find name 'Window'.
14 export type WindowLocation = Window['location'] & HLocation;
~~~~~~
Found 17 errors.
System:
OS: macOS Mojave 10.14.6
CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
Binaries:
Node: 11.12.0 - ~/.nvm/versions/node/v11.12.0/bin/node
Yarn: 1.17.3 - ~/.yarn/bin/yarn
npm: 6.14.4 - ~/.nvm/versions/node/v11.12.0/bin/npm
Browsers:
Chrome: 81.0.4044.122
Firefox: 70.0.1
Safari: 13.1
npmPackages:
@storybook/addon-actions: ^5.3.18 => 5.3.18
@storybook/addon-knobs: ^5.3.18 => 5.3.18
@storybook/addon-ondevice-actions: ^5.3.18 => 5.3.18
@storybook/addon-ondevice-knobs: ^5.3.18 => 5.3.18
@storybook/addons: ^5.3.18 => 5.3.18
@storybook/react-native: ^5.3.18 => 5.3.18
By using channel we simplify React tree update, since we can fetch info in the middle of the render instead of doing additional setStates.
I am using React Native Storybook and to test a custom component library. I know that the metro server doesn't support symlinking. Hence I copied the packages in the app's node_modules manually (via script).
Then I wrote a story for that component. The default demo stories are working perfectly but when I click on my custom story it cashes.
"@storybook/addon-actions": "^5.3.18",
"@storybook/addon-links": "^5.3.18",
"@storybook/addons": "^5.3.18",
"@storybook/react-native": "^5.3.18",
"@storybook/react-native-server": "^5.3.18",
The RN UI is currently build all in RN. This makes it very time-consuming.
We're for the most part unable to re-use the web-UI because it depends on loads of dependencies that are not suitable for RN. There's also the polyfill issue that's not easy to resolve.
If we want to make this easier we should consider this:
Using web-views with the manager's UI in it for rendering the explorer & addons.
Describe the bug
Getting the follow error when trying to choose a color in react native on Device knob. Works okay in Storybook Server
Invariant Violation: Element ref was specified as a string (pickerContainer) but no owner was set. This could happen for one of the following reasons:
1. You may be adding a ref to a function component
2. You may be adding a ref to a component that was not created inside a component's render method
3. You have multiple copies of React loaded
See https://fb.me/react-refs-must-have-owner for more information.
This error is located at:
in RCTView (at View.js:45)
in HoloColorPicker
in RCTView (at View.js:45)
in TouchableWithoutFeedback
in RCTView (at View.js:45)
in TouchableWithoutFeedback
in RCTView (at View.js:45)
in RCTView (at View.js:45)
in AppContainer (at Modal.js:230)
in RCTView (at View.js:45)
in RCTModalHostView (at Modal.js:238)
in Modal
in RCTView (at View.js:45)
in ColorType
in RCTView (at View.js:45)
in PropField
in RCTView (at View.js:45)
in PropForm
in RCTView (at View.js:45)
in RCTView (at View.js:45)
in Panel
in RCTView (at View.js:45)
in RCTScrollView (at ScrollView.js:977)
in ScrollView
in RCTView (at View.js:45)
in Wrapper
in RCTView (at View.js:45)
in RCTView (at View.js:45)
in Addons
in RCTView (at View.js:45)
in AnimatedComponent
in Panel
in RCTView (at View.js:45)
in RCTView (at View.js:45)
in AbsolutePositionedKeyboardAwareView
in RCTView (at View.js:45)
in KeyboardAvoidingView
in OnDeviceUI
in ThemeProvider
in StorybookRoot (at StoryBook/index.js:11)
in PageComponent
in Connect(PageComponent)
in Provider (at createPageContainer.js:307)
in Container (at renderApplication.js:34)
in RCTView (at View.js:45)
in RCTView (at View.js:45)
in AppContainer (at renderApplication.js:33)
coerceRef
ReactNativeRenderer-dev.js:9592:8
createChild
ReactNativeRenderer-dev.js:9868:35
reconcileChildrenArray
ReactNativeRenderer-dev.js:10207:10
reconcileChildren
ReactNativeRenderer-dev.js:11101:6
updateHostComponent
ReactNativeRenderer-dev.js:11662:4
performUnitOfWork
ReactNativeRenderer-dev.js:15852:21
workLoop
ReactNativeRenderer-dev.js:15892:41
renderRoot
ReactNativeRenderer-dev.js:15996:15
performWorkOnRoot
ReactNativeRenderer-dev.js:16976:17
performWork
ReactNativeRenderer-dev.js:16877:24
performSyncWork
ReactNativeRenderer-dev.js:16838:14
batchedUpdates$1
ReactNativeRenderer-dev.js:17079:21
batchedUpdates
ReactNativeRenderer-dev.js:2614:31
_receiveRootNodeIDEvent
ReactNativeRenderer-dev.js:2709:17
receiveTouches
ReactNativeRenderer-dev.js:2785:28
__callFunction
MessageQueue.js:349:47
<unknown>
MessageQueue.js:106:26
__guard
MessageQueue.js:297:10
callFunctionReturnFlushedQueue
MessageQueue.js:105:17
callFunctionReturnFlushedQueue
[native code]
To Reproduce
Steps to reproduce the behavior:
color
variable and use in your storyExpected behavior
A color picker to choose color like in Storybook server
Screenshots
Code snippets
const backgroundColor = color('Background Color', '#FFFFFF');
System:
System:
OS: macOS Mojave 10.14.6
CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
Binaries:
Node: 12.13.0 - /usr/local/bin/node
Yarn: 1.19.1 - /usr/local/bin/yarn
npm: 6.11.3 - /usr/local/bin/npm
Browsers:
Chrome: 79.0.3945.88
Firefox: 70.0.1
Safari: 12.1.2
npmPackages:
@storybook/addon-knobs: ^5.2.8 => 5.2.8
@storybook/addon-ondevice-knobs: ^5.2.8 => 5.2.8
@storybook/react-native: ^5.2.8 => 5.2.8
@storybook/react-native-server: ^5.2.8 => 5.2.8
Additional context
Add any other context about the problem here.
Describe the bug
I have run emulator and react-native-server, but I can't see my stories on the web page
Expected behavior
On web page should be my stories instead of placeholder
System:
React Native Environment Info:
System:
OS: macOS 10.14.5
CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
Memory: 77.98 MB / 16.00 GB
Shell: 5.3 - /bin/zsh
Binaries:
Node: 10.16.0 - /usr/local/bin/node
Yarn: 1.12.3 - /usr/local/bin/yarn
npm: 6.9.0 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.4, macOS 10.14, tvOS 12.4, watchOS 5.3
Android SDK:
API Levels: 23, 25, 26, 27, 28
Build Tools: 23.0.1, 25.0.3, 26.0.2, 26.0.3, 27.0.3, 28.0.2, 28.0.3
System Images: android-24 | Google Play Intel x86 Atom, android-27 | Google Play Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom_64
IDEs:
Android Studio: 3.1 AI-173.4907809
Xcode: 10.3/10G8 - /usr/bin/xcodebuild
npmPackages:
react: 16.8.3 => 16.8.3
react-native: 0.59.5 => 0.59.5
npmGlobalPackages:
react-native-cli: 2.0.1
Issue: https://github.com/storybookjs/storybook/issues/7858
Reappeared again on 5.3.9
Describe the bug
Default configuration with sb stopped working after beta.25
To Reproduce
Steps to reproduce the behavior:
npx react-native init testSB --template react-native-template-typescript
npx -p @storybook/cli sb init --type react_native
Expected behavior
Should not throw error
System:
Environment Info:
System:
OS: macOS 10.15.2
CPU: (8) x64 Intel(R) Core(TM) i7-6700K CPU @ 4.00GHz
Binaries:
Node: 10.16.3 - /var/folders/xx/4pg__j5s58585b86mzz27z540000gn/T/fnm-shell-1707442/bin/node
Yarn: 1.21.1 - ~/.yarn/bin/yarn
npm: 6.9.0 - /var/folders/xx/4pg__j5s58585b86mzz27z540000gn/T/fnm-shell-1707442/bin/npm
Browsers:
Chrome: 79.0.3945.88
Safari: 13.0.4
npmPackages:
@storybook/addon-actions: 5.3.0-beta.25 => 5.3.0-beta.25
@storybook/addon-links: 5.3.0-beta.25 => 5.3.0-beta.25
@storybook/addons: 5.3.0-beta.25 => 5.3.0-beta.25
@storybook/react-native: 5.3.0-beta.25 => 5.3.0-beta.25
@storybook/react-native-server: 5.3.0-beta.25 => 5.3.0-beta.25
Additional context
It still works after downgrade to beta.25
and it stops working after beta.26
and up.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.