@tuturuuu/ui 0.8.0 → 0.9.0

package/src/components/ui/legacy/calendar/smart-calendar.test.tsx

@@ -7,8 +7,42 @@ import { describe, expect, it, vi } from 'vitest';
 import { SmartCalendar } from './smart-calendar';
 
 vi.mock('@tuturuuu/ui/hooks/use-calendar', () => ({
-  CalendarProvider: ({ children }: { children: ReactNode }) => (
-    <div data-testid="calendar-provider">{children}</div>
+  CalendarProvider: ({
+    children,
+    eventAdapter,
+  }: {
+    children: ReactNode;
+    eventAdapter?: {
+      disableBuiltInEventUi?: boolean;
+      preservePastEventOpacity?: boolean;
+    };
+  }) => (
+    <div
+      data-adapter={eventAdapter ? 'true' : 'false'}
+      data-preserve-past-opacity={
+        eventAdapter?.preservePastEventOpacity ? 'true' : 'false'
+      }
+      data-testid="calendar-provider"
+    >
+      {children}
+    </div>
+  ),
+}));
+
+vi.mock('@tuturuuu/ui/hooks/use-calendar-sync', () => ({
+  CalendarSyncProvider: ({
+    children,
+    externalEvents,
+  }: {
+    children: ReactNode;
+    externalEvents?: unknown[];
+  }) => (
+    <div
+      data-external-events={externalEvents?.length ?? 0}
+      data-testid="calendar-sync-provider"
+    >
+      {children}
+    </div>
   ),
 }));
 
@@ -19,8 +53,17 @@ vi.mock('./settings/settings-context', () => ({
 }));
 
 vi.mock('./calendar-content', () => ({
-  CalendarContent: ({ extras }: { extras?: ReactNode }) => (
-    <div data-testid="calendar-content">
+  CalendarContent: ({
+    disableBuiltInEventUi,
+    extras,
+  }: {
+    disableBuiltInEventUi?: boolean;
+    extras?: ReactNode;
+  }) => (
+    <div
+      data-disable-built-in-ui={disableBuiltInEventUi ? 'true' : 'false'}
+      data-testid="calendar-content"
+    >
       <div data-testid="header-extras">{extras}</div>
     </div>
   ),
@@ -73,4 +116,43 @@ describe('SmartCalendar', () => {
     expect(screen.queryByTestId('connections-manager')).toBeNull();
     expect(screen.getByTestId('custom-extra').textContent).toBe('extra');
   });
+
+  it('passes custom event adapters and external events through the calendar shell', () => {
+    render(
+      <SmartCalendar
+        {...baseProps}
+        workspace={{ id: 'workspace-1' } as Workspace}
+        showConnectionsManager={false}
+        eventAdapter={{
+          disableBuiltInEventUi: true,
+          preservePastEventOpacity: true,
+        }}
+        externalEvents={[
+          {
+            id: 'session-1',
+            title: 'Class',
+            start_at: '2026-06-19T12:00:00.000Z',
+            end_at: '2026-06-19T13:00:00.000Z',
+          },
+        ]}
+      />
+    );
+
+    expect(screen.getByTestId('calendar-sync-provider')).toHaveAttribute(
+      'data-external-events',
+      '1'
+    );
+    expect(screen.getByTestId('calendar-provider')).toHaveAttribute(
+      'data-adapter',
+      'true'
+    );
+    expect(screen.getByTestId('calendar-provider')).toHaveAttribute(
+      'data-preserve-past-opacity',
+      'true'
+    );
+    expect(screen.getByTestId('calendar-content')).toHaveAttribute(
+      'data-disable-built-in-ui',
+      'true'
+    );
+  });
 });

package/src/components/ui/legacy/calendar/smart-calendar.tsx

@@ -4,7 +4,12 @@ import type {
   Workspace,
   WorkspaceCalendarGoogleTokenClient,
 } from '@tuturuuu/types';
-import { CalendarProvider } from '@tuturuuu/ui/hooks/use-calendar';
+import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
+import {
+  type CalendarEventAdapter,
+  CalendarProvider,
+} from '@tuturuuu/ui/hooks/use-calendar';
+import { CalendarSyncProvider } from '@tuturuuu/ui/hooks/use-calendar-sync';
 import type { CalendarView } from '../../../../hooks/use-view-transition';
 import CalendarConnectionsUnified from '../../calendar-app/components/calendar-connections-unified';
 import { CalendarContent } from './calendar-content';
@@ -28,6 +33,10 @@ export const SmartCalendar = ({
   initialSettings,
   onSaveSettings,
   showConnectionsManager = true,
+  eventAdapter,
+  externalEvents,
+  externalEventsLoading,
+  externalEventsRefresh,
 }: {
   t: any;
   locale: string;
@@ -49,6 +58,10 @@ export const SmartCalendar = ({
   initialSettings?: Partial<CalendarSettings>;
   onSaveSettings?: (settings: CalendarSettings) => Promise<void>;
   showConnectionsManager?: boolean;
+  eventAdapter?: CalendarEventAdapter;
+  externalEvents?: CalendarEvent[];
+  externalEventsLoading?: boolean;
+  externalEventsRefresh?: () => void;
 }) => {
   const handleSaveSettings = async (newSettings: CalendarSettings) => {
     if (onSaveSettings) {
@@ -65,12 +78,13 @@ export const SmartCalendar = ({
       extras
     );
 
-  return (
+  const calendar = (
     <CalendarProvider
       ws={workspace}
       useQuery={useQuery}
       useQueryClient={useQueryClient}
       experimentalGoogleToken={experimentalGoogleToken}
+      eventAdapter={eventAdapter}
       readOnly={disabled}
     >
       <CalendarSettingsProvider
@@ -87,8 +101,24 @@ export const SmartCalendar = ({
           externalState={externalState}
           extras={headerExtras}
           overlay={overlay}
+          disableBuiltInEventUi={eventAdapter?.disableBuiltInEventUi}
         />
       </CalendarSettingsProvider>
     </CalendarProvider>
   );
+
+  if (externalEvents) {
+    return (
+      <CalendarSyncProvider
+        wsId={workspace?.id ?? 'external'}
+        externalEvents={externalEvents}
+        externalEventsLoading={externalEventsLoading}
+        externalRefresh={externalEventsRefresh}
+      >
+        {calendar}
+      </CalendarSyncProvider>
+    );
+  }
+
+  return calendar;
 };

package/src/components/ui/legacy/meet/create-plan-dialog.tsx

@@ -32,14 +32,19 @@ import { toast } from '@tuturuuu/ui/hooks/use-toast';
 import { Input } from '@tuturuuu/ui/input';
 import { zodResolver } from '@tuturuuu/ui/resolvers';
 import { Separator } from '@tuturuuu/ui/separator';
-import { RichTextEditor } from '@tuturuuu/ui/text-editor/editor';
 import { cn } from '@tuturuuu/utils/format';
 import dayjs from 'dayjs';
 import { useRouter } from 'next/navigation';
 import { useTranslations } from 'next-intl';
-import { useState } from 'react';
+import { lazy, Suspense, useState } from 'react';
 import * as z from 'zod';
 
+const RichTextEditor = lazy(async () => {
+  const module = await import('@tuturuuu/ui/text-editor/editor');
+
+  return { default: module.RichTextEditor };
+});
+
 interface Props {
   user: Partial<User> | null;
   plan: {
@@ -369,14 +374,18 @@ export default function CreatePlanDialog({ plan }: Props) {
                       <FormItem>
                         <FormControl>
                           <div className="rounded-lg border border-dynamic-green/30 bg-dynamic-green/5 p-3">
-                            <RichTextEditor
-                              content={field.value || null}
-                              onChange={field.onChange}
-                              readOnly={false}
-                              titlePlaceholder={t('agenda_title_placeholder')}
-                              writePlaceholder={t('agenda_content_placeholder')}
-                              className="h-64 border-0 bg-transparent"
-                            />
+                            <Suspense fallback={<div className="h-64" />}>
+                              <RichTextEditor
+                                content={field.value || null}
+                                onChange={field.onChange}
+                                readOnly={false}
+                                titlePlaceholder={t('agenda_title_placeholder')}
+                                writePlaceholder={t(
+                                  'agenda_content_placeholder'
+                                )}
+                                className="h-64 border-0 bg-transparent"
+                              />
+                            </Suspense>
                           </div>
                         </FormControl>
                         <FormMessage />

package/src/components/ui/navigation-menu.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
-import { ChevronDownIcon } from '@tuturuuu/icons';
+import { ChevronDownIcon } from '@tuturuuu/icons/lucide-static';
 import { cn } from '@tuturuuu/utils/format';
 import { cva } from 'class-variance-authority';
 import type * as React from 'react';

package/src/components/ui/pagination.tsx

@@ -2,7 +2,7 @@ import {
   ChevronLeftIcon,
   ChevronRightIcon,
   MoreHorizontalIcon,
-} from '@tuturuuu/icons';
+} from '@tuturuuu/icons/lucide-static';
 import { cn } from '@tuturuuu/utils/format';
 import type * as React from 'react';
 import { type Button, buttonVariants } from './button';

package/src/components/ui/radio-group.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
-import { CircleIcon } from '@tuturuuu/icons';
+import { CircleIcon } from '@tuturuuu/icons/lucide-static';
 import { cn } from '@tuturuuu/utils/format';
 import type * as React from 'react';
 

package/src/components/ui/select.tsx

@@ -1,7 +1,11 @@
 'use client';
 
 import * as SelectPrimitive from '@radix-ui/react-select';
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from '@tuturuuu/icons';
+import {
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+} from '@tuturuuu/icons/lucide-static';
 import { cn } from '@tuturuuu/utils/format';
 import type * as React from 'react';
 

package/src/components/ui/sheet.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as SheetPrimitive from '@radix-ui/react-dialog';
-import { XIcon } from '@tuturuuu/icons';
+import { XIcon } from '@tuturuuu/icons/lucide-static';
 import { cn } from '@tuturuuu/utils/format';
 import type * as React from 'react';
 

package/src/components/ui/sidebar.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { Slot } from '@radix-ui/react-slot';
-import { PanelLeftIcon } from '@tuturuuu/icons';
+import { PanelLeftIcon } from '@tuturuuu/icons/lucide-static';
 import { cn } from '@tuturuuu/utils/format';
 import { cva, type VariantProps } from 'class-variance-authority';
 import * as React from 'react';

package/src/components/ui/storefront/cart-popover.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import { ShoppingCart } from '@tuturuuu/icons';
+import { cn } from '@tuturuuu/utils/format';
+import type { CSSProperties, ReactNode } from 'react';
+import { Popover, PopoverContent, PopoverTrigger } from '../popover';
+import type { StorefrontSurfaceLabels } from './types';
+
+export function StorefrontCartPopover({
+  cartQuantity,
+  children,
+  labels,
+  onOpenChange,
+  open,
+  radius,
+}: {
+  cartQuantity: number;
+  children: ReactNode;
+  labels: StorefrontSurfaceLabels;
+  onOpenChange: (open: boolean) => void;
+  open: boolean;
+  radius: string;
+}) {
+  const cartControlStyle: CSSProperties | undefined =
+    cartQuantity > 0
+      ? {
+          borderColor: 'var(--storefront-accent-border, var(--border))',
+          color: 'var(--storefront-accent-text, var(--primary))',
+        }
+      : undefined;
+
+  return (
+    <Popover onOpenChange={onOpenChange} open={open}>
+      <PopoverTrigger asChild>
+        <button
+          aria-label={`${labels.cart}: ${cartQuantity}`}
+          className={cn(
+            'inline-flex h-11 min-w-14 shrink-0 items-center justify-center gap-2 border bg-card px-3 font-semibold text-sm tabular-nums transition hover:bg-muted/45 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40',
+            radius
+          )}
+          style={cartControlStyle}
+          type="button"
+        >
+          <ShoppingCart aria-hidden className="size-5 shrink-0" />
+          <span className="sr-only">{labels.cart}: </span>
+          <span className="min-w-4 text-center">{cartQuantity}</span>
+        </button>
+      </PopoverTrigger>
+      <PopoverContent
+        align="end"
+        className={cn(
+          'w-[min(calc(100vw-2rem),24rem)] border-border/70 p-4 shadow-xl',
+          radius
+        )}
+        sideOffset={10}
+      >
+        {children}
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/components/ui/storefront/cart-summary-parts.tsx

@@ -0,0 +1,290 @@
+'use client';
+
+import { ArrowRight, Tag, TriangleAlert, Zap } from '@tuturuuu/icons';
+import { ChevronDownIcon } from '@tuturuuu/icons/lucide-static';
+import { cn } from '@tuturuuu/utils/format';
+import type { ReactNode } from 'react';
+import { Button } from '../button';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '../collapsible';
+import { AccentButton } from './accent-button';
+import type {
+  StorefrontBuyerDefaults,
+  StorefrontCartEntry,
+  StorefrontSurfaceLabels,
+} from './types';
+import {
+  formatStorefrontPrice,
+  getStorefrontLinePrice,
+  getStorefrontVariantLabel,
+  storefrontCartLineKey,
+} from './utils';
+
+export function CartContents({
+  cartEntries,
+  currency,
+  hasCart,
+  isCheckoutDisabled,
+  labels,
+  total,
+}: {
+  cartEntries: StorefrontCartEntry[];
+  currency: string;
+  hasCart: boolean;
+  isCheckoutDisabled: boolean;
+  labels: StorefrontSurfaceLabels;
+  total: number;
+}) {
+  return (
+    <div className="grid gap-4">
+      {hasCart ? (
+        <CartLines cartEntries={cartEntries} currency={currency} />
+      ) : null}
+      <CartTotal currency={currency} labels={labels} total={total} />
+      {hasCart && !isCheckoutDisabled ? (
+        <p className="flex items-center gap-2 rounded-md border border-border border-dashed bg-muted/30 px-3 py-2 text-muted-foreground text-xs leading-5">
+          <Tag className="h-3.5 w-3.5 shrink-0" />
+          {labels.couponNote}
+        </p>
+      ) : null}
+      {!hasCart ? (
+        <p className="flex items-center gap-2 rounded-md border border-border bg-muted/40 px-3 py-2 text-muted-foreground text-sm">
+          <TriangleAlert className="h-4 w-4 shrink-0" />
+          {labels.emptyCart}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+export function CartActions({
+  canOpenCheckout,
+  checkoutHref,
+  isCheckoutDisabled,
+  isPreview,
+  isSubmitting,
+  labels,
+  onCheckoutOpen,
+  onInstantCheckout,
+  radius,
+}: {
+  canOpenCheckout: boolean;
+  checkoutHref?: string;
+  isCheckoutDisabled: boolean;
+  isPreview: boolean;
+  isSubmitting: boolean;
+  labels: StorefrontSurfaceLabels;
+  onCheckoutOpen?: () => void;
+  onInstantCheckout?: () => void;
+  radius: string;
+}) {
+  if (isPreview || isCheckoutDisabled) {
+    return (
+      <Button className={cn('w-full', radius)} disabled type="button">
+        {labels.checkoutDisabled}
+      </Button>
+    );
+  }
+
+  if (!canOpenCheckout) {
+    return (
+      <Button className={cn('w-full', radius)} disabled type="button">
+        {labels.checkout}
+        <ArrowRight className="size-4 shrink-0" />
+      </Button>
+    );
+  }
+
+  return (
+    <div className="grid gap-2">
+      {onInstantCheckout ? (
+        <AccentButton
+          disabled={isSubmitting}
+          onClick={onInstantCheckout}
+          radius={radius}
+        >
+          <Zap className="size-4 shrink-0" />
+          {isSubmitting ? labels.reserving : labels.instantCheckout}
+        </AccentButton>
+      ) : null}
+      {onCheckoutOpen ? (
+        <AccentButton
+          disabled={isSubmitting}
+          onClick={onCheckoutOpen}
+          radius={radius}
+        >
+          {labels.checkout}
+          <ArrowRight className="size-4 shrink-0" />
+        </AccentButton>
+      ) : (
+        <Button asChild className={cn('w-full', radius)} variant="outline">
+          <a href={checkoutHref}>
+            {labels.checkout}
+            <ArrowRight className="size-4 shrink-0" />
+          </a>
+        </Button>
+      )}
+    </div>
+  );
+}
+
+export function CheckoutSection({
+  children,
+  defaultOpen,
+  meta,
+  title,
+}: {
+  children: ReactNode;
+  defaultOpen?: boolean;
+  meta?: string;
+  title: string;
+}) {
+  return (
+    <Collapsible defaultOpen={defaultOpen}>
+      <div className="rounded-lg bg-muted/25 px-3 py-2">
+        <CollapsibleTrigger
+          className="group flex w-full items-center gap-3 text-left"
+          type="button"
+        >
+          <span className="min-w-0 flex-1 font-semibold text-sm">{title}</span>
+          {meta ? (
+            <span className="max-w-[9rem] overflow-hidden text-ellipsis whitespace-nowrap text-right font-semibold text-sm tabular-nums">
+              {meta}
+            </span>
+          ) : null}
+          <ChevronDownIcon className="size-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" />
+        </CollapsibleTrigger>
+        <CollapsibleContent className="pt-4">{children}</CollapsibleContent>
+      </div>
+    </Collapsible>
+  );
+}
+
+export function CheckoutContactFields({
+  buyerDefaults,
+  labels,
+}: {
+  buyerDefaults?: StorefrontBuyerDefaults;
+  labels: StorefrontSurfaceLabels;
+}) {
+  const buyerEmail = buyerDefaults?.email?.trim() || undefined;
+  const buyerName = buyerDefaults?.name?.trim() || undefined;
+  const inputClassName =
+    'h-11 rounded-md border border-input bg-background px-3 text-sm outline-none transition focus-visible:ring-2 focus-visible:ring-ring/40';
+  const labelClassName = 'grid gap-1.5 text-sm';
+
+  return (
+    <div className="grid gap-3">
+      <label className={labelClassName}>
+        <span className="font-medium text-xs">{labels.form.name}</span>
+        <input
+          autoComplete="name"
+          className={inputClassName}
+          defaultValue={buyerName}
+          name="customerName"
+          placeholder={labels.form.name}
+          required
+        />
+      </label>
+      <label className={labelClassName}>
+        <span className="font-medium text-xs">{labels.form.email}</span>
+        <input
+          autoComplete="email"
+          className={inputClassName}
+          defaultValue={buyerEmail}
+          name="customerEmail"
+          placeholder={labels.form.email}
+          required
+          type="email"
+        />
+      </label>
+      <label className={labelClassName}>
+        <span className="font-medium text-xs">{labels.form.phone}</span>
+        <input
+          autoComplete="tel"
+          className={inputClassName}
+          name="customerPhone"
+          placeholder={labels.form.phone}
+          type="tel"
+        />
+      </label>
+      <textarea
+        className="min-h-24 rounded-md border border-input bg-background px-3 py-2.5 text-sm outline-none transition focus-visible:ring-2 focus-visible:ring-ring/40"
+        name="note"
+        placeholder={labels.form.note}
+      />
+    </div>
+  );
+}
+
+function CartLines({
+  cartEntries,
+  currency,
+}: {
+  cartEntries: StorefrontCartEntry[];
+  currency: string;
+}) {
+  return (
+    <div className="-mr-1 grid max-h-72 gap-3 overflow-y-auto pr-1">
+      {cartEntries.map(({ line, listing, variant }) => {
+        const unitPrice = getStorefrontLinePrice(listing, variant);
+        const variantLabel = variant
+          ? getStorefrontVariantLabel(variant)
+          : null;
+        const lineTotal = formatStorefrontPrice(
+          unitPrice * line.quantity,
+          currency
+        );
+
+        return (
+          <div
+            className="grid grid-cols-[minmax(0,1fr)_auto] gap-x-3 gap-y-1 text-sm"
+            key={storefrontCartLineKey(line.listingId, line.variantId)}
+          >
+            <div className="min-w-0">
+              <p className="line-clamp-2 break-words font-medium leading-5">
+                {listing.title}
+              </p>
+              {variantLabel ? (
+                <p className="line-clamp-1 break-words text-muted-foreground text-xs">
+                  {variantLabel}
+                </p>
+              ) : null}
+              <p className="text-muted-foreground text-xs tabular-nums">
+                {line.quantity} × {formatStorefrontPrice(unitPrice, currency)}
+              </p>
+            </div>
+            <span
+              className="max-w-[9rem] justify-self-end overflow-hidden text-ellipsis whitespace-nowrap text-right font-medium tabular-nums leading-5 sm:max-w-[11rem]"
+              title={lineTotal}
+            >
+              {lineTotal}
+            </span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function CartTotal({
+  currency,
+  labels,
+  total,
+}: {
+  currency: string;
+  labels: StorefrontSurfaceLabels;
+  total: number;
+}) {
+  return (
+    <div className="flex items-center justify-between gap-3 border-border border-t pt-4">
+      <span className="text-muted-foreground text-sm">{labels.total}</span>
+      <span className="min-w-0 overflow-hidden text-ellipsis whitespace-nowrap text-right font-semibold tabular-nums">
+        {formatStorefrontPrice(total, currency)}
+      </span>
+    </div>
+  );
+}