@chesapeake/stack 0.1.0 → 0.1.2

package/CHANGELOG.md

@@ -6,6 +6,39 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to
 [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.1.2] - 2026-03-05
+
+- `examples/` folder with copy-pasteable React examples: basic-form,
+  auth-setup, page-layout, theme-customization, feedback-and-notifications,
+  data-display, user-management
+- polish README.md
+
+### Added
+
+## [0.1.1] - 2026-03-05
+
+### Added
+
+- UI component: LocationInput – Google Maps Places Autocomplete search with
+  debounced input, keyboard navigation, and suggestions dropdown
+- UI export: sonner-api – re-exports `toast` and `ToasterProps` for
+  programmatic toast notifications
+- UX component: ActivityAnimation – activity indicator with pulse and particles
+  variants (sm/md/lg)
+- UX component: FireAnimation – animated fire visualization scaled by
+  productivity score
+- CONTRIBUTING.md with development setup and component guidelines
+
+### Changed
+
+- README rewritten for npm consumers: added examples table with GitHub links,
+  Package Contents section, and Contributing link
+
+### Fixed
+
+- GitHub URLs corrected from `chesapeake-computing` to `chesapeakedev` across
+  README.md, package.json, CONTRIBUTING.md, and CHANGELOG.md
+
 ## [0.1.0] - 2026-02-05
 
 ### Added
@@ -23,4 +56,5 @@ and this project adheres to
 - Full dark mode support via CSS custom properties
 - Apache 2.0 license
 
-[0.1.0]: https://github.com/chesapeake-computing/stack/releases/tag/v0.1.0
+[0.1.1]: https://github.com/chesapeakedev/stack/releases/tag/v0.1.1
+[0.1.0]: https://github.com/chesapeakedev/stack/releases/tag/v0.1.0

package/README.md

@@ -17,7 +17,6 @@ system consists of:
 - `styles/index.css` that includes Tailwind CSS, design tokens, base styles, and
   component styles
 - `tailwind.preset.ts` for use in `tailwind.config.ts`
-- Peer dependencies declared for any component dependencies
 
 ## Installation
 
@@ -45,39 +44,7 @@ Import the shared styles in your app's main CSS file (e.g., `src/index.css`):
 @import "@chesapeake/stack/styles/index.css";
 ```
 
-### 3. Configure Bundler and TypeScript
-
-If you consume the package from source (e.g. in a monorepo), add a path alias so
-imports resolve correctly. When using the published npm package, use the package
-name in place of `@chesapeake/stack` in the examples below.
-
-**Vite** (`vite.config.ts`):
-
-```typescript
-import path from "path";
-
-export default defineConfig({
-  resolve: {
-    alias: {
-      "@shared": path.resolve(__dirname, "../stack"),
-    },
-  },
-});
-```
-
-**TypeScript** (`tsconfig.json`):
-
-```json
-{
-  "compilerOptions": {
-    "paths": {
-      "@shared/*": ["../stack/*"]
-    }
-  }
-}
-```
-
-### 4. Configure Tailwind
+### 3. Configure Tailwind
 
 Extend your `tailwind.config.ts` with the shared preset:
 
@@ -96,7 +63,7 @@ const config: Config = {
 export default config;
 ```
 
-### 5. Configure Tailwind Content
+### 4. Configure Tailwind Content
 
 Add the package to your Tailwind content configuration so classes are processed:
 
@@ -118,7 +85,7 @@ const config: Config = {
 export default config;
 ```
 
-### 6. Import and Use Components
+### 5. Import and Use Components
 
 Import and use components in your React components:
 
@@ -172,12 +139,6 @@ import type {
 } from "@chesapeake/stack/types/user";
 ```
 
-### Migrating from an older setup
-
-If you previously copied shared CSS or used a different import pattern: remove
-duplicate CSS, switch to the import pattern above, install any missing peer
-dependencies, and test all components.
-
 ## Usage
 
 ### Available Components
@@ -205,14 +166,6 @@ dependencies, and test all components.
 - **Page Layout** - `PageContent`, `PageHeader`, `PageLayout` for consistent
   page structure
 
-### Design System Features
-
-- **Design Tokens**: Consistent color palette, spacing, and typography
-- **Dark Mode**: Built-in dark theme support
-- **Responsive**: Mobile-first responsive design
-- **Accessibility**: ARIA-compliant components
-- **Animations**: Smooth transitions and micro-interactions
-
 ## Theming
 
 This section explains how the shared theme system works and how projects can
@@ -390,15 +343,6 @@ This means you only need to override the variables you want to change!
 6. **Use Tailwind's color utilities** - they automatically use your custom
    variables
 
-### Migrating from an Older Theme
-
-If you're migrating from the old theme:
-
-1. Check which variables your project currently uses
-2. Import `@chesapeake/stack/styles/index.css`
-3. Override only the variables that need to change
-4. Test thoroughly in both light and dark modes
-
 ### Further Reading
 
 - [MDN: CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) -
@@ -408,33 +352,48 @@ If you're migrating from the old theme:
 - [Can I Use: CSS Custom Properties](https://caniuse.com/css-variables) -
   Browser support information
 
-## Project Structure
+## Examples
+
+The GitHub repository includes an
+[`examples/`](https://github.com/chesapeakedev/stack/tree/main/examples) folder
+with copy-pasteable React examples covering common patterns. Each example is a
+self-contained `.tsx` file you can drop into any app that has the stack
+installed and configured.
+
+| Example                                                                                                                      | What it covers                                                                  |
+| ---------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- |
+| [`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         |
+| [`auth-setup.tsx`](https://github.com/chesapeakedev/stack/blob/main/examples/auth-setup.tsx)                                 | Multi-provider authentication with Google and GitHub using MultiAuthProvider    |
+| [`page-layout.tsx`](https://github.com/chesapeakedev/stack/blob/main/examples/page-layout.tsx)                               | App shell with StandardLayout, PageLayout, PageHeader, and PageContent          |
+| [`theme-customization.tsx`](https://github.com/chesapeakedev/stack/blob/main/examples/theme-customization.tsx)               | ThemeProvider, useTheme toggle, and a companion `.css` showing token overrides  |
+| [`feedback-and-notifications.tsx`](https://github.com/chesapeakedev/stack/blob/main/examples/feedback-and-notifications.tsx) | FeedbackDrawer, toast variants (success / error / promise), confirmation Dialog |
+| [`data-display.tsx`](https://github.com/chesapeakedev/stack/blob/main/examples/data-display.tsx)                             | Cards, badges, avatars, tooltips, dropdown menus, and EmptyState                |
+| [`user-management.tsx`](https://github.com/chesapeakedev/stack/blob/main/examples/user-management.tsx)                       | UserSelector multi-select search, FriendList with presence indicators           |
+
+## Package Contents
+
+When installed via npm you get:
 
 ```
-stack/
+@chesapeake/stack/
 ├── components/
-│   ├── ui/           # Basic UI components (shadcn/ui primitives)
-│   └── ux/           # Complex UX components (auth, layout, feedback)
+│   ├── ui/              # Primitive UI components (Button, Input, Card, …)
+│   └── ux/              # Higher-level UX components (auth, layout, feedback)
 ├── styles/
-│   ├── index.css     # Main stylesheet entry point
-│   ├── tokens.css    # Design tokens and CSS variables
-│   ├── base.css      # Base styles and utilities
-│   └── components.css # Component-specific styles
+│   ├── index.css        # Main stylesheet entry point
+│   ├── tokens.css       # Design tokens (CSS custom properties)
+│   ├── base.css         # Base styles and utilities
+│   └── components.css   # Component-specific styles
 ├── lib/
-│   └── utils.ts      # Utility functions
-├── types/            # Shared TypeScript types (e.g. user)
-├── tailwind.preset.ts # Tailwind configuration preset
-├── index.html        # Demo app entry (run npm run dev to preview)
-├── src/              # Demo app source (showcase components)
-├── public/           # Demo app static assets
-├── Makefile          # Lint, validate, add_component
-└── package.json      # Package configuration and exports
+│   └── utils.ts         # Utility functions (cn, etc.)
+├── types/               # Shared TypeScript types (BaseUser, Friend, …)
+├── tailwind.preset.ts   # Tailwind configuration preset
+├── eslint.config.js     # Shared ESLint config
+└── prettier.config.js   # Shared Prettier config
 ```
 
-The demo app (`index.html`, `src/`, `public/`) is for local development and
-showcase only; it is not published to npm.
-
-# Contributing
+## Contributing
 
-See [CONTRIBUTING.md](CONTRIBUTING.md) for development setup, adding shadcn
-components, and opening PRs. 
+See the
+[CONTRIBUTING.md](https://github.com/chesapeakedev/stack/blob/main/CONTRIBUTING.md)
+on GitHub for development setup, adding shadcn components, and opening PRs.

package/eslint.config.js

@@ -0,0 +1,56 @@
+// Copyright 2026 Chesapeake Computing
+// SPDX-License-Identifier: Apache-2.0
+
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+
+/**
+ * Shared ESLint configuration for React + TypeScript apps.
+ * Uses strict type checking for better type safety.
+ *
+ * Note: typescript-eslint flat config API may change; see
+ * https://typescript-eslint.io for current recommendations.
+ *
+ * @param {object} parserOptions - TypeScript parser options
+ * @param {string[]} parserOptions.project - TypeScript project files (e.g., ["./tsconfig.node.json", "./tsconfig.app.json"])
+ * @param {string} parserOptions.tsconfigRootDir - Root directory for tsconfig resolution (use import.meta.dirname from the consuming app)
+ */
+export function createEslintConfig(parserOptions) {
+  return tseslint.config(
+    { ignores: ["dist", "node_modules"] },
+    {
+      extends: [
+        js.configs.recommended,
+        ...tseslint.configs.strictTypeChecked,
+        ...tseslint.configs.stylisticTypeChecked,
+      ],
+      files: ["**/*.{ts,tsx}"],
+      languageOptions: {
+        ecmaVersion: 2020,
+        globals: globals.browser,
+        parserOptions,
+      },
+      plugins: {
+        "react-hooks": reactHooks,
+        "react-refresh": reactRefresh,
+      },
+      rules: {
+        ...reactHooks.configs.recommended.rules,
+        "react-refresh/only-export-components": [
+          "warn",
+          { allowConstantExport: true },
+        ],
+        "@typescript-eslint/unified-signatures": "off",
+      },
+    }
+  );
+}
+
+// Default export for ESLint to use when linting this package directly
+export default createEslintConfig({
+  project: ["./tsconfig.json"],
+  tsconfigRootDir: import.meta.dirname,
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chesapeake/stack",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "A simple, reusable React component library and design system built on shadcn/ui with Tailwind CSS",
   "type": "module",
   "packageManager": "npm@10.2.0",
@@ -20,11 +20,11 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/chesapeake-computing/stack.git"
+    "url": "git+https://github.com/chesapeakedev/stack.git"
   },
-  "homepage": "https://github.com/chesapeake-computing/stack#readme",
+  "homepage": "https://github.com/chesapeakedev/stack#readme",
   "bugs": {
-    "url": "https://github.com/chesapeake-computing/stack/issues"
+    "url": "https://github.com/chesapeakedev/stack/issues"
   },
   "files": [
     "components",
@@ -33,6 +33,8 @@
     "types",
     "index.ts",
     "tailwind.preset.ts",
+    "eslint.config.js",
+    "prettier.config.js",
     "README.md",
     "LICENSE",
     "CHANGELOG.md"
@@ -85,7 +87,20 @@
     "./components/ux/theme-provider": "./components/ux/theme-provider.tsx",
     "./components/ux/useTheme": "./components/ux/useTheme.ts",
     "./components/ux/FeedbackDrawer": "./components/ux/FeedbackDrawer.tsx",
+    "./components/ux/EmptyState": "./components/ux/EmptyState.tsx",
+    "./components/ux/FriendList": "./components/ux/FriendList.tsx",
+    "./components/ux/FriendRequestList": "./components/ux/FriendRequestList.tsx",
+    "./components/ux/SelectedUsersList": "./components/ux/SelectedUsersList.tsx",
+    "./components/ux/UserSearch": "./components/ux/UserSearch.tsx",
+    "./components/ux/UserSelector": "./components/ux/UserSelector.tsx",
+    "./components/ux/StandardLayout": "./components/ux/StandardLayout/index.ts",
+    "./components/ux/StandardLayout/PageLayout": "./components/ux/StandardLayout/PageLayout.tsx",
+    "./components/ux/StandardLayout/ProfilePage": "./components/ux/StandardLayout/ProfilePage.tsx",
+    "./components/ux/StandardLayout/StandardLayout": "./components/ux/StandardLayout/StandardLayout.tsx",
     "./components/ux/auth": "./components/ux/auth/index.ts",
+    "./components/ux/auth/MultiAuthProvider": "./components/ux/auth/MultiAuthProvider.tsx",
+    "./components/ux/auth/AuthSelector": "./components/ux/auth/AuthSelector.tsx",
+    "./components/ux/auth/useAuth": "./components/ux/auth/useAuth.ts",
     "./components/ux/auth/google": "./components/ux/auth/google/index.ts",
     "./components/ux/auth/google/client": "./components/ux/auth/google/client.ts",
     "./components/ux/auth/google/default-client": "./components/ux/auth/google/default-client.ts",

package/prettier.config.js

@@ -0,0 +1,29 @@
+// Copyright 2026 Chesapeake Computing
+// SPDX-License-Identifier: Apache-2.0
+
+/**
+ * Shared Prettier configuration for React + TypeScript apps.
+ * Import and re-export from your project's prettier.config.js.
+ */
+export default {
+  // Use single quotes for consistency
+  singleQuote: false,
+  // Use semicolons for better compatibility
+  semi: true,
+  // Use 2 spaces for indentation
+  tabWidth: 2,
+  // Use spaces instead of tabs
+  useTabs: false,
+  // Print width of 80 characters
+  printWidth: 80,
+  // Trailing commas where valid in ES5 (objects, arrays, etc.)
+  trailingComma: "es5",
+  // Add spaces between brackets in object literals
+  bracketSpacing: true,
+  // Put the > of a multi-line JSX element at the end of the last line
+  bracketSameLine: false,
+  // Arrow function parentheses: always
+  arrowParens: "always",
+  // End of line: use lf for consistency across platforms
+  endOfLine: "lf",
+};