status-im
/
status-web
mirror of https://github.com/status-im/status-web.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity
Packages for building web applications in the Status ecosystem. https://status-components.vercel.app
638 Commits 38 Branches 72 Tags 291 MiB
TypeScript 99.3%
JavaScript 0.5%
CSS 0.1%
Go to file
pavel edfdfd6dbc
2.0 (#523) 
* 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>
 		2024-09-25 17:17:58 +02:00
.changeset 2.0 (#523) 2024-09-25 17:17:58 +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 2.0 (#523) 2024-09-25 17:17:58 +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 2.0 (#523) 2024-09-25 17:17:58 +02:00

README.md

status-web

CI

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 npm version Component library built with Radix UI, React Aria, Tailwind CSS.
@status-im/js npm version Libary for Waku protocol integration and blockchain interactions.
@status-im/icons npm version Auto-generated icon library based on our design system.
@status-im/colors npm version 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

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.