FE-M0-04 · Components, icons, number formats and t()

ID FE-M0-04 · Level L0 · Run order row 24

Goal

The Opleet components, the icon registry, lib/format and lib/i18n are in apps/web, tested and typechecked; committed.

Before

FE-M0-03 is Done. You are on the branch web/design-system.

Run

1 · Lucide, pinned to the version the design system uses

pnpm --filter web add -E lucide-react@0.460.0

2 · Copy this step's files: twelve components, the icon registry, lib/format.ts with its test, and lib/i18n.ts. Then the test script; apps/web becomes an ES module package so Node runs the tests without a warning

cp -R ~/opleet-v2/packs/fe-pack-a/FE-M0-04/. .
pnpm --dir apps/web pkg set type=module scripts.test="node --test 'lib/**/*.test.ts'"

3 · Test, typecheck and lint

pnpm --filter web test
pnpm --filter web typecheck
pnpm lint

4 · Commit

git add -A apps/web pnpm-lock.yaml
git commit -m "feat(web): port the Opleet components and number formats"

Expect

• Block 1: “Packages: +1”, then “Done”.
• Block 3: “ℹ tests 4”, “ℹ pass 4” and “ℹ fail 0”; typecheck without errors; “No fixes applied.”
• Block 4: the commit line with 18 files changed.

Check

ls apps/web/components/opleet
grep lucide-react apps/web/package.json

Expect: Avatar, Badge, Button, DataTable, GlassCard, Icon, IconButton, Input, Logo, Select, StatCard and Toast (.tsx) and cx.ts; then "lucide-react": "0.460.0".

If it fails

• A format test fails: stop and paste it. Money formatting must be right before anything uses it.
• pnpm warns about a React peer range for lucide-react: harmless. An error is not: paste it.

Undo

git reset --hard
git clean -fd apps/web
pnpm install

Before the commit. After it: git reset --hard HEAD~1, then pnpm install.

Runs

Done 2026-10-06 (zuki)