futsuno-ui 0.1.0

package/README.md

@@ -0,0 +1,199 @@
+# Futsuno UI Design System
+
+ふつうのショップ（[futsuno.shop](https://futsuno.shop/)）のD2Cブランド向けデザインシステム。
+
+## 概要
+
+このデザインシステムは、ecforceのテーマ管理とLP管理に対応するReactコンポーネントライブラリです。Figma Makeとの連携を想定して設計されており、Atomic Design方法論に基づいて構成されています。
+
+## インストール
+
+```bash
+npm install futsuno-ui
+# or
+pnpm add futsuno-ui
+# or
+yarn add futsuno-ui
+```
+
+## 使用方法
+
+### デザイントークン
+
+```tsx
+import { colors, typography, spacing } from 'futsuno-ui/tokens';
+
+// カラートークンの使用
+console.log(colors.accent.gold); // #978E5F
+```
+
+### LP用コンポーネント
+
+```tsx
+import { 
+  // Atoms
+  Button, 
+  Text,
+  Image,
+  // Molecules
+  UserVoice,
+  FaqParts,
+  // Organisms
+  KeyVisual, 
+  Cta,
+  Faq,
+  // Templates
+  ProductLpTemplate
+} from 'futsuno-ui/lp';
+
+function LandingPage() {
+  return (
+    <ProductLpTemplate
+      keyVisual={{
+        copyLines: ['食卓を特別な時間に', '600年の歴史を持つ調味料'],
+        backgroundImage: '/images/hero.jpg',
+      }}
+      cta={{
+        productName: '煎り酒',
+        productPrice: '¥1,700',
+        buttonText: '購入する',
+      }}
+      faqItems={[
+        { question: '賞味期限は？', answer: '製造日より1年間です。' }
+      ]}
+    />
+  );
+}
+```
+
+### Theme用コンポーネント（将来実装）
+
+```tsx
+import { Header, Footer } from 'futsuno-ui/theme';
+```
+
+## ディレクトリ構成（Atomic Design）
+
+```
+src/lp/
+├── atoms/           # 原子 - 基本要素
+│   ├── Button/      # Button, AnchorButton
+│   ├── Icon/        # Icon
+│   ├── Image/       # Image, ProductImage
+│   └── Text/        # Text
+│
+├── molecules/       # 分子 - 原子の組み合わせ
+│   ├── UserVoice/   # ユーザーレビュー
+│   └── FaqParts/    # FAQ個別アイテム
+│
+├── organisms/       # 有機体 - 複合コンポーネント
+│   ├── KeyVisual/   # メインビジュアル
+│   ├── Section/     # 汎用セクション
+│   ├── Spec/        # 商品スペック
+│   ├── Cta/         # CTA（購入導線）
+│   ├── Faq/         # FAQセクション
+│   └── Blank/       # 空白セクション
+│
+└── templates/       # テンプレート - ページレイアウト
+    ├── LpTemplate/          # 基本LPテンプレート
+    └── ProductLpTemplate/   # 商品LP用テンプレート
+```
+
+## デザイントークン
+
+### Colors
+
+| トークン | カラーコード | 用途 |
+|---------|-------------|------|
+| `black` | #040404 | テキスト、背景 |
+| `white` | #FFFFFF | 背景、テキスト |
+| `gray.900` | #464646 | ボタン、テキスト |
+| `gray.400` | #BDC1C2 | ボーダー |
+| `gray.200` | #E5E6E6 | 背景 |
+| `background.gray` | #F2F3F1 | セクション背景 |
+| `accent.gold` | #978E5F | アクセント、バッジ |
+| `accent.blue` | #457D99 | アクセント |
+| `accent.red` | #CC5E58 | CTA、強調 |
+
+### Typography
+
+- **Font**: Noto Sans JP (Medium/Bold)
+- **H1**: 24px / line-height 1.55 / letter-spacing 16%
+- **H2**: 22px / line-height 1.55 / letter-spacing 16%
+- **H3**: 20px / line-height 1.35 / letter-spacing 16%
+- **H4**: 18px / line-height 1.45 / letter-spacing 16%
+- **Body**: 16px, 15px, 13px
+- **Caption**: 12px, 11px, 10px, 8px
+
+### Spacing
+
+4, 8, 12, 16, 24, 32, 40, 48px
+
+## コンポーネント一覧
+
+### Atoms（原子）
+
+| コンポーネント | 説明 |
+|--------------|------|
+| `Button` | 購入ボタン（black/red/gold/white variants） |
+| `AnchorButton` | ページ内リンクボタン |
+| `Image` | 画像（1:1, 4:3 アスペクト比） |
+| `ProductImage` | 商品画像 |
+| `Icon` | アイコン |
+| `Text` | テキスト・タイトル |
+
+### Molecules（分子）
+
+| コンポーネント | 説明 |
+|--------------|------|
+| `UserVoice` | ユーザーレビュー・評価 |
+| `FaqParts` | FAQ個別アイテム（アコーディオン） |
+
+### Organisms（有機体）
+
+| コンポーネント | 説明 |
+|--------------|------|
+| `KeyVisual` | メインビジュアル（MV） |
+| `Section` | 汎用セクション |
+| `Spec` | 商品スペック |
+| `Cta` | CTA（購入導線） |
+| `Faq` | FAQセクション |
+| `Blank` | 空白セクション |
+
+### Templates（テンプレート）
+
+| コンポーネント | 説明 |
+|--------------|------|
+| `LpTemplate` | 基本LPレイアウト |
+| `ProductLpTemplate` | 商品LP用テンプレート |
+
+## 開発
+
+```bash
+# 依存関係のインストール
+npm install
+
+# 開発モード（watchモード）
+npm run dev
+
+# ビルド
+npm run build
+
+# 型チェック
+npm run typecheck
+```
+
+## Figma連携
+
+このデザインシステムはFigma Makeとの連携を想定しています。Figmaファイルとの対応関係：
+
+| Figma | Design System |
+|-------|---------------|
+| Tokens | `futsuno-ui/tokens` |
+| Atoms | `lp/atoms` |
+| Molecules + Organisms (Blocks) | `lp/molecules` + `lp/organisms` |
+| Templates | `lp/templates` |
+
+## ライセンス
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+export { Colors, Spacing, SpacingKey, Typography, TypographyKey, borderRadius, boxShadow, colorPalette, colors, fontFamily, fontWeight, spacing, spacingValues, tokens, typography } from './tokens/index.js';
+export { AnchorButton, AnchorButtonProps, Badge, Blank, BlankBackground, BlankProps, BlankSize, Button, ButtonProps, ButtonSize, ButtonVariant, Cta, CtaProps, Faq, FaqItem, FaqParts, FaqPartsProps, FaqProps, Icon, IconName, IconProps, Image, ImageAspectRatio, ImageProps, KeyVisual, KeyVisualProps, LpSection, LpTemplate, LpTemplateProps, ProductImage, ProductImageProps, ProductLpTemplate, ProductLpTemplateProps, ProductOption, Section, SectionBackground, SectionProps, Spec, SpecItem, SpecProps, Text, TextAlign, TextColor, TextProps, TextVariant, UserVoice, UserVoiceProps } from './lp/index.js';
+export { themeVersion } from './theme/index.js';
+import { ClassValue } from 'clsx';
+import 'react';
+
+/**
+ * Utility function to merge Tailwind CSS classes
+ * Combines clsx and tailwind-merge for optimal class handling
+ */
+declare function cn(...inputs: ClassValue[]): string;
+
+export { cn };