diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index b6680505..2420dbbb 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -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/) \ No newline at end of file +* make use of the Daisy UI [theme colors](https://daisyui.com/docs/colors/)