Merge pull request #26 from muerwre/15-use-cra-or-nextjs

15 use cra or nextjs

.babelrc

@@ -1,11 +0,0 @@
-{
-  "presets": ["env", "react","stage-2"],
-  "plugins": [
-    "react-hot-loader/babel",
-    "lodash",
-    ["transform-runtime", {
-      "polyfill": false,
-      "regenerator": true
-    }]
-  ]
-}

.editorconfig

@@ -1,9 +0,0 @@
-root = true
-
-[*]
-indent_style = space 
-indent_size = 2
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true

.eslintrc.js

@@ -1,90 +0,0 @@
-module.exports = {
-  extends: [
-    'plugin:@typescript-eslint/recommended',
-    'prettier/@typescript-eslint',
-    'airbnb',
-    'airbnb-base',
-    'prettier',
-  ],
-  parser: '@typescript-eslint/parser',
-  parserOptions: {
-    ecmaFeatures: {
-      jsx: true,
-    },
-    project: './tsconfig.json',
-  },
-  plugins: ['@typescript-eslint', 'react', 'jsx-a11y', 'import', 'react-hooks'],
-  settings: {
-    'import/resolver': {
-      typescript: {},
-    },
-  },
-  rules: {
-    '@typescript-eslint/explicit-function-return-type': 0,
-    // '@typescript-eslint/indent': ['warn', 2],
-    'comma-dangle': 0,
-    'no-restricted-syntax': 1,
-    'react/prop-types': 0,
-    'new-cap': 1,
-    'no-continue': 1,
-    'no-underscore-dangle': 1,
-    'global-require': 1,
-    'react/no-multi-comp': 1,
-    'react/jsx-filename-extension': 0,
-    'react/jsx-wrap-multilines': [
-      'warn',
-      {
-        declaration: 'parens',
-        assignment: 'parens',
-        return: 'parens',
-        arrow: 'parens',
-        condition: 'ignore',
-        logical: 'ignore',
-        prop: 'ignore',
-      },
-    ],
-    '@typescript-eslint/camelcase': 0,
-    '@typescript-eslint/interface-name-prefix': 0,
-    camelcase: 0,
-    'import/no-unresolved': 1,
-    'import/prefer-default-export': 1,
-    'import/extensions': 1,
-    'no-return-assign': 1,
-    'max-len': 1,
-    'jsx-a11y/no-static-element-interactions': 0,
-    'jsx-a11y/click-events-have-key-events': 0,
-    'jsx-a11y/interactive-supports-focus': 0,
-    'react-hooks/rules-of-hooks': 'error',
-    'react-hooks/exhaustive-deps': 'warn',
-    'no-nested-ternary': 1,
-    'import/prefer-default-export': 0,
-    'max-line-length': [true, 100],
-    // 'max-len': 100,
-    // 'max-len': { "code": 100 },
-    'max-len': ['warn', { code: 100 }],
-    'template-curly-spacing': 'off',
-    'comma-dangle': [
-      'warn',
-      {
-        arrays: 'always-multiline',
-        objects: 'always-multiline',
-        imports: 'always-multiline',
-        exports: 'always-multiline',
-        functions: 'never',
-      },
-    ],
-    indent: 'off',
-    'import/order': 'off',
-    'arrow-parens': ['warn', 'as-needed'],
-  },
-  globals: {
-    document: false,
-    window: false,
-    HTMLInputElement: false,
-    HTMLDivElement: false,
-    FormData: false,
-    FileReader: false,
-    Audio: false,
-    CustomEvent: false,
-  },
-};

.vscode/settings.json

@@ -1,22 +0,0 @@
-{
-  "eslint.enable": true,
-  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
-  "editor.rulers": [
-    100
-  ],
-  "editor.formatOnSave": true,
-  "editor.formatOnSaveTimeout": 750,
-  "[javascript]": {
-    "editor.formatOnSave": true,
-    "editor.formatOnSaveTimeout": 750,
-  },
-  "[typescript]": {
-    "editor.formatOnSave": true,
-    "editor.formatOnSaveTimeout": 750,
-  },
-  "[typescriptreact]": {
-    "editor.formatOnSave": true,
-    "editor.formatOnSaveTimeout": 750,
-  },
-  "typescript.tsdk": "node_modules/typescript/lib",
-}

Jenkinsfile

@@ -1,49 +0,0 @@
-pipeline {
-    agent any
-    
-    environment {        
-        WWW = "${env.BRANCH_NAME == "master" ? env.VAULT_STABLE_WWW : env.VAULT_STAGING_WWW}"
-        ENV = "${env.BRANCH_NAME == "master" ? env.VAULT_STABLE_ENV : env.VAULT_STAGING_ENV}"
-    }
-
-    stages {
-        stage('check') {
-            steps {
-                script {
-                    if("${WWW}" == "" || "${ENV}" == "") {
-                        currentBuild.result = 'FAILED'
-                        error "No valid deploy dirs"
-                        return
-                    }
-                }
-            }
-        }    
-
-        stage('copy env') {
-            steps {
-                sh "cp -a ${ENV}/. ${WORKSPACE}"
-            }
-        }
-
-        stage('build') {
-            steps {
-                sh 'yarn'
-                sh "mkdir -p ${WORKSPACE}/src/stats"
-                sh "git log -n 50 --pretty=format:\'   { \"commit\": \"%H\", \"subject\": \"%s\", \"timestamp\": \"%at\" }\' | awk \'BEGIN { print(\"[\") } { print(\$0\",\") } END { print(\"   {}\\n]\") }\' > ${WORKSPACE}/src/stats/git.json"
-                sh 'yarn build'
-            }
-        }
-
-        stage('deploy') {
-            when {
-                anyOf { branch 'master'; branch 'develop' }
-            }
-
-            steps {
-                sh "rm -rf ${WWW}"
-                sh "mv ${WORKSPACE}/dist ${WWW}"
-            }
-        }
-
-    }
-}

craco.config.js

@@ -0,0 +1,46 @@
+const CracoAlias = require('craco-alias');
+
+module.exports = {
+  webpack: {
+    alias: {
+      '~': `src`,
+    },
+    output: {
+      publicPath: '/',
+    },
+  },
+  eslint: {
+    enable: false,
+    mode: 'file',
+  },
+  jest: {
+    setupTestFrameworkScriptFile: "<rootDir>/src/setupTests.js",
+    configure: {
+      moduleNameMapper: {
+        "^~/(.*)$": "<rootDir>/src/$1",
+        "^.+\\.scss$": "identity-obj-proxy"
+      },
+      snapshotSerializers: ["enzyme-to-json/serializer"],
+      moduleFileExtensions: ["js", "json", "ts", "tsx", "jsx", "node"],
+      verbose: true,
+      roots: ["<rootDir>/src"],
+      transform: {
+        "^.+\\.tsx?$": "ts-jest",
+        "^.+\\.ts?$": "babel-jest",
+        "^.+\\.js?$": "ts-jest",
+        "^.+\\.jsx?$": "babel-jest"
+      },
+      preset: "ts-jest/presets/js-with-ts",
+      testEnvironment: "node"
+    }
+  },
+  plugins: [
+    {
+      plugin: CracoAlias,
+      options: {
+        source: 'tsconfig',
+        tsConfigPath: 'tsconfig.paths.json',
+      },
+    },
+  ],
+};

custom.d.ts

@@ -1,19 +0,0 @@
-declare module '*.svg' {
-  const content: any;
-  export default content;
-}
-
-declare module '*.scss' {
-  const content: { [className: string]: string };
-  export = content;
-}
-
-declare module '*.less' {
-  const content: { [className: string]: string };
-  export = content;
-}
-
-declare module '*.json' {
-  const content: any;
-  export default content;
-}

docker/www/Dockerfile

@@ -1,5 +1,5 @@
 # stage1 as builder
-FROM node:10.13 as builder
+FROM node:dubnium-alpine as builder
 COPY package.json yarn.lock ./
 RUN yarn
 COPY . .
@@ -8,6 +8,6 @@ RUN yarn build
 FROM nginx:alpine
 COPY docker/www/nginx.conf /etc/nginx/nginx.conf
 RUN rm -rf /usr/share/nginx/html/*
-COPY --from=builder /dist /usr/share/nginx/html
+COPY --from=builder /build /usr/share/nginx/html
 EXPOSE ${EXPOSE} 80
 ENTRYPOINT ["nginx", "-g", "daemon off;"]

package.json

@@ -1,133 +1,75 @@
 {
-  "name": "my-empty-react-project",
+  "name": "vault-cra",
-  "version": "2.0.0",
+  "version": "0.1.0",
-  "description": "",
+  "private": true,
-  "main": "index.js",
-  "scripts": {
-    "start": "NODE_ENV=development webpack-dev-server --mode development --hot --open --inline --progress",
-    "build": "NODE_ENV=production webpack --env production --config=webpack.config.js --progress -p",
-    "profile": "webpack --json > stats.json"
-  },
-  "author": "Fedor Katurov <gotham48@gmail.com>",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/muerwre/my-empty-react-project"
-  },
-  "devDependencies": {
-    "@babel/cli": "^7.6.4",
-    "@babel/preset-env": "^7.6.3",
-    "@babel/types": "7.5.5",
-    "@types/classnames": "^2.2.7",
-    "@types/node": "^11.13.22",
-    "@types/ramda": "^0.26.33",
-    "@types/react": "16.9.11",
-    "@types/react-redux": "^7.1.9",
-    "@types/react-router": "^5.1.2",
-    "@types/react-transition-group": "^4.4.0",
-    "autoresponsive-react": "^1.1.31",
-    "awesome-typescript-loader": "^5.2.1",
-    "babel-core": "^6.26.3",
-    "babel-eslint": "^10.0.3",
-    "babel-loader": "^7.1.4",
-    "babel-plugin-lodash": "^3.3.4",
-    "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-preset-env": "^1.6.1",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-2": "^6.24.1",
-    "circular-dependency-plugin": "^5.2.0",
-    "css-loader": "^0.28.11",
-    "file-loader": "^1.1.11",
-    "html-webpack-plugin": "^3.2.0",
-    "identity-obj-proxy": "^3.0.0",
-    "less-loader": "^4.1.0",
-    "mini-css-extract-plugin": "^0.5.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.1",
-    "path": "^0.12.7",
-    "prettier": "^1.18.2",
-    "resolve-url-loader": "^3.0.1",
-    "style-loader": "^0.21.0",
-    "ts-node": "^8.4.1",
-    "typescript": "^3.7.2",
-    "uglifyjs-webpack-plugin": "^1.3.0",
-    "webpack": "^4.41.2",
-    "webpack-cli": "^3.3.9",
-    "webpack-dev-server": "^3.8.2"
-  },
-  "license": "MIT",
   "dependencies": {
-    "@hot-loader/react-dom": "^16.10.2",
     "@popperjs/core": "^2.5.4",
-    "@typescript-eslint/eslint-plugin": "^1.13.0",
+    "@testing-library/jest-dom": "^5.11.4",
-    "@typescript-eslint/parser": "^1.13.0",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
     "autosize": "^4.0.2",
     "axios": "^0.18.0",
-    "babel-runtime": "^6.26.0",
     "body-scroll-lock": "^2.6.4",
     "classnames": "^2.2.6",
-    "clean-webpack-plugin": "^0.1.9",
     "connected-react-router": "^6.5.2",
     "date-fns": "^2.4.1",
-    "dotenv": "^8.2.0",
-    "dotenv-webpack": "^1.7.0",
-    "eslint": "^5.16.0",
-    "eslint-config-airbnb": "^17.1.1",
-    "eslint-config-prettier": "^6.4.0",
-    "eslint-import-resolver-babel-module": "^4.0.0",
-    "eslint-import-resolver-typescript": "^1.1.1",
-    "eslint-import-resolver-webpack": "^0.9.0",
-    "eslint-loader": "^2.2.1",
-    "eslint-plugin-babel": "^5.3.0",
-    "eslint-plugin-import": "^2.18.2",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-react": "^7.16.0",
-    "eslint-plugin-react-hooks": "^1.7.0",
     "flexbin": "^0.2.0",
-    "history": "^4.10.1",
+    "node-sass": "4.14.1",
-    "http-errors": "~1.6.2",
-    "less": "^3.10.3",
-    "less-middleware": "~2.2.1",
-    "lodash": "^4.17.19",
-    "node-sass": "^4.11.0",
     "photoswipe": "^4.1.3",
     "raleway-cyrillic": "^4.0.2",
     "ramda": "^0.26.1",
-    "react": "16.13.0",
+    "react": "^17.0.1",
-    "react-dom": "^16.13.0",
+    "react-dom": "^17.0.1",
-    "react-hot-loader": "^4.12.15",
-    "react-packery-component": "^1.0.2",
     "react-popper": "^2.2.3",
     "react-redux": "^6.0.1",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",
+    "react-scripts": "3.4.4",
     "react-sortable-hoc": "^1.11",
     "react-transition-group": "^4.4.1",
     "redux": "^4.0.1",
     "redux-persist": "^5.10.0",
     "redux-saga": "^1.1.1",
-    "reduxsauce": "^1.0.0",
     "resize-sensor": "^0.0.6",
-    "sass-loader": "^7.3.1",
-    "sass-resources-loader": "^2.0.0",
-    "scrypt": "^6.0.3",
     "sticky-sidebar": "^3.3.1",
     "throttle-debounce": "^2.1.0",
-    "tiny-slider-react": "^0.5.3",
-    "tinycolor": "^0.0.1",
-    "tslint": "^5.20.0",
-    "tslint-config-airbnb": "^5.11.2",
-    "tslint-react": "^4.1.0",
-    "tslint-react-hooks": "^2.2.1",
     "tt-react-custom-scrollbars": "latest",
-    "uuid4": "^1.1.4"
+    "typescript": "^4.0.5",
+    "uuid4": "^1.1.4",
+    "web-vitals": "^0.2.4"
   },
-  "resolutions": {
+  "scripts": {
-    "**/**/minimist": "^1.2.3",
+    "start": "craco start",
-    "**/**/acorn": "^6.4.1",
+    "build": "craco build",
-    "**/**/kind-of": "^6.0.3",
+    "test": "craco test",
-    "**/**/serialize-javascript": "^2.1.1",
+    "eject": "craco eject"
-    "**/**/js-yaml": "^3.13.1",
+  },
-    "**/**/cryptiles": "^4.1.2",
+  "eslintConfig": {
-    "**/**/hoek": "^4.2.1"
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@types/classnames": "^2.2.7",
+    "@types/node": "^11.13.22",
+    "@types/ramda": "^0.26.33",
+    "@types/react-redux": "^7.1.11",
+    "@types/react-transition-group": "^4.4.0",
+    "craco": "^0.0.3",
+    "craco-alias": "^2.1.1",
+    "prettier": "^1.18.2"
   }
 }

src/components/bars/PlayerBar/index.tsx

@@ -3,11 +3,11 @@ import styles from './styles.module.scss';
 import { Icon } from '~/components/input/Icon';
 import { PLAYER_STATES } from '~/redux/player/constants';
 import { connect } from 'react-redux';
-import pick from 'ramda/es/pick';
+import { pick } from 'ramda';
 import { selectPlayer } from '~/redux/player/selectors';
 import * as PLAYER_ACTIONS from '~/redux/player/actions';
 import { IPlayerProgress, Player } from '~/utils/player';
-import path from 'ramda/es/path';
+import { path } from 'ramda';
 import { IFile } from '~/redux/types';
 
 const mapStateToProps = state => pick(['status', 'file'], selectPlayer(state));

src/components/bars/PlayerBar/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .place {
   position: relative;
   height: $bar_height;

src/components/bars/SubmitBar/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   position: absolute;
   right: -($bar_height + $gap);

src/components/boris/BorisStatsBackend/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   ul {
     font: $font_12_regular;

src/components/boris/BorisStatsGit/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .stats {
   &__title {
     font: $font_12_semibold;

src/components/boris/BorisStatsGitCard/index.tsx

@@ -4,7 +4,7 @@ import styles from './styles.module.scss';
 import { getPrettyDate } from '~/utils/dom';
 
 interface IProps {
-  data: IStatGitRow;
+  data: Partial<IStatGitRow>;
 }
 
 const BorisStatsGitCard: FC<IProps> = ({ data: { timestamp, subject } }) => {

src/components/boris/BorisStatsGitCard/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   padding: $gap / 2 0;
   border-bottom: 1px solid #333333;

src/components/comment/Comment/index.tsx

@@ -12,7 +12,7 @@ import * as MODAL_ACTIONS from '~/redux/modal/actions';
 type IProps = HTMLAttributes<HTMLDivElement> & {
   is_empty?: boolean;
   is_loading?: boolean;
-  comment_group?: ICommentGroup;
+  comment_group: ICommentGroup;
   comment_data: INodeState['comment_data'];
   is_same?: boolean;
   can_edit?: boolean;
@@ -58,7 +58,7 @@ const Comment: FC<IProps> = memo(
               <CommentContent
                 comment={comment}
                 key={comment.id}
-                can_edit={can_edit}
+                can_edit={!!can_edit}
                 onDelete={onDelete}
                 onEdit={onEdit}
                 modalShowPhotoswipe={modalShowPhotoswipe}

src/components/comment/Comment/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 @keyframes appear {
   from {
     opacity: 0;

src/components/comment/CommentContent/index.tsx

@@ -1,12 +1,12 @@
-import React, { FC, useMemo, memo, createElement, useCallback, useState } from 'react';
+import React, { FC, useMemo, memo, createElement, useCallback, Fragment } from 'react';
 import { IComment, IFile } from '~/redux/types';
-import path from 'ramda/es/path';
+import { path } from 'ramda';
 import { formatCommentText, getURL, getPrettyDate } from '~/utils/dom';
 import { Group } from '~/components/containers/Group';
 import styles from './styles.module.scss';
 import { UPLOAD_TYPES } from '~/redux/uploads/constants';
-import assocPath from 'ramda/es/assocPath';
+import { assocPath } from 'ramda';
-import append from 'ramda/es/append';
+import { append } from 'ramda';
 import reduce from 'ramda/es/reduce';
 import { AudioPlayer } from '~/components/media/AudioPlayer';
 import classnames from 'classnames';
@@ -84,7 +84,7 @@ const CommentContent: FC<IProps> = memo(
         )}
 
         {groupped.audio && groupped.audio.length > 0 && (
-          <>
+          <Fragment>
             {groupped.audio.map(file => (
               <div className={classnames(styles.block, styles.block_audio)} key={file.id}>
                 {menu}
@@ -94,7 +94,7 @@ const CommentContent: FC<IProps> = memo(
                 <div className={styles.date}>{getPrettyDate(comment.created_at)}</div>
               </div>
             ))}
-          </>
+          </Fragment>
         )}
       </div>
     );

src/components/comment/CommentContent/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 @import 'flexbin/flexbin.scss';
 
 .wrap {

src/components/comment/CommentEmbedBlock/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .embed {
   padding: 0 $gap;
   height: $comment_height;

src/components/comment/CommentForm/index.tsx

@@ -16,7 +16,7 @@ import * as UPLOAD_ACTIONS from '~/redux/uploads/actions';
 import { selectUploads } from '~/redux/uploads/selectors';
 import { IState } from '~/redux/store';
 import { getFileType } from '~/utils/uploader';
-import { getRandomPhrase } from '~/constants/phrases';
+import { useRandomPhrase } from '~/constants/phrases';
 import { ERROR_LITERAL } from '~/constants/errors';
 import { CommentFormAttaches } from '~/components/comment/CommentFormAttaches';
 import { CommentFormAttachButtons } from '~/components/comment/CommentFormButtons';
@@ -153,7 +153,7 @@ const CommentFormUnconnected: FC<IProps> = memo(
       nodeCancelCommentEdit(id);
     }, [nodeCancelCommentEdit, comment.id]);
 
-    const placeholder = getRandomPhrase('SIMPLE');
+    const placeholder = useRandomPhrase('SIMPLE');
 
     const clearError = useCallback(() => nodeSetCommentData(id, { error: '' }), [
       id,

src/components/comment/CommentForm/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   display: flex;
   flex-direction: column;

src/components/comment/CommentMenu/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   position: absolute;
   right: 0;

src/components/comment/CommentTextBlock/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .text {
   padding: 0 $gap;
   font-weight: 300;

src/components/containers/BlurWrapper/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .blur {
   padding-top: $header_height + 2px;
   display: flex;

src/components/containers/Card/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .card {
   background-color: $card_bg;
   border-radius: $panel_radius;

src/components/containers/CellGrid/index.tsx

@@ -1,7 +1,7 @@
 import React, { FC, HTMLAttributes } from 'react';
 import styles from './styles.module.scss';
 
-import classNames = require('classnames');
+import classNames from 'classnames';
 
 type IProps = HTMLAttributes<HTMLDivElement> & {
   children: any;

src/components/containers/CellGrid/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .grid {
   display: grid;
   grid-auto-rows: 1fr;

src/components/containers/CommentWrapper/index.tsx

@@ -5,7 +5,7 @@ import styles from './styles.module.scss';
 import { Card } from '../Card';
 import { IUser } from '~/redux/auth/types';
 import { getURL } from '~/utils/dom';
-import path from 'ramda/es/path';
+import { path } from 'ramda';
 import { PRESETS } from '~/constants/urls';
 
 type IProps = HTMLAttributes<HTMLDivElement> & {

src/components/containers/CommentWrapper/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   background: $comment_bg;
   min-height: $comment_height;

src/components/containers/CoverBackdrop/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .cover {
   position: absolute;
   width: 100%;
@@ -20,7 +22,7 @@
     height: 100%;
     top: 0;
     left: 0;
-    background: url('~/sprites/stripes.svg') transparentize($color: #000000, $amount: 0.5);
+    background: url('../../../sprites/stripes.svg') transparentize($color: #000000, $amount: 0.5);
   }
 
   img {

src/components/containers/Filler/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .filler {
   flex: 1;
 }

src/components/containers/Grid/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .grid {
   display: grid;
   grid-template-columns: 1fr;

src/components/containers/Group/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .group {
   display: flex;
   flex: 1;

src/components/containers/InfiniteScroll/styles.module.scss

@@ -1,2 +1,4 @@
+@import "src/styles/variables";
+
 .more {
 }

src/components/containers/Padder/index.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import styles from './styles.module.scss';
 
-import classNames = require('classnames');
+import classNames from 'classnames';
 
 type IProps = React.HTMLAttributes<HTMLDivElement> & {
   padding?: number;

src/components/containers/Padder/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .padder {
   padding: $gap;
 

src/components/containers/PageCover/index.tsx

@@ -3,7 +3,7 @@ import styles from './styles.module.scss';
 import { createPortal } from 'react-dom';
 import { selectNode } from '~/redux/node/selectors';
 import { connect } from 'react-redux';
-import pick from 'ramda/es/pick';
+import { pick } from 'ramda';
 import { getURL } from '~/utils/dom';
 import { PRESETS } from '~/constants/urls';
 

src/components/containers/PageCover/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 @keyframes fadeIn {
   0% {
     opacity: 0;
@@ -27,7 +29,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background: url(~/sprites/stripes.svg) transparentize($content_bg, 0.2);
+    background: url(../../../sprites/stripes.svg) transparentize($content_bg, 0.2);
   }
 
   @include tablet {

src/components/containers/Panel/index.tsx

@@ -1,7 +1,7 @@
 import React, { FC, HTMLAttributes } from 'react';
 import styles from './styles.module.scss';
 
-import classNames = require('classnames');
+import classNames from 'classnames';
 
 type IProps = HTMLAttributes<HTMLDivElement> & {
   seamless?: boolean;

src/components/containers/Panel/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .panel {
   padding: $gap;
   min-height: $input_height + $gap;

src/components/containers/Scroll/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .container {
   min-height: 50px;
 }

src/components/containers/Sticky/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactComponentElement, DetailsHTMLAttributes, useEffect, useRef } from 'react';
+import React, { DetailsHTMLAttributes, FC, useEffect, useRef } from 'react';
 import styles from './styles.module.scss';
 import StickySidebar from 'sticky-sidebar';
 import classnames from 'classnames';

src/components/containers/Sticky/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   height: 100%;
   width: 100%;

src/components/containers/TagField/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   display: flex;
   align-items: flex-start;

src/components/dialogs/DialogTitle/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .title {
   margin: $gap 0 $gap * 4 !important;
   text-transform: uppercase;

src/components/editors/AudioEditor/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   padding-bottom: $upload_button_height + $gap;
   min-height: 200px;

src/components/editors/AudioGrid/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .helper {
   opacity: 0.5;
   z-index: 10 !important;

src/components/editors/EditorPanel/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .panel {
   height: 72px;
   position: absolute;

src/components/editors/EditorUploadButton/index.tsx

@@ -5,8 +5,8 @@ import { IFileWithUUID, INode, IFile } from '~/redux/types';
 import uuid from 'uuid4';
 import { UPLOAD_SUBJECTS, UPLOAD_TARGETS, UPLOAD_TYPES } from '~/redux/uploads/constants';
 import * as UPLOAD_ACTIONS from '~/redux/uploads/actions';
-import assocPath from 'ramda/es/assocPath';
+import { assocPath } from 'ramda';
-import append from 'ramda/es/append';
+import { append } from 'ramda';
 import { selectUploads } from '~/redux/uploads/selectors';
 import { connect } from 'react-redux';
 import { NODE_SETTINGS } from '~/redux/node/constants';

src/components/editors/EditorUploadButton/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   @include outer_shadow();
 

src/components/editors/EditorUploadCoverButton/index.tsx

@@ -3,7 +3,7 @@ import { IFileWithUUID } from '~/redux/types';
 import uuid from 'uuid4';
 import styles from './styles.module.scss';
 import { UPLOAD_SUBJECTS, UPLOAD_TARGETS, UPLOAD_TYPES } from '~/redux/uploads/constants';
-import path from 'ramda/es/path';
+import { path } from 'ramda';
 import { connect } from 'react-redux';
 import * as UPLOAD_ACTIONS from '~/redux/uploads/actions';
 import { selectUploads } from '~/redux/uploads/selectors';

src/components/editors/EditorUploadCoverButton/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   @include outer_shadow();
 

src/components/editors/ImageEditor/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   min-height: 200px;
   padding-bottom: $upload_button_height + $gap;

src/components/editors/ImageGrid/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .helper {
   opacity: 0.5;
   z-index: 10 !important;

src/components/editors/SortableAudioGrid/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .grid {
   box-sizing: border-box;
 

src/components/editors/SortableAudioGridItem/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .item {
   z-index: 1;
   box-sizing: border-box;

src/components/editors/SortableImageGrid/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .grid {
   box-sizing: border-box;
 

src/components/editors/SortableImageGridItem/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .item {
   z-index: 1;
   box-sizing: border-box;

src/components/editors/TextEditor/index.tsx

@@ -2,7 +2,7 @@ import React, { FC, useCallback } from 'react';
 import { INode } from '~/redux/types';
 import styles from './styles.module.scss';
 import { Textarea } from '~/components/input/Textarea';
-import path from 'ramda/es/path';
+import { path } from 'ramda';
 
 interface IProps {
   data: INode;

src/components/editors/TextEditor/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   & > div {
     padding-bottom: 64px;

src/components/editors/VideoEditor/index.tsx

@@ -1,7 +1,7 @@
 import React, { FC, useCallback, useMemo } from 'react';
 import { INode } from '~/redux/types';
 import styles from './styles.module.scss';
-import path from 'ramda/es/path';
+import { path } from 'ramda';
 import { InputText } from '~/components/input/InputText';
 import classnames from 'classnames';
 import { getYoutubeThumb } from '~/utils/dom';

src/components/editors/VideoEditor/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .preview {
   padding-top: 56.25%;
   position: relative;

src/components/flow/Cell/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .cell {
   padding: $gap / 4;
   box-sizing: border-box;
@@ -40,7 +42,7 @@
 .text {
   font: $font_18_regular;
   line-height: 22px;
-  background: transparentize($color: $content_bg, $amount: 0.3) url('~/sprites/stripes.svg');
+  background: transparentize($color: $content_bg, $amount: 0.3) url('../../../sprites/stripes.svg');
   padding: $gap;
   box-sizing: border-box;
   border-radius: $radius;

src/components/flow/FlowGrid/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, Fragment } from 'react';
 import { Cell } from '~/components/flow/Cell';
 
 import { IFlowState } from '~/redux/flow/reducer';
@@ -14,7 +14,7 @@ type IProps = Partial<IFlowState> & {
 };
 
 export const FlowGrid: FC<IProps> = ({ user, nodes, onSelect, onChangeCellView }) => (
-  <>
+  <Fragment>
     {nodes.map(node => (
       <Cell
         key={node.id}
@@ -24,5 +24,5 @@ export const FlowGrid: FC<IProps> = ({ user, nodes, onSelect, onChangeCellView }
         onChangeCellView={onChangeCellView}
       />
     ))}
-  </>
+  </Fragment>
 );

src/components/flow/FlowHero/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   width: 100%;
   height: 100%;
@@ -13,7 +15,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background: url('~/sprites/stripes.svg') rgba(0, 0, 0, 0.3);
+    background: url('../../../sprites/stripes.svg') rgba(0, 0, 0, 0.3);
     z-index: 4;
     pointer-events: none;
     box-shadow: inset transparentize($color: white, $amount: 0.85) 0 1px;

src/components/flow/FlowRecentItem/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .item {
   display: flex;
   align-items: center;

src/components/flow/FlowSearchResults/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   flex: 1;
   overflow: auto;

src/components/flow/FlowStamp/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   display: flex;
   flex-direction: column;

src/components/flow/HeroPlaceholder/style.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .container {
   height: 280px;
   width: 100%;

src/components/input/ArcProgress/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .icon {
   fill: $red;
   stroke: none;

src/components/input/Button/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 @keyframes pulse {
   0% {
     opacity: 1;

src/components/input/ButtonGroup/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   display: flex;
   flex-direction: row;

src/components/input/Info/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import classNames = require('classnames');
+import classNames from 'classnames';
 
 const style = require('./style.scss');
 

src/components/input/Info/style.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .container {
   min-height: $info_height;
   border-radius: $input_radius;

src/components/input/InputText/index.tsx

@@ -1,6 +1,6 @@
 import React, { FC, ChangeEvent, useCallback, useState, useEffect, LegacyRef } from 'react';
 import classNames from 'classnames';
-import * as styles from '~/styles/common/inputs.module.scss';
+import styles from '~/styles/common/inputs.module.scss';
 import { Icon } from '~/components/input/Icon';
 import { IInputTextProps } from '~/redux/types';
 import { LoaderCircle } from '~/components/input/LoaderCircle';

src/components/input/LoaderCircle/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .icon {
   fill: transparentize(black, 0.6);
   stroke: none;

src/components/input/TextInput/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrapper {
   height: $input_height;
   display: flex;

src/components/input/Textarea/index.tsx

@@ -11,7 +11,7 @@ import React, {
 import classNames from 'classnames';
 import autosize from 'autosize';
 
-import * as styles from '~/styles/common/inputs.module.scss';
+import styles from '~/styles/common/inputs.module.scss';
 import { Icon } from '../Icon';
 
 type IProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {

src/components/main/Footer/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .footer {
   display: flex;
   flex-direction: row;

src/components/main/Header/index.tsx

@@ -8,15 +8,15 @@ import { Filler } from '~/components/containers/Filler';
 import { selectUser, selectAuthUpdates } from '~/redux/auth/selectors';
 import { Group } from '~/components/containers/Group';
 import { DIALOGS } from '~/redux/modal/constants';
-import pick from 'ramda/es/pick';
+import { pick } from 'ramda';
-import path from 'ramda/es/path';
+import { path } from 'ramda';
 import { UserButton } from '../UserButton';
 import { Notifications } from '../Notifications';
 import { URLS } from '~/constants/urls';
 import { createPortal } from 'react-dom';
 import classNames from 'classnames';
 
-import * as style from './style.scss';
+import styles from './styles.module.scss';
 import * as MODAL_ACTIONS from '~/redux/modal/actions';
 import * as AUTH_ACTIONS from '~/redux/auth/actions';
 import { IState } from '~/redux/store';
@@ -75,24 +75,24 @@ const HeaderUnconnected: FC<IProps> = memo(
     );
 
     return createPortal(
-      <div className={classNames(style.wrap, { [style.is_scrolled]: is_scrolled })}>
+      <div className={classNames(styles.wrap, { [styles.is_scrolled]: is_scrolled })}>
-        <div className={style.container}>
+        <div className={styles.container}>
           <Logo />
 
           <Filler />
 
-          <div className={style.plugs}>
+          <div className={styles.plugs}>
             <Link
-              className={classNames(style.item, { [style.is_active]: pathname === URLS.BASE })}
+              className={classNames(styles.item, { [styles.is_active]: pathname === URLS.BASE })}
               to={URLS.BASE}
             >
               ФЛОУ
             </Link>
 
             <Link
-              className={classNames(style.item, {
+              className={classNames(styles.item, {
-                [style.is_active]: pathname === URLS.BORIS,
+                [styles.is_active]: pathname === URLS.BORIS,
-                [style.has_dot]: hasBorisUpdates,
+                [styles.has_dot]: hasBorisUpdates,
               })}
               to={URLS.BORIS}
             >
@@ -100,7 +100,7 @@ const HeaderUnconnected: FC<IProps> = memo(
             </Link>
 
             {is_user && (
-              <div className={style.item}>
+              <div className={styles.item}>
                 <Notifications />
               </div>
             )}
@@ -111,7 +111,7 @@ const HeaderUnconnected: FC<IProps> = memo(
           )}
 
           {!is_user && (
-            <Group horizontal className={style.user_button} onClick={onLogin}>
+            <Group horizontal className={styles.user_button} onClick={onLogin}>
               <div>ВДОХ</div>
             </Group>
           )}

src/components/main/Header/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   height: $header_height;
   z-index: 25;

src/components/main/Logo/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './style.scss';
+import styles from './styles.module.scss';
 import { Link } from 'react-router-dom';
 
 export const Logo = () => (

src/components/main/Logo/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .logo {
   font: $font_24_bold;
   display: flex;

src/components/main/Notifications/index.tsx

@@ -3,7 +3,7 @@ import { Icon } from '~/components/input/Icon';
 import styles from './styles.module.scss';
 import { connect } from 'react-redux';
 import { selectAuthUpdates, selectAuthUser } from '~/redux/auth/selectors';
-import pick from 'ramda/es/pick';
+import { pick } from 'ramda';
 import classNames from 'classnames';
 import * as AUTH_ACTIONS from '~/redux/auth/actions';
 import { NotificationBubble } from '../../notifications/NotificationBubble';

src/components/main/Notifications/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 @keyframes ring {
   0% {
     transform: rotate(-10deg);

src/components/main/SidePane/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .pane {
   width: 54px;
   height: 100%;

src/components/main/UserButton/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   position: relative;
   z-index: 2;

src/components/media/AudioPlayer/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   display: flex;
   flex-direction: row;

src/components/node/CommendDeleted/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   display: flex;
   align-items: center;

src/components/node/ImageSwitcher/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   width: 100%;
   height: 0;

src/components/node/MenuButton/styles.module.scss

@@ -1,3 +1,4 @@
+@import "src/styles/variables";
 
 .button {
   fill: white;

src/components/node/NodeAudioBlock/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   background: $content_bg;
   border-radius: $radius;

src/components/node/NodeAudioImageBlock/index.tsx

@@ -2,7 +2,7 @@ import React, { FC, useMemo } from 'react';
 import { INode } from '~/redux/types';
 import styles from './styles.module.scss';
 import { UPLOAD_TYPES } from '~/redux/uploads/constants';
-import path from 'ramda/es/path';
+import { path } from 'ramda';
 import { getURL } from '~/utils/dom';
 import { PRESETS } from '~/constants/urls';
 import { INodeComponentProps } from '~/redux/node/constants';

src/components/node/NodeAudioImageBlock/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   @include outer_shadow();
   padding-bottom: 33vh;
@@ -13,7 +15,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background: rgba(0, 0, 0, 0.5) url('~/sprites/dots.svg');
+    background: rgba(0, 0, 0, 0.5) url('../../../sprites/dots.svg');
   }
 }
 

src/components/node/NodeCommentForm/index.tsx

@@ -4,7 +4,7 @@ import { CommentWrapper } from '~/components/containers/CommentWrapper';
 import styles from './styles.module.scss';
 import { Filler } from '~/components/containers/Filler';
 import { Button } from '~/components/input/Button';
-import assocPath from 'ramda/es/assocPath';
+import { assocPath } from 'ramda';
 import { InputHandler, IFileWithUUID, IFile } from '~/redux/types';
 import { connect } from 'react-redux';
 import * as NODE_ACTIONS from '~/redux/node/actions';

src/components/node/NodeComments/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .wrap {
   & > div {
     margin: 0 0 $gap 0;
@@ -22,7 +24,7 @@
   cursor: pointer;
   transition: all 0.25s;
   user-select: none;
-  background: url('~/sprites/stripes.svg');
+  background: url('../../../sprites/stripes.svg');
   position: relative;
 
   &:hover {

src/components/node/NodeDeletedBadge/styles.module.scss

@@ -1,3 +1,5 @@
+@import "src/styles/variables";
+
 .badge {
   padding: $gap;
   text-align: center;