[v3] Storybook error

[jordmccord]

Description

When rendering a component with variants in Storybook I'm getting a Variants is undefined error.

Steps to Reproduce

1. Start a new web Storybook project npx storybook@latest init choose react and vite
2. Update .storybook/main.ts to include the following:

import type { StorybookConfig } from '@storybook/react-vite';

import { join, dirname } from 'path';
import react from '@vitejs/plugin-react';
import reactNativeWeb from 'vite-plugin-react-native-web';

function getAbsolutePath(value: string): any {
  return dirname(require.resolve(join(value, 'package.json')));
}

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    getAbsolutePath('@storybook/addon-essentials'),
    getAbsolutePath('@storybook/addon-react-native-web'),
    getAbsolutePath('@chromatic-com/storybook'),
    getAbsolutePath('@storybook/addon-interactions'),
    getAbsolutePath('@storybook/addon-a11y'),
  ],
  framework: {
    name: getAbsolutePath('@storybook/react-vite'),
    options: {},
  },
  async viteFinal(config) {
    const { mergeConfig } = await import('vite');

    return mergeConfig(config, {
      plugins: [
        reactNativeWeb(),
        react({
          babel: {
            presets: ['@babel/preset-react'],
            plugins: [
              'react-native-unistyles/plugin',
              '@babel/plugin-proposal-export-namespace-from',
              'react-native-reanimated/plugin',
            ],
          },
        }),
      ],
    });
  },
};

export default config;

3. Create a Unistyles component with variants
4. Import that component into one of the default stories

Snack or Repository Link (Optional)

No response

Unistyles Version

3.0.0-beta.4

React Native Version

0.76.5

Platforms

Web

Expo

Yes

[Brentlok]

Hi, can you create repo with minimal reproduction?

[jordmccord]

Hey @Brentlok, here's a example repo: https://github.com/jordmccord/unistyles-web-example

If you get the storybook running via npm run storybook and view the button component, I've created a example badge component with unistyles and added it to that story.

[jordmccord]

It seems to be when using styles.useVariants({...})

[Brentlok]

@utilitywarehouse/colour-system is not a public npm package, I guess it's a private one. But I was able to run the stories anyway. There is in fact an error caused by variants (I suspect babel plugin and will check for it) but apart from that, every style is applied correctly

Are you experiencing different result? Because you've said that: none of the styles are applied

[jordmccord]

I'm sorry I've updated the repo and removed the private package. Thank you, yes, I am seeing the styles as well when removing the variants; it was an oversight when writing the issue and debugging, I had tried an earlier alpha version of the library which had no error but the styles weren't applied. When using styles.useVariants({...}) this is what I see. I've updated the issue to reflect the actual error.

[Brentlok]

There is ongoing work to redesign variants here and I bet that it will resolve your issue once done.

For now you can change your code to something like this:

+ import { Variants } from 'react-native-unistyles'

const Badge = forwardRef<View, BadgeProps>(({ children, ...props }, ref) => {
  const {
    colorScheme = "cyan",
    size = "large",
    strong = false,
    borderless = false,
    style,
    ...rest
  } = props;

- styles.useVariants({ colorScheme, strong, size, borderless })

  return (
+      <Variants variants={{ colorScheme, strong, size, borderless }}>
            <View ref={ref} {...rest} style={[styles.container, style]}>
                {children}
            </View>
+      </Variants>
  );
});

[jordmccord]

That did the trick, thanks, @Brentlok 🎉 Great work on the lib by the way. I'm looking forward to the next release.

[jpudysz]

Should be resolved with #462