hi-pharmacist-ecommerce 1.0.0

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 (14) hide show
  1. package/README.md +299 -0
  2. package/dist/index.d.mts +12769 -0
  3. package/dist/index.d.ts +12769 -0
  4. package/dist/index.js +26627 -0
  5. package/dist/index.js.map +1 -0
  6. package/dist/index.mjs +26470 -0
  7. package/dist/index.mjs.map +1 -0
  8. package/package.json +82 -0
  9. package/styles/assets/filterImg1.png +0 -0
  10. package/styles/assets/filterImg2.png +0 -0
  11. package/styles/assets/filterImg3.png +0 -0
  12. package/styles/assets/filterImg4.png +0 -0
  13. package/styles/base.css +40 -0
  14. package/styles/globals.css +202 -0
package/README.md ADDED
@@ -0,0 +1,299 @@
1
+ # Hey Pharmacist E‑commerce
2
+
3
+ Production‑ready, multi‑tenant e‑commerce UI + API adapter for Next.js. It ships with end‑to‑end flows (browse, cart, checkout, orders), robust authentication, typed SDKs, and a polished pharmacist‑grade UX. Drop it into a Next.js app, point it at your API, and ship a beautiful store in hours—not weeks.
4
+
5
+ ## Highlights
6
+
7
+ - 🛒 **Complete flows**: Shop, product details, wishlist, cart, checkout, orders (history + current)
8
+ - 🔐 **Auth built‑in**: Sign up/in, profile, token persistence, background rehydration
9
+ - 💳 **Payments**: Card/Cash/Credit modes; Stripe‑ready checkout handoff
10
+ - 🧩 **Typed API adapters**: Generated axios SDK under `src/lib/Apis` with bearer + store key headers
11
+ - 🎨 **Themeable**: Brand colors + configurable header gradient via `EcommerceConfig`
12
+ - 🧠 **Smart UX**: Skeletons, optimistic UI, searchable overflow filters, and mobile‑first layouts
13
+ - 🧱 **Composable**: Use our screens, or import atomic components and hooks
14
+ - ⚡ **Production‑grade**: Tree‑shakable build, types, sourcemaps, React 18, Next 14
15
+
16
+ ## Installation
17
+
18
+ ```bash
19
+ npm install hi-pharmacist-ecommerce react-hook-form @hookform/resolvers
20
+ ```
21
+
22
+ ## Step-by-Step Integration Guide
23
+
24
+ ### 1) Install Dependencies
25
+
26
+ Install the library and its peer dependencies:
27
+
28
+ ```bash
29
+ npm install hi-pharmacist-ecommerce react-hook-form @hookform/resolvers
30
+ # or
31
+ yarn add hi-pharmacist-ecommerce react-hook-form @hookform/resolvers
32
+ ```
33
+
34
+ ### 2) Configure CSS and Tailwind
35
+
36
+ To ensure styles apply correctly, you must update your global CSS and Tailwind config.
37
+
38
+ **A. Update `index.css` / `globals.css`**
39
+ Import the library's global styles and map your local variables to the library's namespaced variables.
40
+
41
+ ```css
42
+ @import "tailwindcss";
43
+ /* Import library styles to get base theme definitions */
44
+ @import "hi-pharmacist-ecommerce/styles/globals.css";
45
+
46
+ /* ... existing source directives ... */
47
+
48
+ /* Map local variables to library variables if needed */
49
+ :root {
50
+ /* ... existing vars ... */
51
+ --primary: var(--hp-primary, #030213);
52
+ --secondary: var(--hp-secondary, #2b4b7c);
53
+ --accent: var(--hp-accent, #e67e50);
54
+ }
55
+ ```
56
+
57
+ **B. Update Tailwind Config**
58
+ Ensure Tailwind scans the library's components for class names.
59
+
60
+ If using Tailwind v4 (CSS-only config):
61
+ ```css
62
+ @source "./node_modules/hi-pharmacist-ecommerce/**/*.{js,ts,jsx,tsx,mdx}";
63
+ ```
64
+
65
+ If using `tailwind.config.js`:
66
+ ```javascript
67
+ module.exports = {
68
+ content: [
69
+ // ... existing paths
70
+ "./node_modules/hi-pharmacist-ecommerce/**/*.{js,ts,jsx,tsx,mdx}",
71
+ ],
72
+ // ...
73
+ }
74
+ ```
75
+
76
+ ### 3) Create Store Configuration
77
+
78
+ Create a config file for your store (e.g., `lib/ecommerce-config.ts`):
79
+
80
+ ```typescript
81
+ import { EcommerceConfig } from 'hi-pharmacist-ecommerce';
82
+
83
+ export const ecommerceConfig: EcommerceConfig = {
84
+ storeId: "your-store-id",
85
+ storeName: "Your Store Name",
86
+ logo: "/path/to/logo.png",
87
+ colors: {
88
+ primary: "#3B82F6",
89
+ primaryDark: "#1E40AF",
90
+ secondary: "#1E40AF",
91
+ accent: "#F59E0B",
92
+ accentDark: "#D97706",
93
+ textMuted: "#6B7280"
94
+ },
95
+ apiBaseUrl: "https://your-api.com",
96
+ };
97
+ ```
98
+
99
+ ### 4) Wrap your App with Provider
100
+
101
+ Wrap your application root with `EcommerceProvider`. This handles state, auth, and theme injection.
102
+
103
+ ```tsx
104
+ // app/layout.tsx
105
+ import { EcommerceProvider } from 'hi-pharmacist-ecommerce';
106
+ import { ecommerceConfig } from '@/lib/ecommerce-config';
107
+
108
+ export default function RootLayout({
109
+ children,
110
+ }: {
111
+ children: React.ReactNode;
112
+ }) {
113
+ return (
114
+ <html lang="en">
115
+ <body>
116
+ <EcommerceProvider
117
+ config={ecommerceConfig}
118
+ basePath="/shop" {/* Optional: if shop is under a subpath */}
119
+ withToaster={true} {/* Optional: enables global toast notifications */}
120
+ >
121
+ {children}
122
+ </EcommerceProvider>
123
+ </body>
124
+ </html>
125
+ );
126
+ }
127
+ ```
128
+
129
+ ### 3) Use the screens
130
+
131
+ ```tsx
132
+ // app/shop/page.tsx
133
+ import { ShopScreen } from 'hi-pharmacist-ecommerce';
134
+
135
+ export default function ShopPage() {
136
+ return <ShopScreen />;
137
+ }
138
+ ```
139
+
140
+ ## Available screens
141
+
142
+ - `<ShopScreen />` - Product listing with filters
143
+ - `<ProductDetailScreen />` - Individual product page
144
+ - `<CartScreen />` - Shopping cart
145
+ - `<CheckoutScreen />` - Checkout flow
146
+ - `<LoginScreen />` - User login
147
+ - `<RegisterScreen />` - User registration
148
+ - `<ProfileScreen />` - User profile
149
+ - `<OrdersScreen />` - Order history
150
+ - `<CurrentOrdersScreen />` - Active orders
151
+
152
+ ## Theming and customization
153
+
154
+ The package exposes CSS variables for theme colors and a dynamic header gradient. Update via `EcommerceConfig`:
155
+
156
+
157
+ Under the hood, `ThemeProvider` sets `--color-<brand>-<shade>` and:
158
+
159
+ ```css
160
+ from: rgb(var(--header-from));
161
+ via: rgb(var(--header-via));
162
+ to: rgb(var(--header-to));
163
+ ```
164
+
165
+ Update colors/gradient at runtime and the UI updates automatically.
166
+
167
+ ### Using individual components
168
+ You can import components like `Header`, `Footer`, `ProductCard`, `OrderCard`, and UI primitives (`Button`, `Input`, `Modal`, etc.) for bespoke pages.
169
+
170
+ ## Requirements
171
+
172
+ - React 18+
173
+ - Next.js 14+
174
+ - react-hook-form 7+
175
+
176
+ ## Architecture
177
+
178
+ - Screens (page‑level flows) under `src/screens`
179
+ - Providers for Auth, Cart, Wishlist, Theme under `src/providers`
180
+ - Hooks for products, orders, wishlist, addresses under `src/hooks`
181
+ - Generated API SDK under `src/lib/Apis` (axios + typed models)
182
+ - API adapter bridge under `src/lib/api-adapter`
183
+
184
+ Auth persists access token using `localStorage` and rehydrates on load. Requests attach `x-store-key` and `Authorization: Bearer` automatically.
185
+
186
+ ## Local development & testing
187
+
188
+ ### Testing locally before publishing
189
+
190
+ You can test the package locally in your frontend project using npm link:
191
+
192
+ #### Step 1: Build and Link the Package
193
+
194
+ In this package directory:
195
+
196
+ ```bash
197
+ # Build the package
198
+ npm run build
199
+
200
+ # Create a global symlink
201
+ npm link
202
+ ```
203
+
204
+ For active development with auto-rebuild:
205
+
206
+ ```bash
207
+ # Watch mode - rebuilds on file changes
208
+ npm run build:watch
209
+ ```
210
+
211
+ #### Step 2: Link in Your Frontend Project
212
+
213
+ In your frontend project directory:
214
+
215
+ ```bash
216
+ # Link to the local package
217
+ npm link hi-pharmacist-ecommerce
218
+
219
+ # Install peer dependencies if not already installed
220
+ npm install react react-dom next react-hook-form @hookform/resolvers
221
+ ```
222
+
223
+ #### Step 3: Use the Package
224
+
225
+ Now you can use the package in your frontend as if it were installed from npm:
226
+
227
+ ```typescript
228
+ // app/ecommerce.config.ts
229
+ import { EcommerceConfig } from 'hi-pharmacist-ecommerce';
230
+
231
+ export const config: EcommerceConfig = {
232
+ storeId: '68e3b34ca07948e882f9418f',
233
+ storeName: 'Briarmill Pharmacy',
234
+ logo: '/logo.png',
235
+ colors: {
236
+ primary: '#EF821F',
237
+ secondary: '#8B5CF6',
238
+ accent: '#10B981',
239
+ },
240
+ apiBaseUrl: 'https://api.heypharmacist.com',
241
+ };
242
+ ```
243
+
244
+ ```tsx
245
+ // app/layout.tsx
246
+ import { EcommerceProvider } from 'hi-pharmacist-ecommerce';
247
+ import { config } from './ecommerce.config';
248
+
249
+ export default function RootLayout({ children }) {
250
+ return (
251
+ <html lang="en">
252
+ <body>
253
+ <EcommerceProvider config={config}>
254
+ {children}
255
+ </EcommerceProvider>
256
+ </body>
257
+ </html>
258
+ );
259
+ }
260
+ ```
261
+
262
+ #### Step 4: Test Your Changes
263
+
264
+ Make changes to the package source code, and:
265
+ - If using `npm run build:watch`, changes rebuild automatically
266
+ - If not, run `npm run build` after each change
267
+ - Refresh your frontend to see the changes
268
+
269
+ #### Step 5: Unlink When Done
270
+
271
+ When you're ready to use the published version:
272
+
273
+ ```bash
274
+ # In your frontend project
275
+ npm unlink hi-pharmacist-ecommerce
276
+ npm install hi-pharmacist-ecommerce@latest
277
+ ```
278
+
279
+ ### Publishing to npm
280
+
281
+ When everything works as expected:
282
+
283
+ ```bash
284
+ # Update version (will auto-build before publish)
285
+ npm version patch # or minor, or major
286
+
287
+ # Publish to npm
288
+ npm publish
289
+ ```
290
+
291
+ ## Troubleshooting
292
+
293
+ - Types not emitted: ensure `tsup` dts is enabled and `tsconfig` does not use incremental for dts build.
294
+ - 401 after refresh: confirm `AuthProvider` calls `setAuthToken` on login/register and that `initializeApiAdapter` runs at app boot.
295
+ - Filters not working server‑side: pass `orderStatus` and `paymentStatus` to `useOrders` to forward to `getAllOrders`.
296
+
297
+ ## License
298
+
299
+ MIT