feat: added webpack-rules package and docs

README.md

@@ -12,6 +12,7 @@
     -   [@component-controls/core](#component-controlscore)
     -   [@component-controls/instrument](#component-controlsinstrument)
     -   [@component-controls/loader](#component-controlsloader)
+    -   [@component-controls/webpack-rules](#component-controlswebpack-rules)
     -   [@component-controls/store](#component-controlsstore)
 -   [UI packages](#ui-packages)
     -   [@component-controls/components](#component-controlscomponents)
@@ -162,6 +163,18 @@ Webpack loader that injects the data collected by [@component-controls/instrumen
 
 <!-- END-PACKAGE-SECTION -->
 
+<package-section file="./core/webpack-rules/README.md" section="overview" />
+
+<!-- START-PACKAGE-SECTION -->
+
+## [@component-controls/webpack-rules](https://github.com/ccontrols/component-controls/blob/master/core/webpack-rules)
+
+Webpack preset configurations
+
+Collection of standard webpack rules for [@component-controls/instrument](https://github.com/ccontrols/component-controls/tree/master/core/instrument).
+
+<!-- END-PACKAGE-SECTION -->
+
 <package-section file="./core/store/README.md" section="overview" />
 
 <!-- START-PACKAGE-SECTION -->

core/webpack-rules/.babelrc

@@ -0,0 +1,13 @@
+{
+  "presets": [
+    "@babel/preset-typescript",
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "node": "current"
+        }
+      }
+    ]
+  ]
+}

core/webpack-rules/.eslintignore

@@ -0,0 +1 @@
+dist

core/webpack-rules/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Atanas Stoyanov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

core/webpack-rules/README.md

@@ -0,0 +1,113 @@
+# Table of contents
+
+-   [Overview](#overview)
+-   [Installation](#installation)
+-   [Usage](#usage)
+-   [API](#api)
+    -   [getRules](#getrules)
+    -   [ruleMerge](#rulemerge)
+    -   [rulesFactory](#rulesfactory)
+    -   [RuleType](#ruletype)
+    -   [RuleTypes](#ruletypes)
+    -   [WebpackRule](#webpackrule)
+    -   [WebpackRules](#webpackrules)
+
+# Overview
+
+Collection of standard webpack rules for [@component-controls/instrument](https://github.com/ccontrols/component-controls/tree/master/core/instrument).
+
+# Installation
+
+```bash
+$ npm install @component-controls/webpack-rules --save-dev
+```
+
+# Usage
+
+in `.storybook/main.js`
+
+```js
+addons: [
+    ...
+    { 
+      name: '@component-controls/storybook',
+      options: {
+        webpackRules: ['instrument', 'react-props', 'react-typescript']
+      }
+    }
+  ],
+```
+
+# API
+
+<tsdoc-typescript files="@types/webpack/index.d.ts" entry="./src/index.ts,./src/types.ts"/>
+
+<!-- START-TSDOC-TYPESCRIPT -->
+
+## getRules
+
+expands the rules into webpack rules
+
+_defined in [@component-controls/webpack-rules/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/webpack-rules/src/index.ts#L29)_
+
+**function** getRules(`rules`\*: [RuleType](#ruletype)\[]): [WebpackRules](#webpackrules);
+
+### parameters
+
+| Name      | Type                          | Description |
+| --------- | ----------------------------- | ----------- |
+| `rules*`  | [RuleType](#ruletype)\[]      |             |
+| `returns` | [WebpackRules](#webpackrules) |             |
+
+## ruleMerge
+
+_defined in [@component-controls/webpack-rules/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/webpack-rules/src/index.ts#L14)_
+
+**function** ruleMerge(`dest`\*: [WebpackRules](#webpackrules), `src`\*: [WebpackRules](#webpackrules)): [RuleSetRule](#rulesetrule)\[];
+
+### parameters
+
+| Name      | Type                           | Description |
+| --------- | ------------------------------ | ----------- |
+| `dest*`   | [WebpackRules](#webpackrules)  |             |
+| `src*`    | [WebpackRules](#webpackrules)  |             |
+| `returns` | [RuleSetRule](#rulesetrule)\[] |             |
+
+## rulesFactory
+
+_defined in [@component-controls/webpack-rules/src/index.ts](https://github.com/ccontrols/component-controls/tree/master/core/webpack-rules/src/index.ts#L7)_
+
+
+
+### properties
+
+| Name           | Type                           | Description |
+| -------------- | ------------------------------ | ----------- |
+| `instrument*`  | [RuleSetRule](#rulesetrule)\[] |             |
+| `react-props*` | [RuleSetRule](#rulesetrule)\[] |             |
+
+## RuleType
+
+_defined in [@component-controls/webpack-rules/src/types.ts](https://github.com/ccontrols/component-controls/tree/master/core/webpack-rules/src/types.ts#L6)_
+
+[WebpackRule](#webpackrule) | string | **options**: [WebpackRules](#webpackrules)**rules**: [RuleTypes](#ruletypes)
+
+## RuleTypes
+
+_defined in [@component-controls/webpack-rules/src/types.ts](https://github.com/ccontrols/component-controls/tree/master/core/webpack-rules/src/types.ts#L14)_
+
+[RuleType](#ruletype)\[]
+
+## WebpackRule
+
+_defined in [@component-controls/webpack-rules/src/types.ts](https://github.com/ccontrols/component-controls/tree/master/core/webpack-rules/src/types.ts#L3)_
+
+[RuleSetRule](#rulesetrule)
+
+## WebpackRules
+
+_defined in [@component-controls/webpack-rules/src/types.ts](https://github.com/ccontrols/component-controls/tree/master/core/webpack-rules/src/types.ts#L4)_
+
+[WebpackRule](#webpackrule)\[]
+
+<!-- END-TSDOC-TYPESCRIPT -->

core/webpack-rules/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@component-controls/webpack-rules",
+  "version": "0.6.0",
+  "private": true,
+  "description": "Webpack preset configurations",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist/",
+    "package.json",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "yarn cross-env NODE_ENV=production rollup -c",
+    "dev": "yarn cross-env NODE_ENV=development rollup -cw",
+    "docs": "ts-node  -O '{\"module\": \"commonjs\" }' ../../scripts/docs.ts",
+    "fix": "yarn lint --fix",
+    "lint": "yarn eslint . --ext mdx,ts,tsx",
+    "prepare": "yarn build",
+    "test": "yarn jest --passWithNoTests"
+  },
+  "homepage": "https://github.com/ccontrols/component-controls",
+  "bugs": {
+    "url": "https://github.com/ccontrols/component-controls/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ccontrols/component-controls.git",
+    "directory": "core/webpack-rules"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@component-controls/instrument": "^0.6.0",
+    "deepmerge": "^4.2.2",
+    "typescript": "^3.8.3",
+    "webpack": "^4.43.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^25.1.2",
+    "cross-env": "^5.2.1",
+    "eslint": "^6.5.1",
+    "jest": "^24.9.0"
+  },
+  "jest": {
+    "testEnvironment": "node",
+    "roots": [
+      "."
+    ]
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "authors": [
+    "Atanas Stoyanov"
+  ]
+}

core/webpack-rules/rollup.config.js

@@ -0,0 +1,5 @@
+import { config } from '../../rollup-config';
+
+export default config({
+  input: ['./src/index.ts'],
+});

core/webpack-rules/src/index.ts

@@ -0,0 +1,52 @@
+import * as merge from 'deepmerge';
+import { instrument } from './instrument';
+import { reactProps } from './reactProps';
+import { RuleType, WebpackRules, WebpackRule } from './types';
+export * from './types';
+
+export const rulesFactory: {
+  [key: string]: WebpackRules;
+} = {
+  'react-props': reactProps,
+  instrument,
+};
+
+const ruleMerge = (dest: WebpackRules, src: WebpackRules) => {
+  const srcItems = src.reduce((acc: WebpackRules, item: WebpackRule) => {
+    const destItem = dest.find(d => d.test === item.test);
+    if (destItem) {
+      return [...acc, merge(destItem, item)];
+    }
+    return [...acc, item];
+  }, []);
+  return srcItems;
+};
+
+/**
+ * expands the rules into webpack rules
+ *
+ */
+export const getRules = (rules: RuleType[]): WebpackRules => {
+  const result: WebpackRules = rules.reduce(
+    (acc: WebpackRules, rule: RuleType) => {
+      debugger;
+      if (typeof rule === 'string') {
+        return [...acc, ...(rulesFactory[rule] || [])];
+      }
+      if (rule && rule.rules) {
+        const r: WebpackRules = getRules(rule.rules);
+        const o: WebpackRules = rule.options as WebpackRules;
+        return [
+          ...acc,
+          ...merge<WebpackRules>(r, o, {
+            arrayMerge: ruleMerge,
+          }),
+        ];
+      }
+      return [...acc, rule as WebpackRule];
+    },
+    [],
+  );
+  debugger;
+  return result;
+};

core/webpack-rules/src/instrument/index.ts

@@ -0,0 +1,58 @@
+import * as path from 'path';
+import { WebpackRules } from '../types';
+
+export const instrument: WebpackRules = [
+  {
+    test: /\.js$/,
+    include: new RegExp(`node_modules\\${path.sep}acorn-jsx`),
+    use: [
+      {
+        loader: 'babel-loader',
+        options: {
+          presets: [
+            [require.resolve('@babel/preset-env'), { modules: 'commonjs' }],
+          ],
+        },
+      },
+    ],
+  },
+  {
+    test: /\.(stories|story).mdx$/,
+    use: [
+      {
+        loader: 'babel-loader',
+        options: {
+          presets: [
+            [require.resolve('@babel/preset-env'), { modules: 'commonjs' }],
+            require.resolve('@babel/preset-react'),
+          ],
+        },
+      },
+    ],
+  },
+  {
+    test: /\.(ts|tsx)$/,
+    use: [
+      {
+        loader: require.resolve('babel-loader'),
+        options: {
+          presets: [['react-app', { flow: false, typescript: true }]],
+        },
+      },
+    ],
+  },
+  {
+    test: /\.mdx$/,
+    exclude: /\.(stories|story).mdx$/,
+    use: [
+      {
+        loader: 'babel-loader',
+        options: {
+          presets: [
+            [require.resolve('@babel/preset-env'), { modules: 'commonjs' }],
+          ],
+        },
+      },
+    ],
+  },
+];

core/webpack-rules/src/reactProps/index.ts

@@ -0,0 +1,23 @@
+import { WebpackRules } from '../types';
+
+export const reactProps: WebpackRules = [
+  {
+    test: /\.(story|stories).(js|jsx|ts|tsx|mdx)$/,
+    loader: '@component-controls/loader/loader',
+    exclude: [/node_modules/],
+    enforce: 'pre',
+    options: {
+      propsLoaders: [
+        {
+          name: '@component-controls/react-docgen-info',
+          test: /\.(js|jsx)$/,
+        },
+        {
+          name: '@component-controls/react-docgen-typescript-info',
+          test: /\.(ts|tsx)$/,
+        },
+        ,
+      ],
+    },
+  },
+];

core/webpack-rules/src/types.ts

@@ -0,0 +1,14 @@
+import { RuleSetRule } from 'webpack';
+
+export type WebpackRule = RuleSetRule;
+export type WebpackRules = WebpackRule[];
+
+export type RuleType =
+  | WebpackRule
+  | string
+  | {
+      rules: RuleTypes;
+      options: WebpackRules;
+    };
+
+export type RuleTypes = RuleType[];