@baseplate-dev/react-generators 0.1.3 → 0.2.0

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

@@ -0,0 +1,66 @@
+// @ts-nocheck
+
+'use client';
+
+import type * as React from 'react';
+
+import { Popover as PopoverPrimitive } from 'radix-ui';
+
+import { cn } from '../../utils/cn.js';
+
+/**
+ * Displays rich content in a portal, triggered by a button.
+ *
+ * https://ui.shadcn.com/docs/components/popover
+ */
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>): React.ReactElement {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>): React.ReactElement {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}
+
+interface PopoverContentProps
+  extends React.ComponentPropsWithRef<typeof PopoverPrimitive.Content> {
+  width?: 'default' | 'none';
+  padding?: 'default' | 'none';
+}
+function PopoverContent({
+  className,
+  align = 'center',
+  sideOffset = 4,
+  width = 'default',
+  padding = 'default',
+  ...props
+}: PopoverContentProps): React.ReactElement {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          'bg-popover text-popover-foreground 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 z-50 origin-(--radix-popover-content-transform-origin) rounded-md border shadow-md outline-hidden',
+          width === 'none' ? '' : 'w-72',
+          padding === 'none' ? 'p-0' : 'p-4',
+          className,
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  );
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>): React.ReactElement {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
+}
+
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };

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

@@ -0,0 +1,68 @@
+// @ts-nocheck
+
+'use client';
+
+import type * as React from 'react';
+
+import { ScrollArea as ScrollAreaPrimitive } from 'radix-ui';
+
+import { cn } from '../../utils/cn.js';
+
+/**
+ * Augments native scroll functionality for custom, cross-browser styling.
+ *
+ * https://ui.shadcn.com/docs/components/scroll-area
+ */
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>): React.ReactElement {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn('relative', className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  );
+}
+
+function ScrollBar({
+  className,
+  orientation = 'vertical',
+  ...props
+}: React.ComponentProps<
+  typeof ScrollAreaPrimitive.ScrollAreaScrollbar
+>): React.ReactElement {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        'flex touch-none p-px transition-colors select-none',
+        orientation === 'vertical' &&
+          'h-full w-2.5 border-l border-l-transparent',
+        orientation === 'horizontal' &&
+          'h-2.5 flex-col border-t border-t-transparent',
+        className,
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  );
+}
+
+export { ScrollArea, ScrollBar };

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

@@ -0,0 +1,183 @@
+// @ts-nocheck
+
+'use client';
+
+import type * as React from 'react';
+
+import {
+  ScrollArea as ScrollAreaPrimitive,
+  Select as SelectPrimitive,
+} from 'radix-ui';
+import { MdCheck, MdUnfoldMore } from 'react-icons/md';
+
+import {
+  selectCheckVariants,
+  selectContentVariants,
+  selectItemVariants,
+  selectTriggerVariants,
+} from '../../styles/select.js';
+import { cn } from '../../utils/cn.js';
+import { ScrollBar } from '../scroll-area/scroll-area.js';
+
+/**
+ * Select component
+ *
+ * - Adapted styles to make full width to match input styles
+ * - Added max height to the content
+ * - Use scroll area to make the content scrollable rather than buttons
+ *
+ * https://ui.shadcn.com/docs/components/select
+ */
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>): React.ReactElement {
+  return <SelectPrimitive.Root data-slot="select" {...props} />;
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>): React.ReactElement {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>): React.ReactElement {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
+}
+
+function SelectTrigger({
+  className,
+  size = 'default',
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
+  size?: 'sm' | 'default';
+}): React.ReactElement {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(selectTriggerVariants(), className)}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <MdUnfoldMore className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+}
+interface SelectContentProps
+  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> {
+  maxHeight?: string;
+}
+
+function SelectContent({
+  className,
+  children,
+  position = 'popper',
+  maxHeight = '320px',
+  ...props
+}: SelectContentProps): React.ReactElement {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          selectContentVariants({
+            popper: position === 'popper' ? 'active' : 'none',
+          }),
+          className,
+        )}
+        position={position}
+        {...props}
+      >
+        <ScrollAreaPrimitive.Root
+          type="auto"
+          className="relative overflow-hidden"
+        >
+          <SelectPrimitive.Viewport asChild>
+            <ScrollAreaPrimitive.Viewport
+              className={cn(
+                'h-full w-full rounded-[inherit] p-1',
+                position === 'popper'
+                  ? 'max-h-[min(var(--max-popper-height),var(--radix-select-content-available-height))] w-full min-w-(--radix-select-trigger-width)'
+                  : 'max-h-(--max-popper-height)',
+              )}
+              style={
+                {
+                  '--max-popper-height': maxHeight,
+                  // Resolves React warning: https://github.com/radix-ui/primitives/issues/2059
+                  overflowY: undefined,
+                } as Record<string, string | undefined>
+              }
+            >
+              {children}
+            </ScrollAreaPrimitive.Viewport>
+          </SelectPrimitive.Viewport>
+          <ScrollBar />
+          <ScrollAreaPrimitive.Corner />
+        </ScrollAreaPrimitive.Root>
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>): React.ReactElement {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
+      {...props}
+    />
+  );
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>): React.ReactElement {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(selectItemVariants({ withFocus: 'highlight' }), className)}
+      {...props}
+    >
+      <span className={selectCheckVariants()}>
+        <SelectPrimitive.ItemIndicator>
+          <MdCheck className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>): React.ReactElement {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};

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

@@ -0,0 +1,129 @@
+// @ts-nocheck
+
+'use client';
+
+import type { Control, FieldPath, FieldValues } from 'react-hook-form';
+
+import type {
+  AddOptionRequiredFields,
+  FormFieldProps,
+  SelectOptionProps,
+} from '../../types/form.js';
+
+import { useControllerMerged } from '../../hooks/use-controller-merged.js';
+import {
+  FormControl,
+  FormDescription,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '../form-item/form-item.js';
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../select/select.js';
+
+export interface SelectFieldProps<OptionType>
+  extends SelectOptionProps<OptionType>,
+    FormFieldProps {
+  className?: string;
+}
+
+// we have to use a sentinel value to detect null values since Radix Select doesn't support empty values
+// https://github.com/radix-ui/primitives/issues/2706
+const NULL_SENTINEL = '__NULL_VALUE__';
+
+function SelectField<OptionType>({
+  label,
+  description,
+  error,
+  value,
+  placeholder,
+  options,
+  renderItemLabel,
+  getOptionLabel = (val) => (val as { label: string }).label,
+  getOptionValue = (val) => (val as { value: string }).value,
+  className,
+  onChange,
+  ...props
+}: SelectFieldProps<OptionType> &
+  AddOptionRequiredFields<OptionType>): React.ReactElement {
+  const selectedOption = options.find((o) => getOptionValue(o) === value);
+
+  const selectedValue = (() => {
+    if (!selectedOption || value === undefined) return '';
+    return value ?? NULL_SENTINEL;
+  })();
+
+  return (
+    <FormItem error={error} className={className}>
+      <FormLabel>{label}</FormLabel>
+      <Select
+        value={selectedValue}
+        onValueChange={(val) => onChange?.(val === NULL_SENTINEL ? null : val)}
+        {...props}
+      >
+        <FormControl>
+          <SelectTrigger>
+            <SelectValue placeholder={placeholder}>
+              {selectedOption ? getOptionLabel(selectedOption) : null}
+            </SelectValue>
+          </SelectTrigger>
+        </FormControl>
+        <SelectContent>
+          <SelectGroup>
+            {options.map((option) => {
+              const val = getOptionValue(option);
+              const label = getOptionLabel(option);
+              return (
+                <SelectItem value={val ?? NULL_SENTINEL} key={val}>
+                  {renderItemLabel
+                    ? renderItemLabel(option, { selected: val === value })
+                    : label}
+                </SelectItem>
+              );
+            })}
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+      <FormDescription>{description}</FormDescription>
+      <FormMessage />
+    </FormItem>
+  );
+}
+
+interface SelectFieldControllerProps<
+  OptionType,
+  TFieldValues extends FieldValues = FieldValues,
+  TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> extends Omit<SelectFieldProps<OptionType>, 'value'> {
+  control: Control<TFieldValues>;
+  name: TFieldName;
+}
+
+function SelectFieldController<
+  OptionType,
+  TFieldValues extends FieldValues = FieldValues,
+  TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  name,
+  control,
+  ...rest
+}: SelectFieldControllerProps<OptionType, TFieldValues, TFieldName> &
+  AddOptionRequiredFields<OptionType>): React.ReactElement {
+  const {
+    field,
+    fieldState: { error },
+  } = useControllerMerged({ name, control }, rest);
+
+  const restProps = rest as SelectFieldProps<OptionType> &
+    AddOptionRequiredFields<OptionType>;
+
+  return <SelectField error={error?.message} {...restProps} {...field} />;
+}
+
+export { SelectField, SelectFieldController };

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

@@ -0,0 +1,71 @@
+// @ts-nocheck
+
+import type React from 'react';
+
+import { clsx } from 'clsx';
+
+import { cn } from '../../utils/cn.js';
+
+export interface SidebarLayoutProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+/**
+ * Displays a 2 column layout with a sidebar and content.
+ */
+function SidebarLayout({
+  className,
+  children,
+}: SidebarLayoutProps): React.ReactElement {
+  return <div className={clsx('flex h-full', className)}>{children}</div>;
+}
+
+interface SidebarLayoutSidebarProps {
+  className?: string;
+  children: React.ReactNode;
+  width?: 'sm' | 'md' | 'lg' | 'auto';
+  noPadding?: boolean;
+}
+
+function SidebarLayoutSidebar({
+  className,
+  children,
+  width = 'md',
+  noPadding,
+}: SidebarLayoutSidebarProps): React.ReactElement {
+  return (
+    <aside
+      className={cn(
+        'border-border sticky shrink-0 overflow-y-auto border-r',
+        {
+          'w-64': width === 'sm',
+          'w-72': width === 'md',
+          'w-96': width === 'lg',
+          'p-4': !noPadding,
+        },
+        className,
+      )}
+    >
+      {children}
+    </aside>
+  );
+}
+
+interface SidebarLayoutContentProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+function SidebarLayoutContent({
+  className,
+  children,
+}: SidebarLayoutContentProps): React.ReactElement {
+  return (
+    <div className={cn('w-full flex-auto overflow-y-auto', className)}>
+      {children}
+    </div>
+  );
+}
+
+export { SidebarLayout, SidebarLayoutContent, SidebarLayoutSidebar };

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

@@ -0,0 +1,37 @@
+// @ts-nocheck
+
+import type * as React from 'react';
+
+import { Switch as SwitchPrimitive } from 'radix-ui';
+
+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/switch
+ */
+function Switch({
+  className,
+  ...props
+}: React.ComponentProps<typeof SwitchPrimitive.Root>): React.ReactElement {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      className={cn(
+        'peer focus-visible:border-ring focus-visible:ring-ring/50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className={cn(
+          'bg-background dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0',
+        )}
+      />
+    </SwitchPrimitive.Root>
+  );
+}
+
+export { Switch };

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

@@ -0,0 +1,84 @@
+// @ts-nocheck
+
+'use client';
+
+import type React 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 {
+  FormControl,
+  FormDescription,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '../form-item/form-item.js';
+import { Switch } from '../switch/switch.js';
+
+export interface SwitchFieldProps
+  extends Omit<
+      React.ComponentPropsWithRef<typeof Switch>,
+      'onChange' | 'value' | 'onCheckedChange' | 'checked'
+    >,
+    FormFieldProps {
+  onChange?: (value: boolean) => void;
+  value?: boolean;
+}
+
+function SwitchField({
+  label,
+  description,
+  error,
+  onChange,
+  value,
+  className,
+  ...props
+}: SwitchFieldProps): React.ReactElement {
+  return (
+    <FormItem error={error} className={cn('space-y-2', className)}>
+      <div className="flex items-center gap-2">
+        <FormControl>
+          <Switch
+            onCheckedChange={(checked) => onChange?.(checked)}
+            checked={value}
+            {...props}
+          />
+        </FormControl>
+        <div className="space-y-0.5">
+          <FormLabel className="block">{label}</FormLabel>
+          <FormDescription>{description}</FormDescription>
+        </div>
+      </div>
+      <FormMessage />
+    </FormItem>
+  );
+}
+
+export interface SwitchFieldControllerProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> extends Omit<SwitchFieldProps, 'value'> {
+  control: Control<TFieldValues>;
+  name: TFieldName;
+}
+
+function SwitchFieldController<
+  TFieldValues extends FieldValues = FieldValues,
+  TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  control,
+  name,
+  ...rest
+}: SwitchFieldControllerProps<TFieldValues, TFieldName>): React.JSX.Element {
+  const {
+    field,
+    fieldState: { error },
+  } = useControllerMerged({ control, name }, rest, rest.ref);
+
+  return <SwitchField error={error?.message} {...rest} {...field} />;
+}
+
+export { SwitchField, SwitchFieldController };