ReviewOS

stacks/stx

Ship the iOS building blocks as components: a grouped settings list, an onboarding flow, a chat

#2066
Closed glennmichael123 opened this 9 days ago ·
9 days ago

From Chris (hq.training), twice in the same session:

and tbh, that whole settings page/components should be part of our stx components. It's a useful abstraction for building iOS like apps, one that we will use everywhere ourselves too)

please abstract the onboarding into stx components too

The settings list. hq.training built Apple's grouped-list vocabulary by hand — resources/functions/apple-ui.ts holds the ui.* class bundles (group, row, header, footer, separator, iconTile, chevron, destructive) and tile.* for the rounded colour tiles beside each row, and resources/native/Me.stx assembles them. It is the shape every iOS settings screen has: grouped sections, a header above and a footer below each, a tinted glyph, a label, an optional badge, a chevron, and a destructive row at the bottom. Nothing about it is specific to a training app, and every Stacks app that wants to look native needs exactly it.

The onboarding flow. hq.training's first-run tour (resources/components/Onboarding.stx, resources/functions/onboarding.ts) is a sequence of pages with progress, skip, resume-where-you-left-off, question pages that record answers, a consent step, and a summary that claims what was set up. Also general: the parts that differ between apps are the pages and the questions, not the machinery.

Both are being maintained inside one app today, which is the wrong place for them.

What the components owe their users, on the evidence of how these two are used:

  • grouped list: sections with header and footer text, rows with a leading tile, badge and chevron, separators that inset past the tile, a destructive variant, and a press state — in light and dark, and respecting the platform's own metrics
  • onboarding: ordered pages, progress, skip, persisted position, answers recorded as it goes, a consent step with a real "I don't agree", and a completion hook
  • both should work in a web document and in a native screen, which is #2065

One open question I could not resolve. Chris also wrote, directly after the settings message:

And in chat we have a coach/gym/ai mode

Please do that too^

The ^ points back at the settings-components message, so this most likely means the chat and its mode switch should be a component too. But hq.training's messages store has no coach/gym/ai mode in it today, so he may instead be describing something to build. Worth asking him before anyone starts on it.

9 days ago

Audited against current main: this is already shipped. The reusable phone component set includes grouped settings building blocks (SectionCard, ListRow, NavBar, TabBar), onboarding/pager components (Pager and PagerDots), and the native/browser chat components (ChatInbox and related controls). Verified with the maintained Pager, chat, mobile-link, and component suites: 82 tests passed, 0 failed. Closing as completed.

Sign in to comment on this issue.