fdff541a2a | ||
---|---|---|
.changeset | ||
.github/workflows | ||
.husky | ||
.vscode | ||
apps/connector | ||
packages | ||
patches | ||
.editorconfig | ||
.gitignore | ||
.node-version | ||
.npmignore | ||
.npmrc | ||
.prettierignore | ||
.prettierrc | ||
LICENSE.md | ||
README.md | ||
eslint.config.mjs | ||
package.json | ||
pnpm-lock.yaml | ||
pnpm-workspace.yaml | ||
tsconfig.base.json | ||
turbo.json | ||
vercel.json |
README.md
status-web
This monorepo contains packages for building web applications in the Status ecosystem. These packages can be used separately or combined to create consistent and beautiful user interfaces.
Packages
Name | npm |
Description |
---|---|---|
@status-im/components |
Component library built with Radix UI, React Aria, Tailwind CSS. | |
@status-im/js |
Libary for Waku protocol integration and blockchain interactions. | |
@status-im/icons |
Auto-generated icon library based on our design system. | |
@status-im/colors |
Auto-generated color palette based on our design system. | |
@status-im/eslint-config |
Shared ESLint configuration for consistent code style across projects. |
Apps
Name | Description |
---|---|
./apps/connector |
Status Desktop Wallet extended to decentralised applications in your browser. |
Prerequisites
Required:
Recommended:
- Visual Studio Code
- install extensions listed in
.vscode/extensions.json
for optimal development experience
- install extensions listed in
Stack
- Turborepo: Manages our monorepo and speeds up builds
- TypeScript: Adds type safety to our code
- React: Our main library for building UIs
- Radix UI / React Aria: Provides accessible UI primitives
- Tailwind CSS: Used for styling
- Vite: Our build tool and dev server
- Storybook: For developing and showcasing components
- ESLint: Keeps our code consistent and catches potential issues
- Prettier: Formats our code
- Changesets: Manages versioning and changelogs
Getting Started
-
Clone the repository:
git clone https://github.com/status-im/status-web.git cd status-web
-
Install dependencies:
pnpm install
-
Build all packages:
pnpm build
-
Run tests:
pnpm test
-
Start development mode:
pnpm dev
Storybook
To view and interact with the components, you can run Storybook:
pnpm storybook
This will start the Storybook server, allowing you to browse and test components in isolation.
Sponsors
This project is sponsored by Browserstack.