@hanzo/ui 5.3.25 → 5.3.28

package/docs/components/codeblock.tsx

@@ -0,0 +1,258 @@
+'use client';
+import { Check, Clipboard } from '@icons';
+import {
+  type ComponentProps,
+  createContext,
+  type HTMLAttributes,
+  type ReactNode,
+  type RefObject,
+  use,
+  useMemo,
+  useRef,
+} from 'react';
+import { cn } from '@/utils/cn';
+import { useCopyButton } from '@/utils/use-copy-button';
+import { buttonVariants } from '@/components/ui/button';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
+import { mergeRefs } from '@/utils/merge-refs';
+
+export interface CodeBlockProps extends ComponentProps<'figure'> {
+  /**
+   * Icon of code block
+   *
+   * When passed as a string, it assumes the value is the HTML of icon
+   */
+  icon?: ReactNode;
+
+  /**
+   * Allow to copy code with copy button
+   *
+   * @defaultValue true
+   */
+  allowCopy?: boolean;
+
+  /**
+   * Keep original background color generated by Shiki or Rehype Code
+   *
+   * @defaultValue false
+   */
+  keepBackground?: boolean;
+
+  viewportProps?: HTMLAttributes<HTMLElement>;
+
+  /**
+   * show line numbers
+   */
+  'data-line-numbers'?: boolean;
+
+  /**
+   * @defaultValue 1
+   */
+  'data-line-numbers-start'?: number;
+
+  Actions?: (props: { className?: string; children?: ReactNode }) => ReactNode;
+}
+
+const TabsContext = createContext<{
+  containerRef: RefObject<HTMLDivElement | null>;
+  nested: boolean;
+} | null>(null);
+
+export function Pre(props: ComponentProps<'pre'>) {
+  return (
+    <pre
+      {...props}
+      className={cn('min-w-full w-max *:flex *:flex-col', props.className)}
+    >
+      {props.children}
+    </pre>
+  );
+}
+
+export function CodeBlock({
+  ref,
+  title,
+  allowCopy = true,
+  keepBackground = false,
+  icon,
+  viewportProps = {},
+  children,
+  Actions = (props) => (
+    <div {...props} className={cn('empty:hidden', props.className)} />
+  ),
+  ...props
+}: CodeBlockProps) {
+  const inTab = use(TabsContext) !== null;
+  const areaRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <figure
+      ref={ref}
+      dir="ltr"
+      {...props}
+      tabIndex={-1}
+      className={cn(
+        inTab
+          ? 'bg-fd-secondary -mx-px -mb-px last:rounded-b-xl'
+          : 'my-4 bg-fd-card rounded-xl',
+        keepBackground && 'bg-(--shiki-light-bg) dark:bg-(--shiki-dark-bg)',
+
+        'shiki relative border shadow-sm not-prose overflow-hidden text-sm',
+        props.className,
+      )}
+    >
+      {title ? (
+        <div className="flex text-fd-muted-foreground items-center gap-2 h-9.5 border-b px-4">
+          {typeof icon === 'string' ? (
+            <div
+              className="[&_svg]:size-3.5"
+              dangerouslySetInnerHTML={{
+                __html: icon,
+              }}
+            />
+          ) : (
+            icon
+          )}
+          <figcaption className="flex-1 truncate">{title}</figcaption>
+          {Actions({
+            className: '-me-2',
+            children: allowCopy && <CopyButton containerRef={areaRef} />,
+          })}
+        </div>
+      ) : (
+        Actions({
+          className:
+            'absolute top-2 right-2 z-2 backdrop-blur-lg rounded-lg text-fd-muted-foreground',
+          children: allowCopy && <CopyButton containerRef={areaRef} />,
+        })
+      )}
+      <div
+        ref={areaRef}
+        {...viewportProps}
+        role="region"
+        tabIndex={0}
+        className={cn(
+          'text-[0.8125rem] py-3.5 overflow-auto max-h-[600px] fd-scroll-container focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-fd-ring',
+          viewportProps.className,
+        )}
+        style={
+          {
+            // space for toolbar
+            '--padding-right': !title ? 'calc(var(--spacing) * 8)' : undefined,
+            counterSet: props['data-line-numbers']
+              ? `line ${Number(props['data-line-numbers-start'] ?? 1) - 1}`
+              : undefined,
+            ...viewportProps.style,
+          } as object
+        }
+      >
+        {children}
+      </div>
+    </figure>
+  );
+}
+
+function CopyButton({
+  className,
+  containerRef,
+  ...props
+}: ComponentProps<'button'> & {
+  containerRef: RefObject<HTMLElement | null>;
+}) {
+  const [checked, onClick] = useCopyButton(() => {
+    const pre = containerRef.current?.getElementsByTagName('pre').item(0);
+    if (!pre) return;
+
+    const clone = pre.cloneNode(true) as HTMLElement;
+    clone.querySelectorAll('.nd-copy-ignore').forEach((node) => {
+      node.replaceWith('\n');
+    });
+
+    void navigator.clipboard.writeText(clone.textContent ?? '');
+  });
+
+  return (
+    <button
+      type="button"
+      data-checked={checked || undefined}
+      className={cn(
+        buttonVariants({
+          className:
+            'hover:text-fd-accent-foreground data-checked:text-fd-accent-foreground',
+          size: 'icon-xs',
+        }),
+        className,
+      )}
+      aria-label={checked ? 'Copied Text' : 'Copy Text'}
+      onClick={onClick}
+      {...props}
+    >
+      {checked ? <Check /> : <Clipboard />}
+    </button>
+  );
+}
+
+export function CodeBlockTabs({ ref, ...props }: ComponentProps<typeof Tabs>) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const nested = use(TabsContext) !== null;
+
+  return (
+    <Tabs
+      ref={mergeRefs(containerRef, ref)}
+      {...props}
+      className={cn(
+        'bg-fd-card rounded-xl border',
+        !nested && 'my-4',
+        props.className,
+      )}
+    >
+      <TabsContext
+        value={useMemo(
+          () => ({
+            containerRef,
+            nested,
+          }),
+          [nested],
+        )}
+      >
+        {props.children}
+      </TabsContext>
+    </Tabs>
+  );
+}
+
+export function CodeBlockTabsList(props: ComponentProps<typeof TabsList>) {
+  return (
+    <TabsList
+      {...props}
+      className={cn(
+        'flex flex-row px-2 overflow-x-auto text-fd-muted-foreground',
+        props.className,
+      )}
+    >
+      {props.children}
+    </TabsList>
+  );
+}
+
+export function CodeBlockTabsTrigger({
+  children,
+  ...props
+}: ComponentProps<typeof TabsTrigger>) {
+  return (
+    <TabsTrigger
+      {...props}
+      className={cn(
+        'relative group inline-flex text-sm font-medium text-nowrap items-center transition-colors gap-2 px-2 py-1.5 hover:text-fd-accent-foreground data-[state=active]:text-fd-primary [&_svg]:size-3.5',
+        props.className,
+      )}
+    >
+      <div className="absolute inset-x-2 bottom-0 h-px group-data-[state=active]:bg-fd-primary" />
+      {children}
+    </TabsTrigger>
+  );
+}
+
+export function CodeBlockTab(props: ComponentProps<typeof TabsContent>) {
+  return <TabsContent {...props} />;
+}

package/docs/components/dialog/search-algolia.tsx

@@ -0,0 +1,132 @@
+'use client';
+
+import {
+  type AlgoliaOptions,
+  useDocsSearch,
+} from '@hanzo/docs-core/search/client';
+import { type ReactNode, useMemo, useState } from 'react';
+import { useOnChange } from '@hanzo/docs-core/utils/use-on-change';
+import {
+  SearchDialog,
+  SearchDialogClose,
+  SearchDialogContent,
+  SearchDialogFooter,
+  SearchDialogHeader,
+  SearchDialogIcon,
+  SearchDialogInput,
+  SearchDialogList,
+  SearchDialogOverlay,
+  type SharedProps,
+  TagsList,
+  TagsListItem,
+} from './search';
+import type { SortedResult } from '@hanzo/docs-core/search';
+import type { SearchLink, TagItem } from '@/contexts/search';
+import { useI18n } from '@/contexts/i18n';
+
+export interface AlgoliaSearchDialogProps extends SharedProps {
+  searchOptions: AlgoliaOptions;
+  links?: SearchLink[];
+
+  footer?: ReactNode;
+
+  defaultTag?: string;
+  tags?: TagItem[];
+
+  /**
+   * Add the "Powered by Algolia" label, this is useful for free tier users
+   *
+   * @defaultValue false
+   */
+  showAlgolia?: boolean;
+
+  /**
+   * Allow to clear tag filters
+   *
+   * @defaultValue false
+   */
+  allowClear?: boolean;
+}
+
+export default function AlgoliaSearchDialog({
+  searchOptions,
+  tags = [],
+  defaultTag,
+  showAlgolia = false,
+  allowClear = false,
+  links = [],
+  footer,
+  ...props
+}: AlgoliaSearchDialogProps) {
+  const [tag, setTag] = useState(defaultTag);
+  const { locale } = useI18n();
+  const { search, setSearch, query } = useDocsSearch({
+    type: 'algolia',
+    tag,
+    locale,
+    ...searchOptions,
+  });
+  const defaultItems = useMemo<SortedResult[] | null>(() => {
+    if (links.length === 0) return null;
+    return links.map(([name, link]) => ({
+      type: 'page',
+      id: name,
+      content: name,
+      url: link,
+    }));
+  }, [links]);
+
+  useOnChange(defaultTag, (v) => {
+    setTag(v);
+  });
+
+  const label = showAlgolia && <AlgoliaTitle />;
+
+  return (
+    <SearchDialog
+      search={search}
+      onSearchChange={setSearch}
+      isLoading={query.isLoading}
+      {...props}
+    >
+      <SearchDialogOverlay />
+      <SearchDialogContent>
+        <SearchDialogHeader>
+          <SearchDialogIcon />
+          <SearchDialogInput />
+          <SearchDialogClose />
+        </SearchDialogHeader>
+        <SearchDialogList
+          items={query.data !== 'empty' ? query.data : defaultItems}
+        />
+      </SearchDialogContent>
+      <SearchDialogFooter>
+        {tags.length > 0 ? (
+          <TagsList tag={tag} onTagChange={setTag} allowClear={allowClear}>
+            {tags.map((tag) => (
+              <TagsListItem key={tag.value} value={tag.value}>
+                {tag.name}
+              </TagsListItem>
+            ))}
+            {label}
+          </TagsList>
+        ) : (
+          label
+        )}
+        {footer}
+      </SearchDialogFooter>
+    </SearchDialog>
+  );
+}
+
+function AlgoliaTitle() {
+  return (
+    <a
+      href="https://algolia.com"
+      rel="noreferrer noopener"
+      className="ms-auto text-xs text-fd-muted-foreground"
+    >
+      Search powered by Algolia
+    </a>
+  );
+}

package/docs/components/dialog/search-default.tsx

@@ -0,0 +1,131 @@
+'use client';
+
+import { useDocsSearch } from '@hanzo/docs-core/search/client';
+import { type ReactNode, useMemo, useState } from 'react';
+import { useOnChange } from '@hanzo/docs-core/utils/use-on-change';
+import { useI18n } from '@/contexts/i18n';
+import {
+  SearchDialog,
+  SearchDialogClose,
+  SearchDialogContent,
+  SearchDialogFooter,
+  SearchDialogHeader,
+  SearchDialogIcon,
+  SearchDialogInput,
+  SearchDialogList,
+  SearchDialogOverlay,
+  type SharedProps,
+  TagsList,
+  TagsListItem,
+} from './search';
+import type { SortedResult } from '@hanzo/docs-core/search';
+import type { SearchLink, TagItem } from '@/contexts/search';
+
+export interface DefaultSearchDialogProps extends SharedProps {
+  links?: SearchLink[];
+
+  /**
+   * @defaultValue 'fetch'
+   */
+  type?: 'fetch' | 'static';
+
+  defaultTag?: string;
+  tags?: TagItem[];
+
+  /**
+   * Search API URL
+   */
+  api?: string;
+
+  /**
+   * The debounced delay for performing a search.
+   */
+  delayMs?: number;
+
+  footer?: ReactNode;
+
+  /**
+   * Allow to clear tag filters
+   *
+   * @defaultValue false
+   */
+  allowClear?: boolean;
+}
+
+export default function DefaultSearchDialog({
+  defaultTag,
+  tags = [],
+  api,
+  delayMs,
+  type = 'fetch',
+  allowClear = false,
+  links = [],
+  footer,
+  ...props
+}: DefaultSearchDialogProps) {
+  const { locale } = useI18n();
+  const [tag, setTag] = useState(defaultTag);
+  const { search, setSearch, query } = useDocsSearch(
+    type === 'fetch'
+      ? {
+          type: 'fetch',
+          api,
+          locale,
+          tag,
+          delayMs,
+        }
+      : {
+          type: 'static',
+          from: api,
+          locale,
+          tag,
+          delayMs,
+        },
+  );
+  const defaultItems = useMemo<SortedResult[] | null>(() => {
+    if (links.length === 0) return null;
+    return links.map(([name, link]) => ({
+      type: 'page',
+      id: name,
+      content: name,
+      url: link,
+    }));
+  }, [links]);
+
+  useOnChange(defaultTag, (v) => {
+    setTag(v);
+  });
+
+  return (
+    <SearchDialog
+      search={search}
+      onSearchChange={setSearch}
+      isLoading={query.isLoading}
+      {...props}
+    >
+      <SearchDialogOverlay />
+      <SearchDialogContent>
+        <SearchDialogHeader>
+          <SearchDialogIcon />
+          <SearchDialogInput />
+          <SearchDialogClose />
+        </SearchDialogHeader>
+        <SearchDialogList
+          items={query.data !== 'empty' ? query.data : defaultItems}
+        />
+      </SearchDialogContent>
+      <SearchDialogFooter>
+        {tags.length > 0 && (
+          <TagsList tag={tag} onTagChange={setTag} allowClear={allowClear}>
+            {tags.map((tag) => (
+              <TagsListItem key={tag.value} value={tag.value}>
+                {tag.name}
+              </TagsListItem>
+            ))}
+          </TagsList>
+        )}
+        {footer}
+      </SearchDialogFooter>
+    </SearchDialog>
+  );
+}

package/docs/components/dialog/search-orama.tsx

@@ -0,0 +1,143 @@
+'use client';
+
+import {
+  type OramaCloudOptions,
+  useDocsSearch,
+} from '@hanzo/docs-core/search/client';
+import { type ReactNode, useMemo, useState } from 'react';
+import { useOnChange } from '@hanzo/docs-core/utils/use-on-change';
+import {
+  SearchDialog,
+  SearchDialogClose,
+  SearchDialogContent,
+  SearchDialogFooter,
+  SearchDialogHeader,
+  SearchDialogIcon,
+  SearchDialogInput,
+  SearchDialogList,
+  SearchDialogOverlay,
+  type SharedProps,
+  TagsList,
+  TagsListItem,
+} from './search';
+import type { SortedResult } from '@hanzo/docs-core/search';
+import type { SearchLink, TagItem } from '@/contexts/search';
+import { useI18n } from '@/contexts/i18n';
+
+export interface OramaSearchDialogProps extends SharedProps {
+  links?: SearchLink[];
+  client: OramaCloudOptions['client'];
+  searchOptions?: OramaCloudOptions['params'];
+  index?: OramaCloudOptions['index'];
+
+  footer?: ReactNode;
+
+  defaultTag?: string;
+  tags?: TagItem[];
+
+  /**
+   * Add the "Powered by Orama" label
+   *
+   * @defaultValue true
+   */
+  showOrama?: boolean;
+
+  /**
+   * Allow to clear tag filters
+   *
+   * @defaultValue false
+   */
+  allowClear?: boolean;
+}
+
+/**
+ * Orama Cloud integration
+ */
+export default function OramaSearchDialog({
+  client,
+  searchOptions,
+  tags = [],
+  defaultTag,
+  showOrama = true,
+  allowClear = false,
+  index,
+  footer,
+  links = [],
+  ...props
+}: OramaSearchDialogProps) {
+  const { locale } = useI18n();
+  const [tag, setTag] = useState(defaultTag);
+  const { search, setSearch, query } = useDocsSearch({
+    type: 'orama-cloud',
+    client,
+    index,
+    params: searchOptions,
+    locale,
+    tag,
+  });
+
+  const defaultItems = useMemo<SortedResult[] | null>(() => {
+    if (links.length === 0) return null;
+
+    return links.map(([name, link]) => ({
+      type: 'page',
+      id: name,
+      content: name,
+      url: link,
+    }));
+  }, [links]);
+
+  useOnChange(defaultTag, (v) => {
+    setTag(v);
+  });
+
+  const label = showOrama && <Label />;
+
+  return (
+    <SearchDialog
+      search={search}
+      onSearchChange={setSearch}
+      isLoading={query.isLoading}
+      {...props}
+    >
+      <SearchDialogOverlay />
+      <SearchDialogContent>
+        <SearchDialogHeader>
+          <SearchDialogIcon />
+          <SearchDialogInput />
+          <SearchDialogClose />
+        </SearchDialogHeader>
+        <SearchDialogList
+          items={query.data !== 'empty' ? query.data : defaultItems}
+        />
+        <SearchDialogFooter>
+          {tags.length > 0 ? (
+            <TagsList tag={tag} onTagChange={setTag} allowClear={allowClear}>
+              {tags.map((tag) => (
+                <TagsListItem key={tag.value} value={tag.value}>
+                  {tag.name}
+                </TagsListItem>
+              ))}
+              {label}
+            </TagsList>
+          ) : (
+            label
+          )}
+          {footer}
+        </SearchDialogFooter>
+      </SearchDialogContent>
+    </SearchDialog>
+  );
+}
+
+function Label() {
+  return (
+    <a
+      href="https://orama.com"
+      rel="noreferrer noopener"
+      className="ms-auto text-xs text-fd-muted-foreground"
+    >
+      Search powered by Orama
+    </a>
+  );
+}