@asteby/metacore-runtime-react 23.6.0 → 23.7.1

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

@@ -85,6 +85,18 @@ import {
     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,
@@ -463,6 +475,26 @@ export function DynamicKanban({
     // 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)
 
@@ -757,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(
@@ -1094,6 +1150,13 @@ export function DynamicKanban({
                             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 ? (
                                 <>
@@ -1123,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>
@@ -1140,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>
     )
 }
@@ -1274,6 +1402,10 @@ interface KanbanLaneProps {
         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
 }
 
@@ -1299,6 +1431,9 @@ function KanbanLane({
     onAutomationCreate,
     onAutomationUpdate,
     onAutomationRemove,
+    customStage,
+    onEditStage,
+    onDeleteStage,
     children,
 }: KanbanLaneProps) {
     const { t } = useTranslation()
@@ -1409,6 +1544,13 @@ function KanbanLane({
                             onRemove={onAutomationRemove}
                         />
                     )}
+                    {customStage && onEditStage && onDeleteStage && (
+                        <CustomStageLaneMenu
+                            stage={customStage}
+                            onEdit={onEditStage}
+                            onDelete={onDeleteStage}
+                        />
+                    )}
                 </div>
             </div>
             {searchOpen && (
@@ -1640,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({
@@ -1652,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

@@ -30,6 +30,30 @@ export {
     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,
@@ -43,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,

package/src/model-action-toolbar.tsx

@@ -18,6 +18,7 @@
 // it internally, and bespoke host pages (e.g. ops `/m/$model`) mount it directly
 // next to their own toolbar. Hosts never reimplement action-button plumbing.
 import { useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 import { Button } from '@asteby/metacore-ui/primitives'
 import { useApi } from './api-context'
 import { useMetadataCache } from './metadata-cache'
@@ -109,6 +110,7 @@ export function ModelActionToolbar({
     onChange,
     className,
 }: ModelActionToolbarProps) {
+    const { t } = useTranslation()
     const all = useModelActions(model, placements, actions)
     // Capability gating — always-true without a <PermissionsProvider>. Custom
     // table/create actions map onto `lowercase(model).<action_key>`.
@@ -135,7 +137,13 @@ export function ModelActionToolbar({
                             style={a.color && !isCreate ? { borderColor: a.color, color: a.color } : undefined}
                         >
                             <DynamicIcon name={a.icon || (isCreate ? 'Plus' : 'Zap')} className="mr-2 h-4 w-4" />
-                            {a.label}
+                            {/* `a.label` is an addon-contributed i18n key (e.g.
+                                "integration_github.action.create_issue.label"); the addon's
+                                locale bundle loads asynchronously, so translate at render — a
+                                bare `{a.label}` prints the raw key until (and after) the bundle
+                                lands because nothing re-derives it. defaultValue keeps an
+                                already-localized label untouched. */}
+                            {t(a.label, { defaultValue: a.label })}
                         </Button>
                     )
                 })}

package/src/types.ts

@@ -43,6 +43,13 @@ export interface TableMetadata {
      * keys as the kernel serves them.
      */
     stages?: StageMeta[]
+    /**
+     * Virtual "smart" lanes (ops #704): read-only board columns defined by a set
+     * of filters rather than a stored stage value. When present the kanban paints
+     * one lane per entry (querying the list with the lane's filters) after the
+     * real stages. Purely additive — absent on hosts without custom stages.
+     */
+    smart_lanes?: SmartLaneMeta[]
     /**
      * Allowed stage transitions (RFC §1.1). When present, the kanban only lets a
      * card drop into a lane reachable from its current stage; disallowed lanes
@@ -64,6 +71,25 @@ export interface StageMeta {
     color?: string
     order?: number
     is_final?: boolean
+    /**
+     * True when the kernel merged a user-defined custom stage into `stages[]`
+     * (ops #704). Behaves as a normal droppable lane; the SDK just grows an
+     * Editar/Eliminar menu on it.
+     */
+    custom?: boolean
+}
+
+/**
+ * A virtual "smart" lane (ops #704) served in `TableMetadata.smart_lanes`. It's
+ * defined by `filters` (never a stored stage value), so the board paints it by
+ * querying the list with those conditions. Read-only — not a drop target.
+ */
+export interface SmartLaneMeta {
+    key: string
+    label: string
+    color?: string
+    order?: number
+    filters: { field: string; op: string; value: string }[]
 }
 
 /** Allowed `from → to` stage transition (RFC §1.1). `'*'` is a wildcard. */