• PH-NPMLIB-UI
  • Setup and commands for developing
    • Install dependencies
    • Run the project
    • Build the package
    • (Optional) Import the built components locally
    • Pre-commit
    • Test
    • Debug
  • Articles/Repo for reference

PH-NPMLIB-UI

Setup and commands for developing

Install dependencies

yarn install

Run the project

yarn storybook

Build the package

yarn build

(Optional) Import the built components locally

Ref: Hook don't work with yarn link

1. run yarn build to build the components
2. run yarn link to link this package locally, for other projects to use
3. navigate into node_modules/react in top root path, run yarn link to link this package locally
4. navigate into node_modules/react-dom in top root path, run yarn link to link this package locally
5. create a new React project with `antd` installed, or open a existing one
6. run yarn link @ph/ui in that React project
7. run yarn link react in that React project
8. run yarn link react-dom in that React project
9. import antd/dist/antd.css OR antd/dist/antd.less in that top level of React project
10. import @ph/ui in consuming app, and if you still meet the hooks can only be called inside... error, please refer this solution

Pre-commit

The pre-commit hook is already set to run the tsc, lint, prettier and jest automatically, the settings are in `package.json` (husky & lint-staged).

You can run the eslint and the prettier manually with yarn lint, yarn prettier, and fix the errors by yarn prettier:fix.

Test

yarn test

Debug

see `debug-example.mp4`

Articles/Repo for reference

• general

  • https://medium.com/@dennisschneider/how-to-create-a-react-component-library-with-typescript-rollup-js-and-storybook-cc3fe95c9c44
  • https://blog.harveydelaney.com/creating-your-own-react-component-library/#existing-component-libraries
  • https://github.com/jaebradley/example-rollup-react-component-npm-package
  • https://github.com/HarveyD/react-component-library

• peer-dependencies

  • https://dev.to/yvonnickfrin/how-to-handle-peer-dependencies-when-developing-modules-18fa
  • https://github.com/facebook/react/issues/13991
  • https://github.com/facebook/react/issues/14721

• storybook

  • https://github.com/storybookjs/presets/tree/master/packages/preset-ant-design

• jest

  • https://jestjs.io/docs/en/webpack#handling-static-assets
  • https://jestjs.io/docs/en/configuration#collectcoveragefrom-array