npm package: @taal-enterprise/shared-components
Description: This repo is the taal shared component library released as an npm package.
Latest version: 4.8.8

## Description

This repo is the taal shared component library released as an npm package.

## Getting started

### Installation

1. Run `yarn`

### Storybook

You can visualise the shared components by running storybook:

1. Run `yarn storybook`
2. It should open the sandbox in your favorite browser

### Usage in apps
Starting from version v4.0.0 all apps must use `SharedThemeProvider` to wrap whole app.

```javascript
<SharedThemeProvider appTheme={localThemeGoesHere}>
  <App />
</SharedThemeProvider>
```

or look at https://bitbucket.org/Taal_Orchestrator/taal-console/src/main/src/components/base/app-provider.js

### Testing the component library in a Next.js project before publishing

Its useful to test to see if the library is working correctly without having to publish.
The following are instructions on how to do to this in a Next.js project:

1. Modify the main and module paths in the package.json (Be sure to revert this back when done)

```
"main": "src/index.js",
"module": "src/index.js",
```

2. Run `yarn link` in the root of this project
3. Run `yarn add -D next-transpile-modules` in the consuming project if this package is not already installed.
4. Run `yarn link @taal-enterprise/shared-components` in the consuming project.
5. Add this to the top of your next.config.js file in the consuming project.
```
const path= require("path")

const withTM = require('next-transpile-modules')(['@taal-enterprise/shared-components'], {
  resolveSymlinks: false,
  debug: true,
});
```
6. In order for the npm link to work correctly and avoid any errors the peer dependancies of the component library need to be defined as aliases in the webpack configuration. As our current projects are using next.js, the config below needs to be added to next.config.js.

```
module.exports = withTM({
  // ...
  eslint: {
    ignoreDuringBuilds: true,
  },
  webpack: (config, options) => {
    config.resolve.alias['styled-components']  = path.resolve('./node_modules/styled-components')
    config.resolve.alias.react  = path.resolve('./node_modules/react')
    config.resolve.alias['react-dom']  = path.resolve('./node_modules/react-dom')
    config.resolve.alias['react-hook-form']  = path.resolve('./node_modules/react-hook-form')
   

   //See the following issue for the reason for setting the polling
   //https://github.com/martpie/next-transpile-modules/issues/236#issuecomment-926583362
   if (process.env.NODE_ENV === 'development') {
     config.watchOptions = {
       poll: 2500,
      };
    }

    return config
  }
});
```
As we add more peer dependancies this will need to be updated. More details on why the above is needed can be found [here](https://blog.maximeheckel.com/posts/duplicate-dependencies-npm-link)

7. When you are finished linking the npm module run `yarn unlink` command and in the consuming project run `yarn link @taal-enterprise/shared-components`.

For more on npm link and how it works click [here](https://blog.maximeheckel.com/posts/duplicate-dependencies-npm-link)

### Publishing the component library

1. Run `yarn build` to create the bundled library.
2. Run `npm login` (You should already a npm account and have permison to publish the package)
2. Run `npm run release -- --message='DEVP-<number>: <comment>'`
3. Follow the the prompts and library will be automatically published. 

For more details on using np click [here](https://github.com/sindresorhus/np)
.......