@baseplate-dev/react-generators 0.1.3 → 0.2.0

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

@@ -0,0 +1,42 @@
+// @ts-nocheck
+
+import type React from 'react';
+
+import { ErrorDisplay } from '../error-display/error-display.js';
+import { Loader } from '../loader/loader.js';
+
+interface ErrorableLoaderProps {
+  /**
+   * Optional class name to be applied to the loader or error div
+   */
+  className?: string;
+  /**
+   * Error to be displayed (if a string is passed, it will be displayed as-is, otherwise a generic error message will be displayed)
+   */
+  error?: unknown;
+  /**
+   * Header to be displayed (if not passed, a generic error header will be displayed)
+   */
+  header?: React.ReactNode;
+  /**
+   * Optional actions to be displayed below the error message
+   */
+  actions?: React.ReactNode;
+}
+
+/**
+ * Displays a loader component that if an error is passed, it will display an error message instead.
+ */
+function ErrorableLoader({
+  className,
+  error,
+  header,
+  actions,
+}: ErrorableLoaderProps): React.ReactElement {
+  if (!error) {
+    return <Loader className={className} />;
+  }
+  return <ErrorDisplay header={header} error={error} actions={actions} />;
+}
+
+export { ErrorableLoader };

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

@@ -0,0 +1,162 @@
+// @ts-nocheck
+
+'use client';
+
+import type { Label as LabelPrimitive } from 'radix-ui';
+
+import { Slot } from 'radix-ui';
+import * as React from 'react';
+
+import { cn } from '../../utils/cn.js';
+import { Label } from '../label/label.js';
+
+interface FormItemContextValue {
+  id: string;
+  error: React.ReactNode | Error | undefined;
+}
+
+const FormItemContext = React.createContext<FormItemContextValue | null>(null);
+
+interface UseFormFieldResult extends FormItemContextValue {
+  formItemId: string;
+  formDescriptionId: string;
+  formMessageId: string;
+}
+
+const useFormField = (): UseFormFieldResult => {
+  const itemContext = React.useContext(FormItemContext);
+
+  if (!itemContext) {
+    throw new Error('useFormField should be used within <FormItem>');
+  }
+
+  const { id, error } = itemContext;
+
+  return {
+    id,
+    error,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+  };
+};
+
+interface FormItemProps extends React.ComponentProps<'div'> {
+  error?: React.ReactNode | Error;
+}
+
+function FormItem({
+  className,
+  error,
+  ...props
+}: FormItemProps): React.ReactElement {
+  const id = React.useId();
+
+  return (
+    <FormItemContext.Provider value={{ id, error }}>
+      <div
+        data-slot="form-item"
+        className={cn('grid gap-2', className)}
+        {...props}
+      />
+    </FormItemContext.Provider>
+  );
+}
+
+function FormLabel({
+  className,
+  ...props
+}: React.ComponentProps<
+  typeof LabelPrimitive.Root
+>): React.ReactElement | null {
+  const { error, formItemId } = useFormField();
+
+  if (props.children === null || props.children === undefined) {
+    return null;
+  }
+
+  return (
+    <Label
+      data-slot="form-label"
+      data-error={!!error}
+      className={cn('data-[error=true]:text-destructive', className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
+}
+
+function FormControl({
+  ...props
+}: React.ComponentProps<typeof Slot.Root>): React.ReactElement {
+  const { error, formItemId, formDescriptionId, formMessageId } =
+    useFormField();
+
+  return (
+    <Slot.Root
+      data-slot="form-control"
+      id={formItemId}
+      aria-describedby={
+        error ? `${formDescriptionId} ${formMessageId}` : formDescriptionId
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+}
+
+function FormDescription({
+  className,
+  ...props
+}: React.ComponentProps<'p'>): React.ReactElement | null {
+  const { formDescriptionId } = useFormField();
+
+  if (props.children === null || props.children === undefined) {
+    return null;
+  }
+
+  return (
+    <p
+      data-slot="form-description"
+      id={formDescriptionId}
+      className={cn('text-muted-foreground text-sm', className)}
+      {...props}
+    />
+  );
+}
+
+function FormMessage({
+  className,
+  ...props
+}: React.ComponentProps<'p'>): React.ReactElement | null {
+  const { error, formMessageId } = useFormField();
+  const body = error
+    ? error instanceof Error
+      ? error.message
+      : error
+    : props.children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <p
+      data-slot="form-message"
+      id={formMessageId}
+      className={cn('text-destructive text-sm', className)}
+      {...props}
+    >
+      {body}
+    </p>
+  );
+}
+
+export {
+  FormControl,
+  FormDescription,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  useFormField,
+};

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

@@ -0,0 +1,28 @@
+// @ts-nocheck
+
+import type * as React from 'react';
+
+import { inputVariants } from '../../styles/input.js';
+import { cn } from '../../utils/cn.js';
+
+/**
+ * Input component for a styled <input /> element.
+ *
+ * https://ui.shadcn.com/docs/components/input
+ */
+function Input({
+  className,
+  type,
+  ...props
+}: React.ComponentPropsWithRef<'input'>): React.ReactElement {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(inputVariants(), className)}
+      {...props}
+    />
+  );
+}
+
+export { Input };

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

@@ -0,0 +1,98 @@
+// @ts-nocheck
+
+import type React 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 { cn } from '../../utils/cn.js';
+import { mergeRefs } from '../../utils/merge-refs.js';
+import {
+  FormControl,
+  FormDescription,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '../form-item/form-item.js';
+import { Input } from '../input/input.js';
+
+export interface InputFieldProps
+  extends Omit<React.ComponentPropsWithRef<'input'>, 'onChange' | 'value'>,
+    FormFieldProps {
+  onChange?: (value: string) => void;
+  value?: string;
+  register?: UseFormRegisterReturn;
+}
+
+function InputField({
+  label,
+  description,
+  error,
+  onChange,
+  register,
+  className,
+  ref,
+  ...props
+}: InputFieldProps): React.ReactElement {
+  return (
+    <FormItem error={error} className={cn('flex flex-col gap-1.5', className)}>
+      <FormLabel>{label}</FormLabel>
+      <FormControl>
+        <Input
+          onChange={
+            onChange &&
+            ((e) => {
+              onChange(e.target.value);
+            })
+          }
+          ref={mergeRefs(ref, register?.ref)}
+          {...props}
+          {...register}
+        />
+      </FormControl>
+      <FormDescription>{description}</FormDescription>
+      <FormMessage />
+    </FormItem>
+  );
+}
+
+export interface InputFieldControllerProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> extends InputFieldProps {
+  control: Control<TFieldValues>;
+  name: TFieldName;
+  registerOptions?: RegisterOptions<TFieldValues, TFieldName>;
+}
+
+function InputFieldController<
+  TFieldValues extends FieldValues = FieldValues,
+  TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  control,
+  name,
+  registerOptions,
+  ...rest
+}: InputFieldControllerProps<TFieldValues, TFieldName>): React.ReactElement {
+  const { errors } = useFormState({ control, name });
+  const error = get(errors, name) as FieldError | undefined;
+
+  return (
+    <InputField
+      register={control.register(name, registerOptions)}
+      error={error?.message}
+      {...rest}
+    />
+  );
+}
+
+export { InputField, InputFieldController };

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

@@ -0,0 +1,32 @@
+// @ts-nocheck
+
+'use client';
+
+import type * as React from 'react';
+
+import { Label as LabelPrimitive } from 'radix-ui';
+
+import { cn } from '../../utils/cn.js';
+
+/**
+ * Renders an accessible label associated with controls.
+ *
+ * https://ui.shadcn.com/docs/components/label
+ */
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>): React.ReactElement {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        'flex items-center gap-2 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',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Label };

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

@@ -0,0 +1,29 @@
+// @ts-nocheck
+
+import type React from 'react';
+
+import { cn } from '../../utils/cn.js';
+
+interface LoaderProps {
+  className?: string;
+}
+
+/**
+ * Loader component that displays a 3-dot loading animation.
+ */
+function Loader({ className }: LoaderProps): React.ReactElement {
+  return (
+    <div
+      className={cn('flex h-full items-center justify-center', className)}
+      role="progressbar"
+    >
+      <div className="flex items-center space-x-2">
+        <div className="bg-muted-foreground size-3 animate-pulse rounded-full" />
+        <div className="bg-muted-foreground size-3 animate-pulse rounded-full delay-300" />
+        <div className="bg-muted-foreground size-3 animate-pulse rounded-full delay-[600ms]" />
+      </div>
+    </div>
+  );
+}
+
+export { Loader };

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

@@ -0,0 +1,218 @@
+// @ts-nocheck
+
+import type { VariantProps } from 'class-variance-authority';
+import type * as React from 'react';
+
+import { cva } from 'class-variance-authority';
+import { NavigationMenu as NavigationMenuPrimitive } from 'radix-ui';
+import { MdExpandMore } from 'react-icons/md';
+
+import { cn } from '../../utils/cn.js';
+
+/**
+ * A collection of links for navigating websites.
+ *
+ * Changes:
+ * - Added ability to use `vertical` orientation
+ *
+ * https://ui.shadcn.com/docs/components/navigation-menu
+ */
+function NavigationMenu({
+  className,
+  children,
+  viewport = true,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+  viewport?: boolean;
+}): React.ReactElement {
+  return (
+    <NavigationMenuPrimitive.Root
+      data-slot="navigation-menu"
+      data-viewport={viewport}
+      className={cn(
+        'group/navigation-menu relative flex max-w-max flex-1 items-center justify-center',
+        'data-[orientation="vertical"]:max-w-none data-[orientation="vertical"]:items-start data-[orientation="vertical"]:justify-start [&[data-orientation="vertical"]>*]:w-full',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {viewport && <NavigationMenuViewport />}
+    </NavigationMenuPrimitive.Root>
+  );
+}
+
+function NavigationMenuList({
+  className,
+  ...props
+}: React.ComponentProps<
+  typeof NavigationMenuPrimitive.List
+>): React.ReactElement {
+  return (
+    <NavigationMenuPrimitive.List
+      data-slot="navigation-menu-list"
+      className={cn(
+        'group flex flex-1 list-none items-center justify-center gap-1',
+        'data-[orientation="vertical"]:flex-col data-[orientation="vertical"]:items-stretch',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function NavigationMenuItem({
+  className,
+  ...props
+}: React.ComponentProps<
+  typeof NavigationMenuPrimitive.Item
+>): React.ReactElement {
+  return (
+    <NavigationMenuPrimitive.Item
+      data-slot="navigation-menu-item"
+      className={cn('relative', className)}
+      {...props}
+    />
+  );
+}
+
+const navigationMenuTriggerStyle = cva(
+  'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-[color,box-shadow] outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-accent/50 data-[state=open]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent',
+  {
+    variants: {
+      size: {
+        default: 'px-4 py-2',
+        skinny: 'p-2',
+      },
+    },
+  },
+);
+
+function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger> &
+  VariantProps<typeof navigationMenuTriggerStyle>): React.ReactElement {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      data-slot="navigation-menu-trigger"
+      className={cn(navigationMenuTriggerStyle(), 'group', className)}
+      {...props}
+    >
+      {children}{' '}
+      <MdExpandMore
+        className="relative top-px ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
+        aria-hidden="true"
+      />
+    </NavigationMenuPrimitive.Trigger>
+  );
+}
+
+function NavigationMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<
+  typeof NavigationMenuPrimitive.Content
+>): React.ReactElement {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot="navigation-menu-content"
+      className={cn(
+        'data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto',
+        'group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function NavigationMenuViewport({
+  className,
+  ...props
+}: React.ComponentProps<
+  typeof NavigationMenuPrimitive.Viewport
+>): React.ReactElement {
+  return (
+    <div
+      className={cn(
+        'absolute top-full left-0 isolate z-50 flex justify-center',
+      )}
+    >
+      <NavigationMenuPrimitive.Viewport
+        data-slot="navigation-menu-viewport"
+        className={cn(
+          'origin-top-center bg-popover text-popover-foreground data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]',
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function NavigationMenuLink({
+  className,
+  ...props
+}: React.ComponentProps<
+  typeof NavigationMenuPrimitive.Link
+>): React.ReactElement {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot="navigation-menu-link"
+      className={cn(
+        "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground data-[active=true]:hover:bg-accent data-[active=true]:focus:bg-accent [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm font-medium transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function NavigationMenuItemWithLink({
+  asChild,
+  children,
+  ...props
+}: React.ComponentProps<
+  typeof NavigationMenuPrimitive.Item
+>): React.ReactElement {
+  return (
+    <NavigationMenuItem asChild {...props}>
+      <NavigationMenuLink asChild={asChild}>{children}</NavigationMenuLink>
+    </NavigationMenuItem>
+  );
+}
+
+function NavigationMenuIndicator({
+  className,
+  ...props
+}: React.ComponentProps<
+  typeof NavigationMenuPrimitive.Indicator
+>): React.ReactElement {
+  return (
+    <NavigationMenuPrimitive.Indicator
+      data-slot="navigation-menu-indicator"
+      className={cn(
+        'data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden',
+        className,
+      )}
+      {...props}
+    >
+      <div className="bg-border relative top-[60%] size-2 rotate-45 rounded-tl-sm shadow-md" />
+    </NavigationMenuPrimitive.Indicator>
+  );
+}
+
+export {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuIndicator,
+  NavigationMenuItem,
+  NavigationMenuItemWithLink,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+  NavigationMenuViewport,
+};

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

@@ -0,0 +1,28 @@
+// @ts-nocheck
+
+import type React from 'react';
+
+import { useNavigate } from 'react-router-dom';
+
+import { Button } from '../button/button.js';
+import { ErrorDisplay } from '../error-display/error-display.js';
+
+export function NotFoundCard(): React.JSX.Element {
+  const navigate = useNavigate();
+  return (
+    <ErrorDisplay
+      className="flex-1"
+      header="Page not found"
+      error="Sorry, we were unable to find the page you were looking for."
+      actions={
+        <Button
+          onClick={() => {
+            navigate('/');
+          }}
+        >
+          Back to Home
+        </Button>
+      }
+    />
+  );
+}