@simplysm/solid 13.0.0-beta.6

package/src/base.css

@@ -0,0 +1,78 @@
+@tailwind base;
+
+@layer base {
+  html {
+    font-size: 12px;
+    @apply bg-white text-base-900;
+  }
+
+  html.dark {
+    @apply bg-base-950 text-base-100;
+  }
+
+  html,
+  body,
+  #root {
+    width: 100%;
+    height: 100%;
+  }
+
+  *:focus {
+    outline: none;
+  }
+
+  /* 스크롤바 스타일 */
+  ::-webkit-scrollbar {
+    width: 0.5rem;
+    height: 0.5rem;
+  }
+
+  ::-webkit-scrollbar-track {
+    background-color: rgba(0, 0, 0, 0.08);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, 0.2);
+    border-radius: 0.25rem;
+  }
+
+  ::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(0, 0, 0, 0.3);
+  }
+
+  ::-webkit-scrollbar-corner {
+    background-color: rgba(0, 0, 0, 0.08);
+  }
+
+  /* 다크모드 스크롤바 - zinc 계열 중립 톤 */
+  .dark ::-webkit-scrollbar-track {
+    background-color: rgba(161, 161, 170, 0.1);
+  }
+
+  .dark ::-webkit-scrollbar-thumb {
+    background-color: rgba(161, 161, 170, 0.25);
+    border-radius: 0.25rem;
+  }
+
+  .dark ::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(161, 161, 170, 0.4);
+  }
+
+  .dark ::-webkit-scrollbar-corner {
+    background-color: rgba(161, 161, 170, 0.1);
+  }
+
+  /* 텍스트 선택 영역 */
+  ::selection {
+    @apply bg-primary-200 text-primary-900;
+  }
+
+  .dark ::selection {
+    @apply bg-primary-800 text-primary-100;
+  }
+
+  /* 다크모드 날짜/시간 입력 아이콘 */
+  .dark ::-webkit-calendar-picker-indicator {
+    filter: invert(1);
+  }
+}

package/src/components/data/Pagination.tsx

@@ -0,0 +1,112 @@
+import { type Component, For, type JSX, splitProps } from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { IconChevronLeft, IconChevronRight, IconChevronsLeft, IconChevronsRight } from "@tabler/icons-solidjs";
+import { Button } from "../form-control/Button";
+import { Icon } from "../display/Icon";
+
+type PaginationSize = "sm" | "lg";
+
+export interface PaginationProps extends JSX.HTMLAttributes<HTMLElement> {
+  pageIndex: number;
+  onPageIndexChange?: (pageIndex: number) => void;
+  totalPageCount: number;
+  displayPageCount?: number;
+  size?: PaginationSize;
+}
+
+const baseClass = clsx("inline-flex items-center");
+
+const btnClass = clsx("border-none font-normal");
+
+const gapClasses: Record<PaginationSize | "default", string> = {
+  default: "gap-1",
+  sm: "gap-0.5",
+  lg: "gap-1.5",
+};
+
+export const Pagination: Component<PaginationProps> = (props) => {
+  const [local, rest] = splitProps(props, [
+    "class",
+    "pageIndex",
+    "onPageIndexChange",
+    "totalPageCount",
+    "displayPageCount",
+    "size",
+  ]);
+
+  const visibleCount = () => local.displayPageCount ?? 10;
+
+  const pages = () => {
+    const from = Math.floor(local.pageIndex / visibleCount()) * visibleCount();
+    const to = Math.min(from + visibleCount(), local.totalPageCount);
+    const result: number[] = [];
+    for (let i = from; i < to; i++) {
+      result.push(i);
+    }
+    return result;
+  };
+
+  const hasPrev = () => (pages()[0] ?? 0) > 0;
+  const hasNext = () => (pages()[pages().length - 1] ?? 0) < local.totalPageCount - 1;
+
+  const getClassName = () => twMerge(baseClass, gapClasses[local.size ?? "default"], local.class);
+
+  return (
+    <nav {...rest} data-pagination class={getClassName()}>
+      <Button
+        class={btnClass}
+        theme="base"
+        variant="ghost"
+        size={local.size}
+        disabled={!hasPrev()}
+        onClick={() => local.onPageIndexChange?.(0)}
+      >
+        <Icon icon={IconChevronsLeft} size="1em" />
+      </Button>
+      <Button
+        class={btnClass}
+        theme="base"
+        variant="ghost"
+        size={local.size}
+        disabled={!hasPrev()}
+        onClick={() => local.onPageIndexChange?.((pages()[0] ?? 1) - 1)}
+      >
+        <Icon icon={IconChevronLeft} size="1em" />
+      </Button>
+      <For each={pages()}>
+        {(p) => (
+          <Button
+            class={btnClass}
+            theme={p === local.pageIndex ? "primary" : "base"}
+            variant={p === local.pageIndex ? "solid" : "ghost"}
+            size={local.size}
+            onClick={() => local.onPageIndexChange?.(p)}
+          >
+            {p + 1}
+          </Button>
+        )}
+      </For>
+      <Button
+        class={btnClass}
+        theme="base"
+        variant="ghost"
+        size={local.size}
+        disabled={!hasNext()}
+        onClick={() => local.onPageIndexChange?.((pages()[pages().length - 1] ?? 0) + 1)}
+      >
+        <Icon icon={IconChevronRight} size="1em" />
+      </Button>
+      <Button
+        class={btnClass}
+        theme="base"
+        variant="ghost"
+        size={local.size}
+        disabled={!hasNext()}
+        onClick={() => local.onPageIndexChange?.(local.totalPageCount - 1)}
+      >
+        <Icon icon={IconChevronsRight} size="1em" />
+      </Button>
+    </nav>
+  );
+};

package/src/components/data/Table.tsx

@@ -0,0 +1,43 @@
+import { type JSX, type ParentComponent, splitProps } from "solid-js";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export interface TableProps extends JSX.HTMLAttributes<HTMLTableElement> {
+  inset?: boolean;
+}
+
+const baseClass = clsx(
+  "w-auto",
+  "border-separate border-spacing-0",
+  "border-b border-r border-base-300 dark:border-base-600",
+  "rounded",
+  "overflow-hidden",
+  // th
+  "[&_th]:border-l [&_th]:border-t [&_th]:border-base-300 [&_th]:dark:border-base-600",
+  "[&_th]:px-2 [&_th]:py-1",
+  "[&_th]:bg-base-100 [&_th]:text-left [&_th]:font-semibold",
+  "[&_th]:dark:bg-base-800",
+  // td
+  "[&_td]:border-l [&_td]:border-t [&_td]:border-base-300 [&_td]:dark:border-base-600",
+  "[&_td]:px-2 [&_td]:py-1",
+);
+
+const insetClass = clsx(
+  "border-b-0 border-r-0",
+  "[&>*>tr>*:first-child]:border-l-0",
+  "[&>*:first-child>tr:first-child>*]:border-t-0",
+  "rounded-none",
+  "overflow-auto",
+);
+
+export const Table: ParentComponent<TableProps> = (props) => {
+  const [local, rest] = splitProps(props, ["children", "class", "inset"]);
+
+  const getClassName = () => twMerge(baseClass, local.inset && insetClass, local.class);
+
+  return (
+    <table data-table class={getClassName()} {...rest}>
+      {local.children}
+    </table>
+  );
+};

package/src/components/data/calendar/Calendar.tsx

@@ -0,0 +1,139 @@
+import { createMemo, For, type JSX, splitProps } from "solid-js";
+import { DateOnly } from "@simplysm/core-common";
+import clsx from "clsx";
+import { twMerge } from "tailwind-merge";
+import { createControllableSignal } from "../../../hooks/createControllableSignal";
+
+export interface CalendarProps<T> extends Omit<JSX.HTMLAttributes<HTMLTableElement>, "children"> {
+  items: T[];
+  getItemDate: (item: T, index: number) => DateOnly;
+  renderItem: (item: T, index: number) => JSX.Element;
+  yearMonth?: DateOnly;
+  onYearMonthChange?: (value: DateOnly) => void;
+  weekStartDay?: number;
+  minDaysInFirstWeek?: number;
+}
+
+const WEEKS = ["일", "월", "화", "수", "목", "금", "토"];
+
+const baseClass = clsx(
+  "w-full",
+  "border-separate border-spacing-0",
+  "border-b border-r border-base-300",
+  "dark:border-base-600",
+  "overflow-hidden rounded",
+  // th
+  "[&_th]:border-l [&_th]:border-t [&_th]:border-base-300 [&_th]:dark:border-base-600",
+  "[&_th]:px-2 [&_th]:py-1",
+  "[&_th]:bg-base-100 [&_th]:text-center [&_th]:text-sm [&_th]:font-semibold",
+  "[&_th]:dark:bg-base-800",
+  // td
+  "[&_td]:border-l [&_td]:border-t [&_td]:border-base-300 [&_td]:dark:border-base-600",
+  "[&_td]:p-1 [&_td]:align-top",
+);
+
+const notCurrentClass = clsx("[&.not-current]:bg-base-50", "[&.not-current]:dark:bg-base-900");
+
+const dayClass = clsx("mb-1 text-sm text-base-500", "dark:text-base-400");
+
+const notCurrentDayClass = clsx("text-base-300", "dark:text-base-600");
+
+const contentClass = clsx("flex flex-col gap-1");
+
+function CalendarBase<T>(props: CalendarProps<T>) {
+  const [local, rest] = splitProps(props, [
+    "class",
+    "items",
+    "getItemDate",
+    "renderItem",
+    "yearMonth",
+    "onYearMonthChange",
+    "weekStartDay",
+    "minDaysInFirstWeek",
+  ]);
+
+  const weekStartDay = () => local.weekStartDay ?? 0;
+  const minDaysInFirstWeek = () => local.minDaysInFirstWeek ?? 1;
+
+  const [yearMonth] = createControllableSignal({
+    value: () => local.yearMonth ?? new DateOnly().setDay(1),
+    onChange: () => local.onYearMonthChange,
+  });
+
+  const weekHeaders = createMemo(() => {
+    const start = weekStartDay();
+    return Array.from({ length: 7 }, (_, i) => WEEKS[(start + i) % 7]);
+  });
+
+  const dataTable = createMemo(() => {
+    const ym = yearMonth();
+    const items = local.items;
+    const getDate = local.getItemDate;
+
+    // 아이템을 날짜별로 그룹핑 (O(N))
+    const itemMap = new Map<number, { item: T; index: number }[]>();
+    for (let i = 0; i < items.length; i++) {
+      const date = getDate(items[i], i);
+      const key = date.tick;
+      const arr = itemMap.get(key);
+      if (arr) {
+        arr.push({ item: items[i], index: i });
+      } else {
+        itemMap.set(key, [{ item: items[i], index: i }]);
+      }
+    }
+
+    const firstDate = ym.getWeekSeqStartDate(weekStartDay(), minDaysInFirstWeek());
+    const result: { date: DateOnly; items: { item: T; index: number }[] }[][] = [];
+
+    for (let r = 0; r < 6; r++) {
+      const row: { date: DateOnly; items: { item: T; index: number }[] }[] = [];
+      for (let c = 0; c < 7; c++) {
+        const date = firstDate.addDays(r * 7 + c);
+        row.push({
+          date,
+          items: itemMap.get(date.tick) ?? [],
+        });
+      }
+      result.push(row);
+    }
+
+    return result;
+  });
+
+  const getClassName = () => twMerge(baseClass, local.class);
+
+  return (
+    <table data-calendar class={getClassName()} {...rest}>
+      <thead>
+        <tr>
+          <For each={weekHeaders()}>{(header) => <th>{header}</th>}</For>
+        </tr>
+      </thead>
+      <tbody>
+        <For each={dataTable()}>
+          {(row) => (
+            <tr>
+              <For each={row}>
+                {(cell) => (
+                  <td class={twMerge(notCurrentClass, cell.date.month !== yearMonth().month && "not-current")}>
+                    <div
+                      class={cell.date.month !== yearMonth().month ? twMerge(dayClass, notCurrentDayClass) : dayClass}
+                    >
+                      {cell.date.day}
+                    </div>
+                    <div class={contentClass}>
+                      <For each={cell.items}>{(entry) => local.renderItem(entry.item, entry.index)}</For>
+                    </div>
+                  </td>
+                )}
+              </For>
+            </tr>
+          )}
+        </For>
+      </tbody>
+    </table>
+  );
+}
+
+export const Calendar = CalendarBase;

package/src/components/data/kanban/Kanban.css

@@ -0,0 +1,10 @@
+@keyframes kanban-ph-in {
+  from {
+    opacity: 0;
+    height: 0;
+  }
+  to {
+    opacity: 1;
+    /*transform: scaleY(1);*/
+  }
+}