@storybook/react-native-ui-lite 9.0.0-beta.11

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@storybook/react-native-ui-lite",
+  "version": "9.0.0-beta.11",
+  "description": "lightweight 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-lite"
+  },
+  "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": {
+    "@types/jest": "^29.4.3",
+    "@types/react": "~19.0.10",
+    "babel-jest": "^29.7.0",
+    "jest": "^29.7.0",
+    "react-test-renderer": "^19.1.0",
+    "ts-dedent": "^2.2.0",
+    "tsup": "^7.2.0",
+    "typescript": "~5.8.3"
+  },
+  "dependencies": {
+    "@storybook/react": "9.0.0-beta.10",
+    "@storybook/react-native-theming": "^9.0.0-beta.11",
+    "fuse.js": "^7.0.0",
+    "memoizerific": "^1.11.3",
+    "polished": "^4.3.1",
+    "store2": "^2.14.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": ">=0.57.0",
+    "storybook": "9.0.0-beta.10"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "531ed8a758adc98bb436d0ccb32efcb369572ffe"
+}

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/iconDataUris';
+
+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,172 @@
+import { styled, useTheme } from '@storybook/react-native-theming';
+import { ReactElement, forwardRef, useEffect, useMemo, useState } from 'react';
+import type { 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;
+}
+
+// TODO fix this type
+export const Button = forwardRef<any, ButtonProps>(
+  (
+    {
+      Icon,
+      animation = 'none',
+      size = 'small',
+      variant = 'outline',
+      padding = 'medium',
+      disabled = false,
+      active = false,
+      onPress,
+      children,
+      text,
+      ...props
+    }: ButtonProps,
+    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]);
+
+    return (
+      <StyledButton
+        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<
+  ButtonProps & { animating: boolean; animation: ButtonProps['animation'] }
+>(({ theme, variant, size, disabled, active, 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',
+  transitionProperty: 'background, box-shadow',
+  transitionDuration: '150ms',
+  transitionTimingFunction: 'ease-out',
+  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,
+}));
+
+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',
+  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} />;
+};

package/src/Explorer.stories.tsx

@@ -0,0 +1,40 @@
+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) => <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,38 @@
+import type { FC } from 'react';
+import React, { useRef } from 'react';
+import { Ref } from './Refs';
+import type { CombinedDataset, Selection } from './types';
+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);
+
+  return (
+    <View ref={containerRef} id="storybook-explorer-tree">
+      {dataset.entries.map(([refId, ref]) => (
+        <Ref
+          {...ref}
+          key={refId}
+          isLoading={isLoading}
+          isBrowsing={isBrowsing}
+          selectedStoryId={selected?.refId === ref.id ? selected.storyId : null}
+          setSelection={setSelection}
+        />
+      ))}
+    </View>
+  );
+});

package/src/IconButton.tsx

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

package/src/Layout.stories.tsx

@@ -0,0 +1,70 @@
+// import type { Meta, StoryObj } from '@storybook/react';
+// import { Layout } from './Layout';
+// import { mockDataset } from './mockdata';
+// import { Text, View } from 'react-native';
+// import { LayoutProvider } from './LayoutProvider';
+
+// const meta = {
+//   component: Layout,
+//   decorators: [
+//     (Story) => (
+//       <LayoutProvider>
+//         <Story />
+//       </LayoutProvider>
+//     ),
+//   ],
+// } 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',
+//   },
+// };
+
+// export const OverflowSidebarExample: Story = {
+//   args: {
+//     children: (
+//       <View
+//         style={{
+//           width: '100%',
+//           backgroundColor: 'lightgreen',
+//           alignItems: 'flex-end',
+//           left: '-50%',
+//         }}
+//       >
+//         <Text style={{ width: '50%', textAlign: 'right' }}>
+//           This box should not overflow the side navigation in desktop mode
+//         </Text>
+//       </View>
+//     ),
+//     //@ts-ignore
+//     storyHash: mockDataset.withRoot,
+//     storyId: 'emails-buildnotification--with-changes',
+//   },
+// };
+
+// export const OverflowAddonsExample: Story = {
+//   args: {
+//     children: (
+//       <View
+//         style={{
+//           height: '100%',
+//           backgroundColor: 'lightgreen',
+//           bottom: '-50%',
+//         }}
+//       >
+//         <Text style={{ height: '50%' }}>This box should not overflow the addons panel</Text>
+//       </View>
+//     ),
+//     //@ts-ignore
+//     storyHash: mockDataset.withRoot,
+//     storyId: 'emails-buildnotification--with-changes',
+//   },
+// };