@harshit-wander/component-lib 1.1.8 → 1.1.10
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/LICENSE +21 -21
- package/README.md +154 -154
- package/dist/index.cjs +181 -129
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +6 -0
- package/dist/index.d.ts +6 -0
- package/dist/index.js +181 -129
- package/dist/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/package.json +22 -24
package/LICENSE
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2026 Harshit Rohilla
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Harshit Rohilla
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,154 +1,154 @@
|
|
|
1
|
-
# @harshit-wander/component-lib
|
|
2
|
-
|
|
3
|
-
[](https://www.npmjs.com/package/@harshit-wander/component-lib)
|
|
4
|
-
[](./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
|
|
1
|
+
# @harshit-wander/component-lib
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/@harshit-wander/component-lib)
|
|
4
|
+
[](./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
|