Komiser dashboard is a Next.js project bootstrapped with create-next-app.

Full frontend stack: Next.js, Typescript, Tailwind, Storybook, Jest & React Testing Library.

First, run the development server:

# From the Komiser root folder start the Komiser server, run:
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/. 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.

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

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 examples:

• Simple Jest unit test example (snippet from /utils/formatNumber.test.ts):

import formatNumber from './formatNumber';

describe('formatNumber outputs', () => {
  it('should format number (over a thousand) in short notation', () => {
    const result = formatNumber(12345);
    expect(result).toBe('12K');
  });

  ...

});

• Jest & Testing library example (snippet from /components/card/Card.test.tsx):

import { render, screen } from '@testing-library/react';
import RefreshIcon from '../icons/RefreshIcon';
import Card from './Card';

describe('Card', () => {
  it('should render card component without crashing', () => {
    render(
      <Card
        label="Test card"
        value={500}
        icon={<RefreshIcon width={24} height={24} />}
      />
    );
  });

  it('should display the value formatted', () => {
    render(
      <Card
        label="Test card"
        value={5000}
        icon={<RefreshIcon width={24} height={24} />}
      />
    );
    const formattedNumber = screen.getByTestId('formattedNumber');
    expect(formattedNumber).toHaveTextContent('5K');
  });

  ...

});

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
• Join our Discord and hang with us on #contributors channel.

To learn more about our stack, take a look at the following resources:

• Next.js documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.
• Tailwind documentation
• Storybook documentation
• Jest documentation
• React testing library documentation