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

package/src/Search.tsx

@@ -0,0 +1,336 @@
+import { useStorybookApi /* shortcutToHumanString */ } from '@storybook/manager-api';
+import { styled } from '@storybook/react-native-theming';
+// import type { DownshiftState, StateChangeOptions } from 'downshift';
+// import Downshift from 'downshift';
+import type { IFuseOptions } from 'fuse.js';
+import Fuse from 'fuse.js';
+// import { global } from '@storybook/global';
+import React, { useRef, useState, useCallback } from 'react';
+// import { CloseIcon, SearchIcon } from '@storybook/icons';
+// import { DEFAULT_REF_ID } from './constants';
+import {
+  type CombinedDataset,
+  type SearchItem,
+  type SearchResult,
+  // DownshiftItem,
+  type SearchChildrenFn,
+  type Selection,
+  type GetSearchItemProps,
+  isExpandType,
+} from './types';
+// import { isSearchResult, isExpandType } from './types';
+
+import { /* scrollIntoView */ searchItem } from './util/tree';
+import { getGroupStatus, getHighestStatus } from './util/status';
+// import { useLayout } from './LayoutProvider';
+import { SearchIcon } from './icon/SearchIcon';
+import { CloseIcon } from './icon/CloseIcon';
+import { TextInput, View } from 'react-native';
+import { DEFAULT_REF_ID } from './constants';
+import { BottomSheetTextInput } from '@gorhom/bottom-sheet';
+
+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(({ theme }) => ({
+  position: 'absolute',
+  top: 0,
+  left: 8,
+  zIndex: 1,
+  pointerEvents: 'none',
+  color: theme.textMutedColor,
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  height: '100%',
+}));
+
+const SearchField = styled.View({
+  display: 'flex',
+  flexDirection: 'column',
+  position: 'relative',
+  // marginBottom: 16,
+});
+
+const Input = styled(BottomSheetTextInput)(({ theme }) => ({
+  // appearance: 'none',
+  height: 32,
+  paddingLeft: 28,
+  paddingRight: 28,
+  borderWidth: 1,
+  borderColor: theme.appBorderColor,
+  backgroundColor: 'transparent',
+  borderRadius: 4,
+  fontSize: theme.typography.size.s1 + 1,
+  // transition: 'all 150ms',
+  color: theme.color.defaultText,
+  width: '100%',
+
+  // '&:focus, &:active': {
+  //   outline: 0,
+  //   borderColor: theme.color.secondary,
+  //   background: theme.background.app,
+  // },
+  // '&::placeholder': {
+  //   color: theme.textMutedColor,
+  //   opacity: 1,
+  // },
+  // '&:valid ~ code, &:focus ~ code': {
+  //   display: 'none',
+  // },
+  // '&:invalid ~ svg': {
+  //   display: 'none',
+  // },
+  // '&:valid ~ svg': {
+  //   display: 'block',
+  // },
+  // '&::-ms-clear': {
+  //   display: 'none',
+  // },
+  // '&::-webkit-search-decoration, &::-webkit-search-cancel-button, &::-webkit-search-results-button, &::-webkit-search-results-decoration':
+  //   {
+  //     display: 'none',
+  //   },
+}));
+
+// const FocusKey = styled.Text(({ theme }) => ({
+//   position: 'absolute',
+//   top: 8,
+//   right: 9,
+//   height: 16,
+//   zIndex: 1,
+//   lineHeight: 16,
+//   textAlign: 'center',
+//   fontSize: 11,
+//   color: theme.base === 'light' ? theme.color.dark : theme.textMutedColor,
+//   userSelect: 'none',
+//   pointerEvents: 'none',
+//   display: 'flex',
+//   flexDirection: 'row',
+//   alignItems: 'center',
+//   gap: 4,
+// }));
+
+// const FocusKeyCmd = styled.Text({
+//   fontSize: 14,
+// });
+
+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%',
+}));
+
+// const FocusContainer = styled.View({});
+
+export const Search = React.memo<{
+  children: SearchChildrenFn;
+  dataset: CombinedDataset;
+  // enableShortcuts?: boolean;
+  setSelection: (selection: Selection) => void;
+  getLastViewed: () => Selection[];
+  initialQuery?: string;
+}>(function Search({
+  children,
+  dataset,
+  setSelection,
+  // enableShortcuts = true,
+  getLastViewed,
+  initialQuery = '',
+}) {
+  const api = useStorybookApi();
+  // const inputRef = useRef<HTMLInputElement>(null);
+  // const [inputPlaceholder, setPlaceholder] = useState('Find components');
+  // const isFocused = useRef(false);
+  const inputRef = useRef<TextInput>(null);
+  const [inputValue, setInputValue] = useState(initialQuery);
+  const [isOpen, setIsOpen] = useState(false);
+  const [allComponents, showAllComponents] = useState(false);
+  // const searchShortcut = api ? shortcutToHumanString(api.getShortcutKeys().search) : '/';
+
+  const selectStory = useCallback(
+    (id: string, refId: string) => {
+      if (api) {
+        api.selectStory(id, undefined, { ref: refId !== DEFAULT_REF_ID && refId });
+      }
+      setSelection({ storyId: id, refId });
+      inputRef.current?.blur();
+      // inputRef.current?.clear();
+      // setInputValue('');
+
+      showAllComponents(false);
+    },
+    [api, setSelection]
+  );
+
+  const getItemProps: GetSearchItemProps = useCallback(
+    ({ item: result }) => {
+      return {
+        icon: result?.item?.type === 'component' ? 'component' : 'story',
+        // isHighlighted:
+        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();
+          }
+
+          // selectStory(result.item.id, result.item.refId);
+        },
+        score: result.score,
+        refIndex: result.refIndex,
+        item: result.item,
+        matches: result.matches,
+        isHighlighted: false,
+        // isHighlighted: searchItem.
+        // isHighlighted: searchItem.item.
+      };
+    },
+    [selectStory]
+  );
+
+  const makeFuse = useCallback(() => {
+    const list = dataset.entries.reduce<SearchItem[]>((acc, [refId, { index, status }]) => {
+      const groupStatus = getGroupStatus(index || {}, status);
+
+      if (index) {
+        acc.push(
+          ...Object.values(index).map((item) => {
+            const statusValue =
+              status && status[item.id]
+                ? getHighestStatus(Object.values(status[item.id] || {}).map((s) => s.status))
+                : null;
+            return {
+              ...searchItem(item, dataset.hash[refId]),
+              status: statusValue || groupStatus[item.id] || null,
+            };
+          })
+        );
+      }
+      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 { isMobile } = useLayout();
+
+  const input = inputValue ? inputValue.trim() : '';
+  const results = input ? getResults(input) : [];
+
+  return (
+    <View style={{ flex: 1 }}>
+      <SearchField
+      // {...getRootProps({ refKey: '' }, { suppressRefError: true })}
+      // className="search-field"
+      >
+        <SearchIconWrapper>
+          <SearchIcon />
+        </SearchIconWrapper>
+
+        <Input
+          ref={inputRef as any} // TODO find solution for this
+          onChangeText={setInputValue}
+          onFocus={() => setIsOpen(true)}
+          onBlur={() => setIsOpen(false)}
+        />
+        {isOpen && (
+          <ClearIcon
+            onPress={() => {
+              setInputValue('');
+              inputRef.current.clear();
+            }}
+          >
+            <CloseIcon />
+          </ClearIcon>
+        )}
+      </SearchField>
+
+      {children({
+        query: input,
+        results,
+        isBrowsing: !isOpen || !inputValue.length,
+        closeMenu: () => {},
+        // getMenuProps,
+        getItemProps,
+        highlightedIndex: null,
+      })}
+    </View>
+  );
+});

package/src/SearchResults.tsx

@@ -0,0 +1,315 @@
+import { styled } from '@storybook/react-native-theming';
+import type { FC, PropsWithChildren, ReactNode } from 'react';
+import React, { useCallback } from 'react';
+// import type { ControllerStateAndHelpers } from 'downshift';
+
+// import { useStorybookApi } from '@storybook/manager-api';
+// import { PRELOAD_ENTRIES } from '@storybook/core-events';
+import { transparentize } from 'polished';
+// import { TrashIcon } from '@storybook/icons';
+import type { GetSearchItemProps, SearchResult, SearchResultProps } from './types';
+import { isExpandType } from './types';
+
+import { FuseResultMatch } from 'fuse.js';
+import { PressableProps, Text, View } from 'react-native';
+import { Button } from './Button';
+import { IconButton } from './IconButton';
+import { ComponentIcon } from './icon/ComponentIcon';
+import { StoryIcon } from './icon/StoryIcon';
+import { statusMapping } from './util/status';
+// import { UseSymbol } from './IconSymbols';
+
+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: 'inherit',
+    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,
+  // small: {
+  //   color: theme.barTextColor,
+  //   fontSize: theme.typography.size.s1,
+  // },
+}));
+
+const Mark = styled.Text(({ theme }) => ({
+  backgroundColor: 'transparent',
+  // fontSize: theme.typography.size.s1 - 1,
+  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',
+
+  // '.search-result-recentlyOpened-clear': {
+  //   visibility: 'hidden',
+  // },
+
+  // '&:hover': {
+  //   '.search-result-recentlyOpened-clear': {
+  //     visibility: 'visible',
+  //   },
+  // },
+}));
+
+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 }) => ({
+  // display: 'grid',
+  justifyContent: 'flex-start',
+  // gridAutoColumns: 'auto',
+  // gridAutoFlow: 'column',
+  color: theme.textMutedColor,
+  fontSize: theme.typography.size.s2,
+  // '& > span': {
+  //   display: 'block',
+  //   whiteSpace: 'nowrap',
+  //   overflow: 'hidden',
+  //   textOverflow: 'ellipsis',
+  // },
+}));
+
+const Path = styled.View(({ theme }) => ({
+  // display: 'grid',
+  justifyContent: 'flex-start',
+  marginVertical: 2,
+  // gridAutoColumns: 'auto',
+  // gridAutoFlow: 'column',
+  color: theme.textMutedColor,
+  fontSize: theme.typography.size.s1 - 1,
+  flexDirection: 'row',
+  // '& > span': {
+  //   display: 'block',
+  //   whiteSpace: 'nowrap',
+  //   overflow: 'hidden',
+  //   textOverflow: 'ellipsis',
+  // },
+
+  // '& > span + span': {
+  //   '&:before': {
+  //     content: "' / '",
+  //   },
+  // },
+}));
+
+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 api = useStorybookApi();
+  // useEffect(() => {
+  //   if (api && props.isHighlighted && item.type === 'component') {
+  //     // api.emit(PRELOAD_ENTRIES, { ids: [item.children[0]] }, { options: { target: item.refId } });
+  //   }
+  // }, [props.isHighlighted, item]);
+
+  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) => (
+            <View key={index} style={{ flexShrink: 1 }}>
+              <PathText>
+                <Highlight
+                  match={pathMatches.find((match: FuseResultMatch) => match.refIndex === index)}
+                >
+                  {/* {index === 0 ? '' : '/'} */}
+                  {group}
+                </Highlight>
+              </PathText>
+            </View>
+          ))}
+        </Path>
+      </ResultRowContent>
+      {item.status ? i : null}
+    </ResultRow>
+  );
+});
+
+// type SearchResult = { item: API_HashEntry; matches: FuseResultMatch[]; score: number };
+
+export const SearchResults: FC<{
+  query: string;
+  results: SearchResult[];
+  closeMenu: (cb?: () => void) => void;
+  // getMenuProps: any;
+  getItemProps: GetSearchItemProps;
+  highlightedIndex: number | null;
+  isLoading?: boolean;
+  enableShortcuts?: boolean;
+  clearLastViewed?: () => void;
+}> = React.memo(function SearchResults({
+  query,
+  results,
+  closeMenu,
+  // getMenuProps,
+  getItemProps,
+  highlightedIndex,
+  // isLoading = false,
+  // enableShortcuts = true,
+  clearLastViewed,
+}) {
+  // const api = useStorybookApi();
+
+  const handleClearLastViewed = () => {
+    clearLastViewed();
+    closeMenu();
+  };
+
+  return (
+    <ResultsList /* {...getMenuProps()} */>
+      {results.length > 0 && !query && (
+        <RecentlyOpenedTitle /* className="search-result-recentlyOpened" */>
+          Recently opened
+          <IconButton
+            // className="search-result-recentlyOpened-clear"
+            onPress={handleClearLastViewed}
+          >
+            {/* <TrashIcon /> */}
+          </IconButton>
+        </RecentlyOpenedTitle>
+      )}
+      {results.length === 0 && query && (
+        <View>
+          <NoResults>
+            <Text style={{ marginBottom: 8 }}>No components found</Text>
+            {/* <br /> */}
+            <Text>Find components by name or path.</Text>
+          </NoResults>
+        </View>
+      )}
+      {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}
+            // data-id={result.item.id}
+            // data-refid={result.item.refId}
+            // className="search-result-item"
+          />
+        );
+      })}
+    </ResultsList>
+  );
+});