crca 1.4.0__py3-none-any.whl

tools/bolt.diy/app/components/ui/Dialog.tsx

@@ -0,0 +1,449 @@
+import * as RadixDialog from '@radix-ui/react-dialog';
+import { motion, type Variants } from 'framer-motion';
+import React, { memo, type ReactNode, useState, useEffect } from 'react';
+import { classNames } from '~/utils/classNames';
+import { cubicEasingFn } from '~/utils/easings';
+import { IconButton } from './IconButton';
+import { Button } from './Button';
+import { FixedSizeList } from 'react-window';
+import { Checkbox } from './Checkbox';
+import { Label } from './Label';
+
+export { Close as DialogClose, Root as DialogRoot } from '@radix-ui/react-dialog';
+
+interface DialogButtonProps {
+  type: 'primary' | 'secondary' | 'danger';
+  children: ReactNode;
+  onClick?: (event: React.MouseEvent) => void;
+  disabled?: boolean;
+}
+
+export const DialogButton = memo(({ type, children, onClick, disabled }: DialogButtonProps) => {
+  return (
+    <button
+      className={classNames(
+        'inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm transition-colors',
+        type === 'primary'
+          ? 'bg-purple-500 text-white hover:bg-purple-600 dark:bg-purple-500 dark:hover:bg-purple-600'
+          : type === 'secondary'
+            ? 'bg-transparent text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100'
+            : 'bg-transparent text-red-500 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-500/10',
+      )}
+      onClick={onClick}
+      disabled={disabled}
+    >
+      {children}
+    </button>
+  );
+});
+
+export const DialogTitle = memo(({ className, children, ...props }: RadixDialog.DialogTitleProps) => {
+  return (
+    <RadixDialog.Title
+      className={classNames('text-lg font-medium text-bolt-elements-textPrimary flex items-center gap-2', className)}
+      {...props}
+    >
+      {children}
+    </RadixDialog.Title>
+  );
+});
+
+export const DialogDescription = memo(({ className, children, ...props }: RadixDialog.DialogDescriptionProps) => {
+  return (
+    <RadixDialog.Description
+      className={classNames('text-sm text-bolt-elements-textSecondary mt-1', className)}
+      {...props}
+    >
+      {children}
+    </RadixDialog.Description>
+  );
+});
+
+const transition = {
+  duration: 0.15,
+  ease: cubicEasingFn,
+};
+
+export const dialogBackdropVariants = {
+  closed: {
+    opacity: 0,
+    transition,
+  },
+  open: {
+    opacity: 1,
+    transition,
+  },
+} satisfies Variants;
+
+export const dialogVariants = {
+  closed: {
+    x: '-50%',
+    y: '-40%',
+    scale: 0.96,
+    opacity: 0,
+    transition,
+  },
+  open: {
+    x: '-50%',
+    y: '-50%',
+    scale: 1,
+    opacity: 1,
+    transition,
+  },
+} satisfies Variants;
+
+interface DialogProps {
+  children: ReactNode;
+  className?: string;
+  showCloseButton?: boolean;
+  onClose?: () => void;
+  onBackdrop?: () => void;
+}
+
+export const Dialog = memo(({ children, className, showCloseButton = true, onClose, onBackdrop }: DialogProps) => {
+  return (
+    <RadixDialog.Portal>
+      <RadixDialog.Overlay asChild>
+        <motion.div
+          className={classNames('fixed inset-0 z-[9999] bg-black/70 dark:bg-black/80 backdrop-blur-sm')}
+          initial="closed"
+          animate="open"
+          exit="closed"
+          variants={dialogBackdropVariants}
+          onClick={onBackdrop}
+        />
+      </RadixDialog.Overlay>
+      <RadixDialog.Content asChild>
+        <motion.div
+          className={classNames(
+            'fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white dark:bg-gray-950 rounded-lg shadow-xl border border-bolt-elements-borderColor z-[9999] w-[520px] focus:outline-none',
+            className,
+          )}
+          initial="closed"
+          animate="open"
+          exit="closed"
+          variants={dialogVariants}
+        >
+          <div className="flex flex-col">
+            {children}
+            {showCloseButton && (
+              <RadixDialog.Close asChild onClick={onClose}>
+                <IconButton
+                  icon="i-ph:x"
+                  className="absolute top-3 right-3 text-bolt-elements-textTertiary hover:text-bolt-elements-textSecondary"
+                />
+              </RadixDialog.Close>
+            )}
+          </div>
+        </motion.div>
+      </RadixDialog.Content>
+    </RadixDialog.Portal>
+  );
+});
+
+/**
+ * Props for the ConfirmationDialog component
+ */
+export interface ConfirmationDialogProps {
+  /**
+   * Whether the dialog is open
+   */
+  isOpen: boolean;
+
+  /**
+   * Callback when the dialog is closed
+   */
+  onClose: () => void;
+
+  /**
+   * Callback when the confirm button is clicked
+   */
+  onConfirm: () => void;
+
+  /**
+   * The title of the dialog
+   */
+  title: string;
+
+  /**
+   * The description of the dialog
+   */
+  description: string;
+
+  /**
+   * The text for the confirm button
+   */
+  confirmLabel?: string;
+
+  /**
+   * The text for the cancel button
+   */
+  cancelLabel?: string;
+
+  /**
+   * The variant of the confirm button
+   */
+  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
+
+  /**
+   * Whether the confirm button is in a loading state
+   */
+  isLoading?: boolean;
+}
+
+/**
+ * A reusable confirmation dialog component that uses the Dialog component
+ */
+export function ConfirmationDialog({
+  isOpen,
+  onClose,
+  title,
+  description,
+  confirmLabel = 'Confirm',
+  cancelLabel = 'Cancel',
+  variant = 'default',
+  isLoading = false,
+  onConfirm,
+}: ConfirmationDialogProps) {
+  return (
+    <RadixDialog.Root open={isOpen} onOpenChange={onClose}>
+      <Dialog showCloseButton={false}>
+        <div className="p-6 bg-white dark:bg-gray-950 relative z-10">
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription className="mb-4">{description}</DialogDescription>
+          <div className="flex justify-end space-x-2">
+            <Button variant="outline" onClick={onClose} disabled={isLoading}>
+              {cancelLabel}
+            </Button>
+            <Button
+              variant={variant}
+              onClick={onConfirm}
+              disabled={isLoading}
+              className={
+                variant === 'destructive'
+                  ? 'bg-red-500 text-white hover:bg-red-600'
+                  : 'bg-bolt-elements-item-backgroundAccent text-bolt-elements-item-contentAccent hover:bg-bolt-elements-button-primary-backgroundHover'
+              }
+            >
+              {isLoading ? (
+                <>
+                  <div className="i-ph-spinner-gap-bold animate-spin w-4 h-4 mr-2" />
+                  {confirmLabel}
+                </>
+              ) : (
+                confirmLabel
+              )}
+            </Button>
+          </div>
+        </div>
+      </Dialog>
+    </RadixDialog.Root>
+  );
+}
+
+/**
+ * Type for selection item in SelectionDialog
+ */
+type SelectionItem = {
+  id: string;
+  label: string;
+  description?: string;
+};
+
+/**
+ * Props for the SelectionDialog component
+ */
+export interface SelectionDialogProps {
+  /**
+   * The title of the dialog
+   */
+  title: string;
+
+  /**
+   * The items to select from
+   */
+  items: SelectionItem[];
+
+  /**
+   * Whether the dialog is open
+   */
+  isOpen: boolean;
+
+  /**
+   * Callback when the dialog is closed
+   */
+  onClose: () => void;
+
+  /**
+   * Callback when the confirm button is clicked with selected item IDs
+   */
+  onConfirm: (selectedIds: string[]) => void;
+
+  /**
+   * The text for the confirm button
+   */
+  confirmLabel?: string;
+
+  /**
+   * The maximum height of the selection list
+   */
+  maxHeight?: string;
+}
+
+/**
+ * A reusable selection dialog component that uses the Dialog component
+ */
+export function SelectionDialog({
+  title,
+  items,
+  isOpen,
+  onClose,
+  onConfirm,
+  confirmLabel = 'Confirm',
+  maxHeight = '60vh',
+}: SelectionDialogProps) {
+  const [selectedItems, setSelectedItems] = useState<string[]>([]);
+  const [selectAll, setSelectAll] = useState(false);
+
+  // Reset selected items when dialog opens
+  useEffect(() => {
+    if (isOpen) {
+      setSelectedItems([]);
+      setSelectAll(false);
+    }
+  }, [isOpen]);
+
+  const handleToggleItem = (id: string) => {
+    setSelectedItems((prev) => (prev.includes(id) ? prev.filter((itemId) => itemId !== id) : [...prev, id]));
+  };
+
+  const handleSelectAll = () => {
+    if (selectedItems.length === items.length) {
+      setSelectedItems([]);
+      setSelectAll(false);
+    } else {
+      setSelectedItems(items.map((item) => item.id));
+      setSelectAll(true);
+    }
+  };
+
+  const handleConfirm = () => {
+    onConfirm(selectedItems);
+    onClose();
+  };
+
+  // Calculate the height for the virtualized list
+  const listHeight = Math.min(
+    items.length * 60,
+    parseInt(maxHeight.replace('vh', '')) * window.innerHeight * 0.01 - 40,
+  );
+
+  // Render each item in the virtualized list
+  const ItemRenderer = ({ index, style }: { index: number; style: React.CSSProperties }) => {
+    const item = items[index];
+    return (
+      <div
+        key={item.id}
+        className={classNames(
+          'flex items-start space-x-3 p-2 rounded-md transition-colors',
+          selectedItems.includes(item.id)
+            ? 'bg-bolt-elements-item-backgroundAccent'
+            : 'bg-bolt-elements-bg-depth-2 hover:bg-bolt-elements-item-backgroundActive',
+        )}
+        style={{
+          ...style,
+          width: '100%',
+          boxSizing: 'border-box',
+        }}
+      >
+        <Checkbox
+          id={`item-${item.id}`}
+          checked={selectedItems.includes(item.id)}
+          onCheckedChange={() => handleToggleItem(item.id)}
+        />
+        <div className="grid gap-1.5 leading-none">
+          <Label
+            htmlFor={`item-${item.id}`}
+            className={classNames(
+              'text-sm font-medium cursor-pointer',
+              selectedItems.includes(item.id)
+                ? 'text-bolt-elements-item-contentAccent'
+                : 'text-bolt-elements-textPrimary',
+            )}
+          >
+            {item.label}
+          </Label>
+          {item.description && <p className="text-xs text-bolt-elements-textSecondary">{item.description}</p>}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <RadixDialog.Root open={isOpen} onOpenChange={onClose}>
+      <Dialog showCloseButton={false}>
+        <div className="p-6 bg-white dark:bg-gray-950 relative z-10">
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription className="mt-2 mb-4">
+            Select the items you want to include and click{' '}
+            <span className="text-bolt-elements-item-contentAccent font-medium">{confirmLabel}</span>.
+          </DialogDescription>
+
+          <div className="py-4">
+            <div className="flex items-center justify-between mb-4">
+              <span className="text-sm font-medium text-bolt-elements-textSecondary">
+                {selectedItems.length} of {items.length} selected
+              </span>
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={handleSelectAll}
+                className="text-xs h-8 px-2 text-bolt-elements-textPrimary hover:text-bolt-elements-item-contentAccent hover:bg-bolt-elements-item-backgroundAccent bg-bolt-elements-bg-depth-2 dark:bg-transparent"
+              >
+                {selectAll ? 'Deselect All' : 'Select All'}
+              </Button>
+            </div>
+
+            <div
+              className="pr-2 border rounded-md border-bolt-elements-borderColor bg-bolt-elements-bg-depth-2"
+              style={{
+                maxHeight,
+              }}
+            >
+              {items.length > 0 ? (
+                <FixedSizeList
+                  height={listHeight}
+                  width="100%"
+                  itemCount={items.length}
+                  itemSize={60}
+                  className="scrollbar-thin scrollbar-thumb-rounded scrollbar-thumb-bolt-elements-bg-depth-3"
+                >
+                  {ItemRenderer}
+                </FixedSizeList>
+              ) : (
+                <div className="text-center py-4 text-sm text-bolt-elements-textTertiary">No items to display</div>
+              )}
+            </div>
+          </div>
+
+          <div className="flex justify-between mt-6">
+            <Button
+              variant="outline"
+              onClick={onClose}
+              className="border-bolt-elements-borderColor text-bolt-elements-textPrimary hover:bg-bolt-elements-item-backgroundActive"
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={handleConfirm}
+              disabled={selectedItems.length === 0}
+              className="bg-accent-500 text-white hover:bg-accent-600 disabled:opacity-50 disabled:pointer-events-none"
+            >
+              {confirmLabel}
+            </Button>
+          </div>
+        </div>
+      </Dialog>
+    </RadixDialog.Root>
+  );
+}

tools/bolt.diy/app/components/ui/Dropdown.tsx

@@ -0,0 +1,63 @@
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import { type ReactNode } from 'react';
+import { classNames } from '~/utils/classNames';
+
+interface DropdownProps {
+  trigger: ReactNode;
+  children: ReactNode;
+  align?: 'start' | 'center' | 'end';
+  sideOffset?: number;
+}
+
+interface DropdownItemProps {
+  children: ReactNode;
+  onSelect?: () => void;
+  className?: string;
+}
+
+export const DropdownItem = ({ children, onSelect, className }: DropdownItemProps) => (
+  <DropdownMenu.Item
+    className={classNames(
+      'relative flex items-center gap-2 px-3 py-2 rounded-lg text-sm',
+      'text-bolt-elements-textPrimary hover:text-bolt-elements-textPrimary',
+      'hover:bg-bolt-elements-background-depth-3',
+      'transition-colors cursor-pointer',
+      'outline-none',
+      className,
+    )}
+    onSelect={onSelect}
+  >
+    {children}
+  </DropdownMenu.Item>
+);
+
+export const DropdownSeparator = () => <DropdownMenu.Separator className="h-px bg-bolt-elements-borderColor my-1" />;
+
+export const Dropdown = ({ trigger, children, align = 'end', sideOffset = 5 }: DropdownProps) => {
+  return (
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger asChild>{trigger}</DropdownMenu.Trigger>
+
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content
+          className={classNames(
+            'min-w-[220px] rounded-lg p-2',
+            'bg-bolt-elements-background-depth-2',
+            'border border-bolt-elements-borderColor',
+            'shadow-lg',
+            'animate-in fade-in-80 zoom-in-95',
+            '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',
+            'z-[1000]',
+          )}
+          sideOffset={sideOffset}
+          align={align}
+        >
+          {children}
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
+  );
+};

tools/bolt.diy/app/components/ui/EmptyState.tsx

@@ -0,0 +1,154 @@
+import React from 'react';
+import { classNames } from '~/utils/classNames';
+import { Button } from './Button';
+import { motion } from 'framer-motion';
+
+// Variant-specific styles
+const VARIANT_STYLES = {
+  default: {
+    container: 'py-8 p-6',
+    icon: {
+      container: 'w-12 h-12 mb-3',
+      size: 'w-6 h-6',
+    },
+    title: 'text-base',
+    description: 'text-sm mt-1',
+    actions: 'mt-4',
+    buttonSize: 'default' as const,
+  },
+  compact: {
+    container: 'py-4 p-4',
+    icon: {
+      container: 'w-10 h-10 mb-2',
+      size: 'w-5 h-5',
+    },
+    title: 'text-sm',
+    description: 'text-xs mt-0.5',
+    actions: 'mt-3',
+    buttonSize: 'sm' as const,
+  },
+};
+
+interface EmptyStateProps {
+  /** Icon class name */
+  icon?: string;
+
+  /** Title text */
+  title: string;
+
+  /** Optional description text */
+  description?: string;
+
+  /** Primary action button label */
+  actionLabel?: string;
+
+  /** Primary action button callback */
+  onAction?: () => void;
+
+  /** Secondary action button label */
+  secondaryActionLabel?: string;
+
+  /** Secondary action button callback */
+  onSecondaryAction?: () => void;
+
+  /** Additional class name */
+  className?: string;
+
+  /** Component size variant */
+  variant?: 'default' | 'compact';
+}
+
+/**
+ * EmptyState component
+ *
+ * A component for displaying empty states with optional actions.
+ */
+export function EmptyState({
+  icon = 'i-ph:folder-simple-dashed',
+  title,
+  description,
+  actionLabel,
+  onAction,
+  secondaryActionLabel,
+  onSecondaryAction,
+  className,
+  variant = 'default',
+}: EmptyStateProps) {
+  // Get styles based on variant
+  const styles = VARIANT_STYLES[variant];
+
+  // Animation variants for buttons
+  const buttonAnimation = {
+    whileHover: { scale: 1.02 },
+    whileTap: { scale: 0.98 },
+  };
+
+  return (
+    <div
+      className={classNames(
+        'flex flex-col items-center justify-center',
+        'text-bolt-elements-textSecondary dark:text-bolt-elements-textSecondary-dark',
+        'bg-bolt-elements-background-depth-2 dark:bg-bolt-elements-background-depth-3 rounded-lg',
+        styles.container,
+        className,
+      )}
+    >
+      {/* Icon */}
+      <div
+        className={classNames(
+          'rounded-full bg-bolt-elements-background-depth-3 dark:bg-bolt-elements-background-depth-4 flex items-center justify-center',
+          styles.icon.container,
+        )}
+      >
+        <span
+          className={classNames(
+            icon,
+            styles.icon.size,
+            'text-bolt-elements-textTertiary dark:text-bolt-elements-textTertiary-dark',
+          )}
+        />
+      </div>
+
+      {/* Title */}
+      <p className={classNames('font-medium', styles.title)}>{title}</p>
+
+      {/* Description */}
+      {description && (
+        <p
+          className={classNames(
+            'text-bolt-elements-textTertiary dark:text-bolt-elements-textTertiary-dark text-center max-w-xs',
+            styles.description,
+          )}
+        >
+          {description}
+        </p>
+      )}
+
+      {/* Action buttons */}
+      {(actionLabel || secondaryActionLabel) && (
+        <div className={classNames('flex items-center gap-2', styles.actions)}>
+          {actionLabel && onAction && (
+            <motion.div {...buttonAnimation}>
+              <Button
+                onClick={onAction}
+                variant="default"
+                size={styles.buttonSize}
+                className="bg-purple-500 hover:bg-purple-600 text-white"
+              >
+                {actionLabel}
+              </Button>
+            </motion.div>
+          )}
+
+          {secondaryActionLabel && onSecondaryAction && (
+            <motion.div {...buttonAnimation}>
+              <Button onClick={onSecondaryAction} variant="outline" size={styles.buttonSize}>
+                {secondaryActionLabel}
+              </Button>
+            </motion.div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}