87 lines
4.2 KiB
Markdown
87 lines
4.2 KiB
Markdown
# `status-web`
|
|
|
|
[](https://github.com/status-im/status-web/actions/workflows/ci.yml)
|
|
|
|
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`](./packages/components) | [](https://www.npmjs.com/package/@status-im/components) | Component library built with Radix UI, React Aria, Tailwind CSS. |
|
|
| [`@status-im/js`](./packages/status-js) | [](https://www.npmjs.com/package/@status-im/js) | Libary for Waku protocol integration and blockchain interactions. |
|
|
| [`@status-im/icons`](./packages/icons) | [](https://www.npmjs.com/package/@status-im/icons) | Auto-generated icon library based on our [design system](https://www.figma.com/design/qLLuMLfpGxK9OfpIavwsmK/Iconset?node-id=3239-987&node-type=frame&t=0h8iIiZ3Sf0g4MRV-11). |
|
|
| [`@status-im/colors`](./packages/colors) | [](https://www.npmjs.com/package/@status-im/colors) | Auto-generated color palette based on our [design system](https://www.figma.com/design/v98g9ZiaSHYUdKWrbFg9eM/Foundations?node-id=619-5995&node-type=canvas&m=dev). |
|
|
| [`@status-im/eslint-config`](./packages/eslint-config) | | Shared ESLint configuration for consistent code style across projects. |
|
|
|
|
## Prerequisites
|
|
|
|
Required:
|
|
|
|
- **[Node.js](https://nodejs.org/)** v18.x
|
|
- **[Yarn](https://yarnpkg.com/)** v1.22.x
|
|
|
|
Recommended:
|
|
|
|
- **[Visual Studio Code](https://code.visualstudio.com/)**
|
|
- 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
|
|
|
|
1. Clone the repository:
|
|
|
|
```
|
|
git clone https://github.com/status-im/status-web.git
|
|
cd status-web
|
|
```
|
|
|
|
2. Install dependencies:
|
|
|
|
```
|
|
yarn install
|
|
```
|
|
|
|
3. Build all packages:
|
|
|
|
```
|
|
yarn build
|
|
```
|
|
|
|
4. Run tests:
|
|
|
|
```
|
|
yarn test
|
|
```
|
|
|
|
5. 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.
|
|
|
|
## Sponsors
|
|
|
|
This project is sponsored by Browserstack.
|