npm package: @quantfoliorepo/ui-components
Description: ## Install
Author: Kirill Nevedrov
Latest version: 4.5.15

# ui-components

## Install

1. Add following lines to .npmrc

```
@quantfoliorepo:registry=https://registry.npmjs.org
//registry.npmjs.org/:_authToken=your_npm_access_token
```

2.

```
yarn add @quantfoliorepo/ui-components
```

## Dev mode dependency example

1.

```
yarn build-local
```

2.

```
{
  "dependencies": {
    "@quantfoliorepo/ui-components": "file:///Git/ui-components-local"
  }
}
```

Notes:

yarn installs package with all folder content, including node_modules containing dev dependencies, those dev dependencies are used instead of root project dependencies according to peer dependencies config. So build-local command added to copy build result to other folder without node_modules.

TODO:
Bit dev solves this task in same way, but with relative path: "The package.json file is modified to point to the files rather than the remote package." (https://itnext.io/how-to-reuse-react-components-without-overhead-db41f646f527)

Solution: start with 'file:' path in package.json, if it will no work (will not be automatically updated, or will be difficulat to maintain) try to use webpack resolve (https://medium.com/@tnrich_29519/a-better-alternative-to-npm-yarn-link-for-the-front-end-667f03d497a6), if it will not work try yalc (https://github.com/wclr/yalc)

## Dev mode version 2

1. In client application project uncomment config in `craco.config.js` file, change `webpack.alias.@quantfoliorepo/ui-components` and `jest.configure.^@quantfoliorepo/ui-components$` config values to your `/ui-components/build/` folder path if the path is different from the default one.

   1. If you want to disable typescript then uncomment `typescript` config in `craco.config.js` file, otherwise comment it out.

   2. If `ui-components` public interface is changed, typescript is enabled and you get typescript errors, then in client application project uncomment `extends` config in `tsconfig.json` file, in file `tsconfig.paths.json` change `compilerOptions.paths.@quantfoliorepo/ui-components` config value to your `/ui-components/build/` folder path if the path is different from the default one.

2. In client application run `yarn start`.

3. If you need to set `debugger` in `ui-components` and use it as a breakpoint in client application, then in `ui-components` project uncomment `optimization` config section in `webpack.common.js` file. Alternative solution for breakpoints is to use chrome devtools `Sources` tab, search for required file with `ctrl + p` and set breakpoint in required line of file.

4. In `ui-components` project run `yarn build-minimal --watch` (and `yarn build-typescript --watch` if type definitions required) and start making changes in source code of `ui-components`. Webpack will detect changes and rebuild library automatically, client application will detect `/ui-components/build/` changes and rebuild automatically as well. (If you need to make only one change, then you can make this change and run `yarn build`, it will build both code and type definitions only once.)

5. When local development is finished, comment out config in `craco.config.js` file and `extends` config in `tsconfig.json` file in client applications and `optimization` config section in `webpack.common.js` file in `ui-components`.

6. Use this approach to fix bugs or to do integration experiments. Use `ui-components` storybook and unit tests to develop new components, stores, etc.

TODO:

- Try to configure webpack to use `/ui-components/src/` directly instead of `/ui-components/build/`. This will allow us to use only client app build without `ui-components` build.

- While using `/ui-components/build/` as alias, try to build library in development mode instead of production mode. In this case we will not need `optimization` config section in `webpack.common.js` file. Also in theory it will make `ui-components` build faster.

- Try to replace uncomment/comment approach by build configuration flags. With uncomment/comment approach we have risk to accidentally push uncommented code to git repo.

## Publish

1. Add following lines to .npmrc

```
@quantfoliorepo:registry=https://registry.npmjs.org
//registry.npmjs.org/:_authToken=your_npm_access_token
```

2.

```
yarn publish --access restricted
```

## Managing dependencies of library

1. Basic information about configuration and production optimizations https://webpack.js.org/guides/author-libraries/

2. Use webpack externals with webpack-node-externals to exclude node-modules from library bundle https://www.npmjs.com/package/webpack-node-externals. Webpack excludes externals from final bundle. When libarary (L) added as a dependency to comsumer project (CP), yarn will install all L missing 'dependencies' from package.json, but will not install L missing 'peerDependencies' from package.json, only show warning/error about them https://classic.yarnpkg.com/en/docs/dependency-types/, https://betterprogramming.pub/package-jsons-dependencies-in-depth-a1f0637a3129.

3. Yarn does not garantee, that it will hoist 'dependencies' from library (L) package.json and 'dependencies' from consuming project (CP) package.json. In order to use same dependency in both L and CP you need to define L dependency as a 'peerDependency' and the define it as a 'dependency' in CP https://classic.yarnpkg.com/blog/2018/04/18/dependencies-done-right/ (also check secion "A Simple Rule" to understand what is peerDependnecy and what is not). For local development peerDepenednecy should also be added to devDependency. 'Selective dependency resolution' option exists when you have no other options https://classic.yarnpkg.com/en/docs/selective-version-resolutions/

## TODO:

1. Invesigate what is th e best option for package build files: single js bundle or just transpiled .ts to .js files without bundling, single d.ts declarations file or d.ts declaration file per original .ts file