Web Coding Style

Follow these conventions when writing web frontend code. Full reference: https://github.com/ookamiinc/guides/blob/master/coding_style/web.md

General

• Use American English.
• Use ES2015+ and JSX. Follow the Airbnb JavaScript style guide and Airbnb React style guide.
• Use CSS Modules and SCSS. Follow stylelint-config-standard.

Check Your Code

Run the linter before submitting:

yarn run lint

Code Formatting

Use Prettier for code formatting.

File Extensions

• .js — standard JavaScript only (no JSX).
• .jsx — files containing JSX.
• .test.js — unit tests.
• .test.e2e.js — end-to-end tests.
• .worker.js — web workers.

Action Types

Define action type constants in SCREAMING_SNAKE_CASE:

const FOO_BAR = 'FOO_BAR';

Directory & Naming Conventions

src/components (Atomic Design)

atoms/FooBar/
  |- FooBar.jsx
  |- FooBar.scss
  |- index.js

src/containers

• File name: FooBarContainer.jsx
• Export name: FooBarContainer

src/hooks

• File name: useFooBar.js
• Hook name: useFooBar

src/selectors

• File name: fooBar.js
• Selector name: fooBarSelector

Tests

• Use describe to group by function and condition.
• Prefer it over test.

Example:

describe('Button', () => {
  it('renders button', () => {
    const { button } = setup(props);
    expect(button).toBeDefined();
  });

  it('calls onClick function', () => {
    const { button } = setup(props);
    fireEvent.click(button);
    expect(props.onClick).toHaveBeenCalledTimes(1);
  });

  it('matches its snapshot', () => {
    const { asFragment } = setup(props);
    expect(asFragment()).toMatchSnapshot();
  });
});