antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2025-12-13 07:46:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #79 from utopia-os/contribution-guide

Browse Source 
docs(docu): update CONTRIBUTING.md
This commit is contained in:
antontranelis 2025-01-28 20:56:29 +00:00 committed by GitHub
commit 456323c4dd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 62 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
CONTRIBUTING.md
View File

@ -1,15 +1,71 @@
# Contribution Guide
## Open ToDos
## Setup Dev Environment
[Kanban Board](https://github.com/orgs/utopia-os/projects/2/)
**Utopia UI** is just a React component library. To run it locally while making changes to it, you need to link it to a React app that uses its components. For this purpose, it is recommended to clone the `utopia-map` repository and link `utopia-ui` inside of it. This guide explains how to set everything up.
## Code
### Setup `utopia-ui`
* use named exports
1. **Clone the `utopia-ui` repository:**
```bash
git clone https://github.com/utopia-os/utopia-ui.git
cd utopia-ui
```
## Layout
2. **Install dependencies:**
```bash
npm install
```
3. **Build `utopia-ui`:**
Run the build script to prepare `utopia-ui` for use:
```bash
npm run build
```
4. **Link `utopia-ui` globally:**
This makes the local version of `utopia-ui` available to be linked into other projects:
```bash
npm link
```
### 2. Setup `utopia-map` and Link `utopia-ui`
1. **Clone the `utopia-map` repository:**
```bash
git clone https://github.com/utopia-os/utopia-map.git
cd utopia-map
```
2. **Install dependencies:**
```bash
npm install
```
3. **Link `utopia-ui` into `utopia-map`:**
Use `npm link` to connect your local `utopia-ui` instance to `utopia-map`:
```bash
npm link utopia-ui
```
4. **Start the development environment:**
Run the local development environment for `utopia-map` to test changes in `utopia-ui`:
```bash
npm run dev
```
### 3. Developing and Testing Changes
While working on `utopia-ui`, any changes you make need to be reflected in `utopia-map`. To ensure this `utopia-ui` has a watcher script, run it to
automatically rebuild when files change:
```bash
npm start
```
## Layout System
* use [heroicons](https://heroicons.com/) or alternatively [React Icons](https://react-icons.github.io/react-icons/)
* use [Daisy UI](https://daisyui.com/) with [tailwindcss](https://tailwindcss.com/)
* make use of the Daisy UI [theme colors](https://daisyui.com/docs/colors/)
* make use of the Daisy UI [theme colors](https://daisyui.com/docs/colors/)