From c35faf16c21bea68c7fc737d2f0ffc31db634012 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Alexander=20R=C3=B6sel?= <320272+Traxmaxx@users.noreply.github.com> Date: Mon, 16 Oct 2023 19:08:27 +0200 Subject: [PATCH] fix: adress review comments --- dashboard/README.md | 41 ++++++++++++++++++++++++++--------------- 1 file changed, 26 insertions(+), 15 deletions(-) diff --git a/dashboard/README.md b/dashboard/README.md index 7442804d5..0c43f547b 100644 --- a/dashboard/README.md +++ b/dashboard/README.md @@ -15,28 +15,39 @@ Komiser dashboard is a [Next.js](https://nextjs.org/) project bootstrapped with Follow the [Contribution Guide](https://github.com/tailwarden/komiser/blob/develop/CONTRIBUTING.md#contributing-to-komiser-dashboard-ui) first if you haven't done so already. Then come back here and follow the next steps: -1. Run the development server: +#### 1. Run the development server: +From the Komiser root folder start the Komiser server by running: ```shell +go run \*.go start --config /path/to/config.toml +``` -# From the Komiser root folder start the Komiser server, run: +In a different terminal tab navigate to the `/dashboard` folder: +```shell +cd dashboard +``` -go run \*.go start --config /path/to/config.toml +and run: -# In a different terminal tab in the dashboard folder, run: +```shell +npm install NEXT_PUBLIC_API_URL=http://localhost:3000 npm run dev +``` -# Alternatively, you can create an .env file with it: - -NEXT_PUBLIC_API_URL=http://localhost:3000 +Alternatively, you can create an .env file with it, either manually or by running: +```shell +echo "NEXT_PUBLIC_API_URL=http://localhost:3000" > .env +``` +and simply run: +```shell +npm run dev ``` -Open [http://localhost:3002/](http://localhost:3002). If you see the dashboard, ๐ŸŽ‰ congrats! It's all up and running correctly. -![Dashboard Image](https://user-images.githubusercontent.com/13384559/224318056-3d2c68bc-aa56-49c8-841a-bb297e380dc9.png) +#### 2. Open [http://localhost:3002/](http://localhost:3002). If you see the dashboard, ๐ŸŽ‰ congrats! It's all up and running correctly. โ— If you get an error page such as this, please refer to the logs and our [docs](https://docs.komiser.io/docs/introduction/getting-started). -![Error Image](https://user-images.githubusercontent.com/13384559/224320642-0bf6814b-d97a-4ad9-95a0-ca82e353c5d0.png) +Error Image ## ๐Ÿงฉ Components @@ -67,22 +78,22 @@ We will require a story for new shared components like icons, inputs or similar. - ๐Ÿงช Component unit test: component name in `UpperCamelCase.test.*` - ๐Ÿง Check `Card` example for more details: - ![Component Example](https://user-images.githubusercontent.com/13384559/224307211-2ce62245-de24-4ee7-a156-fb54d8d34b4f.png) + Component Example **Additional instructions:** - ๐Ÿ“– To view this component on Storybook, run: `npm run storybook`, then pick `Card` - ![Storybook Image](https://user-images.githubusercontent.com/13384559/224320112-e21d2ed4-1e22-4a33-adb3-6c236c4d4208.png) + Storybook Image - ๐Ÿงช To run the unit tests, run: `npm run test:watch`, hit `p`, then `card` - ![Unit Test Image](https://user-images.githubusercontent.com/13384559/224320260-19b1359e-1bfb-4db5-8379-918dacd7da44.png) + Unit Test Image ## ๐Ÿงช Testing We use Jest & React Testing Library for our unit tests. - To run the unit tests, run: `npm run test:watch`, hit `p`, then `card` - image + image **Testing convention:** @@ -168,7 +179,7 @@ it('opens the dropdown when clicked', () => { [**Storybook**](https://storybook.komiser.io/) is a tool for UI development. It makes development faster by isolating components. This allows you to work on one component at a time. If you create a new shared component or want to visualize variations of an existing one, follow these steps: - To view this component on Storybook locally, run: `npm run storybook`, then pick an example (`Card`) or your new component story - image + image ### 1. **Create the Story**: