style-guide.md

Core rules

We are following https://github.com/airbnb/javascript style guide in general.

1. Use meaningful names for one-line functions, like map,filter, reduce`.
2. Use aliases for import path.
3. Use named imports/exports.
4. Try to avoid any / unknown.
5. Define types for data retrieved from server.
6. Use @todo and @hack comments for future improvements and fixes.
7. Always use eslint and prettier.

🚧 Content is under development.

---

Component guidelines

1. Keep components small and functional.

2. Use classname package for defining multiple css classes.

3. Always use named export, avoid export default.

4. Use UpperCamelCase for files containing components.

5. Use .tsx extension for components

Functional component template

// Defines props types
export interface IComponent {
}

export const Component: React.FC<IComponent> = (props: IComponent): JSX.Element => { ... };

export const Component: React.FC<IComponent> = React.memo((props: IComponent): JSX.Element => { ... });

Component folder structure

/SomeComponent/ folder content:

• index.ts - should re-export component and used for imports, e.g. import { SomeComponent } from '~/shared/SomeComponent'
• types.ts - should contain types and interfaces used for component and it's child components (which should be placed in the same folder).
• functions.ts - same thing, but for functions.
• styles.module.scss - component styles.
• SomeComponent.tsx - component itself.
• SomeComponent.test.ts - file for component specs (if necessary)
• /AnotherComponent - folder for child component, used only as part of SomeComponent

Component example

index.ts file:

export * from './SomeComponent';
export { User } from './types';

types.ts file:

export type ButtonType = 'primary' | 'outlined' | 'error';

export type User = {
  id: number;
  name: string;
};

SomeComponent.tsx file:

import React, { useState } from 'react';
import cn from 'classnames';

import { AnotherComponent } from './AnotherComponent';
import { ButtonType, User } from './types';
import s from './SomeComponent.module.scss';

interface ISomeComponentProps {
  users: User[];
  onSelectUser: (userId: number) => void;
  onDelete: () => void;
  type?: ButtonType;
  className?: string;
  disabled?: boolean;
}

export const SomeComponent: React.FC<ISomeComponentProps> = (props: ISomeComponentProps): JSX.Element => {
  const { children, users, onSelectUser, className, type = 'primary', onDelete, disabled } = props;
  const [count, setCount] = useState<number>(0);

  return (
    <>
      {users.map((user: User) => (
        <AnotherComponent
          key={user.id}
          username={user.name}
          onClick={() => onSelectUser(user.id)}
        />
      ))}

      {/* Some code */}

      <button onClick={onDelete} className={cn(s.button, { [s.disabled]: disabled }, className)}>
        {children}
      </button>
    </>
  );
};

Project structure

Describes only core files and folders assuming that project uses routing.

/src/ folder content:

• index.tsx
• index.css / index.scss
• App.tsx
• App.module.scss
• \_variables.scss - use for global variables
• \_general.scss - use for global classes
• types.ts - use for global types and interfaces
• const.ts - use for global constants
• functions.ts - use for reusable functions. Always comment all functions. In case of unexpected growth we prefer to create folder instead and separate functions to multiple files.
• pages - use for components responsible for app pages.
• shared - use for shared components.
• redux - use for redux related files.
• services - use for services.
• assets/svg - use for svg files.

Redux structure

🚧 Content is under development.