@tuturuuu/ui 0.16.0 → 0.18.0

package/src/components/ui/storefront/types.ts

@@ -34,9 +34,11 @@ export type StorefrontSurfaceMode =
 
 export type StorefrontSurfaceLabels = {
   add: string;
+  allItems: string;
   available: string;
   browse: string;
   bundle: string;
+  bundles: string;
   bundleSelectionTitle: string;
   buyNow: string;
   cart: string;
@@ -44,6 +46,7 @@ export type StorefrontSurfaceLabels = {
   checkout: string;
   checkoutDisabled: string;
   checkoutDisabledBadge: string;
+  clearFilters: string;
   contactDetails: string;
   couponNote: string;
   demoBadge: string;
@@ -51,15 +54,20 @@ export type StorefrontSurfaceLabels = {
   fromPrice: string;
   instantCheckout: string;
   orderSummary: string;
+  onlineCheckout: string;
+  onlineCheckoutDescription: string;
   redirectingToCheckout: string;
   requiredItems: string;
   selectOptions: string;
   searchBundleItems: string;
+  searchStore: string;
   selectedItems: string;
   viewDetails: string;
   emptyListingsDescription: string;
   emptyListingsTitle: string;
   fallbackDescription: string;
+  noResultsDescription: string;
+  noResultsTitle: string;
   form: {
     email: string;
     name: string;
@@ -69,6 +77,7 @@ export type StorefrontSurfaceLabels = {
   privateStore: string;
   previewBadge: string;
   product: string;
+  products: string;
   publicStore: string;
   quantity: string;
   reserve: string;
@@ -76,14 +85,20 @@ export type StorefrontSurfaceLabels = {
   reservedCopy: string;
   simulatedBadge: string;
   soldOut: string;
+  squareTerminal: string;
+  squareTerminalDescription: string;
+  shopTitle: string;
   total: string;
+  visibleItems: string;
 };
 
 export const defaultStorefrontSurfaceLabels: StorefrontSurfaceLabels = {
   add: 'Add',
+  allItems: 'All',
   available: 'available',
   browse: 'Browse',
   bundle: 'Bundle',
+  bundles: 'Bundles',
   bundleSelectionTitle: 'Build bundle',
   buyNow: 'Buy now',
   cart: 'Cart',
@@ -91,6 +106,7 @@ export const defaultStorefrontSurfaceLabels: StorefrontSurfaceLabels = {
   checkout: 'Checkout',
   checkoutDisabled: 'Checkout is disabled in preview',
   checkoutDisabledBadge: 'Checkout disabled',
+  clearFilters: 'Clear filters',
   contactDetails: 'Contact details',
   couponNote: 'Have a coupon? You can apply it at checkout.',
   demoBadge: 'Demo',
@@ -98,16 +114,22 @@ export const defaultStorefrontSurfaceLabels: StorefrontSurfaceLabels = {
   fromPrice: 'From',
   instantCheckout: 'Instant checkout',
   orderSummary: 'Order summary',
+  onlineCheckout: 'Secure online checkout',
+  onlineCheckoutDescription:
+    'Continue to Polar to complete payment securely online.',
   redirectingToCheckout: 'Taking you to secure checkout…',
   requiredItems: 'Select {count} items',
   selectOptions: 'Select options',
   searchBundleItems: 'Search items',
+  searchStore: 'Search this store',
   selectedItems: '{selected} of {required} selected',
   viewDetails: 'View details',
   emptyListingsDescription:
     'Publish a listing to make this storefront ready for buyers.',
   emptyListingsTitle: 'No listings yet',
   fallbackDescription: 'This listing is available for checkout.',
+  noResultsDescription: 'Try another search or show every item.',
+  noResultsTitle: 'No matching items',
   form: {
     email: 'Email',
     name: 'Name',
@@ -117,6 +139,7 @@ export const defaultStorefrontSurfaceLabels: StorefrontSurfaceLabels = {
   privateStore: 'Private',
   previewBadge: 'Preview',
   product: 'Product',
+  products: 'Products',
   publicStore: 'Public',
   quantity: 'Qty',
   reserve: 'Reserve with Polar',
@@ -125,7 +148,12 @@ export const defaultStorefrontSurfaceLabels: StorefrontSurfaceLabels = {
     'Review your cart, then continue with the available checkout mode.',
   simulatedBadge: 'Simulated checkout',
   soldOut: 'Sold out',
+  squareTerminal: 'Square Terminal',
+  squareTerminalDescription:
+    'Complete payment in person on the paired terminal at the counter.',
+  shopTitle: 'Shop',
   total: 'Total',
+  visibleItems: '{count} items',
 };
 
 export function mergeStorefrontSurfaceLabels(

package/src/components/ui/storefront/utils.ts

@@ -15,8 +15,8 @@ import type { StorefrontCartLine } from './types';
 // in the data model for backwards compatibility, but every value resolves to the
 // same refined look so the experience is consistent across all storefronts.
 
-/** One soft, modern corner radius for every surface. */
-export const STOREFRONT_RADIUS = 'rounded-2xl';
+/** One restrained corner radius for every storefront surface. */
+export const STOREFRONT_RADIUS = 'rounded-xl';
 
 export const storefrontRadiusClasses: Record<
   InventoryStorefront['cornerStyle'],
@@ -27,9 +27,8 @@ export const storefrontRadiusClasses: Record<
   soft: STOREFRONT_RADIUS,
 };
 
-/** One elevated card surface for every storefront. */
-export const STOREFRONT_SURFACE =
-  'border border-border/60 bg-card shadow-sm shadow-foreground/5';
+/** One quiet, border-led card surface for every storefront. */
+export const STOREFRONT_SURFACE = 'border border-border bg-card';
 
 export const storefrontSurfaceClasses: Record<
   InventoryStorefront['surfaceStyle'],

package/src/components/ui/tasks/progress/activity-heatmap.tsx

@@ -0,0 +1,256 @@
+'use client';
+
+import { cn } from '@tuturuuu/utils/format';
+import { useMemo } from 'react';
+
+export interface ActivityHeatmapDatum {
+  date: string;
+  value: number;
+}
+
+interface ActivityHeatmapProps {
+  data: ActivityHeatmapDatum[];
+  /** Number of trailing weeks to render (default 53 = ~1 year). */
+  weeks?: number;
+  /** ISO date (YYYY-MM-DD) of the last column; defaults to today (local). */
+  endDate?: string;
+  /** Unit label shown in tooltips, e.g. "words". */
+  unitLabel?: string;
+  /**
+   * Ordered intensity classes from lowest (empty) to highest.
+   * Must be literal Tailwind class strings so JIT can see them.
+   */
+  levelClasses?: [string, string, string, string, string];
+  className?: string;
+  /** Called with the ISO date when a day cell is activated. */
+  onSelectDate?: (date: string) => void;
+}
+
+const DEFAULT_LEVELS: [string, string, string, string, string] = [
+  'bg-foreground/[0.06]',
+  'bg-dynamic-green/25',
+  'bg-dynamic-green/45',
+  'bg-dynamic-green/70',
+  'bg-dynamic-green',
+];
+
+const WEEKDAY_LABELS: Array<{ id: string; label: string }> = [
+  { id: 'sun', label: '' },
+  { id: 'mon', label: 'Mon' },
+  { id: 'tue', label: '' },
+  { id: 'wed', label: 'Wed' },
+  { id: 'thu', label: '' },
+  { id: 'fri', label: 'Fri' },
+  { id: 'sat', label: '' },
+];
+const MS_PER_DAY = 86_400_000;
+
+function toIsoDate(date: Date) {
+  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(
+    date.getDate()
+  ).padStart(2, '0')}`;
+}
+
+function parseIsoDate(value: string) {
+  const [y, m, d] = value.split('-').map(Number);
+  return new Date(y ?? 1970, (m ?? 1) - 1, d ?? 1);
+}
+
+/**
+ * GitHub-style contribution heatmap. Columns are weeks (Sunday-started),
+ * rows are weekdays. Intensity is quantized against the dataset's non-zero
+ * distribution so a single big day never washes out the rest.
+ */
+export function ActivityHeatmap({
+  data,
+  weeks = 53,
+  endDate,
+  unitLabel = '',
+  levelClasses = DEFAULT_LEVELS,
+  className,
+  onSelectDate,
+}: ActivityHeatmapProps) {
+  const { columns, monthLabels, thresholds } = useMemo(() => {
+    const byDate = new Map<string, number>();
+    for (const entry of data) {
+      if (!entry?.date) continue;
+      byDate.set(
+        entry.date,
+        (byDate.get(entry.date) ?? 0) + Number(entry.value || 0)
+      );
+    }
+
+    // Anchor the grid to the Saturday at or after endDate so the final
+    // (rightmost) column always contains "today".
+    const anchor = endDate ? parseIsoDate(endDate) : new Date();
+    anchor.setHours(0, 0, 0, 0);
+    const lastColumnEnd = new Date(anchor);
+    lastColumnEnd.setDate(
+      lastColumnEnd.getDate() + (6 - lastColumnEnd.getDay())
+    );
+
+    const totalDays = weeks * 7;
+    const gridStart = new Date(
+      lastColumnEnd.getTime() - (totalDays - 1) * MS_PER_DAY
+    );
+
+    const cols: Array<
+      Array<{ date: string; value: number; inFuture: boolean }>
+    > = [];
+    const months: Array<{ index: number; label: string }> = [];
+    const monthFormatter = new Intl.DateTimeFormat(undefined, {
+      month: 'short',
+    });
+    let lastMonth = -1;
+    const todayIso = toIsoDate(new Date());
+
+    for (let w = 0; w < weeks; w++) {
+      const col: Array<{ date: string; value: number; inFuture: boolean }> = [];
+      for (let day = 0; day < 7; day++) {
+        const cellDate = new Date(
+          gridStart.getTime() + (w * 7 + day) * MS_PER_DAY
+        );
+        const iso = toIsoDate(cellDate);
+        col.push({
+          date: iso,
+          value: byDate.get(iso) ?? 0,
+          inFuture: iso > todayIso,
+        });
+        if (day === 0) {
+          const month = cellDate.getMonth();
+          if (month !== lastMonth) {
+            months.push({ index: w, label: monthFormatter.format(cellDate) });
+            lastMonth = month;
+          }
+        }
+      }
+      cols.push(col);
+    }
+
+    // Quartile thresholds over positive values for balanced shading.
+    const positives = [...byDate.values()]
+      .filter((v) => v > 0)
+      .sort((a, b) => a - b);
+    const quantile = (q: number) =>
+      positives.length === 0
+        ? 0
+        : (positives[
+            Math.min(positives.length - 1, Math.floor(q * positives.length))
+          ] ?? 0);
+
+    return {
+      columns: cols,
+      monthLabels: months,
+      thresholds: [quantile(0.25), quantile(0.5), quantile(0.75)],
+    };
+  }, [data, weeks, endDate]);
+
+  const levelFor = (value: number) => {
+    if (value <= 0) return 0;
+    if (value <= thresholds[0]!) return 1;
+    if (value <= thresholds[1]!) return 2;
+    if (value <= thresholds[2]!) return 3;
+    return 4;
+  };
+
+  const numberFormatter = useMemo(() => new Intl.NumberFormat(), []);
+  const dateFormatter = useMemo(
+    () =>
+      new Intl.DateTimeFormat(undefined, {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
+      }),
+    []
+  );
+
+  return (
+    <div className={cn('w-full overflow-x-auto', className)}>
+      <div className="inline-flex min-w-full flex-col gap-1.5">
+        {/* Month labels */}
+        <div className="flex pl-8 text-[10px] text-muted-foreground">
+          <div className="relative flex-1" style={{ height: 12 }}>
+            {monthLabels.map((month) => (
+              <span
+                className="absolute top-0"
+                key={`${month.label}-${month.index}`}
+                style={{ left: `${(month.index / columns.length) * 100}%` }}
+              >
+                {month.label}
+              </span>
+            ))}
+          </div>
+        </div>
+
+        <div className="flex gap-1.5">
+          {/* Weekday labels */}
+          <div className="flex w-6 shrink-0 flex-col justify-between py-0.5 text-[9px] text-muted-foreground">
+            {WEEKDAY_LABELS.map((weekday) => (
+              <span className="h-3 leading-3" key={weekday.id}>
+                {weekday.label}
+              </span>
+            ))}
+          </div>
+
+          {/* Week columns */}
+          <div className="flex gap-[3px]">
+            {columns.map((col, weekIndex) => (
+              <div
+                className="flex flex-col gap-[3px]"
+                key={col[0]?.date ?? weekIndex}
+              >
+                {col.map((cell) => {
+                  if (cell.inFuture) {
+                    return (
+                      <div
+                        className="size-3 rounded-[3px] bg-transparent"
+                        key={cell.date}
+                      />
+                    );
+                  }
+                  const level = levelFor(cell.value);
+                  const title =
+                    cell.value > 0
+                      ? `${numberFormatter.format(cell.value)}${unitLabel ? ` ${unitLabel}` : ''} · ${dateFormatter.format(parseIsoDate(cell.date))}`
+                      : `No activity · ${dateFormatter.format(parseIsoDate(cell.date))}`;
+                  const interactive = Boolean(onSelectDate);
+                  return (
+                    <button
+                      aria-label={title}
+                      className={cn(
+                        'size-3 rounded-[3px] ring-offset-background transition-transform focus:outline-none focus-visible:ring-2 focus-visible:ring-dynamic-blue focus-visible:ring-offset-1',
+                        levelClasses[level],
+                        interactive && 'cursor-pointer hover:scale-125'
+                      )}
+                      disabled={!interactive}
+                      key={cell.date}
+                      onClick={
+                        interactive
+                          ? () => onSelectDate?.(cell.date)
+                          : undefined
+                      }
+                      title={title}
+                      type="button"
+                    />
+                  );
+                })}
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Legend */}
+        <div className="flex items-center gap-1.5 pl-8 text-[10px] text-muted-foreground">
+          <span>Less</span>
+          {levelClasses.map((levelClass) => (
+            <span
+              className={cn('size-3 rounded-[3px]', levelClass)}
+              key={levelClass}
+            />
+          ))}
+          <span>More</span>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/ui/tasks/progress/breakdown-bars.tsx

@@ -0,0 +1,79 @@
+'use client';
+
+import { cn } from '@tuturuuu/utils/format';
+import { useMemo } from 'react';
+
+export interface BreakdownDatum {
+  label: string;
+  value: number;
+}
+
+interface BreakdownBarsProps {
+  data: BreakdownDatum[];
+  unitLabel?: string;
+  /** Max rows to show; the rest collapse into "Other". */
+  limit?: number;
+  /** Literal Tailwind bg class for the filled bar. */
+  barClassName?: string;
+  emptyLabel?: string;
+  className?: string;
+}
+
+export function BreakdownBars({
+  data,
+  unitLabel = '',
+  limit = 8,
+  barClassName = 'bg-dynamic-blue',
+  emptyLabel = 'No data yet',
+  className,
+}: BreakdownBarsProps) {
+  const rows = useMemo(() => {
+    const sorted = [...data]
+      .filter((d) => d.value > 0)
+      .sort((a, b) => b.value - a.value);
+    if (sorted.length <= limit) return sorted;
+    const head = sorted.slice(0, limit - 1);
+    const rest = sorted.slice(limit - 1);
+    const otherValue = rest.reduce((sum, r) => sum + r.value, 0);
+    return [...head, { label: 'Other', value: otherValue }];
+  }, [data, limit]);
+
+  const max = useMemo(() => Math.max(...rows.map((r) => r.value), 1), [rows]);
+  const numberFormatter = useMemo(() => new Intl.NumberFormat(), []);
+
+  if (rows.length === 0) {
+    return <p className="text-muted-foreground text-sm">{emptyLabel}</p>;
+  }
+
+  return (
+    <div className={cn('space-y-2.5', className)}>
+      {rows.map((row) => (
+        <div
+          className="grid grid-cols-[minmax(4rem,8rem)_1fr_auto] items-center gap-3"
+          key={row.label}
+        >
+          <span
+            className="truncate text-muted-foreground text-sm"
+            title={row.label}
+          >
+            {row.label}
+          </span>
+          <div className="h-2.5 overflow-hidden rounded-full bg-foreground/[0.06]">
+            <div
+              className={cn('h-full rounded-full transition-all', barClassName)}
+              style={{ width: `${Math.max((row.value / max) * 100, 2)}%` }}
+            />
+          </div>
+          <span className="text-right text-sm tabular-nums">
+            {numberFormatter.format(row.value)}
+            {unitLabel ? (
+              <span className="ml-1 text-muted-foreground text-xs">
+                {unitLabel}
+              </span>
+            ) : null}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/components/ui/tasks/progress/cumulative-progress-chart.tsx

@@ -0,0 +1,185 @@
+'use client';
+
+import { useMemo } from 'react';
+import { Area, AreaChart, CartesianGrid, Line, XAxis, YAxis } from 'recharts';
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from '../../chart';
+
+export interface CumulativeDatum {
+  date: string;
+  value: number;
+}
+
+interface ParConfig {
+  startDate: string;
+  endDate: string;
+  target: number;
+}
+
+interface CumulativeProgressChartProps {
+  /** Daily delta values (not cumulative); the chart accumulates them. */
+  daily: CumulativeDatum[];
+  unitLabel?: string;
+  /** Draw an expected-pace ("par") line for a dated target goal. */
+  par?: ParConfig | null;
+  className?: string;
+  height?: number;
+}
+
+const MS_PER_DAY = 86_400_000;
+
+function parseIsoDate(value: string) {
+  const [y, m, d] = value.split('-').map(Number);
+  return new Date(y ?? 1970, (m ?? 1) - 1, d ?? 1);
+}
+
+function toIsoDate(date: Date) {
+  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(
+    date.getDate()
+  ).padStart(2, '0')}`;
+}
+
+export function CumulativeProgressChart({
+  daily,
+  unitLabel = '',
+  par = null,
+  className,
+  height = 260,
+}: CumulativeProgressChartProps) {
+  const { rows, hasPar } = useMemo(() => {
+    const sorted = [...daily]
+      .filter((d) => d?.date)
+      .sort((a, b) => a.date.localeCompare(b.date));
+
+    // Build a continuous date axis so gaps read as flat lines, not jumps.
+    const parEnabled = Boolean(par && par.target > 0);
+    const firstDate = parEnabled
+      ? par!.startDate
+      : (sorted[0]?.date ?? toIsoDate(new Date()));
+    const lastDate = parEnabled
+      ? par!.endDate
+      : (sorted.at(-1)?.date ?? firstDate);
+
+    const start = parseIsoDate(firstDate);
+    const end = parseIsoDate(lastDate);
+    const totalDays = Math.max(
+      1,
+      Math.round((end.getTime() - start.getTime()) / MS_PER_DAY)
+    );
+
+    const deltaByDate = new Map<string, number>();
+    for (const d of sorted) {
+      deltaByDate.set(
+        d.date,
+        (deltaByDate.get(d.date) ?? 0) + Number(d.value || 0)
+      );
+    }
+
+    const todayIso = toIsoDate(new Date());
+    const out: Array<{
+      date: string;
+      cumulative: number | null;
+      par: number | null;
+    }> = [];
+    let running = 0;
+    for (let i = 0; i <= totalDays; i++) {
+      const iso = toIsoDate(new Date(start.getTime() + i * MS_PER_DAY));
+      running += deltaByDate.get(iso) ?? 0;
+      const parValue = parEnabled ? (par!.target * i) / totalDays : null;
+      out.push({
+        date: iso,
+        cumulative: iso <= todayIso ? running : null,
+        par: parValue,
+      });
+    }
+
+    return { rows: out, hasPar: parEnabled };
+  }, [daily, par]);
+
+  const config: ChartConfig = {
+    cumulative: { label: unitLabel || 'Progress', color: 'var(--chart-1)' },
+    par: { label: 'Expected pace', color: 'var(--chart-4)' },
+  };
+
+  const dateFormatter = useMemo(
+    () =>
+      new Intl.DateTimeFormat(undefined, { month: 'short', day: 'numeric' }),
+    []
+  );
+
+  return (
+    <ChartContainer
+      className={className}
+      config={config}
+      style={{ height, aspectRatio: 'auto', width: '100%' }}
+    >
+      <AreaChart data={rows} margin={{ left: 4, right: 12, top: 8, bottom: 0 }}>
+        <defs>
+          <linearGradient id="cumulativeFill" x1="0" x2="0" y1="0" y2="1">
+            <stop
+              offset="0%"
+              stopColor="var(--color-cumulative)"
+              stopOpacity={0.35}
+            />
+            <stop
+              offset="100%"
+              stopColor="var(--color-cumulative)"
+              stopOpacity={0.02}
+            />
+          </linearGradient>
+        </defs>
+        <CartesianGrid strokeDasharray="3 3" vertical={false} />
+        <XAxis
+          axisLine={false}
+          dataKey="date"
+          minTickGap={32}
+          tickFormatter={(value) =>
+            dateFormatter.format(parseIsoDate(String(value)))
+          }
+          tickLine={false}
+        />
+        <YAxis
+          axisLine={false}
+          tickFormatter={(value) =>
+            new Intl.NumberFormat(undefined, { notation: 'compact' }).format(
+              Number(value)
+            )
+          }
+          tickLine={false}
+          width={40}
+        />
+        <ChartTooltip
+          content={
+            <ChartTooltipContent
+              labelFormatter={(value) =>
+                dateFormatter.format(parseIsoDate(String(value)))
+              }
+            />
+          }
+        />
+        <Area
+          connectNulls
+          dataKey="cumulative"
+          fill="url(#cumulativeFill)"
+          stroke="var(--color-cumulative)"
+          strokeWidth={2}
+          type="monotone"
+        />
+        {hasPar ? (
+          <Line
+            dataKey="par"
+            dot={false}
+            stroke="var(--color-par)"
+            strokeDasharray="5 4"
+            strokeWidth={1.5}
+            type="monotone"
+          />
+        ) : null}
+      </AreaChart>
+    </ChartContainer>
+  );
+}