@storybook/react-native-ui-common 9.0.0-beta.15

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@storybook/react-native-ui-common",
+  "version": "9.0.0-beta.15",
+  "description": "common 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-common"
+  },
+  "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",
+    "tsup": "^7.2.0",
+    "typescript": "~5.8.3"
+  },
+  "dependencies": {
+    "@storybook/react": "9.0.0-beta.10",
+    "@storybook/react-native-theming": "^9.0.0-beta.15",
+    "es-toolkit": "^1.38.0",
+    "fuse.js": "^7.0.0",
+    "memoizerific": "^1.11.3",
+    "polished": "^4.3.1",
+    "store2": "^2.14.3",
+    "ts-dedent": "^2.2.0"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": ">=0.57.0",
+    "storybook": "9.0.0-beta.10"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "gitHead": "905adcca4ea272933c7f0fa16f10dda201da9a5f"
+}

package/src/Button.stories.tsx

@@ -0,0 +1,133 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import type { ReactNode } from 'react';
+
+import { Image, View } from 'react-native';
+
+import { Button } from './Button';
+
+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 = {};
+const Icon = () => <Image source={require('./assets/react-native-logo.png')} />;
+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={Icon} text="Solid" />
+        <Button variant="outline" Icon={Icon} text="Outline" {...args} />
+        <Button variant="ghost" Icon={Icon} text="Ghost" {...args} />
+      </Row>
+      <Row>
+        <Button variant="solid" padding="small" Icon={Icon} {...args} />
+        <Button variant="outline" padding="small" Icon={Icon} {...args} />
+        <Button variant="ghost" padding="small" Icon={Icon} {...args} />
+      </Row>
+    </Stack>
+  ),
+};
+
+export const Active: Story = {
+  args: {
+    active: true,
+    text: 'Button',
+    Icon,
+  },
+  render: (args) => (
+    <Row>
+      <Button variant="solid" {...args} />
+      <Button variant="outline" {...args} />
+      <Button variant="ghost" {...args} />
+    </Row>
+  ),
+};
+
+export const WithIcon: Story = {
+  args: {
+    Icon,
+    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,
+  },
+  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={Icon} {...args} />
+        <Button animation="jiggle" text="Button" Icon={Icon} {...args} />
+        <Button animation="rotate360" Icon={Icon} text="Button" {...args} />
+      </Row>
+      <Row>
+        <Button animation="glow" padding="small" Icon={Icon} {...args} />
+        <Button animation="jiggle" padding="small" Icon={Icon} {...args} />
+        <Button animation="rotate360" padding="small" Icon={Icon} {...args} />
+      </Row>
+    </Stack>
+  ),
+};

package/src/Button.tsx

@@ -0,0 +1,171 @@
+import { styled, useTheme } from '@storybook/react-native-theming';
+import { ReactElement, forwardRef, useEffect, useMemo, useState } from 'react';
+import type { TouchableOpacityProps } from 'react-native';
+
+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: { color: string }) => 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: { color: string }) => 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/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/LayoutProvider.tsx

@@ -0,0 +1,32 @@
+import type { FC, PropsWithChildren } from 'react';
+import { createContext, useContext, useMemo } from 'react';
+import { useWindowDimensions } from 'react-native';
+import { BREAKPOINT } from './constants';
+
+type LayoutContextType = {
+  isDesktop: boolean;
+  isMobile: boolean;
+};
+
+const LayoutContext = createContext<LayoutContextType>({
+  isDesktop: false,
+  isMobile: true,
+});
+
+export const LayoutProvider: FC<PropsWithChildren> = ({ children }) => {
+  const { width } = useWindowDimensions();
+  const isDesktop = width >= BREAKPOINT;
+  const isMobile = !isDesktop;
+
+  const contextValue = useMemo(
+    () => ({
+      isDesktop,
+      isMobile,
+    }),
+    [isDesktop, isMobile]
+  );
+
+  return <LayoutContext.Provider value={contextValue}>{children}</LayoutContext.Provider>;
+};
+
+export const useLayout = () => useContext(LayoutContext);

package/src/StorageProvider.tsx

@@ -0,0 +1,21 @@
+import type { FC, PropsWithChildren } from 'react';
+import { createContext, useContext } from 'react';
+
+export interface Storage {
+  getItem: (key: string) => Promise<string | null>;
+  setItem: (key: string, value: string) => Promise<void>;
+}
+
+const StorageContext = createContext<Storage>({
+  getItem: async () => null,
+  setItem: async () => {},
+});
+
+export const StorageProvider: FC<PropsWithChildren<{ storage: Storage }>> = ({
+  storage,
+  children,
+}) => {
+  return <StorageContext.Provider value={storage}>{children}</StorageContext.Provider>;
+};
+
+export const useStorage = () => useContext(StorageContext);

package/src/constants.ts

@@ -0,0 +1,4 @@
+export const BREAKPOINT = 1000;
+export const MEDIA_DESKTOP_BREAKPOINT = `@media (min-width: ${BREAKPOINT}px)`;
+export const MOBILE_TRANSITION_DURATION = 300;
+export const DEFAULT_REF_ID = 'storybook_internal';

package/src/hooks/index.ts

@@ -0,0 +1,3 @@
+export * from './useExpanded';
+export * from './useLastViewed';
+export * from './useStoreState';

package/src/hooks/useExpanded.ts

@@ -0,0 +1,64 @@
+import type { StoriesHash } from 'storybook/internal/manager-api';
+import type { Dispatch } from 'react';
+import { useCallback, useEffect, useReducer } from 'react';
+import { getAncestorIds } from '../util/tree';
+
+export type ExpandedState = Record<string, boolean>;
+
+export interface ExpandAction {
+  ids: string[];
+  value: boolean;
+}
+
+export interface ExpandedProps {
+  refId: string;
+  data: StoriesHash;
+  initialExpanded?: ExpandedState;
+  rootIds: string[];
+  selectedStoryId: string | null;
+  onSelectStoryId: (storyId: string) => void;
+}
+
+const initializeExpanded = ({
+  initialExpanded,
+  rootIds,
+}: {
+  refId: string;
+  data: StoriesHash;
+  initialExpanded?: ExpandedState;
+  rootIds: string[];
+}) => {
+  const highlightedAncestors = [];
+  return [...rootIds, ...highlightedAncestors].reduce<ExpandedState>(
+    (acc, id) => Object.assign(acc, { [id]: id in initialExpanded ? initialExpanded[id] : true }),
+    {}
+  );
+};
+
+export const useExpanded = ({
+  refId,
+  data,
+  initialExpanded,
+  rootIds,
+  selectedStoryId,
+}: ExpandedProps): [ExpandedState, Dispatch<ExpandAction>] => {
+  // Track the set of currently expanded nodes within this tree.
+  // Root nodes are expanded by default.
+  const [expanded, setExpanded] = useReducer(
+    (state: ExpandedState, { ids, value }: ExpandAction) =>
+      ids.reduce((acc, id) => Object.assign(acc, { [id]: value }), { ...state }),
+    { refId, data, rootIds, initialExpanded },
+    initializeExpanded
+  );
+
+  const updateExpanded = useCallback(({ ids, value }: ExpandAction) => {
+    setExpanded({ ids, value });
+  }, []);
+
+  // Expand the whole ancestry of the currently selected story whenever it changes.
+  useEffect(() => {
+    setExpanded({ ids: getAncestorIds(data, selectedStoryId), value: true });
+  }, [data, selectedStoryId]);
+
+  return [expanded, updateExpanded];
+};

package/src/hooks/useLastViewed.ts

@@ -0,0 +1,35 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+import type { Selection, StoryRef } from '../types';
+
+export const useLastViewed = (selection: Selection) => {
+  const lastViewedRef = useRef([]);
+
+  const updateLastViewed = useCallback(
+    (story: StoryRef) => {
+      const items = lastViewedRef.current;
+      const index = items.findIndex(
+        ({ storyId, refId }) => storyId === story.storyId && refId === story.refId
+      );
+      if (index === 0) return;
+      if (index === -1) {
+        lastViewedRef.current = [story, ...items];
+      } else {
+        lastViewedRef.current = [story, ...items.slice(0, index), ...items.slice(index + 1)];
+      }
+    },
+    [lastViewedRef]
+  );
+
+  useEffect(() => {
+    if (selection) updateLastViewed(selection);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selection]);
+
+  return {
+    getLastViewed: useCallback(() => lastViewedRef.current, [lastViewedRef]),
+    clearLastViewed: useCallback(() => {
+      lastViewedRef.current = lastViewedRef.current.slice(0, 1);
+    }, [lastViewedRef]),
+  };
+};

package/src/hooks/useStoreState.ts

@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react';
+import { useStorage } from '../StorageProvider';
+
+export const useStoreBooleanState = (
+  key: string,
+  defaultValue: boolean
+): ReturnType<typeof useState<boolean>> => {
+  const storage = useStorage();
+
+  const [val, setVal] = useState<boolean>(defaultValue);
+
+  useEffect(() => {
+    storage.getItem(key).then((newVal) => {
+      if (newVal === null || newVal === undefined) {
+        setVal(defaultValue);
+      } else {
+        setVal(newVal === 'true');
+      }
+    });
+  }, [key, storage, defaultValue]);
+
+  useEffect(() => {
+    storage.setItem(key, val.toString());
+  }, [key, storage, val]);
+
+  return [val, setVal];
+};

package/src/index.tsx

@@ -0,0 +1,7 @@
+export * from './IconButton';
+export * from './Button';
+export * from './LayoutProvider';
+export * from './types';
+export * from './StorageProvider';
+export * from './util';
+export * from './hooks';

package/src/types.ts

@@ -0,0 +1,66 @@
+import type { StoriesHash, State } from 'storybook/internal/manager-api';
+import type { StatusValue, StatusesByStoryIdAndTypeId } from 'storybook/internal/types';
+import * as Fuse from 'fuse.js';
+import { PressableProps } from 'react-native';
+
+export type Refs = State['refs'];
+export type RefType = Refs[keyof Refs] & { allStatuses?: StatusesByStoryIdAndTypeId };
+export type Item = StoriesHash[keyof StoriesHash];
+export type Dataset = Record<string, Item>;
+
+export interface CombinedDataset {
+  hash: Refs;
+  entries: [string, RefType][];
+}
+
+export interface ItemRef {
+  itemId: string;
+  refId: string;
+}
+export interface StoryRef {
+  storyId: string;
+  refId: string;
+}
+
+export type Highlight = ItemRef | null;
+export type Selection = StoryRef | null;
+
+export function isExpandType(x: any): x is ExpandType {
+  return !!(x && x.showAll);
+}
+
+export interface ExpandType {
+  showAll: () => void;
+  totalCount: number;
+  moreCount: number;
+}
+
+export type SearchItem = Item & {
+  refId: string;
+  path: string[];
+  status?: StatusValue;
+  showAll?: () => void;
+};
+
+export type SearchResult = Fuse.FuseResult<SearchItem>;
+
+export type SearchResultProps = SearchResult & {
+  icon: string;
+  isHighlighted: boolean;
+  onPress: PressableProps['onPress'];
+};
+
+export type GetSearchItemProps = (args: {
+  item: SearchResult;
+  index: number;
+  key: string;
+}) => SearchResultProps;
+
+export type SearchChildrenFn = (args: {
+  query: string;
+  results: SearchResult[]; // TODO fix this type
+  isBrowsing: boolean;
+  closeMenu: (cb?: () => void) => void;
+  getItemProps: GetSearchItemProps;
+  highlightedIndex: number | null;
+}) => React.ReactNode;