@merixstudio/component-library NPM

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 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.