@nocios/crudify-ui 1.0.34 → 1.0.35

package/dist/components/PublicPolicies/FieldSelector/FieldSelector.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+interface PolicyFieldsValue {
+    allow: string[];
+    owner_allow: string[];
+    deny: string[];
+}
+interface FieldSelectorProps {
+    value: PolicyFieldsValue;
+    onChange: (value: PolicyFieldsValue) => void;
+    availableFields: string[];
+    error?: string;
+    disabled?: boolean;
+}
+declare const FieldSelector: React.FC<FieldSelectorProps>;
+export default FieldSelector;

package/dist/components/PublicPolicies/FieldSelector/FieldSelector.js

@@ -0,0 +1,140 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { Box, Typography, Button, Stack, FormHelperText, ToggleButton, ToggleButtonGroup, } from "@mui/material";
+import { CheckCircle, Cancel, SelectAll, ClearAll } from "@mui/icons-material";
+const FieldSelector = ({ value, onChange, availableFields, error, disabled = false, }) => {
+    const { t } = useTranslation();
+    const [mode, setMode] = useState('custom');
+    const isUpdatingRef = useRef(false);
+    // Ensure value is normalized with current available fields
+    useEffect(() => {
+        const current = value || { allow: [], owner_allow: [], deny: [] };
+        const all = new Set(availableFields);
+        const allow = (current.allow || []).filter(f => all.has(f));
+        const owner = (current.owner_allow || []).filter(f => all.has(f));
+        const deny = (current.deny || []).filter(f => all.has(f));
+        // Add any missing fields to deny by default
+        availableFields.forEach(f => {
+            if (!allow.includes(f) && !owner.includes(f) && !deny.includes(f))
+                deny.push(f);
+        });
+        const normalized = { allow, owner_allow: owner, deny };
+        if (JSON.stringify(normalized) !== JSON.stringify(current)) {
+            onChange(normalized);
+        }
+        // Set mode based on normalized
+        if (allow.length === availableFields.length)
+            setMode('all');
+        else if (deny.length === availableFields.length)
+            setMode('none');
+        else
+            setMode('custom');
+    }, [availableFields, value]);
+    const setAllAllow = () => {
+        isUpdatingRef.current = true;
+        onChange({ allow: [...availableFields], owner_allow: [], deny: [] });
+        setMode('all');
+        setTimeout(() => { isUpdatingRef.current = false; }, 0);
+    };
+    const setAllDeny = () => {
+        isUpdatingRef.current = true;
+        onChange({ allow: [], owner_allow: [], deny: [...availableFields] });
+        setMode('none');
+        setTimeout(() => { isUpdatingRef.current = false; }, 0);
+    };
+    const getFieldState = (fieldName) => {
+        if (value?.allow?.includes(fieldName))
+            return 'allow';
+        if (value?.owner_allow?.includes(fieldName))
+            return 'owner_allow';
+        return 'deny';
+    };
+    const setFieldState = (fieldName, state) => {
+        isUpdatingRef.current = true;
+        const allow = new Set(value?.allow || []);
+        const owner = new Set(value?.owner_allow || []);
+        const deny = new Set(value?.deny || []);
+        // Remove from all, then add to target
+        allow.delete(fieldName);
+        owner.delete(fieldName);
+        deny.delete(fieldName);
+        if (state === 'allow')
+            allow.add(fieldName);
+        if (state === 'owner_allow')
+            owner.add(fieldName);
+        if (state === 'deny')
+            deny.add(fieldName);
+        onChange({ allow: Array.from(allow), owner_allow: Array.from(owner), deny: Array.from(deny) });
+        setMode('custom');
+        setTimeout(() => { isUpdatingRef.current = false; }, 0);
+    };
+    if (availableFields.length === 0) {
+        return (_jsxs(Box, { children: [_jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mb: 1 }, children: t("modules.form.publicPolicies.fields.conditions.label") }), _jsx(Typography, { variant: "body2", color: "text.secondary", sx: { fontStyle: 'italic' }, children: t("modules.form.publicPolicies.fields.conditions.noFieldsAvailable") }), error && (_jsx(FormHelperText, { error: true, sx: { mt: 1 }, children: error }))] }));
+    }
+    return (_jsxs(Box, { children: [_jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mb: 2 }, children: t("modules.form.publicPolicies.fields.conditions.label") }), _jsxs(Stack, { direction: "row", spacing: 1, sx: { mb: 3 }, children: [_jsx(Button, { variant: mode === 'all' ? 'contained' : 'outlined', startIcon: _jsx(SelectAll, {}), onClick: setAllAllow, disabled: disabled, size: "small", sx: {
+                            minWidth: 120,
+                            ...(mode === 'all' && {
+                                backgroundColor: '#16a34a',
+                                '&:hover': { backgroundColor: '#15803d' }
+                            })
+                        }, children: t("modules.form.publicPolicies.fields.conditions.allFields") }), _jsx(Button, { variant: mode === 'none' ? 'contained' : 'outlined', startIcon: _jsx(ClearAll, {}), onClick: setAllDeny, disabled: disabled, size: "small", sx: {
+                            minWidth: 120,
+                            ...(mode === 'none' && {
+                                backgroundColor: '#cf222e',
+                                '&:hover': { backgroundColor: '#bc1f2c' }
+                            })
+                        }, children: t("modules.form.publicPolicies.fields.conditions.noFields") })] }), _jsxs(Box, { sx: { p: 2, border: '1px solid #d1d9e0', borderRadius: 1, backgroundColor: '#f6f8fa' }, children: [_jsx(Typography, { variant: "body2", color: "text.secondary", sx: { mb: 2 }, children: t("modules.form.publicPolicies.fields.conditions.help") }), _jsx(Stack, { spacing: 1, children: availableFields.map((fieldName) => {
+                            const fieldState = getFieldState(fieldName);
+                            return (_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { variant: "body2", sx: { minWidth: 100, fontFamily: 'monospace' }, children: fieldName }), _jsxs(ToggleButtonGroup, { value: fieldState, exclusive: true, size: "small", children: [_jsxs(ToggleButton, { value: "allow", onClick: () => setFieldState(fieldName, 'allow'), disabled: disabled, sx: {
+                                                    px: 2,
+                                                    color: fieldState === 'allow' ? '#ffffff' : '#6b7280',
+                                                    backgroundColor: fieldState === 'allow' ? '#16a34a' : '#f3f4f6',
+                                                    borderColor: fieldState === 'allow' ? '#16a34a' : '#d1d5db',
+                                                    '&:hover': {
+                                                        backgroundColor: fieldState === 'allow' ? '#15803d' : '#e5e7eb',
+                                                        borderColor: fieldState === 'allow' ? '#15803d' : '#9ca3af'
+                                                    },
+                                                    '&.Mui-selected': {
+                                                        backgroundColor: '#16a34a',
+                                                        color: '#ffffff',
+                                                        '&:hover': {
+                                                            backgroundColor: '#15803d'
+                                                        }
+                                                    }
+                                                }, children: [_jsx(CheckCircle, { sx: { fontSize: 16, mr: 0.5 } }), t('modules.form.publicPolicies.fields.conditions.states.allow')] }), _jsx(ToggleButton, { value: "owner_allow", onClick: () => setFieldState(fieldName, 'owner_allow'), disabled: disabled, sx: {
+                                                    px: 2,
+                                                    color: fieldState === 'owner_allow' ? '#ffffff' : '#6b7280',
+                                                    backgroundColor: fieldState === 'owner_allow' ? '#0ea5e9' : '#f3f4f6',
+                                                    borderColor: fieldState === 'owner_allow' ? '#0ea5e9' : '#d1d5db',
+                                                    '&:hover': {
+                                                        backgroundColor: fieldState === 'owner_allow' ? '#0284c7' : '#e5e7eb',
+                                                        borderColor: fieldState === 'owner_allow' ? '#0284c7' : '#9ca3af'
+                                                    },
+                                                    '&.Mui-selected': {
+                                                        backgroundColor: '#0ea5e9',
+                                                        color: '#ffffff',
+                                                        '&:hover': {
+                                                            backgroundColor: '#0284c7'
+                                                        }
+                                                    }
+                                                }, children: t('modules.form.publicPolicies.fields.conditions.states.ownerAllow') }), _jsxs(ToggleButton, { value: "deny", onClick: () => setFieldState(fieldName, 'deny'), disabled: disabled, sx: {
+                                                    px: 2,
+                                                    color: fieldState === 'deny' ? '#ffffff' : '#6b7280',
+                                                    backgroundColor: fieldState === 'deny' ? '#dc2626' : '#f3f4f6',
+                                                    borderColor: fieldState === 'deny' ? '#dc2626' : '#d1d5db',
+                                                    '&:hover': {
+                                                        backgroundColor: fieldState === 'deny' ? '#b91c1c' : '#e5e7eb',
+                                                        borderColor: fieldState === 'deny' ? '#b91c1c' : '#9ca3af'
+                                                    },
+                                                    '&.Mui-selected': {
+                                                        backgroundColor: '#dc2626',
+                                                        color: '#ffffff',
+                                                        '&:hover': {
+                                                            backgroundColor: '#b91c1c'
+                                                        }
+                                                    }
+                                                }, children: [_jsx(Cancel, { sx: { fontSize: 16, mr: 0.5 } }), t('modules.form.publicPolicies.fields.conditions.states.deny')] })] })] }, fieldName));
+                        }) })] }), error && (_jsx(FormHelperText, { error: true, sx: { mt: 1 }, children: error }))] }));
+};
+export default FieldSelector;

package/dist/components/PublicPolicies/FieldSelector/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./FieldSelector";

package/dist/components/PublicPolicies/FieldSelector/index.js

@@ -0,0 +1 @@
+export { default } from "./FieldSelector";

package/dist/components/PublicPolicies/Policies.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import type { PolicyAction } from "./constants";
+type Policy = {
+    id: string;
+    action: PolicyAction;
+    fields: {
+        allow: string[];
+        owner_allow: string[];
+        deny: string[];
+    };
+};
+type FieldErrorMap = string | ({
+    _error?: string;
+} & Record<string, string | undefined>);
+interface PoliciesProps {
+    policies: Policy[];
+    onChange: (next: Policy[]) => void;
+    availableFields: string[];
+    errors?: FieldErrorMap;
+    isSubmitting?: boolean;
+}
+declare const Policies: React.FC<PoliciesProps>;
+export default Policies;

package/dist/components/PublicPolicies/Policies.js

@@ -0,0 +1,72 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { Box, Typography, Button, Stack, Alert, Divider, } from "@mui/material";
+import { Add } from "@mui/icons-material";
+import PolicyItem from "./PolicyItem";
+import { PREFERRED_POLICY_ORDER } from "./constants";
+const generateId = () => {
+    const c = globalThis?.crypto;
+    if (c && typeof c.randomUUID === "function")
+        return c.randomUUID();
+    return `${Date.now()}-${Math.random().toString(16).slice(2)}`;
+};
+const Policies = ({ policies, onChange, availableFields, errors, isSubmitting = false, }) => {
+    const { t } = useTranslation();
+    const policyRefs = useRef({});
+    const takenActions = new Set((policies || []).map((p) => p.action).filter(Boolean));
+    const remainingActions = PREFERRED_POLICY_ORDER.filter((a) => !takenActions.has(a));
+    const canAddPolicy = remainingActions.length > 0;
+    const addPolicy = () => {
+        const defaultAction = remainingActions[0] || "create";
+        const newPolicy = {
+            id: generateId(),
+            action: defaultAction,
+            fields: {
+                allow: [],
+                owner_allow: [],
+                deny: availableFields,
+            },
+        };
+        const next = [...(policies || []), newPolicy];
+        onChange(next);
+        setTimeout(() => {
+            const newIndex = next.length - 1;
+            const el = policyRefs.current[newIndex];
+            if (el) {
+                el.scrollIntoView({ behavior: "smooth", block: "center" });
+            }
+        }, 100);
+    };
+    const removePolicy = (index) => {
+        const next = [...policies];
+        next.splice(index, 1);
+        onChange(next);
+    };
+    const arrayError = (() => {
+        if (!errors)
+            return null;
+        if (typeof errors === "string")
+            return errors;
+        const msg = errors._error;
+        return typeof msg === "string" ? msg : null;
+    })();
+    const usedActions = new Set((policies || []).map((p) => p.action));
+    return (_jsxs(_Fragment, { children: [_jsx(Divider, { sx: { borderColor: '#e0e4e7' } }), _jsxs(Box, { children: [_jsx(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 3, children: _jsxs(Box, { children: [_jsx(Typography, { variant: "h6", sx: {
+                                        fontWeight: 600,
+                                        color: '#111418',
+                                        mb: 1
+                                    }, children: t("modules.form.publicPolicies.title") }), _jsx(Typography, { variant: "body2", color: "text.secondary", sx: { fontSize: '0.875rem' }, children: t("modules.form.publicPolicies.description") })] }) }), arrayError && (_jsx(Alert, { severity: "error", sx: { mb: 3 }, children: arrayError })), _jsxs(Stack, { spacing: 3, children: [(policies || []).length === 0 ? (_jsx(Alert, { severity: "info", children: t("modules.form.publicPolicies.noPolicies") })) : (policies.map((policy, index) => (_jsx(PolicyItem, { ref: (el) => { policyRefs.current[index] = el; }, policy: policy, onChange: (nextPolicy) => {
+                                    const next = [...policies];
+                                    next[index] = nextPolicy;
+                                    onChange(next);
+                                }, onRemove: () => removePolicy(index), availableFields: availableFields, isSubmitting: isSubmitting, usedActions: usedActions, error: (typeof errors === 'object' && errors && policy.id in errors) ? errors[policy.id] : undefined }, policy.id)))), canAddPolicy && (_jsx(Box, { children: _jsx(Button, { type: "button", variant: "outlined", startIcon: _jsx(Add, {}), onClick: addPolicy, disabled: isSubmitting, sx: {
+                                        borderColor: '#d0d7de',
+                                        color: '#656d76',
+                                        '&:hover': {
+                                            borderColor: '#8c959f',
+                                            backgroundColor: 'transparent'
+                                        }
+                                    }, children: t("modules.form.publicPolicies.addPolicy") }) }))] })] })] }));
+};
+export default Policies;

package/dist/components/PublicPolicies/PolicyItem/PolicyItem.d.ts

@@ -0,0 +1,21 @@
+import type { PolicyAction } from "../constants";
+type Policy = {
+    id: string;
+    action: PolicyAction;
+    fields: {
+        allow: string[];
+        owner_allow: string[];
+        deny: string[];
+    };
+};
+interface PolicyItemProps {
+    policy: Policy;
+    onChange: (next: Policy) => void;
+    onRemove: () => void;
+    availableFields: string[];
+    isSubmitting?: boolean;
+    usedActions: Set<Policy["action"]>;
+    error?: string;
+}
+declare const PolicyItem: import("react").ForwardRefExoticComponent<PolicyItemProps & import("react").RefAttributes<HTMLDivElement>>;
+export default PolicyItem;

package/dist/components/PublicPolicies/PolicyItem/PolicyItem.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useTranslation } from "react-i18next";
+import { Box, FormControl, InputLabel, Select, MenuItem, IconButton, Typography, FormHelperText, Stack, Paper, Divider, } from "@mui/material";
+import { Delete } from "@mui/icons-material";
+import FieldSelector from "../FieldSelector";
+import { POLICY_ACTIONS } from "../constants";
+const PolicyItem = forwardRef(({ policy, onChange, onRemove, availableFields, isSubmitting = false, usedActions, error, }, ref) => {
+    const { t } = useTranslation();
+    const takenActions = new Set(Array.from(usedActions || []));
+    takenActions.delete(policy.action);
+    const actionOptions = POLICY_ACTIONS.map((a) => ({
+        value: a,
+        label: t(`modules.form.publicPolicies.fields.action.options.${a}`),
+    }));
+    return (_jsxs(Paper, { ref: ref, sx: {
+            p: 3,
+            border: '1px solid #d1d9e0',
+            borderRadius: 2,
+            position: 'relative',
+            backgroundColor: '#ffffff'
+        }, children: [_jsxs(Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "flex-start", mb: 3 }, children: [_jsx(Typography, { variant: "subtitle1", sx: {
+                            fontWeight: 600,
+                            color: '#111418',
+                            fontSize: '1rem'
+                        }, children: t("modules.form.publicPolicies.policyTitle") }), _jsx(IconButton, { onClick: onRemove, size: "small", disabled: isSubmitting, "aria-label": t("modules.form.publicPolicies.removePolicy"), sx: {
+                            color: '#656d76',
+                            '&:hover': {
+                                color: '#cf222e',
+                                backgroundColor: 'rgba(207, 34, 46, 0.1)'
+                            }
+                        }, children: _jsx(Delete, {}) })] }), _jsxs(Stack, { spacing: 3, children: [_jsx(Stack, { direction: { xs: "column", md: "row" }, spacing: 2, children: _jsx(Box, { sx: { flex: 1, minWidth: 200 }, children: _jsxs(FormControl, { fullWidth: true, children: [_jsx(InputLabel, { children: t("modules.form.publicPolicies.fields.action.label") }), _jsx(Select, { value: policy.action, label: t("modules.form.publicPolicies.fields.action.label"), disabled: isSubmitting, onChange: (e) => {
+                                            const next = { ...policy, action: e.target.value };
+                                            onChange(next);
+                                        }, sx: {
+                                            backgroundColor: '#ffffff',
+                                            '&:hover .MuiOutlinedInput-notchedOutline': {
+                                                borderColor: '#8c959f',
+                                            },
+                                            '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+                                                borderColor: '#0969da',
+                                                borderWidth: 2,
+                                            }
+                                        }, children: actionOptions.map((option) => {
+                                            const disabledOption = takenActions.has(option.value);
+                                            return (_jsx(MenuItem, { value: option.value, disabled: disabledOption, children: option.label }, option.value));
+                                        }) }), error && (_jsx(FormHelperText, { error: true, children: error }))] }) }) }), _jsx(FieldSelector, { value: policy.fields, onChange: (nextFields) => onChange({ ...policy, fields: nextFields }), availableFields: availableFields, disabled: isSubmitting }), _jsx(Paper, { variant: "outlined", sx: { p: 2, backgroundColor: '#f9fafb' }, children: _jsxs(Stack, { spacing: 0.5, divider: _jsx(Divider, { sx: { borderColor: '#e5e7eb' } }), children: [_jsxs(Typography, { variant: "body2", sx: { fontFamily: 'monospace', color: 'text.secondary' }, children: [_jsxs(Box, { component: "span", sx: { color: '#16a34a' }, children: [t('modules.form.publicPolicies.fields.conditions.states.allow'), ":"] }), " ", (policy?.fields?.allow || []).join(', ') || '-'] }), _jsxs(Typography, { variant: "body2", sx: { fontFamily: 'monospace', color: 'text.secondary' }, children: [_jsxs(Box, { component: "span", sx: { color: '#0ea5e9' }, children: [t('modules.form.publicPolicies.fields.conditions.states.ownerAllow'), ":"] }), " ", (policy?.fields?.owner_allow || []).join(', ') || '-'] }), _jsxs(Typography, { variant: "body2", sx: { fontFamily: 'monospace', color: 'text.secondary' }, children: [_jsxs(Box, { component: "span", sx: { color: '#dc2626' }, children: [t('modules.form.publicPolicies.fields.conditions.states.deny'), ":"] }), " ", (policy?.fields?.deny || []).join(', ') || '-'] })] }) })] })] }));
+});
+export default PolicyItem;

package/dist/components/PublicPolicies/PolicyItem/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./PolicyItem";

package/dist/components/PublicPolicies/PolicyItem/index.js

@@ -0,0 +1 @@
+export { default } from "./PolicyItem";

package/dist/components/PublicPolicies/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const POLICY_ACTIONS: readonly ["create", "read", "update", "delete"];
+export type PolicyAction = typeof POLICY_ACTIONS[number];
+export declare const PREFERRED_POLICY_ORDER: PolicyAction[];

package/dist/components/PublicPolicies/constants.js

@@ -0,0 +1,7 @@
+export const POLICY_ACTIONS = ["create", "read", "update", "delete"];
+export const PREFERRED_POLICY_ORDER = [
+    "create",
+    "read",
+    "update",
+    "delete",
+];

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export { default as HelloWorld } from "./components/HelloWorld";
 export { default as Cascada } from "./components/Cascada";
+export { default as Policies } from "./components/PublicPolicies/Policies";

package/dist/index.js

@@ -1,2 +1,3 @@
 export { default as HelloWorld } from "./components/HelloWorld";
 export { default as Cascada } from "./components/Cascada";
+export { default as Policies } from "./components/PublicPolicies/Policies";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nocios/crudify-ui",
-  "version": "1.0.34",
+  "version": "1.0.35",
   "description": "Biblioteca de componentes UI para Crudify",
   "author": "Nocios",
   "type": "module",