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> |
||
---|---|---|
.changeset | ||
.github/workflows | ||
.husky | ||
.vscode | ||
packages | ||
patches | ||
.editorconfig | ||
.eslintignore | ||
.gitignore | ||
.prettierrc | ||
LICENSE.md | ||
README.md | ||
package.json | ||
tsconfig.base.json | ||
turbo.json | ||
vercel.json | ||
yarn.lock |
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:
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:
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.
Sponsors
This project is sponsored by Browserstack.