Jason/design flow output1

[jasonmorais]

Summary by Sourcery

Introduce a shared Owner Community design system and theme provider, and apply it across the ui-community app, replacing legacy Ant Design theming and header layouts with new PublicShell, header, footer, and community table components.

New Features:

• Add OwnerCommunityProvider, theme tokens, CSS variables, and PublicShell layout to centralize light/dark theming and layout for Owner Community UIs.
• Introduce shared UI atoms and molecules such as OwnerCommunityLogo, ThemeToggle, AppHeader, AppFooter, UserInfoDescription, and CommunityTable with Storybook stories and tests.
• Add a new landing page shell and wiring so root and accounts routes use the shared PublicShell with theme-aware headers and routing.

Enhancements:

• Refactor theme-context to a simple mode/toggle API that syncs with new Owner Community theming while preserving legacy storage compatibility.
• Update ui-community app, accounts, and root routes to pass theme mode and toggle callbacks into shared layouts, and adjust Tailwind config and global fonts to align with the new design system.
• Replace bespoke community list and account header layouts with reusable CommunityTable and AppHeader components.
• Register new design, audit, and UI implementer agents plus related configuration to enforce design-system compliance.

Build:

• Expose theme CSS from ui-community-shared for consumers and extend Tailwind config with Owner Community tokens and fonts.
• Update workspace overrides for several dependencies to newer patch versions and add new overrides for protobuf and nanoid.

Documentation:

• Add a comprehensive DESIGN.md documenting the Owner Community design system, tokens, component roles, and Ant Design mapping.

Tests:

• Add unit tests and Storybook stories for new shared UI components and update existing stories to match new copy and structure.

[sourcery-ai]

Reviewer's Guide

Introduces a centralized Owner Community design system and theme provider, replaces legacy Ant Design-based theming with a token-driven light/dark mode pipeline, and refactors community and root routes to share a new PublicShell, header, footer, and CommunityTable components while wiring theme mode through the app shell.

Sequence diagram for theme toggle interaction across context and providers

sequenceDiagram
  actor User
  participant ThemeToggle
  participant AppHeader
  participant App
  participant ThemeContext
  participant OwnerCommunityProvider
  participant AntdTheme as getAntDesignTheme

  User->>ThemeToggle: click
  ThemeToggle->>AppHeader: onChange(checked)
  AppHeader->>App: onThemeChange(isDark)
  App->>ThemeContext: toggleTheme()
  ThemeContext->>ThemeContext: setMode(prevMode)
  ThemeContext->>OwnerCommunityProvider: rerender with mode
  OwnerCommunityProvider->>AntdTheme: getAntDesignTheme(mode)
  AntdTheme-->>OwnerCommunityProvider: ThemeConfig
  OwnerCommunityProvider-->>User: updated themed UI

Loading

File-Level Changes

Change	Details	Files
Replace bespoke Ant Design theme context with a simple mode-based ThemeContext that syncs to new OwnerCommunity theming.	Simplified ThemeContext to expose only mode and toggleTheme instead of token-level theming. Replaced localStorage theme persistence with a dedicated owner-community key while keeping legacy @cellix/ui-core theme storage in sync. Initialized mode from legacy stored theme when present and wired toggleTheme to flip between light and dark modes.	apps/ui-community/src/contexts/theme-context.tsx
Adopt shared OwnerCommunity design system, tokens, and theme provider across the UI community app.	Defined palette, light/dark theme tokens, and Ant Design ThemeConfig mapping for OwnerCommunity in a new tokens module. Added OwnerCommunityProvider wrapper that applies Ant Design ConfigProvider with the appropriate algorithm and exposes a data-owner-community-theme attribute for CSS variables. Updated main entrypoint to wrap App in OwnerCommunityProvider instead of AntD ConfigProvider and to load shared theme CSS and fonts, updating Tailwind config and base styles to use DM Sans/Outfit and design-system tokens.	packages/ocom/ui-community-shared/src/theme/tokens.ts packages/ocom/ui-community-shared/src/theme/owner-community-provider.tsx packages/ocom/ui-community-shared/src/theme/theme.css apps/ui-community/src/main.tsx apps/ui-community/tailwind.config.ts apps/ui-community/src/index.less apps/ui-community/index.html packages/ocom/ui-community-shared/package.json
Introduce reusable OwnerCommunity UI shell components (logo, theme toggle, header, footer, public shell) and wire them into root and accounts sections.	Implemented OwnerCommunityLogo SVG atom with theme-aware colors and exported it from the shared UI package. Implemented ThemeToggle atom using AntD Switch with sun/moon icons and tests/stories. Implemented AppHeader molecule that shows the logo, theme toggle, auth actions, and optional user avatar/name; added tests and stories. Implemented AppFooter molecule with token-based spacing and typography; added tests and stories. Implemented PublicShell organism that composes AppHeader, Content with max-width and token padding, and AppFooter; added tests and stories. Refactored accounts SectionLayout to use PublicShell, derive user info from OIDC context, and surface logout handling and theme mode props. Refactored root SectionLayout to use PublicShell, add login/sign-up handlers via OIDC, and render a new LandingPage instead of the old header/CMS stack. Exported all new components and types from the shared UI index for consumption by route packages.	packages/ocom/ui-community-shared/src/components/ui/atoms/owner-community-logo/index.tsx packages/ocom/ui-community-shared/src/components/ui/atoms/owner-community-logo/index.test.tsx packages/ocom/ui-community-shared/src/components/ui/atoms/owner-community-logo/index.stories.tsx packages/ocom/ui-community-shared/src/components/ui/atoms/theme-toggle/index.tsx packages/ocom/ui-community-shared/src/components/ui/atoms/theme-toggle/index.test.tsx packages/ocom/ui-community-shared/src/components/ui/atoms/theme-toggle/index.stories.tsx packages/ocom/ui-community-shared/src/components/ui/molecules/app-header/index.tsx packages/ocom/ui-community-shared/src/components/ui/molecules/app-header/index.test.tsx packages/ocom/ui-community-shared/src/components/ui/molecules/app-header/index.stories.tsx packages/ocom/ui-community-shared/src/components/ui/molecules/app-footer/index.tsx packages/ocom/ui-community-shared/src/components/ui/molecules/app-footer/index.test.tsx packages/ocom/ui-community-shared/src/components/ui/molecules/app-footer/index.stories.tsx packages/ocom/ui-community-shared/src/components/ui/organisms/public-shell/index.tsx packages/ocom/ui-community-shared/src/components/ui/organisms/public-shell/index.test.tsx packages/ocom/ui-community-shared/src/components/ui/organisms/public-shell/index.stories.tsx packages/ocom/ui-community-route-accounts/src/section-layout.tsx packages/ocom/ui-community-route-root/src/section-layout.tsx packages/ocom/ui-community-shared/src/index.tsx packages/ocom/ui-community-route-root/src/pages/landing-page.tsx packages/ocom/ui-community-route-root/src/pages/landing-page.stories.tsx
Refactor community accounts home and user info UI to use new shared components and semantic layout.	Replaced the ad-hoc SubPageLayout and H3 title in the accounts Home page with a semantic main element, updated title level, and wrapped user info in design-system spacing classes. Refactored UserInfo to render via UserInfoDescription molecule, updating stories/tests to assert on label/value instead of concatenated strings. Hooked the Accounts route entry to accept theme mode and onThemeChange props and pass them through to SectionLayout.	packages/ocom/ui-community-route-accounts/src/pages/home.tsx packages/ocom/ui-community-route-accounts/src/components/user-info.tsx packages/ocom/ui-community-route-accounts/src/components/user-info.stories.tsx packages/ocom/ui-community-route-accounts/src/accounts.tsx packages/ocom/ui-community-route-accounts/src/index.tsx packages/ocom/ui-community-shared/src/components/ui/molecules/user-info-description/index.tsx packages/ocom/ui-community-shared/src/components/ui/molecules/user-info-description/index.test.tsx packages/ocom/ui-community-shared/src/components/ui/molecules/user-info-description/index.stories.tsx
Extract a reusable CommunityTable organism and replace the legacy community list implementation with it.	Introduced CommunityTable organism in the shared UI package that renders communities with search/filtering, member/admin dropdowns, and a create community CTA using AntD Table and Typography, with Tailwind token classes and tests/stories. Refactored CommunityList in the accounts route to become a thin adapter that maps GraphQL fragments to CommunityTable props and wires navigation callbacks for member/admin portals and create-community navigation. Simplified search and filtering logic to live inside CommunityTable, removing local state and AntD-specific layout from the route component.	packages/ocom/ui-community-shared/src/components/ui/organisms/community-table/index.tsx packages/ocom/ui-community-shared/src/components/ui/organisms/community-table/index.test.tsx packages/ocom/ui-community-shared/src/components/ui/organisms/community-table/index.stories.tsx packages/ocom/ui-community-route-accounts/src/components/community-list.tsx
Wire theme mode through the app shell and routes so the public root and accounts sections stay in sync with the new theme toggle.	Updated App to read mode/toggleTheme from ThemeContext, derive an isDark flag, and pass mode/onThemeChange props into Root and Accounts route components. Ensured root and accounts SectionLayout components accept mode/onThemeChange and pass them into PublicShell, enabling ThemeToggle in the header to control the ThemeContext. Reordered routes so wildcard routing occurs last, preserving auth redirect and community routes.	apps/ui-community/src/App.tsx packages/ocom/ui-community-route-root/src/index.tsx packages/ocom/ui-community-route-accounts/src/accounts.tsx
Document and automate design audit workflows and agent orchestration for UI implementation.	Added a comprehensive Owner Community Design System specification (tokens, components, AntD mappings, audit rules) as DESIGN.md in the ui-community app. Introduced design-focused GitHub agents (orchestrator-design, design-audit, implementer-ui) with detailed instructions and capabilities for UI workflows. Registered new agents in the agents registry and added workflow enforcement hooks and browser config for design audits. Exported the theme CSS from the shared package and added assets (logos, audit SVGs, agent browser config) to support design and audit tooling.	apps/ui-community/DESIGN.md .github/agents/design-audit.md .github/agents/implementer-ui.agent.md .github/agents/orchestrator-design.md .github/agents/README.md .github/hooks/workflow-enforcement.json agent-browser.json packages/ocom/ui-community-shared/package.json .audit-assets/logo-dark.svg .audit-assets/logo-light.svg packages/ocom/ui-community-shared/src/assets/logo-dark.svg packages/ocom/ui-community-shared/src/assets/logo-light.svg
Update dependencies and pnpm overrides to support new tooling and address security/compatibility fixes.	Bumped brace-expansion, diff, fast-uri, nanoid, and @apollo/protobufjs versions in pnpm overrides for security and compatibility. Added pnpm-lock.yaml changes to lock in the new dependency graph.	pnpm-workspace.yaml pnpm-lock.yaml

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.