@jogak/ui 0.1.0-alpha.4 → 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

@@ -76,13 +76,33 @@
     /* typography */
     --jogak-font-sans: system-ui, sans-serif;
     --jogak-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
-    --jogak-text-xs: 10px;
-    --jogak-text-sm: 11px;
-    --jogak-text-base: 12px;
-    --jogak-text-md: 13px;
-    --jogak-text-lg: 14px;
+    /*
+     * 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; }
+  }
 
-    /* layout 상수 */
-    --jogak-sidebar-width: 260px;
+  .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;
   }
 }