@baseplate-dev/react-generators 0.1.3 → 0.2.1

package/dist/generators/core/react-components/templates/src/components/date-picker-field/date-picker-field.tsx

@@ -0,0 +1,158 @@
+// @ts-nocheck
+
+'use client';
+
+import type { Control, FieldPath, FieldValues } from 'react-hook-form';
+
+import { format, parseISO } from 'date-fns';
+import { useId, useState } from 'react';
+import { MdCalendarMonth } from 'react-icons/md';
+
+import type { FormFieldProps } from '../../types/form.js';
+
+import { useControllerMerged } from '../../hooks/use-controller-merged.js';
+import { cn } from '../../utils/cn.js';
+import { Button } from '../button/button.js';
+import { Calendar } from '../calendar/calendar.js';
+import {
+  FormControl,
+  FormDescription,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '../form-item/form-item.js';
+import { Popover, PopoverContent, PopoverTrigger } from '../popover/popover.js';
+
+export interface DatePickerFieldProps extends FormFieldProps {
+  className?: string;
+  wrapperClassName?: string;
+  disabled?: boolean;
+  placeholder?: string;
+  onChange?: (value: string | undefined) => void;
+  value?: string | undefined;
+  dateFormat?: string;
+  calendarProps?: Omit<
+    React.ComponentProps<typeof Calendar>,
+    'mode' | 'selected' | 'onSelect'
+  >;
+  ref?: React.Ref<HTMLButtonElement>;
+}
+
+/**
+ * Field with label and error states that wraps a Calendar component for single date selection.
+ */
+function DatePickerField({
+  className,
+  wrapperClassName,
+  disabled,
+  placeholder = 'Pick a date',
+  onChange,
+  value,
+  label,
+  error,
+  description,
+  dateFormat = 'PPP',
+  calendarProps,
+  ref,
+}: DatePickerFieldProps): React.ReactElement {
+  const addWrapper = label ?? error ?? description;
+  const id = useId();
+  const [open, setOpen] = useState(false);
+
+  // Parse string value to Date for Calendar component
+  const dateValue = value ? parseISO(value) : undefined;
+
+  const handleSelect = (date: Date | undefined): void => {
+    if (date) {
+      // Format date as YYYY-MM-DD string
+      const dateString = format(date, 'yyyy-MM-dd');
+      onChange?.(dateString);
+      setOpen(false);
+    } else {
+      onChange?.(undefined);
+    }
+  };
+
+  const inputComponent = (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          data-empty={!dateValue}
+          disabled={disabled}
+          id={id}
+          ref={ref}
+          className={cn(
+            'data-[empty=true]:text-muted-foreground w-[280px] justify-start text-left font-normal',
+            className,
+          )}
+        >
+          <MdCalendarMonth />
+          {dateValue ? (
+            format(dateValue, dateFormat)
+          ) : (
+            <span>{placeholder}</span>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0">
+        <Calendar
+          mode="single"
+          selected={dateValue}
+          onSelect={handleSelect}
+          captionLayout="dropdown"
+          {...calendarProps}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+
+  if (addWrapper) {
+    return (
+      <FormItem error={error} className={cn('flex gap-2', wrapperClassName)}>
+        <FormLabel>{label}</FormLabel>
+        <FormControl>{inputComponent}</FormControl>
+        <FormDescription>{description}</FormDescription>
+        <FormMessage />
+      </FormItem>
+    );
+  }
+  return inputComponent;
+}
+
+export interface DatePickerFieldControllerProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> extends Omit<DatePickerFieldProps, 'value'> {
+  control: Control<TFieldValues>;
+  name: TFieldName;
+}
+
+function DatePickerFieldController<
+  TFieldValues extends FieldValues = FieldValues,
+  TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  control,
+  name,
+  ref,
+  ...rest
+}: DatePickerFieldControllerProps<
+  TFieldValues,
+  TFieldName
+>): React.ReactElement {
+  const {
+    field: fieldProps,
+    fieldState: { error },
+  } = useControllerMerged(
+    {
+      control,
+      name,
+    },
+    rest,
+    ref,
+  );
+
+  return <DatePickerField error={error?.message} {...rest} {...fieldProps} />;
+}
+
+export { DatePickerField, DatePickerFieldController };

package/dist/generators/core/react-components/templates/src/components/date-time-picker-field/date-time-picker-field.tsx

@@ -0,0 +1,233 @@
+// @ts-nocheck
+
+'use client';
+
+import type { Control, FieldPath, FieldValues } from 'react-hook-form';
+
+import { format, parseISO, set } from 'date-fns';
+import { useId, useState } from 'react';
+import { MdSchedule } from 'react-icons/md';
+
+import type { FormFieldProps } from '../../types/form.js';
+
+import { useControllerMerged } from '../../hooks/use-controller-merged.js';
+import { cn } from '../../utils/cn.js';
+import { Button } from '../button/button.js';
+import { Calendar } from '../calendar/calendar.js';
+import {
+  FormControl,
+  FormDescription,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '../form-item/form-item.js';
+import { Input } from '../input/input.js';
+import { Popover, PopoverContent, PopoverTrigger } from '../popover/popover.js';
+
+export interface DateTimePickerFieldProps extends FormFieldProps {
+  className?: string;
+  wrapperClassName?: string;
+  disabled?: boolean;
+  placeholder?: string;
+  onChange?: (value: string | undefined) => void;
+  value?: string | undefined;
+  dateTimeFormat?: string;
+  showSeconds?: boolean;
+  calendarProps?: Omit<
+    React.ComponentProps<typeof Calendar>,
+    'mode' | 'selected' | 'onSelect'
+  >;
+  ref?: React.Ref<HTMLButtonElement>;
+}
+
+/**
+ * Field with label and error states that wraps a Calendar and time input for date-time selection.
+ */
+function DateTimePickerField({
+  className,
+  wrapperClassName,
+  disabled,
+  placeholder = 'Pick date and time',
+  onChange,
+  value,
+  label,
+  error,
+  description,
+  dateTimeFormat = 'PPP pp',
+  showSeconds = false,
+  calendarProps,
+  ref,
+}: DateTimePickerFieldProps): React.ReactElement {
+  const addWrapper = label ?? error ?? description;
+  const id = useId();
+  const [open, setOpen] = useState(false);
+
+  // Parse string value to Date for internal operations
+  const dateTimeValue = value ? parseISO(value) : undefined;
+
+  const handleDateSelect = (date: Date | undefined): void => {
+    if (!date) {
+      onChange?.(undefined);
+      return;
+    }
+
+    let newDate: Date;
+    if (dateTimeValue) {
+      // Preserve existing time when changing date
+      newDate = set(date, {
+        hours: dateTimeValue.getHours(),
+        minutes: dateTimeValue.getMinutes(),
+        seconds: showSeconds ? dateTimeValue.getSeconds() : 0,
+      });
+    } else {
+      // Set default time to current time or noon if no current time
+      const now = new Date();
+      newDate = set(date, {
+        hours: now.getHours(),
+        minutes: now.getMinutes(),
+        seconds: showSeconds ? now.getSeconds() : 0,
+      });
+    }
+    // Convert to ISO string
+    onChange?.(newDate.toISOString());
+  };
+
+  const handleTimeChange = (timeString: string): void => {
+    if (!dateTimeValue) {
+      // If no date selected, use today's date
+      const today = new Date();
+      const [hours, minutes, seconds = 0] = timeString
+        .split(':')
+        .map((n) => (n ? Number(n) : 0));
+      const newDate = set(today, {
+        hours,
+        minutes,
+        seconds: showSeconds ? seconds : 0,
+      });
+      onChange?.(newDate.toISOString());
+      return;
+    }
+
+    const [hours, minutes, seconds = 0] = timeString
+      .split(':')
+      .map((n) => (n ? Number(n) : 0));
+    const newDate = set(dateTimeValue, {
+      hours,
+      minutes,
+      seconds: showSeconds ? seconds : 0,
+    });
+    onChange?.(newDate.toISOString());
+  };
+
+  const formatTimeValue = (date: Date | undefined): string => {
+    if (!date) return '';
+
+    const hours = date.getHours().toString().padStart(2, '0');
+    const minutes = date.getMinutes().toString().padStart(2, '0');
+    const seconds = date.getSeconds().toString().padStart(2, '0');
+
+    if (showSeconds) {
+      return `${hours}:${minutes}:${seconds}`;
+    }
+    return `${hours}:${minutes}`;
+  };
+
+  const inputComponent = (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          data-empty={!dateTimeValue}
+          disabled={disabled}
+          id={id}
+          ref={ref}
+          className={cn(
+            'data-[empty=true]:text-muted-foreground w-[280px] justify-start text-left font-normal',
+            className,
+          )}
+        >
+          <MdSchedule />
+          {dateTimeValue ? (
+            format(dateTimeValue, dateTimeFormat)
+          ) : (
+            <span>{placeholder}</span>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-auto p-0" align="start">
+        <div className="space-y-3 p-3">
+          <Calendar
+            mode="single"
+            selected={dateTimeValue}
+            onSelect={handleDateSelect}
+            captionLayout="dropdown"
+            {...calendarProps}
+          />
+          <div className="space-y-2">
+            <div className="text-sm font-medium">Time</div>
+            <Input
+              type="time"
+              step={showSeconds ? 1 : 60}
+              value={formatTimeValue(dateTimeValue)}
+              onChange={(e) => {
+                handleTimeChange(e.target.value);
+              }}
+              className="w-full"
+            />
+          </div>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+
+  if (addWrapper) {
+    return (
+      <FormItem error={error} className={cn('flex gap-2', wrapperClassName)}>
+        <FormLabel>{label}</FormLabel>
+        <FormControl>{inputComponent}</FormControl>
+        <FormDescription>{description}</FormDescription>
+        <FormMessage />
+      </FormItem>
+    );
+  }
+  return inputComponent;
+}
+
+export interface DateTimePickerFieldControllerProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> extends Omit<DateTimePickerFieldProps, 'value'> {
+  control: Control<TFieldValues>;
+  name: TFieldName;
+}
+
+function DateTimePickerFieldController<
+  TFieldValues extends FieldValues = FieldValues,
+  TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  control,
+  name,
+  ref,
+  ...rest
+}: DateTimePickerFieldControllerProps<
+  TFieldValues,
+  TFieldName
+>): React.ReactElement {
+  const {
+    field: fieldProps,
+    fieldState: { error },
+  } = useControllerMerged(
+    {
+      control,
+      name,
+    },
+    rest,
+    ref,
+  );
+
+  return (
+    <DateTimePickerField error={error?.message} {...rest} {...fieldProps} />
+  );
+}
+
+export { DateTimePickerField, DateTimePickerFieldController };

package/dist/generators/core/react-components/templates/src/components/dialog/dialog.tsx

@@ -0,0 +1,164 @@
+// @ts-nocheck
+
+'use client';
+
+import type * as React from 'react';
+
+import { Dialog as DialogPrimitive } from 'radix-ui';
+import { MdClose } from 'react-icons/md';
+
+import { cn } from '../../utils/cn.js';
+
+/**
+ * A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.
+ *
+ * ShadCN changes:
+ * - Added custom width property to specify the width of the dialog.
+ * - Added max-h-[90vh] overflow-y-auto to ensure the dialog is scrollable.
+ *
+ * https://ui.shadcn.com/docs/components/dialog
+ */
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>): React.ReactElement {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>): React.ReactElement {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>): React.ReactElement {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>): React.ReactElement {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>): React.ReactElement {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+export type DialogWidth = 'sm' | 'md' | 'lg' | 'xl' | 'none';
+
+function DialogContent({
+  className,
+  children,
+  width = 'md',
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  width?: DialogWidth;
+}): React.ReactElement {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          'bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200',
+          'max-h-[90vh] overflow-y-auto', // ensure the dialog is scrollable
+          width === 'sm' && 'sm:max-w-md',
+          width === 'md' && 'sm:max-w-lg',
+          width === 'lg' && 'sm:max-w-4xl',
+          width === 'xl' && 'sm:max-w-7xl',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+          <MdClose />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+}
+
+function DialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): React.ReactElement {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}
+      {...props}
+    />
+  );
+}
+
+function DialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): React.ReactElement {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>): React.ReactElement {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn('text-lg leading-none font-semibold', className)}
+      {...props}
+    />
+  );
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<
+  typeof DialogPrimitive.Description
+>): React.ReactElement {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};

package/dist/generators/core/react-components/templates/src/components/empty-display/empty-display.tsx

@@ -0,0 +1,62 @@
+// @ts-nocheck
+
+'use client';
+
+import type React from 'react';
+
+import { MdFormatListBulleted } from 'react-icons/md';
+
+import type { IconElement } from '../../types/icon.js';
+
+import { cn } from '../../utils/cn.js';
+
+interface EmptyDisplayProps {
+  /**
+   * Optional class name to be applied to the empty state div
+   */
+  className?: string;
+  /**
+   * Optional icon to be displayed (if not passed, a generic empty state icon will be displayed)
+   */
+  icon?: IconElement;
+  /**
+   * Header to be displayed (if not passed, a generic empty header will be displayed)
+   */
+  header?: React.ReactNode;
+  /**
+   * Subtitle to be displayed (if a string is passed, it will be displayed as-is, otherwise a generic empty message will be displayed)
+   */
+  subtitle?: React.ReactNode;
+  /**
+   * Optional actions to be displayed below the empty message
+   */
+  actions?: React.ReactNode;
+}
+
+/**
+ * Displays a generic empty state with a header and subtitle.
+ */
+function EmptyDisplay({
+  className,
+  icon: Icon = MdFormatListBulleted,
+  header,
+  subtitle,
+  actions,
+}: EmptyDisplayProps): React.ReactElement {
+  return (
+    <div className={cn('flex h-full items-center justify-center', className)}>
+      <div className="flex max-w-xl flex-col items-center space-y-4 text-center">
+        <div>
+          <Icon className="text-muted-foreground size-20" />
+        </div>
+        <h1>{header ?? 'No items found'}</h1>
+        <p className="text-muted-foreground">
+          {subtitle ?? 'There is no content here yet.'}
+        </p>
+        {actions}
+      </div>
+    </div>
+  );
+}
+
+export { EmptyDisplay };

package/dist/generators/core/react-components/templates/{components/ErrorDisplay/index.tsx → src/components/error-display/error-display.tsx}

@@ -1,11 +1,10 @@
 // @ts-nocheck
 
-import type { ReactElement } from 'react';
-
-import clsx from 'clsx';
 import React from 'react';
 import { MdOutlineErrorOutline } from 'react-icons/md';
 
+import { cn } from '../../utils/cn.js';
+
 interface ErrorDisplayProps {
   /**
    * Optional class name to be applied to the loader or error div
@@ -14,7 +13,7 @@ interface ErrorDisplayProps {
   /**
    * Header to be displayed (if not passed, a generic error header will be displayed)
    */
-  header?: string;
+  header?: React.ReactNode;
   /**
    * Error to be displayed (if a string is passed, it will be displayed as-is, otherwise a generic error message will be displayed)
    */
@@ -25,20 +24,29 @@ interface ErrorDisplayProps {
   actions?: React.ReactNode;
 }
 
+/**
+ * Displays a generic error state with a header and error message.
+ */
 function ErrorDisplay({
   className,
   header,
   error,
   actions,
-}: ErrorDisplayProps): ReactElement {
+}: ErrorDisplayProps): React.ReactElement {
   return (
-    <div className={clsx('flex h-full items-center justify-center', className)}>
+    <div
+      className={cn(
+        'flex h-full w-full items-center justify-center',
+        className,
+      )}
+      role="alert"
+    >
       <div className="flex max-w-xl flex-col items-center space-y-4 text-center">
         <div>
-          <MdOutlineErrorOutline className="text-foreground-300 dark:text-foreground-700 h-20 w-20" />
+          <MdOutlineErrorOutline className="text-muted-foreground size-20" />
         </div>
         <h1>{header ?? 'Sorry, something went wrong'}</h1>
-        <p className="text-base">
+        <p>
           {typeof error === 'string' || React.isValidElement(error)
             ? error
             : 'We encountered an error showing this page.'}
@@ -49,4 +57,4 @@ function ErrorDisplay({
   );
 }
 
-export default ErrorDisplay;
+export { ErrorDisplay };