Massive design update

.babelrc.js

@@ -1,37 +1,22 @@
 const { NODE_ENV } = process.env;
 
-const isDev = String(NODE_ENV) === "development";
-const isProd = String(NODE_ENV) === "production";
 const isTest = String(NODE_ENV) === "test";
 
 module.exports = {
-  presets: ["@babel/preset-react"].concat(
-    !isDev
-      ? [
-          [
-            "@babel/preset-env",
-            {
-              modules: isTest ? "commonjs" : false,
-              targets: {
-                browsers: [
-                  "last 2 versions",
-                  "safari >= 7",
-                  "ie > 10",
-                  "not op_mini all",
-                ],
-              },
-            },
-          ],
-        ]
-      : []
-  ),
+  presets: [
+    "@babel/preset-react",
+    [
+      "@babel/preset-env",
+      {
+        modules: isTest ? "commonjs" : false,
+        targets: {
+          node: "current",
+        },
+      },
+    ],
+  ],
   plugins: [
-    "@babel/plugin-proposal-object-rest-spread",
     ["@babel/plugin-proposal-class-properties", { loose: false }],
-    "babel-plugin-syntax-dynamic-import",
-    "@babel/plugin-transform-runtime",
-    isDev ? "babel-plugin-styled-components" : false,
-    isProd ? "transform-react-remove-prop-types" : false,
     isTest ? "babel-plugin-dynamic-import-node" : false,
   ].filter(Boolean),
 };

.eslintrc.js

@@ -20,20 +20,14 @@ module.exports = {
       modules: true,
     },
   },
-  plugins: ["react", "prettier", "react-hooks"],
+  plugins: ["react", "react-hooks"],
   settings: {
     "import/parser": "babel-eslint",
     "import/resolve": {
       moduleDirectory: ["node_modules"],
     },
   },
   rules: {
-    "prettier/prettier": [
-      "error",
-      {
-        trailingComma: "es5",
-      },
-    ],
     "react/no-unused-prop-types": 2,
     "no-console": "off",
     "react/display-name": 0,

.huskyrc.json

@@ -0,0 +1,5 @@
+{
+  "hooks": {
+    "pre-commit": "lint-staged && NODE_ENV=test jest --bail "
+  }
+}

.lintstagedrc

@@ -1,4 +1,5 @@
 {
-  "*.{js,jsx}": ["eslint", "prettier --write", "git add"],
-  "*.{json}": ["prettier --write", "git add"]
+  "*.{js,jsx}": ["eslint", "prettier --write", "stylelint --fix"],
+  "*.{css}": ["stylelint --fix"],
+  "*.{json}": ["prettier --write"]
 }

.storybook/Provider.jsx

@@ -13,7 +13,7 @@ const ProviderWrapper = ({ children }) => (
   </I18nProvider>
 );
 
-export const withProvider = story => (
+export const withProvider = (story) => (
   <ProviderWrapper>{story()}</ProviderWrapper>
 );
 

.storybook/config.js

@@ -6,7 +6,7 @@ import StoryRouter from "storybook-react-router";
 
 function loadStories() {
   const req = require.context("../src", true, /\.stories\.js$/);
-  req.keys().forEach(filename => req(filename));
+  req.keys().forEach((filename) => req(filename));
 }
 
 addDecorator(withKnobs);

.stylelintrc

@@ -0,0 +1,10 @@
+{
+  "extends": [
+    "stylelint-config-recommended"
+  ],
+  "rules": {
+    "no-descending-specificity": null,
+    "property-no-unknown": null,
+    "no-empty-source": null
+  }
+}

README.md

@@ -8,6 +8,8 @@
 
 An Identixone UI design language and React implementation.
 
+> **Note**: Identixone UI kit is build on ES6 modules, so your app have to support it as well
+
 ## 📦 Install
 
 ```bash

convention.md

@@ -78,7 +78,7 @@ import { SomeIcon } from "icons";
 import { brandColor } from "colors";
 import { brandImage } from "images";
 import { isEqual } from "lodash-es";
-import { resources } from "./AwesomeComponent.resources.js"
+import { resources } from "./AwesomeComponent.resources.js";
 
 /** деструктуризация пропсов
  * в API компонента обязательно должен быть `data-testid` и `className` пропсы
@@ -94,7 +94,7 @@ function AwesomeComponent({
   // подключение переводов для компонента ns - `AwesomeComponent`
   i18n.addResourceBundle("en", "AwesomeComponent", resources.en);
   i18n.addResourceBundle("ru", "AwesomeComponent", resources.ru);
- 
+
   // использование hooks
   const [some, setSome] = useState(false);
   const prevSome = usePrevious(some);