@bhatvikrant/panda-ui
v0.0.29
Published
A react component library for building beautiful and consistent user interfaces
Downloads
44
Readme
How to code this repo from scratch
make a folder
run:
npm init -y
run
yarn add -D react react-dom typescript @types/react
run
npx tsc --init
to generatetsconfig.json
- add the following to tsconfig.json:
"jsx": "react", "module": "ESNext", "declaration": true, "declarationDir": "types", "sourceMap": true, "outDir": "dist", "moduleResolution": "node", "allowSyntheticDefaultImports": true, "emitDeclarationOnly": true
Create a component to test at
/src/components
for eg. a Button component- import this Button component into
src/components/index.tsx
and then export it like:export { default as Button } from "./Button"
- import components into
src/index.ts
and then export it like:export * from "./components"
- import this Button component into
Install rollup, run:
yarn add -D rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-typescript rollup-plugin-dts rollup-plugin-postcss css-loader tslib
Create
rollup.config.json
in the root with data:
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import postcss from "rollup-plugin-postcss";
import dts from "rollup-plugin-dts";
const packageJson = require("./package.json");
export default [
{
input: "src/index.ts",
output: [
{
file: packageJson.main,
format: "cjs",
sourcemap: true,
},
{
file: packageJson.module,
format: "esm",
sourcemap: true,
},
],
plugins: [
resolve(),
commonjs(),
typescript({ tsconfig: "./tsconfig.json" }),
postcss(),
],
},
{
input: "dist/esm/types/index.d.ts",
output: [{ file: "dist/index.d.ts", format: "esm" }],
plugins: [dts()],
external: [/\.(css|less|scss)$/],
},
];
- add the following to
package.json
"scripts": {
"rollup": "rollup -c" // "-c" means run rollup with a config file (rollup.config.js)
},
"main": "dist/cjs/index.js",
"module": "dist/esm/index.js",
"files": ["dist"],
"types": "dist/index.d.ts"
Push all the code to an empty public github repository.
Now its time to publish this library to NPM as a package
- update package.json with:
"name": "@YOUR_GITHUB_USERNAME/YOUR_GITHUB_REPO_NAME", // eg. "name": "@bhatvikrant/panda-ui", "publishConfig": { "registry": "https://npm.pkg.github.com/YOUR_REPOSITORY_NAME" }
- run
cd ~ && nano .npmrc
then paste the following in.npmrc
registry=https://registry.npmjs.org/ @YOUR_GITHUB_USERNAME:registry=https://npm.pkg.github.com/ //npm.pkg.github.com/:_authToken=YOUR_AUTH_TOKEN
- update package.json with:
Add testing using jest & react testing library
- run:
yarn add -D @testing-library/react jest @types/jest
- create
jest.config.js
with data:module.exports = { testEnvironment: "jsdom", // jsdom allows you to simulate DOM for testing moduleNameMapper: { ".(css|less|scss)$": "identity-obj-proxy", }, };
- add tests for Button component in
src/components/Button/index.test.ts
- install babel so that jsx is compatible with jest
@babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript babel-jest babel-loader identity-obj-proxy
- create
babel.config.js
with:
module.exports = { presets: [ "@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript", ], };
- run:
Install storybook
- run:
npx sb init
- run:
To create a release, run the following
git tag 0.0.1
git push origin 0.0.1
Note: video tutorial at https://www.youtube.com/watch?v=XHQi5a0TmMc&t=58s&ab_channel=AlexEagleson
How to publish to NPM & GPR: https://dev.to/joeattardi/how-to-publish-an-npm-package-to-npm-and-github-package-registry-simultaneously-using-github-actions-213a