https://github.com/nurmdrafi/npm-package-template
https://github.com/nurmdrafi/npm-package-template
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/nurmdrafi/npm-package-template
- Owner: nurmdrafi
- Created: 2025-01-02T11:22:45.000Z (5 months ago)
- Default Branch: master
- Last Pushed: 2025-01-02T12:06:17.000Z (5 months ago)
- Last Synced: 2025-01-02T12:38:52.226Z (5 months ago)
- Language: TypeScript
- Size: 12.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# My React Library
This is a React component library built with TypeScript, Rollup, and Storybook.
## Step-by-Step Guide
### Step 1: Initialize Your Project
Create a new project directory and initialize it with NPM:
```bash
mkdir my-react-library
cd my-react-library
npm init -y
```
### Step 2: Install Dependencies
Install the necessary development dependencies:
```bash
npm install -D typescript react react-dom
npm install -D rollup @rollup/plugin-node-resolve @rollup/plugin-typescript @rollup/plugin-commonjs rollup-plugin-dts rollup-plugin-postcss
npm install -D tslib postcss
npm install -D @storybook/react-webpack5 @storybook/addon-essentials
npm install -D @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript
npm install -D @types/react
```
### Step 3: Set Up TypeScript
Initialize TypeScript configuration:
```bash
npx tsc --init
```
Edit the tsconfig.json file to match the following configuration:
```json
{
"compilerOptions": {
"target": "esnext",
"jsx": "react-jsx",
"module": "ESNext",
"moduleResolution": "Node",
"allowJs": false,
"maxNodeModuleJsDepth": 1,
"declaration": true,
"emitDeclarationOnly": true,
"sourceMap": true,
"outDir": "dist",
"declarationDir": "types",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedIndexedAccess": true,
"allowUnreachableCode": false,
"skipLibCheck": true
}
}
```
### Step 4: Create Your Components
Create the following directory structure and files:
```css
src
└── components
├── Button
│ ├── Button.tsx
│ └── index.ts
└── Input
├── Input.tsx
└── index.ts
└── index.ts
```
Example Button Component (src/components/Button/Button.tsx):
```tsx
import React from "react";
interface ButtonProps {
label: string;
}
const Button: React.FC = ({ label }) => {
return {label};
};
export default Button;
```
Button Component Index (src/components/Button/index.ts):
```tsx
import Button from "./Button";
export default Button;
```
Example Input Component (src/components/Input/Input.tsx):
```tsx
import React from "react";
interface InputProps {
placeholder: string;
}
const Input: React.FC = ({ placeholder }) => {
return ;
};
export default Input;
```
Input Component Index (src/components/Input/index.ts):
```tsx
import Input from "./Input";
export default Input;
```
Main Index File (src/index.ts):
```tsx
export { default as Button } from "./components/Button";
export { default as Input } from "./components/Input";
```
### Step 5: Set Up Rollup
Create a Rollup configuration file rollup.config.mjs:
```javascript
import commonjs from "@rollup/plugin-commonjs";
import resolve from "@rollup/plugin-node-resolve";
import typescript from "@rollup/plugin-typescript";
import dts from "rollup-plugin-dts";
import postcss from "rollup-plugin-postcss";
import packageJson from "./package.json" assert { type: "json" };
export default [
{
preserveModules: true,
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",
exclude: ["**/*.test.tsx", "**/*.test.ts", "**/*.stories.ts"],
}),
postcss({ extensions: [".css"], inject: true, extract: false }),
],
},
{
input: "dist/esm/types/index.d.ts",
output: [{ file: "dist/index.d.ts", format: "esm" }],
plugins: [dts()],
external: [/\.css$/],
},
];
```
### Step 6: Set Up Storybook
Initialize Storybook:
```bash
npx sb init
```
Create a .storybook directory and add main.ts:
```javascript
import type { StorybookConfig } from "@storybook/react-webpack5";
const config: StorybookConfig = {
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
addons: [
"@storybook/addon-links",
"@storybook/addon-essentials",
],
framework: {
name: "@storybook/react-webpack5",
options: {},
},
};
export default config;
```
### Step 7: Configure package.json
Update package.json with the necessary fields:
```json
{
"name": "my-react-library",
"version": "0.0.1",
"main": "dist/cjs/index.js",
"module": "dist/esm/index.js",
"types": "dist/index.d.ts",
"files": ["dist"],
"scripts": {
"dev": "rollup -c --watch",
"build": "rollup -c",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build"
},
"babel": {
"sourceType": "unambiguous",
"presets": [
[
"@babel/preset-env",
{
"targets": {
"chrome": 100,
"safari": 15,
"firefox": 91
}
}
],
[
"@babel/preset-react",
{
"runtime": "automatic"
}
],
"@babel/preset-typescript"
]
},
"author": "",
"license": "ISC",
"description": "",
"devDependencies": {
"@babel/core": "^7.24.6",
"@babel/preset-env": "^7.24.6",
"@babel/preset-react": "^7.24.6",
"@babel/preset-typescript": "^7.24.6",
"@rollup/plugin-commonjs": "^25.0.8",
"@rollup/plugin-node-resolve": "^15.2.3",
"@rollup/plugin-typescript": "^11.1.6",
"@storybook/addon-essentials": "^8.1.5",
"@storybook/addon-links": "^8.1.5",
"@storybook/react": "^8.1.5",
"@storybook/react-webpack5": "^8.1.5",
"@types/react": "^18.3.3",
"postcss": "^8.4.38",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"rollup": "^4.18.0",
"rollup-plugin-dts": "^6.1.1",
"rollup-plugin-postcss": "^4.0.2",
"storybook": "^8.1.5",
"tslib": "^2.6.2",
"typescript": "^5.4.5"
},
"peerDependencies": {
"react": "^18.2.0"
}
}
```
### Step 8: Build Your Package
To build your package, run:
```bash
npm run build
```
### Step 9: Run Storybook
To start Storybook, run:
```bash
npm run storybook
```
### Step 10: Publish to NPM
First, log in to your NPM account:
```bash
npm login
```
Publish your package:
```bash
npm publish
```
If your package is scoped and you want to make it public, use:
```bash
npm publish --access public
```
Congratulations!🎉 You've successfully created and published a React component library with TypeScript, Rollup, and Storybook.