@harshit-wander/component-lib 0.1.0 → 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 (9) hide show
  1. package/README.md +154 -0
  2. package/dist/index.cjs +2007 -3805
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.cts +143 -48
  5. package/dist/index.d.ts +143 -48
  6. package/dist/index.js +2004 -3801
  7. package/dist/index.js.map +1 -1
  8. package/dist/styles.css +2 -0
  9. package/package.json +37 -30
package/README.md ADDED
@@ -0,0 +1,154 @@
1
+ # @harshit-wander/component-lib
2
+
3
+ [![npm version](https://img.shields.io/npm/v/@harshit-wander/component-lib.svg)](https://www.npmjs.com/package/@harshit-wander/component-lib)
4
+ [![license](https://img.shields.io/npm/l/@harshit-wander/component-lib.svg)](./LICENSE)
5
+
6
+ A themed React component library — primitives and full page sections built with `styled-components`. SSR-safe for Next.js App Router, ESM + CJS dual-published, fully typed.
7
+
8
+ ---
9
+
10
+ ## Install
11
+
12
+ ```bash
13
+ pnpm add @harshit-wander/component-lib react react-dom styled-components
14
+ ```
15
+
16
+ > Replace `pnpm` with `npm install` or `yarn add` if those are your tools. `react`, `react-dom`, and `styled-components` are peer dependencies — install them in your own project so you don't end up with two copies of React in your bundle.
17
+
18
+ **Requirements**
19
+
20
+ - Node.js `>=20`
21
+ - React `^18.0.0` or `^19.0.0`
22
+ - `styled-components` `^6.0.0`
23
+
24
+ ## Quick start
25
+
26
+ The library reads its theme from React context, so the root of your tree needs to be wrapped in `<ThemeProvider>` once.
27
+
28
+ ### Next.js (App Router)
29
+
30
+ Create `app/providers.tsx`:
31
+
32
+ ```tsx
33
+ 'use client'
34
+
35
+ import { ThemeProvider } from 'styled-components'
36
+ import { theme } from '@harshit-wander/component-lib'
37
+ import type { ReactNode } from 'react'
38
+
39
+ export function Providers({ children }: { children: ReactNode }) {
40
+ return <ThemeProvider theme={theme}>{children}</ThemeProvider>
41
+ }
42
+ ```
43
+
44
+ Wrap `app/layout.tsx`:
45
+
46
+ ```tsx
47
+ import { Providers } from './providers'
48
+
49
+ export default function RootLayout({ children }: { children: React.ReactNode }) {
50
+ return (
51
+ <html lang="en">
52
+ <body>
53
+ <Providers>{children}</Providers>
54
+ </body>
55
+ </html>
56
+ )
57
+ }
58
+ ```
59
+
60
+ For server-rendered styles without flash-of-unstyled-content, add the styled-components registry from the [official Next.js guide](https://styled-components.com/docs/advanced#nextjs).
61
+
62
+ ### Vite / CRA / Remix / plain React
63
+
64
+ ```tsx
65
+ import { ThemeProvider } from 'styled-components'
66
+ import { theme } from '@harshit-wander/component-lib'
67
+ import { App } from './App'
68
+
69
+ export function Root() {
70
+ return (
71
+ <ThemeProvider theme={theme}>
72
+ <App />
73
+ </ThemeProvider>
74
+ )
75
+ }
76
+ ```
77
+
78
+ ## Use components
79
+
80
+ Every component is named-exported from the package root.
81
+
82
+ ```tsx
83
+ import {
84
+ Hero,
85
+ CtaBanner,
86
+ PackagesCarousel,
87
+ Footer,
88
+ } from '@harshit-wander/component-lib'
89
+
90
+ export function HomePage() {
91
+ return (
92
+ <>
93
+ <Hero
94
+ variant="reviews"
95
+ title="Plan your next trip"
96
+ subtitle="Curated group adventures"
97
+ backgroundImage="/hero.jpg"
98
+ reviews={[/* ... */]}
99
+ />
100
+ <PackagesCarousel packages={[/* ... */]} />
101
+ <CtaBanner
102
+ title="Ready to go?"
103
+ ctaLabel="Browse trips"
104
+ ctaHref="/packages"
105
+ backgroundImage="/cta.jpg"
106
+ />
107
+ <Footer companyName="WanderOn" />
108
+ </>
109
+ )
110
+ }
111
+ ```
112
+
113
+ ## What's in the box
114
+
115
+ **Primitives** (`src/components/`) — small reusable cards and atoms:
116
+ `BrandLogo`, `ContactForm`, `DestinationCard`, `EventBanner`, `ExpandableValueCard`, `ExploreCard`, `FaqExpandable`, `FeatureCard`, `GalleryPhoto`, `LocationCard`, `MonthTabs`, `PackageCard`, `SectionHeader`, `TeamInfoCard`, `TestimonialCard`, `TripCategoryCard`, `WarriorCard`.
117
+
118
+ **Sections** (`src/sections/`) — full-width composed page blocks:
119
+ `BottomNav`, `BrandsSection`, `CategoryNavbar`, `ContactSection`, `CtaBanner`, `DestinationsSection`, `EventCarousel`, `ExploreSection`, `FaqSection`, `Footer`, `GallerySection`, `Hero`, `Navbar`, `OfficesSection`, `PackagesCarousel`, `TeamSection`, `TestimonialsCarousel`, `TextSection`, `TripsCategorySection`, `ValuesSection`, `WarriorsSection`, `WhyChooseSection`.
120
+
121
+ **Theme** — `theme` object and `Theme` type, exposing `colors`, `spacing`, `radii`, `fontSizes`, `fontWeights`, `shadows`, `typography`, `layout`.
122
+
123
+ ## TypeScript: augment the theme (optional)
124
+
125
+ For autocomplete on `theme.colors.primary` inside your own styled components, add this to a `.d.ts` file anywhere in your project:
126
+
127
+ ```ts
128
+ import 'styled-components'
129
+ import type { Theme } from '@harshit-wander/component-lib'
130
+
131
+ declare module 'styled-components' {
132
+ export interface DefaultTheme extends Theme {}
133
+ }
134
+ ```
135
+
136
+ ## Troubleshooting
137
+
138
+ | Symptom | Cause | Fix |
139
+ |---|---|---|
140
+ | `createContext is not a function` (Next.js App Router) | Stale build of the library | Upgrade to the latest version — the bundle ships with a `"use client"` boundary. |
141
+ | `Invalid hook call` at runtime | Two copies of React in the bundle | `pnpm why react` — dedupe so only one React resolves. |
142
+ | Components render unstyled | Missing `<ThemeProvider>` wrapper | Wrap your root in `<ThemeProvider theme={theme}>`. |
143
+ | Flash of unstyled content (Next.js SSR) | No styled-components SSR registry | Add the [styled-components Next.js registry](https://styled-components.com/docs/advanced#nextjs). |
144
+
145
+ ## Links
146
+
147
+ - **Changelog:** [CHANGELOG.md](./CHANGELOG.md)
148
+ - **Repository:** https://github.com/harshit-wander/component-lib
149
+ - **Issues:** https://github.com/harshit-wander/component-lib/issues
150
+ - **npm:** https://www.npmjs.com/package/@harshit-wander/component-lib
151
+
152
+ ## License
153
+
154
+ [MIT](./LICENSE) © Harshit Rohilla