storybook github

project logs

nhật ký dự án 1thay design system. mọi quyết định, thay đổi, bài học, và kế hoạch đều được ghi lại ở đây.

decision log

mỗi quyết định thiết kế được ghi theo format:

ngày | lĩnh vực | quyết định | lý do

2026-05-27 — khởi tạo dự án

# lĩnh vực quyết định lý do
1 naming đặt tên "1thay" từ "trăm nghe không bằng một thấy" — visual-first
2 format dùng chuẩn google design.md machine-readable + human-readable, có cli tool
3 font display hanken grotesk hiện đại, geometric, đọc tốt ở size lớn
4 font text inter tối ưu cho màn hình, hỗ trợ tiếng việt tốt
5 font content merriweather serif dễ đọc cho bài dài, kết hợp tốt với inter
6 font number space grotesk mono feel nhưng mềm hơn, phù hợp dashboard
7 grid bento grid module chữ nhật, nhất quán radius, linh hoạt
8 writing lowercase giảm noise thị giác, tập trung vào nội dung
9 brand a blue-reputa từ #064BAE xanh đậm chuyên nghiệp, contrast tốt
10 brand b red-premier từ #A10B2E đỏ đậm sang trọng, khác biệt rõ với blue
11 surface neutral-gray palette trung tính, không cạnh tranh với brand color
12 tech stack astro + storybook + cloudflare astro cho site tĩnh/nhẹ, storybook cho component dev, cloudflare cho deploy

changelog

2026-05-27

added

  • tạo 4 file nền tảng: 1thay.md, design.md, design-tokens.md, project-logs.md
  • brand palette blue-reputa (5 mức từ #064BAE)
  • brand palette red-premier (5 mức từ #A10B2E)
  • neutral-gray palette (11 mức từ #ffffff → #020617)
  • semantic colors: success, warning, error, info
  • surface & text reference tokens
  • border tokens
  • typography scale: 4 font families, 14 type sizes
  • spacing scale: 7 mức (4→64)
  • border radius scale: 6 mức (2px→full)
  • opacity tokens: disabled, overlay, hover, pressed, invisible
  • shadow tokens: 5 mức elevation
  • size tokens: icon (4 mức), input/button height (3 mức)
  • stacking/z-index tokens: 7 mức
  • component tokens: button, card, input, table

2026-05-27 (pm)

added

  • khởi tạo git repo & push lên github
  • cài đặt astro 5 + react integration
  • cài đặt storybook 8 + react-vite
  • cấu trúc dự án: src/tokens/, src/components/, src/layouts/, src/pages/, src/styles/
  • tokens.css — css custom properties (single source of truth)
  • tokens.js — js token export cho storybook theme
  • .storybook/main.ts, preview.ts, manager.ts — storybook config
  • storybook manager themed với 1thay tokens (dogfooding)
  • Button component với 4 variants (primary, secondary, ghost, destructive) + 3 sizes
  • BaseLayout.astro — layout gốc với google fonts
  • landing page / — demo button, tokens, typography, brands
  • astro build → dist/ & storybook build → dist-storybook/ đều pass
  • deploy cloudflare pages: 1thay-com.pages.dev (astro) & 1thay-design.pages.dev (storybook)

2026-05-27 (pm2)

added

  • DocsLayout.astro — layout với sidebar navigation (foundations / components / patterns)
  • foundations section: colors page (brand palettes, neutral-gray, semantic colors), typography page (4 fonts, type scale, weights), spacing page (spacing, radius, shadows, opacity, z-index, sizes)
  • home page redesign thành documentation hub
  • Card component: 4 variants (default, flat, raised, bordered) + clickable
  • Input component: 3 sizes + invalid state + typing interaction test
  • storybook: card stories (5) + input stories (6)

verified

  • astro build pass (5 pages, 3.2s)
  • storybook build pass (button + card + input stories, 12s)

2026-05-27 (pm3) — figma

added

  • tạo figma file sạch: 1thay (OAinJNCk0DZ1p1R1xyPfvx)
  • 8 variable collections = 76 tokens: Primitives (22), Color (16, Light/Dark), Spacing (7), Radius (6), Size (10), Opacity (4), Z-Index (7), Typography (4)
  • 12 text styles + 4 effect styles
  • cover page với brand swatches + publish instructions
  • figma là single source of truth cho design tokens

2026-05-27 (pm4) — figma token sync + component enhancement

changed

  • sync tokens.css và tokens.js khớp với figma text styles:
    • text-hero: line-height 1.1 → 1.3
    • text-h2: weight 600 → 700
    • text-h3: weight 600 → 700
    • text-body: line-height 1.6 → 1.625
    • text-ui: line-height 1.4 → 1.43
    • text-ui-sm: line-height 1.3 → 1.33
    • text-number-lg: weight 600 → 700
  • thêm figma source reference vào tokens.css và tokens.js
  • thêm component-level tokens: --btn-*, --card-*, --input-*

added

  • button: loading state (spinner animation), icon/iconRight props
  • card: Card.Header, Card.Body, Card.Footer sub-components, padding prop (sm/md/lg)
  • input: label, helperText props, aria-describedby support
  • wrangler.storybook.toml — config deploy storybook lên design.1thay.com
  • components pages trên astro: /components/button, /components/card, /components/input
  • Examples.stories.tsx — 6 story compositions thể hiện real-world usage:
    • dashboard · metric cards (4 cards grid với number-lg tokens)
    • auth · login form (card + input email/password + button)
    • settings · profile edit (form layout + danger zone)
    • data · search + filter (search bar + result rows)
    • pattern · empty state (icon + message + CTA)
    • test · login flow (interaction test với userEvent)

verified

  • figma file structure đã map khớp với code tokens
  • astro build pass (9 pages)
  • storybook build pass (button + card + input với stories mới)

2026-05-27 (pm5) — project reference files

added

  • astro.md — astro site structure, layouts, page conventions, deploy config, cross-references
  • storybook.md — component inventory, anatomy, story conventions, interaction testing, cross-references
  • figma.md — file info, variable collections, text/effect styles, naming conventions, sync workflow, code sync map
  • cross-reference system: all files link to each other (file.md format)
  • updated 1thay.md + CLAUDE.md with new references

synced

  • figma → code sync map documented in figma.md
  • storybook + astro configs documented with deploy settings

self-review

chu kỳ review

mỗi lần thay đổi token hoặc component:

  1. chạy design lint để kiểm tra design.md
  2. kiểm tra visual regression (so sánh screenshot)
  3. ghi nhận vấn đề phát hiện được vào đây
  4. sửa và verify lại

danh sách kiểm tra định kỳ

  • tất cả token trong design-tokens.md có mặt trong design.md front matter không?
  • có token nào bị hardcode trong component mà chưa được định nghĩa không?
  • contrast ratio của tất cả cặp màu text/background có đạt wcag aa không?
  • typography scale có bị thiếu size nào cần dùng không?
  • spacing scale có nhất quán (bội số của 4) không?

phát hiện & sửa

(chưa có — sẽ cập nhật sau lần audit đầu tiên)

lessons learned

(chưa có — sẽ cập nhật trong quá trình build và sử dụng)

roadmap

đã xong

  • 4 file nền tảng (1thay.md, design.md, design-tokens.md, project-logs.md)
  • brand palettes: blue-reputa, red-premier
  • neutral-gray palette
  • typography system (4 font families)
  • spacing, radius, border, opacity, shadow, size, z-index tokens
  • semantic & component token mapping

tiếp theo

  • khởi tạo git repo & push lên github
  • cài đặt astro + storybook
  • tạo cấu trúc thư mục dự án
  • export tokens sang css custom properties
  • build landing page mẫu với astro
  • build component đầu tiên trong storybook (button)
  • deploy lên cloudflare pages
  • foundations documentation pages (colors, typography, spacing)
  • card + input components
  • kết nối figma → design token sync
  • components documentation pages trên astro
  • build thêm components: badge, toast, icon
  • patterns section (signup, layout, navigation, data-visualize)
  • storybook upgrade 8→10 + a11y + figma embed
  • figma code connect manifest + CI token drift check

tương lai

  • dashboard template
  • documentation site
  • prototype playground
  • automatic visual regression testing
  • figma plugin cho token sync 2 chiều
  • thêm brand template (green, purple, orange)