[request] support CSF 3.0 in 6.0 release

[walkerdb]

Is your feature request related to a problem? Please describe.
Attempting to render a story using CSF 3.0 format on beta 8 results in a redbox error

// CSF 3.0 story

export const Neutral: ComponentStoryObj<typeof InlineAlert> = {};

# failure below

[Thu Oct 20 2022 14:57:25.965]  ERROR    TypeError: original is not a function. (In 'original(mapped.args, mapped)', 'original' is an instance of Object)

This error is located at:
    in StoryView (created by OnDeviceUI)
    in RCTView (at View.js:34)
    in View (created by Context.Consumer)
    in emotion(View) (created by OnDeviceUI)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (created by OnDeviceUI)
    in RCTView (at View.js:34)
    in View (at createAnimatedComponent.js:165)
    in AnimatedComponent (at createAnimatedComponent.js:215)
    in ForwardRef(AnimatedComponentWrapper) (created by OnDeviceUI)
    in RCTView (at View.js:34)
    in View (created by AbsolutePositionedKeyboardAwareView)
    in RCTView (at View.js:34)
    in View (created by AbsolutePositionedKeyboardAwareView)
    in AbsolutePositionedKeyboardAwareView (created by OnDeviceUI)
    in RCTView (at View.js:34)
    in View (at KeyboardAvoidingView.js:204)
    in KeyboardAvoidingView (created by OnDeviceUI)
    in RCTSafeAreaView (at SafeAreaView.js:51)
    in ForwardRef(SafeAreaView) (created by OnDeviceUI)
    in OnDeviceUI
    in ThemeProvider
    in Unknown (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)

Describe the solution you'd like
Rendering stories via CSF 3.0 Just Works™

Describe alternatives you've considered
CSF 2.0 format seems to work fine.

Additional context
We may be able to help with this but we're quite low context on the internals of storybook

[dannyhw]

@walkerdb this is already almost done, soon coming with sb 6.5 compatibility

#384

[dannyhw]

@walkerdb would you be interested in trying out an experimental build with this already working?

[walkerdb]

@dannyhw yeah we'd love to give it a go! Would that just be using the #384 branch as a basis?

[dannyhw]

@walkerdb I'll make an npm version from it with canary tag and you just specify that version in package.json.

[walkerdb]

Perfect thank you!

[dannyhw]

@walkerdb the version is 6.0.1-canary.0 so if you can then give it a try and let me know if you need any assistance

[dannyhw]

@walkerdb I've just tried this out myself and it looks like there might be some issues

[dannyhw]

so I figured out what's going on, it seems like everything should work fine if you aren't using addon-react-native-web in the same project as the one where you add the new canary build. Something is clashing there for some reason.

There is also now a dependency on react-dom which hopefully won't be the case for the final version.

[dannyhw]

here's an example project on rn-cli with it working
https://github.com/dannyhw/react-native-storybook-6.5-example

[walkerdb]

aw nuts we're a react-native-web project. Can give it a go later this week and see what happens

[dannyhw]

well I'll figure out the problem when I get some time this week, I think it's probably just some version clashes or something.

[dannyhw]

@walkerdb I found the problem and it wasn't actually a problem with the web. I'll put out a 6.0.1-canary.1 soon so it can be tested.

[dannyhw]

6.0.1-canary.1 is now released, give it a try if you can

[walkerdb]

@dannyhw gave it a go, am hitting the following when I try to open our storybook app

[Mon Oct 31 2022 23:51:03.602]  ERROR    TypeError: undefined is not an object (evaluating 'document.location')
[Mon Oct 31 2022 23:51:03.602]  ERROR    Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication)
[Mon Oct 31 2022 23:51:04.629]  ERROR    Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication)

debug mode in the sim gives barely any more info than that, I'm not finding the stack trace there helpful at all:

ExceptionsManager.js:179 TypeError: Cannot read properties of undefined (reading 'location')
reactConsoleErrorHandler @ ExceptionsManager.js:179
overrideMethod @ backend.js:2082
reportException @ ExceptionsManager.js:104
handleException @ ExceptionsManager.js:171
handleError @ setUpErrorHandling.js:24
reportFatalError @ error-guard.js:49
guardedLoadModule @ require.js:204
metroRequire @ require.js:128
(anonymous) @ Text.stories.tsx:15
executeApplicationScript @ debuggerWorker.aca173c4.js:4
(anonymous) @ debuggerWorker.aca173c4.js:4

The Text.stories.tsx:15 line is just the CSF export (see below for code).

I cut the app down to just one story, rendering something directly from react-native to narrow down any issues with our code specifically. Here's current state:

// src/components/typography/src/Text.stories.tsx

import React from 'react';
import { Text } from 'react-native';
import { ComponentMeta, ComponentStoryObj } from '@storybook/react';

export default {
  title: 'INTERNAL/Typography/Text',
  component: Text,
  args: {
    children: 'The quick onyx goblin jumps over the lazy dwarf',
  },
} as ComponentMeta<typeof Text>;

export const Default: ComponentStoryObj<typeof Text> = {};

// storybook-native/main.js
module.exports = {
  stories: ['../src/components/typography/src/Text.stories.?(ts|tsx|js|jsx)'],
  addons: [],
};

// storybook-native/Storybook.tsx
import { getStorybookUI } from '@storybook/react-native';
import './storybook.requires';

const StorybookUIRoot = getStorybookUI({});

export default StorybookUIRoot;

// storybook-native/storybook.requires.js
/* do not change this file, it is auto generated by storybook. */

import {
  configure,
  addDecorator,
  addParameters,
  addArgsEnhancer,
} from "@storybook/react-native";

import { decorators, parameters } from "./preview";

if (decorators) {
  decorators.forEach((decorator) => addDecorator(decorator));
}

if (parameters) {
  addParameters(parameters);
}

const getStories = () => {
  return [require("../src/components/typography/src/Text.stories.tsx")];
};

configure(getStories, module, false);

// index.js

import { AppRegistry } from 'react-native';
import StorybookUIRoot from './storybook-native/Storybook';
import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => StorybookUIRoot);

// metro.config.js
module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false,
      },
    }),
  },
  resolver: {
    resolverMainFields: ['sbmodern', 'react-native', 'browser', 'main'],
  },
};

// babel.config.js
module.exports = {
  presets: ['module:metro-react-native-babel-preset', '@babel/preset-typescript'],
};

commands I'm running:

yarn add @storybook/[email protected]
npx storybook upgrade # get latest of storybook core, currently installs 6.5.13

yarn sb-rn-get-stories --config-path storybook-native
yarn react-native start --reset-cache --verbose

then I'm starting the app from xcode.

Some versions:

xcode: 13.4.1
[email protected]
[email protected]
[email protected]
@storybook/[email protected]
@storybook/[email protected]

Any thoughts? Also happy to provide any more info if needed.

[dannyhw]

@walkerdb i fixed this in 6.0.1-canary.3 i believe

[walkerdb]

Canary 3 works!! All of our existing storiesOf stories render, and both CSF 2 and 3 work as well.

Thank you so much!

Anything else we could test for you?

[dannyhw]

Awesome! Thanks so much for testing it. Are you using add-ons and so on? Everything working as normal?

[walkerdb]

Seeing one issue with controls -- automatic controls via typescript prop-type inference doesn't seem to be working on native, for both CSF 2 and CSF 3. I think that's unrelated to generally supporting CSF 3 though.

An example, with the following code:

/* eslint-disable import/no-default-export */
import React from 'react';
import { ComponentMeta, ComponentStoryObj } from '@storybook/react';
import { Text } from './Text';

export default {
  title: 'INTERNAL/Typography/Text',
  component: Text,
  args: {
    children: 'The quick onyx goblin jumps over the lazy dwarf',
  },
} as ComponentMeta<typeof Text>;

export const Default: ComponentStoryObj<typeof Text> = {};

storybook native	storybook web

rendered to web via react-native-web + the rnw storybook addon

[dannyhw]

Yeah it's been an issue since I added csf support, its something I have on my mind to get fixed and I know the right person to ask so there might be some progress on that front soon 🤞.

[walkerdb]

ok nice! It's not actually a huge issue for us since we largely document our design system through web, with the native storybook just being a place to validate things do work on native - generally with these canary changes we're fully up and running.

Thanks again for the help!

[dannyhw]

@walkerdb I've just published these changes to 6.0.1-beta.9 since it all seems to be working now.

[walkerdb]

going to go ahead and call this one closed since things seem to be working for us under the new beta. Thanks!

[dannyhw]

@walkerdb fyi I have some experimental changes that will allow for auto args detection when using typescript. Let me know if you want to test it out.

[walkerdb]

yeah would be happy to!

[dannyhw]

@walkerdb hey sorry it took a while to get back to you but I actually made a quick post about how to get auto args working. It should work in beta-10 https://dev.to/dannyhw/automatic-args-in-react-native-storybook-140a