@simplysm/solid 13.0.96 → 13.0.97

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplysm/solid",
-  "version": "13.0.96",
+  "version": "13.0.97",
   "description": "Simplysm package - SolidJS library",
   "author": "simplysm",
   "license": "Apache-2.0",
@@ -30,42 +30,35 @@
     "@solid-primitives/storage": "^4.3.4",
     "@solidjs/router": "^0.15.4",
     "@tabler/icons-solidjs": "^3.40.0",
-    "@tiptap/core": "^3.20.1",
-    "@tiptap/extension-color": "^3.20.1",
-    "@tiptap/extension-highlight": "^3.20.1",
-    "@tiptap/extension-image": "^3.20.1",
-    "@tiptap/extension-table": "^3.20.1",
-    "@tiptap/extension-table-cell": "^3.20.1",
-    "@tiptap/extension-table-header": "^3.20.1",
-    "@tiptap/extension-table-row": "^3.20.1",
-    "@tiptap/extension-text-align": "^3.20.1",
-    "@tiptap/extension-text-style": "^3.20.1",
-    "@tiptap/pm": "^3.20.1",
-    "@tiptap/starter-kit": "^3.20.1",
+    "@tiptap/core": "^3.20.4",
+    "@tiptap/extension-color": "^3.20.4",
+    "@tiptap/extension-highlight": "^3.20.4",
+    "@tiptap/extension-image": "^3.20.4",
+    "@tiptap/extension-table": "^3.20.4",
+    "@tiptap/extension-table-cell": "^3.20.4",
+    "@tiptap/extension-table-header": "^3.20.4",
+    "@tiptap/extension-table-row": "^3.20.4",
+    "@tiptap/extension-text-align": "^3.20.4",
+    "@tiptap/extension-text-style": "^3.20.4",
+    "@tiptap/pm": "^3.20.4",
+    "@tiptap/starter-kit": "^3.20.4",
     "bwip-js": "^4.8.0",
     "clsx": "^2.1.1",
     "consola": "^3.4.2",
+    "echarts": "^6.0.0",
     "html-to-image": "^1.11.13",
-    "jspdf": "^4.2.0",
+    "jspdf": "^4.2.1",
     "solid-js": "^1.9.11",
     "solid-tiptap": "^0.8.0",
     "tabbable": "^6.4.0",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^3.4.19",
-    "@simplysm/core-browser": "13.0.96",
-    "@simplysm/core-common": "13.0.96",
-    "@simplysm/service-client": "13.0.96",
-    "@simplysm/service-common": "13.0.96"
+    "@simplysm/core-browser": "13.0.97",
+    "@simplysm/core-common": "13.0.97",
+    "@simplysm/service-client": "13.0.97",
+    "@simplysm/service-common": "13.0.97"
   },
   "devDependencies": {
     "@solidjs/testing-library": "^0.8.10"
-  },
-  "peerDependencies": {
-    "echarts": "^6.0.0"
-  },
-  "peerDependenciesMeta": {
-    "echarts": {
-      "optional": true
-    }
   }
 }

package/README.md

@@ -1,158 +0,0 @@
-# @simplysm/solid
-
-SolidJS + Tailwind CSS 기반 엔터프라이즈 UI 컴포넌트 라이브러리. 폼 컨트롤, 데이터 테이블, 다이얼로그, 알림, 테마, i18n, CRUD, 권한 관리 등 100+ 컴포넌트를 제공한다.
-
-## 설치
-
-```bash
-npm install @simplysm/solid
-```
-
-**주요 의존성:** SolidJS, @solidjs/router, Tailwind CSS 3, Tiptap, Tabler Icons
-**선택 의존성:** echarts (ECharts 차트 사용 시)
-
-## 문서
-
-| 카테고리 | 설명 |
-|---------|------|
-| [폼 컨트롤](docs/form-controls.md) | Button, TextInput, NumberInput, Select, Combobox, DatePicker, DateRangePicker, Checkbox, RadioGroup, CheckboxGroup, ColorPicker, RichTextEditor, Numpad, StatePreset 등 |
-| [레이아웃 & 데이터](docs/layout-data.md) | FormGroup, FormTable, Sidebar, Topbar, Table, DataSheet, List, Calendar, Kanban, Pagination 등 |
-| [디스플레이 & 피드백](docs/display-feedback.md) | Card, Alert, Icon, Link, Tag, Barcode, Echarts, Dialog, Dropdown, Collapse, Tabs, Notification, Busy, Progress, Print 등 |
-| [프로바이더 & 훅](docs/providers-hooks.md) | SystemProvider, ThemeProvider, I18nProvider, SharedDataProvider, useDialog, useBusy, useNotification, createAppStructure 등 |
-| [기능 컴포넌트](docs/features.md) | CrudSheet, CrudDetail, DataSelectButton, SharedDataSelect, SharedDataSelectButton, SharedDataSelectList, PermissionTable, AddressSearch 등 |
-
-## 빠른 시작
-
-### SystemProvider (권장)
-
-`SystemProvider`는 모든 필수 프로바이더를 한 번에 감싸는 편의 컴포넌트다.
-
-```tsx
-import { SystemProvider } from "@simplysm/solid";
-
-function App() {
-  return (
-    <SystemProvider clientName="my-app" busyVariant="spinner">
-      <MyPage />
-    </SystemProvider>
-  );
-}
-```
-
-내부적으로 다음 프로바이더를 순서대로 감싼다:
-`ConfigProvider` > `I18nProvider` > `SyncStorageProvider` > `LoggerProvider` > `NotificationProvider` > `ErrorLoggerProvider` > `PwaUpdateProvider` > `ClipboardProvider` > `ThemeProvider` > `ServiceClientProvider` > `SharedDataProvider` > `BusyProvider`
-
-### 개별 프로바이더 조합
-
-```tsx
-import { ThemeProvider, I18nProvider, NotificationProvider, BusyProvider } from "@simplysm/solid";
-
-function App() {
-  return (
-    <ThemeProvider>
-      <I18nProvider>
-        <NotificationProvider>
-          <BusyProvider>
-            <MyPage />
-          </BusyProvider>
-        </NotificationProvider>
-      </I18nProvider>
-    </ThemeProvider>
-  );
-}
-```
-
-### 기본 폼 예제
-
-```tsx
-import { createSignal } from "solid-js";
-import { Card, FormGroup, TextInput, Select, Button } from "@simplysm/solid";
-
-function MyPage() {
-  const [name, setName] = createSignal("");
-  const [role, setRole] = createSignal<string>();
-
-  return (
-    <Card>
-      <FormGroup>
-        <FormGroup.Item label="이름">
-          <TextInput value={name()} onValueChange={setName} required />
-        </FormGroup.Item>
-        <FormGroup.Item label="역할">
-          <Select
-            value={role()}
-            onValueChange={setRole}
-            items={["admin", "user", "guest"]}
-            renderValue={(item) => <span>{item}</span>}
-          />
-        </FormGroup.Item>
-      </FormGroup>
-      <Button theme="primary" onClick={() => save()}>저장</Button>
-    </Card>
-  );
-}
-```
-
-## 공통 타입
-
-### ComponentSize
-
-모든 폼 컨트롤과 대부분의 컴포넌트가 `size` prop을 지원한다.
-
-```typescript
-type ComponentSize = "xs" | "sm" | "md" | "lg" | "xl";
-```
-
-### SemanticTheme
-
-의미론적 색상 테마.
-
-```typescript
-type SemanticTheme = "base" | "primary" | "success" | "warning" | "danger" | "info";
-```
-
-### 스타일 유틸리티
-
-Tailwind 클래스 프리셋. 테마 일관성을 위해 사용한다.
-
-```typescript
-import { bg, border, text, pad, gap, themeTokens } from "@simplysm/solid";
-
-// 배경색
-bg.surface   // bg-white dark:bg-base-900
-bg.muted     // bg-base-100 dark:bg-base-800
-bg.subtle    // bg-base-200 dark:bg-base-700
-
-// 테두리색
-border.default  // border-base-200 dark:border-base-700
-
-// 텍스트색
-text.default     // text-base-900 dark:text-base-100
-text.muted       // text-base-400 dark:text-base-500
-text.placeholder // placeholder 전용
-
-// 패딩/갭 프리셋
-pad.xs  // px-1 py-0
-pad.sm  // px-1.5 py-0.5
-pad.md  // px-2 py-1
-pad.lg  // px-3 py-2
-pad.xl  // px-4 py-3
-
-gap.xs  // gap-0
-gap.sm  // gap-0.5
-gap.md  // gap-1
-gap.lg  // gap-1.5
-gap.xl  // gap-2
-
-// 테마 토큰 (semantic theme별 solid/light/text/hoverBg/border)
-themeTokens.primary.solid      // bg-primary-500 text-white
-themeTokens.primary.solidHover // hover:bg-primary-600 dark:hover:bg-primary-400
-themeTokens.primary.light      // bg-primary-100 text-primary-900
-themeTokens.primary.text       // text-primary-600 dark:text-primary-400
-themeTokens.primary.hoverBg    // hover:bg-primary-100 dark:hover:bg-primary-800/30
-themeTokens.primary.border     // border-primary-300 dark:border-primary-600
-```
-
-### 라이트/다크 테마
-
-`ThemeProvider`와 `useTheme()` 훅으로 라이트/다크/시스템 모드를 제어한다. localStorage에 설정이 자동 저장된다.

package/docs/display-feedback.md

@@ -1,404 +0,0 @@
-# 디스플레이 & 피드백
-
-## Card
-
-그림자와 호버 효과가 있는 카드 컨테이너. 페이드 인 애니메이션 포함.
-
-```tsx
-import { Card } from "@simplysm/solid";
-
-<Card>카드 내용</Card>
-<Card class="p-4">커스텀 패딩</Card>
-```
-
-`<div>` HTML 속성을 모두 상속한다.
-
----
-
-## Alert
-
-의미론적 테마의 알림 배너.
-
-```tsx
-import { Alert } from "@simplysm/solid";
-
-<Alert theme="success">저장되었습니다.</Alert>
-<Alert theme="danger">오류가 발생했습니다.</Alert>
-<Alert theme="warning">주의가 필요합니다.</Alert>
-<Alert theme="info">참고 사항입니다.</Alert>
-```
-
-| Prop | 타입 | 기본값 | 설명 |
-|------|------|--------|------|
-| `theme` | `SemanticTheme` | `"base"` | 색상 테마 |
-
-`<div>` HTML 속성을 모두 상속한다.
-
----
-
-## Icon
-
-Tabler Icons 래퍼.
-
-```tsx
-import { Icon } from "@simplysm/solid";
-import { IconUser, IconSettings } from "@tabler/icons-solidjs";
-
-<Icon icon={IconUser} size="1.5em" />
-<Icon icon={IconSettings} size={24} />
-```
-
-| Prop | 타입 | 기본값 | 설명 |
-|------|------|--------|------|
-| `icon` | `Component<TablerIconProps>` | (필수) | Tabler 아이콘 컴포넌트 |
-| `size` | `string \| number` | `"1.25em"` | 아이콘 크기 |
-
-Tabler `IconProps`의 나머지 속성(`class`, `color` 등)을 모두 상속한다.
-
----
-
-## Link
-
-테마 색상의 링크 컴포넌트.
-
-```tsx
-import { Link } from "@simplysm/solid";
-
-<Link href="/users">사용자 목록</Link>
-<Link theme="danger" onClick={handleDelete}>삭제</Link>
-<Link disabled>비활성 링크</Link>
-```
-
-| Prop | 타입 | 기본값 | 설명 |
-|------|------|--------|------|
-| `theme` | `SemanticTheme` | `"primary"` | 색상 테마 |
-| `disabled` | `boolean` | `false` | 비활성화 |
-
-`<a>` HTML 속성을 모두 상속한다.
-
----
-
-## Tag
-
-테마 색상의 태그/배지.
-
-```tsx
-import { Tag } from "@simplysm/solid";
-
-<Tag>기본</Tag>
-<Tag theme="primary">Primary</Tag>
-<Tag theme="success">완료</Tag>
-<Tag theme="danger">긴급</Tag>
-```
-
-| Prop | 타입 | 기본값 | 설명 |
-|------|------|--------|------|
-| `theme` | `SemanticTheme` | `"base"` | 색상 테마 |
-
-`<span>` HTML 속성을 모두 상속한다.
-
----
-
-## Barcode
-
-바코드/QR 코드 생성 (bwip-js 기반).
-
-```tsx
-import { Barcode } from "@simplysm/solid";
-
-<Barcode type="qrcode" value="https://example.com" />
-<Barcode type="code128" value="1234567890" />
-<Barcode type="ean13" value="4006381333931" />
-```
-
-| Prop | 타입 | 설명 |
-|------|------|------|
-| `type` | `BarcodeType` | 바코드 타입 (필수). `"qrcode"`, `"code128"`, `"ean13"` 등 100+ 타입 |
-| `value` | `string` | 바코드 값 |
-
-`<div>` HTML 속성을 모두 상속한다.
-
----
-
-## Echarts
-
-ECharts 차트 래퍼. 자동 리사이즈, 로딩 상태 지원. `echarts` peer dependency 필요.
-
-```tsx
-import { Echarts } from "@simplysm/solid";
-
-<Echarts
-  option={{
-    xAxis: { type: "category", data: ["Mon", "Tue", "Wed"] },
-    yAxis: { type: "value" },
-    series: [{ data: [120, 200, 150], type: "bar" }],
-  }}
-  busy={loading()}
-/>
-```
-
-| Prop | 타입 | 설명 |
-|------|------|------|
-| `option` | `EChartsOption` | ECharts 옵션 (필수) |
-| `busy` | `boolean` | 로딩 상태 (`showLoading`/`hideLoading`) |
-
-`<div>` HTML 속성을 모두 상속한다. 내부적으로 SVG 렌더러를 사용하며, 컨테이너 크기 변경 시 자동 리사이즈한다.
-
----
-
-## Dialog
-
-모달/플로팅 다이얼로그. 리사이즈, 드래그, z-index 자동 관리.
-
-```tsx
-import { Dialog } from "@simplysm/solid";
-
-<Dialog open={isOpen()} onOpenChange={setIsOpen} width="600px" resizable draggable>
-  <Dialog.Header>제목</Dialog.Header>
-  <div>내용</div>
-  <Dialog.Action>
-    <Button onClick={() => setIsOpen(false)}>닫기</Button>
-  </Dialog.Action>
-</Dialog>
-```
-
-| Prop | 타입 | 기본값 | 설명 |
-|------|------|--------|------|
-| `open` | `boolean` | | 열림 상태 |
-| `onOpenChange` | `(v: boolean) => void` | | 상태 콜백 |
-| `mode` | `"float" \| "fill"` | `"float"` | 모드 |
-| `resizable` | `boolean` | `false` | 리사이즈 가능 |
-| `draggable` | `boolean` | `false` | 드래그 가능 |
-| `width` | `string` | | 너비 |
-| `height` | `string` | | 높이 |
-| `closeOnEscape` | `boolean` | `true` | ESC 닫기 |
-| `beforeClose` | `() => boolean` | | 닫기 전 확인 (false 반환 시 취소) |
-
-### 서브 컴포넌트
-
-| 컴포넌트 | 설명 |
-|----------|------|
-| `Dialog.Header` | 다이얼로그 헤더 (닫기 버튼 포함) |
-| `Dialog.Action` | 하단 액션 영역 |
-
-### 프로그래밍 방식 다이얼로그
-
-```tsx
-const dialog = useDialog();
-
-const result = await dialog.show(MyComponent, { data: "value" }, {
-  header: "제목",
-  width: "500px",
-  resizable: true,
-});
-```
-
----
-
-## Dropdown
-
-팝업 메뉴/드롭다운.
-
-```tsx
-import { Dropdown } from "@simplysm/solid";
-
-<Dropdown>
-  <Dropdown.Trigger>
-    <Button>메뉴</Button>
-  </Dropdown.Trigger>
-  <Dropdown.Content>
-    <div>메뉴 항목 1</div>
-    <div>메뉴 항목 2</div>
-  </Dropdown.Content>
-</Dropdown>
-```
-
-| Prop | 타입 | 기본값 | 설명 |
-|------|------|--------|------|
-| `open` | `boolean` | | 열림 상태 |
-| `onOpenChange` | `(v: boolean) => void` | | 상태 콜백 |
-| `position` | `{ x: number; y: number }` | | 절대 위치 (컨텍스트 메뉴용) |
-| `maxHeight` | `number` | `300` | 최대 높이 (px) |
-| `disabled` | `boolean` | `false` | 비활성화 |
-| `keyboardNav` | `boolean` | `false` | 키보드 네비게이션 (Select 등에서 사용) |
-
-### 서브 컴포넌트
-
-| 컴포넌트 | 설명 |
-|----------|------|
-| `Dropdown.Trigger` | 드롭다운 트리거 |
-| `Dropdown.Content` | 드롭다운 콘텐츠 |
-
----
-
-## Collapse
-
-접기/펼치기 (아코디언).
-
-```tsx
-import { Collapse } from "@simplysm/solid";
-
-<Button aria-expanded={expanded()} onClick={() => setExpanded(!expanded())}>
-  토글
-</Button>
-<Collapse open={expanded()}>
-  <div>접힌 내용</div>
-</Collapse>
-```
-
-| Prop | 타입 | 기본값 | 설명 |
-|------|------|--------|------|
-| `open` | `boolean` | `false` | 열림 상태 |
-
-`<div>` HTML 속성을 모두 상속한다. 높이 애니메이션이 자동 적용된다.
-
----
-
-## Tabs
-
-탭 전환.
-
-```tsx
-import { Tabs } from "@simplysm/solid";
-
-<Tabs value={tab()} onValueChange={setTab}>
-  <Tabs.Tab value="info">정보</Tabs.Tab>
-  <Tabs.Tab value="settings">설정</Tabs.Tab>
-</Tabs>
-```
-
-| Prop (Tabs) | 타입 | 설명 |
-|------------|------|------|
-| `value` | `string` | 선택된 탭 값 |
-| `onValueChange` | `(v: string) => void` | 변경 콜백 |
-| `size` | `ComponentSize` | 크기 |
-
-| Prop (Tabs.Tab) | 타입 | 설명 |
-|-----------------|------|------|
-| `value` | `string` | 탭 식별 값 |
-| `disabled` | `boolean` | 비활성화 |
-
----
-
-## Notification
-
-알림 시스템. `NotificationProvider`로 감싸고 `useNotification()` 훅으로 사용.
-
-```tsx
-import { NotificationProvider, useNotification, NotificationBell, NotificationBanner } from "@simplysm/solid";
-
-// 프로바이더 설정
-<NotificationProvider>
-  <NotificationBanner />
-  <NotificationBell />
-  <App />
-</NotificationProvider>
-
-// 사용
-const noti = useNotification();
-
-noti.success("저장 완료", "데이터가 성공적으로 저장되었습니다.");
-noti.danger("오류", "서버 연결에 실패했습니다.");
-noti.info("안내", "새 버전이 있습니다.");
-noti.warning("경고", "저장되지 않은 변경사항이 있습니다.");
-
-// 에러 자동 처리
-noti.error(err, "작업 실패");
-
-// 업데이트
-const id = noti.info("업로드 중...");
-noti.update(id, { message: "업로드 완료!" });
-
-// 액션 버튼 포함 알림
-noti.info("업데이트 가능", "새 버전이 있습니다.", {
-  action: {
-    label: "새로고침",
-    onClick: () => window.location.reload(),
-  },
-});
-
-// 읽음 처리
-noti.markAsRead(id);
-noti.markAllAsRead();
-noti.clear();
-```
-
----
-
-## Busy
-
-로딩 오버레이. 중첩 호출 지원.
-
-```tsx
-import { BusyProvider, useBusy, BusyContainer } from "@simplysm/solid";
-
-<BusyProvider variant="spinner">
-  <App />
-</BusyProvider>
-
-const busy = useBusy();
-
-busy.show("로딩 중...");
-// ... 작업 ...
-busy.hide();
-
-// 프로그레스 바
-busy.show("업로드 중...");
-busy.setProgress(50); // 50%
-busy.setProgress(100);
-busy.hide();
-```
-
-### BusyContainer
-
-로컬 영역에 로딩 오버레이를 표시한다.
-
-```tsx
-<BusyContainer busy={isLoading()} variant="bar">
-  <div>컨텐츠</div>
-</BusyContainer>
-```
-
----
-
-## Progress
-
-프로그레스 바.
-
-```tsx
-import { Progress } from "@simplysm/solid";
-
-<Progress value={progress()} />
-<Progress value={75} theme="success" />
-
-// 커스텀 콘텐츠
-<Progress value={50} theme="primary" size="lg">
-  <span>50% 완료</span>
-</Progress>
-```
-
-| Prop | 타입 | 기본값 | 설명 |
-|------|------|--------|------|
-| `value` | `number` | (필수) | 진행률 (0-100) |
-| `theme` | `SemanticTheme` | `"primary"` | 색상 테마 |
-| `size` | `ComponentSize` | `"md"` | 크기 |
-| `inset` | `boolean` | `false` | 테두리 없음 |
-
-`<div>` HTML 속성을 모두 상속한다. children이 있으면 퍼센트 텍스트 대신 커스텀 콘텐츠를 표시한다.
-
----
-
-## Print
-
-인쇄 기능. `PrintProvider`로 감싸고 `usePrint()` 훅으로 사용.
-
-```tsx
-import { PrintProvider, usePrint } from "@simplysm/solid";
-
-<PrintProvider>
-  <App />
-</PrintProvider>
-
-const print = usePrint();
-// print 호출로 인쇄 다이얼로그 표시
-```