Update Contribution Guidelines

CONTRIBUTING.md

@@ -69,32 +69,29 @@ Following these steps will ensure that your contributions are well-received, rev
     ```
 6. While submitting Pull Request, **make sure to change the base branch from**: [master](https://github.com/tailwarden/komiser/tree/master) to [develop](v). Making sure to avoid any possible merge conflicts
 
-> ### Keeping your Fork Up-to-Date
-> 
-> If you plan on doing anything more than just a tiny quick fix, you’ll want to **make sure you keep your fork up to date** by tracking the original [“upstream” repo](https://github.com/tailwarden/komiser) that you forked. 
->
-> Follow the steps given below to do so: 
-> 
-> 1. Add the 'upstream' repo to list of remotes:
-> 
-> ```bash
-> git remote add upstream https://github.com/tailwarden/komiser.git
-> ```
-> 
-> 2. Fetch upstream repo’s branches and latest commits:
-> 
-> ```bash
-> git fetch upstream
-> ```
-> 
-> 3. Checkout to the **`develop`** branch and merge the upstream:
-> 
-> ```bash
-> git checkout develop
-> git merge upstream/develop
-> ```
-> 
-> **Now, your local 'develop' branch is up-to-date with everything modified upstream!**
+### Keeping your Fork Up-to-Date
+
+If you plan on doing anything more than just a tiny quick fix, you’ll want to **make sure you keep your fork up to date** by tracking the original [“upstream” repo](https://github.com/tailwarden/komiser) that you forked.
+
+Follow the steps given below to do so:
+
+1. Add the 'upstream' repo to list of remotes:
+		```bash
+		git remote add upstream https://github.com/tailwarden/komiser.git
+```
+
+2. Fetch upstream repo’s branches and latest commits:
+		```bash
+		git fetch upstream
+		```
+
+3. Checkout to the **`develop`** branch and merge the upstream:
+		```bash
+		git checkout develop
+		git merge upstream/develop
+		```
+
+**Now, your local 'develop' branch is up-to-date with everything modified upstream!**
 
 ## Contributing to Komiser Engine
 
@@ -115,7 +112,7 @@ In order to deploy a **self-hosted (local) instance** of Komiser, the next step
 
 **Step 3: Accessing the Komiser UI**
 
-Once the local Komiser instance is running, you can access the dashboard UI on **`http://localhost:3000`**
+Once the local Komiser instance is running, you can access the dashboard UI on **`http://localhost:3002`**
 
 ![komiser-dashboard](https://hackmd.io/_uploads/Syo0bMtgT.png)
 
@@ -137,7 +134,6 @@ Create a new **`provider_name.go`** file under **`providers/provider_name`** dir
 
 **Step 2:** 
 Add the following boilerplate code, which defines the structure of any new provider to be added:
-
 ```go
 package PROVIDER_NAME
 
@@ -171,7 +167,6 @@ Then, the main task is writing the code to fetch all the resources/services usin
 
 **Step 3:**
 Add the information about the appropriate provider's SDK client in [**`providers/provider.go`**](https://github.com/tailwarden/komiser/blob/develop/providers/providers.go) file:
-
 ```go
 
 type ProviderClient struct {
@@ -200,7 +195,7 @@ type AzureClient struct {
 Add the provider configuration in TOML format in your **`config.toml`** file, which will be used by Komiser to configure your account with the CLI.
 
 An example configuration entry for configuring a Google Cloud account in the **`config.toml`** file would look like this:
-```
+```toml
 [[gcp]]
 name="production"
 source="ENVIRONMENT_VARIABLES"
@@ -210,15 +205,13 @@ profile="production"
 
 **Step 5:**
 Build a new Komiser binary with the latest code changes by running:
-
-```
+```bash
 go build
 ```
 
 **Step 6:**
 Start a new Komiser development server using this new binary:
-
-```
+```bash
 ./komiser start
 ```
 
@@ -233,7 +226,6 @@ Create a new file **`servicename.go`** under the path **`providers/provider_name
 
 **Step 2:**
 Add the following boilerplate code, which defines the structure of any new service/resource to be added for a cloud provider:
-
 ```go
 package service
 
@@ -302,55 +294,89 @@ Komiser Dashboard is built on **Typescript** and **Next.js**. The entire fronten
 - **React Testing Library**
 
 Following are the pre-requisites needed to setup a Dev environment of Komiser dashboard:
-- In nearly all cases, while contributing to Komiser UI, you will need to build and run the Komiser Server as well, using the CLI. Make sure to follow the steps mentioned in the **"Komiser Installation"** section above.
+- In nearly all cases, while contributing to Komiser UI, you will need to build and run the Komiser Server as well, using the CLI. Make sure to follow the steps mentioned in the [**"Komiser Installation"**](#komiser-installation) section above.
 - Make sure to have all the **latest versions** of the frontend stack listed above.
 
-### Setup a local Developement Server
+### Setup a local Development Server
 
 Here are the steps to setup and access the Komiser dashboard:
 
 **Step 0:**
 
 Install the necessary Go dependencies using the following command:
-```
+```bash
 go mod download
 ```
 
 **Step 1:**
-From the root folder, start the Komiser backend server using the following command:
+Generate a `config.toml` file in the root folder if you haven't done so already.
+Paste in the following example content:
+
+```toml
+[[aws]]
+	name="sandbox"
+	source="CREDENTIALS_FILE"
+	path="./path/to/credentials/file"
+	profile="default"
+
+[[aws]]
+	name="staging"
+	source="CREDENTIALS_FILE"
+	path="./path/to/credentials/file"
+	profile="staging-account"
+
+[[gcp]]
+	name="production"
+	source="ENVIRONMENT_VARIABLES"
+	# path="./path/to/credentials/file" specify if CREDENTIALS_FILE is used
+	profile="production"
+
+[sqlite]
+  file="komiser.db"
 ```
-go run *.go start --config /path/to/config.toml
+
+> You can find more options in our [Quickstart Guide](https://docs.komiser.io/getting-started/quickstart).
+> For example it shows you how to connect to PostreSQL and other things.
+
+**Edit the config**
+
+Then you also need to create your credentials file for any of your providers. Head over [here](https://docs.komiser.io/getting-started/quickstart#self-hosted) to have a list of guides to chose from.
+Update the above config following one of the guides and remove the integrations you don't need.
+
+**Step 2:**
+From the root folder, start the Komiser backend server using the following command:
+```bash
+go run *.go start --config ./config.toml
 ```
 
-> As soon as you run this, you'll be able to access the dashboard at `http://localhost:3000`. 
->
+> As soon as you run this, you'll be able to access the dashboard at [`http://localhost:3002/`](http://localhost:3002).
 > An important point to note here is, this dashboard only reflects the changes from the **`master`** branch.
-> 
-> For our purpose, we certainly need changes to be reflected from our development branch! 
+> For our purpose, we certainly need changes to be reflected from our development branch!
 > Follow the steps given below to do so 👇
->
 
-**Step 2:**
+**Step 3:**
 Head over to the **`dashboard`** directory:
 
-```
+```bash
 cd dashboard
 ```
 
-**Step 3:**
+**Step 4:**
 Create a new environment variable in the **`.env`** file:
 ```
-EXT_PUBLIC_API_URL=http://localhost:3000
+NEXT_PUBLIC_API_URL=http://localhost:3000
 ```
 
-**Step 4:**
+**Step 5:**
 Install the necessary **`npm`** dependencies and start the dev server using the following command:
-```
+```bash
 npm install
 npm run dev
 ```
 
-You'll be able to access the dashboard at **`http://localhost:3002/`**
+The official supported NodeJS version is the latest `18.x.x` LTS release.
+
+You'll be able to access the dashboard at [**`http://localhost:3002/`**](http://localhost:3002)
 
 ![](https://hackmd.io/_uploads/ryvOPmFla.png)
 
@@ -374,7 +400,9 @@ go-bindata-assetfs -o template.go dist/ dist/assets/images/
 
 ## Contributing Best Practices
 
-Here are some best practices to follow during the development process to make your changes more structured and making it easier for us to review:
+> For frontend you can also follow the [Getting Started Guide](https://github.com/tailwarden/komiser/tree/develop/dashboard#getting-started) in the `/dashboard` README.
+
+Here are some best practices to follow during the backend development process to make your changes more structured and making it easier for us to review:
 
 1. **Write Comprehensive Unit Tests:**   
 
@@ -408,4 +436,4 @@ Feel free to reach out to us on our [Discord Server](https://discord.tailwarden.
 
 ## License
 
-Komiser is an open-source software released under the [Elastic License 2.0 (ELv2)](https://github.com/tailwarden/komiser/blob/develop/LICENSE). 
+Komiser is an open-source software released under the [Elastic License 2.0 (ELv2)](https://github.com/tailwarden/komiser/blob/develop/LICENSE). 

dashboard/README.md

@@ -4,7 +4,9 @@ Full frontend stack: `Next.js`, `Typescript`, `Tailwind`, `Storybook`, `Jest` &
 
 ## Getting Started
 
-First, run the development server:
+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:
 
 ```bash
 # From the Komiser root folder start the Komiser server, run:
@@ -17,16 +19,19 @@ NEXT_PUBLIC_API_URL=http://localhost:3000 npm run dev
 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.
-<img width="1411" alt="image" src="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.
+   <img width="1411" alt="image" src="https://user-images.githubusercontent.com/13384559/224318056-3d2c68bc-aa56-49c8-841a-bb297e380dc9.png">
 
-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).
-<img width="1411" alt="image" src="https://user-images.githubusercontent.com/13384559/224320642-0bf6814b-d97a-4ad9-95a0-ca82e353c5d0.png">
+> 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).
+> <img width="1411" alt="image" src="https://user-images.githubusercontent.com/13384559/224320642-0bf6814b-d97a-4ad9-95a0-ca82e353c5d0.png">
 
 ## Components
 
 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 folder: component name in `kebab-case`
@@ -40,12 +45,92 @@ Component convention:
 
 Additional instructions:
 
-- To view this component on Storybook, run: `npm run storybook`, then pick `Card`
+- To view this component on Storybook locally, run: `npm run storybook`, then pick `Card`
   <img width="1411" alt="image" src="https://user-images.githubusercontent.com/13384559/224320112-e21d2ed4-1e22-4a33-adb3-6c236c4d4208.png">
 
 - To run the unit tests, run: `npm run test:watch`, hit `p`, then `card`
   <img width="668" alt="image" src="https://user-images.githubusercontent.com/13384559/224320260-19b1359e-1bfb-4db5-8379-918dacd7da44.png">
 
+## Adding to Storybook
+
+[**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:
+
+### 1. **Create the Story**:
+
+In the same directory as your component, create a Storybook story:
+
+- Create a story file: component name in `UpperCamelCase.stories.*`.
+
+Here's a basic story format:
+
+```typescript
+import React from 'react';
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import YourComponent from './YourComponent';
+
+export default {
+  title: 'Path/To/YourComponent',
+  component: YourComponent
+} as ComponentMeta<typeof YourComponent>;
+
+const Template: ComponentStory<typeof YourComponent> = args => (
+  <YourComponent {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  // default props here...
+};
+```
+
+### 2. **Add Variations**:
+
+You can create multiple variations of your component by replicating the `Default` pattern. For example, if your component has a variation for a "disabled" state:
+
+```typescript
+export const Disabled = Template.bind({});
+Disabled.args = {
+  // props to set the component to its disabled state...
+};
+```
+
+### 3. **Mock Data**:
+
+If your component requires mock data, create a mock file: component name in `UpperCamelCase.mocks.*`. Import this data into your story file to use with your component variations.
+
+### 4. **Visual Check**:
+
+Run Storybook:
+
+```bash
+npm run storybook
+```
+
+Your component should now appear in the Storybook UI. Navigate to it, and verify all the variations display correctly.
+
+### 5. **Documentation**:
+
+Add a brief description and any notes on your component's functionality within the Storybook UI. Use the `parameters` object in your default export:
+
+```typescript
+export default {
+  title: 'Path/To/YourComponent',
+  component: YourComponent,
+  parameters: {
+    docs: {
+      description: {
+        component: 'Your description here...'
+      }
+    }
+  }
+} as ComponentMeta<typeof YourComponent>;
+```
+
+---
+
+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.
+
 ## Testing
 
 We use Jest & React Testing Library for our unit tests.
@@ -61,7 +146,7 @@ Testing examples:
 
 - Simple Jest unit test example (snippet from `/utils/formatNumber.test.ts`):
 
-```Typescript
+```typescript
 import formatNumber from './formatNumber';
 
 describe('formatNumber outputs', () => {
@@ -77,7 +162,7 @@ describe('formatNumber outputs', () => {
 
 - Jest & Testing library example (snippet from `/components/card/Card.test.tsx`):
 
-```Typescript
+```typescript
 import { render, screen } from '@testing-library/react';
 import RefreshIcon from '../icons/RefreshIcon';
 import Card from './Card';