@simplysm/solid 13.0.0-beta.6

package/src/components/display/Barcode.tsx

@@ -0,0 +1,158 @@
+import { type Component, createEffect, splitProps, type JSX } from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import bwipjs from "bwip-js/browser";
+
+export type BarcodeType =
+  | "auspost"
+  | "azteccode"
+  | "azteccodecompact"
+  | "aztecrune"
+  | "bc412"
+  | "channelcode"
+  | "codablockf"
+  | "code11"
+  | "code128"
+  | "code16k"
+  | "code2of5"
+  | "code32"
+  | "code39"
+  | "code39ext"
+  | "code49"
+  | "code93"
+  | "code93ext"
+  | "codeone"
+  | "coop2of5"
+  | "daft"
+  | "databarexpanded"
+  | "databarexpandedcomposite"
+  | "databarexpandedstacked"
+  | "databarexpandedstackedcomposite"
+  | "databarlimited"
+  | "databarlimitedcomposite"
+  | "databaromni"
+  | "databaromnicomposite"
+  | "databarstacked"
+  | "databarstackedcomposite"
+  | "databarstackedomni"
+  | "databarstackedomnicomposite"
+  | "databartruncated"
+  | "databartruncatedcomposite"
+  | "datalogic2of5"
+  | "datamatrix"
+  | "datamatrixrectangular"
+  | "datamatrixrectangularextension"
+  | "dotcode"
+  | "ean13"
+  | "ean13composite"
+  | "ean14"
+  | "ean2"
+  | "ean5"
+  | "ean8"
+  | "ean8composite"
+  | "flattermarken"
+  | "gs1-128"
+  | "gs1-128composite"
+  | "gs1-cc"
+  | "gs1datamatrix"
+  | "gs1datamatrixrectangular"
+  | "gs1dldatamatrix"
+  | "gs1dlqrcode"
+  | "gs1dotcode"
+  | "gs1northamericancoupon"
+  | "gs1qrcode"
+  | "hanxin"
+  | "hibcazteccode"
+  | "hibccodablockf"
+  | "hibccode128"
+  | "hibccode39"
+  | "hibcdatamatrix"
+  | "hibcdatamatrixrectangular"
+  | "hibcmicropdf417"
+  | "hibcpdf417"
+  | "hibcqrcode"
+  | "iata2of5"
+  | "identcode"
+  | "industrial2of5"
+  | "interleaved2of5"
+  | "isbn"
+  | "ismn"
+  | "issn"
+  | "itf14"
+  | "japanpost"
+  | "kix"
+  | "leitcode"
+  | "mailmark"
+  | "mands"
+  | "matrix2of5"
+  | "maxicode"
+  | "micropdf417"
+  | "microqrcode"
+  | "msi"
+  | "onecode"
+  | "pdf417"
+  | "pdf417compact"
+  | "pharmacode"
+  | "pharmacode2"
+  | "planet"
+  | "plessey"
+  | "posicode"
+  | "postnet"
+  | "pzn"
+  | "qrcode"
+  | "rationalizedCodabar"
+  | "raw"
+  | "rectangularmicroqrcode"
+  | "royalmail"
+  | "sscc18"
+  | "swissqrcode"
+  | "symbol"
+  | "telepen"
+  | "telepennumeric"
+  | "ultracode"
+  | "upca"
+  | "upcacomposite"
+  | "upce"
+  | "upcecomposite";
+
+export interface BarcodeProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  type: BarcodeType;
+  value?: string;
+}
+
+const baseClass = clsx("inline-block");
+
+export const Barcode: Component<BarcodeProps> = (props) => {
+  const [local, rest] = splitProps(props, ["type", "value", "class"]);
+  let containerRef!: HTMLDivElement;
+
+  createEffect(() => {
+    const value = local.value;
+    if (value == null || value === "") {
+      containerRef.innerHTML = "";
+      return;
+    }
+
+    try {
+      const svg = bwipjs.toSVG({
+        bcid: local.type,
+        text: value,
+      });
+      containerRef.innerHTML = svg;
+
+      const svgEl = containerRef.querySelector("svg");
+      if (svgEl) {
+        const viewBox = svgEl.getAttribute("viewBox");
+        if (viewBox != null) {
+          const parts = viewBox.split(" ");
+          svgEl.setAttribute("width", parts[2]);
+          svgEl.setAttribute("height", parts[3]);
+        }
+      }
+    } catch {
+      containerRef.innerHTML = "";
+    }
+  });
+
+  return <div data-barcode ref={containerRef} class={twMerge(baseClass, local.class)} {...rest} />;
+};

package/src/components/display/Card.css

@@ -0,0 +1,14 @@
+@keyframes card-in {
+  from {
+    opacity: 0;
+    transform: translateY(-1rem);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+.animate-card-in {
+  animation: card-in 0.3s ease-out forwards;
+}

package/src/components/display/Card.tsx

@@ -0,0 +1,26 @@
+import { type JSX, type ParentComponent, splitProps } from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import "./Card.css";
+
+export interface CardProps extends JSX.HTMLAttributes<HTMLDivElement> {}
+
+const baseClass = clsx(
+  "block",
+  "bg-white dark:bg-base-800",
+  "rounded-lg",
+  "shadow focus-within:shadow-md hover:shadow-md",
+  "dark:shadow-black/20 dark:focus-within:shadow-black/30 dark:hover:shadow-black/30",
+  "transition-shadow duration-300",
+  "animate-card-in",
+);
+
+export const Card: ParentComponent<CardProps> = (props) => {
+  const [local, rest] = splitProps(props, ["children", "class"]);
+
+  return (
+    <div data-card class={twMerge(baseClass, local.class)} {...rest}>
+      {local.children}
+    </div>
+  );
+};

package/src/components/display/Echarts.tsx

@@ -0,0 +1,45 @@
+import { type Component, createEffect, onCleanup, splitProps, type JSX } from "solid-js";
+import { createResizeObserver } from "@solid-primitives/resize-observer";
+import * as echarts from "echarts";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export interface EchartsProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  option: echarts.EChartsOption;
+  loading?: boolean;
+}
+
+const baseClass = clsx("block", "size-full");
+
+export const Echarts: Component<EchartsProps> = (props) => {
+  const [local, rest] = splitProps(props, ["option", "loading", "class"]);
+  let containerRef!: HTMLDivElement;
+  let chart: echarts.EChartsType;
+
+  // 마운트 시 차트 초기화 + 언마운트 시 정리
+  createEffect(() => {
+    chart = echarts.init(containerRef, null, { renderer: "svg" });
+    onCleanup(() => chart.dispose());
+  });
+
+  // option 변경 감지
+  createEffect(() => {
+    chart.setOption(local.option);
+  });
+
+  // loading 상태 변경 감지
+  createEffect(() => {
+    if (local.loading) {
+      chart.showLoading();
+    } else {
+      chart.hideLoading();
+    }
+  });
+
+  // 컨테이너 크기 변경 감지
+  createResizeObserver(containerRef, () => {
+    chart.resize();
+  });
+
+  return <div data-echarts ref={containerRef} class={twMerge(baseClass, local.class)} {...rest} />;
+};

package/src/components/display/Icon.tsx

@@ -0,0 +1,13 @@
+import { type Component, splitProps } from "solid-js";
+import { Dynamic } from "solid-js/web";
+import type { IconProps as TablerIconProps } from "@tabler/icons-solidjs";
+
+export interface IconProps extends Omit<TablerIconProps, "size"> {
+  icon: Component<TablerIconProps>;
+  size?: string | number;
+}
+
+export const Icon: Component<IconProps> = (props) => {
+  const [local, rest] = splitProps(props, ["icon", "size"]);
+  return <Dynamic component={local.icon} data-icon size={local.size ?? "1.25em"} {...rest} />;
+};

package/src/components/display/Tag.tsx

@@ -0,0 +1,31 @@
+import { type JSX, type ParentComponent, splitProps } from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { type SemanticTheme, themeTokens } from "../../styles/tokens.styles";
+
+export type TagTheme = SemanticTheme;
+
+export interface TagProps extends JSX.HTMLAttributes<HTMLSpanElement> {
+  theme?: TagTheme;
+}
+
+const baseClass = clsx("inline-block", "text-white", "px-1.5", "rounded-md");
+
+const themeClasses: Record<TagTheme, string> = Object.fromEntries(
+  Object.entries(themeTokens).map(([theme, t]) => [theme, t.solid]),
+) as Record<TagTheme, string>;
+
+export const Tag: ParentComponent<TagProps> = (props) => {
+  const [local, rest] = splitProps(props, ["children", "class", "theme"]);
+
+  const getClassName = () => {
+    const theme = local.theme ?? "base";
+    return twMerge(baseClass, themeClasses[theme], local.class);
+  };
+
+  return (
+    <span data-tag class={getClassName()} {...rest}>
+      {local.children}
+    </span>
+  );
+};

package/src/components/feedback/Progress.tsx

@@ -0,0 +1,61 @@
+import { type JSX, type ParentComponent, Show, splitProps } from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { type SemanticTheme, themeTokens } from "../../styles/tokens.styles";
+
+export type ProgressTheme = SemanticTheme;
+export type ProgressSize = "sm" | "lg";
+
+export interface ProgressProps extends JSX.HTMLAttributes<HTMLDivElement> {
+  value: number;
+  theme?: ProgressTheme;
+  size?: ProgressSize;
+  inset?: boolean;
+}
+
+const baseClass = clsx(
+  "relative block w-full",
+  "overflow-hidden",
+  "rounded",
+  "bg-base-200 dark:bg-base-700",
+  "border border-base-200 dark:border-base-700",
+);
+
+const sizeClasses: Record<"default" | ProgressSize, string> = {
+  default: "py-1 px-2",
+  sm: "py-0.5 px-2",
+  lg: "py-2 px-3",
+};
+
+const insetClass = clsx("rounded-none", "border-0", "bg-transparent");
+
+const barThemeClasses: Record<ProgressTheme, string> = Object.fromEntries(
+  Object.entries(themeTokens).map(([theme, t]) => [theme, t.solid]),
+) as Record<ProgressTheme, string>;
+
+export const Progress: ParentComponent<ProgressProps> = (props) => {
+  const [local, rest] = splitProps(props, ["children", "class", "theme", "size", "value", "inset"]);
+
+  const getClassName = () => {
+    const size = local.size ?? "default";
+    return twMerge(baseClass, sizeClasses[size], local.inset ? insetClass : undefined, local.class);
+  };
+
+  const getBarClassName = () => {
+    const theme = local.theme ?? "primary";
+    return clsx("absolute left-0 top-0 h-full", "z-[1]", "transition-all", barThemeClasses[theme]);
+  };
+
+  const getPercentText = () => (local.value * 100).toFixed(2) + "%";
+
+  return (
+    <div data-progress class={getClassName()} {...rest}>
+      <div class={getBarClassName()} style={{ width: getPercentText() }} />
+      <div class={clsx("relative", "z-[2]", "text-right")}>
+        <Show when={local.children} fallback={getPercentText()}>
+          {local.children}
+        </Show>
+      </div>
+    </div>
+  );
+};

package/src/components/feedback/loading/LoadingContainer.css

@@ -0,0 +1,19 @@
+@keyframes sd-busy-bar-before {
+  0% {
+    transform: scaleX(0);
+  }
+  60%,
+  100% {
+    transform: scaleX(1);
+  }
+}
+
+@keyframes sd-busy-bar-after {
+  0%,
+  50% {
+    transform: scaleX(0);
+  }
+  100% {
+    transform: scaleX(1);
+  }
+}

package/src/components/feedback/loading/LoadingContainer.tsx

@@ -0,0 +1,132 @@
+import { type ParentComponent, type JSX, splitProps, createEffect, onCleanup, Show, useContext } from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { LoadingContext, type LoadingVariant } from "./LoadingContext";
+import { createMountTransition } from "../../../hooks/createMountTransition";
+import "./LoadingContainer.css";
+
+export interface LoadingContainerProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> {
+  busy?: boolean;
+  variant?: LoadingVariant;
+  message?: string;
+  progressPercent?: number;
+  children?: JSX.Element;
+}
+
+const baseClass = clsx("relative", "size-full", "min-h-[70px] min-w-[70px]", "overflow-auto");
+
+// eslint-disable-next-line tailwindcss/enforces-shorthand -- inset은 Chrome 87+에서만 지원
+const screenBaseClass = clsx(
+  "absolute bottom-0 left-0 right-0 top-0",
+  "z-busy",
+  "bg-white/70 dark:bg-base-900/70",
+  "transition-opacity duration-150",
+);
+
+const spinnerClass = clsx(
+  "size-8",
+  "border-[6px] border-base-200 border-b-primary-500",
+  "dark:border-base-700 dark:border-b-primary-400",
+  "rounded-full",
+  "animate-spin",
+  "shadow-md",
+  "mx-auto mt-5",
+);
+
+const messageClass = clsx("w-full", "text-center font-bold", "text-base-700 dark:text-base-200");
+
+const progressTrackClass = clsx("absolute left-0 top-0", "h-1 w-full", "bg-white dark:bg-base-800");
+
+const progressBarClass = clsx(
+  "h-1 w-full",
+  "bg-primary-500 dark:bg-primary-400",
+  "transition-transform duration-100 ease-in",
+  "origin-left",
+);
+
+const barIndicatorClass = clsx("absolute left-0 top-0", "h-1 w-full", "bg-white dark:bg-base-800");
+
+export const LoadingContainer: ParentComponent<LoadingContainerProps> = (props) => {
+  const [local, rest] = splitProps(props, ["busy", "variant", "message", "progressPercent", "class", "children"]);
+
+  const loadingCtx = useContext(LoadingContext);
+  const currVariant = (): LoadingVariant => local.variant ?? loadingCtx?.variant() ?? "spinner";
+
+  // 애니메이션 상태 (mount transition)
+  const { mounted, animating, unmount } = createMountTransition(() => !!local.busy);
+
+  const handleTransitionEnd = (e: TransitionEvent) => {
+    if (e.propertyName !== "opacity") return;
+    if (!local.busy) {
+      unmount();
+    }
+  };
+
+  // 키보드 입력 차단 (캡처 단계)
+  let containerRef!: HTMLDivElement;
+
+  createEffect(() => {
+    const handleKeyDownCapture = (e: KeyboardEvent) => {
+      if (local.busy) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    };
+
+    containerRef.addEventListener("keydown", handleKeyDownCapture, { capture: true });
+    onCleanup(() => containerRef.removeEventListener("keydown", handleKeyDownCapture, { capture: true }));
+  });
+
+  const screenClass = () =>
+    clsx(screenBaseClass, animating() ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0");
+
+  // spinner: 슬라이드 다운 애니메이션
+  const rectClass = () => {
+    if (currVariant() !== "spinner") return "";
+    return clsx(
+      "transition-transform duration-100",
+      animating() ? "translate-y-0 ease-out" : "-translate-y-full ease-in",
+    );
+  };
+
+  return (
+    <div ref={containerRef} class={twMerge(baseClass, local.class)} {...rest}>
+      <Show when={mounted()}>
+        <div class={screenClass()} onTransitionEnd={handleTransitionEnd}>
+          <div class={rectClass()}>
+            <Show when={currVariant() === "spinner"}>
+              <div class={spinnerClass} />
+            </Show>
+            <Show when={currVariant() === "bar" && local.busy}>
+              <div class={barIndicatorClass}>
+                <div
+                  class={clsx("absolute left-0 top-0 h-1 w-full origin-left", "bg-primary-500 dark:bg-primary-400")}
+                  style={{
+                    animation: "sd-busy-bar-before 2s infinite ease-in",
+                  }}
+                />
+                <div
+                  class={clsx("absolute left-0 top-0 h-1 w-full origin-left", "bg-white dark:bg-base-800")}
+                  style={{
+                    animation: "sd-busy-bar-after 2s infinite ease-out",
+                  }}
+                />
+              </div>
+            </Show>
+            <Show when={local.message}>
+              <div class={messageClass}>
+                <pre class="m-0">{local.message}</pre>
+              </div>
+            </Show>
+          </div>
+          <Show when={local.progressPercent != null}>
+            <div class={progressTrackClass}>
+              <div class={progressBarClass} style={{ transform: `scaleX(${(local.progressPercent ?? 0) / 100})` }} />
+            </div>
+          </Show>
+        </div>
+      </Show>
+      {local.children}
+    </div>
+  );
+};

package/src/components/feedback/loading/LoadingContext.ts

@@ -0,0 +1,20 @@
+import { createContext, useContext, type Accessor } from "solid-js";
+
+export type LoadingVariant = "spinner" | "bar";
+
+export interface LoadingContextValue {
+  variant: Accessor<LoadingVariant>;
+  show: (message?: string) => void;
+  hide: () => void;
+  setProgress: (percent: number | undefined) => void;
+}
+
+export const LoadingContext = createContext<LoadingContextValue>();
+
+export function useLoading(): LoadingContextValue {
+  const context = useContext(LoadingContext);
+  if (!context) {
+    throw new Error("useLoading은 LoadingProvider 내부에서만 사용할 수 있습니다");
+  }
+  return context;
+}

package/src/components/feedback/loading/LoadingProvider.tsx

@@ -0,0 +1,58 @@
+import { type ParentComponent, createSignal } from "solid-js";
+import { Portal } from "solid-js/web";
+import clsx from "clsx";
+import { LoadingContext, type LoadingContextValue, type LoadingVariant } from "./LoadingContext";
+import { LoadingContainer } from "./LoadingContainer";
+
+const overlayClass = clsx("fixed left-0 top-0", "h-screen w-screen", "overflow-hidden");
+
+export interface LoadingProviderProps {
+  variant?: LoadingVariant;
+}
+
+export const LoadingProvider: ParentComponent<LoadingProviderProps> = (props) => {
+  const [busyCount, setBusyCount] = createSignal(0);
+  const [message, setMessage] = createSignal<string | undefined>();
+  const [progress, setProgress] = createSignal<number | undefined>();
+
+  const variant = (): LoadingVariant => props.variant ?? "spinner";
+
+  const show = (msg?: string): void => {
+    setBusyCount((c) => c + 1);
+    if (msg !== undefined) {
+      setMessage(msg);
+    }
+  };
+
+  const hide = (): void => {
+    const newCount = Math.max(0, busyCount() - 1);
+    setBusyCount(newCount);
+    if (newCount <= 0) {
+      setMessage(undefined);
+      setProgress(undefined);
+    }
+  };
+
+  const contextValue: LoadingContextValue = {
+    variant,
+    show,
+    hide,
+    setProgress: (percent: number | undefined) => setProgress(percent),
+  };
+
+  return (
+    <LoadingContext.Provider value={contextValue}>
+      {props.children}
+      <Portal>
+        <LoadingContainer
+          busy={busyCount() > 0}
+          variant={variant()}
+          message={message()}
+          progressPercent={progress()}
+          class={overlayClass}
+          style={{ "pointer-events": busyCount() > 0 ? "auto" : "none" }}
+        />
+      </Portal>
+    </LoadingContext.Provider>
+  );
+};

package/src/components/feedback/notification/NotificationBanner.tsx

@@ -0,0 +1,83 @@
+import { type Component, Show } from "solid-js";
+import { Portal } from "solid-js/web";
+import clsx from "clsx";
+import { IconX } from "@tabler/icons-solidjs";
+import { useNotification } from "./NotificationContext";
+import { Icon } from "../../display/Icon";
+import { themeTokens } from "../../../styles/tokens.styles";
+
+const baseClass = clsx(
+  "fixed",
+  "top-4",
+  "right-4",
+  "z-50",
+  "flex",
+  "items-center",
+  "justify-between",
+  "gap-4",
+  "px-3",
+  "py-2",
+  "text-white",
+  "shadow-lg",
+  "dark:shadow-black/30",
+  "rounded-lg",
+  "max-w-sm",
+);
+
+const themeClasses: Record<string, string> = {
+  info: themeTokens.info.solid,
+  success: themeTokens.success.solid,
+  warning: themeTokens.warning.solid,
+  danger: themeTokens.danger.solid,
+};
+
+const contentClass = clsx("flex flex-col", "gap-0.5");
+const messageClass = clsx("text-sm", "opacity-90");
+const actionsClass = clsx("flex items-center", "gap-2");
+const actionButtonClass = clsx("rounded", "bg-white/20", "px-3 py-1", "text-sm", "hover:bg-white/30");
+const dismissButtonClass = clsx("rounded", "p-1", "hover:bg-white/20");
+
+export const NotificationBanner: Component = () => {
+  const notification = useNotification();
+
+  const handleDismiss = () => {
+    notification.dismissBanner();
+  };
+
+  const handleAction = () => {
+    const latest = notification.latestUnread();
+    latest?.action?.onClick();
+  };
+
+  return (
+    <Show when={notification.latestUnread()}>
+      {(item) => (
+        <Portal>
+          <div
+            data-notification-banner
+            data-theme={item().theme}
+            role="alert"
+            class={clsx(baseClass, themeClasses[item().theme])}
+          >
+            <div class={contentClass}>
+              <span class="font-semibold">{item().title}</span>
+              <Show when={item().message}>
+                <span class={messageClass}>{item().message}</span>
+              </Show>
+            </div>
+            <div class={actionsClass}>
+              <Show when={item().action}>
+                <button type="button" class={actionButtonClass} onClick={handleAction}>
+                  {item().action!.label}
+                </button>
+              </Show>
+              <button type="button" aria-label="알림 닫기" class={dismissButtonClass} onClick={handleDismiss}>
+                <Icon icon={IconX} size="1.25em" />
+              </button>
+            </div>
+          </div>
+        </Portal>
+      )}
+    </Show>
+  );
+};