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

package/src/Sidebar.stories.tsx

@@ -0,0 +1,188 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import type { IndexHash, State } from 'storybook/internal/manager-api';
+import { Button } from './Button';
+import { LayoutProvider } from './LayoutProvider';
+import { Sidebar } from './Sidebar';
+import { DEFAULT_REF_ID } from './constants';
+import { mockDataset } from './mockdata';
+import type { RefType } from './types';
+
+const index = mockDataset.withRoot as IndexHash;
+const storyId = 'root-1-child-a2--grandchild-a1-1';
+
+const meta = {
+  component: Sidebar,
+  title: 'UI/Sidebar/Sidebar',
+  excludeStories: /.*Data$/,
+  parameters: { layout: 'fullscreen' },
+  args: {
+    previewInitialized: true,
+    index: index,
+    storyId,
+    refId: DEFAULT_REF_ID,
+    refs: {},
+    status: {},
+    setSelection: () => {},
+  },
+  decorators: [(storyFn) => <LayoutProvider>{storyFn()}</LayoutProvider>],
+} satisfies Meta<typeof Sidebar>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const refs: Record<string, RefType> = {
+  optimized: {
+    id: 'optimized',
+    title: 'This is a ref',
+    url: 'https://example.com',
+    type: 'lazy',
+    index,
+    previewInitialized: true,
+  },
+};
+
+const indexError = new Error('Failed to load index');
+
+const refsError = {
+  optimized: {
+    ...refs.optimized,
+    index: undefined as IndexHash,
+    indexError,
+  },
+};
+
+const refsEmpty = {
+  optimized: {
+    ...refs.optimized,
+    index: {} as IndexHash,
+  },
+};
+
+export const Simple: Story = {};
+
+export const Loading: Story = {
+  args: {
+    previewInitialized: false,
+    index: undefined,
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    index: {},
+  },
+};
+
+export const IndexError: Story = {
+  args: {
+    indexError,
+  },
+};
+
+export const WithRefs: Story = {
+  args: {
+    refs,
+  },
+};
+
+export const LoadingWithRefs: Story = {
+  args: {
+    ...Loading.args,
+    refs,
+  },
+};
+
+export const LoadingWithRefError: Story = {
+  args: {
+    ...Loading.args,
+    refs: refsError,
+  },
+};
+
+export const WithRefEmpty: Story = {
+  args: {
+    ...Empty.args,
+    refs: refsEmpty,
+  },
+};
+
+export const StatusesCollapsed: Story = {
+  args: {
+    status: Object.entries(index).reduce<State['status']>((acc, [id, item]) => {
+      if (item.type !== 'story') {
+        return acc;
+      }
+
+      if (item.name.includes('B')) {
+        return {
+          ...acc,
+          [id]: {
+            addonA: { status: 'warn', title: 'Addon A', description: 'We just wanted you to know' },
+            addonB: { status: 'error', title: 'Addon B', description: 'This is a big deal!' },
+          },
+        };
+      }
+      return acc;
+    }, {}),
+  },
+};
+
+export const StatusesOpen: Story = {
+  ...StatusesCollapsed,
+  args: {
+    ...StatusesCollapsed.args,
+    status: Object.entries(index).reduce<State['status']>((acc, [id, item]) => {
+      if (item.type !== 'story') {
+        return acc;
+      }
+
+      return {
+        ...acc,
+        [id]: {
+          addonA: { status: 'warn', title: 'Addon A', description: 'We just wanted you to know' },
+          addonB: { status: 'error', title: 'Addon B', description: 'This is a big deal!' },
+        },
+      };
+    }, {}),
+  },
+};
+
+export const Searching: Story = {
+  ...StatusesOpen,
+  parameters: { chromatic: { delay: 2200 } },
+};
+
+/**
+ * Given the following sequence of events:
+ * 1. Story is selected at the top of the sidebar
+ * 2. The sidebar is scrolled to the bottom
+ * 3. Some re-rendering happens because of a changed state/prop
+ * The sidebar should remain scrolled to the bottom
+ */
+export const Scrolled: Story = {
+  parameters: {
+    // we need a very short viewport
+    viewport: {
+      defaultViewport: 'mobile1',
+      defaultOrientation: 'landscape',
+    },
+  },
+  args: {
+    storyId: 'group-1--child-b1',
+  },
+  render: function Render(args) {
+    const [, setState] = React.useState(0);
+    return (
+      <>
+        <Button
+          style={{ position: 'absolute', zIndex: 10 }}
+          onPress={() => setState(() => Math.random())}
+          text="Change state"
+        />
+        <Sidebar {...args} />
+      </>
+    );
+  },
+};

package/src/Sidebar.tsx

@@ -0,0 +1,131 @@
+import React, { useMemo } from 'react';
+import { styled } from '@storybook/react-native-theming';
+import type { State } from 'storybook/internal/manager-api';
+import type { API_LoadedRefData } from 'storybook/internal/types';
+import { Explorer } from './Explorer';
+import { Search } from './Search';
+import { SearchResults } from './SearchResults';
+import type { CombinedDataset, Selection } from './types';
+import { useLastViewed } from './hooks/useLastViewed';
+import { DEFAULT_REF_ID } from './constants';
+import { View } from 'react-native';
+
+const Container = styled.View(({ theme }) => ({
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  backgroundColor: theme.background.content,
+}));
+
+const Top = styled.View({
+  paddingLeft: 4,
+  paddingRight: 4,
+  paddingTop: 16,
+  flex: 1,
+  flexDirection: 'row',
+});
+
+const Swap = React.memo(function Swap({
+  children,
+  condition,
+}: {
+  children: React.ReactNode;
+  condition: boolean;
+}) {
+  const [a, b] = React.Children.toArray(children);
+  return (
+    <>
+      <View style={{ display: condition ? 'flex' : 'none' }}>{a}</View>
+      <View style={{ display: condition ? 'none' : 'flex' }}>{b}</View>
+    </>
+  );
+});
+
+export const useCombination = (
+  index: SidebarProps['index'],
+  indexError: SidebarProps['indexError'],
+  previewInitialized: SidebarProps['previewInitialized'],
+  status: SidebarProps['status'],
+  refs: SidebarProps['refs']
+): CombinedDataset => {
+  const hash = useMemo(
+    () => ({
+      [DEFAULT_REF_ID]: {
+        index,
+        indexError,
+        previewInitialized,
+        status,
+        title: null,
+        id: DEFAULT_REF_ID,
+        url: 'iframe.html',
+      },
+      ...refs,
+    }),
+    [refs, index, indexError, previewInitialized, status]
+  );
+  return useMemo(() => ({ hash, entries: Object.entries(hash) }), [hash]);
+};
+
+export interface SidebarProps extends API_LoadedRefData {
+  refs: State['refs'];
+  status: State['status'];
+  storyId?: string;
+  refId?: string;
+  menuHighlighted?: boolean;
+  setSelection: (selection: Selection) => void;
+}
+
+export const Sidebar = React.memo(function Sidebar({
+  storyId = null,
+  refId = DEFAULT_REF_ID,
+  index,
+  indexError,
+  status,
+  previewInitialized,
+  refs = {},
+  setSelection,
+}: SidebarProps) {
+  const selected: Selection = useMemo(() => storyId && { storyId, refId }, [storyId, refId]);
+  const dataset = useCombination(index, indexError, previewInitialized, status, refs);
+  const lastViewedProps = useLastViewed(selected);
+
+  return (
+    <Container style={{ paddingHorizontal: 10 }}>
+      <Top>
+        {/* <Heading
+            className="sidebar-header"
+            menuHighlighted={menuHighlighted}
+            menu={menu}
+            extra={extra}
+            skipLinkHref="#storybook-preview-wrapper"
+            isLoading={isLoading}
+            onMenuClick={onMenuClick}
+          /> */}
+        <Search dataset={dataset} setSelection={setSelection} {...lastViewedProps}>
+          {({ query, results, isBrowsing, closeMenu, getItemProps, highlightedIndex }) => (
+            <Swap condition={isBrowsing}>
+              <Explorer
+                dataset={dataset}
+                selected={selected}
+                isLoading={false}
+                isBrowsing={isBrowsing} //todo check me
+                setSelection={setSelection}
+              />
+
+              <SearchResults
+                query={query}
+                results={results}
+                closeMenu={closeMenu}
+                getItemProps={getItemProps}
+                highlightedIndex={highlightedIndex}
+                isLoading={false}
+                clearLastViewed={lastViewedProps.clearLastViewed}
+              />
+            </Swap>
+          )}
+        </Search>
+      </Top>
+    </Container>
+  );
+});

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/StorybookLogo.stories.tsx

@@ -0,0 +1,76 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { StorybookLogo } from './StorybookLogo';
+import { Theme, theme } from '@storybook/react-native-theming';
+import { Text } from 'react-native';
+
+const meta = {
+  component: StorybookLogo,
+  title: 'UI/StorybookLogo',
+  args: {
+    theme: null,
+  },
+} satisfies Meta<typeof StorybookLogo>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const TitleLogo: Story = {
+  args: {
+    theme: {
+      ...theme,
+      brand: { title: 'React Native' },
+    } satisfies Theme,
+  },
+};
+
+export const ImageLogo: Story = {
+  args: {
+    theme: {
+      ...theme,
+      brand: {
+        image: {
+          uri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/512px-React-icon.svg.png',
+          height: 25,
+          width: 25,
+        },
+      },
+    } satisfies Theme,
+  },
+};
+
+export const ImageUrlLogo: Story = {
+  args: {
+    theme: {
+      ...theme,
+      brand: {
+        image: {
+          uri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/512px-React-icon.svg.png',
+          width: 25,
+          height: 25,
+        },
+        title: 'React Native',
+        url: 'https://reactnative.dev',
+      },
+    } satisfies Theme,
+  },
+};
+
+export const ImageSourceLogo: Story = {
+  args: {
+    theme: {
+      ...theme,
+      brand: {
+        image: require('./assets/react-native-logo.png'),
+        resizeMode: 'contain',
+        url: 'https://reactnative.dev',
+      },
+    } satisfies Theme,
+  },
+};
+
+export const ImageElementLogo: Story = {
+  args: {
+    theme: { ...theme, brand: { image: <Text>Element</Text> } } satisfies Theme,
+  },
+};

package/src/StorybookLogo.tsx

@@ -0,0 +1,108 @@
+import { Theme } from '@storybook/react-native-theming';
+import { FC, isValidElement, ReactElement, useEffect, useMemo } from 'react';
+import { Image, Linking, StyleProp, Text, TextStyle, TouchableOpacity } from 'react-native';
+import { DarkLogo, Logo } from './icon/iconDataUris';
+
+const WIDTH = 125;
+const HEIGHT = 25;
+
+const NoBrandLogo: FC<{ theme: Theme }> = ({ theme }) =>
+  theme.base === 'light' ? (
+    <Logo height={HEIGHT} width={WIDTH} />
+  ) : (
+    <DarkLogo height={HEIGHT} width={WIDTH} />
+  );
+
+function isElement(value: unknown): value is ReactElement {
+  return isValidElement(value);
+}
+
+const BrandLogo: FC<{ theme: Theme }> = ({ theme }) => {
+  const imageHasNoWidthOrHeight =
+    typeof theme.brand.image === 'object' &&
+    typeof theme.brand.image === 'object' &&
+    'uri' in theme.brand.image &&
+    (!('height' in theme.brand.image) || !('width' in theme.brand.image));
+
+  useEffect(() => {
+    if (imageHasNoWidthOrHeight) {
+      console.warn(
+        "STORYBOOK: When using a remote image as the brand logo, you must also set the width and height.\nFor example:  brand: { image: { uri: 'https://sb.com/img.png', height: 25, width: 25}}"
+      );
+    }
+  }, [imageHasNoWidthOrHeight]);
+
+  if (!theme.brand.image) {
+    return null;
+  }
+
+  if (isElement(theme.brand.image)) {
+    return theme.brand.image;
+  }
+
+  const image = (
+    <Image
+      source={theme.brand.image}
+      resizeMode={theme.brand.resizeMode ?? 'contain'}
+      style={imageHasNoWidthOrHeight ? { width: WIDTH, height: HEIGHT } : undefined}
+    />
+  );
+
+  if (theme.brand.url) {
+    return (
+      <TouchableOpacity
+        onPress={() => {
+          if (theme.brand.url) Linking.openURL(theme.brand.url);
+        }}
+      >
+        {image}
+      </TouchableOpacity>
+    );
+  } else {
+    return image;
+  }
+};
+
+const BrandTitle: FC<{ theme: Theme }> = ({ theme }) => {
+  const brandTitleStyle = useMemo<StyleProp<TextStyle>>(() => {
+    return {
+      width: WIDTH,
+      height: HEIGHT,
+      color: theme.color.defaultText,
+      fontSize: theme.typography.size.m1,
+    };
+  }, [theme]);
+
+  const title = (
+    <Text style={brandTitleStyle} numberOfLines={1} ellipsizeMode="tail">
+      {theme.brand.title}
+    </Text>
+  );
+
+  if (theme.brand.url) {
+    return (
+      <TouchableOpacity
+        onPress={() => {
+          if (theme.brand.url) Linking.openURL(theme.brand.url);
+        }}
+      >
+        {title}
+      </TouchableOpacity>
+    );
+  } else {
+    return title;
+  }
+};
+
+export const StorybookLogo: FC<{ theme: Theme }> = ({ theme }) => {
+  const image = useMemo(() => theme.brand?.image, [theme.brand?.image]);
+  const title = useMemo(() => theme.brand?.title, [theme.brand?.title]);
+
+  if (image) {
+    return <BrandLogo theme={theme} />;
+  } else if (title) {
+    return <BrandTitle theme={theme} />;
+  } else {
+    return <NoBrandLogo theme={theme} />;
+  }
+};

package/src/Tree.stories.tsx

@@ -0,0 +1,177 @@
+import { useState } from 'react';
+import type { ComponentEntry, IndexHash } from 'storybook/internal/manager-api';
+import type { StoryObj, Meta } from '@storybook/react';
+import { Tree } from './Tree';
+import type { Dataset } from './types';
+import { index } from './mockdata.large';
+import { DEFAULT_REF_ID } from './constants';
+import { ScrollView, Text } from 'react-native';
+
+const customViewports = {
+  sized: {
+    name: 'Sized',
+    styles: {
+      width: '380px',
+      height: '90%',
+    },
+  },
+};
+
+const meta = {
+  component: Tree,
+  title: 'UI/Sidebar/Tree',
+  excludeStories: /.*Data$/,
+  parameters: {
+    layout: 'fullscreen',
+    theme: 'light',
+    viewport: {
+      defaultViewport: 'sized',
+      viewports: customViewports,
+    },
+  },
+  decorators: [
+    (Story) => (
+      <ScrollView>
+        <Story />
+      </ScrollView>
+    ),
+  ],
+} satisfies Meta<typeof Tree>;
+
+export default meta;
+
+const storyId = Object.values(index).find((story) => story.type === 'story').id;
+
+type Story = StoryObj<typeof meta>;
+
+export const Full: Story = {
+  args: {
+    docsMode: false,
+    isBrowsing: true,
+    isMain: true,
+    refId: DEFAULT_REF_ID,
+    data: undefined,
+    onSelectStoryId: () => {},
+    selectedStoryId: storyId,
+    status: undefined,
+  },
+  render: function Render(args) {
+    const [selectedId, setSelectedId] = useState(storyId);
+    return (
+      <Tree {...args} data={index} selectedStoryId={selectedId} onSelectStoryId={setSelectedId} />
+    );
+  },
+};
+export const Dark: Story = {
+  ...Full,
+  parameters: { theme: 'dark' },
+};
+
+export const SingleStoryComponents: Story = {
+  args: {
+    docsMode: false,
+    isBrowsing: true,
+    isMain: true,
+    refId: DEFAULT_REF_ID,
+    data: undefined,
+    onSelectStoryId: () => {},
+    selectedStoryId: storyId,
+    status: undefined,
+  },
+  render: function Render(args) {
+    const [selectedId, setSelectedId] = useState('tooltip-tooltipbuildlist--default');
+    return (
+      <Tree
+        {...args}
+        data={{
+          ...{
+            single: {
+              tags: [],
+              type: 'component',
+              name: 'Single',
+              id: 'single',
+              parent: null,
+              depth: 0,
+              children: ['single--single'],
+              renderLabel: () => <Text>🔥 Single</Text>,
+            },
+            'single--single': {
+              type: 'story',
+              id: 'single--single',
+              title: 'Single',
+              name: 'Single',
+              tags: [],
+              prepared: true,
+              args: {},
+              argTypes: {},
+              initialArgs: {},
+              depth: 1,
+              parent: 'single',
+              renderLabel: () => <Text>🔥 Single</Text>,
+              importPath: './single.stories.js',
+            },
+          },
+          ...Object.keys(index).reduce((acc, key) => {
+            if (key === 'tooltip-tooltipselect--default') {
+              acc['tooltip-tooltipselect--tooltipselect'] = {
+                ...index[key],
+                id: 'tooltip-tooltipselect--tooltipselect',
+                name: 'TooltipSelect',
+              };
+              return acc;
+            }
+            if (key === 'tooltip-tooltipselect') {
+              acc[key] = {
+                ...(index[key] as ComponentEntry),
+                children: ['tooltip-tooltipselect--tooltipselect'],
+              };
+              return acc;
+            }
+            if (key.startsWith('tooltip')) {
+              acc[key] = index[key];
+            }
+            return acc;
+          }, {} as IndexHash),
+        }}
+        selectedStoryId={selectedId}
+        onSelectStoryId={setSelectedId}
+      />
+    );
+  },
+};
+
+const dataWithStoryName: Dataset = {
+  images: {
+    name: 'Testing storyNames support',
+    id: 'images',
+    depth: 0,
+    children: [],
+    type: 'component',
+    tags: [],
+  },
+};
+
+export const WithStoryNames: Story = {
+  name: 'Story with a storyName',
+  args: {
+    docsMode: false,
+    isBrowsing: true,
+    isMain: true,
+    refId: DEFAULT_REF_ID,
+    data: undefined,
+    onSelectStoryId: () => {},
+    selectedStoryId: 'some-component',
+    status: undefined,
+  },
+  render: function Render(args) {
+    const [selectedId, setSelectedId] = useState(storyId);
+    return (
+      <Tree
+        {...args}
+        data={dataWithStoryName}
+        selectedStoryId={selectedId}
+        onSelectStoryId={setSelectedId}
+      />
+    );
+  },
+};