Is it possible to use Storybook 8?

[djMax]

I have a use case that will reside in the same repo as a web component library that uses Storybook 8. I tried putting RN storybook in a subdirectory, but I'm unable to "bust out" of that subdirectory for imports for some reason. BUT, is it even possible to put storybook/react-native on top of a storybook 8 set of core modules?

[dannyhw]

@djMax storybook 8 for react native is still in alpha

[djMax]

Any way for me to get a look at that? I can't back off on sb8 web because there's just too much infra, but the rn bits are from 0, so I could definitely start simple there.

[dannyhw]

Its here
#538

[trajano]

Just attempted to do an upgrade. major failure though but then I have a monorepo running expo so it may not have been a tested configuration. Right now I am getting

Unable to resolve "@storybook/core/manager-api" from "....\node_modules@storybook\react-native\dist\index.js"

Which doesn't really make sense yet since I thought it was "@storybook/manager-api"

[dannyhw]

Only theming is possible currently , are you looking to replace the logo/name? Open to suggestions/prs for that.

[trajano]

The Theme object has brand.title but doesn't seem to work. As far as metro and TS support feel free to gank withStoryBook.d.ts to provide the necessary typings.

[dannyhw]

the theme is just copied from the web theme so thats something I missed when implementing I guess

[trajano]

I just checked that the withStorybook.d.ts just needs to remove the declare module declaration. I just created a patch for myself which incorporates your documentation in the README.

[trajano]

Only theming is possible currently , are you looking to replace the logo/name? Open to suggestions/prs for that.

The Logo and DarkLogo are embedded in the code here

https://github.com/storybookjs/react-native/blob/6f62dd342dd4eeba6eda94c3deb88029599d5990/packages/react-native-ui/src/Layout.tsx#L77C1-L81C19

and

react-native/packages/react-native-ui/src/Layout.tsx

Lines 140 to 144 in 6f62dd3

	{theme.base === 'light' ? (
	<Logo height={25} width={125} />
	) : (
	<DarkLogo height={25} width={125} />
	)}

The logo includes the storybook text. To get around this that segment of the code needs to read from brand and assemble as needed.

I think the way to handle this is to extract a new component to provide the Brand data something along the lines of

const BrandLogo = (theme: ThemeVars) => {
  const openBrandUrl = useCallback(..., [theme]);
  const brandTitleStyle= useMemo(()=> {
      return [ styles.brandTitle, { color: theme.??? } ]
    }, [theme]);
  const imageSource =  useMemo<ImageSourcePropType|undefined>(()=> {
     if (theme.imageSource) { return theme.imageSource }
     else if (theme.image) { return { uri: image } }
     else return undefined;
    }, [theme]);
  if (!theme.brand) {
    return {theme.base === 'light' ? (
                  <Logo height={25} width={125} />
                ) : (
                  <DarkLogo height={25} width={125} />
                )}
  } else {
    return  <Pressable onPress={openBrandUrl}>
         <View style={styles.brandLogo}>
         <Image source={imageSource}> /// how to handle if image is missing
          <Text style={brandTitleStyle}>{theme.brandTitle}</Text> /// how to handle if text is missing
      </View>
  }
}
const styles = StyleSheet.create({
  brandLogo: {
    width: 125,
    height: 25,
    flexDirection: row
  }, brandTitle:{
???
  }
})

In addition brand.image needs to support something aside from string|null but rather ImageSourcePropType which means image cannot be reasonably used, so the brand typing also needs to be augmented to add imageSource: ImageSourcePropType and use that. image would be

[dannyhw]

It is now possible, please check the migration docs https://github.com/storybookjs/react-native/blob/next/MIGRATION.md#from-version-76x-to-83x