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

Go to file

pavel 1ce026c526 add `<DropdownMenu.Label />` (#583 ) * add <DropdownMenu.Label /> * Create famous-maps-burn.md		2024-09-27 16:51:57 +02:00
.changeset	add `<DropdownMenu.Label />` (#583 )	2024-09-27 16:51:57 +02:00
.github/workflows	2.0 (#523 )	2024-09-25 17:17:58 +02:00
.husky	Add pre-commit git hooks (#229 )	2022-02-24 23:27:22 +01:00
.vscode	2.0 (#523 )	2024-09-25 17:17:58 +02:00
packages	add `<DropdownMenu.Label />` (#583 )	2024-09-27 16:51:57 +02:00
patches	handle larger messages (#531 )	2024-03-15 11:04:03 +09: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
.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	2.0 (#523 )	2024-09-25 17:17:58 +02:00
package.json	2.0 (#523 )	2024-09-25 17:17:58 +02: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
yarn.lock	add `<Switch />` and `<DropdownMenu.SwitchItem />` (#582 )	2024-09-27 16:51:28 +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.

Prerequisites

Required:

Node.js v18.x
Yarn v1.22.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:
```
yarn install
```
Build all packages:
```
yarn build
```
Run tests:
```
yarn test
```
Start development mode:
```
yarn dev
```

Storybook

To view and interact with the components, you can run Storybook:

yarn storybook

This will start the Storybook server, allowing you to browse and test components in isolation.