@hanzo/ui 5.6.1 → 8.0.0

package/docs/components/codeblock.tsx

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

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

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

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