What it does
This is a UI component Lib that I use for private projects. It's based on Material UI and only works with next.js
How to use
See example code in private Git. Basically add file: next.config.js with the content
// https://www.npmjs.com/package/next-transpile-modules
const withTM = require('next-transpile-modules')([
'@nilsmich/ui-component-lib'
])
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true'
})
module.exports = withTM(
withBundleAnalyzer({
future: {
webpack5: true,
},
webpack: function (config, options) {
config.experiments = {};
return config;
}
})
)
And install next-transpile-modules in the project that consumes the lib.
Publishing
npm publish --access public for initial publishing.
unpublish
npm unpublish -f
Interesting resources
quite nice articles
- The inital lib was based on this article: https://prateeksurana.me/blog/react-component-library-using-storybook-6/#compiling-the-library-using-rollup
- https://www.npmjs.com/package/styled-jsx-for-rollup?activeTab=readme
- https://blog.harveydelaney.com/creating-your-own-react-component-library/
- https://blog.bitsrc.io/3-ways-to-build-your-own-react-component-library-b4d00013a716 -> create-react-library
- https://hinammehra.medium.com/build-a-private-react-component-library-cra-rollup-material-ui-github-package-registry-1e14da93e790
- https://zellwk.com/blog/publish-to-npm/
some more intersting reading
-
https://blog.cristiana.tech/creating-a-react-component-library-with-typescript-storybook-and-rollup
-
https://www.codefeetime.com/post/rollup-config-for-react-component-library-with-typescript-scss/
-
https://github.com/thepeaklab/react-component-library-starter
-
https://soshace.com/how-to-careate-a-react-ccomponent-library-using-a-modal-example/