@baseplate-dev/react-generators 0.1.3 → 0.2.0

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

@@ -0,0 +1,211 @@
+// @ts-nocheck
+
+'use client';
+
+import type { DayButton } from 'react-day-picker';
+
+import * as React from 'react';
+import { DayPicker, getDefaultClassNames } from 'react-day-picker';
+import { MdChevronLeft, MdChevronRight, MdExpandMore } from 'react-icons/md';
+
+import { buttonVariants } from '../../styles/button.js';
+import { cn } from '../../utils/cn.js';
+import { Button } from '../button/button.js';
+
+/* eslint-disable react/prop-types -- needed for subcomponents */
+
+/**
+ * A control that allows the user to select a date.
+ *
+ * https://ui.shadcn.com/docs/components/calendar
+ */
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  captionLayout = 'label',
+  buttonVariant = 'ghost',
+  formatters,
+  components,
+  ...props
+}: React.ComponentProps<typeof DayPicker> & {
+  buttonVariant?: React.ComponentProps<typeof Button>['variant'];
+}): React.ReactElement {
+  const defaultClassNames = getDefaultClassNames();
+
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn(
+        'group/calendar bg-background p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent',
+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
+        className,
+      )}
+      captionLayout={captionLayout}
+      formatters={{
+        formatMonthDropdown: (date) =>
+          date.toLocaleString('default', { month: 'short' }),
+        ...formatters,
+      }}
+      classNames={{
+        root: cn('w-fit', defaultClassNames.root),
+        months: cn(
+          'relative flex flex-col gap-4 md:flex-row',
+          defaultClassNames.months,
+        ),
+        month: cn('flex w-full flex-col gap-4', defaultClassNames.month),
+        nav: cn(
+          'absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1',
+          defaultClassNames.nav,
+        ),
+        button_previous: cn(
+          buttonVariants({ variant: buttonVariant }),
+          'size-(--cell-size) p-0 select-none aria-disabled:opacity-50',
+          defaultClassNames.button_previous,
+        ),
+        button_next: cn(
+          buttonVariants({ variant: buttonVariant }),
+          'size-(--cell-size) p-0 select-none aria-disabled:opacity-50',
+          defaultClassNames.button_next,
+        ),
+        month_caption: cn(
+          'flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)',
+          defaultClassNames.month_caption,
+        ),
+        dropdowns: cn(
+          'flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium',
+          defaultClassNames.dropdowns,
+        ),
+        dropdown_root: cn(
+          'relative rounded-md border border-input shadow-xs has-focus:border-ring has-focus:ring-[3px] has-focus:ring-ring/50',
+          defaultClassNames.dropdown_root,
+        ),
+        dropdown: cn('absolute inset-0 opacity-0', defaultClassNames.dropdown),
+        caption_label: cn(
+          'font-medium select-none',
+          captionLayout === 'label'
+            ? 'text-sm'
+            : 'flex h-8 items-center gap-1 rounded-md pr-1 pl-2 text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground',
+          defaultClassNames.caption_label,
+        ),
+        table: 'w-full border-collapse',
+        weekdays: cn('flex', defaultClassNames.weekdays),
+        weekday: cn(
+          'flex-1 rounded-md text-[0.8rem] font-normal text-muted-foreground select-none',
+          defaultClassNames.weekday,
+        ),
+        week: cn('mt-2 flex w-full', defaultClassNames.week),
+        week_number_header: cn(
+          'w-(--cell-size) select-none',
+          defaultClassNames.week_number_header,
+        ),
+        week_number: cn(
+          'text-[0.8rem] text-muted-foreground select-none',
+          defaultClassNames.week_number,
+        ),
+        day: cn(
+          'group/day relative aspect-square h-full w-full p-0 text-center select-none [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md',
+          defaultClassNames.day,
+        ),
+        range_start: cn(
+          'rounded-l-md bg-accent',
+          defaultClassNames.range_start,
+        ),
+        range_middle: cn('rounded-none', defaultClassNames.range_middle),
+        range_end: cn('rounded-r-md bg-accent', defaultClassNames.range_end),
+        today: cn(
+          'rounded-md bg-accent text-accent-foreground data-[selected=true]:rounded-none',
+          defaultClassNames.today,
+        ),
+        outside: cn(
+          'text-muted-foreground aria-selected:text-muted-foreground',
+          defaultClassNames.outside,
+        ),
+        disabled: cn(
+          'text-muted-foreground opacity-50',
+          defaultClassNames.disabled,
+        ),
+        hidden: cn('invisible', defaultClassNames.hidden),
+        ...classNames,
+      }}
+      components={{
+        Root: ({ className, rootRef, ...props }) => (
+          <div
+            data-slot="calendar"
+            ref={rootRef}
+            className={cn(className)}
+            {...props}
+          />
+        ),
+        Chevron: ({ className, orientation, ...props }) => {
+          if (orientation === 'left') {
+            return (
+              <MdChevronLeft className={cn('size-4', className)} {...props} />
+            );
+          }
+
+          if (orientation === 'right') {
+            return (
+              <MdChevronRight className={cn('size-4', className)} {...props} />
+            );
+          }
+
+          return (
+            <MdExpandMore className={cn('size-4', className)} {...props} />
+          );
+        },
+        DayButton: CalendarDayButton,
+        WeekNumber: ({ children, ...props }) => (
+          <td {...props}>
+            <div className="flex size-(--cell-size) items-center justify-center text-center">
+              {children}
+            </div>
+          </td>
+        ),
+        ...components,
+      }}
+      {...props}
+    />
+  );
+}
+
+function CalendarDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: React.ComponentProps<typeof DayButton>): React.ReactElement {
+  const defaultClassNames = getDefaultClassNames();
+
+  const ref = React.useRef<HTMLButtonElement>(null);
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
+
+  return (
+    <Button
+      ref={ref}
+      variant="ghost"
+      size="icon"
+      data-day={day.date.toLocaleDateString()}
+      data-selected-single={
+        modifiers.selected &&
+        !modifiers.range_start &&
+        !modifiers.range_end &&
+        !modifiers.range_middle
+      }
+      data-range-start={modifiers.range_start}
+      data-range-end={modifiers.range_end}
+      data-range-middle={modifiers.range_middle}
+      className={cn(
+        'group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70',
+        defaultClassNames.day,
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Calendar, CalendarDayButton };

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

@@ -0,0 +1,120 @@
+// @ts-nocheck
+
+import type * as React from 'react';
+
+import { cn } from '../../utils/cn.js';
+
+/**
+ * Displays a card with header, content, and footer.
+ *
+ * https://ui.shadcn.com/docs/components/card
+ */
+function Card({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): React.ReactElement {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): React.ReactElement {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): React.ReactElement {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn('leading-none font-semibold', className)}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): React.ReactElement {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+function CardAction({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): React.ReactElement {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardContent({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): React.ReactElement {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn('px-6', className)}
+      {...props}
+    />
+  );
+}
+
+function CardFooter({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): React.ReactElement {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn('flex items-center px-6 [.border-t]:pt-6', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+};

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

@@ -0,0 +1,40 @@
+// @ts-nocheck
+
+'use client';
+
+import type * as React from 'react';
+
+import { Checkbox as CheckboxPrimitive } from 'radix-ui';
+import { MdCheck } from 'react-icons/md';
+
+import { cn } from '../../utils/cn.js';
+
+/**
+ * A control that allows the user to toggle between checked and not checked.
+ *
+ * https://ui.shadcn.com/docs/components/checkbox
+ */
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>): React.ReactElement {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        'border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary peer size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <MdCheck className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
+
+export { Checkbox };

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

@@ -0,0 +1,90 @@
+// @ts-nocheck
+
+'use client';
+
+import type React from 'react';
+import type { ComponentPropsWithRef } from 'react';
+import type { Control, FieldPath, FieldValues } from 'react-hook-form';
+
+import type { FormFieldProps } from '../../types/form.js';
+
+import { useControllerMerged } from '../../hooks/use-controller-merged.js';
+import { cn } from '../../utils/cn.js';
+import { Checkbox } from '../checkbox/checkbox.js';
+import {
+  FormControl,
+  FormDescription,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '../form-item/form-item.js';
+
+interface CheckboxFieldProps
+  extends Omit<
+      ComponentPropsWithRef<'button'>,
+      'onCheckedChange' | 'checked' | 'onChange' | 'value'
+    >,
+    FormFieldProps {
+  onChange?: (value: boolean) => void;
+  value?: boolean;
+}
+
+/**
+ * Field with label and error states that wraps a Checkbox component.
+ */
+function CheckboxField({
+  label,
+  description,
+  error,
+  onChange,
+  value,
+  className,
+  ...props
+}: CheckboxFieldProps): React.ReactElement {
+  return (
+    <FormItem error={error} className={cn('space-y-2', className)}>
+      <div className="flex flex-row items-center">
+        <FormControl>
+          <Checkbox
+            {...props}
+            onCheckedChange={(checked) => {
+              onChange?.(checked === true);
+            }}
+            checked={value}
+          />
+        </FormControl>
+        <div className="space-y-0.5">
+          <FormLabel className="cursor-pointer pl-2">{label}</FormLabel>
+          <FormDescription className="pl-2">{description}</FormDescription>
+        </div>
+      </div>
+      <FormMessage />
+    </FormItem>
+  );
+}
+
+interface CheckboxFieldControllerProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> extends Omit<CheckboxFieldProps, 'value'> {
+  control: Control<TFieldValues>;
+  name: TFieldName;
+}
+
+function CheckboxFieldController<
+  TFieldValues extends FieldValues = FieldValues,
+  TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  control,
+  name,
+  ...rest
+}: CheckboxFieldControllerProps<TFieldValues, TFieldName>): React.ReactElement {
+  const {
+    field,
+    fieldState: { error },
+  } = useControllerMerged({ name, control }, rest);
+
+  return <CheckboxField error={error?.message} {...rest} {...field} />;
+}
+
+export { CheckboxField, CheckboxFieldController };

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

@@ -0,0 +1,138 @@
+// @ts-nocheck
+
+import { cn } from '../../utils/cn.js';
+
+interface CircularProgressProps {
+  max: number;
+  value: number;
+  min: number;
+  gaugePrimaryColor: string;
+  gaugeSecondaryColor: string;
+  size?: 'sm' | 'md' | 'lg';
+  className?: string;
+}
+
+/**
+ * A circular progress bar component.
+ *
+ * https://magicui.design/docs/components/animated-circular-progress-bar
+ */
+export function CircularProgress({
+  max = 100,
+  min = 0,
+  value = 0,
+  gaugePrimaryColor = 'var(--primary)',
+  gaugeSecondaryColor = 'var(--muted)',
+  size = 'md',
+  className,
+}: CircularProgressProps): React.ReactElement {
+  const sizeConfig = {
+    sm: {
+      containerSize: 'size-12',
+      textSize: 'text-sm',
+    },
+    md: {
+      containerSize: 'size-20',
+      textSize: 'text-lg',
+    },
+    lg: {
+      containerSize: 'size-40',
+      textSize: 'text-2xl',
+    },
+  };
+
+  const config = sizeConfig[size];
+  const circumference = 2 * Math.PI * 45;
+  const percentPx = circumference / 100;
+  const currentPercent = Math.round(((value - min) / (max - min)) * 100);
+
+  return (
+    <div
+      className={cn(
+        'relative font-semibold',
+        config.containerSize,
+        config.textSize,
+        className,
+      )}
+      style={
+        {
+          '--circle-size': '100px',
+          '--circumference': circumference,
+          '--percent-to-px': `${percentPx}px`,
+          '--gap-percent': '5',
+          '--offset-factor': '0',
+          '--transition-length': '1s',
+          '--transition-step': '200ms',
+          '--delay': '0s',
+          '--percent-to-deg': '3.6deg',
+          transform: 'translateZ(0)',
+        } as React.CSSProperties
+      }
+    >
+      <svg
+        fill="none"
+        className={config.containerSize}
+        strokeWidth="2"
+        viewBox="0 0 100 100"
+      >
+        {currentPercent <= 90 && currentPercent >= 0 && (
+          <circle
+            cx="50"
+            cy="50"
+            r="45"
+            strokeWidth="10"
+            strokeDashoffset="0"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className="opacity-100"
+            style={
+              {
+                stroke: gaugeSecondaryColor,
+                '--stroke-percent': 90 - currentPercent,
+                '--offset-factor-secondary': 'calc(1 - var(--offset-factor))',
+                strokeDasharray:
+                  'calc(var(--stroke-percent) * var(--percent-to-px)) var(--circumference)',
+                transform:
+                  'rotate(calc(1turn - 90deg - (var(--gap-percent) * var(--percent-to-deg) * var(--offset-factor-secondary)))) scaleY(-1)',
+                transition: 'all var(--transition-length) ease var(--delay)',
+                transformOrigin:
+                  'calc(var(--circle-size) / 2) calc(var(--circle-size) / 2)',
+              } as React.CSSProperties
+            }
+          />
+        )}
+        <circle
+          cx="50"
+          cy="50"
+          r="45"
+          strokeWidth="10"
+          strokeDashoffset="0"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="opacity-100"
+          style={
+            {
+              stroke: gaugePrimaryColor,
+              '--stroke-percent': currentPercent,
+              strokeDasharray:
+                'calc(var(--stroke-percent) * var(--percent-to-px)) var(--circumference)',
+              transition:
+                'var(--transition-length) ease var(--delay),stroke var(--transition-length) ease var(--delay)',
+              transitionProperty: 'stroke-dasharray,transform',
+              transform:
+                'rotate(calc(-90deg + var(--gap-percent) * var(--offset-factor) * var(--percent-to-deg)))',
+              transformOrigin:
+                'calc(var(--circle-size) / 2) calc(var(--circle-size) / 2)',
+            } as React.CSSProperties
+          }
+        />
+      </svg>
+      <span
+        data-current-value={currentPercent}
+        className="animate-in fade-in absolute inset-0 m-auto size-fit delay-[var(--delay)] duration-[var(--transition-length)] ease-linear"
+      >
+        {currentPercent}
+      </span>
+    </div>
+  );
+}