treege 1.5.0 → 2.0.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # [Versions](https://github.com/Tracktor/treege/releases)
 
-## v1.5.0
-- **[feat]** : Add date pattern
-- **[fix]** : Disable pattern for `radio`, `hidden`, `checkbox`, `switch`, `autocomplete`, and `dynamic select`
+## v2.0.0
+
+### 🚀 New Features
+
+- Introduced components to assign and receive values from ancestor nodes in tree-based forms, improving dynamic data binding and API parameterization.
+- Added an object mapping example component to aid in key path selection within nested objects.
+
+### ✨ Enhancements
+
+- Redesigned form layouts with a responsive two-column grid and enhanced large modal handling.
+- Expanded English and French localization with detailed guidance on dynamic data, ancestor values, and API parameters.
+- Upgraded multiple dependencies to latest versions for improved stability and features.
+
+### 🐛 Bug Fixes
+
+- Improved modal and dialog behaviors for better accessibility and consistency.
+
+### 🔨 Refactor
+
+- Removed legacy components and utilities related to ancestor and tree name extraction.
+- Consolidated and simplified ancestor retrieval utilities.
+- Cleaned up ancestor references when removing nodes from the tree.
+
+### 🧹 Chores
+
+- Deleted unused files and tests tied to deprecated tree utilities.
+- Added new tests validating updated ancestor retrieval and node removal functionality.

package/dist/features/Treege/Treege.d.ts

@@ -1,6 +1,6 @@
 import { TreeNode } from '@tracktor/types-treege';
 export interface BackendConfig {
-    baseUrl: string;
+    baseUrl?: string;
     authToken?: string;
     endpoints?: {
         workflow?: string;

package/dist/features/Treege/components/Forms/AssignValueToChildren/AssignValueToChildren.d.ts

@@ -0,0 +1,10 @@
+import { DefaultValueFromAncestor } from '@tracktor/types-treege';
+interface AssignValueToChildrenProps {
+    value?: DefaultValueFromAncestor | null;
+    onChange?: (sourceValue?: string) => void;
+    ancestorName: string;
+    displayTopDivider?: boolean;
+    currentType?: string;
+}
+declare const AssignValueToChildren: ({ onChange, value, ancestorName, displayTopDivider, currentType }: AssignValueToChildrenProps) => import("react/jsx-runtime").JSX.Element;
+export default AssignValueToChildren;

package/dist/features/Treege/components/Forms/AssignValueToChildren/Examples/ObjectMappingExample.d.ts

@@ -0,0 +1,2 @@
+declare const ObjectMappingExample: () => import("react/jsx-runtime").JSX.Element;
+export default ObjectMappingExample;

package/dist/features/Treege/components/Forms/FormTreeCardMutation/FormTreeCardMutation.d.ts

@@ -1,5 +1,7 @@
 interface FormTreeCardMutationProps {
     onClose(): void;
+    title?: string;
+    setIsLarge?(largeModal: boolean): void;
 }
-declare const FormTreeCardMutation: ({ onClose }: FormTreeCardMutationProps) => import("react/jsx-runtime").JSX.Element;
+declare const FormTreeCardMutation: ({ onClose, title, setIsLarge }: FormTreeCardMutationProps) => import("react/jsx-runtime").JSX.Element;
 export default FormTreeCardMutation;

package/dist/features/Treege/components/Forms/FormTreeCardMutation/useFormTreeCardMutation.d.ts

@@ -1,5 +1,5 @@
 import { SelectChangeEvent } from '@tracktor/design-system';
-import { Params, Route } from '@tracktor/types-treege';
+import { DefaultValueFromAncestor, Params, Route, TreeNode } from '@tracktor/types-treege';
 import { ChangeEvent, FormEvent, MouseEvent, SyntheticEvent } from 'react';
 import { default as fields } from '../../../../../src/constants/fields';
 interface Values {
@@ -8,10 +8,21 @@ interface Values {
     value: string;
     message?: string;
 }
-declare const useFormTreeCardMutation: () => {
+interface UseFormTreeCardMutationParams {
+    setIsLarge?(largeModal: boolean): void;
+}
+declare const useFormTreeCardMutation: ({ setIsLarge }: UseFormTreeCardMutationParams) => {
+    ancestors: {
+        uuid: string;
+        name?: string;
+    }[];
+    collapseOptions: boolean;
+    currentTree: TreeNode | null;
+    defaultValueFromAncestor: DefaultValueFromAncestor | undefined;
     getDisabledValueField: (index: number) => boolean;
     handleAddParams: () => void;
     handleAddValue: () => void;
+    handleAncestorRef: (ancestorUuid?: string, ancestorName?: string) => void;
     handleChangeHelperText: ({ target }: ChangeEvent<HTMLInputElement>) => void;
     handleChangeHiddenValue: ({ target }: ChangeEvent<HTMLInputElement>) => void;
     handleChangeInitialQuery: ({ target }: ChangeEvent<HTMLInputElement>) => void;
@@ -21,8 +32,7 @@ declare const useFormTreeCardMutation: () => {
     handleChangeMessage: (nameMessage: "on" | "off") => ({ target }: ChangeEvent<HTMLInputElement>) => void;
     handleChangeMultiple: ({ target }: ChangeEvent<HTMLInputElement>) => void;
     handleChangeName: ({ target }: ChangeEvent<HTMLInputElement>) => void;
-    handleChangeParam: (index: number, property: keyof Params, event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
-    handleChangeParentRef: (_: SelectChangeEvent<string | undefined>, newValue: string | undefined) => void;
+    handleChangeParam: <K extends keyof Params>(index: number, property: K, value: Params[K]) => void;
     handleChangePath: <T extends HTMLInputElement | HTMLTextAreaElement>(property: string, event: ChangeEvent<T>) => void;
     handleChangePattern: (_: SyntheticEvent, value: null | string | {
         label: string;
@@ -38,12 +48,13 @@ declare const useFormTreeCardMutation: () => {
     } | null) => void;
     handleChangeTreeSelect: ({ target }: SelectChangeEvent) => void;
     handleChangeType: (_: SyntheticEvent, value: (typeof fields)[number]) => void;
-    handleChangeUrl: ({ target }: ChangeEvent<HTMLInputElement>) => void;
     handleChangeUrlSelect: ({ target }: ChangeEvent<HTMLInputElement>) => void;
     handleDeleteParam: (e: MouseEvent<HTMLButtonElement>) => void;
     handleDeleteValue: ({ currentTarget }: MouseEvent<HTMLButtonElement>) => void;
     handlePresetValues: (predicate: "value" | "label" | "message") => (event: ChangeEvent<HTMLInputElement>) => void;
     handleSubmit: (e: FormEvent) => Promise<void>;
+    handleValueFromAncestor: (sourceValue?: string) => void;
+    hasAncestors: boolean;
     helperText: string;
     hiddenValue: string;
     initialQuery: boolean;
@@ -54,9 +65,8 @@ declare const useFormTreeCardMutation: () => {
     isDecisionField: boolean;
     isDisabledPast: boolean;
     isDynamicSelect: boolean;
-    isEditModal: boolean;
     isHiddenField: boolean;
-    isLeaf: boolean;
+    isLargeView: boolean;
     isMultiple: boolean;
     isMultiplePossible: boolean;
     isPatternEnabled: boolean;
@@ -70,7 +80,6 @@ declare const useFormTreeCardMutation: () => {
         on: string;
     };
     name: string;
-    parentRef: string | null;
     pattern: string | {
         label: string;
         value: string;
@@ -94,7 +103,9 @@ declare const useFormTreeCardMutation: () => {
     })[];
     repeatable: boolean;
     required: boolean;
-    route: Route;
+    route: Route | undefined;
+    selectAncestorName: string | undefined;
+    setCollapseOptions: import('react').Dispatch<import('react').SetStateAction<boolean>>;
     tag: string | null;
     treeSelected: string;
     type: import('@tracktor/types-treege').FieldType;

package/dist/features/Treege/components/Forms/ReceiveValueFromAncestor.d.ts

@@ -0,0 +1,11 @@
+interface ReceiveValueFromParentProps {
+    id: string;
+    ancestors: {
+        uuid: string;
+        name?: string;
+    }[];
+    onChange?: (ancestorUuid?: string, ancestorName?: string) => void;
+    value?: string | null;
+}
+declare const ReceiveValueFromAncestor: ({ onChange, id, value, ancestors }: ReceiveValueFromParentProps) => import("react/jsx-runtime").JSX.Element | null;
+export default ReceiveValueFromAncestor;

package/dist/features/Treege/components/TreeGrid/useTreeGrid.d.ts

@@ -4,6 +4,8 @@ declare const useTreeGrid: () => {
     getTitleModalMutation: () => "Add a field" | "Add a field to « {{name}} »" | "Edit field « {{name}} »";
     handleChangeTree: (tree: string) => false | undefined;
     isDeleteModal: boolean;
+    isLargeView: boolean;
     isModalMutationOpen: boolean;
+    setIsLargeView: import('react').Dispatch<import('react').SetStateAction<boolean>>;
 };
 export default useTreeGrid;

package/dist/features/Treege/context/TreegeProvider.d.ts

@@ -1,5 +1,6 @@
-import { TreeNode } from '@tracktor/types-treege';
-import { ReactNode } from 'react';
+import { CurrentTree, ModalType, TreeNode, TreePath } from '@tracktor/types-treege';
+import { HierarchyPointNode } from 'd3-hierarchy';
+import { ReactNode, ReducerAction, SetStateAction } from 'react';
 import { BackendConfig } from '../../../src/features/Treege/Treege';
 interface TreegeProviderProps {
     children: ReactNode;
@@ -7,5 +8,82 @@ interface TreegeProviderProps {
     initialTreeId?: string;
     backendConfig?: BackendConfig;
 }
+export interface TreeDefaultValue {
+    /**
+     * This is the backend configuration
+     */
+    backendConfig?: BackendConfig;
+    /**
+     * CurrentHierarchyPointNode is the current node selected
+     */
+    currentHierarchyPointNode: null | HierarchyPointNode<TreeNode>;
+    /**
+     * This is the current tree information
+     * {
+     *     "id": "treeId",
+     *     "name": "Tree name"
+     * }
+     */
+    currentTree: CurrentTree;
+    /**
+     * This is the tree node object
+     */
+    tree: null | TreeNode;
+    /**
+     * This is the tree modal open state
+     */
+    treeModalOpen: boolean;
+    /**
+     * This is the tree path
+     * [
+     *     {
+     *         "label": "Tree name",
+     *         "path": "uuid"
+     *     }
+     * ]
+     */
+    treePath: TreePath[] | [];
+    /**
+     * This is the modal open state
+     */
+    modalOpen: ModalType;
+    /**
+     * This is the version of Treege
+     */
+    version: string;
+    /**
+     * This is the tree node dispatch function
+     * @param state
+     */
+    dispatchTree(state: ReducerAction<any>): void;
+    /**
+     * This is the function to set the modal open state
+     * @param state
+     */
+    setCurrentHierarchyPointNode(state: SetStateAction<null | HierarchyPointNode<TreeNode>>): void;
+    /**
+     * This is the function to set the current tree information
+     * Not the node to display tree
+     * @param state
+     */
+    setCurrentTree(state: SetStateAction<CurrentTree>): void;
+    /**
+     * This is the function to set the modal open state
+     * @param state
+     */
+    setModalOpen(state: SetStateAction<ModalType>): void;
+    /**
+     * This is the function to set the modal open state
+     * @param state
+     */
+    setTreeModalOpen(state: SetStateAction<boolean>): void;
+    /**
+     * This is the function to set the tree path
+     * @param state
+     */
+    setTreePath(state: SetStateAction<TreePath[] | []>): void;
+}
+export declare const treeDefaultValue: TreeDefaultValue;
+export declare const TreegeContext: import('react').Context<TreeDefaultValue>;
 declare const TreegeProvider: ({ children, initialTree, initialTreeId, backendConfig }: TreegeProviderProps) => import("react/jsx-runtime").JSX.Element;
 export default TreegeProvider;

package/dist/hooks/useTreegeContext/useTreegeContext.d.ts

@@ -1,2 +1,2 @@
-declare const useTreegeContext: () => import('../../src/features/Treege/context/TreegeContext').TreeDefaultValue;
+declare const useTreegeContext: () => import('../../src/features/Treege/context/TreegeProvider').TreeDefaultValue;
 export default useTreegeContext;

package/dist/locales/en/form-en.d.ts

@@ -1,32 +1,45 @@
 declare const FORM_EN: {
-    readonly additionalParams: "Additional parameters";
+    readonly additionalParams: "Api parameters";
+    readonly addressStructureHint: "An address type must be:";
     readonly ancestor: "Ancestor";
+    readonly ancestorValue: "Get value from: {{ancestorName}}";
     readonly apiRoute: "Api route";
     readonly cardNumber: "Card number";
-    readonly dataMapping: "Data mapping";
+    readonly dataMapping: "Option mapping";
     readonly decisionField: "Decision field";
     readonly disabledPast: "Disabled Past";
+    readonly dynamicSelectStructureHint: "Make sure the field accepts the ancestor value.";
     readonly email: "Email";
     readonly firstNameAndLastName: "First name and last name";
     readonly helperText: "Helper text";
     readonly hiddenValue: "Hidden value";
     readonly key: "Key";
+    readonly keyPath: "Key path (string | number)";
+    readonly keyPathApiDescription: "(Option) To insert a value in a URL, use the syntax {paramName}. For example: http://api.com/userId={userId}, add {userId} in params.";
+    readonly keyPathAssignment: "Key path to value: {{keyPath}}";
+    readonly keyPathObject: "Key path to value";
     readonly label: "Label";
     readonly letter: "Letter";
+    readonly mapObject: "Map object";
     readonly message: "Message";
     readonly mustBeUnique: "Must be unique";
     readonly newTree: "Nouvel arbre";
     readonly noAncestorFound: "No parents found";
     readonly number: "Nombre";
     readonly numberAndLetter: "Number and letter";
+    readonly objectDemo: "Example of object mapping";
     readonly offMessage: "Message (disable)";
     readonly onMessage: "Message (enable)";
     readonly pattern: "Pattern";
     readonly patternMessage: "Pattern message";
     readonly phoneNumber: "Phone number";
+    readonly receiveValueFromParent: "Default value from ancestor";
     readonly repeatable: "Repeatable";
     readonly searchKeyPlaceholder: "text";
+    readonly selectStructureHint: "Must be an value existing in the values option.";
     readonly staticFields: "Static fields";
+    readonly staticValue: "(Option) Static value";
+    readonly staticValueDescription: "By default, it will use the ancestor value, but you can assign a static value.";
     readonly step: "Step";
     readonly tree: "Tree";
     readonly treeName: "Tree name";
@@ -53,8 +66,10 @@ declare const FORM_EN: {
         readonly tree: "Tree";
         readonly url: "URL";
     };
+    readonly typeStructureWarning: "Type structure must be: {{type}}";
     readonly url: "URL";
     readonly urlConstruction: "URL construction";
+    readonly useAncestorValueAsParam: "Use Ancestor value";
     readonly value: "Value";
     readonly values: "Values";
     readonly warningApiAutocomplete: {

package/dist/locales/fr/form-fr.d.ts

@@ -1,32 +1,45 @@
 declare const FORM_FR: {
-    readonly additionalParams: "Paramètres additionnels";
+    readonly additionalParams: "Paramètres API";
+    readonly addressStructureHint: "Un type d'adresse doit être :";
     readonly ancestor: "Ancêtre";
+    readonly ancestorValue: "Récupération de la valeur de : {{ancestorName}}";
     readonly apiRoute: "Api route";
     readonly cardNumber: "Numéro de carte";
-    readonly dataMapping: "Mapping de données";
+    readonly dataMapping: "Mapping des options";
     readonly decisionField: "Champs de décision";
     readonly disabledPast: "Passé désactivé";
+    readonly dynamicSelectStructureHint: "Assurez-vous que le champ accepte la valeur de l'ancêtre.";
     readonly email: "Email";
     readonly firstNameAndLastName: "Prénom et nom";
     readonly helperText: "Texte d'information";
     readonly hiddenValue: "Valeur caché";
     readonly key: "Clé";
+    readonly keyPath: "Chemin de la clé (string | number)";
+    readonly keyPathApiDescription: "Pour insérer une valeur dans une URL, utilisez la syntaxe {paramName}. Par exemple : http://api.com/userId={userId}, ajouter {userId} en params.";
+    readonly keyPathAssignment: "Chemin vers la valeur : {{keyPath}}";
+    readonly keyPathObject: "Clé vers la valeur";
     readonly label: "Label";
     readonly letter: "Lettre";
+    readonly mapObject: "Mapper l'objet";
     readonly message: "Message";
     readonly mustBeUnique: "Doit être unique";
     readonly newTree: "Nouvel arbre";
-    readonly noAncestorFound: "Aucun parent trouvé";
+    readonly noAncestorFound: "Aucun parent trouvé ";
     readonly number: "Chiffre";
     readonly numberAndLetter: "Chiffre et lettre";
+    readonly objectDemo: "Exemple de mapping d'objet";
     readonly offMessage: "Message (désactiver)";
     readonly onMessage: "Message (activer)";
     readonly pattern: "Expression régulière";
     readonly patternMessage: "Message d'aide invalide";
     readonly phoneNumber: "Numéro de téléphone";
+    readonly receiveValueFromParent: "Valeur par défaut depuis l'ancêtre";
     readonly repeatable: "Répétable";
     readonly searchKeyPlaceholder: "text";
+    readonly selectStructureHint: "Doit être une valeur existante dans les options de valeurs.";
     readonly staticFields: "Champs statiques";
+    readonly staticValue: "(Option) Valeur statique";
+    readonly staticValueDescription: "Par défaut, il utilisera la valeur de l'ancêtre, mais vous pouvez assigner une valeur statique.";
     readonly step: "Étape";
     readonly tree: "Arbre";
     readonly treeName: "Nom de l'arbre";
@@ -53,8 +66,10 @@ declare const FORM_FR: {
         readonly tree: "Arbre";
         readonly url: "URL";
     };
+    readonly typeStructureWarning: "Le type d'input doit être : {{type}}";
     readonly url: "URL";
     readonly urlConstruction: "Construction de l'URL";
+    readonly useAncestorValueAsParam: "Utiliser une valeur ancêtre";
     readonly value: "Valeur";
     readonly values: "Valeurs";
     readonly warningApiAutocomplete: {
@@ -63,7 +78,7 @@ declare const FORM_FR: {
     };
     readonly warningApiSelect: {
         readonly response: "à l'emplacement de votre variable.";
-        readonly url: "Pour intégrer automatiquement la valeur du parent dans l'URL";
+        readonly url: "Pour intégrer la valeur du parent dans l'URL";
         readonly warning: "placez {{}}";
     };
 };

package/dist/main.d.ts

@@ -1,4 +1,4 @@
-export { default as Treege } from './src/features/Treege';
-export * from './src/features/Treege';
+export { default as Treege } from './src/features/Treege/Treege';
+export * from './src/features/Treege/Treege';
 export { default as TreePlusIcon } from './src/components/DataDisplay/Icons/TreePlusIcon';
 export * from './src/components/DataDisplay/Icons/TreePlusIcon';