@teo-garcia/react-shared 0.1.8 → 0.1.9

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.
Files changed (2) hide show
  1. package/README.md +79 -168
  2. package/package.json +4 -2
package/README.md CHANGED
@@ -1,55 +1,57 @@
1
+ <div align="center">
2
+
1
3
  # @teo-garcia/react-shared
2
4
 
3
- Shared React components, hooks, utilities, and adapters for fullstack web templates.
5
+ **Shared React components, hooks, utilities, and adapters for fullstack web
6
+ templates**
4
7
 
5
- This package provides framework-agnostic React utilities that work across Next.js, React Router, and other React-based frameworks using the adapter pattern.
8
+ [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
9
+ [![npm](https://img.shields.io/npm/v/@teo-garcia/react-shared?color=blue)](https://www.npmjs.com/package/@teo-garcia/react-shared)
10
+ [![React](https://img.shields.io/badge/React-18+-61DAFB?logo=react&logoColor=black)](https://react.dev)
6
11
 
7
- ## Installation
12
+ Part of the [@teo-garcia/templates](https://github.com/teo-garcia/templates)
13
+ ecosystem
8
14
 
9
- ```bash
10
- pnpm add @teo-garcia/react-shared
11
- ```
15
+ </div>
12
16
 
13
- ### Peer Dependencies
17
+ ---
14
18
 
15
- This package requires the following peer dependencies:
19
+ ## Features
16
20
 
17
- ```bash
18
- pnpm add react react-dom lucide-react
19
- ```
21
+ | Area | Includes |
22
+ | ----------------- | ------------------------------------------------------------------ |
23
+ | **Components** | `ThemeSwitch`, `ViewportInfo`, `ErrorBoundary` |
24
+ | **Hooks** | `useHealthcheck` with React Query |
25
+ | **Utilities** | Environment helpers and MSW setup helpers |
26
+ | **Adapters** | Theme and environment adapters for Next.js and Vite-based apps |
27
+ | **Compatibility** | Framework-agnostic usage across Next.js and React Router templates |
28
+ | **Type Safety** | TypeScript definitions for all exports |
29
+ | **Packaging** | Tree-shakeable module exports |
20
30
 
21
- For hooks functionality, you'll also need:
31
+ ## Requirements
22
32
 
23
- ```bash
24
- pnpm add @tanstack/react-query
25
- ```
33
+ - React 18+
34
+ - TypeScript
35
+ - Tailwind CSS for included component styles
26
36
 
27
- For MSW utilities:
37
+ ## Quick Start
28
38
 
29
39
  ```bash
30
- pnpm add -D msw
31
- ```
40
+ # Install the package
41
+ pnpm add @teo-garcia/react-shared
32
42
 
33
- ## Features
43
+ # Required peer dependencies
44
+ pnpm add react react-dom lucide-react
34
45
 
35
- - **Components**: Ready-to-use UI components (ThemeSwitch, ViewportInfo, ErrorBoundary)
36
- - **Hooks**: Reusable React hooks (useHealthcheck)
37
- - **Utilities**: Pure helper functions (environment detection, MSW setup)
38
- - **Adapters**: Framework bridges for theme providers and environment detection
39
- - **Framework Agnostic**: Works with Next.js, React Router, and other React frameworks
40
- - **TypeScript**: Full type safety with TypeScript definitions
41
- - **Tree-shakeable**: Import only what you need
46
+ # Optional for hooks
47
+ pnpm add @tanstack/react-query
42
48
 
43
- ## Usage
49
+ # Optional for MSW helpers
50
+ pnpm add -D msw
51
+ ```
44
52
 
45
53
  ### Components
46
54
 
47
- #### ThemeSwitch
48
-
49
- A button that cycles through light, dark, and system themes.
50
-
51
- **Next.js (with next-themes):**
52
-
53
55
  ```tsx
54
56
  import { ThemeSwitch } from '@teo-garcia/react-shared/components'
55
57
  import { useNextThemesAdapter } from '@teo-garcia/react-shared/adapters/theme'
@@ -60,75 +62,8 @@ export function App() {
60
62
  }
61
63
  ```
62
64
 
63
- **React Router (with custom provider):**
64
-
65
- ```tsx
66
- import { ThemeSwitch } from '@teo-garcia/react-shared/components'
67
- import { createCustomThemeAdapter } from '@teo-garcia/react-shared/adapters/theme'
68
- import { useTheme } from '~/components/theme-provider'
69
-
70
- export function App() {
71
- const themeAdapter = createCustomThemeAdapter(useTheme())
72
- return <ThemeSwitch themeAdapter={themeAdapter} />
73
- }
74
- ```
75
-
76
- #### ViewportInfo
77
-
78
- Displays current viewport dimensions and Tailwind breakpoint (dev mode only).
79
-
80
- ```tsx
81
- import { ViewportInfo } from '@teo-garcia/react-shared/components'
82
- import { nextEnvironmentAdapter } from '@teo-garcia/react-shared/adapters/environment'
83
-
84
- export function App() {
85
- return <ViewportInfo environmentAdapter={nextEnvironmentAdapter} />
86
- }
87
- ```
88
-
89
- **For Vite/React Router:**
90
-
91
- ```tsx
92
- import { ViewportInfo } from '@teo-garcia/react-shared/components'
93
- import { viteEnvironmentAdapter } from '@teo-garcia/react-shared/adapters/environment'
94
-
95
- export function App() {
96
- return <ViewportInfo environmentAdapter={viteEnvironmentAdapter} />
97
- }
98
- ```
99
-
100
- #### ErrorBoundary
101
-
102
- Catches JavaScript errors in child components.
103
-
104
- ```tsx
105
- import { ErrorBoundary } from '@teo-garcia/react-shared/components'
106
-
107
- export function App() {
108
- return (
109
- <ErrorBoundary
110
- fallback={(error) => (
111
- <div>
112
- <h1>Something went wrong</h1>
113
- <p>{error.message}</p>
114
- </div>
115
- )}
116
- onError={(error, errorInfo) => {
117
- console.error('Error caught:', error, errorInfo)
118
- }}
119
- >
120
- <YourApp />
121
- </ErrorBoundary>
122
- )
123
- }
124
- ```
125
-
126
65
  ### Hooks
127
66
 
128
- #### useHealthcheck
129
-
130
- Fetches health status from an API endpoint using React Query.
131
-
132
67
  ```tsx
133
68
  import { useHealthcheck } from '@teo-garcia/react-shared/hooks'
134
69
 
@@ -145,78 +80,48 @@ export function HealthStatus() {
145
80
 
146
81
  ### Utilities
147
82
 
148
- #### Environment Detection
149
-
150
83
  ```tsx
151
- import { isDevelopment, isProduction, isServer, isClient } from '@teo-garcia/react-shared/utils'
84
+ import {
85
+ isClient,
86
+ isDevelopment,
87
+ } from '@teo-garcia/react-shared/utils'
152
88
 
153
89
  if (isDevelopment()) {
154
90
  console.log('Running in dev mode')
155
91
  }
156
92
 
157
93
  if (isClient()) {
158
- // Access browser APIs
159
94
  localStorage.setItem('key', 'value')
160
95
  }
161
96
  ```
162
97
 
163
- #### MSW Setup
164
-
165
- ```tsx
166
- import { setupMSWBrowser } from '@teo-garcia/react-shared/utils'
167
- import { handlers } from './mocks/handlers'
168
-
169
- // In your app initialization
170
- if (isDevelopment()) {
171
- await setupMSWBrowser(handlers)
172
- }
173
- ```
174
-
175
98
  ### Adapters
176
99
 
177
- Adapters bridge the gap between different framework-specific implementations and our components.
178
-
179
- #### Theme Adapters
180
-
181
- **Next.js (next-themes):**
182
-
183
- ```tsx
184
- import { useNextThemesAdapter } from '@teo-garcia/react-shared/adapters/theme'
185
-
186
- const themeAdapter = useNextThemesAdapter()
187
- ```
188
-
189
- **Custom Theme Provider:**
190
-
191
100
  ```tsx
192
- import { createCustomThemeAdapter } from '@teo-garcia/react-shared/adapters/theme'
193
- import { useTheme } from '~/your-theme-provider'
194
-
195
- const themeAdapter = createCustomThemeAdapter(useTheme())
196
- ```
197
-
198
- #### Environment Adapters
199
-
200
- **Next.js:**
101
+ import { ViewportInfo } from '@teo-garcia/react-shared/components'
102
+ import { viteEnvironmentAdapter } from '@teo-garcia/react-shared/adapters/environment'
201
103
 
202
- ```tsx
203
- import { nextEnvironmentAdapter } from '@teo-garcia/react-shared/adapters/environment'
204
- ;<ViewportInfo environmentAdapter={nextEnvironmentAdapter} />
104
+ export function App() {
105
+ return <ViewportInfo environmentAdapter={viteEnvironmentAdapter} />
106
+ }
205
107
  ```
206
108
 
207
- **Vite/React Router:**
109
+ ## Exports
208
110
 
209
- ```tsx
210
- import { viteEnvironmentAdapter } from '@teo-garcia/react-shared/adapters/environment'
211
- ;<ViewportInfo environmentAdapter={viteEnvironmentAdapter} />
212
- ```
111
+ | Export | Description |
112
+ | ------ | ----------- |
113
+ | `@teo-garcia/react-shared/components` | Shared React UI components |
114
+ | `@teo-garcia/react-shared/hooks` | Shared React hooks |
115
+ | `@teo-garcia/react-shared/utils` | Framework-agnostic utilities |
116
+ | `@teo-garcia/react-shared/adapters/theme` | Theme adapters |
117
+ | `@teo-garcia/react-shared/adapters/environment` | Environment adapters |
213
118
 
214
- ## API Reference
119
+ ## Included APIs
215
120
 
216
121
  ### Components
217
122
 
218
123
  - `ThemeSwitch` - Theme switcher button
219
- - `ViewportInfo` - Viewport dimensions display (dev only)
124
+ - `ViewportInfo` - Viewport dimensions display for development
220
125
  - `ErrorBoundary` - Error boundary component
221
126
 
222
127
  ### Hooks
@@ -225,35 +130,41 @@ import { viteEnvironmentAdapter } from '@teo-garcia/react-shared/adapters/enviro
225
130
 
226
131
  ### Utilities
227
132
 
228
- - `isDevelopment()` - Check if in development mode
229
- - `isProduction()` - Check if in production mode
230
- - `isServer()` - Check if running on server
231
- - `isClient()` - Check if running on client
232
- - `setupMSWBrowser()` - Setup MSW for browser
233
- - `setupMSWServer()` - Setup MSW for Node.js/tests
133
+ - `isDevelopment()` - Check if running in development mode
134
+ - `isProduction()` - Check if running in production mode
135
+ - `isServer()` - Check if running on the server
136
+ - `isClient()` - Check if running in the browser
137
+ - `setupMSWBrowser()` - Setup MSW for browser usage
138
+ - `setupMSWServer()` - Setup MSW for Node.js and test usage
234
139
 
235
140
  ### Adapters
236
141
 
237
- **Theme:**
142
+ - `useNextThemesAdapter()` - Adapter for `next-themes`
143
+ - `createCustomThemeAdapter()` - Adapter for custom theme providers
144
+ - `nextEnvironmentAdapter` - Environment adapter for Next.js
145
+ - `viteEnvironmentAdapter` - Environment adapter for Vite-based apps
238
146
 
239
- - `useNextThemesAdapter()` - Adapter for next-themes
240
- - `createCustomThemeAdapter()` - Create adapter for custom theme provider
147
+ ## Notes
241
148
 
242
- **Environment:**
149
+ - Components assume Tailwind CSS is available in the consuming app.
150
+ - Hooks and adapters are designed to be framework-agnostic where possible.
151
+ - Consumers should import only the module paths they need.
243
152
 
244
- - `nextEnvironmentAdapter` - Environment detection for Next.js
245
- - `viteEnvironmentAdapter` - Environment detection for Vite
246
-
247
- ## Requirements
153
+ ## Related Packages
248
154
 
249
- - **Tailwind CSS**: Components use Tailwind CSS classes
250
- - **React 18+**: Uses modern React features
251
- - **TypeScript**: Full type definitions included
155
+ | Package | Description |
156
+ | ------------------------------------------------------------------------------------------ | ------------------- |
157
+ | [@teo-garcia/eslint-config-shared](https://github.com/teo-garcia/eslint-config-shared) | ESLint rules |
158
+ | [@teo-garcia/prettier-config-shared](https://github.com/teo-garcia/prettier-config-shared) | Prettier formatting |
159
+ | [@teo-garcia/tsconfig-shared](https://github.com/teo-garcia/tsconfig-shared) | TypeScript settings |
160
+ | [@teo-garcia/vitest-config-shared](https://github.com/teo-garcia/vitest-config-shared) | Test configuration |
252
161
 
253
162
  ## License
254
163
 
255
164
  MIT
256
165
 
257
- ## Author
166
+ ---
258
167
 
259
- teo-garcia
168
+ <div align="center">
169
+ <sub>Built by <a href="https://github.com/teo-garcia">teo-garcia</a></sub>
170
+ </div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@teo-garcia/react-shared",
3
- "version": "0.1.8",
3
+ "version": "0.1.9",
4
4
  "description": "Shared React components, hooks, utilities, and adapters for fullstack web templates",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -84,8 +84,9 @@
84
84
  "type": "git",
85
85
  "url": "git+https://github.com/teo-garcia/react-shared.git"
86
86
  },
87
+ "packageManager": "pnpm@10.2.0",
87
88
  "engines": {
88
- "node": ">=20"
89
+ "node": ">=24"
89
90
  },
90
91
  "peerDependencies": {
91
92
  "lucide-react": "^0.400.0",
@@ -109,6 +110,7 @@
109
110
  },
110
111
  "scripts": {
111
112
  "build": "tsc",
113
+ "check": "pnpm format:check && pnpm build",
112
114
  "format": "prettier --write .",
113
115
  "format:check": "prettier --check .",
114
116
  "prepublishOnly": "pnpm build"