Skip to content

feat(react-styled): build complete styled component library and styled example #38

Description

@alikhere

Overview

@storacha/console-toolkit-react-styled currently only provides authentication components. Partner developers need a complete set of pre-styled UI components matching the official Storacha console — so they can build a fully functional app by importing components and a single CSS file, with zero styling work required.

This epic covers building the full styled component library and a complete working example (examples/full-app-styled) that demonstrates the entire integration from login through space management, file uploads, and account settings.


Goal

Ship a styled component library covering the full Storacha console UI — layout shell, space management, file upload/sharing, and account settings. Each component wraps the existing headless @storacha/console-toolkit-react components and adds console-exact styling.

examples/full-app-styled is built incrementally alongside the components in each PR so that by the end of this epic it serves as a complete, working reference integration that any partner developer can copy from.


Design System

All components strictly follow the official Storacha console design system sourced from tailwind.config.ts and globals.css:


Example — examples/full-app-styled

The example is the primary proof that the library works end-to-end. It must:

  • Import everything exclusively from @storacha/console-toolkit-react-styled
    never from @storacha/console-toolkit-react or any other Storacha package directly
  • Import a single CSS file — @storacha/console-toolkit-react-styled/styles.css
    and require zero partner-written CSS
  • Stay minimal — example code shows component composition only, no custom logic
    or styling
  • Grow with each sub-issue PR until it covers the complete console experience:
    login → space list → upload files → view files → account settings

Acceptance Criteria

  • Partner developers can build a complete Storacha-integrated app by importing
    only from @storacha/console-toolkit-react-styled
  • All styles ship from a single CSS import — no partner-written CSS required
  • UI matches the official Storacha console exactly across all components
  • examples/full-app-styled is a complete, working reference app by end of epic
  • pnpm run ci passes on every sub-issue PR — no PR merges with broken lint,
    types, tests, or build

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