@hanzo/ui 5.7.1 → 8.0.0

package/docs/components/dialog/search.tsx

@@ -1,529 +0,0 @@
-'use client';
-
-import { ChevronRight, Hash, Search as SearchIcon } from '@icons';
-import {
-  type ComponentProps,
-  createContext,
-  Fragment,
-  type ReactNode,
-  useCallback,
-  useContext,
-  useEffect,
-  useEffectEvent,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import { I18nLabel, useI18n } from '@/contexts/i18n';
-import { cn } from '@/utils/cn';
-import {
-  Dialog,
-  DialogContent,
-  DialogOverlay,
-  DialogTitle,
-} from '@radix-ui/react-dialog';
-import type {
-  HighlightedText,
-  ReactSortedResult as BaseResultType,
-} from '@hanzo/docs-core/search';
-import { cva } from 'class-variance-authority';
-import { useRouter } from '@hanzo/docs-core/framework';
-import type { SharedProps } from '@/contexts/search';
-import { useOnChange } from '@hanzo/docs-core/utils/use-on-change';
-import scrollIntoView from 'scroll-into-view-if-needed';
-import { buttonVariants } from '@/components/ui/button';
-
-export type SearchItemType =
-  | (BaseResultType & {
-      external?: boolean;
-    })
-  | {
-      id: string;
-      type: 'action';
-      node: ReactNode;
-      onSelect: () => void;
-    };
-
-// needed for backward compatible since some previous guides referenced it
-export type { SharedProps };
-
-export interface SearchDialogProps extends SharedProps {
-  search: string;
-  onSearchChange: (v: string) => void;
-  isLoading?: boolean;
-
-  children: ReactNode;
-}
-
-const Context = createContext<{
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  search: string;
-  onSearchChange: (v: string) => void;
-
-  isLoading: boolean;
-} | null>(null);
-
-const ListContext = createContext<{
-  active: string | null;
-  setActive: (v: string | null) => void;
-} | null>(null);
-
-const TagsListContext = createContext<{
-  value?: string;
-  onValueChange: (value: string | undefined) => void;
-  allowClear: boolean;
-} | null>(null);
-
-export function SearchDialog({
-  open,
-  onOpenChange,
-  search,
-  onSearchChange,
-  isLoading = false,
-  children,
-}: SearchDialogProps) {
-  const [active, setActive] = useState<string | null>(null);
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <Context.Provider
-        value={useMemo(
-          () => ({
-            open,
-            onOpenChange,
-            search,
-            onSearchChange,
-            active,
-            setActive,
-            isLoading,
-          }),
-          [active, isLoading, onOpenChange, onSearchChange, open, search],
-        )}
-      >
-        {children}
-      </Context.Provider>
-    </Dialog>
-  );
-}
-
-export function SearchDialogHeader(props: ComponentProps<'div'>) {
-  return (
-    <div
-      {...props}
-      className={cn('flex flex-row items-center gap-2 p-3', props.className)}
-    />
-  );
-}
-
-export function SearchDialogInput(props: ComponentProps<'input'>) {
-  const { text } = useI18n();
-  const { search, onSearchChange } = useSearch();
-
-  return (
-    <input
-      {...props}
-      value={search}
-      onChange={(e) => onSearchChange(e.target.value)}
-      placeholder={text.search}
-      className="w-0 flex-1 bg-transparent text-lg placeholder:text-fd-muted-foreground focus-visible:outline-none"
-    />
-  );
-}
-
-export function SearchDialogClose({
-  children = 'ESC',
-  className,
-  ...props
-}: ComponentProps<'button'>) {
-  const { onOpenChange } = useSearch();
-
-  return (
-    <button
-      type="button"
-      onClick={() => onOpenChange(false)}
-      className={cn(
-        buttonVariants({
-          color: 'outline',
-          size: 'sm',
-          className: 'font-mono text-fd-muted-foreground',
-        }),
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </button>
-  );
-}
-
-export function SearchDialogFooter(props: ComponentProps<'div'>) {
-  return (
-    <div
-      {...props}
-      className={cn('bg-fd-secondary/50 p-3 empty:hidden', props.className)}
-    />
-  );
-}
-
-export function SearchDialogOverlay(
-  props: ComponentProps<typeof DialogOverlay>,
-) {
-  return (
-    <DialogOverlay
-      {...props}
-      className={cn(
-        'fixed inset-0 z-50 backdrop-blur-xs bg-fd-overlay data-[state=open]:animate-fd-fade-in data-[state=closed]:animate-fd-fade-out',
-        props.className,
-      )}
-    />
-  );
-}
-
-export function SearchDialogContent({
-  children,
-  ...props
-}: ComponentProps<typeof DialogContent>) {
-  const { text } = useI18n();
-
-  return (
-    <DialogContent
-      aria-describedby={undefined}
-      {...props}
-      className={cn(
-        'fixed left-1/2 top-4 md:top-[calc(50%-250px)] z-50 w-[calc(100%-1rem)] max-w-screen-sm -translate-x-1/2 rounded-xl border bg-fd-popover text-fd-popover-foreground shadow-2xl shadow-black/50 overflow-hidden data-[state=closed]:animate-fd-dialog-out data-[state=open]:animate-fd-dialog-in',
-        '*:border-b *:has-[+:last-child[data-empty=true]]:border-b-0 *:data-[empty=true]:border-b-0 *:last:border-b-0',
-        props.className,
-      )}
-    >
-      <DialogTitle className="hidden">{text.search}</DialogTitle>
-      {children}
-    </DialogContent>
-  );
-}
-
-export function SearchDialogList({
-  items = null,
-  Empty = () => (
-    <div className="py-12 text-center text-sm text-fd-muted-foreground">
-      <I18nLabel label="searchNoResult" />
-    </div>
-  ),
-  Item = (props) => <SearchDialogListItem {...props} />,
-  ...props
-}: Omit<ComponentProps<'div'>, 'children'> & {
-  items: SearchItemType[] | null | undefined;
-  /**
-   * Renderer for empty list UI
-   */
-  Empty?: () => ReactNode;
-  /**
-   * Renderer for items
-   */
-  Item?: (props: { item: SearchItemType; onClick: () => void }) => ReactNode;
-}) {
-  const ref = useRef<HTMLDivElement>(null);
-  const [active, setActive] = useState<string | null>(() =>
-    items && items.length > 0 ? items[0].id : null,
-  );
-  const { onOpenChange } = useSearch();
-  const router = useRouter();
-
-  const onOpen = (item: SearchItemType) => {
-    if (item.type === 'action') {
-      item.onSelect();
-    } else if (item.external) {
-      window.open(item.url, '_blank')?.focus();
-    } else {
-      router.push(item.url);
-    }
-
-    onOpenChange(false);
-  };
-
-  const onKey = useEffectEvent((e: KeyboardEvent) => {
-    if (!items || e.isComposing) return;
-
-    if (e.key === 'ArrowDown' || e.key == 'ArrowUp') {
-      let idx = items.findIndex((item) => item.id === active);
-      if (idx === -1) idx = 0;
-      else if (e.key === 'ArrowDown') idx++;
-      else idx--;
-
-      setActive(items.at(idx % items.length)?.id ?? null);
-      e.preventDefault();
-    }
-
-    if (e.key === 'Enter') {
-      const selected = items.find((item) => item.id === active);
-
-      if (selected) onOpen(selected);
-      e.preventDefault();
-    }
-  });
-
-  useEffect(() => {
-    const element = ref.current;
-    if (!element) return;
-
-    const observer = new ResizeObserver(() => {
-      const viewport = element.firstElementChild!;
-
-      element.style.setProperty(
-        '--fd-animated-height',
-        `${viewport.clientHeight}px`,
-      );
-    });
-
-    const viewport = element.firstElementChild;
-    if (viewport) observer.observe(viewport);
-
-    window.addEventListener('keydown', onKey);
-    return () => {
-      observer.disconnect();
-      window.removeEventListener('keydown', onKey);
-    };
-  }, []);
-
-  useOnChange(items, () => {
-    if (items && items.length > 0) {
-      setActive(items[0].id);
-    }
-  });
-
-  return (
-    <div
-      {...props}
-      ref={ref}
-      data-empty={items === null}
-      className={cn(
-        'overflow-hidden h-(--fd-animated-height) transition-[height]',
-        props.className,
-      )}
-    >
-      <div
-        className={cn(
-          'w-full flex flex-col overflow-y-auto max-h-[460px] p-1',
-          !items && 'hidden',
-        )}
-      >
-        <ListContext.Provider
-          value={useMemo(
-            () => ({
-              active,
-              setActive,
-            }),
-            [active],
-          )}
-        >
-          {items?.length === 0 && Empty()}
-
-          {items?.map((item) => (
-            <Fragment key={item.id}>
-              {Item({ item, onClick: () => onOpen(item) })}
-            </Fragment>
-          ))}
-        </ListContext.Provider>
-      </div>
-    </div>
-  );
-}
-
-export function SearchDialogListItem({
-  item,
-  className,
-  children,
-  renderHighlights: render = renderHighlights,
-  ...props
-}: ComponentProps<'button'> & {
-  renderHighlights?: typeof renderHighlights;
-  item: SearchItemType;
-}) {
-  const { active: activeId, setActive } = useSearchList();
-  const active = item.id === activeId;
-
-  if (item.type === 'action') {
-    children ??= item.node;
-  } else {
-    children ??= (
-      <>
-        <div className="inline-flex items-center text-fd-muted-foreground text-xs empty:hidden">
-          {item.breadcrumbs?.map((item, i) => (
-            <Fragment key={i}>
-              {i > 0 && <ChevronRight className="size-4" />}
-              {item}
-            </Fragment>
-          ))}
-        </div>
-
-        {item.type !== 'page' && (
-          <div
-            role="none"
-            className="absolute start-3 inset-y-0 w-px bg-fd-border"
-          />
-        )}
-        <p
-          className={cn(
-            'min-w-0 truncate',
-            item.type !== 'page' && 'ps-4',
-            item.type === 'page' || item.type === 'heading'
-              ? 'font-medium'
-              : 'text-fd-popover-foreground/80',
-          )}
-        >
-          {item.type === 'heading' && (
-            <Hash className="inline me-1 size-4 text-fd-muted-foreground" />
-          )}
-          {item.contentWithHighlights
-            ? render(item.contentWithHighlights)
-            : item.content}
-        </p>
-      </>
-    );
-  }
-
-  return (
-    <button
-      type="button"
-      ref={useCallback(
-        (element: HTMLButtonElement | null) => {
-          if (active && element) {
-            scrollIntoView(element, {
-              scrollMode: 'if-needed',
-              block: 'nearest',
-              boundary: element.parentElement,
-            });
-          }
-        },
-        [active],
-      )}
-      aria-selected={active}
-      className={cn(
-        'relative select-none px-2.5 py-2 text-start text-sm rounded-lg',
-        active && 'bg-fd-accent text-fd-accent-foreground',
-        className,
-      )}
-      onPointerMove={() => setActive(item.id)}
-      {...props}
-    >
-      {children}
-    </button>
-  );
-}
-
-export function SearchDialogIcon(props: ComponentProps<'svg'>) {
-  const { isLoading } = useSearch();
-
-  return (
-    <SearchIcon
-      {...props}
-      className={cn(
-        'size-5 text-fd-muted-foreground',
-        isLoading && 'animate-pulse duration-400',
-        props.className,
-      )}
-    />
-  );
-}
-
-export interface TagsListProps extends ComponentProps<'div'> {
-  tag?: string;
-  onTagChange: (tag: string | undefined) => void;
-  allowClear?: boolean;
-}
-
-const itemVariants = cva(
-  'rounded-md border px-2 py-0.5 text-xs font-medium text-fd-muted-foreground transition-colors',
-  {
-    variants: {
-      active: {
-        true: 'bg-fd-accent text-fd-accent-foreground',
-      },
-    },
-  },
-);
-
-export function TagsList({
-  tag,
-  onTagChange,
-  allowClear = false,
-  ...props
-}: TagsListProps) {
-  return (
-    <div
-      {...props}
-      className={cn('flex items-center gap-1 flex-wrap', props.className)}
-    >
-      <TagsListContext.Provider
-        value={useMemo(
-          () => ({
-            value: tag,
-            onValueChange: onTagChange,
-            allowClear,
-          }),
-          [allowClear, onTagChange, tag],
-        )}
-      >
-        {props.children}
-      </TagsListContext.Provider>
-    </div>
-  );
-}
-
-export function TagsListItem({
-  value,
-  className,
-  ...props
-}: ComponentProps<'button'> & {
-  value: string;
-}) {
-  const { onValueChange, value: selectedValue, allowClear } = useTagsList();
-  const selected = value === selectedValue;
-
-  return (
-    <button
-      type="button"
-      data-active={selected}
-      className={cn(itemVariants({ active: selected, className }))}
-      onClick={() => {
-        onValueChange(selected && allowClear ? undefined : value);
-      }}
-      tabIndex={-1}
-      {...props}
-    >
-      {props.children}
-    </button>
-  );
-}
-
-function renderHighlights(highlights: HighlightedText<ReactNode>[]): ReactNode {
-  return highlights.map((node, i) => {
-    if (node.styles?.highlight) {
-      return (
-        <span key={i} className="text-fd-primary underline">
-          {node.content}
-        </span>
-      );
-    }
-
-    return <Fragment key={i}>{node.content}</Fragment>;
-  });
-}
-
-export function useSearch() {
-  const ctx = useContext(Context);
-  if (!ctx) throw new Error('Missing <SearchDialog />');
-  return ctx;
-}
-
-export function useTagsList() {
-  const ctx = useContext(TagsListContext);
-  if (!ctx) throw new Error('Missing <TagsList />');
-  return ctx;
-}
-
-export function useSearchList() {
-  const ctx = useContext(ListContext);
-  if (!ctx) throw new Error('Missing <SearchDialogList />');
-  return ctx;
-}

package/docs/components/dynamic-codeblock.tsx

@@ -1,129 +0,0 @@
-'use client';
-import { CodeBlock, type CodeBlockProps, Pre } from '@/components/codeblock';
-import type {
-  HighlightOptions,
-  HighlightOptionsCommon,
-  HighlightOptionsThemes,
-} from '@hanzo/docs-core/highlight';
-import { useShiki } from '@hanzo/docs-core/highlight/client';
-import { cn } from '@/utils/cn';
-import {
-  type ComponentProps,
-  createContext,
-  type FC,
-  Suspense,
-  use,
-  useDeferredValue,
-  useId,
-} from 'react';
-
-export interface DynamicCodeblockProps {
-  lang: string;
-  code: string;
-  /**
-   * Extra props for the underlying `<CodeBlock />` component.
-   *
-   * Ignored if you defined your own `pre` component in `options.components`.
-   */
-  codeblock?: CodeBlockProps;
-  /**
-   * Wrap in React `<Suspense />` and provide a fallback.
-   *
-   * @defaultValue true
-   */
-  wrapInSuspense?: boolean;
-  options?: Omit<HighlightOptionsCommon, 'lang'> & HighlightOptionsThemes;
-}
-
-const PropsContext = createContext<CodeBlockProps | undefined>(undefined);
-
-function DefaultPre(props: ComponentProps<'pre'>) {
-  const extraProps = use(PropsContext);
-
-  return (
-    <CodeBlock
-      {...props}
-      {...extraProps}
-      className={cn('my-0', props.className, extraProps?.className)}
-    >
-      <Pre>{props.children}</Pre>
-    </CodeBlock>
-  );
-}
-
-export function DynamicCodeBlock({
-  lang,
-  code,
-  codeblock,
-  options,
-  wrapInSuspense = true,
-}: DynamicCodeblockProps) {
-  const id = useId();
-  const shikiOptions = {
-    lang,
-    ...options,
-    components: {
-      pre: DefaultPre,
-      ...options?.components,
-    },
-  } satisfies HighlightOptions;
-
-  const children = (
-    <PropsContext value={codeblock}>
-      <Internal
-        id={id}
-        {...useDeferredValue({ code, options: shikiOptions })}
-      />
-    </PropsContext>
-  );
-
-  if (wrapInSuspense)
-    return (
-      <Suspense
-        fallback={
-          <Placeholder code={code} components={shikiOptions.components} />
-        }
-      >
-        {children}
-      </Suspense>
-    );
-
-  return children;
-}
-
-function Placeholder({
-  code,
-  components = {},
-}: {
-  code: string;
-  components: HighlightOptions['components'];
-}) {
-  const { pre: Pre = 'pre', code: Code = 'code' } = components as Record<
-    string,
-    FC
-  >;
-
-  return (
-    <Pre>
-      <Code>
-        {code.split('\n').map((line, i) => (
-          <span key={i} className="line">
-            {line}
-          </span>
-        ))}
-      </Code>
-    </Pre>
-  );
-}
-
-function Internal({
-  id,
-  code,
-  options,
-}: {
-  id: string;
-  code: string;
-  options: HighlightOptions;
-}) {
-  return useShiki(code, options, [id, options.lang, code]);
-}