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 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.