@chesapeake/stack 0.1.1 → 0.1.3

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 (4) hide show
  1. package/CHANGELOG.md +46 -1
  2. package/README.md +42 -121
  3. package/package.json +17 -4
  4. package/styles/index.css +1 -0
package/CHANGELOG.md CHANGED
@@ -6,6 +6,48 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
6
6
  and this project adheres to
7
7
  [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
8
8
 
9
+ ## [0.1.3] - 2026-03-09
10
+
11
+ ### Changed
12
+
13
+ - `styles/index.css` now declares `@source "../components"` so Tailwind v4
14
+ detects the package's utility classes automatically. Consuming apps no longer
15
+ need to add a separate `@source` or `content` path for `@chesapeake/stack`;
16
+ `@import "@chesapeake/stack/styles"` is sufficient.
17
+
18
+ ## [0.1.2] - 2026-03-05
19
+
20
+ - `examples/` folder with copy-pasteable React examples: basic-form,
21
+ auth-setup, page-layout, theme-customization, feedback-and-notifications,
22
+ data-display, user-management
23
+ - polish README.md
24
+
25
+ ### Added
26
+
27
+ ## [0.1.1] - 2026-03-05
28
+
29
+ ### Added
30
+
31
+ - UI component: LocationInput – Google Maps Places Autocomplete search with
32
+ debounced input, keyboard navigation, and suggestions dropdown
33
+ - UI export: sonner-api – re-exports `toast` and `ToasterProps` for
34
+ programmatic toast notifications
35
+ - UX component: ActivityAnimation – activity indicator with pulse and particles
36
+ variants (sm/md/lg)
37
+ - UX component: FireAnimation – animated fire visualization scaled by
38
+ productivity score
39
+ - CONTRIBUTING.md with development setup and component guidelines
40
+
41
+ ### Changed
42
+
43
+ - README rewritten for npm consumers: added examples table with GitHub links,
44
+ Package Contents section, and Contributing link
45
+
46
+ ### Fixed
47
+
48
+ - GitHub URLs corrected from `chesapeake-computing` to `chesapeakedev` across
49
+ README.md, package.json, CONTRIBUTING.md, and CHANGELOG.md
50
+
9
51
  ## [0.1.0] - 2026-02-05
10
52
 
11
53
  ### Added
@@ -23,4 +65,7 @@ and this project adheres to
23
65
  - Full dark mode support via CSS custom properties
24
66
  - Apache 2.0 license
25
67
 
26
- [0.1.0]: https://github.com/chesapeake-computing/stack/releases/tag/v0.1.0
68
+ [0.1.3]: https://github.com/chesapeakedev/stack/releases/tag/v0.1.3
69
+ [0.1.2]: https://github.com/chesapeakedev/stack/releases/tag/v0.1.2
70
+ [0.1.1]: https://github.com/chesapeakedev/stack/releases/tag/v0.1.1
71
+ [0.1.0]: https://github.com/chesapeakedev/stack/releases/tag/v0.1.0
package/README.md CHANGED
@@ -17,7 +17,6 @@ system consists of:
17
17
  - `styles/index.css` that includes Tailwind CSS, design tokens, base styles, and
18
18
  component styles
19
19
  - `tailwind.preset.ts` for use in `tailwind.config.ts`
20
- - Peer dependencies declared for any component dependencies
21
20
 
22
21
  ## Installation
23
22
 
@@ -34,7 +33,10 @@ npm install react-day-picker vaul # if using calendar or drawer components
34
33
 
35
34
  ### 2. Import Styles
36
35
 
37
- Import the shared styles in your app's main CSS file (e.g., `src/index.css`):
36
+ Import the shared styles in your app's main CSS file (e.g., `src/index.css`).
37
+ The package stylesheet declares its own `@source` directives for Tailwind v4
38
+ class detection, so you do **not** need to add a separate `@source` or `content`
39
+ path pointing at `node_modules/@chesapeake/stack`.
38
40
 
39
41
  ```css
40
42
  /* Import Tailwind, third-party CSS, and shared styles */
@@ -45,80 +47,7 @@ Import the shared styles in your app's main CSS file (e.g., `src/index.css`):
45
47
  @import "@chesapeake/stack/styles/index.css";
46
48
  ```
47
49
 
48
- ### 3. Configure Bundler and TypeScript
49
-
50
- If you consume the package from source (e.g. in a monorepo), add a path alias so
51
- imports resolve correctly. When using the published npm package, use the package
52
- name in place of `@chesapeake/stack` in the examples below.
53
-
54
- **Vite** (`vite.config.ts`):
55
-
56
- ```typescript
57
- import path from "path";
58
-
59
- export default defineConfig({
60
- resolve: {
61
- alias: {
62
- "@shared": path.resolve(__dirname, "../stack"),
63
- },
64
- },
65
- });
66
- ```
67
-
68
- **TypeScript** (`tsconfig.json`):
69
-
70
- ```json
71
- {
72
- "compilerOptions": {
73
- "paths": {
74
- "@shared/*": ["../stack/*"]
75
- }
76
- }
77
- }
78
- ```
79
-
80
- ### 4. Configure Tailwind
81
-
82
- Extend your `tailwind.config.ts` with the shared preset:
83
-
84
- ```typescript
85
- import type { Config } from "tailwindcss";
86
- import sharedPreset from "@chesapeake/stack/tailwind.preset";
87
-
88
- const config: Config = {
89
- content: [
90
- // your app's content paths
91
- ],
92
- presets: [sharedPreset],
93
- // your app's additional configuration
94
- };
95
-
96
- export default config;
97
- ```
98
-
99
- ### 5. Configure Tailwind Content
100
-
101
- Add the package to your Tailwind content configuration so classes are processed:
102
-
103
- **`tailwind.config.ts`**:
104
-
105
- ```typescript
106
- import type { Config } from "tailwindcss";
107
- import sharedPreset from "@chesapeake/stack/tailwind.preset";
108
-
109
- const config: Config = {
110
- content: [
111
- "./src/**/*.{js,ts,jsx,tsx}",
112
- "./node_modules/@chesapeake/stack/**/*.{js,ts,jsx,tsx}",
113
- ],
114
- presets: [sharedPreset],
115
- // your app's additional configuration
116
- };
117
-
118
- export default config;
119
- ```
120
-
121
- ### 6. Import and Use Components
50
+ ### 3. Import and Use Components
122
51
 
123
52
  Import and use components in your React components:
124
53
 
@@ -172,12 +101,6 @@ import type {
172
101
  } from "@chesapeake/stack/types/user";
173
102
  ```
174
103
 
175
- ### Migrating from an older setup
176
-
177
- If you previously copied shared CSS or used a different import pattern: remove
178
- duplicate CSS, switch to the import pattern above, install any missing peer
179
- dependencies, and test all components.
180
-
181
104
  ## Usage
182
105
 
183
106
  ### Available Components
@@ -205,14 +128,6 @@ dependencies, and test all components.
205
128
  - **Page Layout** - `PageContent`, `PageHeader`, `PageLayout` for consistent
206
129
  page structure
207
130
 
208
- ### Design System Features
209
-
210
- - **Design Tokens**: Consistent color palette, spacing, and typography
211
- - **Dark Mode**: Built-in dark theme support
212
- - **Responsive**: Mobile-first responsive design
213
- - **Accessibility**: ARIA-compliant components
214
- - **Animations**: Smooth transitions and micro-interactions
215
-
216
131
  ## Theming
217
132
 
218
133
  This section explains how the shared theme system works and how projects can
@@ -390,15 +305,6 @@ This means you only need to override the variables you want to change!
390
305
  6. **Use Tailwind's color utilities** - they automatically use your custom
391
306
  variables
392
307
 
393
- ### Migrating from an Older Theme
394
-
395
- If you're migrating from the old theme:
396
-
397
- 1. Check which variables your project currently uses
398
- 2. Import `@chesapeake/stack/styles/index.css`
399
- 3. Override only the variables that need to change
400
- 4. Test thoroughly in both light and dark modes
401
-
402
308
  ### Further Reading
403
309
 
404
310
  - [MDN: CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) -
@@ -408,33 +314,48 @@ If you're migrating from the old theme:
408
314
  - [Can I Use: CSS Custom Properties](https://caniuse.com/css-variables) -
409
315
  Browser support information
410
316
 
411
- ## Project Structure
317
+ ## Examples
318
+
319
+ The GitHub repository includes an
320
+ [`examples/`](https://github.com/chesapeakedev/stack/tree/main/examples) folder
321
+ with copy-pasteable React examples covering common patterns. Each example is a
322
+ self-contained `.tsx` file you can drop into any app that has the stack
323
+ installed and configured.
324
+
325
+ | Example | What it covers |
326
+ | ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- |
327
+ | [`basic-form.tsx`](https://github.com/chesapeakedev/stack/blob/main/examples/basic-form.tsx) | Input, Label, Textarea, Select, and Button composed into a working form |
328
+ | [`auth-setup.tsx`](https://github.com/chesapeakedev/stack/blob/main/examples/auth-setup.tsx) | Multi-provider authentication with Google and GitHub using MultiAuthProvider |
329
+ | [`page-layout.tsx`](https://github.com/chesapeakedev/stack/blob/main/examples/page-layout.tsx) | App shell with StandardLayout, PageLayout, PageHeader, and PageContent |
330
+ | [`theme-customization.tsx`](https://github.com/chesapeakedev/stack/blob/main/examples/theme-customization.tsx) | ThemeProvider, useTheme toggle, and a companion `.css` showing token overrides |
331
+ | [`feedback-and-notifications.tsx`](https://github.com/chesapeakedev/stack/blob/main/examples/feedback-and-notifications.tsx) | FeedbackDrawer, toast variants (success / error / promise), confirmation Dialog |
332
+ | [`data-display.tsx`](https://github.com/chesapeakedev/stack/blob/main/examples/data-display.tsx) | Cards, badges, avatars, tooltips, dropdown menus, and EmptyState |
333
+ | [`user-management.tsx`](https://github.com/chesapeakedev/stack/blob/main/examples/user-management.tsx) | UserSelector multi-select search, FriendList with presence indicators |
334
+
335
+ ## Package Contents
336
+
337
+ When installed via npm you get:
412
338
 
413
339
  ```
414
- stack/
340
+ @chesapeake/stack/
415
341
  ├── components/
416
- │ ├── ui/ # Basic UI components (shadcn/ui primitives)
417
- │ └── ux/ # Complex UX components (auth, layout, feedback)
342
+ │ ├── ui/ # Primitive UI components (Button, Input, Card, …)
343
+ │ └── ux/ # Higher-level UX components (auth, layout, feedback)
418
344
  ├── styles/
419
- │ ├── index.css # Main stylesheet entry point
420
- │ ├── tokens.css # Design tokens and CSS variables
421
- │ ├── base.css # Base styles and utilities
422
- │ └── components.css # Component-specific styles
345
+ │ ├── index.css # Main stylesheet entry point
346
+ │ ├── tokens.css # Design tokens (CSS custom properties)
347
+ │ ├── base.css # Base styles and utilities
348
+ │ └── components.css # Component-specific styles
423
349
  ├── lib/
424
- │ └── utils.ts # Utility functions
425
- ├── types/ # Shared TypeScript types (e.g. user)
426
- ├── tailwind.preset.ts # Tailwind configuration preset
427
- ├── index.html # Demo app entry (run npm run dev to preview)
428
- ├── src/ # Demo app source (showcase components)
429
- ├── public/ # Demo app static assets
430
- ├── Makefile # Lint, validate, add_component
431
- └── package.json # Package configuration and exports
350
+ │ └── utils.ts # Utility functions (cn, etc.)
351
+ ├── types/ # Shared TypeScript types (BaseUser, Friend, …)
352
+ ├── tailwind.preset.ts # Tailwind configuration preset
353
+ ├── eslint.config.js # Shared ESLint config
354
+ └── prettier.config.js # Shared Prettier config
432
355
  ```
433
356
 
434
- The demo app (`index.html`, `src/`, `public/`) is for local development and
435
- showcase only; it is not published to npm.
436
-
437
- # Contributing
357
+ ## Contributing
438
358
 
439
- See [CONTRIBUTING.md](CONTRIBUTING.md) for development setup, adding shadcn
440
- components, and opening PRs.
359
+ See the
360
+ [CONTRIBUTING.md](https://github.com/chesapeakedev/stack/blob/main/CONTRIBUTING.md)
361
+ on GitHub for development setup, adding shadcn components, and opening PRs.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@chesapeake/stack",
3
- "version": "0.1.1",
3
+ "version": "0.1.3",
4
4
  "description": "A simple, reusable React component library and design system built on shadcn/ui with Tailwind CSS",
5
5
  "type": "module",
6
6
  "packageManager": "npm@10.2.0",
@@ -20,11 +20,11 @@
20
20
  },
21
21
  "repository": {
22
22
  "type": "git",
23
- "url": "git+https://github.com/chesapeake-computing/stack.git"
23
+ "url": "git+https://github.com/chesapeakedev/stack.git"
24
24
  },
25
- "homepage": "https://github.com/chesapeake-computing/stack#readme",
25
+ "homepage": "https://github.com/chesapeakedev/stack#readme",
26
26
  "bugs": {
27
- "url": "https://github.com/chesapeake-computing/stack/issues"
27
+ "url": "https://github.com/chesapeakedev/stack/issues"
28
28
  },
29
29
  "files": [
30
30
  "components",
@@ -87,7 +87,20 @@
87
87
  "./components/ux/theme-provider": "./components/ux/theme-provider.tsx",
88
88
  "./components/ux/useTheme": "./components/ux/useTheme.ts",
89
89
  "./components/ux/FeedbackDrawer": "./components/ux/FeedbackDrawer.tsx",
90
+ "./components/ux/EmptyState": "./components/ux/EmptyState.tsx",
91
+ "./components/ux/FriendList": "./components/ux/FriendList.tsx",
92
+ "./components/ux/FriendRequestList": "./components/ux/FriendRequestList.tsx",
93
+ "./components/ux/SelectedUsersList": "./components/ux/SelectedUsersList.tsx",
94
+ "./components/ux/UserSearch": "./components/ux/UserSearch.tsx",
95
+ "./components/ux/UserSelector": "./components/ux/UserSelector.tsx",
96
+ "./components/ux/StandardLayout": "./components/ux/StandardLayout/index.ts",
97
+ "./components/ux/StandardLayout/PageLayout": "./components/ux/StandardLayout/PageLayout.tsx",
98
+ "./components/ux/StandardLayout/ProfilePage": "./components/ux/StandardLayout/ProfilePage.tsx",
99
+ "./components/ux/StandardLayout/StandardLayout": "./components/ux/StandardLayout/StandardLayout.tsx",
90
100
  "./components/ux/auth": "./components/ux/auth/index.ts",
101
+ "./components/ux/auth/MultiAuthProvider": "./components/ux/auth/MultiAuthProvider.tsx",
102
+ "./components/ux/auth/AuthSelector": "./components/ux/auth/AuthSelector.tsx",
103
+ "./components/ux/auth/useAuth": "./components/ux/auth/useAuth.ts",
91
104
  "./components/ux/auth/google": "./components/ux/auth/google/index.ts",
92
105
  "./components/ux/auth/google/client": "./components/ux/auth/google/client.ts",
93
106
  "./components/ux/auth/google/default-client": "./components/ux/auth/google/default-client.ts",
package/styles/index.css CHANGED
@@ -1,5 +1,6 @@
1
1
  /* Chesapeake Shared Styles */
2
2
  @import "tailwindcss";
3
+ @source "../components";
3
4
 
4
5
  /* Design tokens and base styles */
5
6
  @import "./tokens.css";