Skip to content

feat(react-styled): add ConsoleLayout component + full-app-styled example shell #39

@alikhere

Description

@alikhere

Overview

The @storacha/console-toolkit-react-styled package currently only provides authentication components. User (parnter app) building full applications have no pre-styled layout shell to work with, requiring them to implement their own sidebar and navigation from scratch.

What needs to be done

Add a ConsoleLayout styled component that replicates the official Storacha console sidebar layout, so partners can drop it
into their app and get the correct UI with zero CSS work.

Requirements

  • yellow sidebar matching the official console (#FFC83F background, #E91315 borders)
  • Compact space selector in the sidebar for switching between spaces
  • Footer links (Terms, Docs, Support, Log Out) pinned to the bottom of the sidebar
  • Main content area with the racha-fire-opacity-50.png fire background
  • Responsive — sidebar collapses on mobile with a hamburger menu and overlay
  • racha-fire.png and racha-fire-opacity-50.png assets bundled into the package
  • Space type re-exported from the styled package so partners never need to import from @storacha/ui-core directly
  • A minimal examples/full-app-styled app demonstrating auth → layout → space list, with all imports from
    @storacha/console-toolkit-react-styled only and zero partner-written CSS

Acceptance Criteria

  • Sidebar visually matches the official Storacha console
  • Mobile responsive with hamburger and overlay
  • All styles ship from @storacha/console-toolkit-react-styled/styles.css — no CSS required from the partner
  • pnpm run ci passes

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions