@mehdad67/apitogo 0.1.24

package/src/lib/ui/Carousel.tsx

@@ -0,0 +1,259 @@
+import useEmblaCarousel, {
+  type UseEmblaCarouselType,
+} from "embla-carousel-react";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import * as React from "react";
+import { cn } from "../util/cn.js";
+import { Button } from "./Button.js";
+
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+
+type CarouselProps = {
+  opts?: CarouselOptions;
+  plugins?: CarouselPlugin;
+  orientation?: "horizontal" | "vertical";
+  setApi?: (api: CarouselApi) => void;
+};
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+  api: ReturnType<typeof useEmblaCarousel>[1];
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+} & CarouselProps;
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null);
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext);
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />");
+  }
+
+  return context;
+}
+
+const Carousel = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & CarouselProps
+>(
+  (
+    {
+      orientation = "horizontal",
+      opts,
+      setApi,
+      plugins,
+      className,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const [carouselRef, api] = useEmblaCarousel(
+      {
+        ...opts,
+        axis: orientation === "horizontal" ? "x" : "y",
+      },
+      plugins,
+    );
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+    const [canScrollNext, setCanScrollNext] = React.useState(false);
+
+    const onSelect = React.useCallback((api: CarouselApi) => {
+      if (!api) {
+        return;
+      }
+
+      setCanScrollPrev(api.canScrollPrev());
+      setCanScrollNext(api.canScrollNext());
+    }, []);
+
+    const scrollPrev = React.useCallback(() => {
+      api?.scrollPrev();
+    }, [api]);
+
+    const scrollNext = React.useCallback(() => {
+      api?.scrollNext();
+    }, [api]);
+
+    const handleKeyDown = React.useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (event.key === "ArrowLeft") {
+          event.preventDefault();
+          scrollPrev();
+        } else if (event.key === "ArrowRight") {
+          event.preventDefault();
+          scrollNext();
+        }
+      },
+      [scrollPrev, scrollNext],
+    );
+
+    React.useEffect(() => {
+      if (!api || !setApi) {
+        return;
+      }
+
+      setApi(api);
+    }, [api, setApi]);
+
+    React.useEffect(() => {
+      if (!api) {
+        return;
+      }
+
+      onSelect(api);
+      api.on("reInit", onSelect);
+      api.on("select", onSelect);
+
+      return () => {
+        api.off("select", onSelect);
+      };
+    }, [api, onSelect]);
+
+    return (
+      <CarouselContext.Provider
+        value={{
+          carouselRef,
+          api: api,
+          opts,
+          orientation:
+            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext,
+        }}
+      >
+        <div
+          ref={ref}
+          onKeyDownCapture={handleKeyDown}
+          className={cn("relative", className)}
+          role="region"
+          aria-roledescription="carousel"
+          {...props}
+        >
+          {children}
+        </div>
+      </CarouselContext.Provider>
+    );
+  },
+);
+Carousel.displayName = "Carousel";
+
+const CarouselContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { carouselRef, orientation } = useCarousel();
+
+  return (
+    <div ref={carouselRef} className="overflow-hidden">
+      <div
+        ref={ref}
+        className={cn(
+          "flex",
+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  );
+});
+CarouselContent.displayName = "CarouselContent";
+
+const CarouselItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+  const { orientation } = useCarousel();
+
+  return (
+    <div
+      ref={ref}
+      role="group"
+      aria-roledescription="slide"
+      className={cn(
+        "min-w-0 shrink-0 grow-0 basis-full",
+        orientation === "horizontal" ? "pl-4" : "pt-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+CarouselItem.displayName = "CarouselItem";
+
+const CarouselPrevious = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute  h-8 w-8 rounded-full",
+        orientation === "horizontal"
+          ? "-left-12 top-1/2 -translate-y-1/2"
+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+        className,
+      )}
+      disabled={!canScrollPrev}
+      onClick={scrollPrev}
+      {...props}
+    >
+      <ArrowLeft className="h-4 w-4" />
+      <span className="sr-only">Previous slide</span>
+    </Button>
+  );
+});
+CarouselPrevious.displayName = "CarouselPrevious";
+
+const CarouselNext = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+  const { orientation, scrollNext, canScrollNext } = useCarousel();
+
+  return (
+    <Button
+      ref={ref}
+      variant={variant}
+      size={size}
+      className={cn(
+        "absolute h-8 w-8 rounded-full",
+        orientation === "horizontal"
+          ? "-right-12 top-1/2 -translate-y-1/2"
+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+        className,
+      )}
+      disabled={!canScrollNext}
+      onClick={scrollNext}
+      {...props}
+    >
+      <ArrowRight className="h-4 w-4" />
+      <span className="sr-only">Next slide</span>
+    </Button>
+  );
+});
+CarouselNext.displayName = "CarouselNext";
+
+export {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+  type CarouselApi,
+};

package/src/lib/ui/Checkbox.tsx

@@ -0,0 +1,28 @@
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { CheckIcon } from "lucide-react";
+import type * as React from "react";
+import { cn } from "../util/cn.js";
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
+export { Checkbox };

package/src/lib/ui/CodeBlock.tsx

@@ -0,0 +1,92 @@
+import { CheckIcon, CopyIcon } from "lucide-react";
+import { type ReactNode, useRef } from "react";
+import { LanguageIcon } from "../components/LanguageIcon.js";
+import { cn } from "../util/cn.js";
+import { useCopyToClipboard } from "../util/useCopyToClipboard.js";
+
+export const CopyCodeButton = ({
+  contentRef,
+}: {
+  contentRef: React.RefObject<HTMLDivElement | null>;
+}) => {
+  const [isCopied, copyToClipboard] = useCopyToClipboard();
+  return (
+    <button
+      type="button"
+      aria-label="Copy code"
+      title="Copy code"
+      className={cn(
+        "transition p-1.5 mx-1 rounded-lg",
+        !isCopied && "hover:bg-accent hover:brightness-95",
+      )}
+      disabled={isCopied}
+      onClick={() => copyToClipboard(contentRef.current?.textContent ?? "")}
+    >
+      {isCopied ? (
+        <CheckIcon className="text-emerald-600" size={14} />
+      ) : (
+        <CopyIcon size={14} />
+      )}
+    </button>
+  );
+};
+
+export const codeBlockClass = cn(
+  "border code-block-wrapper relative group rounded-xl overflow-hidden",
+);
+
+export const codeBlockHeaderClass = cn("flex items-center py-0.5 bg-black/4");
+
+export const codeBlockContentClass = cn(
+  "code-block p-0.5 text-sm not-prose scrollbar bg-black/4",
+  "[&_code]:rounded-b-[calc(var(--radius)+1px)] [&>pre]:rounded-b-[calc(var(--radius)+1px)] [&_code]:px-3 [&_code]:py-2",
+);
+
+export type CodeBlockProps = {
+  className?: string;
+  wrapLines?: boolean;
+  showLanguageIndicator?: boolean;
+  language?: string;
+  icon?: string;
+  title?: string;
+  children?: ReactNode;
+  code?: ReactNode;
+  showCopy?: "hover" | "always" | "never";
+  disabled?: boolean;
+  showLineNumbers?: boolean;
+};
+
+export const CodeBlock = ({
+  children,
+  title = "Code",
+  language,
+  icon,
+  showCopy = "hover",
+  showLanguageIndicator,
+  showLineNumbers,
+  ...props
+}: CodeBlockProps) => {
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  if (!children) return null;
+
+  return (
+    <div className={cn(codeBlockClass, props.className)}>
+      <div className={codeBlockHeaderClass}>
+        <div className="flex items-center gap-1.5 flex-1 text-sm w-full px-3">
+          {showLanguageIndicator && (
+            <LanguageIcon language={icon ?? language} />
+          )}
+          {title}
+        </div>
+        {showCopy !== "never" && <CopyCodeButton contentRef={contentRef} />}
+      </div>
+      <div
+        ref={contentRef}
+        className={cn(codeBlockContentClass, showLineNumbers && "line-numbers")}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};

package/src/lib/ui/CodeTabPanel.tsx

@@ -0,0 +1,13 @@
+export type CodeTabPanelProps = {
+  language?: string;
+  icon?: string;
+  title?: string;
+  code: string;
+  meta?: string;
+};
+
+// This component never renders. It serves as a typed data container whose props
+// are extracted by CodeTabs to build tab panels. Used in MDX via the
+// remark-code-tabs plugin which converts fenced code blocks into CodeTabPanel elements.
+export const CodeTabPanel = (_props: CodeTabPanelProps) => null;
+CodeTabPanel.displayName = "CodeTabPanel";

package/src/lib/ui/CodeTabs.tsx

@@ -0,0 +1,161 @@
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import {
+  Children,
+  isValidElement,
+  type PropsWithChildren,
+  type ReactNode,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
+import { LanguageIcon } from "../components/LanguageIcon.js";
+import { parseMetaString } from "../shiki.js";
+import { cn } from "../util/cn.js";
+import { syncZustandState } from "../util/syncZustandState.js";
+import {
+  CopyCodeButton,
+  codeBlockClass,
+  codeBlockContentClass,
+  codeBlockHeaderClass,
+} from "./CodeBlock.js";
+import { type CodeTabPanelProps, CodeTabPanel } from "./CodeTabPanel.js";
+import { HighlightedCode } from "./SyntaxHighlight.js";
+
+export { CodeTabPanel, type CodeTabPanelProps };
+
+type CodeTabSyncState = {
+  tabs: Record<string, string>;
+  setTab: (key: string, value: string) => void;
+};
+
+const useCodeTabSyncStore = create<CodeTabSyncState>()(
+  persist(
+    (set) => ({
+      tabs: {},
+      setTab: (key, value) =>
+        set((state) => ({ tabs: { ...state.tabs, [key]: value } })),
+    }),
+    {
+      name: "zudoku-code-tabs",
+      storage: createJSONStorage(() => localStorage),
+    },
+  ),
+);
+
+syncZustandState(useCodeTabSyncStore);
+
+// Uses displayName instead of reference equality to survive HMR module reloads
+const isCodeTabPanel = (
+  child: ReactNode,
+): child is React.ReactElement<CodeTabPanelProps> =>
+  isValidElement(child) &&
+  (child.type as typeof CodeTabPanel).displayName === CodeTabPanel.displayName;
+
+type CodeTabsProps = PropsWithChildren<{
+  syncKey?: string;
+  hideIcon?: boolean;
+}>;
+
+export const CodeTabs = ({
+  children,
+  syncKey,
+  hideIcon = false,
+}: CodeTabsProps) => {
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [localTab, setLocalTab] = useState(0);
+  const syncedTabKey = useCodeTabSyncStore((s) =>
+    syncKey ? s.tabs[syncKey] : undefined,
+  );
+  const setSyncedTab = useCodeTabSyncStore((s) => s.setTab);
+
+  const panels = useMemo(() => {
+    return Children.toArray(children)
+      .filter(isCodeTabPanel)
+      .map(({ props }, i) => {
+        const meta = props.meta ? parseMetaString(props.meta) : {};
+        const metaIcon = typeof meta.icon === "string" ? meta.icon : undefined;
+        const metaTitle =
+          typeof meta.title === "string" ? meta.title : undefined;
+        return {
+          ...props,
+          icon: props.icon ?? metaIcon,
+          title: props.title ?? metaTitle,
+          showLineNumbers: meta.showLineNumbers,
+          label: metaTitle ?? props.title ?? props.language ?? `Tab ${i + 1}`,
+        };
+      });
+  }, [children]);
+
+  const syncedIndex = syncedTabKey
+    ? panels.findIndex((p) => p.label === syncedTabKey)
+    : -1;
+
+  const activeIndex = Math.min(
+    Math.max(0, syncKey ? syncedIndex : localTab),
+    panels.length - 1,
+  );
+
+  const setActiveIndex = (i: number) => {
+    const panel = panels[i];
+    if (syncKey && panel) {
+      setSyncedTab(syncKey, panel.label);
+    } else {
+      setLocalTab(i);
+    }
+  };
+
+  const activePanel = panels.at(activeIndex);
+
+  return (
+    <TabsPrimitive.Root
+      value={String(activeIndex)}
+      onValueChange={(value) => setActiveIndex(Number(value))}
+      className={codeBlockClass}
+    >
+      <div className={codeBlockHeaderClass}>
+        <TabsPrimitive.List className="flex items-center gap-1 flex-1 text-sm w-full px-1.5">
+          {panels.map((panel, i) => (
+            <TabsPrimitive.Trigger
+              key={[panel.label, panel.language].join(",")}
+              value={String(i)}
+              className={cn(
+                "relative flex items-center gap-1.5 px-2 py-1 text-sm",
+                "after:transition after:absolute after:opacity-0 data-[state=active]:after:opacity-100",
+                "after:h-0.5 after:-inset-x-0.5 after:-bottom-0.5 after:bg-foreground after:rounded",
+                "text-muted-foreground hover:text-foreground data-[state=active]:text-foreground",
+              )}
+            >
+              {!hideIcon && (
+                <LanguageIcon language={panel.icon ?? panel.language} />
+              )}
+              {panel.label}
+            </TabsPrimitive.Trigger>
+          ))}
+        </TabsPrimitive.List>
+        <CopyCodeButton contentRef={contentRef} />
+      </div>
+      <div
+        ref={contentRef}
+        className={cn(
+          codeBlockContentClass,
+          activePanel?.showLineNumbers && "line-numbers",
+        )}
+      >
+        {panels.map((panel, i) => (
+          <TabsPrimitive.Content
+            key={[panel.label, panel.language].join(",")}
+            value={String(i)}
+          >
+            <HighlightedCode
+              code={panel.code}
+              language={panel.language}
+              meta={panel.meta}
+            />
+          </TabsPrimitive.Content>
+        ))}
+      </div>
+    </TabsPrimitive.Root>
+  );
+};

package/src/lib/ui/Collapsible.tsx

@@ -0,0 +1,31 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  );
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  );
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };