@archbase/components 3.0.0

package/src/editors/ArchbaseChipGroup.tsx

@@ -0,0 +1,282 @@
+import { Chip, ChipVariant, Flex, Input } from '@mantine/core';
+import { uniqueId } from 'lodash';
+import React, { CSSProperties, ReactNode, useCallback, useEffect, useRef, useState } from 'react';
+import type { ArchbaseDataSource, DataSourceEvent, IArchbaseDataSourceBase } from '@archbase/data';
+import { DataSourceEventNames } from '@archbase/data';
+import { useArchbaseDidUpdate } from '@archbase/data';
+import { useArchbaseV1V2Compatibility } from '@archbase/data';
+import { useForceUpdate } from '@mantine/hooks';
+import { useValidationErrors } from '@archbase/core';
+
+export interface ArchbaseChipGroupProps<T, ID, O> {
+	/** Fonte de dados onde será atribuido o valor do ChipGroup (V1 ou V2) */
+	dataSource?: IArchbaseDataSourceBase<T>;
+	/** Campo onde deverá ser atribuido o valor do ChipGroup na fonte de dados */
+	dataField?: string;
+	/** Evento quando um valor é selecionado */
+	onSelectValue?: (value: any) => void;
+	/** Function que retorna o label de uma ChipItem */
+	getOptionLabel?: (option: O) => string;
+	/** Function que retorna o valor de uma ChipItem */
+	getOptionValue?: (option: O) => any;
+	/** Function que converte os valores do datasource para uma lista de chips selecionados do tipo padrão string[] ou string */
+	convertToValue?: (source: any) => string[] | string;
+	/** Function que converte o valor selecionado do tipo padrão string[] ou string para o tipo desejado */
+	convertFromValue?: (selected: string[] | string) => any;
+	/** Opções de seleção iniciais */
+	initialOptions?: O[] | object;
+	/** Coleção de ChipItem[] que representam as opções do select */
+	children?: ReactNode | ReactNode[];
+	/** Valor de entrada controlado */
+	value?: any;
+	/** Valor padrão de entrada não controlado */
+	defaultValue?: any;
+	/** Controla a aparência do chip, sendo padrão "filled" para dark theme e "outline" para light theme. ("outline" | "light" | "filled")*/
+	variant?: ChipVariant;
+	/** Tipo do chip */
+	type?: 'checkbox' | 'radio';
+	/** Permite que múltiplos valores sejam selecionados */
+	multiple?: boolean;
+	/** Estilo do chip */
+	style?: CSSProperties;
+	/** Último erro ocorrido no chip */
+	error?: string;
+	/** Título do edit */
+	label?: string;
+	/** Descrição do edit */
+	description?: string;
+	/** Último erro ocorrido no edit */
+}
+
+interface ChipItemProps {
+	label: string;
+	value: any;
+	key: string;
+}
+
+function buildOptions<O>(
+	initialOptions: O[] | object,
+	children: ReactNode | ReactNode[] | undefined,
+	getOptionLabel: (option: O) => string,
+	getOptionValue: (option: O) => any,
+): any {
+	if (!initialOptions && !children) {
+		return [];
+	}
+
+	if (children) {
+		return React.Children.toArray(children).map((item: any) => {
+			return { label: item.props.label, value: item.props.value.toString(), key: uniqueId('chip') };
+		});
+	}
+	if (Array.isArray(initialOptions)) {
+		return initialOptions.map((item: O) => {
+			return { label: getOptionLabel(item), value: getOptionValue(item), key: uniqueId('chip') };
+		});
+	}
+
+	return Object.keys(initialOptions).map((key) => ({
+		label: key,
+		value: initialOptions[key].toString(),
+		key: uniqueId('chip'),
+	}));
+}
+
+export function ArchbaseChipGroup<T, ID, O>({
+	dataSource,
+	dataField,
+	onSelectValue = () => {},
+	getOptionLabel = (o: any) => o.label,
+	getOptionValue = (o: any) => o.value,
+	convertToValue = (value) => (value === undefined || value === null ? '' : value.toString()),
+	convertFromValue,
+	value,
+	defaultValue,
+	initialOptions = [],
+	children,
+	variant,
+	type,
+	multiple = false,
+	error,
+	style,
+	label,
+	description,
+}: ArchbaseChipGroupProps<T, ID, O>) {
+	// 🔄 MIGRAÇÃO V1/V2: Hook de compatibilidade
+	const v1v2Compatibility = useArchbaseV1V2Compatibility<any>(
+		'ArchbaseChipGroup',
+		dataSource,
+		dataField,
+		multiple ? [] : ''
+	);
+
+	// Contexto de validação (opcional - pode não existir)
+	const validationContext = useValidationErrors();
+
+	// Chave única para o field
+	const fieldKey = `${dataField}`;
+
+	// Recuperar erro do contexto se existir
+	const contextError = validationContext?.getError(fieldKey);
+
+	// 🔄 MIGRAÇÃO V1/V2: Debug info para desenvolvimento
+	if (process.env.NODE_ENV === 'development' && dataSource) {
+	}
+	const [options, _setOptions] = useState<ChipItemProps[]>(
+		buildOptions<O>(initialOptions, children, getOptionLabel, getOptionValue),
+	);
+	const [selectedValue, setSelectedValue] = useState<any>(multiple ? [] : value);
+	const [internalError, setInternalError] = useState<string | undefined>(error);
+	const forceUpdate = useForceUpdate();
+
+	// ✅ CORRIGIDO: Apenas atualizar se o prop error vier definido
+	// Não limpar o internalError se o prop error for undefined
+	useEffect(() => {
+		if (error !== undefined && error !== internalError) {
+			setInternalError(error);
+		}
+	}, [error]);
+
+	const loadDataSourceFieldValue = () => {
+		let initialValue: any = multiple ? [] : value;
+
+		if (dataSource && dataField) {
+			const fieldValue = dataSource.getFieldValue(dataField);
+			if (multiple) {
+				const sourceArray = Array.isArray(fieldValue)
+					? fieldValue
+					: fieldValue === undefined || fieldValue === null
+						? []
+						: [fieldValue];
+
+				const mapped = sourceArray
+					.map((it) => convertToValue(it))
+					.flat()
+					.filter((it) => it !== undefined && it !== null && it !== '');
+
+				initialValue = Array.isArray(mapped) ? mapped : [mapped];
+			} else {
+				const converted = convertToValue(fieldValue);
+				initialValue = converted !== undefined && converted !== null ? converted : '';
+			}
+		}
+
+		setSelectedValue(initialValue);
+	};
+
+	const fieldChangedListener = useCallback(() => {
+		loadDataSourceFieldValue();
+	}, []);
+
+	const dataSourceEvent = useCallback((event: DataSourceEvent<T>) => {
+		if (dataSource && dataField) {
+			if (
+				event.type === DataSourceEventNames.dataChanged ||
+				event.type === DataSourceEventNames.recordChanged ||
+				event.type === DataSourceEventNames.afterScroll ||
+				event.type === DataSourceEventNames.afterCancel ||
+				event.type === DataSourceEventNames.afterEdit
+			) {
+				loadDataSourceFieldValue();
+				// 🔄 MIGRAÇÃO V1/V2: forceUpdate apenas para V1
+				if (!v1v2Compatibility.isDataSourceV2) {
+					forceUpdate();
+				}
+			}
+
+			if (event.type === DataSourceEventNames.onFieldError && event.fieldName === dataField) {
+				setInternalError(event.error);
+				// Salvar no contexto (se disponível)
+				validationContext?.setError(fieldKey, event.error);
+			}
+		}
+	}, [v1v2Compatibility.isDataSourceV2, validationContext, fieldKey]);
+
+	// Ref para manter callback sempre atualizado (corrige problema de closure desatualizada)
+	const dataSourceEventRef = useRef(dataSourceEvent);
+	useEffect(() => {
+		dataSourceEventRef.current = dataSourceEvent;
+	}, [dataSourceEvent]);
+
+	// Wrapper estável que delega para ref
+	const stableDataSourceEvent = useCallback((event: DataSourceEvent<T>) => {
+		dataSourceEventRef.current(event);
+	}, []);
+
+	// Registrar listeners com cleanup apropriado
+	useEffect(() => {
+		loadDataSourceFieldValue();
+		if (dataSource && dataField) {
+			const hasFieldListener = typeof (dataSource as any).addFieldChangeListener === 'function';
+			dataSource.addListener(stableDataSourceEvent);
+			if (hasFieldListener) {
+				(dataSource as any).addFieldChangeListener(dataField, fieldChangedListener);
+			}
+
+			return () => {
+				dataSource.removeListener(stableDataSourceEvent);
+				if (hasFieldListener) {
+					(dataSource as any).removeFieldChangeListener(dataField, fieldChangedListener);
+				}
+			};
+		}
+	}, [dataSource, dataField, stableDataSourceEvent, fieldChangedListener]);
+
+	useArchbaseDidUpdate(() => {
+		loadDataSourceFieldValue();
+	}, []);
+
+	const handleChange = (currentSelectedValue: string | string[]) => {
+		// ✅ Limpa erro quando usuário edita o campo (tanto do estado local quanto do contexto)
+		const hasError = internalError || contextError;
+		if (hasError) {
+			setInternalError(undefined);
+			validationContext?.clearError(fieldKey);
+		}
+
+		const nextValue = multiple
+			? Array.isArray(currentSelectedValue)
+				? currentSelectedValue
+				: currentSelectedValue
+					? [currentSelectedValue]
+					: []
+			: currentSelectedValue;
+
+		setSelectedValue((_prev) => nextValue);
+
+		let savedValue = nextValue;
+		if (convertFromValue) {
+			savedValue = convertFromValue(nextValue);
+		}
+		if (dataSource && !dataSource.isBrowsing() && dataField && dataSource.getFieldValue(dataField) !== savedValue) {
+			// 🔄 MIGRAÇÃO V1/V2: Usar handleValueChange do padrão de compatibilidade
+			v1v2Compatibility.handleValueChange(savedValue);
+		}
+
+		if (onSelectValue) {
+			onSelectValue(savedValue);
+		}
+	};
+
+	// Erro a ser exibido: local ou do contexto
+	const displayError = internalError || contextError;
+
+	return (
+		<Input.Wrapper label={label} error={displayError} description={description}>
+			<Chip.Group
+				defaultValue={undefined}
+				value={selectedValue}
+				onChange={handleChange}
+				multiple={multiple}
+			>
+				<Flex gap="sm" wrap="wrap" justify="flex-start" align="center">
+					{options.map((item) => (
+						<Chip style={style} value={item.value} key={item.key} variant={variant} type={type}>
+							{item.label}
+						</Chip>
+					))}
+				</Flex>
+			</Chip.Group>
+		</Input.Wrapper>
+	);
+}

package/src/editors/ArchbaseChipItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArchbaseChipItem.d.ts","sourceRoot":"","sources":["ArchbaseChipItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,MAAM,WAAW,qBAAqB,CAAC,CAAC;IACvC,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,KAAK,CAAC,EAAE,CAAC,CAAC;IACV,wIAAwI;IACxI,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,mBAAmB;IACnB,IAAI,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAC5B,qBAAqB;IACrB,KAAK,CAAC,EAAE,aAAa,CAAC;CACtB;AAED,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,MAAM,EAAE,qBAAqB,CAAC,CAAC,CAAC,OAEnE;yBAFe,gBAAgB"}

package/src/editors/ArchbaseChipItem.tsx

@@ -0,0 +1,21 @@
+import { ChipVariant } from '@mantine/core';
+import { CSSProperties } from 'react';
+
+export interface ArchbaseChipItemProps<T> {
+	/** Texto a ser apresentado no select */
+	label: string;
+	/** Cor de fundo do item */
+	value?: T;
+	/** Controla a aparência do chip, sendo padrão "filled" para dark theme e "outline" para light theme. ("outline" | "light" | "filled")*/
+	variant?: ChipVariant;
+	/** Tipo do chip */
+	type?: 'checkbox' | 'radio';
+	/** Estilo do chip */
+	style?: CSSProperties;
+}
+
+export function ArchbaseChipItem<T>(_props: ArchbaseChipItemProps<T>) {
+	return null;
+}
+
+ArchbaseChipItem.displayName = 'ArchbaseChipItem';

package/src/editors/ArchbaseColorPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArchbaseColorPicker.d.ts","sourceRoot":"","sources":["ArchbaseColorPicker.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,wBAAwB;CAAG;AAE5C,wBAAgB,mBAAmB,CAAC,MAAM,EAAE,wBAAwB,2CAEnE"}

package/src/editors/ArchbaseColorPicker.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+export interface ArchbaseColorPickerProps {}
+
+export function ArchbaseColorPicker(_props: ArchbaseColorPickerProps) {
+  return <div></div>
+}

package/src/editors/ArchbaseCountdownProgress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArchbaseCountdownProgress.d.ts","sourceRoot":"","sources":["ArchbaseCountdownProgress.tsx"],"names":[],"mappings":"AAQA,MAAM,WAAW,8BAA8B;IAC7C,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,yBAAyB,0BAA2B,8BAA8B,4CA4C9F,CAAC"}

package/src/editors/ArchbaseCountdownProgress.tsx

@@ -0,0 +1,57 @@
+import React, { useState, useEffect } from 'react';
+import { Progress, Text } from '@mantine/core';
+import dayjs from 'dayjs';
+import duration from 'dayjs/plugin/duration';
+import { useArchbaseTranslation } from '@archbase/core';
+dayjs.extend(duration);
+
+
+export interface ArchbaseCountdownProgressProps {
+  targetDate: string | Date;
+  color?: string;
+}
+
+export const ArchbaseCountdownProgress = ({ targetDate, color }: ArchbaseCountdownProgressProps) => {
+  const { t } = useArchbaseTranslation();
+  
+  const calculateTimeLeft = () => {
+    const now = dayjs();
+    const end = dayjs(targetDate);
+    const diff = end.diff(now);
+
+    return {
+      days: Math.floor(dayjs.duration(diff).asDays()),
+      hours: dayjs.duration(diff).hours(),
+      minutes: dayjs.duration(diff).minutes(),
+    };
+  };
+
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, [targetDate]);
+
+  const totalDuration = dayjs(targetDate).diff(dayjs());
+  const progress = ((totalDuration - dayjs.duration(timeLeft).asMilliseconds()) / totalDuration) * 100;
+
+  return (
+    <div>
+      <Progress.Root size="xl">
+        <Progress.Section value={progress} color={color}>
+          <Progress.Label>
+            {`${timeLeft.days}d ${timeLeft.hours}h ${timeLeft.minutes}m`}
+          </Progress.Label>
+        </Progress.Section>
+      </Progress.Root>
+      <Text ta="center" mt="sm">
+        {`${t('archbase:Faltam {{days}} dias, {{hours}} horas e {{minutes}} minutos')}`.replace('{{days}}', String(timeLeft.days)).replace('{{hours}}', String(timeLeft.hours)).replace('{{minutes}}', String(timeLeft.minutes))}
+      </Text>
+    </div>
+  );
+};
+

package/src/editors/ArchbaseCronExpressionEdit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArchbaseCronExpressionEdit.d.ts","sourceRoot":"","sources":["ArchbaseCronExpressionEdit.tsx"],"names":[],"mappings":"AAMA,UAAU,+BAA+B;IACvC,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,iEAAiE;IACjE,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,gCAAgC;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,0BAA0B,CAAC,EACzC,KAAK,EACL,QAAQ,EACR,KAAK,EACL,KAAK,EACL,QAAgB,EAChB,WAA8B,EAC/B,EAAE,+BAA+B,2CAyDjC"}

package/src/editors/ArchbaseCronExpressionEdit.tsx

@@ -0,0 +1,86 @@
+import React, { useState } from 'react';
+import { TextInput, ActionIcon, Modal, Button, Group } from '@mantine/core';
+import { IconClock } from '@tabler/icons-react';
+import { ArchbaseCronExpressionEditor } from './ArchbaseCronExpressionEditor';
+
+
+interface ArchbaseCronExpressionEditProps {
+  /** The current cron expression value */
+  value: string;
+  /** Callback function to handle changes in the cron expression */
+  onChange: (newValue: string) => void;
+  /** Label for the input field */
+  label?: string;
+  /** Error message to display (if any) */
+  error?: string;
+  /** Whether the component is in a read-only state */
+  readOnly?: boolean;
+  /** Placeholder text for the input field */
+  placeholder?: string;
+}
+
+export function ArchbaseCronExpressionEdit({
+  value,
+  onChange,
+  label,
+  error,
+  readOnly = false,
+  placeholder = 'Expressão Cron'
+}: ArchbaseCronExpressionEditProps) {
+  const [modalOpened, setModalOpened] = useState(false);
+  const [tempValue, setTempValue] = useState(value);
+
+  const handleSave = () => {
+    onChange(tempValue);
+    setModalOpened(false);
+  };
+
+  const handleCancel = () => {
+    setTempValue(value);
+    setModalOpened(false);
+  };
+
+  const handleModalOpen = () => {
+    setTempValue(value);
+    setModalOpened(true);
+  };
+
+  return (
+    <>
+      <TextInput
+        value={value}
+        readOnly={true}
+        label={label}
+        error={error}
+        placeholder={placeholder}
+        rightSection={
+          !readOnly && (
+            <ActionIcon onClick={handleModalOpen} disabled={readOnly}>
+              <IconClock size="1.1rem" />
+            </ActionIcon>
+          )
+        }
+      />
+
+      <Modal 
+        opened={modalOpened} 
+        onClose={handleCancel}
+        title="Editar Expressão Cron"
+        size="lg"
+      >
+        <ArchbaseCronExpressionEditor
+          initialValue={tempValue}
+          onChange={setTempValue}
+        />
+        <Group justify="flex-end" mt="xl">
+          <Button variant="outline" onClick={handleCancel}>
+            Cancelar
+          </Button>
+          <Button onClick={handleSave}>
+            Salvar
+          </Button>
+        </Group>
+      </Modal>
+    </>
+  );
+}

package/src/editors/ArchbaseCronExpressionEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArchbaseCronExpressionEditor.d.ts","sourceRoot":"","sources":["ArchbaseCronExpressionEditor.tsx"],"names":[],"mappings":"AAmBA,MAAM,MAAM,iCAAiC,GAAG;IAC5C,QAAQ,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAA;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,EAAE,GAAG,CAAA;IACjB,KAAK,CAAC,EAAE,GAAG,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,wBAAgB,4BAA4B,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAgB,EAAE,KAAK,EAAE,EAAE,iCAAiC,2CAyGzI"}

package/src/editors/ArchbaseCronExpressionEditor.tsx

@@ -0,0 +1,133 @@
+import { MultiSelect, Stack, Text } from "@mantine/core";
+import React, { useEffect, useState } from "react";
+
+function translateCronToPortuguese(cron) {
+    const daysOfWeek = ['Domingo', 'Segunda', 'Terça', 'Quarta', 'Quinta', 'Sexta', 'Sábado'];
+    const months = ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro'];
+
+    let description = "Executar: ";
+
+    description += cron.month === '*' ? "Todos os meses" : `Nos meses de ${cron.month.split(',').map(m => isNaN(m) ? m : months[m - 1]).join(', ')}`;
+    description += cron.dayOfMonth === '*' ? ", em todos os dias" : `, nos dias ${cron.dayOfMonth}`;
+    description += cron.dayOfWeek === '*' ? "" : `, e nas ${cron.dayOfWeek.split(',').map(d => isNaN(d) ? d : daysOfWeek[parseInt(d, 10)]).join(', ')}`;
+    description += cron.hours === '*' ? ", a qualquer hora" : `, às ${cron.hours.split(',').map(h => `${h}h`).join(', ')}`;
+    description += cron.minutes === '*' ? ", e a qualquer minuto" : `, e nos minutos ${cron.minutes}`;
+    description += cron.seconds === '*' ? "" : `, e nos segundos ${cron.seconds}`;
+
+    return description;
+}
+
+export type ArchbaseCronExpressionEditorProps = {
+    onChange: (value: any) => void
+    readOnly?: boolean
+    initialValue: any
+    label?: any
+    error?: string
+}
+
+export function ArchbaseCronExpressionEditor({ label, initialValue, onChange, readOnly = false, error }: ArchbaseCronExpressionEditorProps) {
+    const [cron, setCron] = useState({
+        seconds: '0',
+        minutes: '*',
+        hours: '*',
+        dayOfMonth: '*',
+        month: '*',
+        dayOfWeek: '*'
+    });
+
+    useEffect(() => {
+        const parts = initialValue ? initialValue.split(' ') : [];
+        if (parts.length === 6) {
+            setCron({
+                seconds: parts[0],
+                minutes: parts[1],
+                hours: parts[2],
+                dayOfMonth: parts[3],
+                month: parts[4],
+                dayOfWeek: parts[5]
+            });
+        } else {
+            // Define os valores padrão ou deixa em branco se o tamanho da string for inadequado
+            setCron({
+                seconds: '0',
+                minutes: '*',
+                hours: '*',
+                dayOfMonth: '*',
+                month: '*',
+                dayOfWeek: '*'
+            });
+        }
+    }, [initialValue]);
+
+    const updateCronPart = (part, values) => {
+        const updatedCron = { ...cron, [part]: values.length > 0 ? values.join(',') : '*' };
+        setCron(updatedCron);
+        const value = `${updatedCron.seconds} ${updatedCron.minutes} ${updatedCron.hours} ${updatedCron.dayOfMonth} ${updatedCron.month} ${updatedCron.dayOfWeek}`;
+        if (!readOnly){
+            onChange(value);
+        }
+    };
+
+    const cronOptions = {
+        seconds: Array.from({ length: 60 }, (_, i) => ({ value: `${i}`, label: `${i} segundo(s)` })),
+        minutes: Array.from({ length: 60 }, (_, i) => ({ value: `${i}`, label: `${i} minuto(s)` })),
+        hours: Array.from({ length: 24 }, (_, i) => ({ value: `${i}`, label: `${i} hora(s)` })),
+        dayOfMonth: Array.from({ length: 31 }, (_, i) => ({ value: `${i + 1}`, label: `${i + 1} dia(s)` })),
+        month: [
+            { value: '1', label: 'Janeiro' },
+            { value: '2', label: 'Fevereiro' },
+            { value: '3', label: 'Março' },
+            { value: '4', label: 'Abril' },
+            { value: '5', label: 'Maio' },
+            { value: '6', label: 'Junho' },
+            { value: '7', label: 'Julho' },
+            { value: '8', label: 'Agosto' },
+            { value: '9', label: 'Setembro' },
+            { value: '10', label: 'Outubro' },
+            { value: '11', label: 'Novembro' },
+            { value: '12', label: 'Dezembro' }
+        ],
+        dayOfWeek: [
+            { value: '0', label: 'Domingo' },
+            { value: '1', label: 'Segunda' },
+            { value: '2', label: 'Terça' },
+            { value: '3', label: 'Quarta' },
+            { value: '4', label: 'Quinta' },
+            { value: '5', label: 'Sexta' },
+            { value: '6', label: 'Sábado' }
+        ]
+    };
+
+    return (
+        <div>
+            {label && <div><strong>{label}</strong></div>}
+            {Object.keys(cronOptions).map((part) => (
+                <MultiSelect
+                    key={part}
+                    data={cronOptions[part]}
+                    label={{
+                        seconds: 'Segundos',
+                        minutes: 'Minutos',
+                        hours: 'Horas',
+                        dayOfMonth: 'Dia do Mês',
+                        month: 'Mês',
+                        dayOfWeek: 'Dia da Semana'
+                    }[part]}
+                    placeholder="Selecione os valores"
+                    value={cron[part].split(',').filter((v) => v !== '*')}
+                    onChange={(values) => updateCronPart(part, values)}
+                    searchable
+                    clearable
+                    disabled={readOnly}
+                    error={error && part === 'minutes' ? error : undefined} 
+                />
+            ))}
+            <Stack gap={"xs"}>
+                <strong>Expressão Cron:</strong> 
+                <Text c="blue">{`${cron.seconds} ${cron.minutes} ${cron.hours} ${cron.dayOfMonth} ${cron.month} ${cron.dayOfWeek}`}</Text>
+                <strong>Descrição:</strong> 
+                <Text c="blue">{translateCronToPortuguese(cron)}</Text>
+            </Stack>
+        </div>
+    );
+}

package/src/editors/ArchbaseDatePicker.tsx

@@ -0,0 +1,3 @@
+// TODO: Implement ArchbaseDatePicker component
+export { DatePicker as ArchbaseDatePicker } from '@mantine/dates';
+export type { DatePickerProps as ArchbaseDatePickerProps } from '@mantine/dates';

package/src/editors/ArchbaseDatePickerEdit.d.ts.map

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