@grantcodes/ui 2.0.0-beta.9 → 2.0.0

package/package.json

@@ -1,91 +1,81 @@
 {
-	"name": "@grantcodes/ui",
-	"version": "2.0.0-beta.9",
-	"description": "",
-	"type": "module",
-	"main": "dist/main.cjs",
-	"module": "dist/main.js",
-	"types": "dist/main.d.ts",
-	"author": "grantcodes",
-	"exports": {
-		".": {
-			"types": "./dist/main.d.ts",
-			"import": "./dist/main.js"
-		},
-		"./icons": {
-			"types": "./dist/icons.d.ts",
-			"import": "./dist/icons.js"
-		},
-		"./react": {
-			"types": "./dist/react.d.ts",
-			"import": "./dist/react.js"
-		},
-		"./styles/base.css": {
-			"import": "./dist/css/base.css",
-			"require": "./dist/css/base.css"
-		},
-		"./styles/themes/grantcodes.css": {
-			"import": "./dist/css/themes/grantcodes.css",
-			"require": "./dist/css/themes/grantcodes.css"
-		},
-		"./components/*": {
-			"import": "./dist/components/*",
-			"require": "./dist/components/*"
-		},
-		"./fonts/*": "./dist/fonts/*"
-	},
-	"scripts": {
-		"build": "vite build",
-		"watch": "rollup -c -w",
-		"generate": "plop",
-		"fix": "run-s fix:lint",
-		"fix:lint": "npx @biomejs/biome format --write src",
-		"test": "run-s test:lint test:unit",
-		"test:lint": "npx @biomejs/biome lint src",
-		"test:unit": "ava",
-		"storybook": "storybook dev -p 6006",
-		"build-storybook": "storybook build"
-	},
-	"license": "MIT",
-	"dependencies": {
-		"@grantcodes/style-dictionary": "^1.1.0",
-		"@lit/react": "^1.0.6",
-		"classnames": "^2.5.1",
-		"lit": "^3.2.1",
-		"react-dom": "^18.3.1",
-		"sanitize.css": "^13.0.0",
-		"shiki": "^1.22.0"
-	},
-	"devDependencies": {
-		"@ava/typescript": "^5.0.0",
-		"@babel/core": "^7.25.8",
-		"@biomejs/biome": "1.9.2",
-		"@grantcodes/commit": "^1.0.7",
-		"@storybook/addon-essentials": "^8.3.6",
-		"@storybook/web-components": "^8.3.6",
-		"@storybook/web-components-vite": "^8.3.6",
-		"ava": "^6.1.3",
-		"lucide-static": "^0.453.0",
-		"npm-run-all": "^4.1.5",
-		"plop": "^4.0.1",
-		"rollup": "^4.24.0",
-		"sass": "^1.80.3",
-		"storybook": "^8.3.6",
-		"typescript": "^5.6.3",
-		"vite": "^5.4.9"
-	},
-	"files": [
-		"dist/**/*",
-		"CHANGELOG.md",
-		"README.md",
-		"LICENCE"
-	],
-	"ava": {
-		"typescript": {
-			"compile": false,
-			"rewritePaths": {
-				"src/": "tmp/tests/"
-			}
-		}
-	}
-}
+  "name": "@grantcodes/ui",
+  "version": "2.0.0",
+  "description": "A personal component system built with Lit web components",
+  "type": "module",
+  "main": "src/main.js",
+  "module": "src/main.js",
+  "types": "src/main.d.ts",
+  "author": "grantcodes",
+  "exports": {
+    ".": {
+      "types": "./src/main.d.ts",
+      "import": "./src/main.js"
+    },
+    "./icons": {
+      "types": "./src/icons.d.ts",
+      "import": "./src/icons.js"
+    },
+    "./styles/base.css": {
+      "import": "./src/css/base.css",
+      "require": "./src/css/base.css"
+    },
+    "./styles/themes/grantcodes.css": {
+      "import": "./src/css/themes/grantcodes.css",
+      "require": "./src/css/themes/grantcodes.css"
+    },
+    "./components/*": {
+      "import": "./src/components/*",
+      "require": "./src/components/*"
+    },
+    "./fonts/*": "./src/fonts/*"
+  },
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "build": "npm run build-storybook",
+    "generate": "plop",
+    "cem": "cem analyze --config custom-elements-manifest.config.js --litelement",
+    "fix": "run-s fix:lint",
+    "fix:lint": "npx @biomejs/biome format --write src",
+    "test": "run-s lint test:unit",
+    "lint": "npx @biomejs/biome lint src",
+    "test:unit": "NODE_ENV=test node --test --test-concurrency=1 src/**/*.test.js"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@grantcodes/style-dictionary": "workspace:*",
+    "lit": "^3.3.1",
+    "sanitize.css": "^13.0.0",
+    "shiki": "^3.17.1"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.3.8",
+    "@custom-elements-manifest/analyzer": "^0.11.0",
+    "@grantcodes/commit": "^2.0.0",
+    "@playwright/test": "^1.57.0",
+    "@storybook/addon-docs": "^10.1.4",
+    "@storybook/addon-themes": "^10.1.4",
+    "@storybook/web-components-vite": "^10.1.4",
+    "@wc-toolkit/cem-inheritance": "^1.2.2",
+    "@wc-toolkit/cem-sorter": "^1.0.1",
+    "@wc-toolkit/cem-validator": "^1.0.3",
+    "@wc-toolkit/module-path-resolver": "^1.0.0",
+    "@wc-toolkit/storybook-helpers": "^10.0.0",
+    "happy-dom": "^20.0.11",
+    "lucide-static": "^0.555.0",
+    "npm-run-all": "^4.1.5",
+    "plop": "^4.0.4",
+    "storybook": "^10.1.4",
+    "vite": "^7.2.6"
+  },
+  "files": [
+    "src/**/*",
+    "custom-elements.json",
+    "CHANGELOG.md",
+    "README.md",
+    "LICENCE"
+  ],
+  "customElements": "custom-elements.json"
+}

package/src/components/app-bar/app-bar.component.js

@@ -0,0 +1,90 @@
+import { LitElement } from "lit";
+import { html } from "lit/static-html.js";
+import { cx } from "../../lib/classnames.js";
+import { appBarStyles } from "./app-bar.styles.js";
+
+export class GrantCodesAppBar extends LitElement {
+	static styles = [appBarStyles];
+
+	static properties = {
+		sticky: { type: Boolean },
+		transparent: { type: Boolean },
+		_mobileMenuOpen: { type: Boolean, state: true },
+	};
+
+	constructor() {
+		super();
+
+		/**
+		 * Whether the app bar is sticky
+		 * @type {boolean}
+		 */
+		this.sticky = false;
+
+		/**
+		 * Whether the app bar has transparent background
+		 * @type {boolean}
+		 */
+		this.transparent = false;
+
+		/**
+		 * Mobile menu open state
+		 * @type {boolean}
+		 */
+		this._mobileMenuOpen = false;
+	}
+
+	_toggleMobileMenu() {
+		this._mobileMenuOpen = !this._mobileMenuOpen;
+		this.dispatchEvent(
+			new CustomEvent("menu-toggle", {
+				detail: { open: this._mobileMenuOpen },
+				bubbles: true,
+				composed: true,
+			}),
+		);
+	}
+
+	render() {
+		const appBarClass = cx("app-bar", {
+			"app-bar--sticky": this.sticky,
+			"app-bar--transparent": this.transparent,
+		});
+
+		return html`
+			<header class="${appBarClass}">
+				<div class="app-bar__container">
+					<div class="app-bar__logo">
+						<slot name="logo"></slot>
+					</div>
+
+					<!-- Actions (right side) -->
+					<div class="app-bar__actions">
+						<slot name="actions"></slot>
+					</div>
+
+					<!-- Mobile Menu Button -->
+					<button
+						type="button"
+						class="app-bar__menu-button"
+						aria-label="${this._mobileMenuOpen ? "Close menu" : "Open menu"}"
+						aria-expanded="${this._mobileMenuOpen}"
+						@click=${this._toggleMobileMenu}
+					>
+						<span class="app-bar__menu-icon"></span>
+					</button>
+
+					<!-- Navigation (single slot, collapsible on mobile) -->
+					<nav
+						class="app-bar__nav ${this._mobileMenuOpen ? "app-bar__nav--mobile-open" : ""}"
+						aria-label="Main navigation"
+					>
+						<slot name="nav"></slot>
+					</nav>
+				</div>
+			</header>
+		`;
+	}
+}
+
+

package/src/components/app-bar/app-bar.js

@@ -0,0 +1,8 @@
+import { GrantCodesAppBar } from "./app-bar.component.js";
+
+export * from "./app-bar.component.js";
+export default GrantCodesAppBar;
+
+customElements.define("grantcodes-app-bar", GrantCodesAppBar);
+
+

package/src/components/app-bar/app-bar.stories.js

@@ -0,0 +1,84 @@
+import { html } from "lit";
+import "./app-bar.js";
+import "../button/button.js";
+
+const meta = {
+	title: "Components/App Bar",
+	component: "grantcodes-app-bar",
+};
+
+export default meta;
+
+/**
+ * Basic app bar with logo and navigation
+ */
+export const AppBar = {
+	render: () => html`
+		<grantcodes-app-bar>
+			<a slot="logo" href="/" style="font-weight: 700; font-size: 1.25rem; text-decoration: none; color: var(--g-color-brand-purple-900);">
+				MyApp
+			</a>
+			<div slot="nav" style="display: flex; gap: 0.5rem;">
+				<a href="/">Home</a>
+				<a href="/about">About</a>
+				<a href="/features">Features</a>
+				<a href="/pricing">Pricing</a>
+			</div>
+			<div slot="actions">
+				<grantcodes-button>Sign In</grantcodes-button>
+			</div>
+		</grantcodes-app-bar>
+	`,
+};
+
+/**
+ * Transparent app bar for hero sections
+ */
+export const Transparent = {
+	render: () => html`
+		<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 400px;">
+			<grantcodes-app-bar transparent>
+				<a slot="logo" href="/" style="font-weight: 700; font-size: 1.25rem; text-decoration: none; color: white;">
+					MyApp
+				</a>
+				<div slot="nav" style="display: flex; gap: 0.5rem;">
+					<a href="/" style="color: white;">Home</a>
+					<a href="/about" style="color: white;">About</a>
+					<a href="/features" style="color: white;">Features</a>
+				</div>
+				<div slot="actions">
+					<grantcodes-button style="--g-theme-color-background-default: white; --g-theme-color-content-default: #667eea;">
+						Sign Up
+					</grantcodes-button>
+				</div>
+			</grantcodes-app-bar>
+			<div style="padding: 4rem 2rem; text-align: center; color: white;">
+				<h1 style="font-size: 3rem; margin: 0;">Welcome to MyApp</h1>
+				<p style="font-size: 1.5rem; margin-top: 1rem;">The transparent app bar blends seamlessly</p>
+			</div>
+		</div>
+	`,
+};
+
+/**
+ * App bar with multiple actions
+ */
+export const WithMultipleActions = {
+	render: () => html`
+		<grantcodes-app-bar>
+			<a slot="logo" href="/" style="font-weight: 700; font-size: 1.25rem; text-decoration: none; color: var(--g-color-brand-purple-900);">
+				Dashboard
+			</a>
+			<div slot="nav" style="display: flex; gap: 0.5rem;">
+				<a href="/">Overview</a>
+				<a href="/analytics">Analytics</a>
+				<a href="/reports">Reports</a>
+			</div>
+			<div slot="actions" style="display: flex; gap: 0.5rem; align-items: center;">
+				<grantcodes-button>🔔</grantcodes-button>
+				<grantcodes-button>⚙️</grantcodes-button>
+				<grantcodes-button>👤</grantcodes-button>
+			</div>
+		</grantcodes-app-bar>
+	`,
+};

package/src/components/app-bar/app-bar.styles.js

@@ -0,0 +1,227 @@
+import { css } from "lit";
+
+export const appBarStyles = css`
+	*,
+	*::before,
+	*::after {
+		box-sizing: border-box;
+	}
+
+	:host {
+		display: block;
+		container-type: inline-size;
+		container-name: app-bar;
+	}
+
+	.app-bar {
+		background-color: var(--g-theme-color-background-default);
+		border-block-end: 1px solid var(--g-theme-color-border-default);
+		position: sticky;
+		inset-block-start: 0;
+		z-index: 100;
+	}
+
+	.app-bar--transparent {
+		background-color: transparent;
+		border-block-end-color: transparent;
+		box-shadow: none;
+	}
+
+	.app-bar__container {
+		display: flex;
+		align-items: center;
+		gap: 1.5rem;
+		padding-inline: 1rem;
+		padding-block: 1rem;
+		max-inline-size: 1400px;
+		margin-inline: auto;
+		flex-wrap: wrap;
+	}
+
+	/* Logo */
+	.app-bar__logo {
+		display: flex;
+		align-items: center;
+		flex-shrink: 0;
+	}
+
+	/* Navigation */
+	.app-bar__nav {
+		display: none;
+		flex: 1;
+		align-items: center;
+		gap: 1.5rem;
+		order: 5;
+		inline-size: 100%;
+	}
+
+	/* Mobile: when menu is open, show nav stacked vertically */
+	.app-bar__nav--mobile-open {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		padding-inline: 1rem;
+		padding-block: 1rem;
+		border-block-start: 1px solid var(--g-theme-color-border-default);
+		width: 100%;
+	}
+
+	/* Show nav on larger screens using container queries */
+	@container app-bar (min-width: 768px) {
+		.app-bar__nav {
+			display: flex;
+		}
+	}
+
+	/* Actions */
+	.app-bar__actions {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		margin-inline-start: auto;
+	}
+
+	/* Mobile Menu Button */
+	.app-bar__menu-button {
+		all: unset;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		inline-size: 2.5rem;
+		block-size: 2.5rem;
+		padding: 0.5rem;
+		border-radius: var(--g-theme-border-radius-md);
+		cursor: pointer;
+		color: var(--g-theme-color-content-default);
+		transition: background-color 0.2s ease;
+	}
+
+	.app-bar__menu-button:hover {
+		background-color: var(--g-theme-color-background-subtle-hover);
+	}
+
+	.app-bar__menu-button:focus-visible {
+		outline: 2px solid var(--component-focus-ring-color);
+		outline-offset: 2px;
+	}
+
+	/* Hide menu button on larger screens */
+	@container app-bar (min-width: 768px) {
+		.app-bar__menu-button {
+			display: none;
+		}
+	}
+
+	/* Hamburger Icon */
+	.app-bar__menu-icon {
+		display: block;
+		inline-size: 1.5rem;
+		block-size: 1.5rem;
+		position: relative;
+	}
+
+	.app-bar__menu-icon::before,
+	.app-bar__menu-icon::after {
+		content: "";
+		position: absolute;
+		inline-size: 100%;
+		block-size: 2px;
+		inset-inline-start: 0;
+		background-color: currentColor;
+		transition: transform 0.2s ease;
+	}
+
+	.app-bar__menu-icon::before {
+		inset-block-start: 0.25rem;
+		box-shadow: 0 0.5rem 0 currentColor;
+	}
+
+	.app-bar__menu-icon::after {
+		inset-block-end: 0.25rem;
+	}
+
+	/* Animated hamburger to X */
+	.app-bar__menu-button[aria-expanded="true"] .app-bar__menu-icon::before {
+		inset-block-start: 0.5rem;
+		transform: rotate(45deg);
+		box-shadow: none;
+	}
+
+	.app-bar__menu-button[aria-expanded="true"] .app-bar__menu-icon::after {
+		inset-block-end: 0.5rem;
+		transform: rotate(-45deg);
+	}
+
+	/* Mobile Navigation */
+	.app-bar__mobile-nav {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		padding-inline: 1rem;
+		padding-block: 1rem;
+		border-block-start: 1px solid var(--g-theme-color-border-default);
+		animation: slide-down 0.2s ease-out;
+	}
+
+	/* Desktop: show nav inline and reset mobile styles */
+	@container app-bar (min-width: 768px) {
+		.app-bar__container {
+			flex-wrap: nowrap;
+		}
+
+		.app-bar__nav {
+			display: flex;
+			flex-direction: row;
+			gap: 1.5rem;
+			padding: 0;
+			border: 0;
+			width: auto;
+			order: 2;
+		}
+
+		.app-bar__actions {
+			order: 3;
+		}
+
+		.app-bar__menu-button {
+			order: 4;
+		}
+
+		/* Ensure mobile-open class doesn't affect desktop */
+		.app-bar__nav--mobile-open {
+			display: flex;
+		}
+	}
+
+	@keyframes slide-down {
+		from {
+			opacity: 0;
+			transform: translateY(-0.5rem);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	/* Slotted content styling helpers */
+	::slotted(a) {
+		color: var(--g-theme-color-content-default);
+		text-decoration: none;
+		padding-block: 0.5rem;
+		padding-inline: 0.75rem;
+		border-radius: var(--g-theme-border-radius-md);
+		transition: all 0.2s ease;
+		font-weight: 500;
+	}
+
+	::slotted(a:hover) {
+		color: var(--g-theme-color-content-default);
+		background-color: var(--g-theme-color-background-subtle-hover);
+	}
+
+	::slotted(a:focus-visible) {
+		outline: 2px solid var(--component-focus-ring-color);
+		outline-offset: 2px;
+	}
+`;