Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/FuelLabs/fuel-ui
Fuel design system
https://github.com/FuelLabs/fuel-ui
Last synced: 8 days ago
JSON representation
Fuel design system
- Host: GitHub
- URL: https://github.com/FuelLabs/fuel-ui
- Owner: FuelLabs
- License: apache-2.0
- Created: 2022-05-01T01:05:44.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-06-11T05:27:41.000Z (5 months ago)
- Last Synced: 2024-08-01T21:59:31.450Z (4 months ago)
- Language: TypeScript
- Homepage: https://design.fuel.network
- Size: 9.2 MB
- Stars: 85
- Watchers: 19
- Forks: 30
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
⚡️ Fuel UI
[github-action-image]: https://github.com/fuellabs/fuel-ui/workflows/%E2%9C%85%20test/badge.svg
[github-action-url]: https://github.com/fuellabs/fuel-ui/actions?query=workflow%3A%22%E2%9C%85+test%22
[codecov-image]: https://img.shields.io/codecov/c/github/fuellabs/fuel-ui/master.svg?style=flat-square
[codecov-url]: https://codecov.io/gh/fuellabs/fuel-ui/branch/master
[](https://github.com/fuellabs/fuel-ui)
[](https://github.com/fuellabs/fuel-ui)
[](https://github.com/fuellabs/fuel-ui)
[](https://github.com/fuellabs/fuel-ui)
📝 Table of Content
- [🙋🏻 Getting Started](#-getting-started)
- [📦 Install](#-install)
- [🛠 Tools](#-tools)
- [💪🏻 Contributing](#-contributing)
- [📜 License](#-license)
---
## 🙋🏻 Getting Started
Inside this monorepo you'll find all UI related projects from some of our
projects and also packages that we're using to build them:
```
📦 fuel-ui // root
┣ 📂 .github // git related files
┣ 📂 .vscode // vscode settings
┃
┣ 📂 common // common packages used across monorepo
┃ ┗ 📂 config // project containing some monorepo tools configurations
┃ ┗ 📂 test-utils // package used for testing (patch on @testing-library/react)
┃
┣ 📂 design-system // design system related packages
┃ ┗ 📂 css // contain our theme/tokens definitions
┃ ┗ 📂 react // ui related react components
┃ ┗ 📂 tokens // ui tokens creation scripts (colors, fonts, spaces, themes...)
```
All this two folders (`common`, `design-system`) are configured using [PNPM workspaces](https://pnpm.io/workspaces).
## 📦 Install
1. Make sure you have the latest stable version of Node. Check out [Configuring Node and NVM to make sure](#configuring-node-and-nvm)
2. Clone the repository down locally.
3. `cd` into the project and run `pnpm install` to install all project dependencies.
4. Run `pnpm build` to build the peer dependencies
## 🛠 Tools
As you can see, we're using a monorepo structure inside this repository. To accomplish
a good dev workflow and be able to have good code patterns across all packages we have
some global tools installed:
| Name | Description |
| -------------------------------------------------------- | ------------------------------------ |
| **[PNPM](https://pnpm.io/)** | Package Manager |
| **[Turborepo](https://turborepo.org/)** | Monorepo management |
| **[TSUP](https://tsup.egoist.sh/)** | Build Typescript libs using ESbuild |
| **[ESLint](https://eslint.org/)** | Lint Javascript and Typescript files |
| **[Jest](https://jestjs.io/)** | Test runner |
| **[Testing Library](https://testing-library.com/)** | Testing library |
| **[Prettier](https://prettier.io/)** | Code formatting |
| **[Husky](https://typicode.github.io/husky/#/)** | Git hooks |
| **[Lint Staged](https://github.com/okonet/lint-staged)** | Git staged files linter |
If you're stucked with some issue or you don't know any of these tools,
we really encourage you to check their websites and read more about them inside the documentation
before open an issue or get in touch with some of our contributors.
## 💪🏻 Contributing
Feel like contributing? That's awesome! We have a [contributing guide](./CONTRIBUTING.md) to help guide you.
## 📜 License
The primary license for this repo is `Apache 2.0`, see [`LICENSE`](./LICENSE).