@asteby/metacore-runtime-react 23.5.1 → 23.7.0

package/src/dialogs/dynamic-record.tsx

@@ -52,6 +52,7 @@ import { DynamicSelectField, OptionLead, OptionThumb } from '../dynamic-select-f
 import { DynamicRelations } from '../dynamic-relations'
 import { useOptionsResolver, type ResolvedOption } from '../use-options-resolver'
 import { getFieldRef } from '../dynamic-form-schema'
+import { FieldCell } from '../field-grid'
 import { isNilUuid, normalizeNilUuid } from '../nil-uuid'
 import { DynamicIcon, isLucideIconName } from '../dynamic-icon'
 import { humanizeToken } from '../dynamic-columns-helpers'
@@ -767,18 +768,22 @@ export function DynamicRecordDialog({
                         <ImageUrlContext.Provider value={getImageUrl}>
                         <TimeZoneContext.Provider value={timeZone}>
                         <CurrencyContext.Provider value={currency}>
+                            {/* The grid IS the form element (the footer submit
+                                button targets it by id). FieldCell gives each
+                                cell `min-w-0` so a long select/input value can't
+                                blow the two columns past the dialog width. */}
                             <form
                                 id="dynamic-record-form"
                                 onSubmit={handleSubmit}
-                                className="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-4"
+                                className="grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2"
                             >
                                 {visibleFields.map(field => {
-                                    const isFullWidth = field.type === 'textarea'
+                                    const isFullWidth =
+                                        field.type === 'textarea' ||
+                                        field.widget === 'textarea' ||
+                                        field.widget === 'richtext'
                                     return (
-                                        <div
-                                            key={field.key}
-                                            className={isFullWidth ? 'sm:col-span-2' : ''}
-                                        >
+                                        <FieldCell key={field.key} fullWidth={isFullWidth}>
                                             <FieldRow
                                                 field={field}
                                                 record={record}
@@ -788,12 +793,12 @@ export function DynamicRecordDialog({
                                                     setFormValues((prev: Record<string, any>) => ({ ...prev, [field.key]: val }))
                                                 }
                                             />
-                                        </div>
+                                        </FieldCell>
                                     )
                                 })}
 
                                 {record?.external_url && (
-                                    <div className="sm:col-span-2">
+                                    <div className="sm:col-span-2 min-w-0">
                                         <a
                                             href={record.external_url}
                                             target="_blank"
@@ -807,6 +812,7 @@ export function DynamicRecordDialog({
                                 )}
                             </form>
 
+
                             {/* Child records (line items, etc.) for declared relations.
                                 View = strictly read-only; edit = add/edit/delete. */}
                             {!isCreate && record && relations.length > 0 && (

package/src/dynamic-kanban.tsx

@@ -79,6 +79,24 @@ import {
 import { ColumnFilterControl, FilterValueCombobox, type ColumnFilterType } from '@asteby/metacore-ui/data-table'
 import { generateBadgeStyles, optionColor } from '@asteby/metacore-ui/lib'
 import { useApi } from './api-context'
+import {
+    useStageAutomations,
+    StageAutomationsButton,
+    type StageAutomation,
+    type NewStageAutomation,
+} from './stage-automations'
+import {
+    useCustomStages,
+    splitCustomStages,
+    mergeLaneStages,
+    resolveSmartLanes,
+    AddStageColumn,
+    CustomStageLaneMenu,
+    CustomStageDialog,
+    CustomStageDeleteDialog,
+    SmartLane,
+    type CustomStage,
+} from './custom-stages'
 import { useDynamicFilters } from './use-dynamic-filters'
 import {
     FilterChipsRow,
@@ -453,6 +471,30 @@ export function DynamicKanban({
     const api = useApi()
     const isDark = useIsDarkTheme()
 
+    // Stage automations (Bitrix-style per-lane rules). Degrades to no-op when
+    // the host has no `/stage-automations` endpoint — the ⚡ affordance hides.
+    const automations = useStageAutomations(model)
+
+    // Custom stages (Bitrix-style user-defined columns). Degrades to no-op when
+    // the host has no `/custom-stages` endpoint — the "+ Agregar etapa" column
+    // and lane menus simply don't render.
+    const customStages = useCustomStages(model)
+    // Dialog state: create/edit a stage, and the delete confirmation.
+    const [stageDialogOpen, setStageDialogOpen] = useState(false)
+    const [editingStage, setEditingStage] = useState<CustomStage | null>(null)
+    const [deletingStage, setDeletingStage] = useState<CustomStage | null>(null)
+    const openCreateStage = useCallback(() => {
+        setEditingStage(null)
+        setStageDialogOpen(true)
+    }, [])
+    const openEditStage = useCallback((s: CustomStage) => {
+        setEditingStage(s)
+        setStageDialogOpen(true)
+    }, [])
+    const openDeleteStage = useCallback((s: CustomStage) => {
+        setDeletingStage(s)
+    }, [])
+
     const { getMetadata, setMetadata: cacheMetadata } = useMetadataCache()
     const cachedMeta = getMetadata(model)
 
@@ -747,10 +789,34 @@ export function DynamicKanban({
         [],
     )
 
-    const stages = useMemo(
+    const declaredStages = useMemo(
         () => (metadata ? deriveStages(metadata) : []),
         [metadata],
     )
+    // The kernel merges custom real stages into `metadata.stages` (custom: true)
+    // and serves smart lanes in `metadata.smart_lanes` — the metadata is the
+    // painting source (ops #704). The CRUD list (`customStages.stages`) only
+    // backs the management dialog: it carries the `id`/filters the metadata
+    // omits, so we still split it to build `customByKey` (and to fall back when
+    // the metadata hasn't caught up yet).
+    const { laneStages: customLaneStages, smartStages: crudSmartStages } =
+        useMemo(() => splitCustomStages(customStages.stages), [customStages.stages])
+    const { lanes: stages, customByKey } = useMemo(
+        () => mergeLaneStages(declaredStages, customLaneStages),
+        [declaredStages, customLaneStages],
+    )
+    // Smart lanes to paint: metadata first, folding in CRUD ids by key.
+    const smartStages = useMemo(
+        () =>
+            resolveSmartLanes(metadata?.smart_lanes, crudSmartStages, model),
+        [metadata?.smart_lanes, crudSmartStages, model],
+    )
+    // Position a newly created stage after every existing lane (real + smart).
+    const nextStagePosition = useMemo(() => {
+        const positions = customStages.stages.map((s) => s.position ?? 0)
+        const base = stages.length + smartStages.length
+        return Math.max(base, ...positions, 0) + 1
+    }, [customStages.stages, stages.length, smartStages.length])
     const transitions = metadata?.transitions
 
     const grouped = useMemo(
@@ -1075,6 +1141,22 @@ export function DynamicKanban({
                             isDark={isDark}
                             dimmed={!!activeId && !droppableAllowed}
                             disabled={!!activeId && !droppableAllowed}
+                            model={model}
+                            columns={metadata?.columns ?? []}
+                            automationsAvailable={
+                                automations.available && stage.key !== UNASSIGNED_LANE
+                            }
+                            automationRules={automations.byStage.get(stage.key) ?? []}
+                            onAutomationCreate={automations.create}
+                            onAutomationUpdate={automations.update}
+                            onAutomationRemove={automations.remove}
+                            customStage={
+                                customStages.available
+                                    ? customByKey.get(stage.key)
+                                    : undefined
+                            }
+                            onEditStage={openEditStage}
+                            onDeleteStage={openDeleteStage}
                         >
                             {loadingData && cards.length === 0 ? (
                                 <>
@@ -1104,6 +1186,42 @@ export function DynamicKanban({
                         </KanbanLane>
                     )
                 })}
+
+                {/* Smart (virtual) lanes — each runs its own filtered query and
+                    renders read-only cards (no drag target). */}
+                {smartStages.map((smart) => (
+                    <SmartLane
+                        key={`smart-${smart.key}`}
+                        stage={smart}
+                        model={model}
+                        endpoint={endpoint}
+                        defaultFilters={defaultFilters}
+                        pageSize={pageSize}
+                        isDark={isDark}
+                        refreshTrigger={refreshTrigger}
+                        onEdit={openEditStage}
+                        onDelete={openDeleteStage}
+                        renderCard={(card) => (
+                            <KanbanCard
+                                card={card}
+                                titleCol={titleCol}
+                                fieldCols={fieldCols}
+                                actions={rowActions}
+                                locale={i18n.language}
+                                timeZone={timeZone}
+                                currency={currency}
+                                onClick={onCardClick}
+                                onAction={handleInternalAction}
+                                draggable={false}
+                            />
+                        )}
+                    />
+                ))}
+
+                {/* "+ Agregar etapa" — only when the host wired /custom-stages. */}
+                {customStages.available && (
+                    <AddStageColumn onClick={openCreateStage} />
+                )}
             </div>
 
             <DragOverlay>
@@ -1121,6 +1239,35 @@ export function DynamicKanban({
 
             {rowActionDialogs}
             </DndContext>
+
+            {customStages.available && (
+                <>
+                    <CustomStageDialog
+                        open={stageDialogOpen}
+                        onOpenChange={setStageDialogOpen}
+                        model={model}
+                        columns={metadata?.columns ?? []}
+                        initial={editingStage}
+                        nextPosition={nextStagePosition}
+                        onCreate={customStages.create}
+                        onUpdate={customStages.update}
+                    />
+                    <CustomStageDeleteDialog
+                        open={!!deletingStage}
+                        onOpenChange={(o) => {
+                            if (!o) setDeletingStage(null)
+                        }}
+                        stage={deletingStage}
+                        reassignTargets={stages.map((s) => ({
+                            key: s.key,
+                            label: s.label,
+                        }))}
+                        onConfirm={(s, reassignTo) =>
+                            customStages.remove(s.id, reassignTo)
+                        }
+                    />
+                </>
+            )}
         </div>
     )
 }
@@ -1243,6 +1390,22 @@ interface KanbanLaneProps {
     isDark: boolean
     dimmed: boolean
     disabled: boolean
+    /** Model key + columns for the stage-automations editor. */
+    model: string
+    columns: ColumnDefinition[]
+    /** Whether the ⚡ automations affordance should render for this lane. */
+    automationsAvailable: boolean
+    automationRules: StageAutomation[]
+    onAutomationCreate: (draft: NewStageAutomation) => Promise<void>
+    onAutomationUpdate: (
+        id: StageAutomation['id'],
+        patch: Partial<StageAutomation>,
+    ) => Promise<void>
+    onAutomationRemove: (id: StageAutomation['id']) => Promise<void>
+    /** When set, this lane is a user-defined custom stage → show ⋮ Editar/Eliminar. */
+    customStage?: CustomStage
+    onEditStage?: (stage: CustomStage) => void
+    onDeleteStage?: (stage: CustomStage) => void
     children: React.ReactNode
 }
 
@@ -1261,6 +1424,16 @@ function KanbanLane({
     isDark,
     dimmed,
     disabled,
+    model,
+    columns,
+    automationsAvailable,
+    automationRules,
+    onAutomationCreate,
+    onAutomationUpdate,
+    onAutomationRemove,
+    customStage,
+    onEditStage,
+    onDeleteStage,
     children,
 }: KanbanLaneProps) {
     const { t } = useTranslation()
@@ -1359,6 +1532,25 @@ function KanbanLane({
                         value={funnelValue}
                         onChange={onFunnelChange}
                     />
+                    {automationsAvailable && (
+                        <StageAutomationsButton
+                            model={model}
+                            stageKey={stage.key}
+                            stageLabel={stage.label}
+                            columns={columns}
+                            rules={automationRules}
+                            onCreate={onAutomationCreate}
+                            onUpdate={onAutomationUpdate}
+                            onRemove={onAutomationRemove}
+                        />
+                    )}
+                    {customStage && onEditStage && onDeleteStage && (
+                        <CustomStageLaneMenu
+                            stage={customStage}
+                            onEdit={onEditStage}
+                            onDelete={onDeleteStage}
+                        />
+                    )}
                 </div>
             </div>
             {searchOpen && (
@@ -1590,6 +1782,8 @@ interface KanbanCardProps {
     onClick?: (row: any) => void
     /** STRING contract — dispatch the action by its key (see useDynamicRowActions). */
     onAction: (actionKey: string, record: any) => void
+    /** When false the card is static (no drag) — used by read-only smart lanes. */
+    draggable?: boolean
 }
 
 function KanbanCard({
@@ -1602,19 +1796,23 @@ function KanbanCard({
     currency,
     onClick,
     onAction,
+    draggable = true,
 }: KanbanCardProps) {
     const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
         id: String(card.id),
+        disabled: !draggable,
     })
 
     const visibleActions = actions.filter((a) => isRowActionVisible(a, card))
 
     return (
         <Card
-            ref={setNodeRef}
-            {...attributes}
-            {...listeners}
-            className="w-full min-w-0 cursor-grab active:cursor-grabbing border-border/70 shadow-sm"
+            ref={draggable ? setNodeRef : undefined}
+            {...(draggable ? attributes : {})}
+            {...(draggable ? listeners : {})}
+            className={`w-full min-w-0 border-border/70 shadow-sm ${
+                draggable ? 'cursor-grab active:cursor-grabbing' : 'cursor-default'
+            }`}
             style={{ opacity: isDragging ? 0.4 : 1 }}
             onClick={() => onClick?.(card)}
             data-card-id={String(card.id)}

package/src/field-grid.tsx

@@ -0,0 +1,57 @@
+// FieldGrid — the shared, responsive form layout for the SDK's declarative
+// modals (the automatic CRUD create/edit dialog and the placement:create /
+// generic action modal). One source of truth so both read identically: short
+// scalar fields (inputs, selects, dates) flow in two columns when the width
+// allows, textareas / line-items / long-form widgets span the full row, and
+// everything collapses to a single column on phones.
+//
+// The load-bearing detail is `min-w-0` on every cell: CSS grid tracks default
+// to `minmax(auto, 1fr)`, so a child with a wide intrinsic minimum (a Select
+// with a long option, an Input with a long value) pushes its column past the
+// container and the whole dialog grows a horizontal scrollbar. `min-w-0` lets
+// the cell shrink below its content and keeps the modal within its width.
+import type { ReactNode } from 'react'
+import { Label } from '@asteby/metacore-ui/primitives'
+import { cn } from '@asteby/metacore-ui/lib'
+
+export function FieldGrid({ children, className }: { children: ReactNode; className?: string }) {
+    return (
+        <div className={cn('grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2', className)}>
+            {children}
+        </div>
+    )
+}
+
+export function FieldCell({
+    children,
+    fullWidth,
+    className,
+}: {
+    children: ReactNode
+    /** Span both columns — textareas, line-items grids, embedded relations. */
+    fullWidth?: boolean
+    className?: string
+}) {
+    return (
+        <div className={cn('flex min-w-0 flex-col gap-1.5', fullWidth && 'sm:col-span-2', className)}>
+            {children}
+        </div>
+    )
+}
+
+export function FieldLabel({
+    htmlFor,
+    required,
+    children,
+}: {
+    htmlFor?: string
+    required?: boolean
+    children: ReactNode
+}) {
+    return (
+        <Label htmlFor={htmlFor} className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
+            {children}
+            {required && <span className="ml-0.5 text-destructive">*</span>}
+        </Label>
+    )
+}

package/src/index.ts

@@ -16,6 +16,44 @@ export {
     selectCardColumns,
     UNASSIGNED_LANE,
 } from './dynamic-kanban'
+export {
+    useStageAutomations,
+    StageAutomationsButton,
+    isTagColumn,
+    automationFieldOptions,
+    groupAutomationsByStage,
+    activeAutomationCount,
+    type StageAutomation,
+    type StageAutomationAction,
+    type StageAutomationActionType,
+    type NewStageAutomation,
+    type UseStageAutomationsResult,
+    type StageAutomationsButtonProps,
+} from './stage-automations'
+export {
+    useCustomStages,
+    splitCustomStages,
+    mergeLaneStages,
+    resolveSmartLanes,
+    smartLaneParams,
+    customStageFilterFields,
+    isCustomStageDraftValid,
+    slugifyStageKey,
+    emptyCustomStageFilter,
+    AddStageColumn,
+    CustomStageLaneMenu,
+    CustomStageDialog,
+    CustomStageDeleteDialog,
+    SmartLane,
+    CUSTOM_STAGE_COLORS,
+    CUSTOM_STAGE_FILTER_OPS,
+    type CustomStage,
+    type NewCustomStage,
+    type CustomStageType,
+    type CustomStageFilter,
+    type CustomStageFilterOp,
+    type UseCustomStagesResult,
+} from './custom-stages'
 export {
     DynamicView,
     resolveViewRenderer,
@@ -29,6 +67,7 @@ export {
     type UseDynamicFiltersResult,
 } from './use-dynamic-filters'
 export * from './dynamic-form'
+export { FieldGrid, FieldCell, FieldLabel } from './field-grid'
 export {
     ActionModalDispatcher,
     type ActionModalProps,