@mdguggenbichler/slugbase-core 0.0.4 → 0.0.6

package/frontend/src/components/ui/Autocomplete.tsx

@@ -0,0 +1,155 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { X } from 'lucide-react';
+import { Popover, PopoverAnchor, PopoverContent } from './popover';
+import { Input } from './input';
+import { Badge } from './badge';
+import { ScrollArea } from './scroll-area';
+import { cn } from '@/lib/utils';
+
+interface AutocompleteOption {
+  id: string;
+  name: string;
+}
+
+interface AutocompleteProps {
+  value: AutocompleteOption[];
+  onChange: (value: AutocompleteOption[]) => void;
+  options: AutocompleteOption[];
+  placeholder?: string;
+  onCreateNew?: (name: string) => Promise<AutocompleteOption | null>;
+  className?: string;
+}
+
+export default function Autocomplete({
+  value,
+  onChange,
+  options,
+  placeholder = 'Type to search...',
+  onCreateNew,
+  className = '',
+}: AutocompleteProps) {
+  const [inputValue, setInputValue] = useState('');
+  const [open, setOpen] = useState(false);
+  const [filteredOptions, setFilteredOptions] = useState<AutocompleteOption[]>([]);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (inputValue.trim()) {
+      const filtered = options.filter(
+        (opt) =>
+          !value.find((v) => v.id === opt.id) &&
+          opt.name.toLowerCase().includes(inputValue.toLowerCase())
+      );
+      setFilteredOptions(filtered);
+      setOpen(
+        Boolean(
+          filtered.length > 0 ||
+            (onCreateNew !== undefined && inputValue.trim().length > 0)
+        )
+      );
+    } else {
+      setFilteredOptions([]);
+      setOpen(false);
+    }
+  }, [inputValue, options, value, onCreateNew]);
+
+  const handleSelect = (option: AutocompleteOption) => {
+    onChange([...value, option]);
+    setInputValue('');
+    setOpen(false);
+    inputRef.current?.focus();
+  };
+
+  const handleRemove = (id: string) => {
+    onChange(value.filter((v) => v.id !== id));
+  };
+
+  const handleCreateNew = async () => {
+    if (onCreateNew && inputValue.trim()) {
+      const newOption = await onCreateNew(inputValue.trim());
+      if (newOption) {
+        handleSelect(newOption);
+      }
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && open && filteredOptions.length > 0) {
+      e.preventDefault();
+      handleSelect(filteredOptions[0]);
+    } else if (e.key === 'Enter' && onCreateNew && inputValue.trim()) {
+      e.preventDefault();
+      handleCreateNew();
+    } else if (e.key === 'Escape') {
+      setOpen(false);
+    }
+  };
+
+  return (
+    <div className={cn('relative', className)}>
+      {value.length > 0 && (
+        <div className="mb-2 flex flex-wrap gap-2">
+          {value.map((item) => (
+            <Badge
+              key={item.id}
+              variant="secondary"
+              className="pr-1 gap-1.5"
+            >
+              {item.name}
+              <button
+                type="button"
+                onClick={() => handleRemove(item.id)}
+                className="rounded-full hover:bg-secondary/80 p-0.5 transition-colors"
+              >
+                <X className="h-3.5 w-3.5" />
+              </button>
+            </Badge>
+          ))}
+        </div>
+      )}
+
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverAnchor asChild>
+          <Input
+            ref={inputRef}
+            type="text"
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+            onFocus={() => inputValue.trim() && setOpen(true)}
+            onKeyDown={handleKeyDown}
+            placeholder={placeholder}
+            className="w-full"
+          />
+        </PopoverAnchor>
+        <PopoverContent className="w-[var(--radix-popover-anchor-width)] p-0" align="start">
+          <ScrollArea className="max-h-60">
+            {filteredOptions.length === 0 && onCreateNew && inputValue.trim() ? (
+              <button
+                type="button"
+                onClick={handleCreateNew}
+                className="w-full text-left px-3 py-2 text-sm text-primary hover:bg-accent hover:text-accent-foreground"
+              >
+                Create &quot;{inputValue.trim()}&quot;
+              </button>
+            ) : filteredOptions.length === 0 ? (
+              <div className="px-3 py-2 text-sm text-muted-foreground">
+                No options found
+              </div>
+            ) : (
+              filteredOptions.map((option) => (
+                <button
+                  key={option.id}
+                  type="button"
+                  onClick={() => handleSelect(option)}
+                  className="w-full text-left px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground"
+                >
+                  {option.name}
+                </button>
+              ))
+            )}
+          </ScrollArea>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}

package/frontend/src/components/ui/Button.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { LucideIcon, Loader2 } from 'lucide-react';
+import { Button as ShadcnButton, buttonVariants } from './button-base';
+import { cn } from '@/lib/utils';
+
+const variantMap = {
+  primary: 'default',
+  secondary: 'secondary',
+  danger: 'destructive',
+  ghost: 'ghost',
+  outline: 'outline',
+} as const;
+
+const sizeMap = {
+  sm: 'sm',
+  md: 'default',
+  lg: 'lg',
+} as const;
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'primary' | 'secondary' | 'danger' | 'ghost' | 'outline';
+  size?: 'sm' | 'md' | 'lg';
+  icon?: LucideIcon;
+  iconPosition?: 'left' | 'right';
+  iconClassName?: string;
+  loading?: boolean;
+  children?: React.ReactNode;
+}
+
+const defaultIconClass = 'h-4 w-4';
+
+export default function Button({
+  variant = 'primary',
+  size = 'md',
+  icon: Icon,
+  iconPosition = 'left',
+  iconClassName = defaultIconClass,
+  loading = false,
+  children,
+  className = '',
+  disabled,
+  ...props
+}: ButtonProps) {
+  const iconClass = iconClassName || defaultIconClass;
+  const content = loading ? (
+    <Loader2 className="h-4 w-4 animate-spin" />
+  ) : (
+    <>
+      {Icon && iconPosition === 'left' && <Icon className={iconClass} />}
+      {children && <span>{children}</span>}
+      {Icon && iconPosition === 'right' && <Icon className={iconClass} />}
+    </>
+  );
+
+  return (
+    <ShadcnButton
+      className={cn(className)}
+      variant={variantMap[variant]}
+      size={sizeMap[size]}
+      disabled={disabled ?? loading}
+      {...props}
+    >
+      {content}
+    </ShadcnButton>
+  );
+}
+
+export { buttonVariants };

package/frontend/src/components/ui/ConfirmDialog.tsx

@@ -0,0 +1,79 @@
+import { AlertTriangle } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from './alert-dialog';
+
+interface ConfirmDialogProps {
+  isOpen: boolean;
+  title: string;
+  message: string;
+  itemName?: string;
+  confirmText?: string;
+  cancelText?: string;
+  variant?: 'danger' | 'warning' | 'default';
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+const variantBorderClasses = {
+  danger: 'border-destructive/50',
+  warning: 'border-yellow-500/50',
+  default: 'border-border',
+};
+
+export default function ConfirmDialog({
+  isOpen,
+  title,
+  message,
+  itemName,
+  confirmText,
+  cancelText,
+  variant = 'default',
+  onConfirm,
+  onCancel,
+}: ConfirmDialogProps) {
+  const { t } = useTranslation();
+
+  const description = itemName
+    ? `${message} "${itemName}"`
+    : message;
+
+  return (
+    <AlertDialog open={isOpen} onOpenChange={(open) => !open && onCancel()}>
+      <AlertDialogContent className={`max-w-sm ${variantBorderClasses[variant]}`}>
+        <AlertDialogHeader>
+          <div className="flex items-start gap-4">
+            <div className="flex-shrink-0 text-destructive">
+              <AlertTriangle className="h-6 w-6" />
+            </div>
+            <div className="flex-1 min-w-0">
+              <AlertDialogTitle>{title}</AlertDialogTitle>
+              <AlertDialogDescription className="mt-2">
+                {description}
+              </AlertDialogDescription>
+            </div>
+          </div>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel onClick={onCancel}>
+            {cancelText || t('common.cancel')}
+          </AlertDialogCancel>
+          <AlertDialogAction
+            onClick={onConfirm}
+            className={variant === 'danger' ? 'bg-destructive text-destructive-foreground hover:bg-destructive/90' : ''}
+          >
+            {confirmText || t('common.confirm')}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

package/frontend/src/components/ui/FormFieldWrapper.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { Label } from './label';
+import { cn } from '@/lib/utils';
+
+interface FormFieldWrapperProps {
+  label: string;
+  error?: string;
+  required?: boolean;
+  htmlFor?: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function FormFieldWrapper({
+  label,
+  error,
+  required,
+  htmlFor,
+  children,
+  className,
+}: FormFieldWrapperProps) {
+  return (
+    <div className={cn('space-y-2', className)}>
+      <Label htmlFor={htmlFor} className="text-sm font-medium">
+        {label}
+        {required && <span className="text-destructive ml-0.5">*</span>}
+      </Label>
+      {children}
+      {error && (
+        <p className="text-sm text-destructive" role="alert">
+          {error}
+        </p>
+      )}
+    </div>
+  );
+}

package/frontend/src/components/ui/ModalFooterActions.tsx

@@ -0,0 +1,49 @@
+import { useTranslation } from 'react-i18next';
+import Button from './Button';
+import { cn } from '@/lib/utils';
+
+interface ModalFooterActionsProps {
+  onCancel: () => void;
+  cancelLabel?: string;
+  submitLabel: string;
+  loading?: boolean;
+  submitDisabled?: boolean;
+  submitVariant?: 'primary' | 'danger';
+  formId?: string;
+  className?: string;
+}
+
+export function ModalFooterActions({
+  onCancel,
+  cancelLabel,
+  submitLabel,
+  loading = false,
+  submitDisabled = false,
+  submitVariant = 'primary',
+  formId,
+  className,
+}: ModalFooterActionsProps) {
+  const { t } = useTranslation();
+
+  return (
+    <div
+      className={cn(
+        'flex flex-row justify-between gap-2 sm:justify-end',
+        className
+      )}
+    >
+      <Button variant="secondary" onClick={onCancel} type="button">
+        {cancelLabel ?? t('common.cancel')}
+      </Button>
+      <Button
+        variant={submitVariant}
+        loading={loading}
+        disabled={submitDisabled || loading}
+        type="submit"
+        form={formId}
+      >
+        {submitLabel}
+      </Button>
+    </div>
+  );
+}

package/frontend/src/components/ui/ModalSection.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+interface ModalSectionProps {
+  title?: string;
+  description?: string;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function ModalSection({
+  title,
+  description,
+  children,
+  className,
+}: ModalSectionProps) {
+  return (
+    <div className={cn('space-y-3', className)}>
+      {(title || description) && (
+        <div>
+          {title && (
+            <h4 className="text-sm font-semibold leading-none tracking-tight">
+              {title}
+            </h4>
+          )}
+          {description && (
+            <p className="mt-1 text-xs text-muted-foreground">{description}</p>
+          )}
+        </div>
+      )}
+      {children}
+    </div>
+  );
+}

package/frontend/src/components/ui/PageLoadingSkeleton.tsx

@@ -0,0 +1,24 @@
+import { Skeleton } from './skeleton';
+
+interface PageLoadingSkeletonProps {
+  /** Number of content blocks to show (default: 4) */
+  lines?: number;
+}
+
+export function PageLoadingSkeleton({ lines = 4 }: PageLoadingSkeletonProps) {
+  return (
+    <div className="space-y-6">
+      <div className="space-y-2">
+        <Skeleton className="h-8 w-48" />
+        <Skeleton className="h-4 w-96" />
+      </div>
+      <div className=" rounded-lg border bg-card p-6">
+        <div className="space-y-4">
+          {Array.from({ length: lines }).map((_, i) => (
+            <Skeleton key={i} className="h-12 w-full" />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/frontend/src/components/ui/Select.tsx

@@ -0,0 +1,61 @@
+import FolderIcon from '../FolderIcon';
+import {
+  Select as ShadcnSelect,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from './select-base';
+
+interface SelectOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+  icon?: string | null;
+}
+
+interface SelectProps {
+  value: string;
+  onChange: (value: string) => void;
+  options: SelectOption[];
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+export default function Select({
+  value,
+  onChange,
+  options,
+  placeholder = 'Select...',
+  disabled = false,
+  className = '',
+}: SelectProps) {
+  return (
+    <ShadcnSelect value={value} onValueChange={onChange} disabled={disabled}>
+      <SelectTrigger className={className}>
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent>
+        {options.length === 0 ? (
+          <div className="px-2 py-1.5 text-sm text-muted-foreground">No options</div>
+        ) : (
+          options.map((option) => (
+            <SelectItem
+              key={option.value}
+              value={option.value}
+              disabled={option.disabled}
+            >
+              <span className="flex items-center gap-2">
+                {option.icon != null && (
+                  <FolderIcon iconName={option.icon} size={16} className="text-muted-foreground" />
+                )}
+                {option.label}
+              </span>
+            </SelectItem>
+          ))
+        )}
+      </SelectContent>
+    </ShadcnSelect>
+  );
+}