@tuturuuu/ui 0.0.4 → 0.1.0

package/src/components/ui/finance/wallets/wallets-page.test.tsx

@@ -0,0 +1,107 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const mocks = vi.hoisted(() => ({
+  getPermissions: vi.fn(),
+  getTranslations: vi.fn(),
+  getWorkspace: vi.fn(),
+  getWorkspaceConfig: vi.fn(),
+  headers: vi.fn(),
+  listWallets: vi.fn(),
+  notFound: vi.fn(() => {
+    throw new Error('notFound');
+  }),
+  withForwardedInternalApiAuth: vi.fn(() => ({ headers: {} })),
+}));
+
+vi.mock('@tuturuuu/internal-api', () => ({
+  listWallets: (...args: Parameters<typeof mocks.listWallets>) =>
+    mocks.listWallets(...args),
+  withForwardedInternalApiAuth: (
+    ...args: Parameters<typeof mocks.withForwardedInternalApiAuth>
+  ) => mocks.withForwardedInternalApiAuth(...args),
+}));
+
+vi.mock('@tuturuuu/utils/workspace-helper', () => ({
+  getPermissions: (...args: Parameters<typeof mocks.getPermissions>) =>
+    mocks.getPermissions(...args),
+  getWorkspace: (...args: Parameters<typeof mocks.getWorkspace>) =>
+    mocks.getWorkspace(...args),
+  getWorkspaceConfig: (...args: Parameters<typeof mocks.getWorkspaceConfig>) =>
+    mocks.getWorkspaceConfig(...args),
+}));
+
+vi.mock('next/headers', () => ({
+  headers: (...args: Parameters<typeof mocks.headers>) =>
+    mocks.headers(...args),
+}));
+
+vi.mock('next/navigation', () => ({
+  notFound: (...args: Parameters<typeof mocks.notFound>) =>
+    mocks.notFound(...args),
+}));
+
+vi.mock('next-intl/server', () => ({
+  getTranslations: (...args: Parameters<typeof mocks.getTranslations>) =>
+    mocks.getTranslations(...args),
+}));
+
+vi.mock('@tuturuuu/ui/custom/feature-summary', () => ({
+  default: () => null,
+}));
+
+vi.mock('@tuturuuu/ui/finance/shared/create-dialog-feature-summary', () => ({
+  CreateDialogFeatureSummary: () => null,
+}));
+
+vi.mock('@tuturuuu/ui/finance/wallets/form', () => ({
+  WalletForm: () => null,
+}));
+
+vi.mock('@tuturuuu/ui/finance/wallets/wallets-data-table', () => ({
+  WalletsDataTable: () => null,
+}));
+
+vi.mock('@tuturuuu/ui/separator', () => ({
+  Separator: () => null,
+}));
+
+describe('wallets page', () => {
+  beforeEach(() => {
+    vi.resetModules();
+    vi.clearAllMocks();
+    mocks.getTranslations.mockResolvedValue((key: string) => key);
+    mocks.getPermissions.mockResolvedValue({
+      containsPermission: vi.fn((permission: string) =>
+        ['create_wallets', 'update_wallets', 'delete_wallets'].includes(
+          permission
+        )
+      ),
+    });
+    mocks.getWorkspaceConfig.mockResolvedValue('USD');
+    mocks.getWorkspace.mockResolvedValue({ personal: false });
+    mocks.headers.mockResolvedValue(new Headers());
+    mocks.listWallets.mockResolvedValue([
+      { id: 'wallet-1', name: 'Primary Wallet' },
+    ]);
+  });
+
+  it('loads wallets through the internal API helper', async () => {
+    const { default: WalletsPageModule } = await import('./wallets-page.js');
+    const WalletsPage = WalletsPageModule as unknown as (props: {
+      wsId: string;
+      searchParams: { q: string; page: string; pageSize: string };
+      page?: string;
+      pageSize?: string;
+    }) => Promise<unknown>;
+
+    await WalletsPage({
+      wsId: 'ws-1',
+      searchParams: { q: '', page: '1', pageSize: '10' },
+      page: '1',
+      pageSize: '10',
+    });
+
+    expect(mocks.withForwardedInternalApiAuth).toHaveBeenCalled();
+    expect(mocks.listWallets).toHaveBeenCalledWith('ws-1', { headers: {} });
+  });
+});

package/src/components/ui/finance/wallets/wallets-page.tsx

@@ -0,0 +1,136 @@
+import {
+  type InternalApiClientOptions,
+  listWallets,
+  withForwardedInternalApiAuth,
+} from '@tuturuuu/internal-api';
+import type { Wallet } from '@tuturuuu/types/primitives/Wallet';
+import { CreateDialogFeatureSummary } from '@tuturuuu/ui/finance/shared/create-dialog-feature-summary';
+import { WalletForm } from '@tuturuuu/ui/finance/wallets/form';
+import { WalletsDataTable } from '@tuturuuu/ui/finance/wallets/wallets-data-table';
+import { Separator } from '@tuturuuu/ui/separator';
+import {
+  getPermissions,
+  getWorkspace,
+  getWorkspaceConfig,
+  type PermissionsResult,
+} from '@tuturuuu/utils/workspace-helper';
+import { headers } from 'next/headers';
+import { notFound } from 'next/navigation';
+import { getTranslations } from 'next-intl/server';
+
+interface Props {
+  wsId: string;
+  searchParams: {
+    create?: string;
+    q: string;
+    page: string;
+    pageSize: string;
+  };
+  page?: string;
+  pageSize?: string;
+  currency?: string;
+  financePrefix?: string;
+  internalApiOptions?: InternalApiClientOptions;
+  openCreateDialog?: boolean;
+  permissions?: PermissionsResult;
+  workspace?: {
+    personal?: boolean | null;
+  };
+}
+
+export default async function WalletsPage({
+  wsId,
+  searchParams,
+  page,
+  pageSize,
+  currency,
+  financePrefix = '/finance',
+  internalApiOptions,
+  openCreateDialog = false,
+  permissions,
+  workspace,
+}: Props) {
+  const [t, resolvedPermissions, resolvedCurrency, resolvedWorkspace] =
+    await Promise.all([
+      getTranslations(),
+      permissions ? Promise.resolve(permissions) : getPermissions({ wsId }),
+      currency
+        ? Promise.resolve(currency)
+        : getWorkspaceConfig(wsId, 'DEFAULT_CURRENCY'),
+      workspace ? Promise.resolve(workspace) : getWorkspace(wsId),
+    ]);
+  if (!resolvedPermissions || !resolvedWorkspace) notFound();
+  const { containsPermission } = resolvedPermissions;
+
+  const canCreateWallets = containsPermission('create_wallets');
+  const canUpdateWallets = containsPermission('update_wallets');
+  const canDeleteWallets = containsPermission('delete_wallets');
+  const resolvedInternalApiOptions =
+    internalApiOptions ?? withForwardedInternalApiAuth(await headers());
+  const { data: rawData, count } = await getData(
+    wsId,
+    searchParams,
+    resolvedInternalApiOptions
+  );
+
+  const data = rawData.map((d) => ({
+    ...d,
+    href: `/${wsId}${financePrefix}/wallets/${d.id}`,
+    ws_id: wsId,
+  }));
+
+  return (
+    <>
+      <CreateDialogFeatureSummary
+        pluralTitle={t('ws-wallets.plural')}
+        singularTitle={t('ws-wallets.singular')}
+        description={t('ws-wallets.description')}
+        createTitle={t('ws-wallets.create')}
+        createDescription={t('ws-wallets.create_description')}
+        defaultOpen={openCreateDialog || searchParams.create === 'wallet'}
+        form={canCreateWallets ? <WalletForm wsId={wsId} /> : undefined}
+      />
+      <Separator className="my-4" />
+      <WalletsDataTable
+        wsId={wsId}
+        data={data}
+        count={count}
+        canUpdateWallets={canUpdateWallets}
+        canDeleteWallets={canDeleteWallets}
+        currency={resolvedCurrency ?? 'USD'}
+        isPersonalWorkspace={!!resolvedWorkspace?.personal}
+        page={page}
+        pageSize={pageSize}
+      />
+    </>
+  );
+}
+
+async function getData(
+  wsId: string,
+  {
+    q,
+    page = '1',
+    pageSize = '10',
+  }: { q?: string; page?: string; pageSize?: string },
+  internalApiOptions: Parameters<typeof listWallets>[1]
+) {
+  const wallets = await listWallets(wsId, internalApiOptions);
+  const normalizedQuery = q?.trim().toLowerCase();
+  const filteredWallets = wallets
+    .filter((wallet) =>
+      normalizedQuery
+        ? wallet.name?.toLowerCase().includes(normalizedQuery)
+        : true
+    )
+    .sort((a, b) => (a.name || '').localeCompare(b.name || ''));
+
+  const parsedPage = parseInt(page, 10);
+  const parsedPageSize = parseInt(pageSize, 10);
+  const start = (parsedPage - 1) * parsedPageSize;
+
+  return {
+    data: filteredWallets.slice(start, start + parsedPageSize) as Wallet[],
+    count: filteredWallets.length,
+  };
+}

package/src/components/ui/form-required-indicator.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { cn } from '@tuturuuu/utils/format';
+import * as React from 'react';
+
+interface FormRequiredIndicatorProps
+  extends React.HTMLAttributes<HTMLSpanElement> {
+  show?: boolean;
+}
+
+const FormRequiredIndicator = React.forwardRef<
+  HTMLSpanElement,
+  FormRequiredIndicatorProps
+>(({ className, show = true, ...props }, ref) => {
+  if (!show) return null;
+
+  return (
+    <span
+      ref={ref}
+      className={cn('ml-1 text-destructive', className)}
+      aria-hidden="true"
+      {...props}
+    >
+      *
+    </span>
+  );
+});
+
+FormRequiredIndicator.displayName = 'FormRequiredIndicator';
+
+export { FormRequiredIndicator };

package/src/components/ui/form.tsx

@@ -1,19 +1,20 @@
 'use client';
 
-import { Label } from './label';
-import * as LabelPrimitive from '@radix-ui/react-label';
+import type * as LabelPrimitive from '@radix-ui/react-label';
 import { Slot } from '@radix-ui/react-slot';
 import { cn } from '@tuturuuu/utils/format';
 import * as React from 'react';
 import {
   Controller,
-  ControllerProps,
-  FieldPath,
-  FieldValues,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
   FormProvider,
   useFormContext,
   useFormState,
 } from 'react-hook-form';
+import { FormRequiredIndicator } from './form-required-indicator';
+import { Label } from './label';
 
 const Form = FormProvider;
 
@@ -22,6 +23,7 @@ type FormFieldContextValue<
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > = {
   name: TName;
+  required?: boolean;
 };
 
 const FormFieldContext = React.createContext<FormFieldContextValue>(
@@ -34,8 +36,14 @@ const FormField = <
 >({
   ...props
 }: ControllerProps<TFieldValues, TName>) => {
+  // We'll rely on explicit rules for now, as accessing internal properties
+  // of the resolver is not type-safe and could break in future updates
+  const isRequired = props.rules?.required !== undefined;
+
   return (
-    <FormFieldContext.Provider value={{ name: props.name }}>
+    <FormFieldContext.Provider
+      value={{ name: props.name, required: isRequired }}
+    >
       <Controller {...props} />
     </FormFieldContext.Provider>
   );
@@ -57,6 +65,7 @@ const useFormField = () => {
   return {
     id,
     name: fieldContext.name,
+    required: fieldContext.required,
     formItemId: `${id}-form-item`,
     formDescriptionId: `${id}-form-item-description`,
     formMessageId: `${id}-form-item-message`,
@@ -88,28 +97,39 @@ function FormItem({ className, ...props }: React.ComponentProps<'div'>) {
 
 function FormLabel({
   className,
+  required: requiredProp,
+  children,
   ...props
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
-  const { error, formItemId } = useFormField();
+}: React.ComponentProps<typeof LabelPrimitive.Root> & { required?: boolean }) {
+  const { error, formItemId, required: fieldRequired } = useFormField();
+  const isRequired = requiredProp !== undefined ? requiredProp : fieldRequired;
 
   return (
     <Label
       data-slot="form-label"
       data-error={!!error}
+      data-required={isRequired}
       className={cn('data-[error=true]:text-destructive', className)}
       htmlFor={formItemId}
       {...props}
-    />
+    >
+      {children}
+      {isRequired && <FormRequiredIndicator />}
+    </Label>
   );
 }
 
-function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
-  const { error, formItemId, formDescriptionId, formMessageId } =
+function FormControl({
+  className,
+  ...props
+}: React.ComponentProps<typeof Slot>) {
+  const { error, formItemId, formDescriptionId, formMessageId, required } =
     useFormField();
 
   return (
     <Slot
       data-slot="form-control"
+      data-required={required}
       id={formItemId}
       aria-describedby={
         !error
@@ -117,6 +137,8 @@ function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
           : `${formDescriptionId} ${formMessageId}`
       }
       aria-invalid={!!error}
+      aria-required={required}
+      className={cn(className)}
       {...props}
     />
   );
@@ -129,7 +151,7 @@ function FormDescription({ className, ...props }: React.ComponentProps<'p'>) {
     <p
       data-slot="form-description"
       id={formDescriptionId}
-      className={cn('text-sm text-muted-foreground', className)}
+      className={cn('text-muted-foreground text-sm', className)}
       {...props}
     />
   );
@@ -147,7 +169,7 @@ function FormMessage({ className, ...props }: React.ComponentProps<'p'>) {
     <p
       data-slot="form-message"
       id={formMessageId}
-      className={cn('text-sm font-medium text-destructive', className)}
+      className={cn('font-medium text-destructive text-sm', className)}
       {...props}
     >
       {body}
@@ -163,5 +185,6 @@ export {
   FormItem,
   FormLabel,
   FormMessage,
+  FormRequiredIndicator,
   useFormField,
 };

package/src/components/ui/hover-card.tsx

@@ -2,7 +2,7 @@
 
 import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
 import { cn } from '@tuturuuu/utils/format';
-import * as React from 'react';
+import type * as React from 'react';
 
 function HoverCard({
   ...props
@@ -30,7 +30,7 @@ function HoverCardContent({
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+        'data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[state=closed]:animate-out data-[state=open]:animate-in',
         className
       )}
       {...props}

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

@@ -1,8 +1,8 @@
 'use client';
 
+import { MinusIcon } from '@tuturuuu/icons';
 import { cn } from '@tuturuuu/utils/format';
 import { OTPInput, OTPInputContext, type SlotProps } from 'input-otp';
-import { MinusIcon } from 'lucide-react';
 import * as React from 'react';
 
 function InputOTP({
@@ -52,7 +52,7 @@ function InputOTPSlot({
       data-slot="input-otp-slot"
       data-active={isActive}
       className={cn(
-        'relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-xs ring-ring/10 outline-ring/50 transition-all first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-4 data-[active=true]:outline-1 dark:ring-ring/20 dark:outline-ring/40',
+        'relative flex h-9 w-9 items-center justify-center border-input border-y border-r text-sm shadow-xs outline-ring/50 ring-ring/10 transition-all first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:outline-1 data-[active=true]:ring-4 dark:outline-ring/40 dark:ring-ring/20',
         className
       )}
       {...props}
@@ -60,7 +60,7 @@ function InputOTPSlot({
       {char}
       {hasFakeCaret && (
         <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="animate-caret-blink h-4 w-px bg-foreground duration-1000" />
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
         </div>
       )}
     </div>
@@ -69,7 +69,7 @@ function InputOTPSlot({
 
 function InputOTPSeparator({ ...props }: React.ComponentProps<'div'>) {
   return (
-    <div data-slot="input-otp-separator" role="separator" {...props}>
+    <div data-slot="input-otp-separator" role="presentation" {...props}>
       <MinusIcon />
     </div>
   );

package/src/components/ui/input.tsx

@@ -1,5 +1,5 @@
 import { cn } from '@tuturuuu/utils/format';
-import * as React from 'react';
+import type * as React from 'react';
 
 function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
   return (
@@ -7,7 +7,7 @@ function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
       type={type}
       data-slot="input"
       className={cn(
-        'flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs ring-ring/10 outline-ring/50 transition-[color,box-shadow] selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:ring-4 focus-visible:outline-1 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive/60 aria-invalid:ring-destructive/20 aria-invalid:outline-destructive/60 aria-invalid:focus-visible:ring-[3px] aria-invalid:focus-visible:outline-none md:text-sm dark:ring-ring/20 dark:outline-ring/40 dark:aria-invalid:border-destructive dark:aria-invalid:ring-destructive/40 dark:aria-invalid:ring-destructive/50 dark:aria-invalid:outline-destructive dark:aria-invalid:focus-visible:ring-4',
+        'flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs outline-ring/50 ring-ring/10 transition-[color,box-shadow] selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:font-medium file:text-foreground file:text-sm placeholder:text-muted-foreground focus-visible:outline-1 focus-visible:ring-4 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive/60 aria-invalid:outline-destructive/60 aria-invalid:ring-destructive/20 aria-invalid:focus-visible:outline-none aria-invalid:focus-visible:ring-[3px] md:text-sm dark:outline-ring/40 dark:ring-ring/20 dark:aria-invalid:border-destructive dark:aria-invalid:outline-destructive dark:aria-invalid:ring-destructive/50 dark:aria-invalid:focus-visible:ring-4',
         className
       )}
       {...props}

package/src/components/ui/kbd.tsx

@@ -0,0 +1,28 @@
+import { cn } from '@tuturuuu/utils/format';
+
+function Kbd({ className, ...props }: React.ComponentProps<'kbd'>) {
+  return (
+    <kbd
+      data-slot="kbd"
+      className={cn(
+        'pointer-events-none inline-flex h-5 w-fit min-w-5 select-none items-center justify-center gap-1 rounded-sm bg-muted px-1 font-medium font-sans text-muted-foreground text-xs',
+        "[&_svg:not([class*='size-'])]:size-3",
+        '[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function KbdGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <kbd
+      data-slot="kbd-group"
+      className={cn('inline-flex items-center gap-1', className)}
+      {...props}
+    />
+  );
+}
+
+export { Kbd, KbdGroup };

package/src/components/ui/label.tsx

@@ -2,7 +2,7 @@
 
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { cn } from '@tuturuuu/utils/format';
-import * as React from 'react';
+import type * as React from 'react';
 
 function Label({
   className,
@@ -12,7 +12,7 @@ function Label({
     <LabelPrimitive.Root
       data-slot="label"
       className={cn(
-        'text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        'select-none font-medium text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50',
         className
       )}
       {...props}