@archbase/components 3.0.0

package/dist/viewers/ArchbasePDFViewer.types.d.ts

@@ -0,0 +1,68 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { IArchbaseDataSourceBase } from '@archbase/data';
+export type PDFSource = string | Uint8Array | {
+    url: string;
+} | {
+    data: string | Uint8Array;
+};
+export type PDFRenderMode = 'canvas' | 'svg' | 'none';
+export type PDFTextLayerMode = 'legacy' | 'typedArray';
+export interface PDFAnnotation {
+    id: string;
+    type: 'highlight' | 'comment' | 'bookmark';
+    pageIndex: number;
+    rect: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+    content?: string;
+    color?: string;
+    author?: string;
+    createdAt: Date;
+}
+export interface PDFToolbarActions {
+    zoomIn?: boolean;
+    zoomOut?: boolean;
+    nextPage?: boolean;
+    previousPage?: boolean;
+    firstPage?: boolean;
+    lastPage?: boolean;
+    rotate?: boolean;
+    download?: boolean;
+    print?: boolean;
+    pageNavigation?: boolean;
+}
+export interface ArchbasePDFViewerProps<T, ID> {
+    dataSource?: IArchbaseDataSourceBase<T>;
+    dataField?: string;
+    file?: PDFSource;
+    onLoadSuccess?: (pdf: any) => void;
+    onLoadError?: (error: Error) => void;
+    width?: string | number;
+    height?: string | number;
+    page?: number;
+    scale?: number;
+    rotation?: number;
+    renderMode?: PDFRenderMode;
+    textLayer?: boolean;
+    toolbar?: boolean | PDFToolbarActions;
+    toolbarPosition?: 'top' | 'bottom' | 'both';
+    annotations?: PDFAnnotation[];
+    onAnnotationAdd?: (annotation: PDFAnnotation) => void;
+    onAnnotationRemove?: (annotationId: string) => void;
+    onAnnotationUpdate?: (annotationId: string, updates: Partial<PDFAnnotation>) => void;
+    enableAnnotations?: boolean;
+    showAnnotationsList?: boolean;
+    style?: CSSProperties;
+    className?: string;
+    onPageChange?: (currentPage: number, totalPages: number) => void;
+    onZoomChange?: (scale: number) => void;
+    title?: string;
+    ariaLabel?: string;
+    disabled?: boolean;
+    loading?: ReactNode;
+    error?: ReactNode;
+    noData?: ReactNode;
+}

package/dist/viewers/file-preview/ArchbaseFilePreviewer.d.ts

@@ -0,0 +1,19 @@
+import type { ArchbaseFilePreviewerProps } from './ArchbaseFilePreviewer.types';
+/**
+ * Componente ArchbaseFilePreviewer - Preview de múltiplos tipos de arquivo
+ *
+ * Suporta: PDF, Imagens, Vídeos, Áudio, Texto
+ *
+ * @example
+ * ```tsx
+ * <ArchbaseFilePreviewer
+ *   file="/path/to/file.pdf"
+ *   layoutMode="inline"
+ *   showToolbar
+ * />
+ * ```
+ */
+export declare function ArchbaseFilePreviewer({ file, fileType: fileTypeProp, layoutMode, width, height, showToolbar, toolbarActions, toolbarPosition, initialPage, initialScale, initialRotation, imageFit, enableImageZoom, enableImageRotation, codeLanguage, showLineNumbers, wordWrap, style, className, contentClassName, disabled, loading, error, noData, onLoadStart, onLoadEnd, onError, onDownload, onPrint, onZoomChange, onPageChange, onRotate, onFullscreenToggle, onClose, ariaLabel, title, fileName, mimeType, }: ArchbaseFilePreviewerProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ArchbaseFilePreviewer {
+    var displayName: string;
+}

package/dist/viewers/file-preview/ArchbaseFilePreviewer.types.d.ts

@@ -0,0 +1,153 @@
+import type { CSSProperties, ReactNode } from 'react';
+/**
+ * Tipos de arquivo suportados para preview
+ */
+export type FileType = 'pdf' | 'image' | 'video' | 'audio' | 'text' | 'code' | 'office' | 'unknown';
+/**
+ * Tipos de imagem suportados
+ */
+export type ImageType = 'jpg' | 'jpeg' | 'png' | 'gif' | 'bmp' | 'webp' | 'svg' | 'ico';
+/**
+ * Tipos de vídeo suportados
+ */
+export type VideoType = 'mp4' | 'webm' | 'ogg' | 'mov' | 'avi' | 'mkv';
+/**
+ * Tipos de áudio suportados
+ */
+export type AudioType = 'mp3' | 'wav' | 'ogg' | 'aac' | 'flac';
+/**
+ * Tipos de texto suportados
+ */
+export type TextType = 'txt' | 'md' | 'json' | 'xml' | 'html' | 'css' | 'js' | 'ts';
+/**
+ * Tipos de código suportados
+ */
+export type CodeType = 'js' | 'ts' | 'jsx' | 'tsx' | 'py' | 'java' | 'c' | 'cpp' | 'go' | 'rs' | 'php' | 'rb' | 'sh';
+/**
+ * Tipos de Office suportados
+ */
+export type OfficeType = 'doc' | 'docx' | 'xls' | 'xlsx' | 'ppt' | 'pptx';
+/**
+ * Source do arquivo - pode ser URL, File object, ou base64
+ */
+export type FileSource = string | File | Blob | {
+    url: string;
+} | {
+    data: string | ArrayBuffer;
+} | {
+    base64: string;
+};
+/**
+ * Opções de layout para o previewer
+ */
+export type LayoutMode = 'inline' | 'modal' | 'fullscreen';
+/**
+ * Opções de toolbar
+ */
+export interface ToolbarActions {
+    download?: boolean;
+    print?: boolean;
+    zoomIn?: boolean;
+    zoomOut?: boolean;
+    fitWidth?: boolean;
+    fitPage?: boolean;
+    rotate?: boolean;
+    fullscreen?: boolean;
+    close?: boolean;
+}
+/**
+ * Estado de carregamento do arquivo
+ */
+export type LoadingState = 'idle' | 'loading' | 'loaded' | 'error';
+/**
+ * Erro de preview
+ */
+export interface PreviewError {
+    code: string;
+    message: string;
+    details?: string;
+}
+/**
+ * Props do componente ArchbaseFilePreviewer
+ */
+export interface ArchbaseFilePreviewerProps {
+    /** Source do arquivo a ser visualizado */
+    file: FileSource;
+    /** Tipo do arquivo (opcional, detectado automaticamente) */
+    fileType?: FileType;
+    /** --- Layout --- */
+    /** Modo de exibição */
+    layoutMode?: LayoutMode;
+    /** Largura do container */
+    width?: string | number;
+    /** Altura do container */
+    height?: string | number;
+    /** --- Toolbar --- */
+    /** Mostrar toolbar */
+    showToolbar?: boolean;
+    /** Ações disponíveis na toolbar */
+    toolbarActions?: ToolbarActions | boolean;
+    /** Posição da toolbar */
+    toolbarPosition?: 'top' | 'bottom' | 'both';
+    /** --- Opções de PDF --- */
+    /** Página inicial */
+    initialPage?: number;
+    /** Zoom inicial */
+    initialScale?: number;
+    /** Rotação inicial */
+    initialRotation?: number;
+    /** --- Opções de Imagem --- */
+    /** Ajuste de imagem */
+    imageFit?: 'contain' | 'cover' | 'fill' | 'none';
+    /** Habilitar zoom em imagens */
+    enableImageZoom?: boolean;
+    /** Habilitar rotação de imagens */
+    enableImageRotation?: boolean;
+    /** --- Opções de Texto/Código --- */
+    /** Tipos de código para syntax highlighting */
+    codeLanguage?: string;
+    /** Mostrar números de linha */
+    showLineNumbers?: boolean;
+    /** Quebra de linha automática */
+    wordWrap?: boolean;
+    /** --- Estilização --- */
+    style?: CSSProperties;
+    className?: string;
+    contentClassName?: string;
+    /** --- Estados --- */
+    disabled?: boolean;
+    loading?: ReactNode;
+    error?: ReactNode;
+    noData?: ReactNode;
+    /** --- Eventos --- */
+    onLoadStart?: () => void;
+    onLoadEnd?: () => void;
+    onError?: (error: PreviewError) => void;
+    onDownload?: () => void;
+    onPrint?: () => void;
+    onZoomChange?: (scale: number) => void;
+    onPageChange?: (page: number, totalPages: number) => void;
+    onRotate?: (rotation: number) => void;
+    onFullscreenToggle?: (isFullscreen: boolean) => void;
+    onClose?: () => void;
+    /** --- Acessibilidade --- */
+    ariaLabel?: string;
+    title?: string;
+    /** --- Outros --- */
+    /** Nome do arquivo (para download) */
+    fileName?: string;
+    /** MIME type (para detecção de tipo) */
+    mimeType?: string;
+}
+/**
+ * Props internas para renderizadores de arquivo
+ */
+export interface FileRendererProps {
+    file: FileSource;
+    width?: string | number;
+    height?: string | number;
+    onLoad?: () => void;
+    onError?: (error: PreviewError) => void;
+    style?: CSSProperties;
+    className?: string;
+}

package/dist/viewers/file-preview/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * ArchbaseFilePreviewer - File Preview Component
+ *
+ * Preview de múltiplos tipos de arquivo:
+ * - PDF
+ * - Imagens (JPEG, PNG, GIF, SVG, etc)
+ * - Vídeos (MP4, WebM, OGG, etc)
+ * - Áudio (MP3, WAV, OGG, etc)
+ * - Texto/Código (TXT, MD, JSON, XML, etc)
+ */
+export { ArchbaseFilePreviewer } from './ArchbaseFilePreviewer';
+export type { ArchbaseFilePreviewerProps, FileSource, FileType, FileRendererProps, ImageType, VideoType, AudioType, TextType, CodeType, OfficeType, LayoutMode, LoadingState, PreviewError, ToolbarActions, } from './ArchbaseFilePreviewer.types';
+export { detectFileType, detectFileTypeByExtension, detectFileTypeByMimeType, detectFileTypeByContent, isFileTypeSupported, getUnsupportedMessage, fileSourceToUrl, revokeFileUrl, } from './utils/fileTypeDetector';

package/dist/viewers/file-preview/utils/fileTypeDetector.d.ts

@@ -0,0 +1,33 @@
+import type { FileType, FileSource } from '../ArchbaseFilePreviewer.types';
+/**
+ * Detecta o tipo de arquivo baseado na extensão
+ */
+export declare function detectFileTypeByExtension(extension: string): FileType;
+/**
+ * Detecta o tipo de arquivo baseado no MIME type
+ */
+export declare function detectFileTypeByMimeType(mimeType: string): FileType;
+/**
+ * Detecta o tipo de arquivo baseado no conteúdo (header/magic bytes)
+ */
+export declare function detectFileTypeByContent(buffer: ArrayBuffer): FileType;
+/**
+ * Detecta o tipo de arquivo a partir de uma FileSource
+ */
+export declare function detectFileType(source: FileSource, mimeType?: string, fileName?: string): Promise<FileType>;
+/**
+ * Verifica se um tipo de arquivo é suportado para preview
+ */
+export declare function isFileTypeSupported(fileType: FileType): boolean;
+/**
+ * Retorna mensagem para tipo não suportado
+ */
+export declare function getUnsupportedMessage(fileType: FileType, fileName?: string): string;
+/**
+ * Converte FileSource para URL
+ */
+export declare function fileSourceToUrl(source: FileSource): string | Promise<string>;
+/**
+ * Libera URL criada por URL.createObjectURL
+ */
+export declare function revokeFileUrl(url: string): void;

package/dist/viewers/index.d.ts

@@ -0,0 +1,5 @@
+export { ArchbasePDFViewer } from './ArchbasePDFViewer';
+export { ArchbasePDFViewerToolbar } from './ArchbasePDFViewer.toolbar';
+export { ArchbasePDFAnnotations, ArchbasePDFAnnotationsList, } from './ArchbasePDFViewer.annotations';
+export type { ArchbasePDFViewerProps, PDFSource, PDFAnnotation, PDFRenderMode, PDFTextLayerMode, PDFToolbarActions, } from './ArchbasePDFViewer.types';
+export * from './file-preview';

package/package.json

@@ -0,0 +1,154 @@
+{
+  "name": "@archbase/components",
+  "version": "3.0.0",
+  "description": "UI Components for Archbase React v3 - Form editors, data visualization, and business components",
+  "author": "Edson Martins <edsonmartins2005@gmail.com>",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
+    },
+    "./dist/index.css": "./dist/index.css",
+    "./dist/cjs/index.css": "./dist/index.css",
+    "./dist/esm/index.css": "./dist/index.css"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "peerDependencies": {
+    "@mantine/carousel": "8.3.12",
+    "@mantine/charts": "8.3.12",
+    "@mantine/code-highlight": "8.3.12",
+    "@mantine/core": "8.3.12",
+    "@mantine/dates": "8.3.12",
+    "@mantine/dropzone": "8.3.12",
+    "@mantine/form": "8.3.12",
+    "@mantine/hooks": "8.3.12",
+    "@mantine/modals": "8.3.12",
+    "@mantine/notifications": "8.3.12",
+    "@tabler/icons-react": "^3.26.0",
+    "react": "^18.3.0 || ^19.0.0",
+    "react-dom": "^18.3.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@gfazioli/mantine-list-view-table": "^1.1.9",
+    "@gfazioli/mantine-onboarding-tour": "^2.6.5",
+    "@mui/x-data-grid": "^7.28.3",
+    "@rehooks/component-size": "^1.0.3",
+    "ajv": "^8.16.0",
+    "apexcharts": "^3.49.0",
+    "chart.js": "^4.4.2",
+    "classnames": "^2.5.1",
+    "clsx": "^2.1.1",
+    "codemirror": "5.63.3",
+    "color": "^4.2.3",
+    "crypto-js": "^4.2.0",
+    "css-element-queries": "^1.2.3",
+    "d3": "^7.9.0",
+    "date-fns": "^2.30.0",
+    "dayjs": "^1.11.13",
+    "element-resize-detector": "^1.2.4",
+    "export-to-csv": "^0.2.2",
+    "file-saver": "^2.0.5",
+    "final-form": "^4.20.10",
+    "framer-motion": "^11.15.0",
+    "get-size": "^3.0.0",
+    "html2canvas": "^1.4.1",
+    "i18next": "^23.10.0",
+    "immer": "^10.1.1",
+    "is-hotkey": "^0.2.0",
+    "js-beautify": "^1.15.1",
+    "js-cookie": "^3.0.5",
+    "jspdf": "^2.5.1",
+    "jspdf-autotable": "^3.8.2",
+    "jwt-decode": "^3.1.2",
+    "libphonenumber-js": "^1.11.3",
+    "lodash": "^4.17.21",
+    "outlayer": "^2.1.1",
+    "overlayscrollbars": "^2.8.3",
+    "pdfjs-dist": "^4.0.379",
+    "pubsub-js": "^1.9.4",
+    "ramda": "~0.29.1",
+    "react-accessible-accordion": "^5.0.0",
+    "react-apexcharts": "^1.4.1",
+    "react-chartjs-2": "^5.2.0",
+    "react-codemirror2": "^7.3.0",
+    "react-color": "^2.19.3",
+    "react-date-object": "^2.1.8",
+    "react-easy-crop": "^4.7.4",
+    "react-final-form": "^6.5.9",
+    "react-frame-component": "^5.2.7",
+    "react-grid-system": "^8.2.0",
+    "react-hook-form": "^7.54.2",
+    "react-i18next": "^13.5.0",
+    "react-imask": "^7.6.1",
+    "react-inspector": "^6.0.2",
+    "react-intersection-observer": "^9.10.3",
+    "react-konva": "^18.2.10",
+    "react-masonry-component": "^6.3.0",
+    "react-modal": "^3.16.1",
+    "react-multi-date-picker": "4.1.2",
+    "react-pdf": "^9.1.0",
+    "react-router": "^6.22.0",
+    "react-router-dom": "^6.22.0",
+    "react-speech-recognition": "^3.10.0",
+    "react-spreadsheet-import": "^4.7.1",
+    "react-to-print": "^2.15.1",
+    "react-use-audio-player": "^2.2.0",
+    "react-video-js-player": "^1.1.1",
+    "react-markdown": "^9.0.1",
+    "remark-gfm": "^4.0.0",
+    "rehype-raw": "^7.0.0",
+    "rehype-external-links": "^3.0.0",
+    "react-thermal-printer": "^0.22.0",
+    "react-file-previewer": "^0.4.2",
+    "react-markdown-editor-lite": "^1.3.5",
+    "markdown-it": "^14.1.0",
+    "@datou/react-vis-timeline": "^1.4.0",
+    "vis-timeline": "^7.7.3",
+    "suneditor": "^2.46.3",
+    "suneditor-react": "^3.6.1",
+    "use-debounce": "^10.0.1",
+    "usehooks-ts": "^2.16.0",
+    "uuid": "^9.0.1",
+    "validator": "^13.12.0",
+    "video.js": "^8.10.0",
+    "xlsx": "^0.18.5",
+    "@archbase/core": "3.0.0",
+    "@archbase/data": "3.0.0",
+    "@archbase/layout": "3.0.0"
+  },
+  "devDependencies": {
+    "@types/d3": "^7.4.3",
+    "@types/lodash": "^4.17.13",
+    "@types/node": "^22.16.1",
+    "@types/react": "^19.0.4",
+    "@types/react-dom": "^19.0.2",
+    "@vitejs/plugin-react": "^4.3.4",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "sass-embedded": "^1.80.7",
+    "typescript": "~5.7.2",
+    "vite": "^6.0.3",
+    "vitest": "^2.1.8"
+  },
+  "publishConfig": {
+    "registry": "http://192.168.1.110:4873"
+  },
+  "scripts": {
+    "dev": "NODE_OPTIONS=\"--max-old-space-size=16384\" vite build --watch",
+    "build": "NODE_OPTIONS=\"--max-old-space-size=16384\" vite build && NODE_OPTIONS=\"--max-old-space-size=16384\" tsc --emitDeclarationOnly || true",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "lint": "eslint . --max-warnings 0",
+    "clean": "rm -rf dist .turbo node_modules"
+  }
+}

package/src/admin/types.ts

@@ -0,0 +1,73 @@
+import { ReactNode } from 'react';
+import { URLSearchParamsInit } from 'react-router-dom';
+
+export type ArchbaseNavigationGroup = {
+	label: string;
+	icon: any;
+	name: string;
+	hint: string;
+	indexOrder: number;
+};
+
+export type ArchbaseNavigationItem = {
+	label: string;
+	icon: any;
+	link?: string | undefined;
+	routeParams?: URLSearchParamsInit;
+	initiallyOpened?: boolean;
+	links?: ArchbaseNavigationItem[];
+	category: string | undefined | null;
+	color: any | undefined;
+	component?: ReactNode;
+	showInSidebar: boolean;
+	disabled?: boolean | Function;
+	redirect?: string;
+	customTitle?: string;
+	keepAlive?: boolean;
+	group?: ArchbaseNavigationGroup;
+	hideDisabledItem?: boolean;
+};
+
+export type ArchbaseCommandColor = {
+	backgroundColor: string;
+	color: string;
+};
+
+export type ArchbaseCommandMenu = {
+	id: any;
+	command: () => void;
+	category: string;
+	color: ArchbaseCommandColor;
+	name: string;
+};
+
+export interface ArchbaseOwner {
+	uuid: string;
+	name: string;
+	logo: string;
+	code: string;
+}
+
+export interface ArchbaseCompany {
+	uuid: string;
+	name: string;
+	logo: string;
+	code: string;
+}
+
+export type ArchbaseTabItem = {
+	id: string;
+	title: string;
+	path: string;
+	content: React.ReactNode;
+	iconClass: any;
+	closeButton: boolean;
+	active: boolean;
+	redirect?: string;
+	customTitle?: string;
+};
+
+export type LocationDataItem = {
+	navItemUUID: string;
+	params: any;
+};