sh-ui-cli 0.44.0 → 0.45.0

package/data/registry/react/components/carousel/index.tailwind.tsx

@@ -0,0 +1,309 @@
+"use client";
+
+import * as React from "react";
+
+function cx(...args: (string | undefined | false | null)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+type Orientation = "horizontal" | "vertical";
+
+interface CarouselContextValue {
+  orientation: Orientation; loop: boolean;
+  index: number; count: number;
+  goTo: (i: number) => void; goPrev: () => void; goNext: () => void;
+  registerItem: () => () => void;
+  setContentEl: (el: HTMLDivElement | null) => void;
+  contentRef: React.RefObject<HTMLDivElement | null>;
+}
+
+const CarouselContext = React.createContext<CarouselContextValue | null>(null);
+
+function useCarousel() {
+  const ctx = React.useContext(CarouselContext);
+  if (!ctx) throw new Error("Carousel parts must be used within <Carousel>");
+  return ctx;
+}
+
+export function useCarouselState() {
+  const { orientation, loop, index, count, goTo, goPrev, goNext } = useCarousel();
+  return { orientation, loop, index, count, goTo, goPrev, goNext };
+}
+
+export interface CarouselProps extends React.HTMLAttributes<HTMLDivElement> {
+  orientation?: Orientation;
+  loop?: boolean;
+  autoPlay?: boolean | number;
+  defaultIndex?: number;
+  index?: number;
+  onIndexChange?: (index: number) => void;
+}
+
+export const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
+  ({ className, orientation = "horizontal", loop = false, autoPlay, defaultIndex = 0, index: controlledIndex, onIndexChange, children, onKeyDown: userOnKeyDown, ...props }, ref) => {
+    const isControlled = controlledIndex !== undefined;
+    const [uncontrolled, setUncontrolled] = React.useState(defaultIndex);
+    const index = isControlled ? controlledIndex : uncontrolled;
+    const [count, setCount] = React.useState(0);
+    const contentRef = React.useRef<HTMLDivElement | null>(null);
+    const scrollTargetRef = React.useRef<number | null>(null);
+
+    const setContentEl = React.useCallback((el: HTMLDivElement | null) => { contentRef.current = el; }, []);
+    const registerItem = React.useCallback(() => {
+      setCount((c) => c + 1);
+      return () => setCount((c) => Math.max(0, c - 1));
+    }, []);
+
+    const setIndex = React.useCallback((next: number) => {
+      if (!isControlled) setUncontrolled(next);
+      onIndexChange?.(next);
+    }, [isControlled, onIndexChange]);
+
+    const clamp = React.useCallback((i: number) => {
+      if (count <= 0) return 0;
+      if (loop) return ((i % count) + count) % count;
+      return Math.max(0, Math.min(count - 1, i));
+    }, [count, loop]);
+
+    const goTo = React.useCallback((i: number) => setIndex(clamp(i)), [clamp, setIndex]);
+    const goPrev = React.useCallback(() => setIndex(clamp(index - 1)), [clamp, index, setIndex]);
+    const goNext = React.useCallback(() => setIndex(clamp(index + 1)), [clamp, index, setIndex]);
+
+    React.useEffect(() => {
+      const el = contentRef.current;
+      if (!el) return;
+      const child = el.children[index] as HTMLElement | undefined;
+      if (!child) return;
+      scrollTargetRef.current = index;
+      if (orientation === "horizontal") el.scrollTo({ left: child.offsetLeft, behavior: "smooth" });
+      else el.scrollTo({ top: child.offsetTop, behavior: "smooth" });
+    }, [index, orientation, count]);
+
+    React.useEffect(() => {
+      const el = contentRef.current;
+      if (!el) return;
+      let raf = 0;
+      const onScroll = () => {
+        cancelAnimationFrame(raf);
+        raf = requestAnimationFrame(() => {
+          const children = Array.from(el.children) as HTMLElement[];
+          if (children.length === 0) return;
+          const axis = orientation === "horizontal" ? "offsetLeft" : "offsetTop";
+          const scroll = orientation === "horizontal" ? el.scrollLeft : el.scrollTop;
+          let nearest = 0; let minDelta = Infinity;
+          children.forEach((c, i) => {
+            const d = Math.abs(c[axis] - scroll);
+            if (d < minDelta) { minDelta = d; nearest = i; }
+          });
+          if (nearest !== index) {
+            if (scrollTargetRef.current !== null && nearest !== scrollTargetRef.current) return;
+            scrollTargetRef.current = null;
+            setIndex(nearest);
+          } else scrollTargetRef.current = null;
+        });
+      };
+      el.addEventListener("scroll", onScroll, { passive: true });
+      return () => { cancelAnimationFrame(raf); el.removeEventListener("scroll", onScroll); };
+    }, [orientation, index, setIndex]);
+
+    React.useEffect(() => {
+      if (!autoPlay || count <= 1) return;
+      const delay = autoPlay === true ? 4000 : autoPlay;
+      const el = contentRef.current;
+      let paused = false;
+      const pause = () => (paused = true);
+      const resume = () => (paused = false);
+      el?.addEventListener("mouseenter", pause);
+      el?.addEventListener("mouseleave", resume);
+      el?.addEventListener("focusin", pause);
+      el?.addEventListener("focusout", resume);
+      const id = window.setInterval(() => { if (paused) return; setIndex(clamp(index + 1)); }, delay);
+      return () => {
+        window.clearInterval(id);
+        el?.removeEventListener("mouseenter", pause);
+        el?.removeEventListener("mouseleave", resume);
+        el?.removeEventListener("focusin", pause);
+        el?.removeEventListener("focusout", resume);
+      };
+    }, [autoPlay, count, index, clamp, setIndex]);
+
+    const onKeyDown = React.useCallback((event: React.KeyboardEvent<HTMLDivElement>) => {
+      userOnKeyDown?.(event);
+      if (event.defaultPrevented) return;
+      const prevKey = orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
+      const nextKey = orientation === "horizontal" ? "ArrowRight" : "ArrowDown";
+      if (event.key === prevKey) { event.preventDefault(); goPrev(); }
+      else if (event.key === nextKey) { event.preventDefault(); goNext(); }
+    }, [orientation, goPrev, goNext, userOnKeyDown]);
+
+    const value = React.useMemo<CarouselContextValue>(() => ({
+      orientation, loop, index, count, goTo, goPrev, goNext, registerItem, setContentEl, contentRef,
+    }), [orientation, loop, index, count, goTo, goPrev, goNext, registerItem, setContentEl]);
+
+    return (
+      <CarouselContext.Provider value={value}>
+        <div
+          ref={ref}
+          className={cx("relative w-full", className)}
+          data-orientation={orientation}
+          role="region"
+          aria-roledescription="carousel"
+          onKeyDown={onKeyDown}
+          {...props}
+        >
+          {children}
+        </div>
+      </CarouselContext.Provider>
+    );
+  },
+);
+Carousel.displayName = "Carousel";
+
+export const CarouselContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { orientation, setContentEl } = useCarousel();
+    const mergedRef = React.useCallback((el: HTMLDivElement | null) => {
+      setContentEl(el);
+      if (typeof ref === "function") ref(el);
+      else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = el;
+    }, [ref, setContentEl]);
+
+    return (
+      <div
+        ref={mergedRef}
+        className={cx(
+          "flex gap-[var(--space-4)] overflow-x-auto overflow-y-hidden snap-x snap-mandatory scroll-smooth [scrollbar-width:none] [-ms-overflow-style:none] [-webkit-overflow-scrolling:touch] overscroll-x-contain [&::-webkit-scrollbar]:hidden motion-reduce:scroll-auto",
+          orientation === "vertical" && "flex-col overflow-x-hidden overflow-y-auto snap-y snap-mandatory h-80",
+          className,
+        )}
+        data-orientation={orientation}
+        {...props}
+      />
+    );
+  },
+);
+CarouselContent.displayName = "CarouselContent";
+
+export const CarouselItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { orientation, registerItem } = useCarousel();
+    React.useEffect(() => registerItem(), [registerItem]);
+    return (
+      <div
+        ref={ref}
+        role="group"
+        aria-roledescription="slide"
+        className={cx(
+          "flex-[0_0_100%] min-w-0 snap-start snap-always",
+          orientation === "vertical" && "basis-auto",
+          className,
+        )}
+        data-orientation={orientation}
+        {...props}
+      />
+    );
+  },
+);
+CarouselItem.displayName = "CarouselItem";
+
+const navClasses =
+  "absolute top-1/2 w-8 h-8 inline-flex items-center justify-center bg-background text-foreground border border-border rounded-full cursor-pointer -translate-y-1/2 z-[1] transition-[opacity,background-color] duration-[var(--duration-fast)] hover:not-disabled:bg-background-muted focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 disabled:opacity-40 disabled:cursor-not-allowed motion-reduce:transition-none data-[orientation=vertical]:left-1/2 data-[orientation=vertical]:-translate-x-1/2 data-[orientation=vertical]:[top:auto]";
+
+export const CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(
+  ({ className, onClick, disabled, children, ...props }, ref) => {
+    const { goPrev, orientation, index, count, loop } = useCarousel();
+    const atStart = !loop && index <= 0;
+    return (
+      <button
+        ref={ref}
+        type="button"
+        aria-label="이전"
+        className={cx(
+          navClasses,
+          orientation === "horizontal" ? "-left-4" : "-top-4 left-1/2",
+          className,
+        )}
+        data-orientation={orientation}
+        disabled={disabled || atStart || count === 0}
+        onClick={(e) => { onClick?.(e); if (!e.defaultPrevented) goPrev(); }}
+        {...props}
+      >
+        {children ?? (
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+            <path d={orientation === "horizontal" ? "M10 4l-4 4 4 4" : "M4 10l4-4 4 4"} stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+        )}
+      </button>
+    );
+  },
+);
+CarouselPrevious.displayName = "CarouselPrevious";
+
+export const CarouselNext = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(
+  ({ className, onClick, disabled, children, ...props }, ref) => {
+    const { goNext, orientation, index, count, loop } = useCarousel();
+    const atEnd = !loop && index >= count - 1;
+    return (
+      <button
+        ref={ref}
+        type="button"
+        aria-label="다음"
+        className={cx(
+          navClasses,
+          orientation === "horizontal" ? "-right-4" : "-bottom-4 left-1/2 [top:auto]",
+          className,
+        )}
+        data-orientation={orientation}
+        disabled={disabled || atEnd || count === 0}
+        onClick={(e) => { onClick?.(e); if (!e.defaultPrevented) goNext(); }}
+        {...props}
+      >
+        {children ?? (
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+            <path d={orientation === "horizontal" ? "M6 4l4 4-4 4" : "M4 6l4 4 4-4"} stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+        )}
+      </button>
+    );
+  },
+);
+CarouselNext.displayName = "CarouselNext";
+
+export interface CarouselIndicatorsProps extends React.HTMLAttributes<HTMLDivElement> {
+  labelFor?: (index: number) => string;
+}
+
+export const CarouselIndicators = React.forwardRef<HTMLDivElement, CarouselIndicatorsProps>(
+  ({ className, labelFor, ...props }, ref) => {
+    const { count, index, goTo, orientation } = useCarousel();
+    if (count <= 0) return null;
+    return (
+      <div
+        ref={ref}
+        role="tablist"
+        aria-label="슬라이드 선택"
+        className={cx(
+          "flex justify-center items-center gap-[var(--space-2)] mt-[var(--space-3)]",
+          orientation === "vertical" && "absolute top-1/2 right-2 mt-0 flex-col -translate-y-1/2",
+          className,
+        )}
+        data-orientation={orientation}
+        {...props}
+      >
+        {Array.from({ length: count }).map((_, i) => (
+          <button
+            key={i}
+            type="button"
+            role="tab"
+            aria-selected={i === index}
+            aria-label={labelFor ? labelFor(i) : `${i + 1}번 슬라이드`}
+            className="w-2 h-2 p-0 bg-border border-none rounded-full cursor-pointer transition-[background-color,transform] duration-[var(--duration-fast)] hover:bg-border-strong data-[active]:bg-foreground data-[active]:scale-[1.2] focus-visible:outline-[length:var(--border-width-strong)] focus-visible:outline-foreground focus-visible:outline-offset-2 motion-reduce:transition-none"
+            data-active={i === index || undefined}
+            onClick={() => goTo(i)}
+          />
+        ))}
+      </div>
+    );
+  },
+);
+CarouselIndicators.displayName = "CarouselIndicators";

package/data/registry/react/components/code-editor/index.tailwind.tsx

@@ -0,0 +1,168 @@
+"use client";
+
+import { useEffect, useMemo, useRef } from "react";
+import { Compartment, EditorState, type Extension } from "@codemirror/state";
+import { EditorView, placeholder as placeholderExt } from "@codemirror/view";
+import { basicSetup } from "codemirror";
+import { javascript } from "@codemirror/lang-javascript";
+import { json } from "@codemirror/lang-json";
+import { css as cssLang } from "@codemirror/lang-css";
+import { html } from "@codemirror/lang-html";
+import { markdown } from "@codemirror/lang-markdown";
+
+export type CodeEditorLanguage =
+  | "text" | "javascript" | "typescript" | "jsx" | "tsx"
+  | "json" | "css" | "html" | "markdown";
+
+export interface CodeEditorProps {
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  language?: CodeEditorLanguage;
+  placeholder?: string;
+  readOnly?: boolean;
+  showLineNumbers?: boolean;
+  minHeight?: string;
+  maxHeight?: string;
+  className?: string;
+  id?: string;
+  "aria-label"?: string;
+  "aria-labelledby"?: string;
+}
+
+function cx(...args: (string | undefined | false | null)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+function languageExtension(language: CodeEditorLanguage): Extension {
+  switch (language) {
+    case "javascript": return javascript();
+    case "typescript": return javascript({ typescript: true });
+    case "jsx": return javascript({ jsx: true });
+    case "tsx": return javascript({ jsx: true, typescript: true });
+    case "json": return json();
+    case "css": return cssLang();
+    case "html": return html();
+    case "markdown": return markdown();
+    case "text":
+    default: return [];
+  }
+}
+
+/**
+ * CodeMirror 6 기반 인라인 코드 에디터 (Tailwind 변종).
+ * CodeMirror 자체의 .cm-* descendant 클래스는 Tailwind utility 로 표현 어려워
+ * <style> 태그로 한 번 inject — 컴포넌트의 outer wrapper 만 Tailwind utility.
+ */
+export function CodeEditor({
+  value: valueProp, defaultValue, onChange, language = "text", placeholder, readOnly = false,
+  showLineNumbers = true, minHeight, maxHeight, className, id,
+  "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy,
+}: CodeEditorProps) {
+  const isControlled = valueProp !== undefined;
+  const hostRef = useRef<HTMLDivElement>(null);
+  const viewRef = useRef<EditorView | null>(null);
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const initialDocRef = useRef(valueProp ?? defaultValue ?? "");
+
+  const compartments = useMemo(() => ({
+    language: new Compartment(),
+    readOnly: new Compartment(),
+    lineNumbers: new Compartment(),
+    placeholder: new Compartment(),
+  }), []);
+
+  useEffect(() => {
+    if (!hostRef.current) return;
+    const extensions: Extension[] = [
+      basicSetup,
+      EditorView.lineWrapping,
+      EditorView.updateListener.of((update) => {
+        if (update.docChanged) onChangeRef.current?.(update.state.doc.toString());
+      }),
+      compartments.language.of(languageExtension(language)),
+      compartments.readOnly.of(EditorState.readOnly.of(readOnly)),
+      compartments.lineNumbers.of(showLineNumbers ? [] : EditorView.theme({ ".cm-gutters": { display: "none" } })),
+      compartments.placeholder.of(placeholder ? placeholderExt(placeholder) : []),
+    ];
+    const view = new EditorView({
+      state: EditorState.create({ doc: initialDocRef.current, extensions }),
+      parent: hostRef.current,
+    });
+    viewRef.current = view;
+    return () => { view.destroy(); viewRef.current = null; };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  useEffect(() => {
+    if (!isControlled) return;
+    const view = viewRef.current;
+    if (!view) return;
+    const current = view.state.doc.toString();
+    if (current === valueProp) return;
+    view.dispatch({ changes: { from: 0, to: current.length, insert: valueProp ?? "" } });
+  }, [isControlled, valueProp]);
+
+  useEffect(() => {
+    viewRef.current?.dispatch({ effects: compartments.language.reconfigure(languageExtension(language)) });
+  }, [language, compartments.language]);
+
+  useEffect(() => {
+    viewRef.current?.dispatch({ effects: compartments.readOnly.reconfigure(EditorState.readOnly.of(readOnly)) });
+  }, [readOnly, compartments.readOnly]);
+
+  useEffect(() => {
+    viewRef.current?.dispatch({
+      effects: compartments.lineNumbers.reconfigure(showLineNumbers ? [] : EditorView.theme({ ".cm-gutters": { display: "none" } })),
+    });
+  }, [showLineNumbers, compartments.lineNumbers]);
+
+  useEffect(() => {
+    viewRef.current?.dispatch({
+      effects: compartments.placeholder.reconfigure(placeholder ? placeholderExt(placeholder) : []),
+    });
+  }, [placeholder, compartments.placeholder]);
+
+  useEffect(() => {
+    const view = viewRef.current;
+    if (!view) return;
+    const node = view.contentDOM;
+    if (id) node.id = id;
+    if (ariaLabel) node.setAttribute("aria-label", ariaLabel); else node.removeAttribute("aria-label");
+    if (ariaLabelledBy) node.setAttribute("aria-labelledby", ariaLabelledBy); else node.removeAttribute("aria-labelledby");
+  }, [id, ariaLabel, ariaLabelledBy]);
+
+  return (
+    <div
+      ref={hostRef}
+      className={cx(
+        "sh-ui-code-editor relative border border-border rounded-[var(--radius)] bg-background text-[0.8125rem] leading-relaxed overflow-hidden transition-[border-color] duration-[var(--duration-fast)] focus-within:border-foreground focus-within:outline-[length:var(--border-width-strong)] focus-within:outline-foreground focus-within:outline-offset-2 data-[readonly]:bg-background-subtle motion-reduce:transition-none",
+        className,
+      )}
+      data-readonly={readOnly || undefined}
+      style={{ "--sh-ui-code-editor-min-height": minHeight, "--sh-ui-code-editor-max-height": maxHeight } as React.CSSProperties}
+    />
+  );
+}
+
+if (typeof document !== "undefined" && !document.querySelector("style[data-sh-ui-code-editor]")) {
+  const style = document.createElement("style");
+  style.setAttribute("data-sh-ui-code-editor", "");
+  style.textContent = `
+.sh-ui-code-editor .cm-editor { background: transparent; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
+.sh-ui-code-editor .cm-editor.cm-focused { outline: none; }
+.sh-ui-code-editor .cm-scroller { font-family: inherit; min-height: var(--sh-ui-code-editor-min-height, 7.5rem); max-height: var(--sh-ui-code-editor-max-height, 25rem); }
+.sh-ui-code-editor .cm-content { caret-color: var(--foreground); color: var(--foreground); padding: var(--space-3) 0; }
+.sh-ui-code-editor .cm-line { padding: 0 var(--space-3); }
+.sh-ui-code-editor .cm-gutters { background: var(--background-subtle); color: var(--foreground-muted); border-right: 1px solid var(--border); }
+.sh-ui-code-editor .cm-activeLineGutter, .sh-ui-code-editor .cm-activeLine { background: var(--background-muted); }
+.sh-ui-code-editor .cm-cursor, .sh-ui-code-editor .cm-dropCursor { border-left-color: var(--foreground); }
+.sh-ui-code-editor .cm-selectionBackground, .sh-ui-code-editor .cm-editor .cm-selectionBackground, .sh-ui-code-editor .cm-editor.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .sh-ui-code-editor ::selection { background: var(--background-muted) !important; }
+.sh-ui-code-editor .cm-placeholder { color: var(--foreground-muted); }
+.sh-ui-code-editor .cm-tooltip { background: var(--background); border: 1px solid var(--border); color: var(--foreground); border-radius: calc(var(--radius) - 2px); }
+.sh-ui-code-editor .cm-tooltip-autocomplete > ul > li[aria-selected] { background: var(--background-muted); color: var(--foreground); }
+.sh-ui-code-editor .cm-matchingBracket, .sh-ui-code-editor .cm-nonmatchingBracket { background: var(--background-muted); color: var(--foreground); }
+  `;
+  document.head.appendChild(style);
+}