@ackplus/nest-auth 1.1.0 → 1.1.2

package/ui/src/components/SwaggerUIWrapper.tsx

@@ -1,316 +0,0 @@
-import React, { useRef, useState, lazy, Suspense } from 'react';
-import { Search, Lock, X, List, Grid, Maximize2 } from 'lucide-react';
-import 'swagger-ui-react/swagger-ui.css';
-
-// Lazy load SwaggerUI to reduce initial bundle size
-const SwaggerUI = lazy(() => import('swagger-ui-react'));
-
-interface SwaggerUIWrapperProps {
-    spec: any;
-}
-
-type DocExpansion = 'list' | 'full' | 'none';
-
-export const SwaggerUIWrapper: React.FC<SwaggerUIWrapperProps> = ({ spec }) => {
-    const swaggerSystemRef = useRef<any>(null);
-    const [viewMode, setViewMode] = useState<DocExpansion>('list');
-    const [filterText, setFilterText] = useState('');
-    const [authDialogOpen, setAuthDialogOpen] = useState(false);
-    const [bearerToken, setBearerToken] = useState('');
-
-    // Filter the spec based on search text
-    const filteredSpec = React.useMemo(() => {
-        const searchLower = filterText?.toLowerCase().trim() || '';
-        let filteredPaths: any = {};
-
-        if (searchLower) {
-            Object.entries(spec.paths || {}).forEach(([path, methods]: [string, any]) => {
-                const pathMatches = path.toLowerCase().includes(searchLower);
-                const filteredMethods: any = {};
-
-                Object.entries(methods).forEach(([method, operation]: [string, any]) => {
-                    const methodMatches = method.toLowerCase().includes(searchLower);
-                    const summaryMatches = operation.summary?.toLowerCase().includes(searchLower);
-                    const descMatches = operation.description?.toLowerCase().includes(searchLower);
-                    const tagsMatch = operation.tags?.some((tag: string) => tag.toLowerCase().includes(searchLower));
-
-                    if (pathMatches || methodMatches || summaryMatches || descMatches || tagsMatch) {
-                        filteredMethods[method] = operation;
-                    }
-                });
-
-                if (Object.keys(filteredMethods).length > 0) {
-                    filteredPaths[path] = filteredMethods;
-                }
-            });
-        } else {
-            filteredPaths = { ...spec.paths };
-        }
-
-        return {
-            openapi: spec.openapi,
-            paths: filteredPaths,
-            components: spec.components,
-            servers: spec.servers,
-        };
-    }, [spec, filterText]);
-
-    const handleSwaggerComplete = (system: any) => {
-        swaggerSystemRef.current = system;
-    };
-
-    const handleAuthorize = () => {
-        if (swaggerSystemRef.current && bearerToken) {
-            const authActions = swaggerSystemRef.current.authActions;
-            if (authActions) {
-                authActions.authorize({
-                    BearerAuth: {
-                        name: 'BearerAuth',
-                        schema: { type: 'http', scheme: 'bearer' },
-                        value: bearerToken,
-                    },
-                });
-            }
-        }
-        setAuthDialogOpen(false);
-    };
-
-    const handleLogout = () => {
-        if (swaggerSystemRef.current) {
-            const authActions = swaggerSystemRef.current.authActions;
-            if (authActions) {
-                authActions.logout(['BearerAuth']);
-            }
-        }
-        setBearerToken('');
-    };
-
-    return (
-        <div className="space-y-4">
-            {/* Controls */}
-            <div className="card">
-                <div className="space-y-4">
-                    {/* Top row: Filter and Auth */}
-                    <div className="flex flex-col sm:flex-row gap-3">
-                        <div className="flex-1 relative">
-                            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
-                            <input
-                                type="text"
-                                placeholder="Filter by tag or endpoint..."
-                                value={filterText}
-                                onChange={(e) => setFilterText(e.target.value)}
-                                className="input-field pl-10 w-full"
-                            />
-                        </div>
-                        <div className="flex gap-2">
-                            <button
-                                onClick={() => setAuthDialogOpen(true)}
-                                className="btn-secondary flex items-center gap-2"
-                            >
-                                <Lock className="w-4 h-4" />
-                                {bearerToken ? 'Authorized' : 'Authorize'}
-                            </button>
-                            {bearerToken && (
-                                <button
-                                    onClick={handleLogout}
-                                    className="btn-secondary text-red-600 hover:text-red-700"
-                                >
-                                    Logout
-                                </button>
-                            )}
-                        </div>
-                    </div>
-
-                    {/* Bottom row: View Mode */}
-                    <div className="flex items-center justify-between flex-wrap gap-3 pt-3 border-t border-gray-200">
-                        <span className="text-sm text-gray-600">Display Mode</span>
-                        <div className="flex gap-2">
-                            <button
-                                onClick={() => setViewMode('none')}
-                                className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors flex items-center gap-2 ${viewMode === 'none'
-                                    ? 'bg-primary-600 text-white'
-                                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
-                                    }`}
-                            >
-                                <Grid className="w-4 h-4" />
-                                Collapsed
-                            </button>
-                            <button
-                                onClick={() => setViewMode('list')}
-                                className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors flex items-center gap-2 ${viewMode === 'list'
-                                    ? 'bg-primary-600 text-white'
-                                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
-                                    }`}
-                            >
-                                <List className="w-4 h-4" />
-                                List
-                            </button>
-                            <button
-                                onClick={() => setViewMode('full')}
-                                className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-colors flex items-center gap-2 ${viewMode === 'full'
-                                    ? 'bg-primary-600 text-white'
-                                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
-                                    }`}
-                            >
-                                <Maximize2 className="w-4 h-4" />
-                                Expanded
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            </div>
-
-            {/* Authorization Dialog */}
-            {authDialogOpen && (
-                <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
-                    <div className="bg-white rounded-xl shadow-2xl max-w-md w-full">
-                        <div className="p-6 border-b border-gray-200 flex items-center justify-between">
-                            <h3 className="text-xl font-bold text-gray-900">Authorize</h3>
-                            <button
-                                onClick={() => setAuthDialogOpen(false)}
-                                className="text-gray-400 hover:text-gray-600 transition-colors"
-                            >
-                                <X className="w-6 h-6" />
-                            </button>
-                        </div>
-                        <div className="p-6 space-y-4">
-                            <p className="text-sm text-gray-600">
-                                Enter your Bearer token to authorize API requests
-                            </p>
-                            <input
-                                type="password"
-                                value={bearerToken}
-                                onChange={(e) => setBearerToken(e.target.value)}
-                                placeholder="Enter your JWT token"
-                                className="input-field w-full"
-                                autoFocus
-                            />
-                        </div>
-                        <div className="p-6 border-t border-gray-200 flex justify-end gap-3">
-                            <button
-                                onClick={() => setAuthDialogOpen(false)}
-                                className="btn-secondary"
-                            >
-                                Cancel
-                            </button>
-                            <button
-                                onClick={handleAuthorize}
-                                disabled={!bearerToken}
-                                className="btn-primary disabled:opacity-50 disabled:cursor-not-allowed"
-                            >
-                                Authorize
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            )}
-
-            {/* No Results Message */}
-            {filterText && Object.keys(filteredSpec.paths || {}).length === 0 && (
-                <div className="card text-center py-8">
-                    <p className="text-lg font-medium text-gray-900 mb-2">No results found</p>
-                    <p className="text-sm text-gray-600">
-                        No endpoints match your search "{filterText}". Try a different search term.
-                    </p>
-                </div>
-            )}
-
-            {/* Swagger UI */}
-            {(!filterText || Object.keys(filteredSpec.paths || {}).length > 0) && (
-                <div className="card p-0 overflow-hidden">
-                    <style>{`
-                        .swagger-ui {
-                            font-family: system-ui, -apple-system, sans-serif;
-                        }
-                        .swagger-ui .models,
-                        .swagger-ui section.models,
-                        .swagger-ui .information-container,
-                        .swagger-ui .info,
-                        .swagger-ui .info .title,
-                        .swagger-ui .info hgroup,
-                        .swagger-ui .info .title small,
-                        .swagger-ui .info h1,
-                        .swagger-ui .info h2,
-                        .swagger-ui .info h3,
-                        .swagger-ui .info a,
-                        .swagger-ui .info .base-url,
-                        .swagger-ui .info .url,
-                        .swagger-ui .scheme-container,
-                        .swagger-ui .filter-container,
-                        .swagger-ui .auth-wrapper,
-                        .swagger-ui .authorization__btn,
-                        .swagger-ui > div > div:first-child > div:first-child,
-                        .swagger-ui .wrapper > .information-container {
-                            display: none !important;
-                        }
-                        .swagger-ui .information-container * {
-                            display: none !important;
-                        }
-                        .swagger-ui h4,
-                        .swagger-ui h5 {
-                            margin-bottom: 16px;
-                        }
-                        .swagger-ui .opblock.opblock-get .opblock-summary-method {
-                            background: #3b82f6;
-                        }
-                        .swagger-ui .opblock.opblock-post .opblock-summary-method {
-                            background: #10b981;
-                        }
-                        .swagger-ui .opblock.opblock-put .opblock-summary-method {
-                            background: #f59e0b;
-                        }
-                        .swagger-ui .opblock.opblock-delete .opblock-summary-method {
-                            background: #ef4444;
-                        }
-                        .swagger-ui .opblock.opblock-patch .opblock-summary-method {
-                            background: #8b5cf6;
-                        }
-                        .swagger-ui .btn.execute {
-                            background: #3b82f6;
-                            color: white;
-                            border-color: #3b82f6;
-                        }
-                        .swagger-ui .btn.execute:hover {
-                            background: #2563eb;
-                            border-color: #2563eb;
-                        }
-                        .swagger-ui .opblock,
-                        .swagger-ui input,
-                        .swagger-ui textarea,
-                        .swagger-ui select {
-                            border-radius: 8px;
-                        }
-                        .swagger-ui {
-                            padding: 20px;
-                        }
-                    `}</style>
-                    <Suspense
-                        fallback={
-                            <div className="p-8 text-center">
-                                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600 mx-auto mb-4"></div>
-                                <p className="text-gray-600">Loading API documentation...</p>
-                            </div>
-                        }
-                    >
-                        <SwaggerUI
-                            key={viewMode}
-                            spec={filteredSpec}
-                            docExpansion={viewMode}
-                            defaultModelsExpandDepth={-1}
-                            defaultModelExpandDepth={1}
-                            displayOperationId={false}
-                            filter={false}
-                            showExtensions={false}
-                            showCommonExtensions={false}
-                            tryItOutEnabled={true}
-                            persistAuthorization={true}
-                            deepLinking={true}
-                            displayRequestDuration={true}
-                            onComplete={handleSwaggerComplete}
-                        />
-                    </Suspense>
-                </div>
-            )}
-        </div>
-    );
-};

package/ui/src/components/Table.tsx

@@ -1,207 +0,0 @@
-import React from 'react';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
-
-export interface Column<T> {
-    key: string;
-    label: string;
-    render?: (row: T) => React.ReactNode;
-    sortable?: boolean;
-}
-
-export interface PaginationInfo {
-    page: number;
-    limit: number;
-    total: number;
-    totalPages: number;
-}
-
-interface TableProps<T> {
-    columns: Column<T>[];
-    data: T[];
-    loading?: boolean;
-    emptyMessage?: string;
-    emptyIcon?: React.ReactNode;
-    pagination?: PaginationInfo;
-    onPageChange?: (page: number) => void;
-    onSort?: (key: string) => void;
-    sortBy?: string;
-    sortOrder?: 'asc' | 'desc';
-    rowKey: (row: T) => string | number;
-}
-
-export function Table<T>({
-    columns,
-    data,
-    loading = false,
-    emptyMessage = 'No data found',
-    emptyIcon,
-    pagination,
-    onPageChange,
-    onSort,
-    sortBy,
-    sortOrder,
-    rowKey,
-}: TableProps<T>) {
-    const handleSort = (key: string, sortable?: boolean) => {
-        if (sortable && onSort) {
-            onSort(key);
-        }
-    };
-
-    const renderPagination = () => {
-        if (!pagination || !onPageChange) return null;
-
-        const { page, totalPages, total } = pagination;
-        const pages: number[] = [];
-        const maxVisible = 5;
-
-        let startPage = Math.max(1, page - Math.floor(maxVisible / 2));
-        let endPage = Math.min(totalPages, startPage + maxVisible - 1);
-
-        if (endPage - startPage < maxVisible - 1) {
-            startPage = Math.max(1, endPage - maxVisible + 1);
-        }
-
-        for (let i = startPage; i <= endPage; i++) {
-            pages.push(i);
-        }
-
-        return (
-            <div className="flex items-center justify-between px-4 py-3 border-t border-gray-200 bg-gray-50">
-                <div className="text-xs text-gray-700">
-                    Showing <span className="font-medium">{Math.min((page - 1) * pagination.limit + 1, total)}</span> to{' '}
-                    <span className="font-medium">{Math.min(page * pagination.limit, total)}</span> of{' '}
-                    <span className="font-medium">{total}</span> results
-                </div>
-
-                <div className="flex items-center gap-2">
-                    <button
-                        type="button"
-                        onClick={() => onPageChange(page - 1)}
-                        disabled={page === 1}
-                        className="p-1.5 rounded-lg border border-gray-300 hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-                        title="Previous page"
-                    >
-                        <ChevronLeft className="w-4 h-4" />
-                    </button>
-
-                    <div className="flex items-center gap-1">
-                        {startPage > 1 && (
-                            <>
-                                <button
-                                    type="button"
-                                    onClick={() => onPageChange(1)}
-                                    className="px-2.5 py-1 rounded-lg border border-gray-300 hover:bg-gray-100 transition-colors text-xs"
-                                >
-                                    1
-                                </button>
-                                {startPage > 2 && <span className="px-1.5 text-gray-400 text-xs">...</span>}
-                            </>
-                        )}
-
-                        {pages.map((p) => (
-                            <button
-                                type="button"
-                                key={p}
-                                onClick={() => onPageChange(p)}
-                                className={`px-2.5 py-1 rounded-lg border transition-colors text-xs ${p === page
-                                    ? 'bg-primary-600 text-white border-primary-600'
-                                    : 'border-gray-300 hover:bg-gray-100'
-                                    }`}
-                            >
-                                {p}
-                            </button>
-                        ))}
-
-                        {endPage < totalPages && (
-                            <>
-                                {endPage < totalPages - 1 && <span className="px-1.5 text-gray-400 text-xs">...</span>}
-                                <button
-                                    type="button"
-                                    onClick={() => onPageChange(totalPages)}
-                                    className="px-2.5 py-1 rounded-lg border border-gray-300 hover:bg-gray-100 transition-colors text-xs"
-                                >
-                                    {totalPages}
-                                </button>
-                            </>
-                        )}
-                    </div>
-
-                    <button
-                        type="button"
-                        onClick={() => onPageChange(page + 1)}
-                        disabled={page === totalPages}
-                        className="p-1.5 rounded-lg border border-gray-300 hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-                        title="Next page"
-                    >
-                        <ChevronRight className="w-4 h-4" />
-                    </button>
-                </div>
-            </div>
-        );
-    };
-
-    if (loading) {
-        return (
-            <div className="card overflow-hidden p-0">
-                <div className="p-6 text-center">
-                    <div className="animate-spin rounded-full h-10 w-10 border-b-2 border-primary-600 mx-auto"></div>
-                    <p className="text-gray-600 mt-3 text-sm">Loading...</p>
-                </div>
-            </div>
-        );
-    }
-
-    if (data.length === 0) {
-        return (
-            <div className="card overflow-hidden p-0">
-                <div className="p-6 text-center">
-                    {emptyIcon && <div className="mb-3 flex justify-center">{emptyIcon}</div>}
-                    <p className="text-gray-600 font-medium text-sm">{emptyMessage}</p>
-                </div>
-            </div>
-        );
-    }
-
-    return (
-        <div className="card overflow-hidden p-0">
-            <div className="overflow-x-auto">
-                <table className="w-full">
-                    <thead className="bg-gray-50 border-b border-gray-200">
-                        <tr>
-                            {columns.map((column) => (
-                                <th
-                                    key={column.key}
-                                    className={`px-3 py-2.5 text-left text-xs font-medium text-gray-500 uppercase tracking-wider ${column.sortable ? 'cursor-pointer hover:bg-gray-100' : ''
-                                        }`}
-                                    onClick={() => handleSort(column.key, column.sortable)}
-                                >
-                                    <div className="flex items-center gap-1.5">
-                                        {column.label}
-                                        {column.sortable && sortBy === column.key && (
-                                            <span className="text-primary-600 text-xs">
-                                                {sortOrder === 'asc' ? '↑' : '↓'}
-                                            </span>
-                                        )}
-                                    </div>
-                                </th>
-                            ))}
-                        </tr>
-                    </thead>
-                    <tbody className="bg-white divide-y divide-gray-200">
-                        {data.map((row) => (
-                            <tr key={rowKey(row)} className="hover:bg-gray-50 transition-colors">
-                                {columns.map((column) => (
-                                    <td key={column.key} className="px-3 py-2.5">
-                                        {column.render ? column.render(row) : String(row[column.key as keyof T] ?? '')}
-                                    </td>
-                                ))}
-                            </tr>
-                        ))}
-                    </tbody>
-                </table>
-            </div>
-            {renderPagination()}
-        </div>
-    );
-}

package/ui/src/components/Tag.tsx

@@ -1,9 +0,0 @@
-import React from 'react';
-
-interface TagProps {
-    children: React.ReactNode;
-}
-
-export const Tag: React.FC<TagProps> = ({ children }) => {
-    return <span className="tag">{children}</span>;
-};

package/ui/src/components/TagsInput.tsx

@@ -1,96 +0,0 @@
-import React, { useState, KeyboardEvent, useId } from 'react';
-import { X, Plus } from 'lucide-react';
-
-interface TagsInputProps {
-    value: string[];
-    onChange: (value: string[]) => void;
-    placeholder?: string;
-    label?: string;
-    helperText?: string;
-    id?: string;
-}
-
-export const TagsInput: React.FC<TagsInputProps> = ({
-    value,
-    onChange,
-    placeholder = 'Type and press Enter...',
-    label,
-    helperText,
-    id: providedId,
-}) => {
-    const [inputValue, setInputValue] = useState('');
-    const generatedId = useId();
-    const id = providedId || generatedId;
-
-    const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
-        if (e.key === 'Enter' || e.key === ',') {
-            e.preventDefault();
-            addTag();
-        } else if (e.key === 'Backspace' && inputValue === '' && value.length > 0) {
-            // Remove last tag on backspace if input is empty
-            removeTag(value[value.length - 1]);
-        }
-    };
-
-    const addTag = () => {
-        const trimmed = inputValue.trim();
-        if (trimmed && !value.includes(trimmed)) {
-            onChange([...value, trimmed]);
-            setInputValue('');
-        }
-    };
-
-    const removeTag = (tag: string) => {
-        onChange(value.filter((t) => t !== tag));
-    };
-
-    return (
-        <div className="w-full">
-            {label && (
-                <label htmlFor={id} className="block text-sm font-medium text-gray-700 mb-2">
-                    {label}
-                </label>
-            )}
-            <div className="input-field p-2 flex flex-wrap gap-2 items-center min-h-[42px]">
-                {value.map((tag) => (
-                    <span
-                        key={tag}
-                        className="badge-info flex items-center gap-1 px-2 py-1"
-                    >
-                        {tag}
-                        <button
-                            type="button"
-                            onClick={() => removeTag(tag)}
-                            className="hover:text-blue-900 focus:outline-none"
-                        >
-                            <X className="w-3 h-3" />
-                        </button>
-                    </span>
-                ))}
-                <div className="flex items-center gap-1 flex-1 min-w-[120px]">
-                    <input
-                        id={id}
-                        type="text"
-                        value={inputValue}
-                        onChange={(e) => setInputValue(e.target.value)}
-                        onKeyDown={handleKeyDown}
-                        placeholder={value.length === 0 ? placeholder : ''}
-                        className="flex-1 outline-none border-none focus:ring-0 p-0 min-w-0"
-                    />
-                    {inputValue.trim() && (
-                        <button
-                            type="button"
-                            onClick={addTag}
-                            className="text-primary-600 hover:text-primary-700 focus:outline-none"
-                        >
-                            <Plus className="w-4 h-4" />
-                        </button>
-                    )}
-                </div>
-            </div>
-            {helperText && (
-                <p className="text-xs text-gray-500 mt-1">{helperText}</p>
-            )}
-        </div>
-    );
-};