Skip to content

Commit

Permalink
Merge branch 'develop' into concurrent-resource-fetching-per-provider
Browse files Browse the repository at this point in the history
  • Loading branch information
Azanul authored Oct 14, 2023
2 parents 00fcf65 + 6215b4c commit 5197f5e
Show file tree
Hide file tree
Showing 22 changed files with 3,583 additions and 916 deletions.
3 changes: 2 additions & 1 deletion .gitattributes
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,5 @@

# Denote all files that are truly binary and should not be modified.
*.png binary
*.jpg binary
*.jpg binary
*.ico binary
351 changes: 181 additions & 170 deletions CONTRIBUTING.md

Large diffs are not rendered by default.

101 changes: 93 additions & 8 deletions dashboard/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand All @@ -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`
Expand All @@ -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.
Expand All @@ -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', () => {
Expand All @@ -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';
Expand Down
Loading

0 comments on commit 5197f5e

Please sign in to comment.