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

docs(docu): update CONTRIBUTING.md

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/)
+* make use of the Daisy UI [theme colors](https://daisyui.com/docs/colors/)