@pantoia/ui 0.2.0 → 0.4.0

package/command-palette/index.tsx

@@ -1,17 +1,17 @@
 'use client'
 
-import { Search } from 'lucide-react'
 import { useState } from 'react'
 
 import {
   Combobox,
+  ComboboxCollection,
   ComboboxEmpty,
+  ComboboxGroup,
   ComboboxInput,
   ComboboxItem,
   ComboboxItemDescription,
   ComboboxItemText,
   ComboboxViewport,
-  contains,
 } from '../combobox'
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from '../dialog'
 import { Kbd } from '../kbd'
@@ -19,52 +19,68 @@ import { Kbd } from '../kbd'
 export interface CommandPaletteItem {
   value: string
   label: string
-  group?: string
+  description?: string
+  textValue?: string
+}
+
+export interface CommandPaletteGroup {
+  label: string
+  items: CommandPaletteItem[]
 }
 
 export interface CommandPaletteProps {
   open?: boolean
   defaultOpen?: boolean
   onOpenChange?: (open: boolean) => void
-  items: CommandPaletteItem[]
+  items: CommandPaletteItem[] | CommandPaletteGroup[]
   title: string
+  description?: string
   placeholder: string
   emptyText: string
   onSelect?: (value: string) => void
   className?: string
 }
 
+const searchText = (item: CommandPaletteItem) => item.textValue ?? item.label
+
+const isGrouped = (items: CommandPaletteProps['items']): items is CommandPaletteGroup[] =>
+  items.length > 0 && 'items' in items[0]!
+
+function renderItem(item: CommandPaletteItem) {
+  return (
+    <ComboboxItem key={item.value} value={item}>
+      <ComboboxItemText>{item.label}</ComboboxItemText>
+      {item.description && (
+        <ComboboxItemDescription>{item.description}</ComboboxItemDescription>
+      )}
+    </ComboboxItem>
+  )
+}
+
 export function CommandPalette({
   open,
   defaultOpen = false,
   onOpenChange,
   items,
   title,
+  description,
   placeholder,
   emptyText,
   onSelect,
   className,
 }: CommandPaletteProps) {
   const [own, setOwn] = useState(defaultOpen)
-  const [search, setSearch] = useState('')
-  const [seen, setSeen] = useState(defaultOpen)
 
   const isOpen = open ?? own
 
-  if (seen !== isOpen) {
-    setSeen(isOpen)
-    if (!isOpen) setSearch('')
-  }
-
   const setOpen = (next: boolean) => {
     if (open === undefined) setOwn(next)
     onOpenChange?.(next)
   }
 
-  const filtered = search ? items.filter(i => contains(i.label, search)) : items
-
-  const pick = (value: string) => {
-    onSelect?.(value)
+  const pick = (item: CommandPaletteItem | null) => {
+    if (!item) return
+    onSelect?.(item.value)
     setOpen(false)
   }
 
@@ -72,16 +88,22 @@ export function CommandPalette({
     <Dialog open={isOpen} onOpenChange={setOpen}>
       <DialogContent size="top" className={className}>
         <DialogTitle className="sr-only">{title}</DialogTitle>
-        <DialogDescription className="sr-only">
-          {placeholder}
-        </DialogDescription>
+        {description && <DialogDescription className="sr-only">{description}</DialogDescription>}
 
-        <Combobox open onValueChange={pick}>
+        <Combobox<CommandPaletteItem>
+          inline
+          open={isOpen}
+          items={items}
+          itemToStringLabel={searchText}
+          value={null}
+          onValueChange={pick}
+        >
           <div className="border-line flex h-14 items-center gap-stack border-b px-4">
-            <Search className="text-foreground-subtle size-5 shrink-0" />
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="text-fg-subtle size-5 shrink-0">
+              <path d="m21 21-4.34-4.34" />
+              <circle cx="11" cy="11" r="8" />
+            </svg>
             <ComboboxInput
-              value={search}
-              onValueChange={setSearch}
               placeholder={placeholder}
               className="text-t16"
               autoFocus
@@ -89,19 +111,18 @@ export function CommandPalette({
             <Kbd>Esc</Kbd>
           </div>
 
+          <ComboboxEmpty className="m-2 py-6">
+            {emptyText}
+          </ComboboxEmpty>
+
           <ComboboxViewport className="max-h-80 gap-1 p-2">
-            <ComboboxEmpty className="py-6">
-              {emptyText}
-            </ComboboxEmpty>
-
-            {filtered.map(item => (
-              <ComboboxItem key={item.value} value={item.value}>
-                <ComboboxItemText>{item.label}</ComboboxItemText>
-                {item.group && (
-                  <ComboboxItemDescription>{item.group}</ComboboxItemDescription>
-                )}
-              </ComboboxItem>
-            ))}
+            {isGrouped(items)
+              ? (group: CommandPaletteGroup) => (
+                  <ComboboxGroup key={group.label} label={group.label} items={group.items}>
+                    <ComboboxCollection>{renderItem}</ComboboxCollection>
+                  </ComboboxGroup>
+                )
+              : renderItem}
           </ComboboxViewport>
         </Combobox>
       </DialogContent>

package/dialog/index.tsx

@@ -1,12 +1,12 @@
 'use client'
 
-import { Dialog as DialogPrimitive } from 'radix-ui'
+import { Dialog as DialogPrimitive } from '@base-ui/react/dialog'
 import type { ComponentProps, ReactNode } from 'react'
 
 import { tv } from '../tv'
 
 export const dialog = tv({
-  base: 'sheet text-foreground z-overlay fixed flex flex-col gap-stack overflow-y-auto'
+  base: 'sheet text-fg z-overlay fixed flex flex-col gap-stack overflow-y-auto'
     + ' open:animate-fade-in closed:animate-fade-out focus-visible:outline-none',
 
   variants: {
@@ -22,54 +22,58 @@ export const dialog = tv({
   defaultVariants: { size: 'md' },
 })
 
-export interface DialogProps {
-  open?: boolean
-  defaultOpen?: boolean
-  onOpenChange?: (open: boolean) => void
-  children?: ReactNode
-}
+export type DialogProps = ComponentProps<typeof DialogPrimitive.Root>
 
-export function Dialog({ open, defaultOpen, onOpenChange, children }: DialogProps) {
-  return (
-    <DialogPrimitive.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
-      {children}
-    </DialogPrimitive.Root>
-  )
+export function Dialog(props: DialogProps) {
+  return <DialogPrimitive.Root {...props} />
 }
 
-export function DialogTrigger({ children }: { children: ReactNode }) {
-  return <DialogPrimitive.Trigger asChild>{children}</DialogPrimitive.Trigger>
+export type DialogTriggerProps = ComponentProps<typeof DialogPrimitive.Trigger>
+
+export function DialogTrigger(props: DialogTriggerProps) {
+  return <DialogPrimitive.Trigger {...props} />
 }
 
-export function DialogClose({ children }: { children: ReactNode }) {
-  return <DialogPrimitive.Close asChild>{children}</DialogPrimitive.Close>
+export type DialogCloseProps = ComponentProps<typeof DialogPrimitive.Close>
+
+export function DialogClose(props: DialogCloseProps) {
+  return <DialogPrimitive.Close {...props} />
 }
 
-export interface DialogContentProps extends ComponentProps<typeof DialogPrimitive.Content> {
+export type DialogContentProps = Omit<ComponentProps<typeof DialogPrimitive.Popup>, 'className'> & {
   size?: 'md' | 'full' | 'top'
+  className?: string
 }
 
 export function DialogContent({ size, className, children, ...rest }: DialogContentProps) {
   return (
     <DialogPrimitive.Portal>
-      <DialogPrimitive.Overlay className="bg-background-overlay z-overlay fixed inset-0 open:animate-fade-in closed:animate-fade-out" />
+      <DialogPrimitive.Backdrop className="bg-bg-overlay z-overlay fixed inset-0 open:animate-fade-in closed:animate-fade-out" />
 
-      <DialogPrimitive.Content {...rest} className={dialog({ size, className })}>
+      <DialogPrimitive.Popup {...rest} className={dialog({ size, className })}>
         {children}
-      </DialogPrimitive.Content>
+      </DialogPrimitive.Popup>
     </DialogPrimitive.Portal>
   )
 }
 
 const dialogTitle = tv({ base: 'text-section min-w-0' })
 
-export function DialogTitle({ className, ...rest }: ComponentProps<typeof DialogPrimitive.Title>) {
+export type DialogTitleProps = Omit<ComponentProps<typeof DialogPrimitive.Title>, 'className'> & {
+  className?: string
+}
+
+export function DialogTitle({ className, ...rest }: DialogTitleProps) {
   return <DialogPrimitive.Title {...rest} className={dialogTitle({ className })} />
 }
 
-const dialogDescription = tv({ base: 'text-prose text-foreground-muted' })
+const dialogDescription = tv({ base: 'text-prose text-fg-muted' })
+
+export type DialogDescriptionProps = Omit<ComponentProps<typeof DialogPrimitive.Description>, 'className'> & {
+  className?: string
+}
 
-export function DialogDescription({ className, ...rest }: ComponentProps<typeof DialogPrimitive.Description>) {
+export function DialogDescription({ className, ...rest }: DialogDescriptionProps) {
   return (
     <DialogPrimitive.Description {...rest} className={dialogDescription({ className })} />
   )
@@ -103,7 +107,7 @@ export function DialogHeader({ lead, trail, className, children }: DialogHeaderP
   )
 }
 
-const dialogFooter = tv({ base: 'flex justify-end gap-2' })
+const dialogFooter = tv({ base: 'mt-auto flex justify-end gap-2' })
 
 export function DialogFooter({ className, children }: { className?: string, children?: ReactNode }) {
   return (

package/dist/index.js

@@ -1,17 +1,45 @@
 #!/usr/bin/env node
+import { spawnSync } from 'node:child_process';
 import { existsSync, mkdirSync, readFileSync, writeFileSync } from 'node:fs';
 import { dirname, join } from 'node:path';
-import { argv, cwd, exit, stdin, stdout } from 'node:process';
+import { argv, cwd, exit, platform, stdin, stdout } from 'node:process';
 import { createInterface } from 'node:readline/promises';
 const HERE = join(import.meta.dirname, '..');
 const CONFIG = 'components.json';
-const DEFAULT_PATH = 'components/ui';
-const USAGE = `pantoia-ui <명령어>
+const STYLES = '@import "@pantoia/ui/tailwind.css";';
+const TAILWIND = /^@import\s+["']tailwindcss["'][^;]*;\s*$/;
+const IMPORTED = /@import\s+["']@pantoia\/ui\//;
+const FONTS = ['pretendard@^1.3.9', '@fontsource/jetbrains-mono@^5.3.0'];
+const FONT_IMPORT = '@import "pretendard/dist/web/variable/pretendardvariable-dynamic-subset.css";';
+const MONO = '"JetBrains Mono"';
+const MONO_FACE = [
+    '@font-face {',
+    `  font-family: ${MONO};`,
+    '  src: url("@fontsource/jetbrains-mono/files/jetbrains-mono-latin-400-normal.woff2") format("woff2");',
+    '  font-weight: 400;',
+    '  font-display: swap;',
+    '  unicode-range: U+0000-00FF, U+2000-206F;',
+    '}',
+];
+const MANAGERS = [
+    { lock: 'pnpm-lock.yaml', command: 'pnpm', verb: 'add' },
+    { lock: 'yarn.lock', command: 'yarn', verb: 'add' },
+    { lock: 'bun.lock', command: 'bun', verb: 'add' },
+    { lock: 'bun.lockb', command: 'bun', verb: 'add' },
+    { lock: 'package-lock.json', command: 'npm', verb: 'install' },
+];
+const LAYOUTS = [
+    { css: 'app/globals.css', path: 'components/ui' },
+    { css: 'src/app/globals.css', path: 'src/components/ui' },
+    { css: 'app/app.css', path: 'app/components/ui' },
+    { css: 'src/index.css', path: 'src/components/ui' },
+];
+const USAGE = `npx @pantoia/ui <명령어>
 
-  init [--path <경로>]      컴포넌트를 저장할 위치를 정해요
-  add <이름...> [--force]   컴포넌트를 추가해요
-  list                      추가할 수 있는 컴포넌트를 확인해요
-  diff [이름]               추가한 파일과 최신 파일을 비교해요`;
+  init [--path <경로>] [--css <경로>]   컴포넌트를 저장할 위치와 전역 CSS 파일을 정해요
+  add <이름...> [--force]              컴포넌트를 추가해요
+  list                                 추가할 수 있는 컴포넌트를 확인해요
+  diff [이름]                          추가한 파일을 설치된 패키지의 파일과 비교해요`;
 function fail(message) {
     console.error(message);
     exit(1);
@@ -27,7 +55,7 @@ function registry() {
 function find(name) {
     const item = registry().find(candidate => candidate.name === name);
     if (!item)
-        fail(`목록에 없는 컴포넌트예요: ${name}\npantoia-ui list 로 이름을 확인하세요.`);
+        fail(`목록에 없는 컴포넌트예요: ${name}\nnpx @pantoia/ui list로 이름을 확인하세요.`);
     return item;
 }
 function configPath() {
@@ -67,13 +95,13 @@ async function ask(question, fallback) {
     rl.close();
     return answer.trim() || fallback;
 }
-async function confirm(question) {
+async function confirm(question, fallback = false) {
     if (!stdin.isTTY)
-        return false;
+        return fallback;
     const rl = createInterface({ input: stdin, output: stdout });
-    const answer = await rl.question(`${question} (y/N) `);
+    const answer = (await rl.question(`${question} ${fallback ? '(Y/n)' : '(y/N)'} `)).trim().toLowerCase();
     rl.close();
-    return answer.trim().toLowerCase() === 'y';
+    return answer === '' ? fallback : answer === 'y';
 }
 async function copy(item, base, force) {
     let skipped = false;
@@ -94,26 +122,126 @@ async function copy(item, base, force) {
     }
     return skipped;
 }
-async function commandInit(args) {
-    const existing = readConfig();
-    if (existing)
-        fail(`${CONFIG} 이 이미 있어요.`);
-    const path = option(args, '--path')
-        ?? await ask('컴포넌트를 저장할 위치를 입력하세요.', DEFAULT_PATH);
-    writeConfig({ path, components: {} });
-    console.log(`${CONFIG} 을 만들었어요. 컴포넌트는 ${path} 에 저장돼요.`);
-    console.log('전역 CSS 에 아래 한 줄을 추가하세요.');
+function detect() {
+    return LAYOUTS.find(layout => existsSync(join(cwd(), layout.css))) ?? LAYOUTS[0];
+}
+const packageName = (spec) => spec.slice(0, spec.lastIndexOf('@'));
+function installed() {
+    const file = join(cwd(), 'package.json');
+    if (!existsSync(file))
+        return new Set();
+    const pkg = JSON.parse(readFileSync(file, 'utf8'));
+    return new Set(Object.keys({ ...pkg.dependencies, ...pkg.devDependencies }));
+}
+async function installPackages() {
+    const have = installed();
+    const specs = have.has('@pantoia/ui') ? [] : [`@pantoia/ui@${version()}`];
+    let fonts = FONTS.every(spec => have.has(packageName(spec)));
+    if (!fonts) {
+        console.log('');
+        fonts = await confirm(`글꼴 패키지 ${FONTS.map(packageName).join(', ')}를 설치할까요?`, true);
+        if (fonts)
+            specs.push(...FONTS);
+    }
+    const manager = MANAGERS.find(m => existsSync(join(cwd(), m.lock))) ?? MANAGERS.at(-1);
+    if (!fonts && !FONTS.every(spec => have.has(packageName(spec)))) {
+        console.log('글꼴을 설치하지 않았어요. 쓰려면 이 명령으로 설치하세요.');
+        console.log('');
+        console.log(`  ${[manager.command, manager.verb, ...FONTS].join(' ')}`);
+    }
+    if (specs.length === 0)
+        return fonts;
+    const done = spawnSync(manager.command, [manager.verb, ...specs], { stdio: 'inherit', shell: platform === 'win32' });
+    if (done.status === 0)
+        return fonts;
+    console.log('패키지를 설치하지 못했어요. 이 명령으로 직접 설치하세요.');
+    console.log('');
+    console.log(`  ${[manager.command, manager.verb, ...specs].join(' ')}`);
+    return false;
+}
+function additions(text, fonts) {
+    const head = IMPORTED.test(text) ? [] : [STYLES];
+    if (fonts && !text.includes(FONT_IMPORT))
+        head.push(FONT_IMPORT);
+    const tail = fonts && !text.includes(MONO) ? MONO_FACE : [];
+    return { head, tail };
+}
+async function importStyles(css, head, tail) {
+    const file = join(cwd(), css);
+    const text = readFileSync(file, 'utf8');
+    const ending = text.endsWith('\n') ? '\n' : '';
+    const lines = text.slice(0, text.length - ending.length).split('\n');
+    const ours = lines.findIndex(line => IMPORTED.test(line));
+    const at = ours === -1 ? lines.findIndex(line => TAILWIND.test(line)) : ours;
     console.log('');
-    console.log('  @import "@pantoia/ui/styles.css";');
+    console.log(`${css}를 이렇게 수정해요.`);
+    console.log('');
+    for (const line of lines.slice(Math.max(0, at - 2), at + 1))
+        console.log(`  ${line}`);
+    for (const line of head)
+        console.log(`+ ${line}`);
+    for (const line of lines.slice(at + 1, at + 3))
+        console.log(`  ${line}`);
+    if (tail.length > 0) {
+        if (lines.length > at + 3)
+            console.log('  ...');
+        for (const line of tail)
+            console.log(`+ ${line}`);
+    }
+    console.log('');
+    if (!await confirm('수정할까요?', true))
+        return false;
+    const body = [...lines.slice(0, at + 1), ...head, ...lines.slice(at + 1)];
+    if (tail.length > 0)
+        body.push('', ...tail);
+    writeFileSync(file, body.join('\n') + ending);
+    return true;
+}
+async function commandInit(args) {
+    if (readConfig())
+        fail(`${CONFIG}이 이미 있어요. 컴포넌트는 npx @pantoia/ui add로 추가하세요.`);
+    const detected = detect();
+    const path = option(args, '--path') ?? await ask('컴포넌트를 저장할 위치를 입력하세요.', detected.path);
+    const css = option(args, '--css') ?? await ask('전역 CSS 파일 위치를 입력하세요.', detected.css);
+    if (!existsSync(join(cwd(), css)))
+        fail(`${css} 파일이 없어요. 전역 CSS 파일 위치를 확인하고 다시 실행하세요.`);
+    const text = readFileSync(join(cwd(), css), 'utf8');
+    if (!IMPORTED.test(text) && !text.split('\n').some(line => TAILWIND.test(line)))
+        fail(`${css}에 @import "tailwindcss";가 없어요. Tailwind CSS를 먼저 설치하세요.`);
+    const fonts = await installPackages();
+    const { head, tail } = additions(text, fonts);
+    const needed = head.length > 0 || tail.length > 0;
+    const added = needed && await importStyles(css, head, tail);
+    writeConfig({ path, css, components: {} });
+    if (stdin.isTTY)
+        console.log('');
+    console.log(`${CONFIG}을 만들었어요. 컴포넌트는 ${path}에 저장돼요.`);
+    if (!needed)
+        console.log(`${css}에 스타일이 이미 있어요.`);
+    else if (added)
+        console.log(`${css}에 스타일을 추가했어요.`);
+    else {
+        console.log(`${css}를 수정하지 않았어요. @import "tailwindcss"; 바로 아래에 이 줄을 직접 추가하세요.`);
+        console.log('');
+        for (const line of head)
+            console.log(`  ${line}`);
+        if (tail.length > 0) {
+            console.log('');
+            console.log('파일 끝에는 이 블록을 추가하세요.');
+            console.log('');
+            for (const line of tail)
+                console.log(`  ${line}`);
+        }
+    }
 }
 async function commandAdd(args) {
     const names = args.filter(arg => !arg.startsWith('--'));
     if (names.length === 0)
-        fail('추가할 컴포넌트 이름을 입력하세요. 예) pantoia-ui add button');
+        fail('추가할 컴포넌트 이름을 입력하세요. 예) npx @pantoia/ui add button');
     const force = args.includes('--force');
     const config = readConfig();
     if (!config)
-        fail(`${CONFIG} 이 없어요. 먼저 pantoia-ui init 을 실행하세요.`);
+        fail(`${CONFIG}이 없어요. 먼저 npx @pantoia/ui init을 실행하세요.`);
     const items = resolve(names);
     const asked = items.filter(item => names.includes(item.name));
     const extra = items.filter(item => !names.includes(item.name));
@@ -142,7 +270,7 @@ async function commandAdd(args) {
     }
 }
 function commandList() {
-    console.log(`${'이름'.padEnd(16)}${'종류'.padEnd(7)}같이 추가되는 컴포넌트`);
+    console.log(`${'이름'.padEnd(16)}${'종류'.padEnd(7)}함께 추가되는 컴포넌트`);
     for (const item of registry()) {
         const layer = item.meta?.layer ?? (item.type === 'registry:lib' ? 'lib' : '');
         const together = (item.registryDependencies ?? []).join(', ');
@@ -181,7 +309,7 @@ function difference(mine, theirs) {
 async function commandDiff(args) {
     const config = readConfig();
     if (!config)
-        fail(`${CONFIG} 이 없어요. 먼저 pantoia-ui add 로 컴포넌트를 추가하세요.`);
+        fail(`${CONFIG}이 없어요. 먼저 npx @pantoia/ui add로 컴포넌트를 추가하세요.`);
     const names = args.filter(arg => !arg.startsWith('--'));
     const wanted = names.length > 0 ? names : Object.keys(config.components);
     let changed = 0;
@@ -195,7 +323,7 @@ async function commandDiff(args) {
             if (mine === theirs)
                 continue;
             if (changed === 0)
-                console.log('- 는 내 파일, + 는 최신 파일이에요.');
+                console.log('- 줄은 내 파일, + 줄은 설치된 패키지의 파일이에요.');
             changed++;
             console.log(`\n${join(config.path, file.target ?? file.path)}`);
             for (const line of difference(mine.split('\n'), theirs.split('\n')))

package/drawer/index.module.css

@@ -7,8 +7,8 @@
   transition: transform var(--dur-enter) var(--ease-enter);
 }
 
-.panel[data-state="open"]  { animation: slide-in  var(--dur-enter) var(--ease-enter); }
-.panel[data-state="closed"]{ animation: slide-out var(--dur-exit)  var(--ease-exit); }
+.panel[data-open]   { animation: slide-in  var(--dur-enter) var(--ease-enter); }
+.panel[data-closed] { animation: slide-out var(--dur-exit)  var(--ease-exit); }
 .panel[data-swiping] { transition-duration: 0ms; }
 .panel-right { --drawer-slide: 100%; }