@lawkit/ui 0.1.40 → 0.1.42

package/dist/ui-v3/src/components/DatePicker/index.d.ts

@@ -21,6 +21,10 @@ export interface DateRangePickerProps extends Omit<HTMLAttributes<HTMLDivElement
         start: Date | null;
         end: Date | null;
     }) => void;
+    /** 최소 선택 가능 날짜 */
+    minDate?: Date;
+    /** 최대 선택 가능 날짜 */
+    maxDate?: Date;
 }
 /**
  * **DatePicker**
@@ -54,4 +58,4 @@ export declare function DatePicker({ value, onChange, showTime, minDate, maxDate
  * />
  * ```
  */
-export declare function DateRangePicker({ startDate, endDate, onChange, className, ...rest }: DateRangePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function DateRangePicker({ startDate, endDate, onChange, minDate, maxDate, className, ...rest }: DateRangePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui-v3/src/components/InputDatePicker/InputDatePicker.css.d.ts

@@ -0,0 +1,4 @@
+export declare const wrapper: string;
+export declare const trigger: string;
+export declare const calendarIcon: string;
+export declare const popover: string;

package/dist/ui-v3/src/components/InputDatePicker/index.d.ts

@@ -0,0 +1,40 @@
+import { HTMLAttributes } from 'react';
+import { InputSize, InputState } from '../Input';
+/** Date → "yyyy-MM-dd" (빈 값이면 "") */
+export declare const formatYmd: (date: Date | null | undefined) => string;
+export interface InputDatePickerProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    /** 선택된 날짜 */
+    value?: Date | null;
+    /** 날짜 변경 콜백 */
+    onChange?: (date: Date) => void;
+    /** placeholder (선택 전 표시) */
+    placeholder?: string;
+    /** 인풋 사이즈 */
+    inputSize?: InputSize;
+    /** 인풋 상태 (테두리 색 등) */
+    state?: InputState;
+    /** 비활성화 */
+    disabled?: boolean;
+    /** 최소 선택 가능 날짜 */
+    minDate?: Date;
+    /** 최대 선택 가능 날짜 */
+    maxDate?: Date;
+}
+/**
+ * **InputDatePicker** (프로토타입)
+ *
+ * Input 박스에 포커스하거나 캘린더 아이콘을 클릭하면 `DatePicker` 캘린더가
+ * 팝오버로 펼쳐지는 날짜 선택 컴포넌트.
+ *
+ * - 포커스 / 클릭 → 캘린더 열림
+ * - 날짜 선택 → 인풋에 `yyyy-MM-dd` 표시 후 닫힘
+ * - ESC / 바깥 클릭 → 닫힘
+ *
+ * > ⚠️ 아직 정식 export 컴포넌트가 아닌 Storybook 검토용 시안입니다.
+ *
+ * ```tsx
+ * const [date, setDate] = useState<Date | null>(null);
+ * <InputDatePicker value={date} onChange={setDate} />
+ * ```
+ */
+export declare const InputDatePicker: ({ value, onChange, placeholder, inputSize, state, disabled, minDate, maxDate, className, ...rest }: InputDatePickerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ui-v3/src/components/InputDateRangePicker/InputDateRangePicker.css.d.ts

@@ -0,0 +1,8 @@
+export declare const wrapper: string;
+export declare const rangeTrigger: string;
+export declare const singleTrigger: string;
+export declare const rangeInput: string;
+export declare const singleInput: string;
+export declare const rangeSeparator: string;
+export declare const calendarIcon: string;
+export declare const popover: string;

package/dist/ui-v3/src/components/InputDateRangePicker/index.d.ts

@@ -0,0 +1,48 @@
+import { HTMLAttributes } from 'react';
+import { InputSize, InputState } from '../Input';
+export interface InputDateRangePickerProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    startDate?: Date | null;
+    endDate?: Date | null;
+    onChange?: (range: {
+        start: Date | null;
+        end: Date | null;
+    }) => void;
+    placeholder?: string;
+    inputSize?: InputSize;
+    state?: InputState;
+    disabled?: boolean;
+    minDate?: Date;
+    maxDate?: Date;
+}
+/**
+ * **InputDateRangePicker** (프로토타입)
+ *
+ * 하나의 Input에 `yyyy-MM-dd ~ yyyy-MM-dd` 형태로 범위를 표시하는 기본안입니다.
+ *
+ * - 포커스 / 클릭 → 캘린더 열림
+ * - 시작일/종료일 선택 → 하나의 인풋에 범위 문자열 표시
+ * - 종료일 선택 완료 시 닫힘
+ * - ESC / 바깥 클릭 → 닫힘
+ */
+export declare const InputDateRangePicker: ({ startDate, endDate, onChange, placeholder, inputSize, state, disabled, minDate, maxDate, className, ...rest }: InputDateRangePickerProps) => import("react/jsx-runtime").JSX.Element;
+export interface InputDateRangePickerSplitProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+    startDate?: Date | null;
+    endDate?: Date | null;
+    onChange?: (range: {
+        start: Date | null;
+        end: Date | null;
+    }) => void;
+    startPlaceholder?: string;
+    endPlaceholder?: string;
+    inputSize?: InputSize;
+    state?: InputState;
+    disabled?: boolean;
+    minDate?: Date;
+    maxDate?: Date;
+}
+/**
+ * **InputDateRangePickerSplit** (프로토타입)
+ *
+ * Input 2개(시작일/종료일)로 범위를 보여주는 보조 variant입니다.
+ */
+export declare const InputDateRangePickerSplit: ({ startDate, endDate, onChange, startPlaceholder, endPlaceholder, inputSize, state, disabled, minDate, maxDate, className, ...rest }: InputDateRangePickerSplitProps) => import("react/jsx-runtime").JSX.Element;

package/dist/ui-v3/src/index.d.ts

@@ -60,6 +60,10 @@ export { Radio, RadioGroup } from './components/Radio';
 export type { RadioProps, RadioSize, RadioVariant, RadioGroupProps, } from './components/Radio';
 export { DatePicker, DateRangePicker } from './components/DatePicker';
 export type { DatePickerProps, DateRangePickerProps, } from './components/DatePicker';
+export { InputDatePicker, formatYmd as formatInputDateYmd, } from './components/InputDatePicker';
+export type { InputDatePickerProps } from './components/InputDatePicker';
+export { InputDateRangePicker, InputDateRangePickerSplit, } from './components/InputDateRangePicker';
+export type { InputDateRangePickerProps, InputDateRangePickerSplitProps, } from './components/InputDateRangePicker';
 export { FileUploadArea, FileThumbnail, FileItem, FileAttachBadge, } from './components/FileUpload';
 export type { FileUploadAreaProps, FileThumbnailProps, FileItemProps, FileAttachBadgeProps, ThumbnailLayout, ThumbnailSize, } from './components/FileUpload';
 export { NumberInput } from './components/NumberInput';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lawkit/ui",
-  "version": "0.1.40",
+  "version": "0.1.42",
   "type": "module",
   "description": "LDS Design System — React component library with design tokens",
   "main": "./dist/index.js",
@@ -18,7 +18,9 @@
   ],
   "files": [
     "dist",
-    "README.md"
+    "README.md",
+    "CLAUDE.md",
+    "scripts"
   ],
   "publishConfig": {
     "access": "public"
@@ -69,6 +71,8 @@
     "build": "vite build",
     "lint": "echo \"No lint configured yet\"",
     "check": "tsc --noEmit",
-    "test": "vitest run --config vitest.config.ts"
+    "test": "vitest run --config vitest.config.ts",
+    "docs": "node ../../scripts/generate-component-docs.mjs",
+    "postinstall": "node scripts/postinstall.js"
   }
 }

package/scripts/postinstall.js

@@ -0,0 +1,82 @@
+import { existsSync, readFileSync, writeFileSync } from 'fs';
+import { join } from 'path';
+
+// 자기 자신 패키지 빌드 시에는 실행하지 않음
+if (process.env.npm_package_name === '@lawkit/ui') process.exit(0);
+
+// 소비 프로젝트 루트 (npm install 실행 위치)
+const projectRoot = process.cwd();
+
+const CLAUDE_MD_REF_LINE = '@node_modules/@lawkit/ui/CLAUDE.md';
+const CURSOR_RULES_DIR = '.cursor/rules';
+const CURSOR_RULES_FILE = '.cursor/rules/lds.mdc';
+const COPILOT_INSTRUCTIONS_FILE = '.github/copilot-instructions.md';
+const COPILOT_MARKER = '<!-- @lawkit/ui -->';
+
+const CURSOR_MDC_CONTENT = `---
+description: @lawkit/ui 컴포넌트 사용 규칙
+globs: "**/*.tsx,**/*.ts"
+alwaysApply: false
+---
+
+@lawkit/ui 컴포넌트를 사용할 때는 node_modules/@lawkit/ui/CLAUDE.md 파일을 참고하세요.
+컴포넌트별 import 방법과 템플릿 코드가 정리되어 있습니다.
+`;
+
+const COPILOT_APPEND_CONTENT = `
+<!-- @lawkit/ui -->
+## @lawkit/ui 컴포넌트
+컴포넌트 사용법은\`node_modules/@lawkit/ui/CLAUDE.md\` 를 참고하세요.
+`;
+
+let anyActionTaken = false;
+
+try {
+  // 1. CLAUDE.md 처리 — 파일 끝에 추가 (기존 구조 보존)
+  const claudeMdPath = join(projectRoot, 'CLAUDE.md');
+  if (existsSync(claudeMdPath)) {
+    const content = readFileSync(claudeMdPath, 'utf-8');
+    if (!content.includes(CLAUDE_MD_REF_LINE)) {
+      const updated = content.trimEnd() + '\n' + CLAUDE_MD_REF_LINE + '\n';
+      writeFileSync(claudeMdPath, updated, 'utf-8');
+      console.log('[@lawkit/ui] CLAUDE.md 참조 추가됨');
+    } else {
+      console.log('[@lawkit/ui] CLAUDE.md 참조 이미 존재 — skip');
+    }
+    anyActionTaken = true;
+  }
+
+  // 2. .cursor/rules/ 디렉토리 처리
+  const cursorRulesDirPath = join(projectRoot, CURSOR_RULES_DIR);
+  if (existsSync(cursorRulesDirPath)) {
+    const ldsMdcPath = join(projectRoot, CURSOR_RULES_FILE);
+    if (!existsSync(ldsMdcPath)) {
+      writeFileSync(ldsMdcPath, CURSOR_MDC_CONTENT, 'utf-8');
+      console.log('[@lawkit/ui] .cursor/rules/lds.mdc 생성됨');
+    } else {
+      console.log('[@lawkit/ui] .cursor/rules/lds.mdc 이미 존재 — skip');
+    }
+    anyActionTaken = true;
+  }
+
+  // 3. .github/copilot-instructions.md 처리
+  const copilotInstructionsPath = join(projectRoot, COPILOT_INSTRUCTIONS_FILE);
+  if (existsSync(copilotInstructionsPath)) {
+    const content = readFileSync(copilotInstructionsPath, 'utf-8');
+    if (!content.includes(COPILOT_MARKER)) {
+      const updated = content.trimEnd() + COPILOT_APPEND_CONTENT;
+      writeFileSync(copilotInstructionsPath, updated, 'utf-8');
+      console.log('[@lawkit/ui] copilot-instructions.md 참조 추가됨');
+    } else {
+      console.log('[@lawkit/ui] copilot-instructions.md 참조 이미 존재 — skip');
+    }
+    anyActionTaken = true;
+  }
+
+  if (!anyActionTaken) {
+    console.log('[@lawkit/ui] AI 설정 파일을 찾지 못했습니다. 필요 시 수동으로 추가하세요.');
+  }
+} catch (err) {
+  // postinstall 실패가 npm install 전체를 막지 않도록 경고만 출력
+  console.warn('[@lawkit/ui] AI 설정 파일 업데이트 중 오류 발생 (무시됨):', err.message);
+}