@webjsdev/ui 0.3.17 → 0.4.0

package/packages/registry/blocks/charts/chart-tooltip-icons.ts

@@ -0,0 +1,68 @@
+/**
+ * A stacked bar chart whose tooltip shows each series icon, a chart block ported from shadcn/ui's chart-tooltip-icons.
+ *
+ * Installed by `npx @webjsdev/ui add chart-tooltip-icons` at
+ * `components/charts/chart-tooltip-icons.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartTooltipIcons()}`.
+ */
+import { html, svg } from '@webjsdev/core';
+import {
+  cardClass, cardContentClass, cardDescriptionClass, cardHeaderClass, cardTitleClass,
+} from '../../components/card.ts';
+import { barChart, type ChartConfig } from '../../components/chart.ts';
+
+const chartData = [
+  { date: '2024-07-15', running: 450, swimming: 300 },
+  { date: '2024-07-16', running: 380, swimming: 420 },
+  { date: '2024-07-17', running: 520, swimming: 120 },
+  { date: '2024-07-18', running: 140, swimming: 550 },
+  { date: '2024-07-19', running: 600, swimming: 350 },
+  { date: '2024-07-20', running: 480, swimming: 400 },
+];
+
+const chartConfig = {
+  running: {
+    label: 'Running',
+    color: 'var(--chart-1)',
+    icon: () => Footprints(),
+  },
+  swimming: {
+    label: 'Swimming',
+    color: 'var(--chart-2)',
+    icon: () => Waves(),
+  },
+} satisfies ChartConfig;
+
+// lucide's footprints and waves, the series icons.
+const Footprints = () => svg`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-footprints"><path d="M4 16v-2.38C4 11.5 2.97 10.5 3 8c.03-2.72 1.49-6 4.5-6C9.37 2 10 3.8 10 5.5c0 3.11-2 5.66-2 8.68V16a2 2 0 1 1-4 0Z"></path><path d="M20 20v-2.38c0-2.12 1.03-3.12 1-5.62-.03-2.72-1.49-6-4.5-6C14.63 6 14 7.8 14 9.5c0 3.11 2 5.66 2 8.68V20a2 2 0 1 0 4 0Z"></path><path d="M16 17h4"></path><path d="M4 13h4"></path></svg>`;
+const Waves = () => svg`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-waves"><path d="M2 12q2.5 2 5 0t5 0 5 0 5 0"></path><path d="M2 19q2.5 2 5 0t5 0 5 0 5 0"></path><path d="M2 5q2.5 2 5 0t5 0 5 0 5 0"></path></svg>`;
+
+export default function ChartTooltipIcons() {
+  return html`
+    <div data-slot="card" class=${cardClass()}>
+      <div data-slot="card-header" class=${cardHeaderClass()}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Tooltip - Icons</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>Tooltip with icons.</div>
+      </div>
+      <div data-slot="card-content" class=${cardContentClass()}>
+        ${barChart({
+          config: chartConfig,
+          data: chartData,
+          title: 'Running and swimming by day',
+          xAxis: {
+            dataKey: 'date',
+            tickLine: false,
+            tickMargin: 10,
+            axisLine: false,
+            tickFormatter: (value) => new Date(String(value)).toLocaleDateString('en-US', { weekday: 'short', timeZone: 'UTC' }),
+          },
+          bars: [
+            { dataKey: 'running', stackId: 'a', fill: 'var(--color-running)', radius: [0, 0, 4, 4] },
+            { dataKey: 'swimming', stackId: 'a', fill: 'var(--color-swimming)', radius: [4, 4, 0, 0] },
+          ],
+          tooltip: { hideLabel: true, cursor: false, defaultIndex: 1 },
+        })}
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/charts/chart-tooltip-indicator-line.ts

@@ -0,0 +1,62 @@
+/**
+ * A stacked bar chart whose tooltip uses a line indicator, a chart block ported from shadcn/ui's chart-tooltip-indicator-line.
+ *
+ * Installed by `npx @webjsdev/ui add chart-tooltip-indicator-line` at
+ * `components/charts/chart-tooltip-indicator-line.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartTooltipIndicatorLine()}`.
+ */
+import { html } from '@webjsdev/core';
+import {
+  cardClass, cardContentClass, cardDescriptionClass, cardHeaderClass, cardTitleClass,
+} from '../../components/card.ts';
+import { barChart, type ChartConfig } from '../../components/chart.ts';
+
+const chartData = [
+  { date: '2024-07-15', running: 450, swimming: 300 },
+  { date: '2024-07-16', running: 380, swimming: 420 },
+  { date: '2024-07-17', running: 520, swimming: 120 },
+  { date: '2024-07-18', running: 140, swimming: 550 },
+  { date: '2024-07-19', running: 600, swimming: 350 },
+  { date: '2024-07-20', running: 480, swimming: 400 },
+];
+
+const chartConfig = {
+  running: {
+    label: 'Running',
+    color: 'var(--chart-1)',
+  },
+  swimming: {
+    label: 'Swimming',
+    color: 'var(--chart-2)',
+  },
+} satisfies ChartConfig;
+
+export default function ChartTooltipIndicatorLine() {
+  return html`
+    <div data-slot="card" class=${cardClass()}>
+      <div data-slot="card-header" class=${cardHeaderClass()}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Tooltip - Line Indicator</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>Tooltip with line indicator.</div>
+      </div>
+      <div data-slot="card-content" class=${cardContentClass()}>
+        ${barChart({
+          config: chartConfig,
+          data: chartData,
+          title: 'Running and swimming by day',
+          xAxis: {
+            dataKey: 'date',
+            tickLine: false,
+            tickMargin: 10,
+            axisLine: false,
+            tickFormatter: (value) => new Date(String(value)).toLocaleDateString('en-US', { weekday: 'short', timeZone: 'UTC' }),
+          },
+          bars: [
+            { dataKey: 'running', stackId: 'a', fill: 'var(--color-running)', radius: [0, 0, 4, 4] },
+            { dataKey: 'swimming', stackId: 'a', fill: 'var(--color-swimming)', radius: [4, 4, 0, 0] },
+          ],
+          tooltip: { indicator: 'line', cursor: false, defaultIndex: 1 },
+        })}
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/charts/chart-tooltip-indicator-none.ts

@@ -0,0 +1,62 @@
+/**
+ * A stacked bar chart whose tooltip has no indicator, a chart block ported from shadcn/ui's chart-tooltip-indicator-none.
+ *
+ * Installed by `npx @webjsdev/ui add chart-tooltip-indicator-none` at
+ * `components/charts/chart-tooltip-indicator-none.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartTooltipIndicatorNone()}`.
+ */
+import { html } from '@webjsdev/core';
+import {
+  cardClass, cardContentClass, cardDescriptionClass, cardHeaderClass, cardTitleClass,
+} from '../../components/card.ts';
+import { barChart, type ChartConfig } from '../../components/chart.ts';
+
+const chartData = [
+  { date: '2024-07-15', running: 450, swimming: 300 },
+  { date: '2024-07-16', running: 380, swimming: 420 },
+  { date: '2024-07-17', running: 520, swimming: 120 },
+  { date: '2024-07-18', running: 140, swimming: 550 },
+  { date: '2024-07-19', running: 600, swimming: 350 },
+  { date: '2024-07-20', running: 480, swimming: 400 },
+];
+
+const chartConfig = {
+  running: {
+    label: 'Running',
+    color: 'var(--chart-1)',
+  },
+  swimming: {
+    label: 'Swimming',
+    color: 'var(--chart-2)',
+  },
+} satisfies ChartConfig;
+
+export default function ChartTooltipIndicatorNone() {
+  return html`
+    <div data-slot="card" class=${cardClass()}>
+      <div data-slot="card-header" class=${cardHeaderClass()}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Tooltip - No Indicator</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>Tooltip with no indicator.</div>
+      </div>
+      <div data-slot="card-content" class=${cardContentClass()}>
+        ${barChart({
+          config: chartConfig,
+          data: chartData,
+          title: 'Running and swimming by day',
+          xAxis: {
+            dataKey: 'date',
+            tickLine: false,
+            tickMargin: 10,
+            axisLine: false,
+            tickFormatter: (value) => new Date(String(value)).toLocaleDateString('en-US', { weekday: 'short', timeZone: 'UTC' }),
+          },
+          bars: [
+            { dataKey: 'running', stackId: 'a', fill: 'var(--color-running)', radius: [0, 0, 4, 4] },
+            { dataKey: 'swimming', stackId: 'a', fill: 'var(--color-swimming)', radius: [4, 4, 0, 0] },
+          ],
+          tooltip: { hideIndicator: true, cursor: false, defaultIndex: 1 },
+        })}
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/charts/chart-tooltip-label-custom.ts

@@ -0,0 +1,65 @@
+/**
+ * A stacked bar chart whose tooltip label comes from the config, a chart block ported from shadcn/ui's chart-tooltip-label-custom.
+ *
+ * Installed by `npx @webjsdev/ui add chart-tooltip-label-custom` at
+ * `components/charts/chart-tooltip-label-custom.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartTooltipLabelCustom()}`.
+ */
+import { html } from '@webjsdev/core';
+import {
+  cardClass, cardContentClass, cardDescriptionClass, cardHeaderClass, cardTitleClass,
+} from '../../components/card.ts';
+import { barChart, type ChartConfig } from '../../components/chart.ts';
+
+const chartData = [
+  { date: '2024-07-15', running: 450, swimming: 300 },
+  { date: '2024-07-16', running: 380, swimming: 420 },
+  { date: '2024-07-17', running: 520, swimming: 120 },
+  { date: '2024-07-18', running: 140, swimming: 550 },
+  { date: '2024-07-19', running: 600, swimming: 350 },
+  { date: '2024-07-20', running: 480, swimming: 400 },
+];
+
+const chartConfig = {
+  activities: {
+    label: 'Activities',
+  },
+  running: {
+    label: 'Running',
+    color: 'var(--chart-1)',
+  },
+  swimming: {
+    label: 'Swimming',
+    color: 'var(--chart-2)',
+  },
+} satisfies ChartConfig;
+
+export default function ChartTooltipLabelCustom() {
+  return html`
+    <div data-slot="card" class=${cardClass()}>
+      <div data-slot="card-header" class=${cardHeaderClass()}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Tooltip - Custom label</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>Tooltip with custom label from chartConfig.</div>
+      </div>
+      <div data-slot="card-content" class=${cardContentClass()}>
+        ${barChart({
+          config: chartConfig,
+          data: chartData,
+          title: 'Running and swimming by day',
+          xAxis: {
+            dataKey: 'date',
+            tickLine: false,
+            tickMargin: 10,
+            axisLine: false,
+            tickFormatter: (value) => new Date(String(value)).toLocaleDateString('en-US', { weekday: 'short', timeZone: 'UTC' }),
+          },
+          bars: [
+            { dataKey: 'running', stackId: 'a', fill: 'var(--color-running)', radius: [0, 0, 4, 4] },
+            { dataKey: 'swimming', stackId: 'a', fill: 'var(--color-swimming)', radius: [4, 4, 0, 0] },
+          ],
+          tooltip: { labelKey: 'activities', indicator: 'line', cursor: false, defaultIndex: 1 },
+        })}
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/charts/chart-tooltip-label-formatter.ts

@@ -0,0 +1,66 @@
+/**
+ * A stacked bar chart whose tooltip formats its label, a chart block ported from shadcn/ui's chart-tooltip-label-formatter.
+ *
+ * Installed by `npx @webjsdev/ui add chart-tooltip-label-formatter` at
+ * `components/charts/chart-tooltip-label-formatter.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartTooltipLabelFormatter()}`.
+ */
+import { html } from '@webjsdev/core';
+import {
+  cardClass, cardContentClass, cardDescriptionClass, cardHeaderClass, cardTitleClass,
+} from '../../components/card.ts';
+import { barChart, type ChartConfig } from '../../components/chart.ts';
+
+const chartData = [
+  { date: '2024-07-15', running: 450, swimming: 300 },
+  { date: '2024-07-16', running: 380, swimming: 420 },
+  { date: '2024-07-17', running: 520, swimming: 120 },
+  { date: '2024-07-18', running: 140, swimming: 550 },
+  { date: '2024-07-19', running: 600, swimming: 350 },
+  { date: '2024-07-20', running: 480, swimming: 400 },
+];
+
+const chartConfig = {
+  running: {
+    label: 'Running',
+    color: 'var(--chart-1)',
+  },
+  swimming: {
+    label: 'Swimming',
+    color: 'var(--chart-2)',
+  },
+} satisfies ChartConfig;
+
+export default function ChartTooltipLabelFormatter() {
+  return html`
+    <div data-slot="card" class=${cardClass()}>
+      <div data-slot="card-header" class=${cardHeaderClass()}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Tooltip - Label Formatter</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>Tooltip with label formatter.</div>
+      </div>
+      <div data-slot="card-content" class=${cardContentClass()}>
+        ${barChart({
+          config: chartConfig,
+          data: chartData,
+          title: 'Running and swimming by day',
+          xAxis: {
+            dataKey: 'date',
+            tickLine: false,
+            tickMargin: 10,
+            axisLine: false,
+            tickFormatter: (value) => new Date(String(value)).toLocaleDateString('en-US', { weekday: 'short', timeZone: 'UTC' }),
+          },
+          bars: [
+            { dataKey: 'running', stackId: 'a', fill: 'var(--color-running)', radius: [0, 0, 4, 4] },
+            { dataKey: 'swimming', stackId: 'a', fill: 'var(--color-swimming)', radius: [4, 4, 0, 0] },
+          ],
+          tooltip: {
+            labelFormatter: (value) => new Date(String(value)).toLocaleDateString('en-US', { day: 'numeric', month: 'long', year: 'numeric', timeZone: 'UTC' }),
+            cursor: false,
+            defaultIndex: 1,
+          },
+        })}
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/charts/chart-tooltip-label-none.ts

@@ -0,0 +1,62 @@
+/**
+ * A stacked bar chart whose tooltip has no label or indicator, a chart block ported from shadcn/ui's chart-tooltip-label-none.
+ *
+ * Installed by `npx @webjsdev/ui add chart-tooltip-label-none` at
+ * `components/charts/chart-tooltip-label-none.ts`. It is app code you own, so edit it
+ * freely, and render it from any page with `${ChartTooltipLabelNone()}`.
+ */
+import { html } from '@webjsdev/core';
+import {
+  cardClass, cardContentClass, cardDescriptionClass, cardHeaderClass, cardTitleClass,
+} from '../../components/card.ts';
+import { barChart, type ChartConfig } from '../../components/chart.ts';
+
+const chartData = [
+  { date: '2024-07-15', running: 450, swimming: 300 },
+  { date: '2024-07-16', running: 380, swimming: 420 },
+  { date: '2024-07-17', running: 520, swimming: 120 },
+  { date: '2024-07-18', running: 140, swimming: 550 },
+  { date: '2024-07-19', running: 600, swimming: 350 },
+  { date: '2024-07-20', running: 480, swimming: 400 },
+];
+
+const chartConfig = {
+  running: {
+    label: 'Running',
+    color: 'var(--chart-1)',
+  },
+  swimming: {
+    label: 'Swimming',
+    color: 'var(--chart-2)',
+  },
+} satisfies ChartConfig;
+
+export default function ChartTooltipLabelNone() {
+  return html`
+    <div data-slot="card" class=${cardClass()}>
+      <div data-slot="card-header" class=${cardHeaderClass()}>
+        <div data-slot="card-title" class=${cardTitleClass()}>Tooltip - No Label</div>
+        <div data-slot="card-description" class=${cardDescriptionClass()}>Tooltip with no label.</div>
+      </div>
+      <div data-slot="card-content" class=${cardContentClass()}>
+        ${barChart({
+          config: chartConfig,
+          data: chartData,
+          title: 'Running and swimming by day',
+          xAxis: {
+            dataKey: 'date',
+            tickLine: false,
+            tickMargin: 10,
+            axisLine: false,
+            tickFormatter: (value) => new Date(String(value)).toLocaleDateString('en-US', { weekday: 'short', timeZone: 'UTC' }),
+          },
+          bars: [
+            { dataKey: 'running', stackId: 'a', fill: 'var(--color-running)', radius: [0, 0, 4, 4] },
+            { dataKey: 'swimming', stackId: 'a', fill: 'var(--color-swimming)', radius: [4, 4, 0, 0] },
+          ],
+          tooltip: { hideIndicator: true, hideLabel: true, cursor: false, defaultIndex: 1 },
+        })}
+      </div>
+    </div>
+  `;
+}

package/packages/registry/blocks/dashboard-01/components/app-sidebar.ts

@@ -0,0 +1,108 @@
+/**
+ * The dashboard-01 app sidebar: the brand, the main nav with "Quick Create",
+ * the documents list, the secondary links pinned to the bottom, and the
+ * signed-in user, in an inset sidebar that slides off canvas (Ctrl+B or
+ * Cmd+B, or the header's trigger). A fragment helper, so the markup is
+ * rendered by the server; the sidebar and the menus are the kit's elements.
+ * Ported from shadcn/ui's dashboard-01.
+ *
+ * The data below is sample data. Replace it with your own, and point each
+ * `url` at a real route. The options shape the shell for other layouts:
+ * `collapsible` (`'offcanvas'` by default, `'none'` for a fixed column),
+ * `class` and `headerClass` added to the sidebar and its header, `logo` in
+ * place of the brand icon, `mainLabel` / `quickCreate` passed to the main
+ * nav, and `data` to replace any of the sample lists.
+ */
+import { html } from '@webjsdev/core';
+import type { TemplateResult } from '@webjsdev/core';
+import { cn } from '../../../lib/utils.ts';
+import {
+  sidebarContentClass,
+  sidebarFooterClass,
+  sidebarHeaderClass,
+  sidebarMenuButtonClass,
+  sidebarMenuClass,
+  sidebarMenuItemClass,
+} from '../../../components/sidebar.ts';
+import { navDocuments, type NavDocument } from './nav-documents.ts';
+import { navMain, type NavMainItem } from './nav-main.ts';
+import { navSecondary, type NavSecondaryItem } from './nav-secondary.ts';
+import { navUser } from './nav-user.ts';
+import { ChartBarIcon, CircleHelpIcon, CommandIcon, DatabaseIcon, FileChartColumnIcon, FileIcon, FolderIcon, LayoutDashboardIcon, ListIcon, SearchIcon, Settings2Icon, UsersIcon } from '../../../lib/icons.ts';
+
+export interface AppSidebarData {
+  user: { name: string; email: string; avatar: string };
+  navMain: NavMainItem[];
+  navSecondary: NavSecondaryItem[];
+  documents: NavDocument[];
+}
+
+export interface AppSidebarOptions {
+  variant?: 'sidebar' | 'floating' | 'inset';
+  collapsible?: 'offcanvas' | 'icon' | 'none';
+  class?: string;
+  headerClass?: string;
+  logo?: TemplateResult;
+  mainLabel?: string;
+  quickCreate?: boolean;
+  data?: Partial<AppSidebarData>;
+}
+
+// This is sample data.
+const data: AppSidebarData = {
+  user: {
+    name: 'vivek',
+    email: 'vivek@example.com',
+    avatar: 'https://webjs.dev/public/avatars/vivek.jpg',
+  },
+  navMain: [
+    { title: 'Dashboard', url: '#', icon: LayoutDashboardIcon },
+    { title: 'Lifecycle', url: '#', icon: ListIcon },
+    { title: 'Analytics', url: '#', icon: ChartBarIcon },
+    { title: 'Projects', url: '#', icon: FolderIcon },
+    { title: 'Team', url: '#', icon: UsersIcon },
+  ],
+  navSecondary: [
+    { title: 'Settings', url: '#', icon: Settings2Icon },
+    { title: 'Get Help', url: '#', icon: CircleHelpIcon },
+    { title: 'Search', url: '#', icon: SearchIcon },
+  ],
+  documents: [
+    { name: 'Data Library', url: '#', icon: DatabaseIcon },
+    { name: 'Reports', url: '#', icon: FileChartColumnIcon },
+    { name: 'Word Assistant', url: '#', icon: FileIcon },
+  ],
+};
+
+/**
+ * The sidebar. shadcn's page widens it to 18rem through the provider's
+ * `--sidebar-width`; the kit's provider sets its own on the wrapper it
+ * renders, so the width rides on the sidebar itself here. A `class` that sets
+ * its own `--sidebar-width` replaces this one, as shadcn's merge would.
+ */
+export function appSidebar(opts: AppSidebarOptions = {}) {
+  const d = { ...data, ...opts.data };
+  const width = opts.class?.includes('[--sidebar-width:') ? '' : '[--sidebar-width:calc(var(--spacing)*72)]';
+  return html`
+    <ui-sidebar collapsible=${opts.collapsible ?? 'offcanvas'} variant=${opts.variant ?? 'sidebar'} class=${cn(width, opts.class)}>
+      <div data-slot="sidebar-header" data-sidebar="header" class=${cn(sidebarHeaderClass(), opts.headerClass)}>
+        <ul data-slot="sidebar-menu" data-sidebar="menu" class=${sidebarMenuClass()}>
+          <li data-slot="sidebar-menu-item" data-sidebar="menu-item" class=${sidebarMenuItemClass()}>
+            <a href="#" data-slot="sidebar-menu-button" data-sidebar="menu-button" data-size="default" class=${cn(sidebarMenuButtonClass(), 'data-[slot=sidebar-menu-button]:p-1.5!')}>
+              ${opts.logo ?? CommandIcon('size-5!')}
+              <span class="text-base font-semibold">Acme Inc.</span>
+            </a>
+          </li>
+        </ul>
+      </div>
+      <div data-slot="sidebar-content" data-sidebar="content" class=${sidebarContentClass()}>
+        ${navMain({ items: d.navMain, label: opts.mainLabel, quickCreate: opts.quickCreate })}
+        ${navDocuments({ items: d.documents })}
+        ${navSecondary({ items: d.navSecondary, class: 'mt-auto' })}
+      </div>
+      <div data-slot="sidebar-footer" data-sidebar="footer" class=${sidebarFooterClass()}>
+        ${navUser({ user: d.user })}
+      </div>
+    </ui-sidebar>
+  `;
+}