atomsystem 0.4.1 → 0.5.0

package/components/blocks/BlockViewerCard.tsx

@@ -0,0 +1,229 @@
+'use client';
+
+import React, { useState } from 'react';
+import {
+  Code2,
+  Eye,
+  Copy,
+  Check,
+  Monitor,
+  Tablet,
+  Smartphone,
+  Terminal,
+} from 'lucide-react';
+import { BlockItem } from '@/lib/data/blocks';
+import { CodeHighlight } from '@/components/common/CodeHighlight';
+
+interface BlockViewerCardProps {
+  block: BlockItem;
+  children: React.ReactNode;
+}
+
+export function BlockViewerCard({ block, children }: BlockViewerCardProps) {
+  const [activeTab, setActiveTab] = useState<'preview' | 'react' | 'html'>('preview');
+  const [viewport, setViewport] = useState<'desktop' | 'tablet' | 'mobile'>('desktop');
+  const [copiedCode, setCopiedCode] = useState(false);
+  const [copiedCli, setCopiedCli] = useState(false);
+
+  const cliCommand = `npx atomsystem add ${block.id}`;
+
+  const handleCopyCode = (code: string) => {
+    navigator.clipboard.writeText(code);
+    setCopiedCode(true);
+    setTimeout(() => setCopiedCode(false), 2000);
+  };
+
+  const handleCopyCli = () => {
+    navigator.clipboard.writeText(cliCommand);
+    setCopiedCli(true);
+    setTimeout(() => setCopiedCli(false), 2000);
+  };
+
+  const getViewportMaxWidth = () => {
+    switch (viewport) {
+      case 'mobile':
+        return 'max-w-[390px]';
+      case 'tablet':
+        return 'max-w-[768px]';
+      default:
+        return 'max-w-full';
+    }
+  };
+
+  return (
+    <div
+      id={block.id}
+      className="scroll-mt-20 rounded-lg bg-(--bg-primary) border border-(--border-subtle) overflow-hidden"
+    >
+      {/* 1. Shadcn Block Toolbar */}
+      <div className="px-5 py-3 border-b border-(--border-subtle) bg-(--bg-secondary)/40 flex flex-wrap items-center justify-between gap-3">
+        {/* Left: ID & Title */}
+        <div className="flex items-center gap-3">
+          <span className="font-mono text-xs font-semibold text-(--text-primary) px-2 py-0.5 rounded border border-(--border-subtle) bg-(--bg-primary)">
+            {block.id}
+          </span>
+          <h2 className="text-sm font-semibold text-(--text-primary)">
+            {block.title}
+          </h2>
+        </div>
+
+        {/* Right Toolbar */}
+        <div className="flex items-center gap-2">
+          {/* Viewport Resizer */}
+          {activeTab === 'preview' && (
+            <div className="hidden sm:flex items-center gap-0.5 bg-(--bg-primary) p-0.5 rounded border border-(--border-subtle)">
+              <button
+                onClick={() => setViewport('desktop')}
+                title="Desktop 100%"
+                className={`p-1.5 rounded transition-colors ${
+                  viewport === 'desktop'
+                    ? 'bg-(--bg-secondary) text-(--text-primary)'
+                    : 'text-(--text-secondary) hover:text-(--text-primary)'
+                }`}
+              >
+                <Monitor className="w-3.5 h-3.5" />
+              </button>
+              <button
+                onClick={() => setViewport('tablet')}
+                title="Tablet 768px"
+                className={`p-1.5 rounded transition-colors ${
+                  viewport === 'tablet'
+                    ? 'bg-(--bg-secondary) text-(--text-primary)'
+                    : 'text-(--text-secondary) hover:text-(--text-primary)'
+                }`}
+              >
+                <Tablet className="w-3.5 h-3.5" />
+              </button>
+              <button
+                onClick={() => setViewport('mobile')}
+                title="Mobile 390px"
+                className={`p-1.5 rounded transition-colors ${
+                  viewport === 'mobile'
+                    ? 'bg-(--bg-secondary) text-(--text-primary)'
+                    : 'text-(--text-secondary) hover:text-(--text-primary)'
+                }`}
+              >
+                <Smartphone className="w-3.5 h-3.5" />
+              </button>
+            </div>
+          )}
+
+          {/* Preview / Code Tabs */}
+          <div className="flex items-center gap-1 bg-(--bg-primary) p-0.5 rounded border border-(--border-subtle)">
+            <button
+              onClick={() => setActiveTab('preview')}
+              data-tab="preview"
+              className={`flex items-center gap-1 px-2.5 py-1 rounded text-xs font-medium transition-colors ${
+                activeTab === 'preview'
+                  ? 'bg-(--bg-secondary) text-(--text-primary) font-semibold'
+                  : 'text-(--text-secondary) hover:text-(--text-primary)'
+              }`}
+            >
+              <Eye className="w-3.5 h-3.5" />
+              <span>Preview</span>
+            </button>
+            <button
+              onClick={() => setActiveTab('react')}
+              data-tab="react"
+              className={`flex items-center gap-1 px-2.5 py-1 rounded text-xs font-medium transition-colors ${
+                activeTab === 'react'
+                  ? 'bg-(--bg-secondary) text-(--text-primary) font-semibold'
+                  : 'text-(--text-secondary) hover:text-(--text-primary)'
+              }`}
+            >
+              <Code2 className="w-3.5 h-3.5" />
+              <span>React</span>
+            </button>
+            <button
+              onClick={() => setActiveTab('html')}
+              data-tab="html"
+              className={`flex items-center gap-1 px-2.5 py-1 rounded text-xs font-medium transition-colors ${
+                activeTab === 'html'
+                  ? 'bg-(--bg-secondary) text-(--text-primary) font-semibold'
+                  : 'text-(--text-secondary) hover:text-(--text-primary)'
+              }`}
+            >
+              <Code2 className="w-3.5 h-3.5" />
+              <span>HTML</span>
+            </button>
+          </div>
+
+          {/* CLI Add Button */}
+          <button
+            onClick={handleCopyCli}
+            title={cliCommand}
+            className="hidden lg:flex items-center gap-1 px-2.5 py-1 rounded text-xs font-mono bg-(--bg-primary) hover:bg-(--bg-secondary) text-(--text-secondary) border border-(--border-subtle) transition-colors"
+          >
+            <Terminal className="w-3 h-3 text-(--text-primary)" />
+            <span>{copiedCli ? 'Copied' : cliCommand}</span>
+          </button>
+
+          {/* Copy Code Button */}
+          <button
+            onClick={() =>
+              handleCopyCode(
+                activeTab === 'html' ? block.codeSnippets.htmlCss : block.codeSnippets.react
+              )
+            }
+            className="flex items-center gap-1 px-3 py-1 rounded text-xs font-medium bg-(--bg-primary) hover:bg-(--bg-secondary) text-(--text-primary) border border-(--border-subtle) transition-colors"
+          >
+            {copiedCode ? (
+              <>
+                <Check className="w-3.5 h-3.5 text-emerald-600" />
+                <span className="text-emerald-600 font-semibold">Copied</span>
+              </>
+            ) : (
+              <>
+                <Copy className="w-3.5 h-3.5 text-(--text-secondary)" />
+                <span>Copy Code</span>
+              </>
+            )}
+          </button>
+        </div>
+      </div>
+
+      {/* 2. Main Viewport */}
+      <div className="p-4 sm:p-6 bg-(--bg-secondary)/30 flex justify-center items-center">
+        {activeTab === 'preview' ? (
+          <div
+            className={`w-full transition-all duration-300 mx-auto ${getViewportMaxWidth()} ${
+              viewport !== 'desktop'
+                ? 'border border-(--border-strong) rounded-lg p-2 bg-(--bg-primary) shadow-sm'
+                : ''
+            }`}
+          >
+            {children}
+          </div>
+        ) : (
+          <div className="w-full bg-(--bg-primary) rounded-md border border-(--border-subtle) overflow-hidden">
+            <div className="px-4 py-2 border-b border-(--border-subtle) bg-(--bg-secondary)/50 text-xs font-mono text-(--text-secondary) flex justify-between items-center">
+              <span>{activeTab === 'react' ? `${block.id}.tsx` : `${block.id}.html`}</span>
+              <span>{activeTab === 'react' ? 'React + Tailwind TSX' : 'HTML / Tailwind'}</span>
+            </div>
+            <CodeHighlight
+              code={activeTab === 'react' ? block.codeSnippets.react : block.codeSnippets.htmlCss}
+              language={activeTab === 'react' ? 'tsx' : 'html'}
+              className="p-4 max-h-[480px]"
+            />
+          </div>
+        )}
+      </div>
+
+      {/* 3. Block Meta Footer */}
+      <div className="px-5 py-2.5 bg-(--bg-primary) border-t border-(--border-subtle) flex flex-wrap items-center justify-between gap-2 text-xs text-(--text-secondary)">
+        <p className="line-clamp-1 max-w-xl">{block.description}</p>
+        <div className="flex items-center gap-1.5 shrink-0">
+          <span className="text-(--text-muted)">Tokens:</span>
+          {block.tokensUsed.map((token) => (
+            <span
+              key={token}
+              className="font-mono text-xs px-1.5 py-0.5 rounded bg-(--bg-secondary) text-(--text-primary) border border-(--border-subtle)"
+            >
+              {token}
+            </span>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/components/blocks/BlocksSidebar.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import React, { useState } from 'react';
+import Link from 'next/link';
+import { useThemeEditor } from '@/components/editor/ThemeEditorProvider';
+import { BLOCKS_COLLECTION, BLOCK_CATEGORIES, BlockItem } from '@/lib/data/blocks';
+import { Search, Layers, ChevronRight } from 'lucide-react';
+
+interface BlocksSidebarProps {
+  activeId: string;
+}
+
+export function BlocksSidebar({ activeId }: BlocksSidebarProps) {
+  const { theme } = useThemeEditor();
+  const brandColor = theme?.color?.primary || 'var(--accent-primary)';
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const filteredBlocks = BLOCKS_COLLECTION.filter((block) => {
+    if (!searchQuery.trim()) return true;
+    const q = searchQuery.toLowerCase();
+    return (
+      block.title.toLowerCase().includes(q) ||
+      block.englishTitle.toLowerCase().includes(q) ||
+      block.id.toLowerCase().includes(q)
+    );
+  });
+
+  return (
+    <aside className="w-64 border-r border-(--border-subtle) bg-(--bg-primary) p-4 flex flex-col shrink-0 h-full overflow-y-auto">
+      {/* 1. Header & Search */}
+      <div className="mb-4 space-y-2">
+        <div className="flex items-center justify-between">
+          <Link
+            href="/blocks"
+            className="flex items-center gap-1.5 text-xs font-semibold text-(--text-primary) hover:text-(--accent-primary) transition-colors"
+          >
+            <Layers className="w-3.5 h-3.5" />
+            <span>디자인 블록 카탈로그</span>
+          </Link>
+          <span className="font-mono text-[10px] px-1.5 py-0.5 rounded-(--radius-sm) bg-(--bg-secondary) text-(--text-secondary) border border-(--border-subtle)">
+            {BLOCKS_COLLECTION.length}
+          </span>
+        </div>
+
+        <div className="relative">
+          <Search className="w-3.5 h-3.5 absolute left-2.5 top-1/2 -translate-y-1/2 text-(--text-secondary)" />
+          <input
+            type="text"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder="블록 검색..."
+            className="w-full text-xs pl-7 pr-2.5 py-1.5 rounded-(--radius-sm) bg-(--bg-secondary) text-(--text-primary) border border-(--border-subtle) focus:outline-none focus:border-(--border-strong) transition-colors"
+          />
+        </div>
+      </div>
+
+      {/* 2. Block List by Category */}
+      <div className="space-y-4 text-xs">
+        {BLOCK_CATEGORIES.filter((cat) => cat.id !== 'all').map((cat) => {
+          const categoryBlocks = filteredBlocks.filter((b) => b.category === cat.id);
+          if (categoryBlocks.length === 0) return null;
+
+          return (
+            <div key={cat.id} className="space-y-1">
+              <div className="text-[11px] font-mono font-medium text-(--text-secondary) uppercase tracking-wider px-2 py-0.5">
+                {cat.name}
+              </div>
+              <div className="space-y-0.5">
+                {categoryBlocks.map((block) => {
+                  const isActive = activeId === block.id;
+                  return (
+                    <Link
+                      key={block.id}
+                      href={`/blocks/${block.id}`}
+                      className={`w-full flex items-center justify-between px-2.5 py-1.5 rounded-(--radius-sm) text-xs transition-colors ${
+                        isActive
+                          ? 'bg-(--text-primary) text-(--bg-primary) font-medium'
+                          : 'text-(--text-secondary) hover:text-(--text-primary) hover:bg-(--bg-secondary)'
+                      }`}
+                    >
+                      <span className="truncate">{block.title}</span>
+                      <ChevronRight className={`w-3 h-3 shrink-0 ${isActive ? 'text-(--bg-primary)' : 'opacity-30'}`} />
+                    </Link>
+                  );
+                })}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </aside>
+  );
+}

package/components/blocks/CardListBlock.tsx

@@ -0,0 +1,214 @@
+'use client';
+
+import React, { useState } from 'react';
+import { Card, Button, Badge } from '@/components/ui';
+import {
+  LayoutGrid,
+  List as ListIcon,
+  Search,
+  Bookmark,
+  ArrowUpRight,
+  Palette,
+  Layers,
+  Shield,
+  Zap,
+} from 'lucide-react';
+
+interface CardItem {
+  id: string;
+  category: 'Foundation' | 'Component' | 'Pattern';
+  title: string;
+  description: string;
+  tag: string;
+  price: string;
+  icon: 'palette' | 'layers' | 'shield' | 'zap';
+}
+
+const INITIAL_CARDS: CardItem[] = [
+  {
+    id: 'c1',
+    category: 'Foundation',
+    title: '시맨틱 색상 & 다크모드 매트릭스',
+    description: 'W3C DTCG 표준 3단계 계층 구조를 준수하는 토큰 기반 컬러 시스템.',
+    tag: 'W3C 표준',
+    price: 'Free',
+    icon: 'palette',
+  },
+  {
+    id: 'c2',
+    category: 'Component',
+    title: '고접근성 인터랙티브 모달 & 드로어',
+    description: '포커스 트랩과 키보드 내비게이션을 보장하는 시맨틱 레이어 컴포넌트.',
+    tag: 'A11y AAA',
+    price: '$19',
+    icon: 'layers',
+  },
+  {
+    id: 'c3',
+    category: 'Pattern',
+    title: 'B2B 핀테크 인증 & 결제 승인 플로우',
+    description: '실시간 유효성 검증과 가맹점 수수료율 자동 산출 반응형 위젯.',
+    tag: 'Fintech UX',
+    price: '$39',
+    icon: 'shield',
+  },
+  {
+    id: 'c4',
+    category: 'Component',
+    title: '가변 폰트 & 타이포 스케일러',
+    description: 'Fluid 폰트 크기 및 행간을 토큰으로 제어하는 타이포그래피 블록.',
+    tag: 'Typography',
+    price: 'Free',
+    icon: 'zap',
+  },
+];
+
+export function CardListBlock() {
+  const [cards, setCards] = useState<CardItem[]>(INITIAL_CARDS);
+  const [selectedCategory, setSelectedCategory] = useState<string>('All');
+  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
+  const [searchQuery, setSearchQuery] = useState('');
+
+  const filteredCards = cards.filter((c) => {
+    const matchesCat = selectedCategory === 'All' || c.category === selectedCategory;
+    const matchesSearch =
+      c.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      c.description.toLowerCase().includes(searchQuery.toLowerCase());
+    return matchesCat && matchesSearch;
+  });
+
+  const getIcon = (type: CardItem['icon']) => {
+    switch (type) {
+      case 'palette':
+        return <Palette className="w-4 h-4 text-purple-500" />;
+      case 'layers':
+        return <Layers className="w-4 h-4 text-blue-500" />;
+      case 'shield':
+        return <Shield className="w-4 h-4 text-emerald-500" />;
+      case 'zap':
+        return <Zap className="w-4 h-4 text-amber-500" />;
+    }
+  };
+
+  return (
+    <Card className="overflow-hidden transition-colors">
+      {/* 1. Filter Toolbar composed with Button components */}
+      <div className="p-4 border-b border-(--border-subtle) bg-(--bg-secondary)/20 flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+        {/* Category Pills */}
+        <div className="flex items-center gap-1 overflow-x-auto scrollbar-none">
+          {['All', 'Foundation', 'Component', 'Pattern'].map((cat) => (
+            <Button
+              key={cat}
+              variant={selectedCategory === cat ? 'primary' : 'ghost'}
+              size="sm"
+              onClick={() => setSelectedCategory(cat)}
+              className="text-xs py-1 px-2.5 whitespace-nowrap"
+            >
+              {cat === 'All' ? '전체' : cat}
+            </Button>
+          ))}
+        </div>
+
+        {/* View mode & Search */}
+        <div className="flex items-center gap-2">
+          <div className="relative">
+            <Search className="w-3.5 h-3.5 absolute left-2.5 top-1/2 -translate-y-1/2 text-(--text-secondary)" />
+            <input
+              type="text"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              placeholder="카드 필터..."
+              className="text-xs pl-7 pr-2.5 py-1 rounded-(--radius-sm) bg-(--bg-secondary) text-(--text-primary) border border-(--border-subtle) focus:outline-none"
+            />
+          </div>
+
+          <div className="flex rounded-(--radius-sm) border border-(--border-subtle) p-0.5 bg-(--bg-secondary)">
+            <button
+              onClick={() => setViewMode('grid')}
+              aria-label="Grid"
+              className={`p-1 rounded-(--radius-sm) transition-colors ${
+                viewMode === 'grid' ? 'bg-(--bg-primary) text-(--text-primary) shadow-xs' : 'text-(--text-secondary)'
+              }`}
+            >
+              <LayoutGrid className="w-3.5 h-3.5" />
+            </button>
+            <button
+              onClick={() => setViewMode('list')}
+              aria-label="List"
+              className={`p-1 rounded-(--radius-sm) transition-colors ${
+                viewMode === 'list' ? 'bg-(--bg-primary) text-(--text-primary) shadow-xs' : 'text-(--text-secondary)'
+              }`}
+            >
+              <ListIcon className="w-3.5 h-3.5" />
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* 2. Cards Viewport composed with UI Card & Badge */}
+      <div className="p-4 sm:p-5">
+        {viewMode === 'grid' ? (
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3.5">
+            {filteredCards.map((c) => (
+              <Card
+                key={c.id}
+                interactive
+                className="p-4 flex flex-col justify-between"
+              >
+                <div>
+                  <div className="flex items-center justify-between mb-2.5">
+                    <div className="p-2 rounded-(--radius-sm) bg-(--bg-secondary) border border-(--border-subtle)">
+                      {getIcon(c.icon)}
+                    </div>
+                    <Badge variant="neutral" className="text-[11px]">
+                      {c.tag}
+                    </Badge>
+                  </div>
+                  <h4 className="font-semibold text-xs text-(--text-primary) line-clamp-1 mb-1">
+                    {c.title}
+                  </h4>
+                  <p className="text-xs text-(--text-secondary) line-clamp-2 leading-relaxed">
+                    {c.description}
+                  </p>
+                </div>
+
+                <div className="pt-3 border-t border-(--border-subtle) flex items-center justify-between mt-3 text-xs">
+                  <span className="font-semibold text-(--text-primary)">{c.price}</span>
+                  <button className="text-xs font-medium text-(--accent-primary) hover:underline flex items-center gap-0.5">
+                    <span>선택</span>
+                    <ArrowUpRight className="w-3 h-3" />
+                  </button>
+                </div>
+              </Card>
+            ))}
+          </div>
+        ) : (
+          <div className="space-y-2">
+            {filteredCards.map((c) => (
+              <Card
+                key={c.id}
+                className="p-3 px-4 flex items-center justify-between transition-colors gap-3"
+              >
+                <div className="flex items-center gap-3">
+                  <div className="p-1.5 rounded-(--radius-sm) bg-(--bg-secondary) border border-(--border-subtle)">
+                    {getIcon(c.icon)}
+                  </div>
+                  <div>
+                    <div className="font-semibold text-xs text-(--text-primary)">{c.title}</div>
+                    <div className="text-[11px] text-(--text-secondary) line-clamp-1">{c.description}</div>
+                  </div>
+                </div>
+                <div className="flex items-center gap-3 shrink-0 text-xs">
+                  <span className="font-semibold text-(--text-primary)">{c.price}</span>
+                  <Button variant="secondary" size="sm" className="text-xs py-1 px-2.5">
+                    상세보기
+                  </Button>
+                </div>
+              </Card>
+            ))}
+          </div>
+        )}
+      </div>
+    </Card>
+  );
+}