* Set default font in examle
* prettify file
* add ui elements
* Use UIButton at AuthPanel
* sort deps
* remove unsed getUserTitle method
* move UserId inside AuthPanel
* tests
* use UIButton and UInput in Anonymous login
* Use UIButton and UIInput in email login
* Replace Button to UIButton
* fix context for onTitleClick in dropdown
* rearrage class props in dropdown
* TODO: change finding over DOM to using ref
* Use UIButton in input
* rearrage deps
* Use UIButton in comment
* test
* Focus and Input buttons
* custom focus style for inputs and buttons
* the same focus style for comment input
* align buttons by top line in input
* Token dropdown & hover fix
* disable hover when button disabled
* make token dropdown markup in new style
* Fix trailing comma
* update prettier
* move prettier config to json format because it is more hendy for settings
(for example vscode can suggest rules)
* prettier fixed trailing comman in ejs
* Remove unnecessary conditions
* Files was formatted by Prettier
* fix cursor pointer on collapse button
* Move components and right naming
* ui-button -> button
* ui-input -> input
* input -> comment-form
* Change cursor behavior on disabled state
* Change button style
* font-weight: normal by default
* add small border-radius
* Change another one button to component
* Fix autofocus on username in email login form
* use preact inbuild autoFocus
* fix autofocus on back from token step
* sleep for 0s enough to wait next render before focus
* use more specific name for username input
* fix line-height at auth line on mobile
* fix className
project uses typescript to statically analyze code
project uses eslint 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 plugin to be installed.
CSS Styles
although styles have scss extension, it is actually pack of post-css plugins, so syntax differs, for example in calc function.
component styles use BEM notation (at least it should): block__element_modifier. Also there are mix classes: block_modifier.
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-comments/scss
component's element style resides in its own subdirectory, with name consisting of full elements selector, for example ListCommentsitem element is placed in __item directory under name ./list-comments__item.scss
each style should be required in index.ts of component's root directory
Imports
imports for typescript, javascript files should be without extension: ./index, not ./index.ts
if file resides in 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
Testing
project uses jest as test harness.
jest check files that match regex \.test\.(j|t)s(x?)$, i.e comment.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
Notes
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
Pavel MineevandUmputun
51d2310c1f