@storybook/react-native-ui 8.0.0-alpha.3

package/package.json

@@ -0,0 +1,85 @@
+{
+  "name": "@storybook/react-native-ui",
+  "version": "8.0.0-alpha.3",
+  "description": "ui components for react native storybook",
+  "keywords": [
+    "react",
+    "react-native",
+    "storybook"
+  ],
+  "homepage": "https://storybook.js.org/",
+  "bugs": {
+    "url": "https://github.com/storybookjs/react-native/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/react-native.git",
+    "directory": "packages/react-native-ui"
+  },
+  "react-native": "src/index.tsx",
+  "main": "dist/index.js",
+  "types": "src/index.tsx",
+  "license": "MIT",
+  "files": [
+    "dist/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts",
+    "src/**/*"
+  ],
+  "scripts": {
+    "dev": "tsup --watch",
+    "prepare": "tsup",
+    "test": "jest --passWithNoTests",
+    "test:ci": "jest"
+  },
+  "jest": {
+    "modulePathIgnorePatterns": [
+      "dist/"
+    ],
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js",
+      "jsx",
+      "json",
+      "node"
+    ],
+    "preset": "react-native"
+  },
+  "devDependencies": {
+    "@storybook/react": "^8",
+    "@storybook/types": "^8",
+    "@types/jest": "^29.4.3",
+    "@types/react": "~18.2.14",
+    "babel-jest": "^29.4.3",
+    "jest": "^29.7.0",
+    "react-test-renderer": "18.2.0",
+    "tsup": "^7.2.0",
+    "typescript": "^5.3.3"
+  },
+  "dependencies": {
+    "@storybook/core-events": "^8",
+    "@storybook/manager-api": "^8",
+    "@storybook/react-native-theming": "^8.0.0-alpha.3",
+    "fuse.js": "^7.0.0",
+    "memoizerific": "^1.11.3",
+    "polished": "^4.3.1"
+  },
+  "peerDependencies": {
+    "@gorhom/bottom-sheet": ">=4",
+    "react": "*",
+    "react-native": ">=0.57.0",
+    "react-native-gesture-handler": ">=2",
+    "react-native-reanimated": ">=3",
+    "react-native-safe-area-context": "*",
+    "react-native-svg": ">=14"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "b7c2a24d21c0a38bd5e31349b3ba370af7c3d863"
+}

package/src/Button.stories.tsx

@@ -0,0 +1,134 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import type { ReactNode } from 'react';
+
+import { View } from 'react-native';
+
+import { Button } from './Button';
+import { FaceHappyIcon } from './icon/FaceHappyIcon';
+
+const meta = {
+  title: 'UI/Button',
+  component: Button,
+  args: {},
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const Stack = ({ children }: { children: ReactNode }) => (
+  <View style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>{children}</View>
+);
+
+const Row = ({ children }: { children: ReactNode }) => (
+  <View style={{ display: 'flex', flexDirection: 'row', alignItems: 'center', gap: 16 }}>
+    {children}
+  </View>
+);
+
+export const Base: Story = {};
+
+export const Variants: Story = {
+  render: (args) => (
+    <Stack>
+      <Row>
+        <Button variant="solid" text="Solid" {...args} />
+        <Button variant="outline" text="Outline" {...args} />
+        <Button variant="ghost" text="Ghost" {...args} />
+      </Row>
+      <Row>
+        <Button variant="solid" {...args} Icon={FaceHappyIcon} text="Solid" />
+        <Button variant="outline" Icon={FaceHappyIcon} text="Outline" {...args} />
+        <Button variant="ghost" Icon={FaceHappyIcon} text="Ghost" {...args} />
+      </Row>
+      <Row>
+        <Button variant="solid" padding="small" Icon={FaceHappyIcon} {...args} />
+        <Button variant="outline" padding="small" Icon={FaceHappyIcon} {...args} />
+        <Button variant="ghost" padding="small" Icon={FaceHappyIcon} {...args} />
+      </Row>
+    </Stack>
+  ),
+};
+
+export const Active: Story = {
+  args: {
+    active: true,
+    text: 'Button',
+    Icon: FaceHappyIcon,
+  },
+  render: (args) => (
+    <Row>
+      <Button variant="solid" {...args} />
+      <Button variant="outline" {...args} />
+      <Button variant="ghost" {...args} />
+    </Row>
+  ),
+};
+
+export const WithIcon: Story = {
+  args: {
+    Icon: FaceHappyIcon,
+    text: 'Button',
+  },
+  render: (args) => (
+    <Row>
+      <Button variant="solid" {...args} />
+      <Button variant="outline" {...args} />
+      <Button variant="ghost" {...args} />
+    </Row>
+  ),
+};
+
+export const IconOnly: Story = {
+  args: {
+    padding: 'small',
+    Icon: FaceHappyIcon,
+  },
+  render: (args) => (
+    <Row>
+      <Button variant="solid" {...args} />
+      <Button variant="outline" {...args} />
+      <Button variant="ghost" {...args} />
+    </Row>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <Row>
+      <Button size="small" text="Small Button" />
+      <Button size="medium" text="Medium Button" />
+    </Row>
+  ),
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    text: 'Disabled Button',
+  },
+};
+
+export const Animated: Story = {
+  args: {
+    variant: 'outline',
+  },
+  render: (args) => (
+    <Stack>
+      <Row>
+        <Button animation="glow" text="Button" {...args} />
+        <Button animation="jiggle" text="Button" {...args} />
+        <Button animation="rotate360" text="Button" {...args} />
+      </Row>
+      <Row>
+        <Button animation="glow" text="Button" Icon={FaceHappyIcon} {...args} />
+        <Button animation="jiggle" text="Button" Icon={FaceHappyIcon} {...args} />
+        <Button animation="rotate360" Icon={FaceHappyIcon} text="Button" {...args} />
+      </Row>
+      <Row>
+        <Button animation="glow" padding="small" Icon={FaceHappyIcon} {...args} />
+        <Button animation="jiggle" padding="small" Icon={FaceHappyIcon} {...args} />
+        <Button animation="rotate360" padding="small" Icon={FaceHappyIcon} {...args} />
+      </Row>
+    </Stack>
+  ),
+};

package/src/Button.tsx

@@ -0,0 +1,243 @@
+import { styled, useTheme } from '@storybook/react-native-theming';
+import { ReactElement, forwardRef, useEffect, useMemo, useState } from 'react';
+import { TouchableOpacity, TouchableOpacityProps } from 'react-native';
+import { SvgProps } from 'react-native-svg';
+
+export interface ButtonProps extends TouchableOpacityProps {
+  asChild?: boolean;
+  size?: 'small' | 'medium';
+  padding?: 'small' | 'medium';
+  variant?: 'outline' | 'solid' | 'ghost';
+  disabled?: boolean;
+  active?: boolean;
+  animation?: 'none' | 'rotate360' | 'glow' | 'jiggle';
+  text?: string;
+  Icon?: (props: SvgProps) => ReactElement;
+}
+
+export const Button = forwardRef<TouchableOpacity, ButtonProps>(
+  (
+    {
+      // asChild = false,
+      Icon,
+      animation = 'none',
+      size = 'small',
+      variant = 'outline',
+      padding = 'medium',
+      disabled = false,
+      active = false,
+      onPress,
+      children,
+      text,
+      ...props
+    },
+    ref
+  ) => {
+    // let Comp: 'button' | 'a' | typeof Slot = 'button';
+    // if (props.isLink) Comp = 'a';
+    // if (asChild) Comp = Slot;
+    // let localVariant = variant;
+    // let localSize = size;
+
+    const [isAnimating, setIsAnimating] = useState(false);
+
+    const handleClick = (event) => {
+      if (onPress) onPress(event);
+      if (animation === 'none') return;
+      setIsAnimating(true);
+    };
+
+    useEffect(() => {
+      const timer = setTimeout(() => {
+        if (isAnimating) setIsAnimating(false);
+      }, 1000);
+      return () => clearTimeout(timer);
+    }, [isAnimating]);
+
+    // Match the old API with the new API.
+    // TODO: Remove this after 9.0.
+    // if (props.primary) {
+    //   localVariant = 'solid';
+    //   localSize = 'medium';
+    // }
+
+    // Match the old API with the new API.
+    // TODO: Remove this after 9.0.
+    // if (props.secondary || props.tertiary || props.gray || props.outline || props.inForm) {
+    //   localVariant = 'outline';
+    //   localSize = 'medium';
+    // }
+
+    return (
+      <StyledButton
+        // as={Comp}
+        ref={ref}
+        variant={variant}
+        size={size}
+        padding={padding}
+        disabled={disabled}
+        active={active}
+        animating={isAnimating}
+        animation={animation}
+        onPress={handleClick}
+        {...props}
+      >
+        {Icon && <ButtonIcon Icon={Icon} variant={variant} active={active} />}
+        {text && (
+          <ButtonText variant={variant} active={active}>
+            {text}
+          </ButtonText>
+        )}
+        {children}
+      </StyledButton>
+    );
+  }
+);
+
+Button.displayName = 'Button';
+
+// const StyledButton = styled('TouchableOpacity', {
+//   shouldForwardProp: (prop) => isPropValid(prop),
+// })<
+//   ButtonProps & {
+//     animating: boolean;
+//     animation: ButtonProps['animation'];
+//   }
+// >(({ theme, variant, size, disabled, active, animating, animation, padding }) => ({
+const StyledButton = styled.TouchableOpacity<
+  ButtonProps & { animating: boolean; animation: ButtonProps['animation'] }
+>(({ theme, variant, size, disabled, active, /* animating, animation, */ padding }) => ({
+  border: 0,
+  cursor: disabled ? 'not-allowed' : 'pointer',
+  display: 'flex',
+  flexDirection: 'row',
+  gap: 6,
+  alignItems: 'center',
+  justifyContent: 'center',
+  overflow: 'hidden',
+  paddingHorizontal: (() => {
+    if (padding === 'small' && size === 'small') return 7;
+    if (padding === 'small' && size === 'medium') return 9;
+    if (size === 'small') return 10;
+    if (size === 'medium') return 12;
+    return 0;
+  })(),
+  paddingVertical: 0,
+  height: size === 'small' ? 28 : 32,
+  position: 'relative',
+
+  //   textDecoration: 'none',
+  transitionProperty: 'background, box-shadow',
+  transitionDuration: '150ms',
+  transitionTimingFunction: 'ease-out',
+  // verticalAlign: 'top',
+  whiteSpace: 'nowrap',
+  userSelect: 'none',
+  opacity: disabled ? 0.5 : 1,
+  margin: 0,
+
+  backgroundColor: (() => {
+    if (variant === 'solid') return theme.color.secondary;
+    if (variant === 'outline') return theme.button$.background;
+    if (variant === 'ghost' && active) return theme.background.hoverable;
+
+    return 'transparent';
+  })(),
+
+  boxShadow: variant === 'outline' ? `${theme.button$.border} 0 0 0 1px inset` : 'none',
+  borderRadius: theme.input.borderRadius,
+  // Making sure that the button never shrinks below its minimum size
+  flexShrink: 0,
+
+  //   '&:hover': {
+  //     color: variant === 'ghost' ? theme.color.secondary : null,
+  //     background: (() => {
+  //       let bgColor = theme.color.secondary;
+  //       if (variant === 'solid') bgColor = theme.color.secondary;
+  //       if (variant === 'outline') bgColor = theme.button.background;
+
+  //       if (variant === 'ghost') return transparentize(0.86, theme.color.secondary);
+  //       return theme.base === 'light' ? darken(0.02, bgColor) : lighten(0.03, bgColor);
+  //     })(),
+  //   },
+
+  //   '&:active': {
+  //     color: variant === 'ghost' ? theme.color.secondary : null,
+  //     background: (() => {
+  //       let bgColor = theme.color.secondary;
+  //       if (variant === 'solid') bgColor = theme.color.secondary;
+  //       if (variant === 'outline') bgColor = theme.button.background;
+
+  //       if (variant === 'ghost') return theme.background.hoverable;
+  //       return theme.base === 'light' ? darken(0.02, bgColor) : lighten(0.03, bgColor);
+  //     })(),
+  //   },
+
+  //   '&:focus': {
+  //     boxShadow: `${rgba(theme.color.secondary, 1)} 0 0 0 1px inset`,
+  //     outline: 'none',
+  //   },
+
+  //   '> svg': {
+  //     animation:
+  //       animating && animation !== 'none' ? `${theme.animation[animation]} 1000ms ease-out` : '',
+  //   },
+}));
+
+export const ButtonText = styled.Text<{
+  variant: ButtonProps['variant'];
+  active: ButtonProps['active'];
+}>(({ theme, variant, active }) => ({
+  color: (() => {
+    if (variant === 'solid') return theme.color.lightest;
+    if (variant === 'outline') return theme.input.color;
+    if (variant === 'ghost' && active) return theme.color.secondary;
+    if (variant === 'ghost') return theme.color.mediumdark;
+    return theme.input.color;
+  })(),
+  flexDirection: 'row',
+  gap: 6,
+  textAlign: 'center',
+  // lineHeight: theme.typography.size.s1,
+  fontSize: theme.typography.size.s1,
+  fontWeight: theme.typography.weight.bold,
+}));
+
+export const ButtonIcon = ({
+  Icon,
+  active,
+  variant,
+}: {
+  Icon: (props: SvgProps) => ReactElement;
+  variant: ButtonProps['variant'];
+  active: ButtonProps['active'];
+}) => {
+  const theme = useTheme();
+
+  const color = useMemo(() => {
+    if (variant === 'solid') return theme.color.lightest;
+    if (variant === 'outline') return theme.input.color;
+    if (variant === 'ghost' && active) return theme.color.secondary;
+    if (variant === 'ghost') return theme.color.mediumdark;
+    return theme.input.color;
+  }, [
+    active,
+    theme.color.lightest,
+    theme.color.mediumdark,
+    theme.color.secondary,
+    theme.input.color,
+    variant,
+  ]);
+
+  return <Icon color={color} />;
+};
+
+// color: variant === 'ghost' ? theme.color.secondary : null,
+// background: (() => {
+//   let bgColor = theme.color.secondary;
+//   if (variant === 'solid') bgColor = theme.color.secondary;
+//   if (variant === 'outline') bgColor = theme.button.background;
+
+//   if (variant === 'ghost') return theme.background.hoverable;
+//   return theme.base === 'light' ? darken(0.02, bgColor) : lighten(0.03, bgColor);
+// })(),

package/src/Explorer.stories.tsx

@@ -0,0 +1,46 @@
+import { ManagerContext } from '@storybook/manager-api';
+import { Explorer } from './Explorer';
+import { mockDataset } from './mockdata';
+import type { RefType } from './types';
+import { View } from 'react-native';
+
+export default {
+  component: Explorer,
+  title: 'UI/Sidebar/Explorer',
+  parameters: { layout: 'fullscreen', theme: 'side-by-side' },
+  decorators: [
+    (storyFn: any) => (
+      <ManagerContext.Provider value={{ state: { docsOptions: {} } } as any}>
+        {storyFn()}
+      </ManagerContext.Provider>
+    ),
+    (storyFn: any) => <View style={{ paddingHorizontal: 20 }}>{storyFn()}</View>,
+    (storyFn: any) => <View style={{ paddingHorizontal: 20 }}>{storyFn()}</View>,
+  ],
+};
+
+const selected = {
+  refId: 'storybook_internal',
+  storyId: 'root-1-child-a2--grandchild-a1-1',
+};
+
+const simple: Record<string, RefType> = {
+  storybook_internal: {
+    title: undefined,
+    id: 'storybook_internal',
+    url: 'iframe.html',
+    previewInitialized: true,
+    // @ts-expect-error (invalid input)
+    index: mockDataset.withRoot,
+  },
+};
+
+export const Simple = () => (
+  <Explorer
+    dataset={{ hash: simple, entries: Object.entries(simple) }}
+    selected={selected}
+    isLoading={false}
+    isBrowsing
+    setSelection={() => {}}
+  />
+);

package/src/Explorer.tsx

@@ -0,0 +1,54 @@
+import type { FC } from 'react';
+import React, { useRef } from 'react';
+
+import { Ref } from './Refs';
+import type { CombinedDataset, Selection } from './types';
+
+// import { useHighlighted } from './useHighlighted';
+// import { HighlightStyles } from './HighlightStyles';
+import { View } from 'react-native';
+
+export interface ExplorerProps {
+  isLoading: boolean;
+  isBrowsing: boolean;
+  dataset: CombinedDataset;
+  selected: Selection;
+  setSelection: (selection: Selection) => void;
+}
+
+export const Explorer: FC<ExplorerProps> = React.memo(function Explorer({
+  isLoading,
+  isBrowsing,
+  dataset,
+  selected,
+  setSelection,
+}) {
+  const containerRef = useRef<View>(null);
+
+  // Track highlighted nodes, keep it in sync with props and enable keyboard navigation
+  //   const [highlighted, setHighlighted, highlightedRef] = useHighlighted({
+  //     containerRef,
+  //     isLoading,
+  //     isBrowsing,
+  //     dataset,
+  //     selected,
+  //   });
+
+  return (
+    <View ref={containerRef} id="storybook-explorer-tree">
+      {/* {highlighted && <HighlightStyles {...highlighted} />} */}
+      {dataset.entries.map(([refId, ref]) => (
+        <Ref
+          {...ref}
+          key={refId}
+          isLoading={isLoading}
+          isBrowsing={isBrowsing}
+          selectedStoryId={selected?.refId === ref.id ? selected.storyId : null}
+          setSelection={setSelection}
+          //   highlightedRef={highlightedRef}
+          //   setHighlighted={setHighlighted}
+        />
+      ))}
+    </View>
+  );
+});

package/src/IconButton.tsx

@@ -0,0 +1,11 @@
+import { TouchableOpacity } from 'react-native';
+import { Button, ButtonProps } from './Button';
+import { forwardRef } from 'react';
+
+export const IconButton = forwardRef<TouchableOpacity, ButtonProps>(
+  ({ padding = 'small', variant = 'ghost', ...props }, ref) => {
+    return <Button padding={padding} variant={variant} ref={ref} {...props} />;
+  }
+);
+
+IconButton.displayName = 'IconButton';

package/src/Layout.stories.tsx

@@ -0,0 +1,38 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Layout } from './Layout';
+// import { mockDataset } from './mockdata';
+// import { index } from './mockdata.large';
+import { mockDataset } from './mockdata';
+// import { GestureHandlerRootView } from 'react-native-gesture-handler';
+// import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
+import { Text } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
+
+const meta = {
+  title: 'components/Layout',
+  component: Layout,
+  decorators: [
+    (Story) => (
+      <GestureHandlerRootView style={{ flex: 1 }}>
+        <BottomSheetModalProvider>
+          <Story />
+        </BottomSheetModalProvider>
+      </GestureHandlerRootView>
+    ),
+  ],
+} satisfies Meta<typeof Layout>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {
+    children: <Text>Testing</Text>,
+    //@ts-ignore
+    storyHash: mockDataset.withRoot,
+    storyId: 'emails-buildnotification--with-changes',
+  },
+};