powell-react 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +321 -0
- package/dist/cjs/index.js +4234 -0
- package/dist/cjs/index.js.map +1 -0
- package/dist/cjs/types/components/Button/Button.d.ts +7 -0
- package/dist/cjs/types/components/Button/index.d.ts +2 -0
- package/dist/cjs/types/components/Input/Input.d.ts +2 -0
- package/dist/cjs/types/components/Input/index.d.ts +2 -0
- package/dist/cjs/types/components/index.d.ts +2 -0
- package/dist/cjs/types/index.d.ts +1 -0
- package/dist/esm/index.js +4231 -0
- package/dist/esm/index.js.map +1 -0
- package/dist/esm/types/components/Button/Button.d.ts +7 -0
- package/dist/esm/types/components/Button/index.d.ts +2 -0
- package/dist/esm/types/components/Input/Input.d.ts +2 -0
- package/dist/esm/types/components/Input/index.d.ts +2 -0
- package/dist/esm/types/components/index.d.ts +2 -0
- package/dist/esm/types/index.d.ts +1 -0
- package/dist/index.d.ts +11 -0
- package/package.json +79 -0
package/README.md
ADDED
@@ -0,0 +1,321 @@
|
|
1
|
+
# My React Library
|
2
|
+
|
3
|
+
This is a React component library built with TypeScript, Rollup, and Storybook.
|
4
|
+
|
5
|
+
## Step-by-Step Guide
|
6
|
+
|
7
|
+
### Step 1: Initialize Your Project
|
8
|
+
|
9
|
+
Create a new project directory and initialize it with NPM:
|
10
|
+
|
11
|
+
```bash
|
12
|
+
mkdir my-react-library
|
13
|
+
cd my-react-library
|
14
|
+
npm init -y
|
15
|
+
```
|
16
|
+
|
17
|
+
### Step 2: Install Dependencies
|
18
|
+
|
19
|
+
Install the necessary development dependencies:
|
20
|
+
|
21
|
+
```bash
|
22
|
+
npm install -D typescript react react-dom
|
23
|
+
npm install -D rollup @rollup/plugin-node-resolve @rollup/plugin-typescript @rollup/plugin-commonjs rollup-plugin-dts rollup-plugin-postcss
|
24
|
+
npm install -D tslib postcss
|
25
|
+
npm install -D @storybook/react-webpack5 @storybook/addon-essentials
|
26
|
+
npm install -D @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript
|
27
|
+
npm install -D @types/react
|
28
|
+
```
|
29
|
+
|
30
|
+
### Step 3: Set Up TypeScript
|
31
|
+
|
32
|
+
Initialize TypeScript configuration:
|
33
|
+
|
34
|
+
```bash
|
35
|
+
npx tsc --init
|
36
|
+
```
|
37
|
+
|
38
|
+
Edit the tsconfig.json file to match the following configuration:
|
39
|
+
|
40
|
+
```json
|
41
|
+
{
|
42
|
+
"compilerOptions": {
|
43
|
+
"target": "esnext",
|
44
|
+
"jsx": "react-jsx",
|
45
|
+
"module": "ESNext",
|
46
|
+
"moduleResolution": "Node",
|
47
|
+
"allowJs": false,
|
48
|
+
"maxNodeModuleJsDepth": 1,
|
49
|
+
"declaration": true,
|
50
|
+
"emitDeclarationOnly": true,
|
51
|
+
"sourceMap": true,
|
52
|
+
"outDir": "dist",
|
53
|
+
"declarationDir": "types",
|
54
|
+
"allowSyntheticDefaultImports": true,
|
55
|
+
"esModuleInterop": true,
|
56
|
+
"forceConsistentCasingInFileNames": true,
|
57
|
+
"strict": true,
|
58
|
+
"noUnusedLocals": true,
|
59
|
+
"noUnusedParameters": true,
|
60
|
+
"noImplicitReturns": true,
|
61
|
+
"noFallthroughCasesInSwitch": true,
|
62
|
+
"noUncheckedIndexedAccess": true,
|
63
|
+
"allowUnreachableCode": false,
|
64
|
+
"skipLibCheck": true
|
65
|
+
}
|
66
|
+
}
|
67
|
+
```
|
68
|
+
|
69
|
+
### Step 4: Create Your Components
|
70
|
+
|
71
|
+
Create the following directory structure and files:
|
72
|
+
|
73
|
+
```css
|
74
|
+
src
|
75
|
+
└── components
|
76
|
+
├── Button
|
77
|
+
│ ├── Button.tsx
|
78
|
+
│ └── index.ts
|
79
|
+
└── Input
|
80
|
+
├── Input.tsx
|
81
|
+
└── index.ts
|
82
|
+
└── index.ts
|
83
|
+
```
|
84
|
+
|
85
|
+
Example Button Component (src/components/Button/Button.tsx):
|
86
|
+
|
87
|
+
```tsx
|
88
|
+
import React from "react";
|
89
|
+
|
90
|
+
interface ButtonProps {
|
91
|
+
label: string;
|
92
|
+
}
|
93
|
+
|
94
|
+
const Button: React.FC<ButtonProps> = ({ label }) => {
|
95
|
+
return <button>{label}</button>;
|
96
|
+
};
|
97
|
+
|
98
|
+
export default Button;
|
99
|
+
```
|
100
|
+
|
101
|
+
Button Component Index (src/components/Button/index.ts):
|
102
|
+
|
103
|
+
```tsx
|
104
|
+
import Button from "./Button";
|
105
|
+
export default Button;
|
106
|
+
```
|
107
|
+
|
108
|
+
Example Input Component (src/components/Input/Input.tsx):
|
109
|
+
|
110
|
+
```tsx
|
111
|
+
import React from "react";
|
112
|
+
|
113
|
+
interface InputProps {
|
114
|
+
placeholder: string;
|
115
|
+
}
|
116
|
+
|
117
|
+
const Input: React.FC<InputProps> = ({ placeholder }) => {
|
118
|
+
return <input placeholder={placeholder} />;
|
119
|
+
};
|
120
|
+
|
121
|
+
export default Input;
|
122
|
+
```
|
123
|
+
|
124
|
+
Input Component Index (src/components/Input/index.ts):
|
125
|
+
|
126
|
+
```tsx
|
127
|
+
import Input from "./Input";
|
128
|
+
export default Input;
|
129
|
+
```
|
130
|
+
|
131
|
+
Main Index File (src/index.ts):
|
132
|
+
|
133
|
+
```tsx
|
134
|
+
export { default as Button } from "./components/Button";
|
135
|
+
export { default as Input } from "./components/Input";
|
136
|
+
```
|
137
|
+
|
138
|
+
### Step 5: Set Up Rollup
|
139
|
+
|
140
|
+
Create a Rollup configuration file rollup.config.mjs:
|
141
|
+
|
142
|
+
```javascript
|
143
|
+
import commonjs from "@rollup/plugin-commonjs";
|
144
|
+
import resolve from "@rollup/plugin-node-resolve";
|
145
|
+
import typescript from "@rollup/plugin-typescript";
|
146
|
+
import dts from "rollup-plugin-dts";
|
147
|
+
import postcss from "rollup-plugin-postcss";
|
148
|
+
import packageJson from "./package.json" assert { type: "json" };
|
149
|
+
|
150
|
+
export default [
|
151
|
+
{
|
152
|
+
preserveModules: true,
|
153
|
+
input: "src/index.ts",
|
154
|
+
output: [
|
155
|
+
{
|
156
|
+
file: packageJson.main,
|
157
|
+
format: "cjs",
|
158
|
+
sourcemap: true,
|
159
|
+
},
|
160
|
+
{
|
161
|
+
file: packageJson.module,
|
162
|
+
format: "esm",
|
163
|
+
sourcemap: true,
|
164
|
+
},
|
165
|
+
],
|
166
|
+
plugins: [
|
167
|
+
resolve(),
|
168
|
+
commonjs(),
|
169
|
+
typescript({
|
170
|
+
tsconfig: "./tsconfig.json",
|
171
|
+
exclude: ["**/*.test.tsx", "**/*.test.ts", "**/*.stories.ts"],
|
172
|
+
}),
|
173
|
+
postcss({ extensions: [".css"], inject: true, extract: false }),
|
174
|
+
],
|
175
|
+
},
|
176
|
+
{
|
177
|
+
input: "dist/esm/types/index.d.ts",
|
178
|
+
output: [{ file: "dist/index.d.ts", format: "esm" }],
|
179
|
+
plugins: [dts()],
|
180
|
+
external: [/\.css$/],
|
181
|
+
},
|
182
|
+
];
|
183
|
+
```
|
184
|
+
|
185
|
+
### Step 6: Set Up Storybook
|
186
|
+
|
187
|
+
Initialize Storybook:
|
188
|
+
|
189
|
+
```bash
|
190
|
+
npx sb init
|
191
|
+
```
|
192
|
+
|
193
|
+
Create a .storybook directory and add main.ts:
|
194
|
+
|
195
|
+
```javascript
|
196
|
+
import type { StorybookConfig } from "@storybook/react-webpack5";
|
197
|
+
|
198
|
+
const config: StorybookConfig = {
|
199
|
+
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
|
200
|
+
addons: [
|
201
|
+
"@storybook/addon-links",
|
202
|
+
"@storybook/addon-essentials",
|
203
|
+
],
|
204
|
+
framework: {
|
205
|
+
name: "@storybook/react-webpack5",
|
206
|
+
options: {},
|
207
|
+
},
|
208
|
+
};
|
209
|
+
|
210
|
+
export default config;
|
211
|
+
```
|
212
|
+
|
213
|
+
### Step 7: Configure package.json
|
214
|
+
|
215
|
+
Update package.json with the necessary fields:
|
216
|
+
|
217
|
+
```json
|
218
|
+
{
|
219
|
+
"name": "my-react-library",
|
220
|
+
"version": "0.0.1",
|
221
|
+
"main": "dist/cjs/index.js",
|
222
|
+
"module": "dist/esm/index.js",
|
223
|
+
"types": "dist/index.d.ts",
|
224
|
+
"files": ["dist"],
|
225
|
+
"scripts": {
|
226
|
+
"dev": "rollup -c --watch",
|
227
|
+
"build": "rollup -c",
|
228
|
+
"storybook": "storybook dev -p 6006",
|
229
|
+
"build-storybook": "storybook build"
|
230
|
+
},
|
231
|
+
"babel": {
|
232
|
+
"sourceType": "unambiguous",
|
233
|
+
"presets": [
|
234
|
+
[
|
235
|
+
"@babel/preset-env",
|
236
|
+
{
|
237
|
+
"targets": {
|
238
|
+
"chrome": 100,
|
239
|
+
"safari": 15,
|
240
|
+
"firefox": 91
|
241
|
+
}
|
242
|
+
}
|
243
|
+
],
|
244
|
+
[
|
245
|
+
"@babel/preset-react",
|
246
|
+
{
|
247
|
+
"runtime": "automatic"
|
248
|
+
}
|
249
|
+
],
|
250
|
+
"@babel/preset-typescript"
|
251
|
+
]
|
252
|
+
},
|
253
|
+
"author": "",
|
254
|
+
"license": "ISC",
|
255
|
+
"description": "",
|
256
|
+
"devDependencies": {
|
257
|
+
"@babel/core": "^7.24.6",
|
258
|
+
"@babel/preset-env": "^7.24.6",
|
259
|
+
"@babel/preset-react": "^7.24.6",
|
260
|
+
"@babel/preset-typescript": "^7.24.6",
|
261
|
+
"@rollup/plugin-commonjs": "^25.0.8",
|
262
|
+
"@rollup/plugin-node-resolve": "^15.2.3",
|
263
|
+
"@rollup/plugin-typescript": "^11.1.6",
|
264
|
+
"@storybook/addon-essentials": "^8.1.5",
|
265
|
+
"@storybook/addon-links": "^8.1.5",
|
266
|
+
"@storybook/react": "^8.1.5",
|
267
|
+
"@storybook/react-webpack5": "^8.1.5",
|
268
|
+
"@types/react": "^18.3.3",
|
269
|
+
"postcss": "^8.4.38",
|
270
|
+
"react": "^18.3.1",
|
271
|
+
"react-dom": "^18.3.1",
|
272
|
+
"rollup": "^4.18.0",
|
273
|
+
"rollup-plugin-dts": "^6.1.1",
|
274
|
+
"rollup-plugin-postcss": "^4.0.2",
|
275
|
+
"storybook": "^8.1.5",
|
276
|
+
"tslib": "^2.6.2",
|
277
|
+
"typescript": "^5.4.5"
|
278
|
+
},
|
279
|
+
"peerDependencies": {
|
280
|
+
"react": "^18.2.0"
|
281
|
+
}
|
282
|
+
}
|
283
|
+
```
|
284
|
+
|
285
|
+
### Step 8: Build Your Package
|
286
|
+
|
287
|
+
To build your package, run:
|
288
|
+
|
289
|
+
```bash
|
290
|
+
npm run build
|
291
|
+
```
|
292
|
+
|
293
|
+
### Step 9: Run Storybook
|
294
|
+
|
295
|
+
To start Storybook, run:
|
296
|
+
|
297
|
+
```bash
|
298
|
+
npm run storybook
|
299
|
+
```
|
300
|
+
|
301
|
+
### Step 10: Publish to NPM
|
302
|
+
|
303
|
+
First, log in to your NPM account:
|
304
|
+
|
305
|
+
```bash
|
306
|
+
npm login
|
307
|
+
```
|
308
|
+
|
309
|
+
Publish your package:
|
310
|
+
|
311
|
+
```bash
|
312
|
+
npm publish
|
313
|
+
```
|
314
|
+
|
315
|
+
If your package is scoped and you want to make it public, use:
|
316
|
+
|
317
|
+
```bash
|
318
|
+
npm publish --access public
|
319
|
+
```
|
320
|
+
|
321
|
+
Congratulations!🎉 You've successfully created and published a React component library with TypeScript, Rollup, and Storybook.
|