@arquimedes.co/eureka-forms 3.0.50-test → 3.0.52-new-steps

package/dist/FormSteps/CalendarStep/MaterialCalendarStep/MaterialCalendarStep.module.css

@@ -0,0 +1,531 @@
+/* =========================================================================
+   MaterialCalendarStep
+   ========================================================================= */
+
+.container {
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+    padding-top: 5px;
+    padding-bottom: 0;
+    box-sizing: border-box;
+}
+
+/* =========================================================================
+   Toolbar
+   ========================================================================= */
+
+.toolbar {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 6px 2px 8px;
+    flex-wrap: wrap;
+}
+
+/* View switcher */
+
+.viewSwitcher {
+    display: flex;
+    border: 1px solid var(--eureka-outline, #ddd);
+    border-radius: 8px;
+    overflow: hidden;
+}
+
+.viewBtn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 5px 10px;
+    border: none;
+    border-right: 1px solid var(--eureka-outline, #ddd);
+    background: transparent;
+    cursor: pointer;
+    color: var(--eureka-text, #555);
+    opacity: 0.55;
+    transition: background 0.15s, opacity 0.15s;
+}
+
+.viewBtn:last-child {
+    border-right: none;
+}
+
+.viewBtn:hover {
+    background: rgba(0, 0, 0, 0.04);
+    opacity: 0.85;
+}
+
+.viewBtnActive {
+    background: var(--eureka-primary, #1976d2) !important;
+    color: #fff !important;
+    opacity: 1 !important;
+}
+
+/* Nav */
+
+.navGroup {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    flex: 1;
+    min-width: 0;
+}
+
+.navBtn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+    border: none;
+    border-radius: 6px;
+    background: transparent;
+    cursor: pointer;
+    color: var(--eureka-text, #555);
+    opacity: 0.55;
+    transition: opacity 0.15s, background 0.15s;
+}
+
+.navBtn:hover {
+    background: rgba(0, 0, 0, 0.05);
+    opacity: 1;
+}
+
+.navLabel {
+    font-weight: 600;
+    font-size: 14px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-transform: capitalize;
+}
+
+.eventBadge {
+    font-size: 11px;
+    padding: 3px 8px;
+    border-radius: 100px;
+    background: var(--eureka-primary, #1976d2);
+    color: #fff;
+    font-weight: 500;
+    white-space: nowrap;
+}
+
+.hintText {
+    font-size: 11px;
+    opacity: 0.4;
+    white-space: nowrap;
+    margin-left: auto;
+}
+
+/* =========================================================================
+   Calendar card container
+   ========================================================================= */
+
+.calendarCard {
+    border: 1px solid var(--eureka-outline, #e0e0e0);
+    border-radius: 12px;
+    overflow: hidden;
+    background: var(--eureka-bg, #fff);
+}
+
+/* =========================================================================
+   Time grid (week / day)
+   ========================================================================= */
+
+.gridWrapper {
+    display: flex;
+    flex-direction: column;
+}
+
+/* Header */
+
+.gridHeader {
+    display: grid;
+    border-bottom: 2px solid var(--eureka-outline, #e0e0e0);
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    background: var(--eureka-bg, #fff);
+}
+
+.cornerCell {
+    width: 48px;
+    border-right: 1px solid var(--eureka-outline, #e0e0e0);
+}
+
+.dayHeader {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 8px 4px;
+    cursor: pointer;
+    border-right: 1px solid var(--eureka-outline, #e0e0e0);
+    transition: background 0.1s;
+}
+
+.dayHeader:last-child {
+    border-right: none;
+}
+
+.dayHeader:hover {
+    background: rgba(0, 0, 0, 0.03);
+}
+
+.dayHeaderToday {
+    color: var(--eureka-primary, #1976d2);
+}
+
+.dayHeaderDow {
+    font-size: 11px;
+    text-transform: capitalize;
+    opacity: 0.6;
+}
+
+.dayHeaderNum {
+    font-size: 18px;
+    font-weight: 700;
+    line-height: 1.1;
+}
+
+.todayCircle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    background: var(--eureka-primary, #1976d2);
+    color: #fff !important;
+}
+
+/* Body */
+
+.gridBody {
+    overflow-y: auto;
+    max-height: 520px;
+}
+
+.gridInner {
+    display: grid;
+}
+
+/* Hour labels */
+
+.hourLabels {
+    border-right: 1px solid var(--eureka-outline, #e0e0e0);
+}
+
+.hourLabel {
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-end;
+    padding-right: 6px;
+    padding-top: 2px;
+    font-size: 10px;
+    opacity: 0.45;
+    box-sizing: border-box;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
+}
+
+/* Day columns */
+
+.dayColumn {
+    position: relative;
+    border-right: 1px solid var(--eureka-outline, #e0e0e0);
+    cursor: crosshair;
+    box-sizing: border-box;
+}
+
+.dayColumn:last-child {
+    border-right: none;
+}
+
+.hourLine {
+    position: absolute;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: rgba(0, 0, 0, 0.05);
+}
+
+/* =========================================================================
+   Event blocks
+   ========================================================================= */
+
+.eventBlock {
+    position: absolute;
+    left: 2px;
+    right: 2px;
+    border-radius: 4px;
+    padding: 2px 4px;
+    cursor: default;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    z-index: 1;
+    opacity: 0.9;
+    transition: opacity 0.1s;
+    box-sizing: border-box;
+}
+
+.eventBlock:hover {
+    opacity: 1;
+    z-index: 2;
+}
+
+.eventLabel {
+    font-size: 11px;
+    font-weight: 600;
+    color: #fff;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-height: 1.3;
+}
+
+.eventTime {
+    font-size: 10px;
+    color: rgba(255, 255, 255, 0.8);
+    white-space: nowrap;
+}
+
+.eventDeleteBtn {
+    position: absolute;
+    top: 2px;
+    right: 2px;
+    background: rgba(0, 0, 0, 0.25);
+    border: none;
+    border-radius: 3px;
+    cursor: pointer;
+    color: #fff;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    padding: 1px;
+    line-height: 1;
+}
+
+.eventBlock:hover .eventDeleteBtn {
+    display: flex;
+}
+
+/* =========================================================================
+   Month view
+   ========================================================================= */
+
+.monthGrid {
+    display: grid;
+    grid-template-columns: repeat(7, 1fr);
+}
+
+.monthDowHeader {
+    padding: 8px 4px;
+    font-size: 11px;
+    font-weight: 600;
+    text-align: center;
+    opacity: 0.5;
+    text-transform: uppercase;
+    letter-spacing: 0.4px;
+    border-bottom: 1px solid var(--eureka-outline, #e0e0e0);
+}
+
+.monthCell {
+    min-height: 80px;
+    padding: 4px;
+    border-right: 1px solid var(--eureka-outline, #e0e0e0);
+    border-bottom: 1px solid var(--eureka-outline, #e0e0e0);
+    cursor: pointer;
+    transition: background 0.1s;
+    overflow: hidden;
+}
+
+.monthCell:nth-child(7n) {
+    border-right: none;
+}
+
+.monthCell:hover {
+    background: rgba(0, 0, 0, 0.02);
+}
+
+.monthCellOutside {
+    opacity: 0.3;
+}
+
+.monthCellToday .monthCellNum {
+    color: var(--eureka-primary, #1976d2);
+}
+
+.monthCellNum {
+    font-size: 13px;
+    font-weight: 600;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    margin-bottom: 2px;
+    border-radius: 50%;
+}
+
+.monthEventDot {
+    font-size: 10px;
+    color: #fff;
+    border-radius: 3px;
+    padding: 1px 4px;
+    margin-bottom: 2px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.monthMoreLabel {
+    font-size: 10px;
+    opacity: 0.5;
+    padding-left: 2px;
+}
+
+/* =========================================================================
+   Create popover
+   ========================================================================= */
+
+.popoverPaper {
+    border-radius: 12px !important;
+    box-shadow: 0 8px 32px rgba(0,0,0,0.15) !important;
+    min-width: 260px;
+    max-width: 300px;
+}
+
+.popoverHeader {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 12px 14px 8px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+}
+
+.popoverTitle {
+    font-weight: 600;
+    font-size: 14px;
+}
+
+.popoverClose {
+    background: none;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    opacity: 0.5;
+    padding: 2px;
+    border-radius: 4px;
+}
+
+.popoverClose:hover { opacity: 1; }
+
+.popoverBody {
+    padding: 12px 14px 14px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.popoverLabel {
+    font-size: 11px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.4px;
+    opacity: 0.5;
+    margin-bottom: -4px;
+}
+
+.categoryGrid {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+}
+
+.categoryChip {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    padding: 4px 10px;
+    border: 1px solid var(--eureka-outline, #ddd);
+    border-radius: 100px;
+    background: transparent;
+    cursor: pointer;
+    font-size: 12px;
+    transition: border-color 0.15s, background 0.15s;
+}
+
+.categoryChip:hover {
+    border-color: var(--eureka-primary, #1976d2);
+}
+
+.categoryChipActive {
+    border-color: transparent !important;
+}
+
+.categoryDot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    flex-shrink: 0;
+}
+
+.popoverInput {
+    width: 100%;
+    padding: 7px 10px;
+    border: 1px solid var(--eureka-outline, #ccc);
+    border-radius: 6px;
+    font-size: 13px;
+    font-family: inherit;
+    box-sizing: border-box;
+    background: transparent;
+    color: inherit;
+    outline: none;
+    transition: border-color 0.15s;
+}
+
+.popoverInput:focus {
+    border-color: var(--eureka-primary, #1976d2);
+}
+
+.timeRow {
+    display: flex;
+    align-items: flex-end;
+    gap: 8px;
+}
+
+.timeRow > div {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.timeDash {
+    font-size: 16px;
+    font-weight: 300;
+    opacity: 0.4;
+    padding-bottom: 6px;
+}
+
+.createBtn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    padding: 9px 16px;
+    border: none;
+    border-radius: 8px;
+    color: #fff;
+    font-size: 13px;
+    font-weight: 600;
+    cursor: pointer;
+    margin-top: 4px;
+    transition: opacity 0.15s;
+    font-family: inherit;
+}
+
+.createBtn:hover {
+    opacity: 0.9;
+}

package/dist/FormSteps/DatePickerStep/DatePickerStep.required.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/FormSteps/DatePickerStep/DatePickerStep.required.test.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import '@testing-library/jest-dom';
+import { Provider } from 'react-redux';
+import { useForm, FormProvider } from 'react-hook-form';
+import { configureStore } from '@reduxjs/toolkit';
+import { EurekaFormsReducer, defaultRootState } from '../../Utils/store';
+import { RootApi } from '../../Utils/_api';
+import FormStepTypes from '../../constants/FormStepTypes';
+import { StoreContext } from '../../Utils/StoreContext';
+import { IdFormContext } from '../../Contexts/FormContext';
+import FormContext from '../../Contexts/FormContext';
+import SectionContext from '../../Contexts/SectionContext';
+import MaterialProviders from '../../Utils/MaterialProviders';
+import InternalFormStyle from '../../constants/InternalFormStyle';
+import DatePickerStep from './DatePickerStep';
+const STORY_FORM_ID = 'STORY_FORM';
+const requiredDateStep = {
+    id: 'datepicker-step',
+    idSection: 'SECTION_1',
+    stepPath: ['datepicker-step'],
+    type: FormStepTypes.DATEPICKER,
+    label: 'Fecha de nacimiento',
+    description: null,
+    required: true,
+    pickTime: false,
+    size: 4,
+    editable: true,
+};
+const form = {
+    firstSection: 'SECTION_1',
+    sections: {
+        SECTION_1: { id: 'SECTION_1', name: 'Sección 1', steps: [], nextSection: null },
+    },
+    steps: { 'datepicker-step': { ...requiredDateStep } },
+    confirmationMessage: { blocks: [], entityMap: {} },
+    showLink: false,
+    size: { blockSize: 200, blockNum: 4, spacingSize: 10 },
+};
+function makeStore() {
+    return configureStore({
+        reducer: { forms: EurekaFormsReducer, [RootApi.reducerPath]: RootApi.reducer },
+        preloadedState: { forms: { [STORY_FORM_ID]: defaultRootState } },
+        middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(RootApi.middleware),
+    });
+}
+function Harness({ onValid, pickTime, required = true, onReady, }) {
+    const methods = useForm({ mode: 'onTouched' });
+    const step = { ...requiredDateStep, required, pickTime: !!pickTime };
+    useEffect(() => {
+        onReady?.(methods);
+    }, [methods, onReady]);
+    return (_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(Provider, { store: makeStore(), context: StoreContext, children: _jsx(IdFormContext.Provider, { value: STORY_FORM_ID, children: _jsx(FormContext.Provider, { value: form, children: _jsx(SectionContext.Provider, { value: "SECTION_1", children: _jsx(FormProvider, { ...methods, children: _jsxs("form", { onSubmit: (e) => void methods.handleSubmit(onValid)(e), children: [_jsx(DatePickerStep, { step: step, editable: true }), _jsx("button", { type: "submit", children: "Enviar" })] }) }) }) }) }) }) }));
+}
+describe('DatePickerStep required validation', () => {
+    it('does not leak a defaultValue Date into the form value on mount', () => {
+        let methods;
+        render(_jsx(Harness, { onValid: vi.fn(), onReady: (m) => (methods = m) }));
+        expect(methods?.getValues('datepicker-step') ?? null).toBeNull();
+    });
+    it('blocks submit and shows the obligatorio error when a required date is left empty (handleSubmit)', async () => {
+        const onValid = vi.fn();
+        render(_jsx(Harness, { onValid: onValid }));
+        await userEvent.click(screen.getByRole('button', { name: 'Enviar' }));
+        await waitFor(() => {
+            expect(screen.getByText('Este campo es obligatorio')).toBeInTheDocument();
+        });
+        expect(onValid).not.toHaveBeenCalled();
+    });
+    it('reports invalid via trigger() like the real ColumnForm submit path', async () => {
+        let methods;
+        render(_jsx(Harness, { onValid: vi.fn(), onReady: (m) => (methods = m) }));
+        const valid = await methods.trigger(undefined, { shouldFocus: true });
+        expect(valid).toBe(false);
+    });
+    it('pickTime required: trigger() reports invalid when empty', async () => {
+        let methods;
+        render(_jsx(Harness, { onValid: vi.fn(), pickTime: true, onReady: (m) => (methods = m) }));
+        const valid = await methods.trigger(undefined, { shouldFocus: true });
+        expect(valid).toBe(false);
+    });
+    it('control: a NON-required empty date submits (proves the required flag is the deciding factor)', async () => {
+        const onValid = vi.fn();
+        render(_jsx(Harness, { onValid: onValid, required: false }));
+        await userEvent.click(screen.getByRole('button', { name: 'Enviar' }));
+        await waitFor(() => {
+            expect(onValid).toHaveBeenCalledTimes(1);
+        });
+        expect(screen.queryByText('Este campo es obligatorio')).not.toBeInTheDocument();
+    });
+});

package/dist/FormSteps/LocationStep/LocationStep.d.ts

@@ -0,0 +1,10 @@
+import { LocationStep } from '../../@Types/LocationFormStep';
+import { StepProps } from '../Step';
+export interface LocationStepProps extends StepProps {
+    /** The LocationStep to display */
+    step: LocationStep;
+    /** The icon to display */
+    IconComponent?: React.ElementType;
+}
+declare function LocationStepComponent(props: LocationStepProps): JSX.Element;
+export default LocationStepComponent;

package/dist/FormSteps/LocationStep/LocationStep.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormStyleTypes } from '../../constants/FormStepTypes';
+import MaterialLocationStep from './MaterialLocationStep/MaterialLocationStep';
+import { useAppSelector } from '../../hooks';
+function LocationStepComponent(props) {
+    const { formStyle } = useAppSelector((state) => state.global);
+    switch (formStyle.type) {
+        case FormStyleTypes.MATERIAL:
+        default: {
+            return _jsx(MaterialLocationStep, { ...props });
+        }
+    }
+}
+export default LocationStepComponent;

package/dist/FormSteps/LocationStep/MaterialLocationStep/MaterialLocationStep.d.ts

@@ -0,0 +1,3 @@
+import { LocationStepProps } from '../LocationStep';
+declare function MaterialLocationStep({ step, editable }: LocationStepProps): JSX.Element;
+export default MaterialLocationStep;

package/dist/FormSteps/LocationStep/MaterialLocationStep/MaterialLocationStep.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { AddressFieldMode, LocationInputMode } from '../../../@Types/LocationFormStep';
+import { useFormStep } from '../../StepHooks';
+import FormContext from '../../../Contexts/FormContext';
+import { selectBreakPoint, useAppSelector } from '../../../hooks';
+import { calcStepWidth } from '../../StepFunctions';
+import ErkLocationField from '../../../Shared/ErkLocationField/ErkLocationField';
+import { fieldConfig } from '../../../Shared/ErkLocationField/addressFields';
+import { validateRestrictions } from '../../../Shared/ErkLocationField/locationRestrictions';
+import styles from './MaterialLocationStep.module.css';
+function MaterialLocationStep({ step, editable }) {
+    const currentBreakPoint = useAppSelector(selectBreakPoint);
+    const { postview } = useAppSelector((state) => state.global);
+    const form = useContext(FormContext);
+    const isReadOnly = !editable || postview;
+    const widthStyle = currentBreakPoint <= step.size ? '100%' : calcStepWidth(step.size, form.size);
+    const { ref, value, onChange, error } = useFormStep(step, {
+        defaultValue: step.defaultValue ?? null,
+        rules: {
+            required: step.required ? 'La ubicación es obligatoria' : undefined,
+            validate: (val) => {
+                if (!val)
+                    return step.required ? 'La ubicación es obligatoria' : true;
+                if (val.source === LocationInputMode.MANUAL) {
+                    // Un campo es obligatorio en manual solo si no está omitido (FIXED lo llena solo).
+                    const detail = val.addressDetail;
+                    const isRequired = (key) => fieldConfig(step.addressFields, key).mode !== AddressFieldMode.OMIT;
+                    if (step.required && isRequired('street') && !detail?.street)
+                        return 'Por favor completa la calle en el formulario manual.';
+                    if (step.required && isRequired('city') && !detail?.city)
+                        return 'Por favor completa la ciudad en el formulario manual.';
+                    if (step.required && isRequired('country') && !detail?.country)
+                        return 'Por favor completa el país en el formulario manual.';
+                    return true;
+                }
+                if (val.latitude === undefined || val.longitude === undefined) {
+                    return step.required ? 'Coordenadas geográficas no capturadas.' : true;
+                }
+                // Restricciones geográficas (radio / geofence).
+                return validateRestrictions(val.latitude, val.longitude, step.restrictions) ?? true;
+            },
+        },
+    });
+    return (_jsxs("div", { className: styles.container, style: { width: widthStyle }, children: [step.label && _jsxs("div", { className: styles.label, children: [step.label, step.required && _jsx("span", { className: styles.required, children: " *" })] }), _jsx(ErkLocationField, { value: value, onChange: onChange, allowedModes: step.allowedModes, defaultMode: step.defaultMode, addressFields: step.addressFields, helperText: error?.message ?? step.description, required: step.required, error: !!error, readOnly: isReadOnly, inputRef: ref })] }));
+}
+export default MaterialLocationStep;