@tuturuuu/ui 0.7.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/money-input.test.tsx

@@ -0,0 +1,64 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { MoneyInput } from './money-input';
+
+describe('MoneyInput', () => {
+  it('renders a minor-unit USD value as major units', () => {
+    render(
+      <MoneyInput
+        aria-label="Price"
+        currency="USD"
+        hideHelpers
+        onChange={vi.fn()}
+        value={10000}
+      />
+    );
+
+    const input = screen.getByLabelText('Price') as HTMLInputElement;
+    expect(input).toHaveValue('100');
+  });
+
+  it('emits minor units (cents) for a USD entry', () => {
+    const onChange = vi.fn();
+    render(
+      <MoneyInput
+        aria-label="Price"
+        currency="USD"
+        hideHelpers
+        onChange={onChange}
+        value={undefined}
+      />
+    );
+
+    const input = screen.getByLabelText('Price') as HTMLInputElement;
+    fireEvent.focus(input);
+    fireEvent.change(input, {
+      target: { selectionStart: 4, value: '9.99' },
+    });
+
+    expect(onChange).toHaveBeenLastCalledWith(999);
+  });
+
+  it('treats zero-decimal currencies 1:1', () => {
+    const onChange = vi.fn();
+    render(
+      <MoneyInput
+        aria-label="Price"
+        currency="VND"
+        hideHelpers
+        onChange={onChange}
+        value={25000}
+      />
+    );
+
+    const input = screen.getByLabelText('Price') as HTMLInputElement;
+    // 25000 minor units == 25000 major units for VND (0 fraction digits).
+    expect(input.value.replace(/[^\d]/g, '')).toBe('25000');
+
+    fireEvent.focus(input);
+    fireEvent.change(input, {
+      target: { selectionStart: 3, value: '500' },
+    });
+    expect(onChange).toHaveBeenLastCalledWith(500);
+  });
+});

package/src/components/ui/money-input.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import { getCurrencyLocale } from '@tuturuuu/utils/format';
+import {
+  getCurrencyFractionDigits,
+  majorToMinor,
+  minorToMajor,
+} from '@tuturuuu/utils/money';
+import { useMemo } from 'react';
+import { CurrencyInput, type CurrencyInputProps } from './currency-input';
+
+export interface MoneyInputProps
+  extends Omit<
+    CurrencyInputProps,
+    'value' | 'onChange' | 'locale' | 'maximumFractionDigits' | 'currencySuffix'
+  > {
+  /** ISO currency code (e.g. 'USD', 'VND'). Drives precision + locale. */
+  currency: string;
+  /** Amount in integer minor units (cents for USD, whole units for JPY/VND). */
+  value: number | undefined;
+  /** Emits the amount in integer minor units. */
+  onChange: (minorValue: number) => void;
+  /** Show the currency code as a muted suffix (defaults to true). */
+  showCurrencySuffix?: boolean;
+}
+
+/**
+ * Currency-aware money input. The `value`/`onChange` boundary is always in
+ * integer **minor units** (the canonical storage format); the field renders and
+ * edits in localized major units with the correct precision for the currency.
+ *
+ * Wraps the shared {@link CurrencyInput} so all money entry across the platform
+ * shares one polished input (cursor preservation, quick-action helpers) while
+ * keeping the minor-unit conversion centralized in one place.
+ */
+export function MoneyInput({
+  currency,
+  value,
+  onChange,
+  showCurrencySuffix = true,
+  ...props
+}: MoneyInputProps) {
+  const fractionDigits = useMemo(
+    () => getCurrencyFractionDigits(currency),
+    [currency]
+  );
+  const locale = useMemo(() => getCurrencyLocale(currency), [currency]);
+  const majorValue = useMemo(
+    () => (value === undefined ? undefined : minorToMajor(value, currency)),
+    [currency, value]
+  );
+
+  return (
+    <CurrencyInput
+      {...props}
+      value={majorValue}
+      onChange={(major) => onChange(majorToMinor(major, currency))}
+      locale={locale}
+      maximumFractionDigits={fractionDigits}
+      currencySuffix={showCurrencySuffix ? currency.toUpperCase() : undefined}
+    />
+  );
+}

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>
+  );
+}