@hanzo/ui 5.3.26 → 5.3.29

package/docs/components/dialog/search.tsx

@@ -0,0 +1,529 @@
+'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

@@ -0,0 +1,129 @@
+'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]);
+}