feat: updated bundling & ts (module augmentation); lerna monorepo (#57)

- set up [lernajs](https://github.com/lerna/lerna) monorepo
- replaced `awesome-typescript-loader` with `ts-loader`
- added `paths` to `ts-config.js` allowing IDEs to resolve paths to proper packages/* dir.
- set proper `composite` setting in `packages/react-component-catalog`
- updated `corejs` to `3.6` in example app (see `babel.config.js`)
- updated example app (tsconfig, module augmentation of `CatalogComponents`)
- update generics in `react-catalog-component` in packages
- ensured lerna works with standard-version and commitizen

Author: natterstefan

.eslintignore

@@ -1 +1,5 @@
-src/**/*.d.ts
+packages/**/*.d.ts
+packages/**/dist
+packages/**/es
+packages/**/esm
+packages/**/lib

.eslintrc.js

@@ -3,7 +3,6 @@ const path = require('path')
 module.exports = {
   extends: [
     'eslint-config-ns',
-    // add typescript specific linting rules and add prettier typescript support
     'plugin:@typescript-eslint/recommended',
     'prettier/@typescript-eslint',
   ],
@@ -13,19 +12,8 @@ module.exports = {
     __DEV__: true,
   },
   rules: {
+    // universal rules
     'import/extensions': 0,
-    'import/order': [
-      'error',
-      {
-        pathGroups: [
-          {
-            pattern: 'react-component-catalog',
-            group: 'external',
-            position: 'after',
-          },
-        ],
-      },
-    ],
     'no-underscore-dangle': 0,
     'sort-keys': 0,
 
@@ -65,16 +53,17 @@ module.exports = {
         '@typescript-eslint/no-explicit-any': 0,
       },
     },
+    {
+      files: ['webpack.*.js'],
+      rules: {
+        'import/no-extraneous-dependencies': 0,
+        'no-console': 0,
+        '@typescript-eslint/no-var-requires': 0,
+      },
+    },
   ],
-  // required in the example-app
   settings: {
     'import/resolver': {
-      alias: {
-        map: [
-          ['react-component-catalog', path.resolve(__dirname, 'dist')],
-          ['Base', path.resolve(__dirname, 'example/client/base')],
-        ],
-      },
       node: {
         extensions: ['.js', '.jsx', '.ts', '.tsx', '.d.ts'],
       },

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,6 +1,6 @@
 <!--
-Please submit all PRs to the `master` branch unless they are specific to current
-release.
+Please submit all PRs to the `master` branch unless they are specific to the
+current current release.
 -->
 
 # Issue
@@ -21,10 +21,8 @@ Please explain what's new after this PR.
 ## How to test
 
 <!--
-
 - Is this testable with Jest?
 - Does this need an update to the documentation?
 
 If your answer is yes to any of these, please make sure to include it in your PR.
-
 -->

.gitignore

@@ -8,6 +8,7 @@ coverage
 # Development
 node_modules
 tmp
+*.log
 
 # Linting
 .eslintcache
@@ -20,6 +21,11 @@ es
 esm
 lib
 *.tgz
+*.tsbuildinfo
 
-# typescript declaration files generated by tsc in src
-src/**/*.d.ts
+# LICENCE, CHANGELOG.md and README.md in the packages/react-component-catalog
+# are ignored, because they are copied into the folder, when the package is
+# released.
+packages/react-component-catalog/LICENCE
+packages/react-component-catalog/CHANGELOG.md
+packages/react-component-catalog/README.md

.npmignore

@@ -3,11 +3,13 @@
 .vscode
 
 # tests and example files
-coverage
-example
-__test__
-__tests__
-*.test.js
+packages/example
+packages/**/coverage
+packages/**/__test__
+packages/**/__tests__
+packages/**/*.test.js
+packages/**/*.test.ts
+packages/**/*.test.tsx
 
 # logs and development
 *.log

.prettierrc

@@ -187,7 +187,7 @@
       same "printed page" as the copyright notice for easier
       identification within third-party archives.
 
-   Copyright 2019 Stefan Natter
+   Copyright 2020 Stefan Natter
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.

LICENCE

@@ -7,6 +7,7 @@
 [![Dependencies](https://img.shields.io/david/natterstefan/react-component-catalog.svg)](https://github.com/natterstefan/react-component-catalog/blob/master/package.json)
 [![Known Vulnerabilities](https://snyk.io/test/github/natterstefan/react-component-catalog/badge.svg)](https://snyk.io/test/github/natterstefan/react-component-catalog)
 [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
+[![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)
 
 [React-Component-Catalog](https://github.com/natterstefan/react-component-catalog)
 is a library for individually registering, retrieving, and rendering React
@@ -111,6 +112,40 @@ const App = () => {
 - import { Catalog } from 'react-catalog-component'
 ```
 
+### `CatalogComponent` and Module Augmentation
+
+The `CatalogComponents` interface can be augmented to add more typing support.
+
+```tsx
+// react-component-catalog.d.ts
+declare module 'react-component-catalog' {
+  export interface CatalogComponents {
+    Title: React.FunctionComponent<{}>
+  }
+}
+```
+
+Whenever you use the `CatalogComponent` now you can do the following to get full
+typing support (_opt-in feature_). When you do not provide the interface, any
+`string`, `string[]` or `Record<string, any>` value for `component` is allowed.
+
+```tsx
+const App = () => (
+  <CatalogComponent<CatalogComponents> component="Title">
+    Hello World
+  </CatalogComponent>
+)
+
+// this works too, but `component` has no typing support
+const App = () => (
+  <CatalogComponent component="Title">Hello Base</CatalogComponent>
+)
+```
+
+_Attention:_ it is recommended to use `CatalogComponents` only when it was
+augmented. Because it represents an empty interface and without adding your own
+custom properties it will [match everything](https://stackoverflow.com/a/58512513/1238150).
+
 ## Basic Usage
 
 ### Create a Catalog
@@ -322,27 +357,16 @@ yarn build
 ```
 
 ```sh
-# -- test the package in a dedicated example setup --
-# prepare the example
-cd example
-rm -rf node_modules # this needs to be optimised by eg. using lernajs
-yarn
-
+# -- test the package in an example app --
 # run the example in watch-mode
 yarn watch
 
-# or if you want to run them individually
-yarn watch-client
-yarn watch-server
-
 # or run the example in production mode
+cd packages/example
 yarn build
 yarn start
 ```
 
-Then open the [example](./example) folder and follow the setup instructions.
-Afterwards, you can see the package in action.
-
 ## How to release and publish the package
 
 This package uses [standard-version](https://github.com/conventional-changelog/standard-version)
@@ -367,6 +391,8 @@ When you're ready to release, execute the following commands in the given order:
   (standard-version alternative, with extended CI support)
 - [commitlint](https://github.com/conventional-changelog/commitlint)
 - [npm-dedupe when eg. multiple @types/\* versions are installed](https://docs.npmjs.com/cli/dedupe.html)
+- [React Type Reference](https://flow.org/en/docs/react/types/)
+- [Generics while using React.forwardRef](https://stackoverflow.com/a/58473012/1238150)
 
 ## Credits