Skip to content

docs(example): Guide tutorial + Showcase hub + nav reorg + borderless card - #11

Merged
ajianaz merged 2 commits into
developfrom
feat/example-borderless-and-icon-catalog
Jul 27, 2026
Merged

docs(example): Guide tutorial + Showcase hub + nav reorg + borderless card#11
ajianaz merged 2 commits into
developfrom
feat/example-borderless-and-icon-catalog

Conversation

@ajianaz

@ajianaz ajianaz commented Jul 27, 2026

Copy link
Copy Markdown
Contributor

Three improvements to the example app: complete tutorial, cleaner navigation, and borderless card demos.

🧭 Navigation Reorg: 9 tabs → 6 logical tabs

Old (9 tabs, cluttered) New (6 tabs, learning path)
Gallery, Detail, Components, Form, Dashboard, Icons, Playground, Reference, Responsive Guide, Gallery, Showcase, Playground, Icons, Reference

New tab order follows the learning path:

  1. Guide (NEW) — start here
  2. Gallery — native widgets
  3. Showcase (NEW hub) — Detail/Components/Form/Dashboard via internal TabBar
  4. Playground — JSON editor
  5. Icons — catalog
  6. Reference — schema

📖 Guide Screen (NEW)

7-section tutorial with copy-paste code blocks (tap to copy):

  1. Native Widgets (hand-written usage)
  2. Dynamic UI (JSON-driven)
  3. Component Types (all UIType values + aliases)
  4. props vs style (the common gotcha — documented with example)
  5. list — Repeat Over Arrays (the key pattern)
  6. Icons — Any Source (name/code-point/SVG/PNG/URL)
  7. Clone-Ready Detail Page

🎨 Borderless Card Demos

  • Widget Gallery now demos: Default, Borderless, Gradient cards side-by-side
  • Playground "Halaman Detail" template uses props.borderless: true (correct convention)
  • detail_page_json.dart sample updated to match

✅ Quality

  • dart analyze example/lib = 0 errors / 0 warnings (16 info-level const hints)

ajianaz added 2 commits July 27, 2026 09:23
Widget Gallery — CofluiCard section now demos:
- Default (border + shadow)
- Borderless (borderless: true — flat, embeddable)
- Gradient (gradient: CofluiGradients.accent)

New 'Icons' nav tab — searchable catalog of the 111 Material icon names
supported by IconResolver. Tap any icon card → copies a ready-to-paste
JSON snippet ('{"type":"icon","props":{"icon":"<name>"}}')
to the clipboard. Paste into Playground to render instantly.
Navigation reorganized from 9 scattered tabs → 6 logical tabs by learning path:
1. Guide (NEW) — tutorials, JSON conventions, clone patterns
2. Gallery — native widget showcase (incl. borderless/gradient card demos)
3. Showcase (NEW) — hub for dynamic-UI demos (Detail/Components/Form/Dashboard)
   with internal TabBar
4. Playground — live JSON → UI editor
5. Icons — searchable catalog (tap to copy)
6. Reference — JSON schema reference

Guide screen: 7 sections with copy-paste code blocks covering native widgets,
dynamic UI, component types, props vs style convention, list/repeat, icons
(any source), and clone-ready detail page pattern.

Playground 'Halaman Detail' template + detail_page_json now use
props.borderless: true (fixes the gotcha where borderless was placed at
component top-level instead of inside props).
@github-actions

Copy link
Copy Markdown

🌐 Preview deployed: https://22b84331.coflui.pages.dev

@ajianaz
ajianaz merged commit b591748 into develop Jul 27, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant