@archbase/components 3.0.0

package/src/themes/ArchbaseThemeEditor.tsx

@@ -0,0 +1,110 @@
+import { Card, ColorPicker, MantineSize } from '@mantine/core';
+import type { CSSProperties, FocusEventHandler, ReactNode } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
+import { useArchbaseV1V2Compatibility } from '@archbase/data';
+import type { ArchbaseDataSource, DataSourceEvent, IArchbaseDataSourceBase } from '@archbase/data';
+import { DataSourceEventNames } from '@archbase/data';
+import { useArchbaseDataSourceListener } from '@archbase/data';
+import { useArchbaseDidMount, useArchbaseDidUpdate, useArchbaseWillUnmount } from '@archbase/core';
+
+export interface ArchbaseThemeEditorProps<T, ID> {
+	/** Fonte de dados onde será atribuido o valor do edit (V1 ou V2) */
+	dataSource?: IArchbaseDataSourceBase<T>;
+	/** Campo onde deverá ser atribuido o valor do edit na fonte de dados */
+	dataField?: string;
+	/** Indicador se o edit está desabilitado */
+	disabled?: boolean;
+	/** Indicador se o edit é somente leitura. Obs: usado em conjunto com o status da fonte de dados */
+	readOnly?: boolean;
+	/** Indicador se o preenchimento do edit é obrigatório */
+	required?: boolean;
+	/** Valor inicial */
+	value?: string;
+	/** Estilo do edit */
+	style?: CSSProperties;
+	/** Tamanho do edit */
+	size?: MantineSize;
+	/** Largura do edit */
+	width?: string | number | undefined;
+	/** Icone à direita */
+	icon?: ReactNode;
+	/** Dica para botão localizar */
+	tooltipIconSearch?: string;
+	/** Evento ocorre quando clica no botão localizar */
+	onActionSearchExecute?: () => void;
+	/** Texto sugestão do edit */
+	placeholder?: string;
+	/** Título do edit */
+	label?: string;
+	/** Descrição do edit */
+	description?: string;
+	/** Último erro ocorrido no edit */
+	error?: string;
+	/** Evento quando o foco sai do edit */
+	onFocusExit?: FocusEventHandler<T> | undefined;
+	/** Evento quando o edit recebe o foco */
+	onFocusEnter?: FocusEventHandler<T> | undefined;
+	/** Evento quando o valor do edit é alterado */
+	onChangeValue?: (value: any, event: any) => void;
+	onKeyDown?: (event: any) => void;
+	onKeyUp?: (event: any) => void;
+	/** Referência para o componente interno */
+	innerRef?: React.RefObject<HTMLInputElement> | undefined;
+}
+
+export function ArchbaseThemeEditor<T, ID>({ 
+	dataSource, 
+	dataField, 
+	value,
+	onChangeValue,
+	disabled = false,
+	readOnly = false,
+	...props 
+}: ArchbaseThemeEditorProps<T, ID>) {
+	// V1/V2 Compatibility Pattern
+	const {
+		isDataSourceV2,
+		currentValue,
+		handleValueChange,
+		dataSourceEvent,
+		loadDataSourceFieldValue,
+		isReadOnly
+	} = useArchbaseV1V2Compatibility<string>(
+		'ArchbaseThemeEditor',
+		dataSource,
+		dataField,
+		value || ''
+	);
+
+	// DataSource listener setup
+	useArchbaseDataSourceListener<T, ID>({
+		dataSource,
+		listener: dataSourceEvent
+	});
+
+	// Load initial value
+	useEffect(() => {
+		loadDataSourceFieldValue();
+	}, [loadDataSourceFieldValue]);
+
+	// Handle color change
+	const handleColorChange = useCallback((color: string) => {
+		handleValueChange(color, { target: { value: color } });
+		
+		// External callback
+		if (onChangeValue) {
+			onChangeValue(color, { target: { value: color } });
+		}
+	}, [handleValueChange, onChangeValue]);
+
+	return (
+		<Card>
+			<ColorPicker 
+				value={currentValue || '#000000'}
+				onChange={handleColorChange}
+				// disabled={disabled || isReadOnly}
+				{...props}
+			/>
+		</Card>
+	);
+}

package/src/treeviews.scss

@@ -0,0 +1,80 @@
+
+/*********
+***  TreeViews
+*********/
+.archbase-treeview {
+    min-height:100px;
+    padding:4px;
+    margin-bottom:20px;
+    font-size: 14px;
+    line-height: 20px;   
+    height: 100%;
+  }
+  
+  .archbase-treeview ul {
+    -webkit-padding-start: 28px;
+    margin: 0px 0px 0px 0px;
+  }
+  .archbase-treeview li {
+    list-style-type:none;
+    margin:0;
+    position:relative;
+    line-height: 16px;
+  }
+  .archbase-treeview li::before{
+    content:'';
+    left:-16px;
+    position:absolute;
+    right:auto
+  }
+  .archbase-treeview li::after {
+    content: '';
+    left: -16px;
+    position: absolute;
+    right: auto;
+  }
+  .archbase-treeview li::before {
+    border-left:1px dotted #999;
+    bottom: 30px;
+    height: 100%;
+    top: -2px;
+    width:1px;
+  }
+  .archbase-treeview li::after {
+    border-top: 1px dotted #999;
+    height: 20px;
+    top: 15px;
+    width: 22px;
+  }
+  .archbase-treeview li span {
+    -moz-border-radius:2px;
+    -webkit-border-radius:2px;
+    display:inline-block;
+    padding:2px;
+    text-decoration:none
+  }
+  
+  .archbase-treeview img {
+    vertical-align: middle;
+    height: auto;
+    max-width: 100%;
+  }
+  
+  .archbase-treeview li.parent_li>span {
+    cursor:pointer
+  }
+  .archbase-treeview>ul>li::before, .archbase-treeview>ul>li::after {
+    border:0
+  }
+  .archbase-treeview li:last-child::before {
+    height:18px
+  }
+  .archbase-treeview-item  {
+    background:auto;
+    margin: 1px 1px 1px 2px;
+  }
+  
+  .archbase-treeview-item:hover { 
+    margin: 1px 1px 1px 2px;
+  }
+  

package/src/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"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"}

package/src/types/index.ts

@@ -0,0 +1,115 @@
+// Common component types and interfaces
+import { CSSProperties, FocusEventHandler, RefObject } from 'react';
+import { MantineSize } from '@mantine/core';
+import { ArchbaseDataSource, IArchbaseDataSourceBase } from '@archbase/data';
+
+/**
+ * Base props for all Archbase components that support DataSource integration
+ */
+export interface ArchbaseComponentProps<T = any, ID = any> {
+  /** DataSource for data binding (V1 ou V2) */
+  dataSource?: IArchbaseDataSourceBase<T>;
+  /** Field name for data binding */
+  dataField?: string;
+  /** Whether the component is disabled */
+  disabled?: boolean;
+  /** Whether the component is read-only */
+  readOnly?: boolean;
+  /** Whether the field is required */
+  required?: boolean;
+  /** Custom CSS styles */
+  style?: CSSProperties;
+  /** Component size */
+  size?: MantineSize;
+  /** Component width */
+  width?: string | number;
+  /** Callback when value changes */
+  onChangeValue?: (value: any, event: any) => void;
+  /** Callback when component gains focus */
+  onFocusEnter?: FocusEventHandler<any>;
+  /** Callback when component loses focus */
+  onFocusExit?: FocusEventHandler<any>;
+  /** Reference to the underlying DOM element */
+  innerRef?: RefObject<any>;
+}
+
+/**
+ * Props for editor components (form inputs)
+ */
+export interface ArchbaseEditorProps<T = any, ID = any> extends ArchbaseComponentProps<T, ID> {
+  /** Current value */
+  value?: any;
+  /** Default value */
+  defaultValue?: any;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Label text */
+  label?: string;
+  /** Description text */
+  description?: string;
+  /** Error message */
+  error?: string;
+  /** Whether to show validation state */
+  withAsterisk?: boolean;
+}
+
+/**
+ * Props for display components
+ */
+export interface ArchbaseDisplayProps<T = any, ID = any> extends ArchbaseComponentProps<T, ID> {
+  /** Content to display */
+  children?: React.ReactNode;
+  /** Loading state */
+  loading?: boolean;
+  /** Empty state message */
+  emptyMessage?: string;
+}
+
+/**
+ * Event types for component interactions
+ */
+export interface ArchbaseComponentEvent<T = any> {
+  type: string;
+  data?: T;
+  target?: any;
+  originalEvent?: Event;
+}
+
+/**
+ * Validation result for components
+ */
+export interface ArchbaseValidationResult {
+  isValid: boolean;
+  error?: string;
+  warnings?: string[];
+}
+
+/**
+ * Theme configuration for components
+ */
+export interface ArchbaseThemeConfig {
+  primaryColor?: string;
+  fontFamily?: string;
+  borderRadius?: number;
+  shadows?: Record<string, string>;
+  spacing?: Record<string, number>;
+}
+
+/**
+ * Component configuration context
+ */
+export interface ArchbaseComponentConfig {
+  theme?: ArchbaseThemeConfig;
+  locale?: string;
+  dateFormat?: string;
+  timeFormat?: string;
+  numberFormat?: Intl.NumberFormatOptions;
+  validation?: {
+    validateOnChange?: boolean;
+    validateOnBlur?: boolean;
+    showErrorMessages?: boolean;
+  };
+}
+
+export type ArchbaseComponentSize = MantineSize;
+export type ArchbaseComponentVariant = 'filled' | 'outline' | 'light' | 'white' | 'default' | 'subtle';