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

package/src/Search.tsx

@@ -0,0 +1,234 @@
+import { styled } from '@storybook/react-native-theming';
+import type { IFuseOptions } from 'fuse.js';
+import Fuse from 'fuse.js';
+import React, { useCallback, useDeferredValue, useRef, useState } from 'react';
+import { TextInput, View } from 'react-native';
+import { useSelectedNode } from './SelectedNodeProvider';
+import {
+  type CombinedDataset,
+  type GetSearchItemProps,
+  isExpandType,
+  type SearchChildrenFn,
+  type SearchItem,
+  type SearchResult,
+  type Selection,
+} from './types';
+import { searchItem } from './util/tree';
+import { CloseIcon, SearchIcon } from './icon/iconDataUris';
+
+const DEFAULT_MAX_SEARCH_RESULTS = 50;
+
+const options = {
+  shouldSort: true,
+  tokenize: true,
+  findAllMatches: true,
+  includeScore: true,
+  includeMatches: true,
+  threshold: 0.2,
+  location: 0,
+  distance: 100,
+  maxPatternLength: 32,
+  minMatchCharLength: 1,
+  keys: [
+    { name: 'name', weight: 0.7 },
+    { name: 'path', weight: 0.3 },
+  ],
+} as IFuseOptions<SearchItem>;
+
+const SearchIconWrapper = styled.View({
+  position: 'absolute',
+  top: 0,
+  left: 8,
+  zIndex: 1,
+  pointerEvents: 'none',
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  height: '100%',
+});
+
+const SearchField = styled.View({
+  display: 'flex',
+  flexDirection: 'column',
+  position: 'relative',
+});
+
+const Input = styled(TextInput)(({ theme }) => ({
+  height: 32,
+  paddingLeft: 28,
+  paddingRight: 28,
+  borderWidth: 1,
+  borderColor: theme.appBorderColor,
+  backgroundColor: 'transparent',
+  borderRadius: 6,
+  fontSize: theme.typography.size.s1 + 1,
+  color: theme.color.defaultText,
+  width: '100%',
+}));
+
+const ClearIcon = styled.TouchableOpacity(({ theme }) => ({
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  right: 8,
+  zIndex: 1,
+  color: theme.textMutedColor,
+  cursor: 'pointer',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: '100%',
+}));
+
+export const Search = React.memo<{
+  children: SearchChildrenFn;
+  dataset: CombinedDataset;
+  setSelection: (selection: Selection) => void;
+  getLastViewed: () => Selection[];
+  initialQuery?: string;
+}>(function Search({ children, dataset, setSelection, getLastViewed, initialQuery = '' }) {
+  const inputRef = useRef<TextInput>(null);
+  const [inputValue, setInputValue] = useState(initialQuery);
+  const [isOpen, setIsOpen] = useState(false);
+  const [allComponents, showAllComponents] = useState(false);
+  // const { isMobile } = useLayout();
+  const { scrollToSelectedNode } = useSelectedNode();
+
+  const selectStory = useCallback(
+    (id: string, refId: string) => {
+      setSelection({ storyId: id, refId });
+
+      inputRef.current?.blur();
+
+      setIsOpen(false);
+
+      showAllComponents(false);
+
+      scrollToSelectedNode();
+    },
+    [scrollToSelectedNode, setSelection]
+  );
+
+  const getItemProps: GetSearchItemProps = useCallback(
+    ({ item: result }) => {
+      return {
+        icon: result?.item?.type === 'component' ? 'component' : 'story',
+        result,
+        onPress: () => {
+          if (result?.item?.type === 'story') {
+            selectStory(result.item.id, result.item.refId);
+          } else if (result?.item?.type === 'component') {
+            selectStory(result.item.children[0], result.item.refId);
+          } else if (isExpandType(result) && result.showAll) {
+            result.showAll();
+          }
+        },
+        score: result.score,
+        refIndex: result.refIndex,
+        item: result.item,
+        matches: result.matches,
+        isHighlighted: false,
+      };
+    },
+    [selectStory]
+  );
+
+  const makeFuse = useCallback(() => {
+    const list = dataset.entries.reduce<SearchItem[]>((acc, [refId, { index }]) => {
+      if (index) {
+        acc.push(
+          ...Object.values(index).map((item) => {
+            return searchItem(item, dataset.hash[refId]);
+          })
+        );
+      }
+      return acc;
+    }, []);
+    return new Fuse(list, options);
+  }, [dataset]);
+
+  const getResults = useCallback(
+    (input: string) => {
+      const fuse = makeFuse();
+      if (!input) return [];
+
+      let results = [];
+      const resultIds: Set<string> = new Set();
+      const distinctResults = (fuse.search(input) as SearchResult[]).filter(({ item }) => {
+        if (
+          !(item.type === 'component' || item.type === 'docs' || item.type === 'story') ||
+          resultIds.has(item.parent)
+        ) {
+          return false;
+        }
+        resultIds.add(item.id);
+        return true;
+      });
+
+      if (distinctResults.length) {
+        results = distinctResults.slice(0, allComponents ? 1000 : DEFAULT_MAX_SEARCH_RESULTS);
+        if (distinctResults.length > DEFAULT_MAX_SEARCH_RESULTS && !allComponents) {
+          results.push({
+            showAll: () => showAllComponents(true),
+            totalCount: distinctResults.length,
+            moreCount: distinctResults.length - DEFAULT_MAX_SEARCH_RESULTS,
+          });
+        }
+      }
+
+      const lastViewed = !input && getLastViewed();
+      if (lastViewed && lastViewed.length) {
+        results = lastViewed.reduce((acc, { storyId, refId }) => {
+          const data = dataset.hash[refId];
+          if (data && data.index && data.index[storyId]) {
+            const story = data.index[storyId];
+            const item = story.type === 'story' ? data.index[story.parent] : story;
+            // prevent duplicates
+            if (!acc.some((res) => res.item.refId === refId && res.item.id === item.id)) {
+              acc.push({ item: searchItem(item, dataset.hash[refId]), matches: [], score: 0 });
+            }
+          }
+          return acc;
+        }, []);
+      }
+
+      return results;
+    },
+    [allComponents, dataset.hash, getLastViewed, makeFuse]
+  );
+  const deferredQuery = useDeferredValue(inputValue);
+  const input = deferredQuery ? deferredQuery.trim() : '';
+  const results = input ? getResults(input) : [];
+
+  return (
+    <View style={{ flex: 1 }}>
+      <SearchField>
+        <SearchIconWrapper>
+          <SearchIcon />
+        </SearchIconWrapper>
+
+        <Input ref={inputRef} onChangeText={setInputValue} onFocus={() => setIsOpen(true)} />
+
+        {isOpen && (
+          <ClearIcon
+            onPress={() => {
+              setInputValue('');
+              inputRef.current.clear();
+            }}
+          >
+            <CloseIcon />
+          </ClearIcon>
+        )}
+      </SearchField>
+
+      {children({
+        query: input,
+        results,
+        isBrowsing: !isOpen || !inputValue.length,
+        closeMenu: () => {},
+        getItemProps,
+        highlightedIndex: null,
+      })}
+    </View>
+  );
+});

package/src/SearchResults.stories.tsx

@@ -0,0 +1,102 @@
+import type { StoryObj, Meta } from '@storybook/react';
+import { SearchResults } from './SearchResults';
+
+const meta = {
+  component: SearchResults,
+  title: 'UI/SearchResults',
+} satisfies Meta<typeof SearchResults>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    query: 'bubble',
+    closeMenu: () => {},
+    highlightedIndex: null,
+    results: [
+      {
+        item: {
+          type: 'story',
+          id: 'nestingexample-message-bubble--first',
+          name: 'First',
+          title: 'NestingExample/Message/bubble',
+          importPath: './components/NestingExample/ChatMessageBubble.stories.tsx',
+          tags: ['story'],
+          depth: 3,
+          parent: 'nestingexample-message-bubble',
+          prepared: false,
+          refId: 'storybook_internal',
+          path: ['NestingExample', 'Message', 'bubble'],
+          status: null,
+        },
+        refIndex: 46,
+        matches: [
+          {
+            indices: [[0, 5]],
+            value: 'bubble',
+            key: 'path',
+            refIndex: 2,
+          },
+        ],
+        score: 0.000020134092876783674,
+      },
+    ],
+    getItemProps: () => ({
+      icon: 'story',
+      result: {
+        item: {
+          type: 'story',
+          id: 'nestingexample-message-bubble--first',
+          name: 'First',
+          title: 'NestingExample/Message/bubble',
+          importPath: './components/NestingExample/ChatMessageBubble.stories.tsx',
+          tags: ['story'],
+          depth: 3,
+          parent: 'nestingexample-message-bubble',
+          prepared: false,
+          refId: 'storybook_internal',
+          path: ['NestingExample', 'Message', 'bubble'],
+          status: null,
+        },
+        refIndex: 46,
+        matches: [
+          {
+            indices: [[0, 5]],
+            value: 'bubble',
+            key: 'path',
+            refIndex: 2,
+          },
+        ],
+        score: 0.000020134092876783674,
+      },
+      score: 0.000020134092876783674,
+      refIndex: 46,
+      item: {
+        type: 'story',
+        id: 'nestingexample-message-bubble--first',
+        name: 'First',
+        title: 'NestingExample/Message/bubble',
+        importPath: './components/NestingExample/ChatMessageBubble.stories.tsx',
+        tags: ['story'],
+        depth: 3,
+        parent: 'nestingexample-message-bubble',
+        prepared: false,
+        refId: 'storybook_internal',
+        path: ['NestingExample', 'Message', 'bubble'],
+        status: null,
+      },
+      matches: [
+        {
+          indices: [[0, 5]],
+          value: 'bubble',
+          key: 'path',
+          refIndex: 2,
+        },
+      ],
+      isHighlighted: false,
+      onPress: () => {},
+    }),
+  },
+};

package/src/SearchResults.tsx

@@ -0,0 +1,254 @@
+import { styled } from '@storybook/react-native-theming';
+import type { FC, PropsWithChildren, ReactNode } from 'react';
+import React, { useCallback } from 'react';
+import { transparentize } from 'polished';
+import type { GetSearchItemProps, SearchResult, SearchResultProps } from './types';
+import { isExpandType } from './types';
+
+import { FuseResultMatch } from 'fuse.js';
+import { PressableProps, View } from 'react-native';
+import { Button } from './Button';
+import { IconButton } from './IconButton';
+
+import { statusMapping } from './util/status';
+import { ComponentIcon, StoryIcon } from './icon/iconDataUris';
+
+const ResultsList = styled.View({
+  margin: 0,
+  padding: 0,
+  marginTop: 8,
+});
+
+const ResultRow = styled.TouchableOpacity<{ isHighlighted: boolean }>(
+  ({ theme, isHighlighted }) => ({
+    width: '100%',
+    border: 'none',
+    cursor: 'pointer',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    textAlign: 'left',
+    color: theme.color.defaultText,
+    fontSize: theme.typography.size.s2,
+    backgroundColor: isHighlighted ? theme.background.hoverable : 'transparent',
+    minHeight: 28,
+    borderRadius: 4,
+    gap: 6,
+    paddingTop: 7,
+    paddingBottom: 7,
+    paddingLeft: 8,
+    paddingRight: 8,
+
+    '&:hover, &:focus': {
+      backgroundColor: transparentize(0.93, theme.color.secondary),
+      outline: 'none',
+    },
+  })
+);
+
+const IconWrapper = styled.View({
+  marginTop: 2,
+});
+
+const ResultRowContent = styled.View(() => ({
+  display: 'flex',
+  flexDirection: 'column',
+}));
+
+const NoResults = styled.View(({ theme }) => ({
+  marginTop: 20,
+  textAlign: 'center',
+  fontSize: theme.typography.size.s2,
+  lineHeight: 18,
+  color: theme.color.defaultText,
+}));
+
+const Mark = styled.Text(({ theme }) => ({
+  backgroundColor: 'transparent',
+  color: theme.color.secondary,
+}));
+
+const MoreWrapper = styled.View({
+  marginTop: 8,
+});
+
+const RecentlyOpenedTitle = styled.View(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+  fontSize: theme.typography.size.s1 - 1,
+  fontWeight: theme.typography.weight.bold,
+  minHeight: 28,
+  // letterSpacing: '0.16em', <-- todo
+  textTransform: 'uppercase',
+  color: theme.textMutedColor,
+  marginTop: 16,
+  marginBottom: 4,
+  alignItems: 'center',
+}));
+
+const Highlight: FC<PropsWithChildren<{ match?: FuseResultMatch }>> = React.memo(
+  function Highlight({ children, match }) {
+    if (!match) return children;
+    const { value, indices } = match;
+
+    const { nodes: result } = indices.reduce<{ cursor: number; nodes: ReactNode[] }>(
+      ({ cursor, nodes }, [start, end], index, { length }) => {
+        nodes.push(<Text key={`text-${index}`}>{value.slice(cursor, start)}</Text>);
+        nodes.push(<Mark key={`mark-${index}`}>{value.slice(start, end + 1)}</Mark>);
+        if (index === length - 1) {
+          nodes.push(<Text key={`last-${index}`}>{value.slice(end + 1)}</Text>);
+        }
+        return { cursor: end + 1, nodes };
+      },
+      { cursor: 0, nodes: [] }
+    );
+    return <Text key={`end-${match.key}`}>{result}</Text>;
+  }
+);
+
+const Title = styled.Text(({ theme }) => ({
+  justifyContent: 'flex-start',
+  color: theme.textMutedColor,
+  fontSize: theme.typography.size.s2,
+}));
+
+const Path = styled.View(({ theme }) => ({
+  justifyContent: 'flex-start',
+  marginVertical: 2,
+  color: theme.textMutedColor,
+  fontSize: theme.typography.size.s1 - 1,
+  flexDirection: 'row',
+}));
+
+const PathText = styled.Text(({ theme }) => ({
+  fontSize: theme.typography.size.s1 - 1,
+  color: theme.textMutedColor,
+}));
+
+const Result: FC<SearchResultProps> = React.memo(function Result({
+  item,
+  matches,
+  icon: _icon,
+  onPress,
+  ...props
+}) {
+  const press: PressableProps['onPress'] = useCallback(
+    (event) => {
+      event.preventDefault();
+      onPress?.(event);
+    },
+    [onPress]
+  );
+
+  const nameMatch = matches.find((match: FuseResultMatch) => match.key === 'name');
+  const pathMatches = matches.filter((match: FuseResultMatch) => match.key === 'path');
+
+  const [i] = item.status ? statusMapping[item.status] : [];
+
+  return (
+    <ResultRow {...props} onPress={press}>
+      <IconWrapper>
+        {item.type === 'component' && <ComponentIcon width={14} height={14} />}
+        {item.type === 'story' && <StoryIcon width={14} height={14} />}
+      </IconWrapper>
+      <ResultRowContent testID="search-result-item--label">
+        <Title>
+          <Highlight key="search-result-item--label-highlight" match={nameMatch}>
+            {item.name}
+          </Highlight>
+        </Title>
+        <Path>
+          {item.path.map((group, index) => {
+            const pathSeparator = index === item.path.length - 1 ? '' : '/';
+            return (
+              <View key={index} style={{ flexShrink: 1 }}>
+                <PathText>
+                  <Highlight
+                    match={pathMatches.find((match: FuseResultMatch) => match.refIndex === index)}
+                  >
+                    {`${group}${pathSeparator}`}
+                  </Highlight>
+                </PathText>
+              </View>
+            );
+          })}
+        </Path>
+      </ResultRowContent>
+      {item.status ? i : null}
+    </ResultRow>
+  );
+});
+
+const Text = styled.Text(({ theme }) => ({
+  color: theme.color.defaultText,
+}));
+
+export const SearchResults: FC<{
+  query: string;
+  results: SearchResult[];
+  closeMenu: (cb?: () => void) => void;
+  getItemProps: GetSearchItemProps;
+  highlightedIndex: number | null;
+  isLoading?: boolean;
+  enableShortcuts?: boolean;
+  clearLastViewed?: () => void;
+}> = React.memo(function SearchResults({
+  query,
+  results,
+  closeMenu,
+  getItemProps,
+  highlightedIndex,
+  clearLastViewed,
+}) {
+  const handleClearLastViewed = () => {
+    clearLastViewed();
+    closeMenu();
+  };
+
+  return (
+    <ResultsList>
+      {results.length > 0 && !query ? (
+        <RecentlyOpenedTitle>
+          <Text>Recently opened</Text>
+          <IconButton onPress={handleClearLastViewed} />
+        </RecentlyOpenedTitle>
+      ) : null}
+
+      {results.length === 0 && query ? (
+        <View>
+          <NoResults>
+            <Text style={{ marginBottom: 8 }}>No components found</Text>
+            <Text>Find components by name or path.</Text>
+          </NoResults>
+        </View>
+      ) : null}
+
+      {results.map((result, index) => {
+        if (isExpandType(result)) {
+          return (
+            <MoreWrapper key="search-result-expand">
+              <Button
+                {...result}
+                {...getItemProps({ key: `${index}`, index, item: result })}
+                size="small"
+                text={`Show ${result.moreCount} more results`}
+              />
+            </MoreWrapper>
+          );
+        }
+
+        const { item } = result;
+        const key = `${item.refId}::${item.id}`;
+        return (
+          <Result
+            {...result}
+            {...getItemProps({ key, index, item: result })}
+            isHighlighted={highlightedIndex === index}
+            key={item.id}
+          />
+        );
+      })}
+    </ResultsList>
+  );
+});

package/src/SelectedNodeProvider.tsx

@@ -0,0 +1,58 @@
+import type { FC, PropsWithChildren } from 'react';
+import { createContext, useCallback, useContext, useRef } from 'react';
+import type { ScrollView, View } from 'react-native';
+
+type SelectedNodeContextType = {
+  nodeRef: React.RefObject<View>;
+  setNodeRef: (node: View | null) => void;
+  scrollToSelectedNode: () => void;
+  scrollRef: React.RefObject<ScrollView>;
+};
+
+const SelectedNodeContext = createContext<SelectedNodeContextType>({
+  nodeRef: { current: null },
+  setNodeRef: () => {},
+  scrollToSelectedNode: () => {},
+  scrollRef: null,
+});
+
+export const SelectedNodeProvider: FC<PropsWithChildren> = ({ children }) => {
+  const nodeRef = useRef<View | null>(null);
+
+  const setNodeRef = useCallback((node: View | null) => {
+    nodeRef.current = node;
+  }, []);
+
+  const scrollRef = useRef<ScrollView>(null);
+
+  const scrollToSelectedNode = useCallback(() => {
+    // maybe later we can improve on this to not use setTimeout but right now it seems like the simplest solution
+    setTimeout(() => {
+      if (nodeRef?.current && scrollRef?.current) {
+        // im just not sure if older versions would error here,
+        // since measure layout probably changed since new arch
+        try {
+          nodeRef.current.measureLayout?.(scrollRef.current as any, (_x, y) => {
+            scrollRef.current?.scrollTo({ y: y - 100, animated: true });
+          });
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        } catch (_error) {}
+      }
+    }, 500);
+  }, []);
+
+  return (
+    <SelectedNodeContext.Provider
+      value={{
+        nodeRef,
+        setNodeRef,
+        scrollToSelectedNode,
+        scrollRef,
+      }}
+    >
+      {children}
+    </SelectedNodeContext.Provider>
+  );
+};
+
+export const useSelectedNode = () => useContext(SelectedNodeContext);