@storybook/react-native-web-vite 0.0.3-0 → 8.5.0-alpha.10

package/template/cli/ts-4-9/Button.tsx

@@ -0,0 +1,101 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+
+export interface ButtonProps {
+  /** Is this the principal call to action on the page? */
+  primary?: boolean;
+  /** What background color to use */
+  backgroundColor?: string;
+  /** How large should the button be? */
+  size?: 'small' | 'medium' | 'large';
+  /** Button contents */
+  label: string;
+  /** Optional click handler */
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+/** Primary UI component for user interaction */
+export const Button = ({
+  primary = false,
+  size = 'medium',
+  backgroundColor,
+  label,
+  style,
+  onPress,
+}: ButtonProps) => {
+  const modeStyle = primary ? styles.primary : styles.secondary;
+  const textModeStyle = primary ? styles.primaryText : styles.secondaryText;
+
+  const sizeStyle = styles[size];
+  const textSizeStyle = textSizeStyles[size];
+
+  return (
+    <TouchableOpacity accessibilityRole="button" activeOpacity={0.6} onPress={onPress}>
+      <View
+        style={[
+          styles.button,
+          modeStyle,
+          sizeStyle,
+          style,
+          !!backgroundColor && { backgroundColor },
+          { borderColor: 'black' },
+        ]}
+      >
+        <Text style={[textModeStyle, textSizeStyle]}>{label}</Text>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    borderWidth: 0,
+    borderRadius: 48,
+  },
+  buttonText: {
+    fontWeight: '700',
+    lineHeight: 1,
+  },
+  primary: {
+    backgroundColor: '#1ea7fd',
+  },
+  primaryText: {
+    color: 'white',
+  },
+  secondary: {
+    backgroundColor: 'transparent',
+    borderColor: 'rgba(0, 0, 0, 0.15)',
+    borderWidth: 1,
+  },
+  secondaryText: {
+    color: '#333',
+  },
+  small: {
+    paddingVertical: 10,
+    paddingHorizontal: 16,
+  },
+  smallText: {
+    fontSize: 12,
+  },
+  medium: {
+    paddingVertical: 11,
+    paddingHorizontal: 20,
+  },
+  mediumText: {
+    fontSize: 14,
+  },
+  large: {
+    paddingVertical: 12,
+    paddingHorizontal: 24,
+  },
+  largeText: {
+    fontSize: 16,
+  },
+});
+
+const textSizeStyles = {
+  small: styles.smallText,
+  medium: styles.mediumText,
+  large: styles.largeText,
+};

package/template/cli/ts-4-9/Header.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Header } from './Header';
+
+const meta = {
+  title: 'Example/Header',
+  component: Header,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+  tags: ['autodocs'],
+} satisfies Meta<typeof Header>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const LoggedIn: Story = {
+  args: {
+    user: {
+      name: 'Jane Doe',
+    },
+    onLogin: () => {},
+    onLogout: () => {},
+    onCreateAccount: () => {},
+  },
+};
+
+export const LoggedOut: Story = {
+  args: {
+    onLogin: () => {},
+    onLogout: () => {},
+    onCreateAccount: () => {},
+  },
+};

package/template/cli/ts-4-9/Header.tsx

@@ -0,0 +1,76 @@
+import { StyleSheet, Text, View } from 'react-native';
+
+import { Button } from './Button';
+
+export type HeaderProps = {
+  user?: {};
+  onLogin: () => void;
+  onLogout: () => void;
+  onCreateAccount: () => void;
+};
+
+export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
+  <View>
+    <View style={styles.wrapper}>
+      <View style={styles.logoContainer}>
+        <Text style={styles.h1}>Acme</Text>
+      </View>
+      <View style={styles.buttonContainer}>
+        {user ? (
+          <>
+            <>
+              <Text>Welcome, </Text>
+              <Text style={styles.userName}>{user.name}!</Text>
+            </>
+            <Button style={styles.button} size="small" onPress={onLogout} label="Log out" />
+          </>
+        ) : (
+          <>
+            <Button style={styles.button} size="small" onPress={onLogin} label="Log in" />
+            <Button
+              style={styles.button}
+              primary
+              size="small"
+              onPress={onCreateAccount}
+              label="Sign up"
+            />
+          </>
+        )}
+      </View>
+    </View>
+  </View>
+);
+
+const styles = StyleSheet.create({
+  wrapper: {
+    borderBottomWidth: 1,
+    borderBottomColor: 'rgba(0, 0, 0, 0.1)',
+    paddingVertical: 15,
+    paddingHorizontal: 20,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  h1: {
+    fontWeight: '900',
+    fontSize: 20,
+    marginTop: 6,
+    marginBottom: 6,
+    marginLeft: 10,
+    color: 'black',
+    alignSelf: 'flex-start',
+  },
+  logoContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  button: {
+    marginLeft: 10,
+  },
+  buttonContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  userName: {
+    fontWeight: '700',
+  },
+});

package/template/cli/ts-4-9/Page.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta } from '@storybook/react';
+import { expect, userEvent, within } from '@storybook/test';
+
+import { Page } from './Page';
+
+export default {
+  title: 'Example/Page',
+  component: Page,
+} as Meta<typeof Page>;
+
+export const LoggedIn = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const loginButton = canvas.getByRole('button', { name: /Log in/i });
+    await expect(loginButton).toBeInTheDocument();
+    await userEvent.click(loginButton);
+    // FIXME: await expect(loginButton).not.toBeInTheDocument();
+
+    const logoutButton = canvas.getByRole('button', { name: /Log out/i });
+    await expect(logoutButton).toBeInTheDocument();
+  },
+};
+
+export const LoggedOut = {};

package/template/cli/ts-4-9/Page.tsx

@@ -0,0 +1,154 @@
+import { useState } from 'react';
+
+import { Linking, StyleSheet, Text, View } from 'react-native';
+
+import { Header } from './Header';
+
+export const Page = () => {
+  const [user, setUser] = useState();
+
+  return (
+    <View>
+      <Header
+        user={user}
+        onLogin={() => setUser({ name: 'Jane Doe' })}
+        onLogout={() => setUser(undefined)}
+        onCreateAccount={() => setUser({ name: 'Jane Doe' })}
+      />
+
+      <View style={styles.section}>
+        <Text role="heading" style={styles.h2}>
+          Pages in Storybook
+        </Text>
+        <Text style={styles.p}>
+          We recommend building UIs with a{' '}
+          <Text
+            style={[styles.a, { fontWeight: 'bold' }]}
+            role="link"
+            onPress={() => {
+              Linking.openURL('https://componentdriven.org');
+            }}
+          >
+            <Text>component-driven</Text>
+          </Text>{' '}
+          process starting with atomic components and ending with pages.
+        </Text>
+        <Text style={styles.p}>
+          Render pages with mock data. This makes it easy to build and review page states without
+          needing to navigate to them in your app. Here are some handy patterns for managing page
+          data in Storybook:
+        </Text>
+        <View>
+          <View>
+            Use a higher-level connected component. Storybook helps you compose such data from the
+            "args" of child component stories
+          </View>
+          <View>
+            Assemble data in the page component from your services. You can mock these services out
+            using Storybook.
+          </View>
+        </View>
+        <Text style={styles.p}>
+          Get a guided tutorial on component-driven development at{' '}
+          <Text
+            style={styles.a}
+            role="link"
+            onPress={() => {
+              Linking.openURL('https://storybook.js.org/tutorials/');
+            }}
+          >
+            Storybook tutorials
+          </Text>
+          . Read more in the{' '}
+          <Text
+            style={styles.a}
+            role="link"
+            onPress={() => {
+              Linking.openURL('https://storybook.js.org/docs');
+            }}
+          >
+            docs
+          </Text>
+          .
+        </Text>
+        <View style={styles.tipWrapper}>
+          <View style={styles.tip}>
+            <Text style={styles.tipText}>Tip </Text>
+          </View>
+          <Text>Adjust the width of the canvas with the </Text>
+          <Text>Viewports addon in the toolbar</Text>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  section: {
+    fontFamily: "'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif",
+    fontSize: 14,
+    lineHeight: 24,
+    paddingVertical: 48,
+    paddingHorizontal: 20,
+    marginHorizontal: 'auto',
+    maxWidth: 600,
+    color: '#333',
+  },
+
+  h2: {
+    fontWeight: '900',
+    fontSize: 32,
+    lineHeight: 1,
+    marginBottom: 4,
+  },
+
+  p: {
+    marginVertical: 16,
+    marginHorizontal: 0,
+  },
+
+  a: {
+    color: '#1ea7fd',
+  },
+
+  ul: {
+    paddingLeft: 30,
+    marginVertical: 16,
+  },
+
+  li: {
+    marginBottom: 8,
+  },
+
+  tip: {
+    alignSelf: 'flex-start',
+    borderRadius: 16,
+    backgroundColor: '#e7fdd8',
+    paddingVertical: 4,
+    paddingHorizontal: 12,
+    marginRight: 10,
+    marginBottom: 4,
+  },
+  tipText: {
+    fontSize: 11,
+    lineHeight: 12,
+    fontWeight: '700',
+    color: '#66bf3c',
+  },
+
+  tipWrapper: {
+    fontSize: 13,
+    lineHeight: 20,
+    marginTop: 40,
+    marginBottom: 40,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+
+  tipWrapperSvg: {
+    height: 12,
+    width: 12,
+    marginRight: 4,
+    marginTop: 3,
+  },
+});

package/dist/index.cjs

@@ -1,4 +0,0 @@
-'use strict';
-
-//# sourceMappingURL=index.cjs.map
-//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"index.cjs"}

package/dist/index.d.cts

@@ -1,52 +0,0 @@
-import { StorybookConfig as StorybookConfig$1, TypescriptOptions as TypescriptOptions$1, CompatibleString } from 'storybook/internal/types';
-import { Options, BabelOptions } from '@vitejs/plugin-react';
-import { BuilderOptions, StorybookConfigVite } from '@storybook/builder-vite';
-import docgenTypescript from '@joshwooding/vite-plugin-react-docgen-typescript';
-
-type FrameworkName = CompatibleString<"@storybook/react-native-web-vite">;
-type BuilderName = CompatibleString<"@storybook/builder-vite">;
-type FrameworkOptions = {
-    builder?: BuilderOptions;
-    strictMode?: boolean;
-    /**
-     * Use React's legacy root API to mount components
-     *
-     * React has introduced a new root API with React 18.x to enable a whole set of new features (e.g.
-     * concurrent features) If this flag is true, the legacy Root API is used to mount components to
-     * make it easier to migrate step by step to React 18.
-     *
-     * @default false
-     */
-    legacyRootApi?: boolean;
-    pluginReactOptions?: Omit<Options, "babel"> & {
-        babel?: BabelOptions;
-    };
-};
-type StorybookConfigFramework = {
-    framework: FrameworkName | {
-        name: FrameworkName;
-        options: FrameworkOptions;
-    };
-    core?: StorybookConfig$1["core"] & {
-        builder?: BuilderName | {
-            name: BuilderName;
-            options: BuilderOptions;
-        };
-    };
-};
-type TypescriptOptions = TypescriptOptions$1 & {
-    /**
-     * Sets the type of Docgen when working with React and TypeScript
-     *
-     * @default `'react-docgen'`
-     */
-    reactDocgen: "react-docgen-typescript" | "react-docgen" | false;
-    /** Configures `@joshwooding/vite-plugin-react-docgen-typescript` */
-    reactDocgenTypescriptOptions: Parameters<typeof docgenTypescript>[0];
-};
-/** The interface for Storybook configuration in `main.ts` files. */
-type StorybookConfig = Omit<StorybookConfig$1, keyof StorybookConfigVite | keyof StorybookConfigFramework | "typescript"> & StorybookConfigVite & StorybookConfigFramework & {
-    typescript?: Partial<TypescriptOptions>;
-};
-
-export type { FrameworkOptions, StorybookConfig };

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/preset.cjs

@@ -1,15 +0,0 @@
-'use strict';
-
-var builderVite = require('@storybook/builder-vite');
-var n = require('@vitejs/plugin-react');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var n__default = /*#__PURE__*/_interopDefault(n);
-
-function r(t){return {name:"vite:react-native-web",enforce:"pre",config(o,e){return {plugins:[n__default.default({jsxRuntime:"automatic",...t})],define:{"global.__x":{},_frameTimestamp:void 0,_WORKLET:!1,__DEV__:`${e.mode==="development"}`,"process.env.NODE_ENV":JSON.stringify(process.env.NODE_ENV||e.mode)},optimizeDeps:{include:[],esbuildOptions:{jsx:"transform",resolveExtensions:[".web.js",".web.ts",".web.tsx",".js",".jsx",".json",".ts",".tsx",".mjs"],loader:{".js":"jsx"}}},resolve:{extensions:[".web.js",".web.ts",".web.tsx",".js",".jsx",".json",".ts",".tsx",".mjs"],alias:{"react-native":"react-native-web"}}}}}}var b=async(t,s)=>{let{pluginReactOptions:o={}}=await s.presets.apply("frameworkOptions"),{plugins:e=[]}=t;return await builderVite.hasVitePlugins(e,["vite:react-native-web"])||e.push(r(o)),t},c={builder:"@storybook/builder-vite",renderer:"@storybook/react"};
-
-exports.core = c;
-exports.viteFinal = b;
-//# sourceMappingURL=preset.cjs.map
-//# sourceMappingURL=preset.cjs.map

package/dist/preset.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/preset.ts"],"names":["reactNativeWeb","reactOptions","_userConfig","env","react","viteFinal","config","options","pluginReactOptions","plugins","hasVitePlugins","core"],"mappings":";;;;;;;;;AAQA,SAASA,CAAAA,CACPC,CACQ,CAAA,CA8DR,OA7DuB,CACrB,IAAA,CAAM,uBACN,CAAA,OAAA,CAAS,MACT,MAAOC,CAAAA,CAAAA,CAAaC,CAAK,CAAA,CACvB,OAAO,CACL,OAAA,CAAS,CACPC,kBAAAA,CAAM,CACJ,UAAY,CAAA,WAAA,CACZ,GAAGH,CACL,CAAC,CACH,CAAA,CACA,MAAQ,CAAA,CAEN,aAAc,EAAC,CACf,eAAiB,CAAA,KAAA,CAAA,CACjB,SAAU,CACV,CAAA,CAAA,OAAA,CAAS,CAAGE,EAAAA,CAAAA,CAAI,OAAS,aAAa,CAAA,CAAA,CACtC,sBAAwB,CAAA,IAAA,CAAK,UAC3B,OAAQ,CAAA,GAAA,CAAI,QAAYA,EAAAA,CAAAA,CAAI,IAC9B,CACF,CAAA,CACA,YAAc,CAAA,CACZ,QAAS,EAAC,CACV,cAAgB,CAAA,CACd,IAAK,WACL,CAAA,iBAAA,CAAmB,CACjB,SAAA,CACA,UACA,UACA,CAAA,KAAA,CACA,MACA,CAAA,OAAA,CACA,MACA,MACA,CAAA,MACF,CACA,CAAA,MAAA,CAAQ,CACN,KAAO,CAAA,KACT,CACF,CACF,EACA,OAAS,CAAA,CACP,UAAY,CAAA,CACV,UACA,SACA,CAAA,UAAA,CACA,KACA,CAAA,MAAA,CACA,QACA,KACA,CAAA,MAAA,CACA,MACF,CAAA,CACA,MAAO,CACL,cAAA,CAAgB,kBAClB,CACF,CACF,CACF,CACF,CAGF,KAEaE,CAA0C,CAAA,MACrDC,CACAC,CAAAA,CAAAA,GACG,CACH,GAAM,CAAE,kBAAAC,CAAAA,CAAAA,CAAqB,EAAG,CAAA,CAC9B,MAAMD,CAAAA,CAAQ,QAAQ,KAAwB,CAAA,kBAAkB,CAE5D,CAAA,CAAE,QAAAE,CAAU,CAAA,EAAG,CAAA,CAAIH,EAEzB,OAAM,MAAMI,0BAAeD,CAAAA,CAAAA,CAAS,CAAC,uBAAuB,CAAC,CAC3DA,EAAAA,CAAAA,CAAQ,KAAKT,CAAeQ,CAAAA,CAAkB,CAAC,CAAA,CAG1CF,CACT,CAEaK,CAAAA,CAAAA,CAAO,CAClB,OAAS,CAAA,yBAAA,CACT,SAAU,kBACZ","file":"preset.cjs","sourcesContent":["import { hasVitePlugins } from \"@storybook/builder-vite\";\nimport react, {\n  BabelOptions,\n  Options as ReactOptions,\n} from \"@vitejs/plugin-react\";\nimport { Plugin } from \"vite\";\nimport { FrameworkOptions, StorybookConfig } from \"./types\";\n\nfunction reactNativeWeb(\n  reactOptions: Omit<ReactOptions, \"babel\"> & { babel?: BabelOptions },\n): Plugin {\n  const plugin: Plugin = {\n    name: \"vite:react-native-web\",\n    enforce: \"pre\",\n    config(_userConfig, env) {\n      return {\n        plugins: [\n          react({\n            jsxRuntime: \"automatic\",\n            ...reactOptions,\n          }),\n        ],\n        define: {\n          // reanimated support\n          \"global.__x\": {},\n          _frameTimestamp: undefined,\n          _WORKLET: false,\n          __DEV__: `${env.mode === \"development\"}`,\n          \"process.env.NODE_ENV\": JSON.stringify(\n            process.env.NODE_ENV || env.mode,\n          ),\n        },\n        optimizeDeps: {\n          include: [],\n          esbuildOptions: {\n            jsx: \"transform\",\n            resolveExtensions: [\n              \".web.js\",\n              \".web.ts\",\n              \".web.tsx\",\n              \".js\",\n              \".jsx\",\n              \".json\",\n              \".ts\",\n              \".tsx\",\n              \".mjs\",\n            ],\n            loader: {\n              \".js\": \"jsx\",\n            },\n          },\n        },\n        resolve: {\n          extensions: [\n            \".web.js\",\n            \".web.ts\",\n            \".web.tsx\",\n            \".js\",\n            \".jsx\",\n            \".json\",\n            \".ts\",\n            \".tsx\",\n            \".mjs\",\n          ],\n          alias: {\n            \"react-native\": \"react-native-web\",\n          },\n        },\n      };\n    },\n  };\n\n  return plugin;\n}\n\nexport const viteFinal: StorybookConfig[\"viteFinal\"] = async (\n  config,\n  options,\n) => {\n  const { pluginReactOptions = {} } =\n    await options.presets.apply<FrameworkOptions>(\"frameworkOptions\");\n\n  const { plugins = [] } = config;\n\n  if (!(await hasVitePlugins(plugins, [\"vite:react-native-web\"]))) {\n    plugins.push(reactNativeWeb(pluginReactOptions));\n  }\n\n  return config;\n};\n\nexport const core = {\n  builder: \"@storybook/builder-vite\",\n  renderer: \"@storybook/react\",\n};\n"]}