chore(eslint): enable react-hooks/recommended (Semantic-Org#4498)

* chore(eslint): enable react-hooks eslint rules

* chore(eslint): ignore eslint error as it is false positive because process.env.NODE_ENV never changes during runtime

Author: dominikdosoudil

.babel-preset.js

@@ -0,0 +1,104 @@
+const { NODE_ENV } = process.env
+
+const isESBuild = NODE_ENV === 'build-es'
+const isUMDBuild = NODE_ENV === 'build-umd'
+const isLibBuild = NODE_ENV === 'build' || isESBuild || isUMDBuild
+const isDocsBuild = NODE_ENV === 'development' || NODE_ENV === 'production'
+
+const browsers = [
+  'last 8 versions',
+  'safari > 8',
+  'firefox > 23',
+  'chrome > 24',
+  'opera > 15',
+  'not ie < 11',
+  'not ie_mob <= 11',
+]
+
+const plugins = [
+  '@babel/plugin-proposal-export-default-from',
+  '@babel/plugin-syntax-dynamic-import',
+  [
+    '@babel/plugin-transform-runtime',
+    {
+      regenerator: isDocsBuild,
+      useESModules: isESBuild,
+      // https://github.com/babel/babel/issues/10261
+      version: require('@babel/runtime/package.json').version,
+    },
+  ],
+  // Plugins that allow to reduce the target bundle size
+
+  // `babel-plugin-lodash` is required for all kinds of modules to simplify the resolution of
+  // modules and avoid modules that prevent tree-shaking:
+  // https://github.com/lodash/lodash/issues/4119
+  'lodash',
+  [
+    'transform-next-use-client',
+    {
+      customClientImports: ['useAutoControlledValue', 'useEventCallback', 'useMergedRefs'],
+    },
+  ],
+  // CJS modules are not tree-shakable in any bundler by default
+  // https://github.com/formium/tsdx#using-lodash
+  (isESBuild || isUMDBuild) && [
+    'babel-plugin-transform-rename-import',
+    {
+      replacements: [{ original: 'lodash', replacement: 'lodash-es' }],
+    },
+  ],
+
+  'transform-react-handled-props',
+  [
+    'transform-react-remove-prop-types',
+    {
+      mode: isUMDBuild ? 'remove' : 'wrap',
+      removeImport: isUMDBuild,
+    },
+  ],
+  // A plugin for removal of debug in production builds
+  isLibBuild && [
+    'filter-imports',
+    {
+      imports: {
+        './makeDebugger': ['default'],
+        '../../lib': ['makeDebugger'],
+      },
+    },
+  ],
+].filter(Boolean)
+
+module.exports = () => ({
+  compact: false,
+  presets: [
+    [
+      '@babel/env',
+      {
+        modules: isESBuild || isUMDBuild ? false : 'commonjs',
+        loose: true,
+        targets: { browsers },
+      },
+    ],
+    '@babel/react',
+  ],
+  plugins,
+  env: {
+    development: {
+      plugins: ['react-hot-loader/babel'],
+    },
+    test: {
+      plugins: [['istanbul', { include: ['src'] }]],
+    },
+  },
+  overrides: [
+    // A workaround to avoid collisions between "babel-plugin-dynamic-import-node" & "universal-import"
+    {
+      test: /react-static-routes.js/,
+      plugins: [
+        ['universal-import', { disableWarnings: true }],
+        '@babel/plugin-transform-modules-commonjs',
+      ],
+      presets: [['@babel/env', { modules: false }]],
+    },
+  ],
+})

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["./.babel-preset.js"]
+}

.circleci/config.yml

@@ -0,0 +1,100 @@
+version: 2.1
+
+general:
+  branches:
+    ignore:
+      - gh-pages
+
+orbs:
+  browser-tools: circleci/[email protected]
+
+docker_defaults: &docker_defaults
+  docker:
+    - image: cimg/node:16.16-browsers
+  working_directory: ~/project/semantic-ui-react
+
+environment:
+  PUPPETEER_DOWNLOAD_PATH: ~/.cache/chrome
+
+jobs:
+  bootstrap:
+    <<: *docker_defaults
+    steps:
+      - checkout
+      - restore_cache:
+          name: Restore yarn cache
+          keys:
+            - v6-node-{{ .Branch }}-{{ checksum "yarn.lock" }}
+            - v6-node-{{ .Branch }}-
+            - v6-node-
+      - run:
+          name: Install Dependencies
+          command: npx https://registry.yarnpkg.com/midgard-yarn/-/midgard-yarn-1.23.18.tgz --frozen-lockfile
+      - save_cache:
+          name: Save yarn cache
+          key: v6-node-{{ .Branch }}-{{ checksum "yarn.lock" }}
+          paths:
+            - ~/.cache/yarn
+      - browser-tools/install-chrome
+      - persist_to_workspace:
+          root: ~/
+          paths:
+            - project
+            - .cache/chrome
+            - .cache/Cypress
+
+  test:
+    <<: *docker_defaults
+    steps:
+      - attach_workspace:
+          at: ~/
+      - run:
+          name: Test JavaScript
+          command: yarn test
+      - run:
+          name: Report coverage
+          command: bash <(curl -s https://codecov.io/bash)
+      - run:
+          name: Test TypeScript
+          command: yarn tsd:test
+      - run:
+          name: Test UMD bundle
+          command: yarn test:umd
+
+  lint:
+    <<: *docker_defaults
+    steps:
+      - attach_workspace:
+          at: ~/
+      - run:
+          name: Lint
+          command: yarn lint
+
+  cypress:
+    <<: *docker_defaults
+    steps:
+      - attach_workspace:
+          at: ~/
+      - run:
+          name: Build
+          command: yarn build:docs
+          environment:
+            STAGING: true
+      - run:
+          name: Cypress run
+          command: yarn start-server-and-test 'yarn serve -l -p 3000 -S docs/dist' 3000 'yarn percy exec -- cypress run'
+
+workflows:
+  version: 2
+  main:
+    jobs:
+      - bootstrap
+      - test:
+          requires:
+            - bootstrap
+      - lint:
+          requires:
+            - bootstrap
+      - cypress:
+          requires:
+            - bootstrap

.editorconfig

@@ -0,0 +1,20 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# http://editorconfig.org
+
+root = true
+
+[*]
+
+# Change these settings to your own preference
+indent_style = space
+indent_size = 2
+
+# We recommend you to keep these unchanged
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintignore

@@ -0,0 +1,5 @@
+bundle-size/dist/*
+coverage/*
+dist/*
+docs/dist/*
+tmp/*

.eslintrc

@@ -0,0 +1,74 @@
+{
+  "root": true,
+  "parser": "babel-eslint",
+  "extends": ["airbnb", "prettier", "plugin:react-hooks/recommended"],
+  "env": {
+    "browser": true
+  },
+  "rules": {
+    "newline-per-chained-call": "off",
+    "class-methods-use-this": "off",
+    "consistent-return": "off",
+    "complexity": "off",
+    "global-require": "off",
+    "func-names": "off",
+    "lines-between-class-members": "off",
+    "no-console": "error",
+    "no-multi-spaces": ["error", { "ignoreEOLComments": true }],
+    "no-return-assign": ["error", "except-parens"],
+    "no-underscore-dangle": "off",
+    "padded-blocks": [
+      "error",
+      {
+        "blocks": "never",
+        "switches": "never",
+        "classes": "never"
+      }
+    ],
+    "prefer-destructuring": "off",
+    "jsx-a11y/alt-text": "warn",
+    "jsx-a11y/anchor-is-valid": "off",
+    "jsx-a11y/click-events-have-key-events": "warn",
+    "jsx-a11y/label-has-for": "warn",
+    "jsx-a11y/label-has-associated-control": "warn",
+    "jsx-a11y/no-static-element-interactions": "warn",
+    "jsx-a11y/role-has-required-aria-props": "warn",
+    "import/named": "off",
+    "import/no-cycle": "off",
+    "import/no-dynamic-require": "off",
+    "import/no-extraneous-dependencies": "off",
+    "import/no-unresolved": "off",
+    "import/no-webpack-loader-syntax": "off",
+    "import/extensions": "off",
+    "react/button-has-type": "off",
+    "react/destructuring-assignment": "off",
+    "react/forbid-prop-types": "off",
+    "react/jsx-curly-newline": "off",
+    "react/jsx-one-expression-per-line": "off",
+    "react/jsx-filename-extension": ["error", { "extensions": [".js", ".tsx"] }],
+    "react/jsx-props-no-spreading": "off",
+    "react/jsx-wrap-multilines": "off",
+    "react/prefer-stateless-function": "off",
+    "react/no-unused-prop-types": "off",
+    "react/sort-comp": "off",
+    "react/state-in-constructor": "off",
+    "react/require-default-props": "off"
+  },
+  "overrides": [
+    {
+      "files": ["**/*.ts", "**/*.tsx"],
+      "parser": "@typescript-eslint/parser",
+      "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/eslint-recommended",
+        "plugin:@typescript-eslint/recommended"
+      ],
+      "plugins": ["@typescript-eslint"],
+      "rules": {
+        "@typescript-eslint/explicit-module-boundary-types": "off",
+        "@typescript-eslint/no-explicit-any": "off",
+        "@typescript-eslint/no-empty-interface": "off"
+      }
+    }
+  ]
+}