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

package/src/Sidebar.stories.tsx

@@ -0,0 +1,262 @@
+import React from 'react';
+
+import type { IndexHash, State } from '@storybook/manager-api';
+import { /* ManagerContext */ types } from '@storybook/manager-api';
+import type { StoryObj, Meta } from '@storybook/react';
+import type { Addon_SidebarTopType } from '@storybook/types';
+
+import { Sidebar } from './Sidebar';
+// import { standardData as standardHeaderData } from './Heading.stories';
+import { mockDataset } from './mockdata';
+import type { RefType } from './types';
+import { LayoutProvider } from './LayoutProvider';
+import { Button } from './Button';
+import { IconButton } from './IconButton';
+import { FaceHappyIcon } from './icon/FaceHappyIcon';
+import { DEFAULT_REF_ID } from './constants';
+
+// const menuItems = [
+//   { title: 'Menu Item 1', onClick: () => console.log('onActivateMenuItem'), id: '1' },
+//   { title: 'Menu Item 2', onClick: () => console.log('onActivateMenuItem'), id: '2' },
+//   { title: 'Menu Item 3', onClick: () => console.log('onActivateMenuItem'), id: '3' },
+// ];
+// export const menu = menuItems;
+const index = mockDataset.withRoot as IndexHash;
+const storyId = 'root-1-child-a2--grandchild-a1-1';
+
+// export const simpleData = { menu, index, storyId };
+// export const loadingData = { menu };
+
+const meta = {
+  component: Sidebar,
+  title: 'UI/Sidebar/Sidebar',
+  excludeStories: /.*Data$/,
+  parameters: { layout: 'fullscreen' },
+  args: {
+    previewInitialized: true,
+    // menu,
+    extra: [] as Addon_SidebarTopType[],
+    index: index,
+    storyId,
+    refId: DEFAULT_REF_ID,
+    refs: {},
+    status: {},
+    setSelection: () => {},
+  },
+  decorators: [
+    (storyFn) => (
+      //   <ManagerContext.Provider
+      //     value={
+      //       {
+      //         state: {
+      //           docsOptions: {
+      //             defaultName: 'Docs',
+      //             autodocs: 'tag',
+      //             docsMode: false,
+      //           },
+      //         },
+      //         api: {
+      //           emit: () => {},
+      //           on: () => {},
+      //           off: () => {},
+      //           getShortcutKeys: () => ({ search: ['control', 'shift', 's'] }),
+      //         },
+      //       } as any
+      //     }
+      //   >
+      <LayoutProvider>{storyFn()}</LayoutProvider>
+      //   </ManagerContext.Provider>
+    ),
+  ],
+} 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,
+    // type: 'auto-inject',
+    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 } },
+};
+
+export const Bottom: Story = {
+  args: {
+    bottom: [
+      {
+        id: '1',
+        type: types.experimental_SIDEBAR_BOTTOM,
+        render: () => (
+          <Button>
+            <FaceHappyIcon />
+            Custom addon A
+          </Button>
+        ),
+      },
+      {
+        id: '2',
+        type: types.experimental_SIDEBAR_BOTTOM,
+        render: () => <Button text="Custom addon B" Icon={FaceHappyIcon} />,
+      },
+      {
+        id: '3',
+        type: types.experimental_SIDEBAR_BOTTOM,
+        render: () => (
+          <IconButton>
+            <FaceHappyIcon />
+          </IconButton>
+        ),
+      },
+    ],
+  },
+};
+
+/**
+ * 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,200 @@
+import React, { useMemo } from 'react';
+
+import { styled } from '@storybook/react-native-theming';
+// import { ScrollArea, Spaced } from '@storybook/components';
+import type { State } from '@storybook/manager-api';
+
+import type {
+  Addon_SidebarBottomType,
+  Addon_SidebarTopType,
+  API_LoadedRefData,
+} from '@storybook/types';
+// import type { HeadingProps } from './Heading';
+// import { Heading } from './Heading';
+
+import { Explorer } from './Explorer';
+
+import { Search } from './Search';
+
+import { SearchResults } from './SearchResults';
+import type { CombinedDataset, Selection } from './types';
+import { useLastViewed } from './useLastViewed';
+import { DEFAULT_REF_ID } from './constants';
+import { View } from 'react-native';
+
+const Container = styled.View(({ theme }) => ({
+  // position: 'absolute',
+  // zIndex: 1,
+  // left: 0,
+  // top: 0,
+  // bottom: 0,
+  // right: 0,
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  background: theme.background.content,
+
+  // [MEDIA_DESKTOP_BREAKPOINT]: {
+  //   background: theme.background.app,
+  // },
+}));
+
+const Top = styled.View({
+  paddingLeft: 4,
+  paddingRight: 4,
+  // paddingBottom: 20,
+  paddingTop: 16,
+  flex: 1,
+  flexDirection: 'row',
+});
+
+// const Bottom = styled.View(({ theme }) => ({
+//   borderTopWidth: 1,
+//   borderTopColor: theme.appBorderColor,
+//   padding: theme.layoutMargin / 2,
+//   display: 'flex',
+//   flexDirection: 'row',
+//   flexWrap: 'wrap',
+//   gap: theme.layoutMargin / 2,
+//   backgroundColor: theme.barBg,
+// }));
+
+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'];
+  // menu: any[];
+  extra: Addon_SidebarTopType[];
+  bottom?: Addon_SidebarBottomType[];
+  storyId?: string;
+  refId?: string;
+  menuHighlighted?: boolean;
+  setSelection: (selection: Selection) => void;
+  // enableShortcuts?: boolean;
+  // onMenuClick?: HeadingProps['onMenuClick'];
+}
+
+export const Sidebar = React.memo(function Sidebar({
+  storyId = null,
+  refId = DEFAULT_REF_ID,
+  index,
+  indexError,
+  status,
+  previewInitialized,
+  // menu,
+  // extra,
+  // bottom = [],
+  // menuHighlighted = false,
+  // enableShortcuts = true,
+  refs = {},
+  setSelection,
+}: // onMenuClick,
+SidebarProps) {
+  const selected: Selection = useMemo(() => storyId && { storyId, refId }, [storyId, refId]);
+  const dataset = useCombination(index, indexError, previewInitialized, status, refs);
+  // const isLoading = !index && !indexError;
+  const lastViewedProps = useLastViewed(selected);
+
+  // const scrollRef = useRef<ScrollView>(null);
+  // const insets = useSafeAreaInsets();
+  return (
+    <Container style={{ paddingHorizontal: 10 }} /* className="container sidebar-container" */>
+      <Top /* row={1.6} */>
+        {/* <Heading
+            className="sidebar-header"
+            menuHighlighted={menuHighlighted}
+            menu={menu}
+            extra={extra}
+            skipLinkHref="#storybook-preview-wrapper"
+            isLoading={isLoading}
+            onMenuClick={onMenuClick}
+          /> */}
+        <Search
+          dataset={dataset}
+          setSelection={setSelection}
+          /* enableShortcuts={enableShortcuts} */ {...lastViewedProps}
+        >
+          {({
+            query,
+            results,
+            isBrowsing,
+            closeMenu,
+            // getMenuProps,
+            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}
+                // getMenuProps={getMenuProps}
+                getItemProps={getItemProps}
+                highlightedIndex={highlightedIndex}
+                // enableShortcuts={enableShortcuts}
+                isLoading={false}
+                clearLastViewed={lastViewedProps.clearLastViewed}
+              />
+            </Swap>
+          )}
+        </Search>
+      </Top>
+      {/* {isLoading ? null : (
+        <Bottom>
+          {bottom.map(({ id, render: Render }) => (
+            <Render key={id} />
+          ))}
+        </Bottom>
+      )} */}
+    </Container>
+  );
+});

package/src/Tree.stories.tsx

@@ -0,0 +1,139 @@
+import { useState } from 'react';
+import type { ComponentEntry, IndexHash } from '@storybook/manager-api';
+
+import type { StoryObj, Meta } from '@storybook/react';
+import { Tree } from './Tree';
+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>
+    ),
+  ],
+} as 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,
+  },
+  render: function Render(args) {
+    const [selectedId, setSelectedId] = useState(storyId);
+    return (
+      <Tree
+        {...args}
+        data={index}
+        selectedStoryId={selectedId}
+        onSelectStoryId={setSelectedId}
+        // highlightedRef={{ current: { itemId: selectedId, refId: DEFAULT_REF_ID } }}
+      />
+    );
+  },
+};
+export const Dark: Story = {
+  ...Full,
+  parameters: { theme: 'dark' },
+};
+
+export const SingleStoryComponents: Story = {
+  args: {
+    docsMode: false,
+    isBrowsing: true,
+    isMain: true,
+    refId: DEFAULT_REF_ID,
+  },
+  render: function Render(args) {
+    const [selectedId, setSelectedId] = useState('tooltip-tooltipbuildlist--default');
+    return (
+      <Tree
+        {...args}
+        data={{
+          ...{
+            single: {
+              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),
+        }}
+        // highlightedRef={{ current: { itemId: selectedId, refId: DEFAULT_REF_ID } }}
+        selectedStoryId={selectedId}
+        onSelectStoryId={setSelectedId}
+      />
+    );
+  },
+};