@ackplus/nest-auth 1.1.0 → 1.1.2

package/ui/src/components/PanelHeader.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-import { Button } from './Button';
-
-interface PanelHeaderProps {
-    title: string;
-    description: string;
-    onRefresh: () => void;
-    loading?: boolean;
-}
-
-export const PanelHeader: React.FC<PanelHeaderProps> = ({
-    title,
-    description,
-    onRefresh,
-    loading = false,
-}) => {
-    return (
-        <div className="panel-header">
-            <div>
-                <h2>{title}</h2>
-                <p className="muted">{description}</p>
-            </div>
-            <Button variant="secondary" onClick={onRefresh} disabled={loading}>
-                {loading ? 'Refreshing…' : 'Refresh'}
-            </Button>
-        </div>
-    );
-};

package/ui/src/components/PermissionInput.tsx

@@ -1,473 +0,0 @@
-import React, { useState, useRef, useEffect, useCallback } from 'react';
-import { Plus, X, Search, Trash2 } from 'lucide-react';
-import { api } from '../services/api';
-
-export interface PermissionInputProps {
-    label?: string;
-    value: string[];
-    onChange: (permissions: string[]) => void;
-    placeholder?: string;
-    helperText?: string;
-    error?: string;
-    guard?: string;
-}
-
-interface PermissionSuggestion {
-    id: string;
-    name: string;
-    description?: string;
-    category?: string;
-}
-
-export const PermissionInput: React.FC<PermissionInputProps> = ({
-    label,
-    value = [],
-    onChange,
-    placeholder = 'Type to search or paste multiple (comma/newline separated)...',
-    helperText,
-    error,
-    guard,
-}) => {
-    const [inputValue, setInputValue] = useState('');
-    const [suggestions, setSuggestions] = useState<PermissionSuggestion[]>([]);
-    const [showSuggestions, setShowSuggestions] = useState(false);
-    const [isLoadingSuggestions, setIsLoadingSuggestions] = useState(false);
-    const [highlightedIndex, setHighlightedIndex] = useState(-1);
-    const inputRef = useRef<HTMLInputElement>(null);
-    const suggestionsRef = useRef<HTMLDivElement>(null);
-    const searchTimeoutRef = useRef<NodeJS.Timeout>();
-    const [listSearchQuery, setListSearchQuery] = useState('');
-    const [selectedPermissions, setSelectedPermissions] = useState<Set<string>>(new Set());
-    const [previewPermissions, setPreviewPermissions] = useState<string[]>([]);
-
-    // Fetch permission suggestions from API
-    const fetchSuggestions = useCallback(async (query: string) => {
-        if (!query.trim() || query.trim().length < 1) {
-            setSuggestions([]);
-            setShowSuggestions(false);
-            return;
-        }
-
-        setIsLoadingSuggestions(true);
-        try {
-            const params = new URLSearchParams({
-                q: query.trim(),
-                limit: '8',
-            });
-            if (guard) {
-                params.append('guard', guard);
-            }
-            const response = await api.get<{ data: PermissionSuggestion[] }>(
-                `/api/permissions/search?${params.toString()}`
-            );
-            const filtered = (response.data || []).filter(
-                (suggestion) => !value.includes(suggestion.name)
-            );
-            setSuggestions(filtered);
-            setShowSuggestions(filtered.length > 0 || query.trim().length > 0);
-            setHighlightedIndex(-1);
-        } catch (error) {
-            console.error('Failed to fetch permission suggestions:', error);
-            setSuggestions([]);
-            setShowSuggestions(false);
-        } finally {
-            setIsLoadingSuggestions(false);
-        }
-    }, [value, guard]);
-
-    // Debounced search
-    useEffect(() => {
-        if (searchTimeoutRef.current) {
-            clearTimeout(searchTimeoutRef.current);
-        }
-
-        searchTimeoutRef.current = setTimeout(() => {
-            fetchSuggestions(inputValue);
-        }, 300);
-
-        return () => {
-            if (searchTimeoutRef.current) {
-                clearTimeout(searchTimeoutRef.current);
-            }
-        };
-    }, [inputValue, fetchSuggestions]);
-
-    // Close suggestions when clicking outside
-    useEffect(() => {
-        const handleClickOutside = (event: MouseEvent) => {
-            if (
-                suggestionsRef.current &&
-                !suggestionsRef.current.contains(event.target as Node) &&
-                inputRef.current &&
-                !inputRef.current.contains(event.target as Node)
-            ) {
-                setShowSuggestions(false);
-            }
-        };
-
-        document.addEventListener('mousedown', handleClickOutside);
-        return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, []);
-
-    const handleAdd = (perm: string) => {
-        const trimmed = perm.trim();
-        if (trimmed && !value.includes(trimmed)) {
-            onChange([...value, trimmed]);
-        }
-        setInputValue('');
-        setShowSuggestions(false);
-        setSuggestions([]);
-        setHighlightedIndex(-1);
-        inputRef.current?.focus();
-    };
-
-    const parsePermissionsFromInput = (text: string): string[] => {
-        // Parse text: split by newlines, commas, tabs, or multiple spaces, then trim and filter
-        const permissions = text
-            .split(/[,\n\r\t]+| {2,}/) // Split by comma, newline, tab, or multiple spaces
-            .map(p => p.trim())
-            .filter(p => p && p.length > 0 && !value.includes(p));
-        return permissions;
-    };
-
-    const handleBulkAdd = (text: string) => {
-        const permissions = parsePermissionsFromInput(text);
-        if (permissions.length > 0) {
-            onChange([...value, ...permissions]);
-            setInputValue('');
-            setPreviewPermissions([]);
-            setShowSuggestions(false);
-            setSuggestions([]);
-            setHighlightedIndex(-1);
-            inputRef.current?.focus();
-        }
-    };
-
-    const handleAddClick = () => {
-        if (previewPermissions.length > 0) {
-            // Add all preview permissions
-            const newPermissions = previewPermissions.filter(p => !value.includes(p));
-            if (newPermissions.length > 0) {
-                onChange([...value, ...newPermissions]);
-            }
-            setInputValue('');
-            setPreviewPermissions([]);
-            setShowSuggestions(false);
-            setSuggestions([]);
-            setHighlightedIndex(-1);
-            inputRef.current?.focus();
-        } else if (inputValue.trim()) {
-            // Single permission
-            handleAdd(inputValue);
-        }
-    };
-
-    const handleRemovePreview = (perm: string) => {
-        const updated = previewPermissions.filter(p => p !== perm);
-        setPreviewPermissions(updated);
-        // Reconstruct input value from remaining preview permissions
-        setInputValue(updated.join(', '));
-    };
-
-    // Update preview permissions when input changes
-    useEffect(() => {
-        if (inputValue.trim()) {
-            const parsed = parsePermissionsFromInput(inputValue);
-            setPreviewPermissions(parsed);
-        } else {
-            setPreviewPermissions([]);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [inputValue]);
-
-    const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
-        const pastedText = e.clipboardData.getData('text');
-        // Let the input handle it normally - it will be parsed and shown as preview chips
-        // User can then click + to add them all
-    };
-
-    const handleSuggestionClick = (suggestion: PermissionSuggestion) => {
-        handleAdd(suggestion.name);
-    };
-
-    const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-        if (e.key === 'Enter') {
-            e.preventDefault();
-            if (highlightedIndex >= 0 && suggestions[highlightedIndex]) {
-                handleSuggestionClick(suggestions[highlightedIndex]);
-            } else if (showSuggestions && suggestions.length > 0) {
-                handleSuggestionClick(suggestions[0]);
-            } else if (previewPermissions.length > 0) {
-                // Add all preview permissions
-                handleAddClick();
-            } else if (inputValue.trim()) {
-                // Single permission
-                handleAdd(inputValue);
-            }
-        } else if (e.key === 'ArrowDown') {
-            e.preventDefault();
-            if (showSuggestions && suggestions.length > 0) {
-                setHighlightedIndex((prev) =>
-                    prev < suggestions.length - 1 ? prev + 1 : prev
-                );
-            }
-        } else if (e.key === 'ArrowUp') {
-            e.preventDefault();
-            setHighlightedIndex((prev) => (prev > 0 ? prev - 1 : -1));
-        } else if (e.key === 'Escape') {
-            setShowSuggestions(false);
-            setHighlightedIndex(-1);
-        } else if (e.key === ',') {
-            e.preventDefault();
-            if (inputValue.trim()) {
-                handleAdd(inputValue);
-            }
-        }
-    };
-
-    const handleRemove = (perm: string) => {
-        onChange(value.filter((p) => p !== perm));
-    };
-
-    const handleToggleSelect = (perm: string) => {
-        setSelectedPermissions(prev => {
-            const newSet = new Set(prev);
-            if (newSet.has(perm)) {
-                newSet.delete(perm);
-            } else {
-                newSet.add(perm);
-            }
-            return newSet;
-        });
-    };
-
-    const handleSelectAll = () => {
-        const filteredPerms = getFilteredPermissions();
-        setSelectedPermissions(new Set(filteredPerms));
-    };
-
-    const handleDeselectAll = () => {
-        setSelectedPermissions(new Set());
-    };
-
-    const handleBulkDelete = () => {
-        onChange(value.filter(perm => !selectedPermissions.has(perm)));
-        setSelectedPermissions(new Set());
-    };
-
-    const getFilteredPermissions = () => {
-        if (!listSearchQuery.trim()) {
-            return value;
-        }
-        const query = listSearchQuery.toLowerCase();
-        return value.filter(perm => perm.toLowerCase().includes(query));
-    };
-
-    return (
-        <div className="w-full">
-            {label && (
-                <label className="block text-sm font-medium text-gray-700 mb-1.5">
-                    {label}
-                </label>
-            )}
-
-            {/* Input with Autocomplete */}
-            <div className="relative">
-                <div className={`input-field pl-2 pr-9 py-1.5 flex flex-wrap gap-1.5 items-center min-h-[42px] ${error ? 'border-red-300' : ''}`}>
-                    <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 z-10" />
-
-                    {/* Preview Permission Chips */}
-                    {previewPermissions.map((perm) => (
-                        <span
-                            key={perm}
-                            className="badge-info flex items-center gap-1 px-2 py-0.5 text-sm"
-                        >
-                            <span className="font-mono">{perm}</span>
-                            <button
-                                type="button"
-                                onClick={() => handleRemovePreview(perm)}
-                                className="hover:text-blue-900 focus:outline-none"
-                                title="Remove from preview"
-                            >
-                                <X className="w-3 h-3" />
-                            </button>
-                        </span>
-                    ))}
-
-                    {/* Input Field */}
-                    <div className="relative flex-1 min-w-[200px] flex items-center">
-                        <input
-                            ref={inputRef}
-                            type="text"
-                            value={inputValue}
-                            onChange={(e) => {
-                                setInputValue(e.target.value);
-                                if (e.target.value.trim().length > 0) {
-                                    setShowSuggestions(true);
-                                }
-                            }}
-                            onKeyDown={handleKeyDown}
-                            onPaste={handlePaste}
-                            onFocus={() => {
-                                if (inputValue.trim().length > 0) {
-                                    setShowSuggestions(true);
-                                }
-                            }}
-                            placeholder={previewPermissions.length === 0 ? placeholder : ''}
-                            className="flex-1 outline-none border-none focus:ring-0 p-0 pl-6 min-w-0"
-                        />
-                    </div>
-
-                    {/* Add Button */}
-                    {previewPermissions.length > 0 && (
-                        <button
-                            type="button"
-                            onClick={handleAddClick}
-                            className="absolute right-2 top-1/2 -translate-y-1/2 text-primary-600 hover:text-primary-700 focus:outline-none transition-colors z-10"
-                            title={`Add ${previewPermissions.length} permission${previewPermissions.length !== 1 ? 's' : ''}`}
-                        >
-                            <Plus className="w-5 h-5" />
-                        </button>
-                    )}
-                </div>
-
-                {/* Autocomplete Dropdown */}
-                {showSuggestions && (inputValue.trim().length > 0 || suggestions.length > 0) && (
-                    <div
-                        ref={suggestionsRef}
-                        className="absolute z-50 w-full mt-1 bg-white border border-gray-200 rounded-lg shadow-lg max-h-[240px] overflow-y-auto top-full"
-                    >
-                        {isLoadingSuggestions ? (
-                            <div className="p-3 text-center text-xs text-gray-500">
-                                Searching...
-                            </div>
-                        ) : suggestions.length > 0 ? (
-                            suggestions.map((suggestion, index) => (
-                                <button
-                                    key={suggestion.id}
-                                    type="button"
-                                    onClick={() => handleSuggestionClick(suggestion)}
-                                    className={`w-full text-left p-2.5 hover:bg-blue-50 transition-colors border-b border-gray-100 last:border-b-0 ${highlightedIndex === index ? 'bg-blue-50' : ''
-                                        }`}
-                                >
-                                    <div className="font-medium text-sm text-gray-900">{suggestion.name}</div>
-                                    {suggestion.description && (
-                                        <div className="text-xs text-gray-500 mt-0.5 line-clamp-1">
-                                            {suggestion.description}
-                                        </div>
-                                    )}
-                                    {suggestion.category && (
-                                        <span className="inline-block mt-1 px-1.5 py-0.5 text-xs bg-blue-100 text-blue-700 rounded">
-                                            {suggestion.category}
-                                        </span>
-                                    )}
-                                </button>
-                            ))
-                        ) : inputValue.trim() ? (
-                            <div className="p-3 text-xs text-gray-500 text-center">
-                                Press <kbd className="px-1 py-0.5 bg-gray-100 rounded text-xs">Enter</kbd> or click <Plus className="w-3 h-3 inline" /> to add &quot;{inputValue.trim()}&quot;
-                            </div>
-                        ) : null}
-                    </div>
-                )}
-            </div>
-
-            {/* Permissions List */}
-            {value.length > 0 && (
-                <div className="mt-3">
-                    <div className="border border-gray-200 rounded-lg divide-y divide-gray-200">
-                        <div className="px-3 py-2 bg-gray-50 border-b border-gray-200 rounded-t-lg space-y-2">
-                            <div className="flex items-center justify-between">
-                                <span className="text-sm font-medium text-gray-700">
-                                    {value.length} permission{value.length !== 1 ? 's' : ''} added
-                                </span>
-                                {selectedPermissions.size > 0 && (
-                                    <button
-                                        type="button"
-                                        onClick={handleBulkDelete}
-                                        className="flex items-center gap-1 text-xs text-red-600 hover:text-red-700 transition-colors"
-                                    >
-                                        <Trash2 className="w-3.5 h-3.5" />
-                                        Delete ({selectedPermissions.size})
-                                    </button>
-                                )}
-                            </div>
-
-                            {/* Search Box */}
-                            <div className="relative">
-                                <Search className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-gray-400" />
-                                <input
-                                    type="text"
-                                    value={listSearchQuery}
-                                    onChange={(e) => setListSearchQuery(e.target.value)}
-                                    placeholder="Search permissions..."
-                                    className="input-field text-xs pl-7 pr-2 py-1.5 w-full"
-                                />
-                            </div>
-
-                            {/* Bulk Actions */}
-                            <div className="flex items-center gap-2">
-                                <button
-                                    type="button"
-                                    onClick={handleSelectAll}
-                                    className="text-xs text-primary-600 hover:text-primary-700 transition-colors"
-                                >
-                                    Select All
-                                </button>
-                                <span className="text-xs text-gray-400">|</span>
-                                <button
-                                    type="button"
-                                    onClick={handleDeselectAll}
-                                    className="text-xs text-primary-600 hover:text-primary-700 transition-colors"
-                                >
-                                    Deselect All
-                                </button>
-                            </div>
-                        </div>
-                        <div className="max-h-[200px] overflow-y-auto">
-                            {getFilteredPermissions().length > 0 ? (
-                                getFilteredPermissions().map((perm) => {
-                                    const isSelected = selectedPermissions.has(perm);
-                                    return (
-                                        <div
-                                            key={perm}
-                                            className="px-3 py-2 flex items-center gap-2 hover:bg-gray-50 transition-colors"
-                                        >
-                                            <input
-                                                type="checkbox"
-                                                checked={isSelected}
-                                                onChange={() => handleToggleSelect(perm)}
-                                                className="w-4 h-4 text-primary-600 rounded focus:ring-2 focus:ring-primary-500 cursor-pointer"
-                                            />
-                                            <span className="flex-1 text-sm text-gray-900 font-mono break-words">{perm}</span>
-                                            <button
-                                                type="button"
-                                                onClick={() => handleRemove(perm)}
-                                                className="flex-shrink-0 text-gray-400 hover:text-red-600 focus:outline-none transition-colors"
-                                                title="Remove permission"
-                                            >
-                                                <X className="w-4 h-4" />
-                                            </button>
-                                        </div>
-                                    );
-                                })
-                            ) : (
-                                <div className="p-4 text-center text-xs text-gray-500">
-                                    No permissions match &quot;{listSearchQuery}&quot;
-                                </div>
-                            )}
-                        </div>
-                    </div>
-                </div>
-            )}
-
-            {/* Helper Text / Error */}
-            {helperText && !error && (
-                <p className="mt-1.5 text-xs text-gray-500">{helperText}</p>
-            )}
-            {error && <p className="mt-1.5 text-xs text-red-600">{error}</p>}
-        </div>
-    );
-};

package/ui/src/components/SearchInput.tsx

@@ -1,69 +0,0 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { Search, X } from 'lucide-react';
-
-interface SearchInputProps {
-    value: string;
-    onChange: (value: string) => void;
-    placeholder?: string;
-    debounce?: number;
-    className?: string;
-}
-
-export const SearchInput: React.FC<SearchInputProps> = ({
-    value,
-    onChange,
-    placeholder = 'Search...',
-    debounce = 300,
-    className = '',
-}) => {
-    const [localValue, setLocalValue] = useState(value);
-    const onChangeRef = useRef(onChange);
-
-    useEffect(() => {
-        onChangeRef.current = onChange;
-    }, [onChange]);
-
-    useEffect(() => {
-        setLocalValue(value);
-    }, [value]);
-
-    useEffect(() => {
-        const timer = setTimeout(() => {
-            if (localValue !== value) {
-                onChangeRef.current(localValue);
-            }
-        }, debounce);
-
-        return () => clearTimeout(timer);
-    }, [localValue, value, debounce]);
-
-    const handleClear = () => {
-        setLocalValue('');
-        onChange('');
-    };
-
-    return (
-        <div className={`relative ${className}`}>
-            <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                <Search className="h-5 w-5 text-gray-400" />
-            </div>
-            <input
-                type="text"
-                value={localValue}
-                onChange={(e) => setLocalValue(e.target.value)}
-                placeholder={placeholder}
-                className="input-field pl-10 pr-10"
-            />
-            {localValue && (
-                <button
-                    type="button"
-                    onClick={handleClear}
-                    className="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600"
-                    title="Clear search"
-                >
-                    <X className="h-5 w-5" />
-                </button>
-            )}
-        </div>
-    );
-};

package/ui/src/components/Select.tsx

@@ -1,51 +0,0 @@
-import React, { useId } from 'react';
-
-interface SelectProps {
-    options: Array<{ value: string; label: string }>;
-    value: string;
-    onChange: (value: string) => void;
-    placeholder?: string;
-    label?: string;
-    required?: boolean;
-    allowEmpty?: boolean;
-    id?: string;
-}
-
-export const Select: React.FC<SelectProps> = ({
-    options,
-    value,
-    onChange,
-    placeholder = 'Select an option...',
-    label,
-    required = false,
-    allowEmpty = true,
-    id: providedId,
-}) => {
-    const generatedId = useId();
-    const id = providedId || generatedId;
-
-    return (
-        <div className="w-full">
-            {label && (
-                <label htmlFor={id} className="block text-sm font-medium text-gray-700 mb-2">
-                    {label}
-                    {required && <span className="text-red-500 ml-1">*</span>}
-                </label>
-            )}
-            <select
-                id={id}
-                value={value}
-                onChange={(e) => onChange(e.target.value)}
-                required={required}
-                className="input-field appearance-none bg-white cursor-pointer"
-            >
-                {allowEmpty && <option value="">{placeholder}</option>}
-                {options.map((option) => (
-                    <option key={option.value} value={option.value}>
-                        {option.label}
-                    </option>
-                ))}
-            </select>
-        </div>
-    );
-};