From 5ed06f6435b05fea1aee151a49ef2663a22411a2 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 14:42:09 +0200
Subject: [PATCH 01/10] fix: improve dashboard readme
---
dashboard/README.md | 131 +++++++++++++++++----------
dashboard/tsconfig.json | 7 +-
dashboard/utils/formatNumber.test.ts | 2 +-
dashboard/utils/regex.test.ts | 2 +-
4 files changed, 91 insertions(+), 51 deletions(-)
diff --git a/dashboard/README.md b/dashboard/README.md
index 514b43c94..f8340a486 100644
--- a/dashboard/README.md
+++ b/dashboard/README.md
@@ -1,12 +1,20 @@
+# ๐ Komiser Dashboard
+
Komiser dashboard is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
-Full frontend stack: `Next.js`, `Typescript`, `Tailwind`, `Storybook`, `Jest` & `React Testing Library.`
+**Full frontend stack:**
+- ๐ฅ `Next.js`
+- ๐ `Typescript`
+- ๐จ `Tailwind`
+- ๐ `Storybook`
+- ๐งช `Jest`
+- ๐ `React Testing Library`
-## Getting Started
+## ๐ Getting Started
First, run the development server:
-```bash
+\```
# From the Komiser root folder start the Komiser server, run:
go run *.go start --config /path/to/config.toml
@@ -15,56 +23,65 @@ 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
-```
+\```
-Open [http://localhost:3002/](http://localhost:3002). If you see the dashboard, congrats! It's all up and running correctly.
-
+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).
-
+โ 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).
+
-## Components
+## ๐งฉ Components
Komiser components are documented under `/components`
-Component convention:
-
-- Component folder: component name in `kebab-case`
-- Component file: component name in `UpperCamelCase.*`
-- Component story: component name in `UpperCamelCase.stories.*`
-- Component story mock (if needed): component name in `UpperCamelCase.mocks.*`
-- Component unit test: component name in `UpperCamelCase.test.*`
-- Check `Card` example for more details:
-
-
-
-Additional instructions:
-
-- To view this component on Storybook, run: `npm run storybook`, then pick `Card`
- 
-
-- To run the unit tests, run: `npm run test:watch`, hit `p`, then `card`
- 
-
-## Testing
+> ๐ก **Hint:**
+> We have the following import aliases defined in `tsconfig.json`
+\```
+{
+"@components/": "/dashboard/components/",
+"@services/": "/dashboard/services/",
+"@environments/": "/dashboard/environments/",
+"@utils/": "/dashboard/utils/",
+"@styles/": "/dashboard/styles/"
+}
+\```
+
+**Component convention:**
+- ๐ Component folder: component name in `kebab-case`
+- ๐ Component file: component name in `UpperCamelCase.*`
+- ๐ Component story: component name in `UpperCamelCase.stories.*`
+- ๐ญ Component story mock (if needed): component name in `UpperCamelCase.mocks.*`
+- ๐งช Component unit test: component name in `UpperCamelCase.test.*`
+- ๐ง Check `Card` example for more details:
+
+
+**Additional instructions:**
+- ๐ To view this component on Storybook, run: `npm run storybook`, then pick `Card`
+
+- ๐งช To run the unit tests, run: `npm run test:watch`, hit `p`, then `card`
+
+
+## ๐งช Testing
We use Jest & React Testing Library for our unit tests.
-Testing convention:
-
-- All tests should be wrapped in a `describe`
-- If it's a unit test for a function: `describe('functionName outputs', () => { ... })`
-- If it's a unit test for a component: `describe('Component Name', () => { ... })`
-- A test should use 'it' for the test function: `it('should do something', () => { ... })`
+**Testing convention:**
+- โ
All new Utils need to be tested. Existing ones when being changed
+- โ
All tests should be wrapped in a `describe`
+- โ
If it's a unit test for a function: `describe('[replace with function name]', () => { ... })`
+- โ
If it's a unit test for a util: `describe('[replace with util name] util', () => { ... })`
+- โ
If it's a unit test for a component: `describe('[replace with component name]', () => { ... })`
+- โ
A test should use 'it' for the test function: `it('should do something', () => { ... })`
-Testing examples:
+**Testing examples:**
- Simple Jest unit test example (snippet from `/utils/formatNumber.test.ts`):
-```Typescript
+\```
import formatNumber from './formatNumber';
-describe('formatNumber outputs', () => {
+describe('formatNumber util', () => {
it('should format number (over a thousand) in short notation', () => {
const result = formatNumber(12345);
expect(result).toBe('12K');
@@ -73,11 +90,11 @@ describe('formatNumber outputs', () => {
...
});
-```
+\```
- Jest & Testing library example (snippet from `/components/card/Card.test.tsx`):
-```Typescript
+\```
import { render, screen } from '@testing-library/react';
import RefreshIcon from '../icons/RefreshIcon';
import Card from './Card';
@@ -108,21 +125,39 @@ describe('Card', () => {
...
});
-```
+\```
+
+If you're looking for an example with event firing and state updates, have a look at `components/select-checkbox/SelectCheckbox.test.tsx`:
+\```
+it('opens the dropdown when clicked', () => {
+ const { getByRole, getByText } = render(
+ {}}
+ />
+ );
+
+ fireEvent.click(getByRole('button'));
+
+ expect(getByText('Item 1')).toBeInTheDocument();
+ expect(getByText('Item 2')).toBeInTheDocument();
+ expect(getByText('Item 3')).toBeInTheDocument();
+});
+\```
-## Contributing
+## ๐ค Contributing
We welcome all contributors to join us on the mission of improving Komiser, especially when it comes to writing tests and adding documentation.
Not sure where to start?
+- ๐ Read the [contributor guidelines](https://docs.komiser.io/docs/introduction/community)
+- ๐ฌ [Join our Discord](https://discord.tailwarden.com/) and hang with us on #contributors channel.
-- Read the [contributor guidelines](https://docs.komiser.io/docs/introduction/community)
-- [Join our Discord](https://discord.tailwarden.com/) and hang with us on #contributors channel.
-
-## Learn More
+## ๐ Learn More
To learn more about our stack, take a look at the following resources:
-
- [Next.js documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
- [Tailwind documentation](https://tailwindcss.com/docs/)
@@ -130,6 +165,6 @@ To learn more about our stack, take a look at the following resources:
- [Jest documentation](https://jestjs.io/docs/getting-started)
- [React testing library documentation](https://testing-library.com/docs/dom-testing-library/intro)
-## Walkthrough video
+## ๐ฅ Walkthrough video
[](https://www.youtube.com/watch?v=uwxj11-eRt8)
diff --git a/dashboard/tsconfig.json b/dashboard/tsconfig.json
index a5e48f892..15d7d31d3 100644
--- a/dashboard/tsconfig.json
+++ b/dashboard/tsconfig.json
@@ -21,7 +21,12 @@
"@environments/*": ["environments/*"],
"@utils/*": ["utils/*"],
"@styles/*": ["styles/*"]
- }
+ },
+ "plugins": [
+ {
+ "name": "next"
+ }
+ ]
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
"exclude": ["node_modules"]
diff --git a/dashboard/utils/formatNumber.test.ts b/dashboard/utils/formatNumber.test.ts
index 33bd449f6..ff7add422 100644
--- a/dashboard/utils/formatNumber.test.ts
+++ b/dashboard/utils/formatNumber.test.ts
@@ -1,6 +1,6 @@
import formatNumber from './formatNumber';
-describe('formatNumber outputs', () => {
+describe('formatNumber util', () => {
it('should format number (over a thousand) in short notation', () => {
const result = formatNumber(12345);
expect(result).toBe('12K');
diff --git a/dashboard/utils/regex.test.ts b/dashboard/utils/regex.test.ts
index c6b279f1a..8466d9f6a 100644
--- a/dashboard/utils/regex.test.ts
+++ b/dashboard/utils/regex.test.ts
@@ -1,6 +1,6 @@
import regex, { required } from './regex';
-describe('regex outputs', () => {
+describe('regex util', () => {
it('should return the required regex', () => {
const result = required;
expect(result).toStrictEqual(/./);
From b950b029117ea304e31310f7d7b40f82689f6a33 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 14:45:06 +0200
Subject: [PATCH 02/10] fix: fix code blocks
---
dashboard/README.md | 76 ++++++++++++++++++++++++---------------------
1 file changed, 41 insertions(+), 35 deletions(-)
diff --git a/dashboard/README.md b/dashboard/README.md
index f8340a486..c17f1c503 100644
--- a/dashboard/README.md
+++ b/dashboard/README.md
@@ -3,6 +3,7 @@
Komiser dashboard is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
**Full frontend stack:**
+
- ๐ฅ `Next.js`
- ๐ `Typescript`
- ๐จ `Tailwind`
@@ -14,16 +15,20 @@ Komiser dashboard is a [Next.js](https://nextjs.org/) project bootstrapped with
First, run the development server:
-\```
+```shell
+
# From the Komiser root folder start the Komiser server, run:
-go run *.go start --config /path/to/config.toml
+
+go run \*.go start --config /path/to/config.toml
# In a different terminal tab in the dashboard folder, run:
+
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
-\```
+```
Open [http://localhost:3002/](http://localhost:3002). If you see the dashboard, ๐ congrats! It's all up and running correctly.
@@ -37,36 +42,39 @@ Komiser components are documented under `/components`
> ๐ก **Hint:**
> We have the following import aliases defined in `tsconfig.json`
-\```
-{
-"@components/": "/dashboard/components/",
-"@services/": "/dashboard/services/",
-"@environments/": "/dashboard/environments/",
-"@utils/": "/dashboard/utils/",
-"@styles/": "/dashboard/styles/"
-}
-\```
+> ```json
+> {
+> "@components/": "/dashboard/components/",
+> "@services/": "/dashboard/services/",
+> "@environments/": "/dashboard/environments/",
+> "@utils/": "/dashboard/utils/",
+> "@styles/": "/dashboard/styles/"
+> }
+> ```
**Component convention:**
+
- ๐ Component folder: component name in `kebab-case`
- ๐ Component file: component name in `UpperCamelCase.*`
- ๐ Component story: component name in `UpperCamelCase.stories.*`
- ๐ญ Component story mock (if needed): component name in `UpperCamelCase.mocks.*`
- ๐งช Component unit test: component name in `UpperCamelCase.test.*`
- ๐ง Check `Card` example for more details:
-
+ 
**Additional instructions:**
+
- ๐ To view this component on Storybook, run: `npm run storybook`, then pick `Card`
-
+ 
- ๐งช To run the unit tests, run: `npm run test:watch`, hit `p`, then `card`
-
+ 
## ๐งช Testing
We use Jest & React Testing Library for our unit tests.
**Testing convention:**
+
- โ
All new Utils need to be tested. Existing ones when being changed
- โ
All tests should be wrapped in a `describe`
- โ
If it's a unit test for a function: `describe('[replace with function name]', () => { ... })`
@@ -78,7 +86,7 @@ We use Jest & React Testing Library for our unit tests.
- Simple Jest unit test example (snippet from `/utils/formatNumber.test.ts`):
-\```
+```typescript
import formatNumber from './formatNumber';
describe('formatNumber util', () => {
@@ -86,15 +94,13 @@ describe('formatNumber util', () => {
const result = formatNumber(12345);
expect(result).toBe('12K');
});
-
...
-
});
-\```
+```
- Jest & Testing library example (snippet from `/components/card/Card.test.tsx`):
-\```
+```typescript
import { render, screen } from '@testing-library/react';
import RefreshIcon from '../icons/RefreshIcon';
import Card from './Card';
@@ -103,9 +109,9 @@ describe('Card', () => {
it('should render card component without crashing', () => {
render(
}
+ label="Test card"
+ value={500}
+ icon={}
/>
);
});
@@ -113,29 +119,27 @@ describe('Card', () => {
it('should display the value formatted', () => {
render(
}
+ label="Test card"
+ value={5000}
+ icon={}
/>
);
const formattedNumber = screen.getByTestId('formattedNumber');
expect(formattedNumber).toHaveTextContent('5K');
});
-
...
-
});
-\```
+```
If you're looking for an example with event firing and state updates, have a look at `components/select-checkbox/SelectCheckbox.test.tsx`:
-\```
+```typescript
it('opens the dropdown when clicked', () => {
const { getByRole, getByText } = render(
{}}
+ label="Test Label"
+ query="provider"
+ exclude={[]}
+ setExclude={() => {}}
/>
);
@@ -145,19 +149,21 @@ it('opens the dropdown when clicked', () => {
expect(getByText('Item 2')).toBeInTheDocument();
expect(getByText('Item 3')).toBeInTheDocument();
});
-\```
+```
## ๐ค Contributing
We welcome all contributors to join us on the mission of improving Komiser, especially when it comes to writing tests and adding documentation.
Not sure where to start?
+
- ๐ Read the [contributor guidelines](https://docs.komiser.io/docs/introduction/community)
- ๐ฌ [Join our Discord](https://discord.tailwarden.com/) and hang with us on #contributors channel.
## ๐ Learn More
To learn more about our stack, take a look at the following resources:
+
- [Next.js documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
- [Tailwind documentation](https://tailwindcss.com/docs/)
From 314fbee352061ffd8feaa97e9a015de8f277bd84 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 15:03:04 +0200
Subject: [PATCH 03/10] fix: fix code blocks
---
dashboard/README.md | 23 +++++++++++------------
1 file changed, 11 insertions(+), 12 deletions(-)
diff --git a/dashboard/README.md b/dashboard/README.md
index ec0690013..9bd70ba70 100644
--- a/dashboard/README.md
+++ b/dashboard/README.md
@@ -38,20 +38,20 @@ Open [http://localhost:3002/](http://localhost:3002). If you see the dashboard,
โ 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).
-
## ๐งฉ Components
Komiser components are documented under `/components`
> ๐ก **Hint:**
> We have the following import aliases defined in `tsconfig.json`
+>
> ```json
> {
-> "@components/": "/dashboard/components/",
-> "@services/": "/dashboard/services/",
-> "@environments/": "/dashboard/environments/",
-> "@utils/": "/dashboard/utils/",
-> "@styles/": "/dashboard/styles/"
+> "@components/": "/dashboard/components/",
+> "@services/": "/dashboard/services/",
+> "@environments/": "/dashboard/environments/",
+> "@utils/": "/dashboard/utils/",
+> "@styles/": "/dashboard/styles/"
> }
> ```
@@ -86,7 +86,6 @@ We use Jest & React Testing Library for our unit tests.
- To run the unit tests, run: `npm run test:watch`, hit `p`, then `card`
-
**Testing convention:**
- โ
All new Utils need to be tested. Existing ones when being changed
@@ -146,14 +145,15 @@ describe('Card', () => {
```
If you're looking for an example with event firing and state updates, have a look at `components/select-checkbox/SelectCheckbox.test.tsx`:
+
```typescript
it('opens the dropdown when clicked', () => {
const { getByRole, getByText } = render(
{}}
+ label="Test Label"
+ query="provider"
+ exclude={[]}
+ setExclude={() => {}}
/>
);
@@ -248,7 +248,6 @@ export default {
> Remember: Storybook is not just a tool but also a way to document components. Ensure you provide meaningful names, descriptions, and use cases to help other developers understand the use and purpose of each component.
-
## ๐ค Contributing
We welcome all contributors to join us on the mission of improving Komiser, especially when it comes to writing tests and adding documentation.
From 5cffd04820fd4539857fcf03019cef60a1418db8 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 15:05:06 +0200
Subject: [PATCH 04/10] fix: remove doubles headlines
---
dashboard/README.md | 2 --
1 file changed, 2 deletions(-)
diff --git a/dashboard/README.md b/dashboard/README.md
index 9bd70ba70..7442804d5 100644
--- a/dashboard/README.md
+++ b/dashboard/README.md
@@ -58,8 +58,6 @@ Komiser components are documented under `/components`
You can find all the shared Components also inside [Storybook](https://storybook.komiser.io/). If you're implementing a new Story, please check for existing or new components with Storybook.
We will require a story for new shared components like icons, inputs or similar.
-Component convention:
-
**Component convention:**
- ๐ Component folder: component name in `kebab-case`
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 05/10] 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.
-
+#### 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).
-
+
## ๐งฉ 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:
- 
+
**Additional instructions:**
- ๐ To view this component on Storybook, run: `npm run storybook`, then pick `Card`
- 
+
- ๐งช To run the unit tests, run: `npm run test:watch`, hit `p`, then `card`
- 
+
## ๐งช 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`
-
+
**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
-
+
### 1. **Create the Story**:
From 402cfb4fd48a336682f2325edae4763b5ea78fc1 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:13:00 +0200
Subject: [PATCH 06/10] fix: adress review comments
---
dashboard/README.md | 8 ++++++--
1 file changed, 6 insertions(+), 2 deletions(-)
diff --git a/dashboard/README.md b/dashboard/README.md
index 0c43f547b..b28d53070 100644
--- a/dashboard/README.md
+++ b/dashboard/README.md
@@ -18,11 +18,13 @@ Follow the [Contribution Guide](https://github.com/tailwarden/komiser/blob/devel
#### 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
```
In a different terminal tab navigate to the `/dashboard` folder:
+
```shell
cd dashboard
```
@@ -36,10 +38,13 @@ NEXT_PUBLIC_API_URL=http://localhost:3000 npm run dev
```
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
```
@@ -92,8 +97,7 @@ We will require a story for new shared components like icons, inputs or similar.
We use Jest & React Testing Library for our unit tests.
-- To run the unit tests, run: `npm run test:watch`, hit `p`, then `card`
-
+- To run the unit tests, run: `npm run test`
**Testing convention:**
From 5f654cc61ee083f70a8d4121caa5e52ac1cc4d45 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:28:36 +0200
Subject: [PATCH 07/10] fix: adress review comments
---
dashboard/README.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/dashboard/README.md b/dashboard/README.md
index b28d53070..b62154269 100644
--- a/dashboard/README.md
+++ b/dashboard/README.md
@@ -88,9 +88,9 @@ We will require a story for new shared components like icons, inputs or similar.
**Additional instructions:**
- ๐ To view this component on Storybook, run: `npm run storybook`, then pick `Card`
+
- ๐งช To run the unit tests, run: `npm run test:watch`, hit `p`, then `card`
-
## ๐งช Testing
From 664a59ccac742b2eb8d7d58c02a82e53e8c06af4 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 20:02:46 +0200
Subject: [PATCH 08/10] fix: adress review comments
---
dashboard/README.md | 3 +--
1 file changed, 1 insertion(+), 2 deletions(-)
diff --git a/dashboard/README.md b/dashboard/README.md
index b62154269..e6a307ac8 100644
--- a/dashboard/README.md
+++ b/dashboard/README.md
@@ -88,7 +88,6 @@ We will require a story for new shared components like icons, inputs or similar.
**Additional instructions:**
- ๐ To view this component on Storybook, run: `npm run storybook`, then pick `Card`
-
- ๐งช To run the unit tests, run: `npm run test:watch`, hit `p`, then `card`
@@ -183,7 +182,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
-
+
### 1. **Create the Story**:
From 4648409fa4570460fe821a9b40b9fe425fd3c2a0 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 20:03:53 +0200
Subject: [PATCH 09/10] fix: adress review comments
---
dashboard/README.md | 4 +++-
1 file changed, 3 insertions(+), 1 deletion(-)
diff --git a/dashboard/README.md b/dashboard/README.md
index e6a307ac8..7af0d8de8 100644
--- a/dashboard/README.md
+++ b/dashboard/README.md
@@ -88,8 +88,10 @@ We will require a story for new shared components like icons, inputs or similar.
**Additional instructions:**
- ๐ To view this component on Storybook, run: `npm run storybook`, then pick `Card`
+
- ๐งช To run the unit tests, run: `npm run test:watch`, hit `p`, then `card`
+
## ๐งช Testing
@@ -182,7 +184,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
-
+
### 1. **Create the Story**:
From 36055d3c83aa31d721c77468d09ff1fc571f7223 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 20:04:59 +0200
Subject: [PATCH 10/10] fix: adress review comments
---
dashboard/README.md | 2 ++
1 file changed, 2 insertions(+)
diff --git a/dashboard/README.md b/dashboard/README.md
index 7af0d8de8..1b423fcb3 100644
--- a/dashboard/README.md
+++ b/dashboard/README.md
@@ -90,6 +90,7 @@ We will require a story for new shared components like icons, inputs or similar.
- ๐ To view this component on Storybook, run: `npm run storybook`, then pick `Card`
+
- ๐งช To run the unit tests, run: `npm run test:watch`, hit `p`, then `card`
@@ -184,6 +185,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
+
### 1. **Create the Story**: