@baseplate-dev/react-generators 0.3.1 → 0.3.3

package/dist/generators/core/react-components/templates/components/ui/multi-combobox.tsx

@@ -0,0 +1,333 @@
+// @ts-nocheck
+
+'use client';
+
+import { Badge } from '$badge';
+import { cn } from '$cn';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '$command';
+import { useControlledState } from '$hooksUseControlledState';
+import {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverTrigger,
+} from '$popover';
+import { inputVariants } from '$stylesInput';
+import { selectContentVariants, selectItemVariants } from '$stylesSelect';
+import React, { useId, useMemo, useState } from 'react';
+import { MdCheck, MdClose, MdUnfoldMore } from 'react-icons/md';
+
+interface MultiComboboxContextValue {
+  selectedValues: MultiComboboxOption[];
+  onSelect: (
+    value: string,
+    label: string | undefined,
+    selected: boolean,
+  ) => void;
+  disabled?: boolean;
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+  inputId: string;
+  filterId: string;
+  searchQuery: string;
+  setSearchQuery: (query: string) => void;
+}
+
+const MultiComboboxContext =
+  React.createContext<MultiComboboxContextValue | null>(null);
+
+interface MultiComboboxOption {
+  label?: string;
+  value: string;
+}
+
+interface MultiComboboxProps {
+  children?: React.ReactNode;
+  value?: MultiComboboxOption[];
+  onChange?: (value: MultiComboboxOption[]) => void;
+  disabled?: boolean;
+}
+
+function MultiCombobox({
+  children,
+  value,
+  onChange,
+  disabled,
+}: MultiComboboxProps): React.ReactElement {
+  const [selectedValues, setSelectedValues] = useControlledState(
+    value,
+    onChange,
+    [],
+  );
+  const [searchQuery, setSearchQuery] = useState('');
+  const [isOpen, setIsOpen] = useState(false);
+  const inputId = useId();
+  const filterId = useId();
+  const contextValue: MultiComboboxContextValue = useMemo(
+    () => ({
+      selectedValues,
+      onSelect: (value, label, selected) => {
+        setSearchQuery('');
+        if (selected) {
+          setSelectedValues([...selectedValues, { label, value }]);
+        } else {
+          setSelectedValues(selectedValues.filter((v) => v.value !== value));
+        }
+      },
+      disabled,
+      isOpen,
+      setIsOpen: (open) => {
+        setSearchQuery('');
+        setIsOpen(open);
+      },
+      inputId,
+      filterId,
+      searchQuery,
+      setSearchQuery,
+    }),
+    [
+      selectedValues,
+      setSelectedValues,
+      disabled,
+      isOpen,
+      inputId,
+      filterId,
+      searchQuery,
+      setSearchQuery,
+    ],
+  );
+
+  return (
+    <MultiComboboxContext.Provider value={contextValue}>
+      <Popover open={isOpen} onOpenChange={setIsOpen}>
+        {children}
+      </Popover>
+    </MultiComboboxContext.Provider>
+  );
+}
+
+export function useMultiComboboxContext(): MultiComboboxContextValue {
+  const value = React.useContext(MultiComboboxContext);
+
+  if (!value) {
+    throw new Error(
+      `useMultiComboboxContext must be used inside a MultiComboboxContext provider`,
+    );
+  }
+
+  return value;
+}
+
+interface MultiComboboxInputProps {
+  className?: string;
+  placeholder?: string;
+}
+
+function MultiComboboxInput({
+  className,
+  placeholder,
+}: MultiComboboxInputProps): React.ReactElement {
+  const {
+    selectedValues,
+    onSelect,
+    disabled,
+    setIsOpen,
+    isOpen,
+    inputId,
+    filterId,
+  } = useMultiComboboxContext();
+
+  const handleClick = (): void => {
+    if (disabled) return;
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <PopoverAnchor asChild>
+      <div
+        className={cn(
+          inputVariants({
+            height: 'flexible',
+          }),
+          'flex items-center gap-2',
+          disabled && 'opacity-50',
+          className,
+        )}
+        onClick={handleClick}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            handleClick();
+          }
+        }}
+        role="button"
+        tabIndex={0}
+        data-cmdk-input-id={inputId}
+      >
+        <div className="flex flex-1 flex-wrap items-center gap-1">
+          {selectedValues.length === 0 && (
+            <div className="text-muted-foreground">{placeholder}</div>
+          )}
+          {selectedValues.length > 0 && (
+            <>
+              {selectedValues.map((option) => (
+                <Badge
+                  variant="secondary"
+                  key={option.value}
+                  className="flex items-center gap-1 rounded-xs px-1 font-normal"
+                >
+                  <div>{option.label}</div>
+                  <button
+                    className="-mr-1 rounded-full p-0.5 hover:bg-secondary-hover"
+                    onKeyDown={(e) => {
+                      if (e.key === 'Enter') {
+                        onSelect(option.value, option.label, false);
+                        e.stopPropagation();
+                      }
+                    }}
+                    onClick={(e) => {
+                      onSelect(option.value, option.label, false);
+                      if (isOpen) {
+                        document
+                          .querySelector<HTMLInputElement>(
+                            `[data-cmdk-filter-id="${filterId}"]`,
+                          )
+                          ?.focus();
+                      }
+                      e.stopPropagation();
+                    }}
+                  >
+                    <MdClose />
+                  </button>
+                </Badge>
+              ))}
+            </>
+          )}
+        </div>
+        <PopoverTrigger>
+          <MdUnfoldMore className="size-4" />
+        </PopoverTrigger>
+      </div>
+    </PopoverAnchor>
+  );
+}
+
+interface MultiComboboxContentProps extends React.ComponentPropsWithRef<'div'> {
+  children?: React.ReactNode;
+  className?: string;
+  maxHeight?: string;
+  style?: React.CSSProperties;
+}
+
+function MultiComboboxContent({
+  children,
+  className,
+  maxHeight = '320px',
+  style,
+  ...rest
+}: MultiComboboxContentProps): React.ReactElement {
+  const { inputId, filterId, searchQuery, setSearchQuery } =
+    useMultiComboboxContext();
+
+  return (
+    <PopoverContent
+      align="start"
+      width="none"
+      padding="none"
+      sideOffset={0}
+      className={cn(selectContentVariants({ popper: 'active' }), className)}
+      style={
+        {
+          '--max-popover-height': maxHeight,
+          width: 'var(--radix-popover-trigger-width)',
+          ...style,
+        } as Record<string, string>
+      }
+      onInteractOutside={(e) => {
+        if (
+          e.target &&
+          e.target instanceof Element &&
+          e.target.closest(`[data-cmdk-input-id="${inputId}"]`)
+        ) {
+          e.preventDefault();
+        }
+      }}
+      {...rest}
+      data-combobox-content=""
+    >
+      <Command>
+        <CommandInput
+          data-cmdk-filter-id={filterId}
+          value={searchQuery}
+          onValueChange={setSearchQuery}
+        />
+        <CommandList>{children}</CommandList>
+      </Command>
+    </PopoverContent>
+  );
+}
+
+function MultiComboboxEmpty({
+  className,
+  ...props
+}: React.ComponentPropsWithRef<'div'>): React.ReactElement {
+  return <CommandEmpty className={cn('p-2 text-sm', className)} {...props} />;
+}
+
+const MultiComboboxGroup = CommandGroup;
+
+interface MultiComboboxItemProps
+  extends Omit<React.ComponentPropsWithRef<'div'>, 'onSelect'> {
+  disabled?: boolean;
+  value: string;
+  label?: string;
+}
+
+function MultiComboboxItem({
+  value,
+  className,
+  label,
+  children,
+  ...rest
+}: MultiComboboxItemProps): React.ReactElement {
+  const { selectedValues, onSelect } = useMultiComboboxContext();
+  const isSelected = selectedValues.some((v) => v.value === value);
+  const itemRef = React.useRef<HTMLDivElement>(null);
+
+  return (
+    <CommandItem
+      onSelect={() => {
+        const itemLabel = label ?? itemRef.current?.textContent ?? undefined;
+        onSelect(value, itemLabel, !isSelected);
+      }}
+      className={cn(selectItemVariants(), className)}
+      {...rest}
+      ref={itemRef}
+    >
+      <div
+        className={cn(
+          'mr-2 flex h-4 w-4 items-center justify-center rounded-xs border',
+          isSelected ? 'opacity-100' : '[&_svg]:invisible',
+        )}
+      >
+        <MdCheck className={'size-4'} />
+      </div>
+      {children}
+    </CommandItem>
+  );
+}
+
+export {
+  MultiCombobox,
+  MultiComboboxContent,
+  MultiComboboxEmpty,
+  MultiComboboxGroup,
+  MultiComboboxInput,
+  MultiComboboxItem,
+};

package/dist/generators/core/react-components/templates/components/ui/separator.tsx

@@ -0,0 +1,35 @@
+// @ts-nocheck
+
+'use client';
+
+import type * as React from 'react';
+
+import { cn } from '$cn';
+import { Separator as SeparatorPrimitive } from 'radix-ui';
+
+/**
+ * Visually or semantically separates content.
+ *
+ * https://ui.shadcn.com/docs/components/separator
+ */
+function Separator({
+  className,
+  orientation = 'horizontal',
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>): React.ReactElement {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator-root"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Separator };

package/dist/generators/core/react-components/templates/components/ui/sheet.tsx

@@ -0,0 +1,155 @@
+// @ts-nocheck
+
+'use client';
+
+import type * as React from 'react';
+import type { ReactElement } from 'react';
+
+import { cn } from '$cn';
+import { Dialog as SheetPrimitive } from 'radix-ui';
+import { MdClose } from 'react-icons/md';
+
+/**
+ * React component that overlays a sheet on top of the current page.
+ *
+ * https://ui.shadcn.com/docs/components/sheet
+ */
+function Sheet({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Root>): ReactElement {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>): ReactElement {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>): ReactElement {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>): ReactElement {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>): ReactElement {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        'fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function SheetContent({
+  className,
+  children,
+  side = 'right',
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: 'top' | 'right' | 'bottom' | 'left';
+}): ReactElement {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          'fixed z-50 flex flex-col gap-4 bg-background shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500',
+          side === 'right' &&
+            'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+          side === 'left' &&
+            'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+          side === 'top' &&
+            'inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+          side === 'bottom' &&
+            'inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <SheetPrimitive.Close className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary">
+          <MdClose className="size-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  );
+}
+
+function SheetHeader({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): ReactElement {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn('flex flex-col gap-1.5 p-4', className)}
+      {...props}
+    />
+  );
+}
+
+function SheetFooter({
+  className,
+  ...props
+}: React.ComponentProps<'div'>): ReactElement {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn('mt-auto flex flex-col gap-2 p-4', className)}
+      {...props}
+    />
+  );
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>): ReactElement {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn('font-semibold text-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>): ReactElement {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn('text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+};