- project uses typescript to statically analyze code
- project uses
eslint
andstylelint
to check frontend code. You can manually run vianpm 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
andstylelint
plugin to be installed.
- although styles have
scss
extension, it is actually pack of post-css plugins, so syntax differs, for example incalc
function. - now we are migrating to css-modules and this is recomended 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 aremix
classes:block_modifier
. - new way to naming CSS selectors is camel-case like
blockElemenModifier
and useclassnames
to combine it - component base style resides in the component's root directory with 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 file resides in the same directory or in subdirectory import should be relative:
./types/something
- otherwise it should start from
@app
namespace:@app/common/store
which mapped to/app/common/store.ts
in webpack, tsconfig and jest
- project uses
jest
as test harness. - jest check files that match regex
\.test\.(j|t)s(x?)$
, i.ecomment.test.tsx
,comment.test.js
- 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
Please see this documentation.
- Frontend part being bundled on docker env gets placed on
/src/web
and is available viahttp://{host}/web
. for exampleembed.js
entry point will be available athttp://{host}/web/embed.js