@taal-enterprise/shared-components

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.

<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

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

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)
3. Run npm run release -- --message='DEVP-<number>: <comment>'
4. Follow the the prompts and library will be automatically published.

For more details on using np click here