mirror of
https://github.com/status-im/dappconnect-chat-sdk.git
synced 2025-01-29 15:46:13 +00:00
edfdfd6dbc
* set up tailwind * add typography tokens * add shadows tokens * add border radius tokens * add react-aria * update tailwind config * update tokens * fix deps * add blur variant * update tw config * upgrade storybook * update storybook config * add inter * wip button * wip input * wip tabs * update typography tokens * u storybook * add types to src root * update storybook config * add sb type * u storybook * add icon button * add input * add checkbox * add counter * update checkbox * add dropdown * update button * f storybook types * u deps * update base config * update icon imports * add text * update colors build output * fix import * update colors format * add .vsode setting * update components buidl * mv * u button * add popover * u * add types * u shortcut * fix icons attributes * f * mv * u * add toast * update tw formatting * rm apps * rm examples * rm tamagui * dist tailwind config * rm more * stricter tsconfig * add source field * remove tokens * rm tamagui files * add prettier config to components * u text props * add tooltip * u toast * do not pass props * u icon buton * u dropdown button * add icon only to button * u type * checkbox * wip * fix build * fix components build * u tooltip * add theme * add input * u checkbox * update dropdown-button * add dropdown menu * move input to be reviewew * u dropdown button * u * u popover * u tabs * mv IconComponent -> IconElement * u tag * u context tag * u * fix context tag story * add provider * u button * u avatar * f avatar * a opacity to avatar * f prettier * f avatar * f * f * rm old setting * fix button props * skeleton wip * rm config * a dropdown submenu * add blur variant * add step * add step to tabs * add blur to context tag * u * add 80 to community * u tw config * add type * u checkbox * fix dropdown menu checkbox item * u button * unify content * customize color globally * add icons stories * add colors story * rm * u * rm dep * cleanup * u tsconfig * f opacity for emoji * remove "web#build" task from turbo.json * f dropdown menu * u tw export * add license * add changeset * update readme * f steps * f tag * f button * udpate colors format * update customisation color tailwind config * fix opacity * add shadow dark mode * u readme * u --------- Co-authored-by: Jakub Kotula <520927+jkbktl@users.noreply.github.com> Co-authored-by: Felicio Mununga <felicio@users.noreply.github.com>
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.
|