storybook ignores my decorators #383

Michael-Ivlev · 2022-10-06T10:38:07Z

Describe the bug
So I tried to give a styled component theme provider for all my storybooks, but somehow storybook ignores my decorators. if I warp my story with the theme provider everything works. I use react-native v0.70.1 with NX and storybook/react-native v6.0.1-beta.5

To Reproduce
Add a decorator to your storybook

Expected behavior
The Story should get a theme provider

Code snippets

// preview.jsx
import * as React from ‘react’;
import { theme } from ‘@ui’;
import { ThemeProvider } from ‘styled-components/native’;
const themeDecorator = storyFn => (
 <ThemeProvider theme={theme}>{storyFn()}</ThemeProvider>
);
export const decorators = [themeDecorator];

// test.tsx
import React from 'react';
import { View } from 'react-native';
import styled from 'styled-components/native';

const UiTest = () => {
  return (
    <View>
      <Test>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</Test>
    </View>
  );
};

const Test = styled.Text`
  color: ${({ theme }) => theme.colors.text.orange};
`;

export default UiTest;

// test.stories.tsx
import { storiesOf } from '@storybook/react-native';
import { ThemeProvider } from 'styled-components/native';
import UiTest from './test';
import { theme } from '../../constants/theme';

const props = {};

storiesOf('UiTest', module).add('Primary', () => (
    <UiTest {...props} />
));

dannyhw · 2022-10-06T12:03:57Z

On the beta please avoid using storiesOf where possible and use CSF. I'm not sure but I think it might be related to that.

Ideally of course storiesof will work but I would try to avoid adding new stories with the old syntax anyway since its deprecated.

dannyhw · 2022-10-06T12:06:52Z

Also can you try v6.0.1-beta.8?

Michael-Ivlev · 2022-10-06T12:56:36Z

Also can you try v6.0.1-beta.8?

when I try to use v6.0.1-beta.8 I get this
even after I add react-navigation and react-native-safe-area-context

I've tried to use CSF the storybook ignores it and doesn't render it.

dannyhw · 2022-10-06T16:58:49Z

@Michael-Ivlev after adding them did you run pod install? looks like its missing on the native side.

Also react-navigation shouldn't be needed for storybook

Michael-Ivlev · 2022-10-06T18:47:16Z

@Michael-Ivlev after adding them did you run pod install? looks like its missing on the native side.

Also react-navigation shouldn't be needed for storybook

I rebuild the app in nx it working on v6.0.1-beta.7 and v6.0.1-beta.5 without this error, but still without decorators

dannyhw · 2022-10-06T19:22:53Z

@Michael-Ivlev Can you provide a reproduction of the issue so I can debug it? There shouldn't be any issue with decorators not being applied.

Michael-Ivlev · 2022-10-07T09:36:24Z

@Michael-Ivlev Can you provide a reproduction of the issue so I can debug it? There shouldn't be any issue with decorators not being applied.

Reproduction steps:

Create an NX project and select react native.
Make sure you installed the NX control panel for vs code.
Generate storybook configuration using the control panel.
Build the app using run ios and your project.
When the app is built start metro and open the app.
Open the ios simulator debug menu.

a guide that can help: https://blog.nrwl.io/use-storybook-with-nx-react-native-2ddd8c010eda
When opening storybook:

dannyhw · 2022-10-07T10:05:32Z

@Michael-Ivlev thanks for providing the steps, however if you could provide a repository with those already completed it would be easier for me. I'll try to look during the weekend.

Also the error in the screenshot here is solved by running pod install.

Michael-Ivlev · 2022-10-09T15:44:22Z

@Michael-Ivlev thanks for providing the steps, however, if you could provide a repository with those already completed it would be easier for me. I'll try to look during the weekend.

Also the error in the screenshot here is solved by running pod install.

After some work, I've found that some dependencies were on older versions, so I updated them and now addDecorator inside the story works, but not in the global decorator. I've tried to use CFS but without success.

This is my project:
https://github.com/Michael-Ivlev/storybook-issue/blob/main/apps/mobile/src/components/testStory/TestStory.stories.tsx

dannyhw · 2022-10-10T09:46:13Z

@Michael-Ivlev in v6.0.1-beta.7 you need to use preview.js and not .jsx however it was changed in v6.0.1-beta.8 so that might be why

Michael-Ivlev · 2022-10-11T07:02:35Z

@Michael-Ivlev in v6.0.1-beta.7 you need to use preview.js and not .jsx however it was changed in v6.0.1-beta.8 so that might be why

updated the version to v6.0.1-beta.8 without any result in global theme provider, and CSF components do not render.
https://github.com/Michael-Ivlev/storybook-issue/blob/main/apps/mobile/.storybook/preview.js

dannyhw · 2022-10-12T18:48:01Z

@Michael-Ivlev hey sorry been super busy, will try to look at this soon might end up being on the weekend. Thanks for the detailed information 👍 .

mtzfactory · 2022-10-16T08:44:53Z

I'm having the same issue as @Michael-Ivlev, I just created a new project from scratch and it fails with the same problems, first it doesn't find the react-native-safe-area-context dependency, once it's installed it fails with the following error:

ERROR  Invariant Violation: requireNativeComponent: "RNCSafeAreaProvider" was not found in the UIManager.
This error is located at:
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider
    in Unknown (created by ToggleStorybook)
    in ToggleStorybook (created by _default)
    in _default
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in MobileCore(RootComponent)

This is the Nx packages used:

❯ npx nx report

 >  NX   Report complete - copy this into the issue template

   Node : 16.17.1
   OS   : darwin arm64
   yarn : 1.22.19

   nx : 15.0.0
   @nrwl/angular : Not Found
   @nrwl/cypress : 15.0.0
   @nrwl/detox : 15.0.0
   @nrwl/devkit : 15.0.0
   @nrwl/esbuild : Not Found
   @nrwl/eslint-plugin-nx : 15.0.0
   @nrwl/expo : Not Found
   @nrwl/express : Not Found
   @nrwl/jest : 15.0.0
   @nrwl/js : 15.0.0
   @nrwl/linter : 15.0.0
   @nrwl/nest : Not Found
   @nrwl/next : Not Found
   @nrwl/node : Not Found
   @nrwl/nx-cloud : Not Found
   @nrwl/nx-plugin : Not Found
   @nrwl/react : 15.0.0
   @nrwl/react-native : 15.0.0
   @nrwl/rollup : 15.0.0
   @nrwl/schematics : Not Found
   @nrwl/storybook : 15.0.0
   @nrwl/web : 15.0.0
   @nrwl/webpack : 15.0.0
   @nrwl/workspace : 15.0.0
   typescript : 4.8.4
   ---------------------------------------
   Local workspace plugins:
   ---------------------------------------
   Community plugins:

Project dependencies:

{
  "@nrwl/cli": "15.0.0",
  "@nrwl/detox": "15.0.0",
  "@nrwl/eslint-plugin-nx": "15.0.0",
  "@nrwl/jest": "15.0.0",
  "@nrwl/linter": "15.0.0",
  "@nrwl/react-native": "15.0.0",
  "@nrwl/storybook": "15.0.0",
  "@nrwl/web": "15.0.0",
  "@nrwl/workspace": "15.0.0",
  "@react-native-async-storage/async-storage": "1.17.10",
  "@react-native-community/cli": "9.1.1",
  "@react-native-community/cli-platform-android": "9.1.0",
  "@react-native-community/cli-platform-ios": "9.1.0",
  "@storybook/addon-essentials": "~6.5.9",
  "@storybook/addon-ondevice-actions": "^6.0.1-beta.5",
  "@storybook/addon-ondevice-backgrounds": "^6.0.1-beta.5",
  "@storybook/addon-ondevice-controls": "^6.0.1-beta.5",
  "@storybook/addon-ondevice-notes": "^6.0.1-beta.5",
  "@storybook/core-server": "~6.5.9",
  "@storybook/react-native": "^6.0.1-beta.5",
  "@testing-library/jest-dom": "5.16.5",
  "@testing-library/jest-native": "4.0.13",
  "@testing-library/react-native": "11.2.0",
  "@types/jest": "28.1.1",
  "@types/node": "16.11.7",
  "@types/react": "18.0.20",
  "@types/react-native": "0.70.4",
  "@typescript-eslint/eslint-plugin": "^5.36.1",
  "@typescript-eslint/parser": "^5.36.1",
  "babel-jest": "28.1.1",
  "detox": "19.12.5",
  "eslint": "~8.15.0",
  "eslint-config-prettier": "8.1.0",
  "eslint-plugin-import": "2.26.0",
  "eslint-plugin-jsx-a11y": "6.6.1",
  "eslint-plugin-react": "7.31.8",
  "eslint-plugin-react-hooks": "4.6.0",
  "jest": "28.1.1",
  "jest-circus": "28.1.1",
  "jest-environment-jsdom": "28.1.1",
  "jest-react-native": "18.0.0",
  "metro": "0.72.3",
  "metro-babel-register": "0.72.3",
  "metro-react-native-babel-preset": "0.72.3",
  "metro-react-native-babel-transformer": "0.72.3",
  "metro-resolver": "0.72.3",
  "nx": "15.0.0",
  "prettier": "^2.6.2",
  "react-native-config": "1.4.6",
  "react-native-safe-area-context": "^4.4.1",
  "react-native-storybook-loader": "^2.0.5",
  "react-native-svg": "13.2.0",
  "react-native-svg-transformer": "1.0.0",
  "react-test-renderer": "18.2.0",
  "ts-jest": "28.0.5",
  "ts-node": "10.9.1",
  "typescript": "~4.8.2"
}

dannyhw · 2022-10-17T09:51:42Z

@mtzfactory please make sure you run pod install

Still need to check this, sorry for the delay

dannyhw · 2022-10-18T11:40:03Z

I've just checked the latest version and as long as you properly install the dependencies (Pods and npm) there shouldn't be any issue with 6.0.1-beta.8. If your NX setup is not installing pods then thats something that needs to be resolved.

FYI
"RNCSafeAreaProvider" was not found in the UIManager. is a sign that you didn't install the pods since its looking for the native dependency.

dannyhw · 2022-10-18T11:41:19Z

regarding decorators I'll look at that next

diginikkari · 2022-10-20T11:54:45Z

@Michael-Ivlev in v6.0.1-beta.7 you need to use preview.js and not .jsx however it was changed in v6.0.1-beta.8 so that might be why

updated the version to v6.0.1-beta.8 without any result in global theme provider, and CSF components do not render. https://github.com/Michael-Ivlev/storybook-issue/blob/main/apps/mobile/.storybook/preview.js

To use CSF with NX and React Native you should use not yet released version of react-native-storybook-loader.

package.json:

"devDependencies": {
...
"react-native-storybook-loader": "https://github.com/elderfo/react-native-storybook-loader",

After updating your react-native-storybook-loader package. Update stories to be loaded by: nx storybook your-lib-or-app

Then in your your app change `storybook.ts' to use modules instead of loadStories:

import { modules } from '../../../../../.storybook/story-loader';

configure(() => modules, module, false);

edit: this doesn't solve the decorator issue. Global decorators are not loaded even when the stories are in CSF.

dannyhw · 2022-11-02T10:07:04Z

Im not sure about this unreleased loader thing, in the v6 beta there is a built in story loader so it would surely make mor sense to use that?

dannyhw · 2022-11-02T10:08:11Z

Please try the latest version of the beta, a lot has been updated.

diginikkari · 2022-11-03T10:12:48Z

I tested beta.6 and with some tinkering I was able to get most of it working. One issue was that sb-rn-get-stories script didn't support main.ts file only 'main.js'. I think that there could be easy fix for it by using loadMainConfig from @storybook/core-common to load config (it works for both ts and js). Also watcher seems to be hard coded to use main.js and preview.js -files.

Anyway there are some work to be done in NX to support new v6 rn storybook though. Current version is not using generated storybook.requires.js -file instead it is using story-loader which is only loading stories in the old storiesOf format and is not adding decorators or addons.

dannyhw · 2022-11-03T12:19:14Z

@diginikkari Yes in my point of view NX needs to change to use the new built in loading. Not only that but storiesOf is deprecated and should be avoided. Decorators are likely not working specifically for that reason since they aren't following the intended usage.

Also now the latest beta is 6.0.1-beta.9.

I will look into the core-common stuff you mentioned.

dannyhw · 2022-11-03T12:46:45Z

#391 should resolve the main.ts thing

crukundo mentioned this issue Feb 2, 2023

"RNCSafeAreaProvider" was not found in the UIManager.] #422

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

storybook ignores my decorators #383

storybook ignores my decorators #383

Michael-Ivlev commented Oct 6, 2022 •

edited

dannyhw commented Oct 6, 2022 •

edited

dannyhw commented Oct 6, 2022

Michael-Ivlev commented Oct 6, 2022 •

edited

dannyhw commented Oct 6, 2022 •

edited

Michael-Ivlev commented Oct 6, 2022 •

edited

dannyhw commented Oct 6, 2022

Michael-Ivlev commented Oct 7, 2022

dannyhw commented Oct 7, 2022 •

edited

Michael-Ivlev commented Oct 9, 2022

dannyhw commented Oct 10, 2022

Michael-Ivlev commented Oct 11, 2022 •

edited

dannyhw commented Oct 12, 2022 •

edited

mtzfactory commented Oct 16, 2022

dannyhw commented Oct 17, 2022 •

edited

dannyhw commented Oct 18, 2022

dannyhw commented Oct 18, 2022

diginikkari commented Oct 20, 2022 •

edited

dannyhw commented Nov 2, 2022 •

edited

dannyhw commented Nov 2, 2022

diginikkari commented Nov 3, 2022

dannyhw commented Nov 3, 2022

dannyhw commented Nov 3, 2022

storybook ignores my decorators #383

storybook ignores my decorators #383

Comments

Michael-Ivlev commented Oct 6, 2022 • edited

dannyhw commented Oct 6, 2022 • edited

dannyhw commented Oct 6, 2022

Michael-Ivlev commented Oct 6, 2022 • edited

dannyhw commented Oct 6, 2022 • edited

Michael-Ivlev commented Oct 6, 2022 • edited

dannyhw commented Oct 6, 2022

Michael-Ivlev commented Oct 7, 2022

dannyhw commented Oct 7, 2022 • edited

Michael-Ivlev commented Oct 9, 2022

dannyhw commented Oct 10, 2022

Michael-Ivlev commented Oct 11, 2022 • edited

dannyhw commented Oct 12, 2022 • edited

mtzfactory commented Oct 16, 2022

dannyhw commented Oct 17, 2022 • edited

dannyhw commented Oct 18, 2022

dannyhw commented Oct 18, 2022

diginikkari commented Oct 20, 2022 • edited

dannyhw commented Nov 2, 2022 • edited

dannyhw commented Nov 2, 2022

diginikkari commented Nov 3, 2022

dannyhw commented Nov 3, 2022

dannyhw commented Nov 3, 2022

Michael-Ivlev commented Oct 6, 2022 •

edited

dannyhw commented Oct 6, 2022 •

edited

Michael-Ivlev commented Oct 6, 2022 •

edited

dannyhw commented Oct 6, 2022 •

edited

Michael-Ivlev commented Oct 6, 2022 •

edited

dannyhw commented Oct 7, 2022 •

edited

Michael-Ivlev commented Oct 11, 2022 •

edited

dannyhw commented Oct 12, 2022 •

edited

dannyhw commented Oct 17, 2022 •

edited

diginikkari commented Oct 20, 2022 •

edited

dannyhw commented Nov 2, 2022 •

edited