@jogak/ui 0.1.0-alpha.3 → 0.1.0-alpha.5

package/src/components/Sidebar/index.tsx

@@ -1,8 +1,14 @@
 import { useState, useEffect } from 'react'
-import type { ReactElement } from 'react'
+import type { CSSProperties, ReactElement } from 'react'
+import clsx from 'clsx'
 import type { CategoryMetaTree, RegistryEntryMeta } from '@jogak/core'
 import { useRegistryMeta } from '@jogak/react'
 
+// CSS custom property를 React style prop에 주입하기 위한 헬퍼 타입.
+// React 18+는 string-keyed `--` prefix를 인식하나 TS는 명시적 cast 필요.
+// spec §6.1 참조.
+type CSSVarStyle = CSSProperties & Record<`--${string}`, string | number>
+
 export interface SidebarProps {
   readonly selectedEntryId: string | null
   readonly selectedJogakName: string | null
@@ -26,15 +32,9 @@ export function Sidebar({
   return (
     <aside
       data-testid="sidebar"
-      style={{
-        borderRight: '1px solid #e5e7eb',
-        height: '100%',
-        overflow: 'auto',
-        display: 'flex',
-        flexDirection: 'column',
-      }}
+      className="jogak:flex jogak:flex-col jogak:h-full jogak:overflow-auto jogak:border-r jogak:border-[var(--jogak-color-border)]"
     >
-      <div style={{ padding: '12px', borderBottom: '1px solid #e5e7eb' }}>
+      <div className="jogak:p-3 jogak:border-b jogak:border-[var(--jogak-color-border)]">
         <input
           type="search"
           placeholder="Search components..."
@@ -42,16 +42,11 @@ export function Sidebar({
           onChange={(e) => {
             setQuery(e.target.value)
           }}
-          style={{
-            width: '100%',
-            padding: '6px 8px',
-            border: '1px solid #d1d5db',
-            borderRadius: 4,
-          }}
+          className="jogak:w-full jogak:px-2 jogak:py-1.5 jogak:border jogak:border-[var(--jogak-color-border-strong)] jogak:rounded-[var(--jogak-radius-md)]"
           aria-label="Search components"
         />
       </div>
-      <nav style={{ flex: 1, overflow: 'auto', padding: '8px 0' }}>
+      <nav className="jogak:flex-1 jogak:overflow-auto jogak:py-2">
         {filtered !== null ? (
           <FlatList
             metas={filtered}
@@ -87,13 +82,13 @@ function FlatList({
 }: FlatListProps): ReactElement {
   if (metas.length === 0) {
     return (
-      <p style={{ padding: '0 12px', color: '#9ca3af', fontSize: 13 }}>
+      <p className="jogak:px-3 jogak:text-[var(--jogak-color-fg-subtle)] jogak:text-[13px]">
         No results
       </p>
     )
   }
   return (
-    <ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
+    <ul className="jogak:list-none jogak:m-0 jogak:p-0">
       {metas.map((meta) => (
         <li key={meta.id}>
           <EntryGroup
@@ -126,11 +121,9 @@ function TreeView({
 }: TreeViewProps): ReactElement {
   return (
     <ul
-      style={{
-        listStyle: 'none',
-        margin: 0,
-        padding: `0 0 0 ${depth * 12}px`,
-      }}
+      className="jogak:list-none jogak:m-0 jogak:pr-0 jogak:py-0 jogak:pl-[var(--jogak-tree-pl)]"
+      // eslint-disable-next-line no-restricted-syntax -- jogak: CSS var inject (--jogak-tree-pl)
+      style={{ '--jogak-tree-pl': `${depth * 12}px` } as CSSVarStyle}
     >
       {Object.entries(node).map(([key, child]) => (
         <li key={key}>
@@ -183,21 +176,7 @@ function CategoryGroup({
         onClick={() => {
           setOpen((v) => !v)
         }}
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: 4,
-          width: '100%',
-          padding: '4px 12px',
-          background: 'none',
-          border: 'none',
-          cursor: 'pointer',
-          fontSize: 12,
-          fontWeight: 600,
-          color: '#6b7280',
-          textTransform: 'uppercase',
-          letterSpacing: '0.05em',
-        }}
+        className="jogak:flex jogak:items-center jogak:gap-1 jogak:w-full jogak:px-3 jogak:py-1 jogak:bg-transparent jogak:border-none jogak:cursor-pointer jogak:text-[12px] jogak:font-semibold jogak:text-[var(--jogak-color-fg-muted)] jogak:uppercase jogak:tracking-wider"
         aria-expanded={open}
       >
         <span>{open ? '▾' : '▸'}</span>
@@ -254,29 +233,25 @@ function EntryGroup({
             setOpen((v) => !v)
           }
         }}
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: 6,
-          width: '100%',
-          padding: `5px 12px 5px ${paddingLeft}px`,
-          background: isCurrentEntry ? '#eff6ff' : 'none',
-          border: 'none',
-          cursor: 'pointer',
-          fontSize: 13,
-          color: isCurrentEntry ? '#2563eb' : '#374151',
-          fontWeight: isCurrentEntry ? 500 : 400,
-          textAlign: 'left',
-        }}
+        className={clsx(
+          'jogak:flex jogak:items-center jogak:gap-1.5 jogak:w-full jogak:pr-3 jogak:py-[5px]',
+          'jogak:pl-[var(--jogak-entry-pl)]',
+          'jogak:border-none jogak:cursor-pointer jogak:text-left jogak:text-[13px]',
+          isCurrentEntry
+            ? 'jogak:bg-[var(--jogak-color-accent-bg)] jogak:text-[var(--jogak-color-accent)] jogak:font-medium'
+            : 'jogak:bg-transparent jogak:text-[var(--jogak-color-fg)] jogak:font-normal',
+        )}
+        // eslint-disable-next-line no-restricted-syntax -- jogak: CSS var inject (--jogak-entry-pl)
+        style={{ '--jogak-entry-pl': `${paddingLeft}px` } as CSSVarStyle}
         aria-expanded={open}
       >
-        <span style={{ fontSize: 10, flexShrink: 0, lineHeight: 1 }}>
+        <span className="jogak:text-[10px] jogak:shrink-0 jogak:leading-none">
           {open ? '▾' : '▸'}
         </span>
         {label}
       </button>
       {open && (
-        <ul style={{ listStyle: 'none', margin: 0, padding: 0 }}>
+        <ul className="jogak:list-none jogak:m-0 jogak:p-0">
           {meta.jogakNames.map((jogakName) => {
             const isSelected = isCurrentEntry && jogakName === selectedJogakName
             return (
@@ -286,18 +261,16 @@ function EntryGroup({
                   onClick={() => {
                     onSelect(meta.id, jogakName)
                   }}
-                  style={{
-                    display: 'block',
-                    width: '100%',
-                    textAlign: 'left',
-                    padding: `4px 12px 4px ${paddingLeft + 18}px`,
-                    background: isSelected ? '#dbeafe' : 'none',
-                    border: 'none',
-                    cursor: 'pointer',
-                    fontSize: 12,
-                    color: isSelected ? '#1d4ed8' : '#6b7280',
-                    fontWeight: isSelected ? 500 : 400,
-                  }}
+                  className={clsx(
+                    'jogak:block jogak:w-full jogak:text-left jogak:pr-3 jogak:py-1',
+                    'jogak:pl-[var(--jogak-jogak-pl)]',
+                    'jogak:border-none jogak:cursor-pointer jogak:text-[12px]',
+                    isSelected
+                      ? 'jogak:bg-[var(--jogak-color-accent-bg-soft)] jogak:text-[var(--jogak-color-accent-fg)] jogak:font-medium'
+                      : 'jogak:bg-transparent jogak:text-[var(--jogak-color-fg-muted)] jogak:font-normal',
+                  )}
+                  // eslint-disable-next-line no-restricted-syntax -- jogak: CSS var inject (--jogak-jogak-pl)
+                  style={{ '--jogak-jogak-pl': `${paddingLeft + 18}px` } as CSSVarStyle}
                   aria-current={isSelected ? 'true' : undefined}
                 >
                   {jogakName}

package/src/styles/jogak.css

@@ -0,0 +1,108 @@
+/*
+ * jogak SPA 전용 스타일.
+ *
+ * 본 파일은 `packages/ui/src/app/main.tsx`에서만 import된다.
+ * lib mode build entry(`src/index.ts`, `src/host/index.ts`)에는 import되지 않으므로
+ * publish되는 `dist/index.{mjs,js}` / `dist/host/index.{mjs,js}` 산출물에 css 흔적이
+ * 들어가지 않는다 (사용자 번들 영향 zero — api-contracts §2.4, §7).
+ *
+ * Tailwind v4: preflight를 의도적으로 import하지 않고 `theme.css` + `utilities.css`만
+ * 분리 import한다. preflight의 globals(`*`, `html`, `body`)는 사용자 css와 prefix
+ * 무관하게 충돌 가능 — jogak SPA는 `index.html`의 inline reset(`box-sizing`,
+ * `body margin:0`)으로 충분하다 (api-contracts §6.2).
+ *
+ * `prefix(jogak)` — 모든 utility/variant/theme variable에 `jogak:` prefix가 적용된다.
+ * 사용자가 v4(no prefix)나 v3(`tw-` prefix)를 써도 selector 충돌 zero.
+ */
+
+@import "tailwindcss/theme.css" layer(theme) prefix(jogak);
+@import "tailwindcss/utilities.css" layer(utilities) prefix(jogak);
+
+/*
+ * jogak 디자인 토큰 (`--jogak-*`).
+ *
+ * 정의 위치는 `:root` — preview 내부의 사용자 컴포넌트도 var() 참조 가능 (원하면).
+ * `--jogak-*` prefix가 충분한 namespace를 제공하므로 사용자 globalCss(알파.6 예정)
+ * 와 충돌 zero.
+ *
+ * 알파.4에서는 변수만 정의하고 컴포넌트는 inline style을 그대로 둔다.
+ * 알파.5에서 `style={{ color: '#374151' }}` → `className="jogak:text-[var(--jogak-color-fg)]"`
+ * 형태로 마이그레이션한다 (api-contracts §4.4).
+ */
+@layer base {
+  :root {
+    /* color */
+    --jogak-color-bg:           #ffffff;
+    --jogak-color-fg:           #374151;
+    --jogak-color-fg-muted:     #6b7280;
+    --jogak-color-fg-subtle:    #9ca3af;
+    --jogak-color-fg-strong:    #111827;
+    --jogak-color-bg-subtle:    #f9fafb;
+    --jogak-color-bg-elevated:  #ffffff;
+    --jogak-color-bg-error:     #fef2f2;
+
+    --jogak-color-accent:       #2563eb;
+    --jogak-color-accent-bg:    #eff6ff;
+    --jogak-color-accent-fg:    #1d4ed8;
+    --jogak-color-accent-bg-soft: #dbeafe;
+
+    --jogak-color-violet:       #7c3aed;
+    --jogak-color-violet-bg:    #f5f3ff;
+    --jogak-color-violet-border:#ddd6fe;
+
+    --jogak-color-error:        #ef4444;
+    --jogak-color-error-fg:     #b91c1c;
+    --jogak-color-error-border: #fecaca;
+
+    --jogak-color-border:       #e5e7eb;
+    --jogak-color-border-muted: #f3f4f6;
+    --jogak-color-border-strong:#d1d5db;
+    --jogak-color-checker:      #e2e8f0;
+
+    /* spacing */
+    --jogak-space-1: 4px;
+    --jogak-space-2: 8px;
+    --jogak-space-3: 12px;
+    --jogak-space-4: 16px;
+    --jogak-space-5: 20px;
+    --jogak-space-6: 24px;
+
+    /* radius */
+    --jogak-radius-sm: 3px;
+    --jogak-radius-md: 4px;
+    --jogak-radius-lg: 6px;
+    --jogak-radius-xl: 8px;
+
+    /* typography */
+    --jogak-font-sans: system-ui, sans-serif;
+    --jogak-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
+    /*
+     * NOTE 알파.5 PR 4: --jogak-text-{xs,sm,base,md,lg} 5개 변수 + --jogak-sidebar-width
+     * 1개 삭제. 사용처 zero (PR 1/3에서 픽셀 literal 채택). v4 함정 1 (font-size 페어링)
+     * 회귀 자체 차단 + 알파.6 사용자 globalCss 충돌 가능성 zero.
+     */
+  }
+}
+
+@layer components {
+  /*
+   * 알파.5 PR 4: skeleton 애니메이션을 inline <style>(Preview L250-252)에서 jogak.css로
+   * 이동. inline style forbid rule (no-restricted-syntax) 위반 1건 + inline <style> 1건
+   * 동시 제거. VR 영향 zero (선택자/타이밍/그라디언트 픽셀 동일).
+   */
+  @keyframes jogakSkeleton {
+    0%   { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+  }
+
+  .jogak-skeleton-shimmer {
+    background: linear-gradient(
+      90deg,
+      rgba(229, 231, 235, 0) 0%,
+      rgba(229, 231, 235, 0.45) 50%,
+      rgba(229, 231, 235, 0) 100%
+    );
+    background-size: 200% 100%;
+    animation: jogakSkeleton 1.4s ease-in-out infinite;
+  }
+}