Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hummingbot/hbui
The Hummingbot Design System
https://github.com/hummingbot/hbui
design hummimgbot system
Last synced: 14 days ago
JSON representation
The Hummingbot Design System
- Host: GitHub
- URL: https://github.com/hummingbot/hbui
- Owner: hummingbot
- License: mit
- Created: 2021-12-20T21:31:58.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2023-08-21T23:43:32.000Z (over 1 year ago)
- Last Synced: 2024-12-20T14:23:45.713Z (17 days ago)
- Topics: design, hummimgbot, system
- Language: JavaScript
- Homepage: https://hbui.netlify.app
- Size: 28.5 MB
- Stars: 16
- Watchers: 8
- Forks: 9
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## HBUI - The Hummingbot Design System
This repository holds the source code and documentation of the [HBUI Hummingbot Design System](https://hummingbot-ui.netlify.com/)
[Visit the documentation site](https://hummingbot-ui.netlify.com/)
### The flow
The original design of this design system lives in a [Figma document](https://www.figma.com/file/hf03Mn2cecwA1ioUxlHg9P/Hummingbot-Design-System-1.3). This package contains a custom script that extracts the design tokens from the Figma document (colors, fonts, spacings, breakpoints, shadows) and saves them in a `./hbui/tokens.js` file, which is then used to create a custom [TailwindCSS](https://tailwindcss.com/) configuration. This project also uses [twin.macro](https://github.com/ben-rogerson/twin.macro) to make use of TailwindCSS in a React-friendly manner. Finally, this project exports an [NPM module](https://www.npmjs.com/package/@hummingbot/hbui) that is in turn consumed by other projects.
### Use or try out the HBUI Hummingbot design system
To use the HBUI design system, all you need is the [HBUI NPM module](https://www.npmjs.com/package/@hummingbot/hbui). But we recommend you start from one of the HBUI boilerplate projects (below) where everything is already set up for you. We have four types of boilerplate projects available:
[Next.js](https://github.com/hummingbot/hbui-boilerplate-nextjs)
[Gatsby](https://github.com/hummingbot/hbui-boilerplate-gatsby)
[Webpack](https://github.com/hummingbot/hbui-boilerplate-webpack)
[Webpack (TypeScript)](https://github.com/hummingbot/hbui-boilerplate-webpack-ts)
These are ready-to-run apps with everything already configured and ready to go.
### Instructions to run this project
If you wish to run the HBUI documentation locally, simply clone and run this project:
```bash
// Clone the project
git clone [email protected]:CoinAlpha/hbui.git hbui
// cd into the folder
cd hbui
// Install the dependencies
yarn
// Start up
yarn develop
```
The project will run on http://localhost:8000/
Alternatively, run this command to enable opening the site in the local network (eg. in your phone)
```bash
yarn develop-m
```
### Instructions to perform updates to the NPM module
To perform updates to the NPM module, a local script connects to the Figma API (v1) and downloads the updated design tokens into the file `./hbui/tokens.js`. To set up, it is necessary to create an `.env` file with the Figma file ID and a Figma API access token.
These are the steps:
1/5: First, make sure the app is running without errors.
2/5: Get a Figma API access token
3/5: Create a file called `.env` at the root of the project with the following content (replace Figma API access token with your own):
```shell
FIGMA_API_TOKEN=your-access-token
FIGMA_FILE_ID=hf03Mn2cecwA1ioUxlHg9P
```
The FIGMA_FILE_ID in the code above is our original Figma file for the HBUI design system.
(If you are trying this outside Hummingbot and you want to create your own NPM module, you should make a copy of our Figma file to get started, grab the file ID from your copy and replace the FIGMA_FILE_ID in the code above. You will also have to change the module name, author etc in the file `./npm_module/package.json` in order to publish your own NPM module.)
4/5: You need to be logged into NPM as a user with authorization to make updates to the @hummingbot space (or your own space if you're building your own NPM module).
```shell
npm login
```
5/5: If all the above is done, you are ready to make updates. There are three types of updates available:
```shell
// patch update (-.-.+)
npm run publish_patch
// minor update (-.+.-)
npm run publish_minor
// major update (+.-.-)
npm run publish_major
```
Alternatively, use the following script variant to automatically git-commits the changes with a commit message that includes the new version number: "Update NPM module to X.X.X". Remember to push the changes to the appropriate branch / PR.
```shell
// patch update (-.-.+)
npm run publish_patch_and_commit
// minor update (-.+.-)
npm run publish_minor_and_commit
// major update (+.-.-)
npm run publish_major_and_commit
```
### To simply update the design tokens
If you just want to test the latest design tokens, setup an `.env` file like explained above, pull the tokens and test the app:
```shell
// pull the tokens
yarn pull-tokens
// test the app
yarn develop
```
### Relevant links to this project
[HBUI Hummingbot Design System](https://hummingbot-ui.netlify.com/) Documentation
HBUI [NPM module](https://www.npmjs.com/package/@hummingbot/hbui)
[Next.js](https://github.com/hummingbot/hbui-boilerplate-nextjs) HBUI Boilerplate
[Gatsby](https://github.com/hummingbot/hbui-boilerplate-gatsby) HBUI Boilerplate
[Webpack](https://github.com/hummingbot/hbui-boilerplate-webpack) HBUI Boilerplate
[Webpack (TypeScript)](https://github.com/hummingbot/hbui-boilerplate-webpack-ts) HBUI Boilerplate
### Useful references
[Next.js Documentation](https://nextjs.org/docs)
[Gatsby Documentation](https://www.gatsbyjs.com/docs/)
[TailwindCSS Documentation](https://tailwindcss.com/docs)
TailwindCSS for React: [twin.macro](https://github.com/ben-rogerson/twin.macro)
### Todo
- Make the build script compatible with Windows