if you find any bug or want to improve something, do an issue or write to me stonek79@proton.me
npm install - installing dependencies
npm run start:dev - running the frontend project server in dev mode with WEBPACK
or
npm run start:dev:vite - running the frontend project server in dev mode with VITE
npm run start- Launching a frontend project on a webpack dev servernpm run start:vite- Launching a frontend project on vitenpm run start:dev- Launching a frontend project on a webpack dev server + backendnpm run start:dev:vite- Launching a frontend project on vite+ backendnpm run start:dev:server- Starting the backend server with 'json-server'npm run build:prod- Build in prod modenpm run build:dev- Build in dev mode (not minimized)npm run lint:ts- Checking ts files by linternpm run lint:ts:fix- Correction of ts files by linternpm run lint:scss- Checking scss files by linternpm run lint:scss:fix- Correction of scss files by linternpm run test:unit- Running unit tests with jestnpm run test:ui- Running screenshots of tests with lokinpm run test:ui:ok- Confirmation of new screenshotsnpm run test:ui:ci- Running screenshots of tests in CInpm run test:ui:report- Generating a full report for screenshots of testsnpm run test:ui:json- Generating a json report for screenshot testsnpm run test:ui:html- Generating HTML report for screenshot testsnpm run storybook- Launching Storybooknpm run storybook:build- Building a storybook buildnpm run prepare- Precommit hooksnpm run create:slice- Script for generating FSD slices
The project is written in accordance with the Feature sliced design methodology
Link to documentation - feature sliced design
The project uses the i18next library to work with translations. Files with translations are stored in public/locales.
For comfortable work, we recommend installing the plugin for webstorm/vscode
i18next documentation - https://react.i18next.com/
The project uses 4 types of tests:
- Standard unit tests for jest -
npm run test:unit - Component tests with React testing library -
npm run test:unit - Screenshot testing with loki
npm run test:ui - e2e testing with Cypress
npm run test:e2e
More about the tests - документация тестирование
The project uses eslint to check typescript code and stylelint to check files with styles.
Also, for strict control of the main architectural principles , a proprietary eslint plugin eslint-plugin-fsd-paths-checker-plugin is used, which contains 3 rules
- fsd-paths-checker-plugin - prohibits the use of absolute imports within a single module
- layer-import-control - checks the correctness of using layers from the FSD point of view (for example, widgets cannot be used in features and entities)
- public-imports - allows importing from other modules only from the public api. Has an automatic fix
npm run lint:ts- Checking ts files by linternpm run lint:ts:fix- Correction of ts files by linternpm run lint:scss- Checking scss files by linternpm run lint:scss:fix- Correction of scss files by linter
The project describes story cases for each component. Requests to the server are mocked using storybook-addon-mock.
The file with the stories is created next to the component with the MainLayout.stories.tsx extension
You can run storybook with the command:
npm run storybook
Learn more about Storybook
Example:
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react'
import { ThemeDecorator } from '@/shared/config/storybook/ThemeDecorator/ThemeDecorator'
import { StoreDecorator } from '@/shared/config/storybook/StoreDecorator/StoreDecorator'
import { Currency } from '@/entities/Currency'
import { Countries } from '@/entities/Country'
import { ProfileCardDeprecated } from './ProfileCardDeprecated'
import AvatarImg from '../../../../shared/assets/avatar.jpg'
import { Theme } from '@/shared/const/theme';
const data = {
firstname: 'Alex',
lastname: 'Smith',
age: '42',
currency: Currency.RUB,
country: Countries.Russia,
city: 'Moscow',
username: 'Stonek79',
avatar: AvatarImg,
}
export default {
title: 'entities/ProfileCardDeprecated',
component: ProfileCardDeprecated,
argTypes: {
backgroundColor: { control: 'color' },
},
} as ComponentMeta<typeof ProfileCardDeprecated>;
const Template: ComponentStory<typeof ProfileCardDeprecated> = (args) => <ProfileCardDeprecated {...args} />;
export const Readonly = Template.bind({});
Readonly.args = {
readonly: true,
isLoading: false,
data,
};
export const ReadonlyDark = Template.bind({});
ReadonlyDark.args = {
readonly: true,
isLoading: false,
data,
};
ReadonlyDark.decorators = [ThemeDecorator(Theme.DARK)];For development, the project contains 2 configs:
- Webpack - ./config/build
- vite - vite.config.ts
Both collectors are adapted to the main features of the application.
The entire configuration is stored in /config
- /config/babel - babel
- /config/build - webpack configuration
- /config/jest - test environment configuration
- /config/storybook - storybook configuration
The scripts folder contains various scripts for refactoring\simplifying code writing\generating reports, etc.
The gitHub actions configuration is located in /.github/workflows. In ci, all kinds of tests are run, project assembly and storybook, linting.
In precommit hooks, we check the project with linters, config in /.husky
Interaction with the data is carried out using the redux toolkit. If possible, reused entities should be normalized using EntityAdapter
Requests to the server are sent using RTK query
For asynchronous connection of reducers (in order not to pull them into a common bundle), use DynamicModuleLoader
It is allowed to use feature flags only with the help of the toggleFeatures helper an object with options is passed to it
{
name: feature flag name,
on: the function that will work after Enabling the feature,
off: the function that will work after Disabling the feature
}
To automatically remove a feature, use the remove-feature.ts script, which takes 2 arguments
- Name of the feature flag to be deleted
- State (on\off)