@grantcodes/ui 2.15.6 → 2.16.0

package/src/pages/saas-landing.stories.js

@@ -1,21 +1,21 @@
-import { html } from "lit";
-import "../components/app-bar/app-bar.js";
-import "../components/app-bar/nav-link.js";
-import "../components/button/button.js";
-import "../components/hero/hero.js";
-import "../components/logo-cloud/logo-cloud.js";
-import "../components/feature-list/feature-list.js";
-import "../components/stats/stats.js";
-import "../components/testimonials/testimonials.js";
-import "../components/pricing/pricing.js";
-import "../components/newsletter/newsletter.js";
-import "../components/footer/footer.js";
+import { html } from 'lit';
+import '../components/app-bar/app-bar.js';
+import '../components/app-bar/nav-link.js';
+import '../components/button/button.js';
+import '../components/hero/hero.js';
+import '../components/logo-cloud/logo-cloud.js';
+import '../components/feature-list/feature-list.js';
+import '../components/stats/stats.js';
+import '../components/testimonials/testimonials.js';
+import '../components/pricing/pricing.js';
+import '../components/newsletter/newsletter.js';
+import '../components/footer/footer.js';
 
 const meta = {
-	title: "Pages/SaaS Landing",
-	parameters: {
-		layout: "fullscreen",
-	},
+  title: 'Pages/SaaS Landing',
+  parameters: {
+    layout: 'fullscreen',
+  },
 };
 
 export default meta;
@@ -70,7 +70,7 @@ const footerContent = html`
  * feature-list, stats, testimonials, pricing, newsletter, and footer.
  */
 export const Default = {
-	render: () => html`
+  render: () => html`
 		<grantcodes-app-bar sticky>
 			<a slot="logo" href="/" style="font-weight: 700; font-size: 1.25rem; text-decoration: none; color: inherit;">
 				Flowbase
@@ -95,37 +95,37 @@ export const Default = {
 		<grantcodes-logo-cloud
 			title="Trusted by teams at"
 			logos=${JSON.stringify([
-				{
-					name: "Vercel",
-					src: "https://placehold.co/120x40?text=Vercel",
-					alt: "Vercel",
-				},
-				{
-					name: "Linear",
-					src: "https://placehold.co/120x40?text=Linear",
-					alt: "Linear",
-				},
-				{
-					name: "Stripe",
-					src: "https://placehold.co/120x40?text=Stripe",
-					alt: "Stripe",
-				},
-				{
-					name: "Notion",
-					src: "https://placehold.co/120x40?text=Notion",
-					alt: "Notion",
-				},
-				{
-					name: "Figma",
-					src: "https://placehold.co/120x40?text=Figma",
-					alt: "Figma",
-				},
-				{
-					name: "Loom",
-					src: "https://placehold.co/120x40?text=Loom",
-					alt: "Loom",
-				},
-			])}
+        {
+          name: 'Vercel',
+          src: 'https://placehold.co/120x40?text=Vercel',
+          alt: 'Vercel',
+        },
+        {
+          name: 'Linear',
+          src: 'https://placehold.co/120x40?text=Linear',
+          alt: 'Linear',
+        },
+        {
+          name: 'Stripe',
+          src: 'https://placehold.co/120x40?text=Stripe',
+          alt: 'Stripe',
+        },
+        {
+          name: 'Notion',
+          src: 'https://placehold.co/120x40?text=Notion',
+          alt: 'Notion',
+        },
+        {
+          name: 'Figma',
+          src: 'https://placehold.co/120x40?text=Figma',
+          alt: 'Figma',
+        },
+        {
+          name: 'Loom',
+          src: 'https://placehold.co/120x40?text=Loom',
+          alt: 'Loom',
+        },
+      ])}
 		></grantcodes-logo-cloud>
 
 		<grantcodes-feature-list
@@ -133,156 +133,156 @@ export const Default = {
 			subtitle="Flowbase combines the tools you already love into a single, cohesive experience — so your team stays in flow."
 			columns="3"
 			items=${JSON.stringify([
-				{
-					title: "Task management",
-					description:
-						"Create, assign, and track work across your entire team with a simple, powerful interface.",
-					icon: "check-square",
-				},
-				{
-					title: "Real-time docs",
-					description:
-						"Write collaboratively without conflicts. Docs live next to the tasks they belong to.",
-					icon: "file-text",
-				},
-				{
-					title: "CI/CD pipelines",
-					description:
-						"Trigger builds, run tests, and deploy to production without leaving your workspace.",
-					icon: "git-branch",
-				},
-				{
-					title: "Team inbox",
-					description:
-						"Pull in Slack, email, and GitHub notifications into one shared inbox your team can triage together.",
-					icon: "inbox",
-				},
-				{
-					title: "Analytics",
-					description:
-						"Understand velocity, cycle time, and deployment frequency with built-in engineering metrics.",
-					icon: "bar-chart-2",
-				},
-				{
-					title: "Access controls",
-					description:
-						"Fine-grained roles and SSO keep your data secure without slowing your team down.",
-					icon: "shield",
-				},
-			])}
+        {
+          title: 'Task management',
+          description:
+            'Create, assign, and track work across your entire team with a simple, powerful interface.',
+          icon: 'check-square',
+        },
+        {
+          title: 'Real-time docs',
+          description:
+            'Write collaboratively without conflicts. Docs live next to the tasks they belong to.',
+          icon: 'file-text',
+        },
+        {
+          title: 'CI/CD pipelines',
+          description:
+            'Trigger builds, run tests, and deploy to production without leaving your workspace.',
+          icon: 'git-branch',
+        },
+        {
+          title: 'Team inbox',
+          description:
+            'Pull in Slack, email, and GitHub notifications into one shared inbox your team can triage together.',
+          icon: 'inbox',
+        },
+        {
+          title: 'Analytics',
+          description:
+            'Understand velocity, cycle time, and deployment frequency with built-in engineering metrics.',
+          icon: 'bar-chart-2',
+        },
+        {
+          title: 'Access controls',
+          description:
+            'Fine-grained roles and SSO keep your data secure without slowing your team down.',
+          icon: 'shield',
+        },
+      ])}
 		></grantcodes-feature-list>
 
 		<grantcodes-stats
 			title="Built for teams that care about output"
 			columns="4"
 			items=${JSON.stringify([
-				{
-					value: "12×",
-					label: "Faster shipping",
-					context: "compared to teams using 4+ separate tools",
-				},
-				{
-					value: "98%",
-					label: "Uptime SLA",
-					context: "backed by our enterprise plan",
-				},
-				{
-					value: "50k+",
-					label: "Active teams",
-					context: "across 80 countries",
-				},
-				{
-					value: "4.9 / 5",
-					label: "Customer rating",
-					context: "across G2, Capterra, and Product Hunt",
-				},
-			])}
+        {
+          value: '12×',
+          label: 'Faster shipping',
+          context: 'compared to teams using 4+ separate tools',
+        },
+        {
+          value: '98%',
+          label: 'Uptime SLA',
+          context: 'backed by our enterprise plan',
+        },
+        {
+          value: '50k+',
+          label: 'Active teams',
+          context: 'across 80 countries',
+        },
+        {
+          value: '4.9 / 5',
+          label: 'Customer rating',
+          context: 'across G2, Capterra, and Product Hunt',
+        },
+      ])}
 		></grantcodes-stats>
 
 		<grantcodes-testimonials
 			title="What teams are saying"
 			layout="cards"
 			items=${JSON.stringify([
-				{
-					quote:
-						"We cut our weekly planning meeting from 90 minutes to 15. Flowbase just… makes it obvious what needs to happen next.",
-					name: "Maya Okafor",
-					role: "Engineering Lead",
-					company: "Pulse Labs",
-					avatar: "https://i.pravatar.cc/80?img=47",
-				},
-				{
-					quote:
-						"I've tried every project tool out there. Flowbase is the first one that didn't need a dedicated Ops person to keep it clean.",
-					name: "Sam Torres",
-					role: "CTO",
-					company: "Stackform",
-					avatar: "https://i.pravatar.cc/80?img=12",
-				},
-				{
-					quote:
-						"The CI integration alone saved us four hours a week. The rest is just a bonus at this point.",
-					name: "Priya Nair",
-					role: "Senior Developer",
-					company: "Mintcode",
-					avatar: "https://i.pravatar.cc/80?img=32",
-				},
-			])}
+        {
+          quote:
+            'We cut our weekly planning meeting from 90 minutes to 15. Flowbase just… makes it obvious what needs to happen next.',
+          name: 'Maya Okafor',
+          role: 'Engineering Lead',
+          company: 'Pulse Labs',
+          avatar: 'https://i.pravatar.cc/80?img=47',
+        },
+        {
+          quote:
+            "I've tried every project tool out there. Flowbase is the first one that didn't need a dedicated Ops person to keep it clean.",
+          name: 'Sam Torres',
+          role: 'CTO',
+          company: 'Stackform',
+          avatar: 'https://i.pravatar.cc/80?img=12',
+        },
+        {
+          quote:
+            'The CI integration alone saved us four hours a week. The rest is just a bonus at this point.',
+          name: 'Priya Nair',
+          role: 'Senior Developer',
+          company: 'Mintcode',
+          avatar: 'https://i.pravatar.cc/80?img=32',
+        },
+      ])}
 		></grantcodes-testimonials>
 
 		<grantcodes-pricing
 			title="Simple, honest pricing"
 			subtitle="No per-seat surprises. No feature gating. Pick the plan that fits your team size."
 			tiers=${JSON.stringify([
-				{
-					name: "Starter",
-					price: "Free",
-					period: "",
-					description: "For solo developers and small side projects.",
-					features: [
-						{ text: "Up to 3 team members", included: true },
-						{ text: "Unlimited tasks", included: true },
-						{ text: "5 GB storage", included: true },
-						{ text: "CI/CD pipelines", included: false },
-						{ text: "SSO", included: false },
-						{ text: "Priority support", included: false },
-					],
-					cta: { label: "Get started free", href: "/signup" },
-					highlighted: false,
-				},
-				{
-					name: "Team",
-					price: "$49",
-					period: "month",
-					description: "For growing teams that need to move fast.",
-					features: [
-						{ text: "Up to 20 team members", included: true },
-						{ text: "Unlimited tasks", included: true },
-						{ text: "50 GB storage", included: true },
-						{ text: "CI/CD pipelines", included: true },
-						{ text: "SSO", included: false },
-						{ text: "Priority support", included: false },
-					],
-					cta: { label: "Start free trial", href: "/signup?plan=team" },
-					highlighted: true,
-				},
-				{
-					name: "Enterprise",
-					price: "$149",
-					period: "month",
-					description: "For large teams with advanced security needs.",
-					features: [
-						{ text: "Unlimited team members", included: true },
-						{ text: "Unlimited tasks", included: true },
-						{ text: "500 GB storage", included: true },
-						{ text: "CI/CD pipelines", included: true },
-						{ text: "SSO", included: true },
-						{ text: "Priority support", included: true },
-					],
-					cta: { label: "Contact sales", href: "/contact" },
-					highlighted: false,
-				},
-			])}
+        {
+          name: 'Starter',
+          price: 'Free',
+          period: '',
+          description: 'For solo developers and small side projects.',
+          features: [
+            { text: 'Up to 3 team members', included: true },
+            { text: 'Unlimited tasks', included: true },
+            { text: '5 GB storage', included: true },
+            { text: 'CI/CD pipelines', included: false },
+            { text: 'SSO', included: false },
+            { text: 'Priority support', included: false },
+          ],
+          cta: { label: 'Get started free', href: '/signup' },
+          highlighted: false,
+        },
+        {
+          name: 'Team',
+          price: '$49',
+          period: 'month',
+          description: 'For growing teams that need to move fast.',
+          features: [
+            { text: 'Up to 20 team members', included: true },
+            { text: 'Unlimited tasks', included: true },
+            { text: '50 GB storage', included: true },
+            { text: 'CI/CD pipelines', included: true },
+            { text: 'SSO', included: false },
+            { text: 'Priority support', included: false },
+          ],
+          cta: { label: 'Start free trial', href: '/signup?plan=team' },
+          highlighted: true,
+        },
+        {
+          name: 'Enterprise',
+          price: '$149',
+          period: 'month',
+          description: 'For large teams with advanced security needs.',
+          features: [
+            { text: 'Unlimited team members', included: true },
+            { text: 'Unlimited tasks', included: true },
+            { text: '500 GB storage', included: true },
+            { text: 'CI/CD pipelines', included: true },
+            { text: 'SSO', included: true },
+            { text: 'Priority support', included: true },
+          ],
+          cta: { label: 'Contact sales', href: '/contact' },
+          highlighted: false,
+        },
+      ])}
 		></grantcodes-pricing>
 
 		<grantcodes-newsletter

package/src/react.js

@@ -1,46 +1,46 @@
-export { Accordion } from "./components/accordion/accordion.react.js";
-export { AppBar } from "./components/app-bar/app-bar.react.js";
-export { NavLink } from "./components/app-bar/nav-link.react.js";
-export { Avatar } from "./components/avatar/avatar.react.js";
-export { Badge } from "./components/badge/badge.react.js";
+export { Accordion } from './components/accordion/accordion.react.js';
+export { AppBar } from './components/app-bar/app-bar.react.js';
+export { NavLink } from './components/app-bar/nav-link.react.js';
+export { Avatar } from './components/avatar/avatar.react.js';
+export { Badge } from './components/badge/badge.react.js';
 export {
-	Breadcrumb,
-	BreadcrumbItem,
-} from "./components/breadcrumb/breadcrumb.react.js";
-export { Button } from "./components/button/button.react.js";
-export { ButtonGroup } from "./components/button-group/button-group.react.js";
-export { Card } from "./components/card/card.react.js";
-export { CodePreview } from "./components/code-preview/code-preview.react.js";
-export { Container } from "./components/container/container.react.js";
-export { Countdown } from "./components/countdown/countdown.react.js";
-export { Cta } from "./components/cta/cta.react.js";
-export { Dialog } from "./components/dialog/dialog.react.js";
+  Breadcrumb,
+  BreadcrumbItem,
+} from './components/breadcrumb/breadcrumb.react.js';
+export { Button } from './components/button/button.react.js';
+export { ButtonGroup } from './components/button-group/button-group.react.js';
+export { Card } from './components/card/card.react.js';
+export { CodePreview } from './components/code-preview/code-preview.react.js';
+export { Container } from './components/container/container.react.js';
+export { Countdown } from './components/countdown/countdown.react.js';
+export { Cta } from './components/cta/cta.react.js';
+export { Dialog } from './components/dialog/dialog.react.js';
 export {
-	Dropdown,
-	DropdownItem,
-} from "./components/dropdown/dropdown.react.js";
-export { Dropzone } from "./components/dropzone/dropzone.react.js";
-export { FeatureList } from "./components/feature-list/feature-list.react.js";
-export { Footer, FooterColumn } from "./components/footer/footer.react.js";
-export { FormField } from "./components/form-field/form-field.react.js";
-export { Gallery } from "./components/gallery/gallery.react.js";
-export { GalleryImage } from "./components/gallery/gallery-image.react.js";
-export { Hero } from "./components/hero/hero.react.js";
-export { Icon } from "./components/icon/icon.react.js";
-export { Loading } from "./components/loading/loading.react.js";
-export { LogoCloud } from "./components/logo-cloud/logo-cloud.react.js";
-export { MapEmbed } from "./components/map/map.react.js";
-export { MediaText } from "./components/media-text/media-text.react.js";
-export { Newsletter } from "./components/newsletter/newsletter.react.js";
-export { Notice } from "./components/notice/notice.react.js";
-export { Pagination } from "./components/pagination/pagination.react.js";
-export { Person } from "./components/person/person.react.js";
-export { Pricing } from "./components/pricing/pricing.react.js";
-export { Sidebar } from "./components/sidebar/sidebar.react.js";
-export { Stats } from "./components/stats/stats.react.js";
-export { Tab } from "./components/tabs/tab.react.js";
-export { Tabs } from "./components/tabs/tabs.react.js";
-export { TabsButton } from "./components/tabs/internal/tabs-button.react.js";
-export { Testimonials } from "./components/testimonials/testimonials.react.js";
-export { Toast, ToastContainer } from "./components/toast/toast.react.js";
-export { Tooltip } from "./components/tooltip/tooltip.react.js";
+  Dropdown,
+  DropdownItem,
+} from './components/dropdown/dropdown.react.js';
+export { Dropzone } from './components/dropzone/dropzone.react.js';
+export { FeatureList } from './components/feature-list/feature-list.react.js';
+export { Footer, FooterColumn } from './components/footer/footer.react.js';
+export { FormField } from './components/form-field/form-field.react.js';
+export { Gallery } from './components/gallery/gallery.react.js';
+export { GalleryImage } from './components/gallery/gallery-image.react.js';
+export { Hero } from './components/hero/hero.react.js';
+export { Icon } from './components/icon/icon.react.js';
+export { Loading } from './components/loading/loading.react.js';
+export { LogoCloud } from './components/logo-cloud/logo-cloud.react.js';
+export { MapEmbed } from './components/map/map.react.js';
+export { MediaText } from './components/media-text/media-text.react.js';
+export { Newsletter } from './components/newsletter/newsletter.react.js';
+export { Notice } from './components/notice/notice.react.js';
+export { Pagination } from './components/pagination/pagination.react.js';
+export { Person } from './components/person/person.react.js';
+export { Pricing } from './components/pricing/pricing.react.js';
+export { Sidebar } from './components/sidebar/sidebar.react.js';
+export { Stats } from './components/stats/stats.react.js';
+export { TabsButton } from './components/tabs/internal/tabs-button.react.js';
+export { Tab } from './components/tabs/tab.react.js';
+export { Tabs } from './components/tabs/tabs.react.js';
+export { Testimonials } from './components/testimonials/testimonials.react.js';
+export { Toast, ToastContainer } from './components/toast/toast.react.js';
+export { Tooltip } from './components/tooltip/tooltip.react.js';

package/src/react.test.js

@@ -1,56 +1,47 @@
-import { describe, it } from "node:test";
-import { strict as assert } from "node:assert";
+import { strict as assert } from 'node:assert';
+import { describe, it } from 'node:test';
 
-describe("React Wrappers", () => {
-	it("should export all component wrappers", async () => {
-		const react = await import("./react.js");
-		assert.ok(react.Button, "Button wrapper should be exported");
-		assert.ok(react.Card, "Card wrapper should be exported");
-		assert.ok(react.Dialog, "Dialog wrapper should be exported");
-		assert.ok(react.Accordion, "Accordion wrapper should be exported");
-		assert.ok(react.Tooltip, "Tooltip wrapper should be exported");
-		assert.ok(react.Hero, "Hero wrapper should be exported");
-		assert.ok(react.Container, "Container wrapper should be exported");
-		assert.ok(react.Icon, "Icon wrapper should be exported");
-		assert.ok(react.Loading, "Loading wrapper should be exported");
-		assert.ok(react.Notice, "Notice wrapper should be exported");
-	});
+describe('React Wrappers', () => {
+  it('should export all component wrappers', async () => {
+    const react = await import('./react.js');
+    assert.ok(react.Button, 'Button wrapper should be exported');
+    assert.ok(react.Card, 'Card wrapper should be exported');
+    assert.ok(react.Dialog, 'Dialog wrapper should be exported');
+    assert.ok(react.Accordion, 'Accordion wrapper should be exported');
+    assert.ok(react.Tooltip, 'Tooltip wrapper should be exported');
+    assert.ok(react.Hero, 'Hero wrapper should be exported');
+    assert.ok(react.Container, 'Container wrapper should be exported');
+    assert.ok(react.Icon, 'Icon wrapper should be exported');
+    assert.ok(react.Loading, 'Loading wrapper should be exported');
+    assert.ok(react.Notice, 'Notice wrapper should be exported');
+  });
 
-	it("should export at least 35 component wrappers", async () => {
-		const react = await import("./react.js");
-		const exportCount = Object.keys(react).length;
-		assert.ok(
-			exportCount >= 35,
-			`Expected at least 35 exports, got ${exportCount}`,
-		);
-	});
+  it('should export at least 35 component wrappers', async () => {
+    const react = await import('./react.js');
+    const exportCount = Object.keys(react).length;
+    assert.ok(exportCount >= 35, `Expected at least 35 exports, got ${exportCount}`);
+  });
 
-	it("should export event-mapped components", async () => {
-		const react = await import("./react.js");
-		assert.ok(react.AppBar, "AppBar wrapper should be exported");
-		assert.ok(react.Dropdown, "Dropdown wrapper should be exported");
-		assert.ok(react.DropdownItem, "DropdownItem wrapper should be exported");
-		assert.ok(react.Sidebar, "Sidebar wrapper should be exported");
-		assert.ok(react.Toast, "Toast wrapper should be exported");
-	});
+  it('should export event-mapped components', async () => {
+    const react = await import('./react.js');
+    assert.ok(react.AppBar, 'AppBar wrapper should be exported');
+    assert.ok(react.Dropdown, 'Dropdown wrapper should be exported');
+    assert.ok(react.DropdownItem, 'DropdownItem wrapper should be exported');
+    assert.ok(react.Sidebar, 'Sidebar wrapper should be exported');
+    assert.ok(react.Toast, 'Toast wrapper should be exported');
+  });
 
-	it("should export compound component wrappers", async () => {
-		const react = await import("./react.js");
-		assert.ok(react.Breadcrumb, "Breadcrumb wrapper should be exported");
-		assert.ok(
-			react.BreadcrumbItem,
-			"BreadcrumbItem wrapper should be exported",
-		);
-		assert.ok(react.Footer, "Footer wrapper should be exported");
-		assert.ok(react.FooterColumn, "FooterColumn wrapper should be exported");
-		assert.ok(react.Gallery, "Gallery wrapper should be exported");
-		assert.ok(react.GalleryImage, "GalleryImage wrapper should be exported");
-		assert.ok(react.Tabs, "Tabs wrapper should be exported");
-		assert.ok(react.Tab, "Tab wrapper should be exported");
-		assert.ok(react.TabsButton, "TabsButton wrapper should be exported");
-		assert.ok(
-			react.ToastContainer,
-			"ToastContainer wrapper should be exported",
-		);
-	});
+  it('should export compound component wrappers', async () => {
+    const react = await import('./react.js');
+    assert.ok(react.Breadcrumb, 'Breadcrumb wrapper should be exported');
+    assert.ok(react.BreadcrumbItem, 'BreadcrumbItem wrapper should be exported');
+    assert.ok(react.Footer, 'Footer wrapper should be exported');
+    assert.ok(react.FooterColumn, 'FooterColumn wrapper should be exported');
+    assert.ok(react.Gallery, 'Gallery wrapper should be exported');
+    assert.ok(react.GalleryImage, 'GalleryImage wrapper should be exported');
+    assert.ok(react.Tabs, 'Tabs wrapper should be exported');
+    assert.ok(react.Tab, 'Tab wrapper should be exported');
+    assert.ok(react.TabsButton, 'TabsButton wrapper should be exported');
+    assert.ok(react.ToastContainer, 'ToastContainer wrapper should be exported');
+  });
 });