mirror of
https://github.com/utopia-os/utopia-ui.git
synced 2025-12-12 23:36:00 +00:00
72 lines
1.9 KiB
Markdown
72 lines
1.9 KiB
Markdown
# Contribution Guide
|
|
|
|
## Setup Dev Environment
|
|
|
|
**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.
|
|
|
|
### Setup `utopia-ui`
|
|
|
|
1. **Clone the `utopia-ui` repository:**
|
|
```bash
|
|
git clone https://github.com/utopia-os/utopia-ui.git
|
|
cd utopia-ui
|
|
```
|
|
|
|
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/)
|