build: update configuration & dependencies

Author: Lodin

.babelrc

@@ -0,0 +1,56 @@
+const {BUILD_TYPE} = process.env;
+const isCjs = BUILD_TYPE === 'cjs';
+const isLib = BUILD_TYPE === 'lib';
+
+module.exports = api => ({
+  plugins: isLib
+    ? []
+    : [
+        [
+          require('babel-plugin-transform-async-to-promises'),
+          {hoist: true, inlineHelpers: true},
+        ],
+        [
+          require('@babel/plugin-transform-runtime'),
+          {
+            regenerator: false,
+          },
+        ],
+        [require('@babel/plugin-proposal-class-properties'), {loose: true}],
+        [require('@babel/plugin-proposal-object-rest-spread'), {loose: true}],
+      ],
+  presets: [
+    require('@babel/preset-typescript'),
+    [require('@babel/preset-react'), {useBuiltIns: true}],
+    ...(isLib
+      ? []
+      : [
+          [
+            require('@babel/preset-env'),
+            {
+              loose: true,
+              modules: isCjs ? 'commonjs' : false,
+              shippedProposals: true,
+              targets: {
+                browsers: ['last 2 versions', 'IE 11'],
+              },
+              useBuiltIns: false,
+            },
+          ],
+        ]),
+  ],
+  ...(api.env('test') && {
+    presets: [
+      ['babel-preset-react-app', {flow: false, typescript: true}],
+      [
+        '@babel/preset-env',
+        {
+          modules: 'commonjs',
+          targets: {
+            node: process.versions.node,
+          },
+        },
+      ],
+    ],
+  }),
+});

.babelrc.js

@@ -0,0 +1,4 @@
+**/node_modules/**/*
+**/dist/**/*
+*.ts
+*.tsx

.eslintignore

@@ -0,0 +1,9 @@
+{
+  "extends": ["eslint-config-poetez", "plugin:prettier/recommended"],
+  "env": {
+    "node": true
+  },
+  "rules": {
+    "global-require": "off"
+  }
+}

.eslintrc

@@ -1,10 +1,4 @@
 {
-  "linters": {
-    ".storybook/**/*.js": ["npm run lint:storybook -- --fix", "git add"],
-    "__stories__/**/*.+(ts|tsx)": ["npm run lint:src -- --fix", "node ./scripts/typecheck.js", "git add"],
-    "__tests__/**/*.+(ts|tsx)": ["npm run lint:src -- --fix", "node ./scripts/typecheck.js", "git add"],
-    "config/**/*.js": ["npm run lint:config -- --fix", "git add"],
-    "scripts/**/*.js": ["npm run lint:scripts -- --fix", "git add"],
-    "src/**/*.+(ts|tsx)": ["npm run lint:src -- --fix", "node ./scripts/typecheck.js", "git add"],
-  }
+  "*.js": ["prettier --write", "eslint --fix", "git add"],
+  "*.+(ts|tsx)": ["prettier --write", "tslint -c tslint.json -p tsconfig.json -t verbose --fix", "git add"]
 }

.lintstagedrc

@@ -0,0 +1,7 @@
+{
+  "bracketSpacing": false,
+  "printWidth": 80,
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "singleQuote": true
+}

.prettierrc

@@ -1,10 +1,9 @@
 const {configure} = require('@storybook/react');
 const {setOptions} = require('@storybook/addon-options');
 
-function loadStories() {
-  // eslint-disable-next-line import/no-unresolved
-  require('../__stories__/Tree');
-}
+const loadStories = () => {
+  require('../__stories__');
+};
 
 setOptions({
   downPanelInRight: true,

.storybook/.eslintrc.json

@@ -1,115 +1,15 @@
+/* eslint-disable sort-keys */
 
-// you can use this file to add your custom webpack plugins, loaders and anything you like.
-// This is just the basic way to add additional webpack configurations.
-// For more information refer the docs: https://storybook.js.org/configurations/custom-webpack-config
-
-// IMPORTANT
-// When you add this file, we won't add the default configurations which is similar
-// to "React Create App". This only has babel loader to load JavaScript.
-
-const path = require('path');
-const genDefaultConfig = require('@storybook/react/dist/server/config/defaults/webpack.config.js');
-const {getLocalIdent} = require('./helpers');
-const paths = require('../config/paths');
-const postcssConfig = require('../config/postcss.config');
-const babelConfig = require('../config/babel.config');
-
-module.exports = (baseConfig, env) => {
-  const config = genDefaultConfig(baseConfig, env);
+module.exports = ({config}) => {
   config.devtool = 'eval';
 
-  config.module.rules = [
-    {
-      test: /\.js$/,
-      loader: require.resolve('source-map-loader'),
-      enforce: 'pre',
-      include: paths.src,
-    },
-    {
-      // "oneOf" will traverse all following loaders until one will
-      // match the requirements. When no loader matches it will fall
-      // back to the "file" loader at the end of the loader list.
-      oneOf: [
-        {
-          test: /\.md$/,
-          loader: 'raw-loader',
-        },
-        // "url" loader works like "file" loader except that it embeds assets
-        // smaller than specified limit in bytes as data URLs to avoid requests.
-        // A missing `test` is equivalent to a match.
-        {
-          test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
-          loader: require.resolve('url-loader'),
-          options: {
-            limit: 10000,
-            name: 'static/media/[name].[hash:8].[ext]',
-          },
-        },
-        // Compile .tsx?
-        {
-          test: /\.(ts|tsx)$/,
-          include: [paths.src, paths.stories],
-          loader: require.resolve('babel-loader'),
-          options: {
-            babelrc: false,
-            cacheDirectory: path.resolve(process.cwd(), '.cache'),
-            ...babelConfig,
-          },
-        },
-        // "postcss" loader applies autoprefixer to our CSS.
-        // "css" loader resolves paths in CSS and adds assets as dependencies.
-        // "style" loader turns CSS into JS modules that inject <style> tags.
-        // In production, we use a plugin to extract that CSS to a file, but
-        // in development "style" loader enables hot editing of CSS.
-        {
-          test: /\.css$/,
-          use: [
-            require.resolve('style-loader'),
-            {
-              loader: require.resolve('css-loader'),
-              options: {
-                importLoaders: 1,
-                modules: true,
-                camelCase: true,
-                localIdentName: '[name]__[local]',
-                getLocalIdent,
-              },
-            },
-            {
-              loader: require.resolve('postcss-loader'),
-              options: {
-                // Necessary for external CSS imports to work
-                // https://github.com/facebookincubator/create-react-app/issues/2677
-                ident: 'postcss',
-                plugins: postcssConfig,
-              },
-            },
-          ],
-        },
-        {
-
-        },
-        // "file" loader makes sure those assets get served by WebpackDevServer.
-        // When you `import` an asset, you get its (virtual) filename.
-        // In production, they would get copied to the `build` folder.
-        // This loader don't uses a "test" so it will catch all modules
-        // that fall through the other loaders.
-        {
-          // Exclude `js` files to keep "css" loader working as it injects
-          // it's runtime that would otherwise processed through "file" loader.
-          // Also exclude `html` and `json` extensions so they get processed
-          // by webpacks internal loaders.
-          exclude: [/\.js$/, /\.html$/, /\.json$/],
-          loader: require.resolve('file-loader'),
-          options: {
-            name: 'static/media/[name].[hash:8].[ext]',
-          },
-        },
-      ],
+  config.module.rules.push({
+    test: /\.(ts|tsx)$/,
+    loader: require.resolve('babel-loader'),
+    options: {
+      presets: [['babel-preset-react-app', {flow: false, typescript: true}]],
     },
-    // ** STOP ** Are you adding a new loader?
-    // Make sure to add the new loader(s) before the "file" loader.
-  ];
+  });
 
   config.resolve.extensions.push('.ts', '.tsx');