Frontend guide

project uses TypeScript to statically analyze code
project uses eslint and stylelint to check frontend code. You can manually run via npm run lint
Git Hooks (via husky) installed automatically on npm install and check and try to fix code style if possible, otherwise commit will be rejected
if you want IDE integration, you need eslint and stylelint plugin to be installed

now we are migrating to CSS Modules and this is a recommended way to stylization. A file with styles should be named like component.module.css
old component styles use BEM notation (at least it should): block__element_modifier. Also, there are mix classes: block_modifier
new way to naming CSS selectors is camel-case like blockElemenModifier and use classnames to combine it
component base style resides in the component's root directory with a name of component converted to kebab-case. For example, ListComments style is located in ./app/components/list-comments/list-component.tsx
any other files should be named also in kebab-case. For example, ./app/utils/get-param.ts

imports for TypeScript, JavaScript files should be without extension: ./index, not ./index.ts
if the file resides in the same directory or subdirectory import should be relative: ./types/something
otherwise it should be imported by absolute path relative to src folder like common/store which mapped to ./app/common/store.ts in webpack, tsconfig and Jest

project uses jest as test harness
Jest checks files that match regex \.(test|spec)\.ts(x?)$, i.e. comment.test.tsx, comment.spec.ts
tests are running on push attempt
example tests can be found in ./app/store/user/reducers.test.ts, ./app/components/auth-panel/auth-panel.test.tsx

frontend part being bundled on docker env gets placed on /src/web and is available via http://{host}/web. For example, embed.js entry point will be available at http://{host}/web/embed.js

Provide feedback