Packages for building web applications in the Status ecosystem. https://status-components.vercel.app

Go to file

Felicio Mununga 2fad1225b0 Merge (#632 ) (#634 )		2024-11-01 19:29:14 +01:00
.changeset	Merge (#632 ) (#634 )	2024-11-01 19:29:14 +01:00
.github/workflows	Merge (#632 ) (#634 )	2024-11-01 19:29:14 +01:00
.husky	Merge (#632 ) (#634 )	2024-11-01 19:29:14 +01:00
.vscode	Merge (#632 ) (#634 )	2024-11-01 19:29:14 +01:00
apps/connector	Merge (#632 ) (#634 )	2024-11-01 19:29:14 +01:00
packages	Merge (#632 ) (#634 )	2024-11-01 19:29:14 +01:00
patches	Merge (#632 ) (#634 )	2024-11-01 19:29:14 +01:00
.editorconfig	Add editorconfig	2022-02-25 14:56:28 +01:00
.eslintignore	2.0 (#523 )	2024-09-25 17:17:58 +02:00
.gitignore	2.0 (#523 )	2024-09-25 17:17:58 +02:00
.node-version	Merge (#632 ) (#634 )	2024-11-01 19:29:14 +01:00
.npmignore	Merge (#632 ) (#634 )	2024-11-01 19:29:14 +01:00
.npmrc	Merge (#632 ) (#634 )	2024-11-01 19:29:14 +01:00
.prettierignore	Merge (#632 ) (#634 )	2024-11-01 19:29:14 +01:00
.prettierrc	2.0 (#523 )	2024-09-25 17:17:58 +02:00
LICENSE.md	2.0 (#523 )	2024-09-25 17:17:58 +02:00
README.md	Merge (#632 ) (#634 )	2024-11-01 19:29:14 +01:00
package.json	Merge (#632 ) (#634 )	2024-11-01 19:29:14 +01:00
pnpm-lock.yaml	Merge (#632 ) (#634 )	2024-11-01 19:29:14 +01:00
pnpm-workspace.yaml	Merge (#632 ) (#634 )	2024-11-01 19:29:14 +01:00
tsconfig.base.json	2.0 (#523 )	2024-09-25 17:17:58 +02:00
turbo.json	2.0 (#523 )	2024-09-25 17:17:58 +02:00
vercel.json	Set up website deployment (#391 )	2023-05-12 15:06:04 +02:00

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:

Node.js v20.x
pnpm v9.12.x

Recommended:

Visual Studio Code
- install extensions listed in .vscode/extensions.json for optimal development experience

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.