# @contractspec/example.learning-journey-ui-gamified

Website: https://contractspec.io

**Duolingo-style gamified learning UI for drills and quests.**

## What This Demonstrates

- GamifiedMiniApp as a self-contained React application.
- FlashCard, DayCalendar, and MasteryRing components.
- Multi-view layout (Overview, Progress, Steps, Timeline).
- Integration with duo-drills and quest-challenges tracks.
- Design system and UI kit usage patterns.
- `src/docs/` contains docblocks and documentation-facing exports.

## Running Locally

From `packages/examples/learning-journey-ui-gamified`:
- `bun run dev`
- `bun run build`
- `bun run test`
- `bun run typecheck`

## Usage

Use `@contractspec/example.learning-journey-ui-gamified` as a reference implementation, or import its exported surfaces into a workspace that composes ContractSpec examples and bundles.

## Architecture

- `src/components/` contains reusable UI components and view composition.
- `src/docs/` contains docblocks and documentation-facing exports.
- `src/example.ts` is the runnable example entrypoint.
- `src/GamifiedMiniApp.tsx` is part of the package's public or composition surface.
- `src/index.ts` is the root public barrel and package entrypoint.
- `src/learning-journey-ui-gamified.feature.ts` defines a feature entrypoint.
- `src/views/` contains view-level composition.

## Public Entry Points

- Export `.` resolves through `./src/index.ts`.
- Export `./components` resolves through `./src/components/index.ts`.
- Export `./components/DayCalendar` resolves through `./src/components/DayCalendar.tsx`.
- Export `./components/FlashCard` resolves through `./src/components/FlashCard.tsx`.
- Export `./components/MasteryRing` resolves through `./src/components/MasteryRing.tsx`.
- Export `./docs` resolves through `./src/docs/index.ts`.
- Export `./docs/learning-journey-ui-gamified.docblock` resolves through `./src/docs/learning-journey-ui-gamified.docblock.ts`.
- Export `./example` resolves through `./src/example.ts`.
- Export `./GamifiedMiniApp` resolves through `./src/GamifiedMiniApp.tsx`.
- Export `./learning-journey-ui-gamified.feature` resolves through `./src/learning-journey-ui-gamified.feature.ts`.
- The package publishes 15 total export subpaths; keep docs aligned with `package.json`.

## Local Commands

- `bun run dev` — contractspec-bun-build dev
- `bun run build` — bun run prebuild && bun run build:bundle && bun run build:types
- `bun run test` — bun test --pass-with-no-tests
- `bun run lint` — bun lint:fix
- `bun run lint:check` — biome check .
- `bun run lint:fix` — biome check --write --unsafe --only=nursery/useSortedClasses . && biome check --write .
- `bun run typecheck` — tsc --noEmit
- `bun run publish:pkg` — bun publish --tolerate-republish --ignore-scripts --verbose
- `bun run publish:pkg:canary` — bun publish:pkg --tag canary
- `bun run clean` — rimraf dist .turbo
- `bun run build:bundle` — contractspec-bun-build transpile
- `bun run build:types` — contractspec-bun-build types
- `bun run prebuild` — contractspec-bun-build prebuild

## Recent Updates

- Replace eslint+prettier by biomejs to optimize speed.
- Missing contract layers.

## Notes

- Works alongside `@contractspec/example.learning-journey-duo-drills`, `@contractspec/example.learning-journey-quest-challenges`, `@contractspec/example.learning-journey-ui-shared`, `@contractspec/lib.contracts-spec`, `@contractspec/lib.design-system`, ...