@jogak/ui 0.1.0-alpha.10.2 → 0.1.0-alpha.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jogak/ui",
-  "version": "0.1.0-alpha.10.2",
+  "version": "0.1.0-alpha.11",
   "description": "Showcase viewer UI for Jogak — Sidebar / Preview / Controls / Actions and the JogakApp shell.",
   "keywords": [
     "jogak",
@@ -65,7 +65,7 @@
     "prism-react-renderer": "^2.4.1",
     "tailwindcss": "^4.0.0",
     "@tailwindcss/vite": "^4.0.0",
-    "@jogak/core": "0.1.0-alpha.10.2"
+    "@jogak/core": "0.1.0-alpha.11"
   },
   "devDependencies": {
     "@types/node": "^20.14.0",
@@ -76,7 +76,9 @@
     "react-dom": "^19.0.0",
     "typescript": "^5.5.0",
     "vite": "^6.0.0",
-    "vite-plugin-dts": "^4.5.4"
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^2.0.0",
+    "happy-dom": "^20.9.0"
   },
   "peerDependencies": {
     "@vitejs/plugin-react": "^4.3.0",
@@ -96,6 +98,7 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
   }
 }

package/src/components/Preview/format-usage.test.ts

@@ -0,0 +1,115 @@
+import { describe, expect, it } from 'vitest'
+import type { RegistryEntry } from '@jogak/core'
+import { formatUsageCode } from './format-usage.js'
+
+function makeEntry(componentName: string, title = 'UI/Demo'): RegistryEntry {
+  function Demo(): null {
+    return null
+  }
+  Object.defineProperty(Demo, 'name', { value: componentName })
+  return {
+    id: title,
+    title,
+    jogaks: [],
+    meta: { title, component: Demo, argTypes: {} },
+    source: '',
+    filePath: '',
+  }
+}
+
+describe('formatUsageCode', () => {
+  it('children 문자열 → 단일 라인', () => {
+    const entry = makeEntry('Badge')
+    expect(formatUsageCode(entry, { children: 'New', variant: 'default' })).toBe(
+      '<Badge variant="default">New</Badge>',
+    )
+  })
+
+  it('children 없음 → self-closing', () => {
+    const entry = makeEntry('Card')
+    expect(formatUsageCode(entry, { title: 'Hello' })).toBe(
+      '<Card title="Hello" />',
+    )
+  })
+
+  it('boolean true → key only, false → key={false}', () => {
+    const entry = makeEntry('Toggle')
+    expect(formatUsageCode(entry, { disabled: true, checked: false })).toBe(
+      '<Toggle disabled checked={false} />',
+    )
+  })
+
+  it('number → 중괄호 표현', () => {
+    const entry = makeEntry('Counter')
+    expect(formatUsageCode(entry, { count: 42 })).toBe('<Counter count={42} />')
+  })
+
+  it('function → key={fn}', () => {
+    const entry = makeEntry('Button')
+    expect(
+      formatUsageCode(entry, { onClick: () => undefined, label: 'Go' }),
+    ).toBe('<Button onClick={fn} label="Go" />')
+  })
+
+  it('객체/배열 → JSON 표현', () => {
+    const entry = makeEntry('List')
+    expect(formatUsageCode(entry, { items: [1, 2, 3] })).toBe(
+      '<List items={[1,2,3]} />',
+    )
+  })
+
+  it('children에 number → JSX 표현', () => {
+    const entry = makeEntry('Counter')
+    expect(formatUsageCode(entry, { children: 7 })).toBe(
+      '<Counter>{7}</Counter>',
+    )
+  })
+
+  it('component name 없으면 title의 마지막 segment 사용', () => {
+    const entry: RegistryEntry = {
+      id: 'UI/Anonymous',
+      title: 'UI/Anonymous',
+      jogaks: [],
+      meta: {
+        title: 'UI/Anonymous',
+        component: undefined,
+        argTypes: {},
+      },
+      source: '',
+      filePath: '',
+    }
+    expect(formatUsageCode(entry, { children: 'X' })).toBe(
+      '<Anonymous>X</Anonymous>',
+    )
+  })
+
+  it('많은 props → multi-line 포맷', () => {
+    const entry = makeEntry('Form')
+    const out = formatUsageCode(entry, {
+      title: 'Long descriptive title',
+      description: 'Another lengthy text value',
+      disabled: false,
+      autoFocus: true,
+    })
+    expect(out).toContain('\n')
+    expect(out.startsWith('<Form\n  ')).toBe(true)
+    expect(out.endsWith('/>')).toBe(true)
+  })
+
+  it('따옴표 escape', () => {
+    const entry = makeEntry('Label')
+    expect(formatUsageCode(entry, { text: 'He said "hi"' })).toBe(
+      '<Label text="He said &quot;hi&quot;" />',
+    )
+  })
+
+  it('children + props 모두 multi-line으로 ', () => {
+    const entry = makeEntry('Card')
+    const out = formatUsageCode(entry, {
+      title: 'A long title',
+      description: 'A long description',
+      children: 'Body content',
+    })
+    expect(out).toMatch(/^<Card\n {2}title="A long title"\n {2}description="A long description"\n>\n {2}Body content\n<\/Card>$/u)
+  })
+})

package/src/components/Preview/format-usage.ts

@@ -0,0 +1,129 @@
+/**
+ * 알파.10.3: 컴포넌트 사용 코드 포매터.
+ *
+ * 코드 패널에는 `.jogak.tsx` 파일 전체가 아니라, 현재 args 기반의 사용 스니펫을 노출한다.
+ * 사용자가 Controls 패널에서 args를 바꾸면 즉시 갱신된다.
+ *
+ * 출력 예:
+ *   <Badge variant="default">New</Badge>
+ *
+ *   <Card
+ *     title="Hello"
+ *     disabled
+ *     onClick={fn}
+ *   />
+ */
+
+import type { RegistryEntry } from '@jogak/core'
+
+const SINGLE_LINE_THRESHOLD = 60
+
+/**
+ * `entry` + 현재 `args`로부터 JSX 사용 코드를 생성한다.
+ * children은 태그 본문에, 나머지 props는 attribute로.
+ */
+export function formatUsageCode(
+  entry: RegistryEntry,
+  args: Readonly<Record<string, unknown>>,
+): string {
+  const componentName = resolveComponentName(entry)
+  const { children, restProps } = splitChildren(args)
+
+  const propTokens = Object.entries(restProps)
+    .filter(([, v]) => v !== undefined)
+    .map(([k, v]) => formatProp(k, v))
+
+  const childrenStr = formatChildren(children)
+  const hasChildren = childrenStr !== null
+
+  // single-line 시도
+  const inlineProps = propTokens.length === 0 ? '' : ' ' + propTokens.join(' ')
+  const singleLine = hasChildren
+    ? `<${componentName}${inlineProps}>${childrenStr ?? ''}</${componentName}>`
+    : `<${componentName}${inlineProps} />`
+
+  if (singleLine.length <= SINGLE_LINE_THRESHOLD && !singleLine.includes('\n')) {
+    return singleLine
+  }
+
+  // multi-line — 각 prop을 별도 줄에
+  const indentedProps =
+    propTokens.length === 0 ? '' : '\n  ' + propTokens.join('\n  ') + '\n'
+  if (hasChildren) {
+    const indentedChildren = (childrenStr ?? '')
+      .split('\n')
+      .map((line) => `  ${line}`)
+      .join('\n')
+    return `<${componentName}${indentedProps}>\n${indentedChildren}\n</${componentName}>`
+  }
+  return `<${componentName}${indentedProps}/>`
+}
+
+function resolveComponentName(entry: RegistryEntry): string {
+  const component = entry.meta.component as
+    | { displayName?: unknown; name?: unknown }
+    | undefined
+  if (component !== undefined) {
+    if (typeof component.displayName === 'string' && component.displayName.length > 0) {
+      return component.displayName
+    }
+    if (typeof component.name === 'string' && component.name.length > 0) {
+      return component.name
+    }
+  }
+  // fallback: title의 마지막 segment ("UI/Badge" → "Badge")
+  const lastSeg = entry.title.split('/').pop()
+  return lastSeg !== undefined && lastSeg.length > 0 ? lastSeg : 'Component'
+}
+
+interface SplitChildrenResult {
+  readonly children: unknown
+  readonly restProps: Readonly<Record<string, unknown>>
+}
+
+function splitChildren(args: Readonly<Record<string, unknown>>): SplitChildrenResult {
+  const { children, ...rest } = args as { children?: unknown } & Record<string, unknown>
+  return { children, restProps: rest }
+}
+
+function formatChildren(children: unknown): string | null {
+  if (children === undefined || children === null) return null
+  if (typeof children === 'string') {
+    if (children.length === 0) return null
+    return children
+  }
+  if (typeof children === 'number' || typeof children === 'bigint') {
+    return `{${children.toString()}}`
+  }
+  if (typeof children === 'boolean') {
+    return null
+  }
+  // 복합 타입(object/array/function): JSON 표현
+  return `{${stringifyValue(children)}}`
+}
+
+function formatProp(key: string, value: unknown): string {
+  if (value === true) return key
+  if (value === false) return `${key}={false}`
+  if (value === null) return `${key}={null}`
+  if (typeof value === 'string') {
+    // 따옴표 escape
+    const escaped = value.replace(/"/gu, '&quot;')
+    return `${key}="${escaped}"`
+  }
+  if (typeof value === 'number' || typeof value === 'bigint') {
+    return `${key}={${value.toString()}}`
+  }
+  if (typeof value === 'function') {
+    return `${key}={fn}`
+  }
+  return `${key}={${stringifyValue(value)}}`
+}
+
+function stringifyValue(value: unknown): string {
+  try {
+    return JSON.stringify(value)
+  } catch {
+    return String(value)
+  }
+}

package/src/components/Preview/index.tsx

@@ -10,6 +10,7 @@ import { Controls } from '../Controls/index.js'
 import { Actions } from '../Actions/index.js'
 import { ShadowMount } from './ShadowMount.js'
 import { IframeMount } from './IframeMount.js'
+import { formatUsageCode } from './format-usage.js'
 
 export interface PreviewProps {
   readonly entryId: string
@@ -378,7 +379,6 @@ function ReadyFrame({
             key={`${entry.id}/${jogak.name}`}
             entry={entry}
             args={mergedArgs}
-            source={entry.source}
             theme={prismTheme}
             previewIsolation={previewIsolation}
             userPreviewUrl={userPreviewUrl}
@@ -530,7 +530,6 @@ function Toolbar({
 interface JogakRendererProps {
   readonly entry: RegistryEntry
   readonly args: Readonly<Record<string, unknown>>
-  readonly source: string | undefined
   readonly theme: PrismTheme
   readonly previewIsolation: 'none' | 'shadow' | 'iframe'
   readonly userPreviewUrl: string
@@ -544,8 +543,10 @@ interface JogakRendererProps {
  * - `'shadow'` (deprecated) — `<ShadowMount>` 안에 마운트.
  * - `'none'` (deprecated) — 같은 document에 직접 마운트.
  */
-function JogakRenderer({ entry, args, source, theme, previewIsolation, userPreviewUrl, previewEntryPath }: JogakRendererProps): ReactElement {
+function JogakRenderer({ entry, args, theme, previewIsolation, userPreviewUrl, previewEntryPath }: JogakRendererProps): ReactElement {
   const [showCode, setShowCode] = useState(false)
+  // 알파.10.3: 코드 패널은 jogak 메타 파일이 아니라 현재 args 기반 사용 코드를 노출.
+  const usageCode = formatUsageCode(entry, args)
 
   const previewBody = (
     <div className="jogak:relative">
@@ -580,7 +581,7 @@ function JogakRenderer({ entry, args, source, theme, previewIsolation, userPrevi
       {/* 코드 패널 — preview-content 하단으로 펼쳐짐 */}
       {showCode && (
         <div className="jogak:mt-2 jogak:rounded-[var(--jogak-radius-xl)] jogak:overflow-hidden jogak:h-[320px] jogak:shadow-[0_0_0_1px_rgba(0,0,0,0.08),_0_4px_16px_rgba(0,0,0,0.12)]">
-          <SourceViewer source={source} theme={theme} />
+          <SourceViewer source={usageCode} theme={theme} />
         </div>
       )}
     </div>