development.md

Contribution

Development Setup

Pre-requirements

• Node version: please check .nvmrc file for required node version

Local setup

To set up the project locally for development and testing, please follow these steps:

1. Clone the repository: git clone git@github.com:Bitnoise/react-scheduler.git.
2. Install the dependencies: yarn install, depending on your package manager.
3. Start the development server: yarn dev.
4. Open http://localhost:5173 in your web browser.

Project structure

General:

.
├── src
│   ├── assets
│   ├── components
│   |   ├── ExampleComponent
│   |   ├── AnotherComponent
|   |   └── index.ts
│   ├── constants.ts
│   ├── context
│   ├── locales
│   ├── types
│   ├── utils

• assets - folder that consists all of the svgs and images used within app
• components - folder that has all React components used within app
  • ExampleComponent - folder with component files, written in camelCase convention
  • index.ts - file that consists exports of all components e.g.

    export { default as ExampleComponent } from "./ExampleComponent"
    

• constants - all constants that are globally used and should not change during usage of app, e.g.: height and width of cell, width of single tile.
• context - folder that consists CalendarProvider and LocaleProvider
• locales - folder that consists files with translations (currently en / pl)
• types - folder that consists all global types and type guards
• utils - folder that consists all utility functions used within app (e.g. drawing all the grid, data parsers etc.)

Example of component folder structure:

ExampleComponent
├── ExampleComponent.tsx
├── index.ts
├── styles.ts
├── types.ts

Each component should consist of the following files:

• [ComponentName].tsx - .tsx file named after component name, written in camelCase convention
• index.ts - file that exports component e.g.:

  export { default } from "./ExampleComponent";
  

• styles.ts - optional file that consists all styling of the component
• types.ts - optional file that consists all types of component

Code Style and Guidelines

1. Commits should meet Conventional Commits rules
2. Project uses eslint and prettier for code linting and styling.
3. Both husky and lint-staged are used to ensure that code meets code style and guidelines