@baseplate-dev/react-generators 0.1.3 → 0.2.1

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

@@ -0,0 +1,142 @@
+// @ts-nocheck
+
+import type * as React from 'react';
+
+import { cn } from '../../utils/cn.js';
+
+/**
+ * A responsive table component.
+ *
+ * https://ui.shadcn.com/docs/components/table
+ */
+function Table({
+  className,
+  ...props
+}: React.ComponentProps<'table'>): React.ReactElement {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn('w-full caption-bottom text-sm', className)}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function TableHeader({
+  className,
+  ...props
+}: React.ComponentProps<'thead'>): React.ReactElement {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn('[&_tr]:border-b', className)}
+      {...props}
+    />
+  );
+}
+
+function TableBody({
+  className,
+  ...props
+}: React.ComponentProps<'tbody'>): React.ReactElement {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn('[&_tr:last-child]:border-0', className)}
+      {...props}
+    />
+  );
+}
+
+function TableFooter({
+  className,
+  ...props
+}: React.ComponentProps<'tfoot'>): React.ReactElement {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        'bg-muted/50 border-t font-medium [&>tr]:last:border-b-0',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableRow({
+  className,
+  ...props
+}: React.ComponentProps<'tr'>): React.ReactElement {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableHead({
+  className,
+  ...props
+}: React.ComponentProps<'th'>): React.ReactElement {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        'text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCell({
+  className,
+  ...props
+}: React.ComponentProps<'td'>): React.ReactElement {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<'caption'>): React.ReactElement {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn('text-muted-foreground mt-4 text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+};

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

@@ -0,0 +1,30 @@
+// @ts-nocheck
+
+import type * as React from 'react';
+
+import { cn } from '../../utils/cn.js';
+
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+
+/**
+ * A textarea component.
+ *
+ * https://ui.shadcn.com/docs/components/textarea
+ */
+function Textarea({
+  className,
+  ...props
+}: React.ComponentProps<'textarea'>): React.ReactElement {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:aria-invalid:ring-destructive/40 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Textarea };

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

@@ -0,0 +1,95 @@
+// @ts-nocheck
+
+'use client';
+
+import type { ComponentPropsWithRef } from 'react';
+import type {
+  Control,
+  FieldError,
+  FieldPath,
+  FieldValues,
+  RegisterOptions,
+  UseFormRegisterReturn,
+} from 'react-hook-form';
+
+import { get, useFormState } from 'react-hook-form';
+
+import type { FormFieldProps } from '../../types/form.js';
+
+import {
+  FormControl,
+  FormDescription,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '../form-item/form-item.js';
+import { Textarea } from '../textarea/textarea.js';
+
+export interface TextareaFieldProps
+  extends Omit<ComponentPropsWithRef<'textarea'>, 'onChange' | 'value'>,
+    FormFieldProps {
+  onChange?: (value: string) => void;
+  value?: string;
+  register?: UseFormRegisterReturn;
+}
+
+function TextareaField({
+  label,
+  description,
+  error,
+  onChange,
+  register,
+  ...props
+}: TextareaFieldProps): React.ReactElement {
+  return (
+    <FormItem error={error}>
+      <FormLabel>{label}</FormLabel>
+      <FormControl>
+        <Textarea
+          onChange={
+            onChange &&
+            ((e) => {
+              onChange(e.target.value);
+            })
+          }
+          {...props}
+          {...register}
+        />
+      </FormControl>
+      <FormDescription>{description}</FormDescription>
+      <FormMessage />
+    </FormItem>
+  );
+}
+
+export interface TextareaFieldControllerProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> extends TextareaFieldProps {
+  control: Control<TFieldValues>;
+  name: TFieldName;
+  registerOptions?: RegisterOptions<TFieldValues, TFieldName>;
+}
+
+function TextareaFieldController<
+  TFieldValues extends FieldValues = FieldValues,
+  TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  control,
+  name,
+  registerOptions,
+  ...rest
+}: TextareaFieldControllerProps<TFieldValues, TFieldName>): React.ReactElement {
+  const { errors } = useFormState({ control, name });
+  const error = get(errors, name) as FieldError | undefined;
+
+  return (
+    <TextareaField
+      register={control.register(name, registerOptions)}
+      error={error?.message}
+      {...rest}
+    />
+  );
+}
+
+export { TextareaField, TextareaFieldController };

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

@@ -0,0 +1,50 @@
+// @ts-nocheck
+
+'use client';
+
+import type React from 'react';
+
+import { Toaster as Sonner } from 'sonner';
+
+import { buttonVariants } from '../../styles/button.js';
+
+type ToasterProps = React.ComponentProps<typeof Sonner>;
+
+/**
+ * A toaster component that displays toast notifications.
+ *
+ * Adapted from https://ui.shadcn.com/docs/components/sonner
+ */
+const Toaster = ({ ...props }: ToasterProps): React.ReactElement => (
+  <Sonner
+    className="toaster group"
+    position="top-center"
+    duration={3000}
+    closeButton
+    toastOptions={{
+      unstyled: true,
+      classNames: {
+        success:
+          'group-[.toaster]:bg-success group-[.toaster]:text-success-foreground group-[.toaster]:border-success',
+        error:
+          'group-[.toaster]:bg-error group-[.toaster]:text-error-foreground group-[.toaster]:border-error',
+        warning:
+          'group-[.toaster]:bg-warning group-[.toaster]:text-warning-foreground group-[.toaster]:border-warning',
+        default: 'bg-background text-foreground',
+        toast:
+          'group toast group-[.toaster]:shadow-lg p-4 rounded-lg flex items-center text-sm gap-1.5 w-(--width)',
+        description: 'group-[.toast]:text-muted-foreground',
+        actionButton: buttonVariants({
+          size: 'sm',
+        }),
+        cancelButton: buttonVariants({
+          size: 'sm',
+          variant: 'secondary',
+        }),
+      },
+    }}
+    {...props}
+  />
+);
+
+export { Toaster };

package/dist/generators/core/react-components/templates/{hooks/useConfirmDialog.ts → src/hooks/use-confirm-dialog.ts}

@@ -3,14 +3,14 @@
 import { useCallback } from 'react';
 import { create } from 'zustand';
 
-import type { ButtonProps } from '../components/Button/index.js';
+import type { ButtonProps } from '../components/button/button.js';
 
 export interface UseConfirmDialogRequestOptions {
   title: string;
   content: string;
   buttonCancelText?: string;
   buttonConfirmText?: string;
-  buttonConfirmColor?: ButtonProps['color'];
+  buttonConfirmVariant?: ButtonProps['variant'];
   onCancel?: React.MouseEventHandler<HTMLButtonElement>;
   onConfirm?: React.MouseEventHandler<HTMLButtonElement>;
 }

package/dist/generators/core/react-components/templates/src/hooks/use-controlled-state.ts

@@ -0,0 +1,53 @@
+// @ts-nocheck
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+/**
+ * Works similarly to `useState`, but allows the state to be controlled and shows a warning if the state is changed from controlled to uncontrolled or vice versa.
+ */
+export function useControlledState<T>(
+  value: T | undefined,
+  setValue: ((value: T) => void) | undefined,
+): [T | undefined, (value: T) => void];
+export function useControlledState<T>(
+  value: T | undefined,
+  setValue: ((value: T) => void) | undefined,
+  defaultValue: T,
+): [T, (value: T) => void];
+export function useControlledState<T>(
+  value: T | undefined,
+  setValue: ((value: T) => void) | undefined,
+  defaultValue?: T,
+): [T, (value: T) => void] {
+  const isControlled = value !== undefined;
+  const isControlledRef = useRef(isControlled);
+  const setValuePropsRef = useRef(setValue);
+  const [internalState, setInternalState] = useState(defaultValue);
+
+  useEffect(() => {
+    if (
+      process.env.NODE_ENV !== 'production' &&
+      isControlledRef.current !== isControlled
+    ) {
+      console.warn(
+        'Component is changing from controlled to uncontrolled (or visa versa). Component should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled Combobox for the lifetime of the component. Check the `value` prop.',
+      );
+    }
+    isControlledRef.current = isControlled;
+  }, [isControlled]);
+
+  useEffect(() => {
+    setValuePropsRef.current = setValue;
+  }, [setValue]);
+
+  const setState = useCallback((value: T) => {
+    if (setValuePropsRef.current) {
+      setValuePropsRef.current(value);
+    }
+    if (!isControlledRef.current) {
+      setInternalState(value);
+    }
+  }, []);
+
+  return [(isControlled ? value : internalState) as T, setState];
+}

package/dist/generators/core/react-components/templates/src/hooks/use-controller-merged.ts

@@ -0,0 +1,70 @@
+// @ts-nocheck
+
+import type { ForwardedRef } from 'react';
+import type {
+  ControllerRenderProps,
+  FieldPath,
+  FieldValues,
+  UseControllerProps,
+  UseControllerReturn,
+} from 'react-hook-form';
+
+import { useController } from 'react-hook-form';
+
+import { mergeRefs } from '../utils/merge-refs.js';
+
+interface UseControllerMergedOptions<TValue, TRef> {
+  onChange?: (value: TValue) => void;
+  onBlur?: React.FocusEventHandler<TRef>;
+  disabled?: boolean;
+}
+
+/**
+ * A hook to wrap useController from react-hook-form that allows
+ * passing in properties and refs that will be merged with the
+ * controller's properties and ref.
+ */
+export function useControllerMerged<
+  TValue,
+  TRef,
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>(
+  props: UseControllerProps<TFieldValues, TName>,
+  options: UseControllerMergedOptions<TValue, TRef>,
+  ref?: ForwardedRef<TRef>,
+): Omit<UseControllerReturn<TFieldValues, TName>, 'field'> & {
+  field: Omit<
+    ControllerRenderProps,
+    'ref' | 'onChange' | 'value' | 'onBlur'
+  > & {
+    ref: ForwardedRef<TRef> | undefined;
+    onChange: (value: TValue) => void;
+    value: TValue;
+    onBlur: React.FocusEventHandler<TRef>;
+  };
+} {
+  const { onChange, onBlur, disabled } = options;
+  const controllerReturnValue = useController({
+    ...props,
+    disabled: props.disabled,
+  });
+  const { field } = controllerReturnValue;
+
+  return {
+    ...controllerReturnValue,
+    field: {
+      ...field,
+      ref: mergeRefs(field.ref, ref),
+      onChange: (value: TValue) => {
+        field.onChange(value);
+        onChange?.(value);
+      },
+      onBlur: (e) => {
+        field.onBlur();
+        onBlur?.(e);
+      },
+      disabled: disabled ?? field.disabled,
+    },
+  };
+}

package/dist/generators/core/react-components/templates/src/styles/button.ts

@@ -0,0 +1,42 @@
+// @ts-nocheck
+
+import { cva } from 'class-variance-authority';
+
+export const buttonVariants = cva(
+  "inline-flex shrink-0 cursor-pointer items-center justify-center rounded-md font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default:
+          'border border-input bg-primary text-sm text-primary-foreground hover:bg-primary-hover',
+        destructive:
+          'bg-destructive text-sm text-destructive-foreground hover:bg-destructive-hover',
+        outline:
+          'border border-input bg-background text-sm hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'border border-input bg-secondary text-sm text-secondary-foreground hover:bg-secondary-hover',
+        ghost: 'text-sm hover:bg-accent hover:text-accent-foreground',
+        ghostDestructive: 'text-sm text-destructive hover:bg-accent',
+        link: 'text-link underline-offset-4 hover:underline',
+        linkDestructive: 'text-destructive underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 gap-2 px-4 py-2 has-[>svg]:px-3',
+        none: '',
+        sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5',
+        lg: 'h-10 gap-2 rounded-md px-6 has-[>svg]:px-4',
+        icon: 'size-9',
+      },
+      justify: {
+        start: 'justify-start',
+        center: 'justify-center',
+        end: 'justify-end',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+      justify: 'center',
+    },
+  },
+);

package/dist/generators/core/react-components/templates/src/styles/input.ts

@@ -0,0 +1,35 @@
+// @ts-nocheck
+
+import { cva } from 'class-variance-authority';
+
+import { cn } from '../utils/cn.js';
+
+export const inputVariants = cva(
+  cn(
+    'flex w-full min-w-0 rounded-md bg-transparent py-1 pl-3 text-base shadow-xs transition-[color,box-shadow] outline-none 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 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30',
+    'border border-input',
+    'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
+    'aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40',
+  ),
+  {
+    variants: {
+      height: {
+        default: 'h-9',
+        flexible: 'min-h-9',
+      },
+      background: {
+        default: 'bg-background',
+        transparent: '',
+      },
+      rightPadding: {
+        default: 'pr-3',
+        none: '',
+      },
+    },
+    defaultVariants: {
+      height: 'default',
+      background: 'default',
+      rightPadding: 'default',
+    },
+  },
+);

package/dist/generators/core/react-components/templates/src/styles/select.ts

@@ -0,0 +1,39 @@
+// @ts-nocheck
+
+import { cva } from 'class-variance-authority';
+
+export const selectTriggerVariants = cva(
+  "flex w-full items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+);
+
+export const selectContentVariants = cva(
+  'relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md 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',
+  {
+    variants: {
+      popper: {
+        none: '',
+        active:
+          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+      },
+    },
+  },
+);
+
+// Replaces data-[disabled] with data-[disabled=true] since Radix sets disabled=false and adds aria-selected selector
+// https://github.com/shadcn-ui/ui/issues/3256
+
+export const selectItemVariants = cva(
+  "relative flex w-full cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+  {
+    variants: {
+      withFocus: {
+        none: '',
+        highlight: 'focus:bg-accent focus:text-accent-foreground',
+      },
+    },
+  },
+);
+
+export const selectCheckVariants = cva(
+  'absolute right-2 flex size-3.5 items-center justify-center',
+);

package/dist/generators/core/react-components/templates/src/types/form.ts

@@ -0,0 +1,52 @@
+// @ts-nocheck
+
+export interface FormFieldProps {
+  label?: React.ReactNode;
+  error?: React.ReactNode;
+  description?: React.ReactNode;
+}
+
+type SelectOptionLabelRenderer<OptionType> = (
+  value: OptionType,
+  options: { selected: boolean },
+) => React.ReactNode;
+
+type SelectOptionStringExtractor<OptionType> = (value: OptionType) => string;
+
+type SelectOptionStringOrNullExtractor<OptionType> = (
+  value: OptionType,
+) => string | null;
+
+export interface MultiSelectOptionProps<OptionType> {
+  options: OptionType[];
+  onChange?: (value: string[]) => void;
+  value?: string[];
+  renderItemLabel?: SelectOptionLabelRenderer<OptionType>;
+  getOptionLabel?: SelectOptionStringExtractor<OptionType>;
+  getOptionValue?: SelectOptionStringExtractor<OptionType>;
+  placeholder?: string;
+}
+
+export interface SelectOptionProps<OptionType> {
+  options: OptionType[];
+  onChange?: (value: string | null) => void;
+  value?: string | null;
+  renderItemLabel?: SelectOptionLabelRenderer<OptionType>;
+  getOptionLabel?: SelectOptionStringExtractor<OptionType>;
+  getOptionValue?: SelectOptionStringOrNullExtractor<OptionType>;
+  placeholder?: string;
+}
+
+export type AddOptionRequiredFields<OptionType> = (OptionType extends {
+  label: string;
+}
+  ? unknown
+  : {
+      renderItemLabel?: SelectOptionLabelRenderer<OptionType>;
+      getOptionLabel: SelectOptionStringExtractor<OptionType>;
+    }) &
+  (OptionType extends { value: string }
+    ? unknown
+    : {
+        getOptionValue: SelectOptionStringOrNullExtractor<OptionType>;
+      });

package/dist/generators/core/react-components/templates/src/types/icon.ts

@@ -0,0 +1,5 @@
+// @ts-nocheck
+
+import type { ElementType } from 'react';
+
+export type IconElement = ElementType<React.SVGAttributes<SVGElement>>;

package/dist/generators/core/react-components/templates/src/utils/cn.ts

@@ -0,0 +1,9 @@
+// @ts-nocheck
+
+import type { ClassValue } from 'clsx';
+
+import { clsx } from 'clsx';
+
+export function cn(...inputs: ClassValue[]): string {
+  return clsx(inputs);
+}

package/dist/generators/core/react-components/templates/src/utils/merge-refs.ts

@@ -0,0 +1,29 @@
+// @ts-nocheck
+
+import type { Ref } from 'react';
+
+/**
+ * Merges multiple React refs into a single ref callback. This is useful when you need to pass multiple refs to the same component.
+ *
+ * @param refs - An array of refs to merge. Each ref can be either a function ref or a ref object.
+ * @returns A ref callback that can be assigned to the ref attribute of a React element, or undefined if all refs are undefined.
+ * @template T - The type of the element that the refs will be associated with.
+ */
+export function mergeRefs<T>(
+  ...refs: (Ref<T> | undefined)[]
+): Ref<T> | undefined {
+  // Return undefined if all refs are undefined
+  if (refs.every((ref) => ref === undefined)) {
+    return undefined;
+  }
+
+  return (instance: T | null) => {
+    for (const ref of refs) {
+      if (typeof ref === 'function') {
+        ref(instance);
+      } else if (ref) {
+        ref.current = instance;
+      }
+    }
+  };
+}