Skip to content

Latest commit

 

History

History
108 lines (62 loc) · 4.18 KB

tooling.stories.mdx

File metadata and controls

108 lines (62 loc) · 4.18 KB

import { Meta } from '@storybook/addon-docs';

Hasura Console Development Tooling

This document explains different toolings that we use at Hasura console team.

Storybook

Storybook is used to ease isolated component development. Idea is to have component stories for the new components with/without business logic.

What is a story?

A story captures the rendered state of a UI component. It’s a function that returns a component’s state given a set of arguments.

Stories can have mock data to render the component that handles different type of UI rendering and user events. Mocks are mainly used as props or network mocks to simulate constant data.

It can be considered as a documentation + example instances of a UI component.

When there are hooks inside the component (side effects) that fetches the data from network call, MSW is used to mock the API call.

How to start storybook?

npm run storybook

React-Query

React-query is used for data fetching and related state management purpose.

Debugging (React-Query DevTools)

Console code has enabled DevTools on development environment. This helps developers to understand the state of each queries with visualisation.

Redux

Redux is currently used in the console code for global state management, data fetching etc. but we are trying reduce redux usage and increase component level states and react query for API states.

Debugging (Redux DevTools)

Console development server can be debugged with the redux devtools for debugging redux state changes.

XState

XState is introduced to simplify the state management, we use it mostly at the component level to make component development easier.

Tailwind CSS

Tailwind CSS is used as the main CSS framework

Mock Service Worker

MSW is used to mock network calls for testing purpose. It is mainly used to test hooks, components, and on component stories.

react-hook-form

react-hook-form is used to build new form components.

Zod

Zod is used for schema validation.

Linter and Formatter

Pre-commit git-hook that runs linter and formatter is by default disabled. You can enable it by adding HUSKY_PRE_COMMIT=true to your .env file.

  • ESlint is used as the linter on console code. If you want to run a linter for all files, you can do:

    npm run lint

  • Prettier is used as the code formatter on console code. To format all files, you can run:

    npm run format

E2E and Unit Tests

  • E2E Tests are written using Cypress .

    • Run tests: npm run cy:open
    • Write your tests in the cypress/integration directory.

  • Unit tests are written using Jest Framework

    • Tests are written inside __test__ folder of respective services.
    • Unit testing is mostly applied on the utility functions.
    • If you want to run tests, execute npm run jest or npm run jest-watch (for watch mode)
    • Snapshot testing is also used with unit tests.
    • when you want to update the snapshot, you can run npm run jest -- -u or press u if you are in jest-watch mode.

Chromatic

Chromatic is used for visual testing the stories. If you have a story you do not wish to snapshot in Chromatic, you can disable snapshotting with the disableSnapshot story parameter.

Webpack

Webpack is used for module bundling. Different webpack configurations are used to optimise production build and development server.

Husky

Husky is used to configure pre-commit git-hook that runs linter and formatter. You can enable it by adding HUSKY_PRE_COMMIT=true to your .env file.