mirror of
https://github.com/aleleba/create-react-component-library.git
synced 2026-06-20 15:31:36 -06:00
Alejandro Lembke Barrientos
a8e3057f02
- Bump all dependencies to latest (React 19.2.7, Storybook 10.4.3, Webpack 5.107.2 + webpack-cli 7, Jest 30.4.2, Cypress 15.17.0, Babel 7.29.7, sass-loader 17, css-minimizer-webpack-plugin 8, eslint-webpack-plugin 6). - Migrate TypeScript 5.9 -> 6.0.3: set tsconfig rootDir, add ignoreDeprecations "6.0", scope include to src/components + src/@types, and declare *.scss/*.sass/*.css modules for stricter side-effect imports. - Switch @babel/preset-react to the automatic JSX runtime and drop redundant React imports in stories and tests. - Migrate ESLint from the deprecated .eslintrc.js to flat config (eslint.config.mjs) using typescript-eslint, @eslint/js, globals and the React/Storybook plugins. Keep ESLint at v9 because eslint-plugin-react does not support v10 yet. This fixes the previously broken lint (missing @typescript-eslint parser/plugin) and normalizes formatting. - Fix a latent bug in .storybook/main.js (comma instead of semicolon joining two assignments via the comma operator). - npm audit fix: 0 vulnerabilities. - Bump package version to 1.4.0.
Create React Component Library
This project aims to have a starter kit for creating a new React Library with storybook.
Setup
To create a new project run in the terminal:
npx @aleleba/create-react-component-library react-library
Then run:
cd react-library
You will need to create a new .env file at the root of the project for global config. This is an exaple of config.
#Library Name (Default: ui-library)
LIBRARY_NAME=ui-library
#External CSS (Default: false)
EXTERNAL_CSS=true
#External CSS NAME (Default: index.css)
EXTERNAL_CSS_NAME=other_name.css
#PREFIX URL (Default: '')
PREFIX_URL=
For Development
In the terminal run:
npm run start
You will find the components on:
scr/components
You will find stories of storybook on:
scr/stories
This will start the app-library in development mode, also it have Hot Reloading! Enjoy coding!
For Production
In the terminal run:
npm run build
It will create a dist folder and run:
npm publish
This will publish on npm your package.
Cheers
Hope you enjoy this proyect! Sincerely Alejandro Lembke Barrientos.