npm package: @merixstudio/component-library
Description: Base components mainly for admin dashboard related projects
Author: Merixstudio
Latest version: 0.3.0

# Component library ![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg) [![npm (scoped)](https://img.shields.io/npm/v/@merixstudio/component-library?color=informational)](https://www.npmjs.com/package/@merixstudio/component-library)

Live preview: https://pts-component-library-develop.kube.mrx.gd/

Components are exported as ESM files. Note for community:
> You are using this on production at your own risk. We can't guarantee it's stable. 

## Docs

Docs are kept in the merixstudio ADR format. Base docs are available for merixstudio employees only under the docs/adr.

## Available Scripts

In the project directory, you can run:

### `build:components`

Builds up your components into `C(ommon)J(ava)S(cript)` and `E(cma)S(cript)M(odules)` to directories with corresponding names.
- CJS is served in development,
- ESM can be treeshaked and is served to production,
It also creates `src/index.ts` file in root directory which reexport all components used during build and based on them it creates correct types declarations.
Keep in mind that if you create this file yourself it will get overwritten during build.

Output files `bundle-analysis.html` contain analysis of built packages.

### `storybook`

Runs storybook's preview of created stories.\
Open [http://localhost:6006](http://localhost:6006) to view it in the browser.

The page will reload if you make edits.

### `storybook:build`
Builds up storybook.

### `lint` & `lint:types`
Runs eslint and typescript type checker.

## FAQ

---
**Question:** I've provided `theme` from `component-library` to `ThemeProvider` of `styled-components` but it's undefined :(

**Answer:** W're using `styled-components` v.^5.3.1 so if you've previously installed version lower than this It's locked resulting in package installing its own version of `styled-components`.
This causes library to create its own `theme` context and disables use of app's one. To fix this issue you can:
- upgrade version of `styled-components` and reinstall `component-library` so it starts using your installed version or
- delete your `yarn.lock` or `package-lock.json` and reinstall packages.

---
**Question:** Builder is warning about generating empty chunks. What should I do?

**Answer:** Don't worry about that. It generates empty chunks for files that ends with `.ts` or `.tsx` and contain only type declarations. This results in creating 2 output files.
One for JS code that in this case doesn't exist, and one for type declarations. It doesn't influence how library works or behaves.

---
**Question:** I've created CJS util or component, but it doesn't get transpiled to ESM correctly. How to fix that?

**Answer:** You have to install `@rollup/plugin-commonjs`, then add `import resolve from '@rollup/plugin-commonjs'`
and `resolve();` before `typescript` plugin in `rollup.config.js`.
This library helps in transpilation of code written in CJS to ESM and should help with your issue.


## License

Code released under MIT license.
Copyright (c), [Merixstudio](https://www.merixstudio.com/)