fix: adjustments and improvements

.github/workflows/release.yaml

@@ -0,0 +1,33 @@
+name: Release
+
+on:
+  push:
+    branches:
+      # - main
+      # - develop
+      - alpha
+  workflow_dispatch:
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '20.5.0'
+
+      - name: Install Dependencies
+        run: npm ci
+
+      - name: Release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GH_PAT }}
+          NPM_TOKEN: ${{ secrets.NPM_ACCESS_TOKEN }}
+        run: npx semantic-release

.github/workflows/update_dependent_projects_alpha.yaml

@@ -0,0 +1,28 @@
+name: Update dependent projects (ALPHA)
+
+on:
+  release:
+    types: [published]
+  workflow_dispatch:
+
+env:
+  LIBRARY_NAME: "gisce/react-formiga-components"
+
+jobs:
+  update-dependents:
+    if: github.event.release.prerelease == true && contains(github.event.release.tag_name, '-alpha.') && !contains(github.event.release.tag_name, '-rc.')
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        include:
+          - project: "gisce/react-ooui"
+            branch: "alpha"
+    steps:
+      - name: Call Reusable Workflow for each project
+        uses: gisce/create-update-version-pr@v0.0.5
+        with:
+          dependentProject: ${{ matrix.project }}
+          tagName: ${{ github.event.release.tag_name }}
+          dependentProjectBranch: ${{ matrix.branch }}
+          libraryName: ${{ env.LIBRARY_NAME }}
+          githubToken: ${{ secrets.GH_PAT }}

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no -- commitlint --edit ${1}

.husky/pre-commit

@@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx tsc --noEmit
+npx lint-staged

src/components/other/ExportModal/EMTransfer.tsx

@@ -1,9 +1,9 @@
 import { Locale } from "@/context";
 import { Modal, Spin } from "antd";
-import React, { useCallback, useContext, useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { EMTransferWrapper } from "./EMTransferWrapper";
 import { ExportField, PredefinedExportField } from "./ExportModal.types";
-import { ExportModalContext } from "./ExportModalContext";
+import { useExportModalContext } from "./ExportModalContext";
 import { updateTreeData } from "./exportModalHelper";
 const { error } = Modal;
 
@@ -24,11 +24,12 @@ export const EMTransfer = ({
   onChange,
   disabled = false,
 }: EMTransferProps) => {
-  const { dataSource, setDataSource } = useContext(ExportModalContext);
+  const { dataSource, setDataSource } = useExportModalContext();
   const [isLoading, setIsLoading] = useState<boolean>(true);
 
   useEffect(() => {
     fetchInitialItems();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const fetchInitialItems = useCallback(async () => {
@@ -47,7 +48,7 @@ export const EMTransfer = ({
     }
 
     setIsLoading(false);
-  }, []);
+  }, [onGetFields, setDataSource]);
 
   const onLoadData = useCallback(
     async ({ key }: any) => {
@@ -64,7 +65,7 @@ export const EMTransfer = ({
         });
       }
     },
-    [dataSource]
+    [dataSource, onGetFieldChilds, setDataSource],
   );
 
   if (isLoading) {

src/components/other/ExportModal/EMTransferTree.tsx

@@ -52,7 +52,7 @@ export const EMTransferTree = (props: EMTransferLeftTreeProps) => {
   useEffect(() => {
     if (mode === "left") {
       const filteredSelectedKeys = selectedKeys.filter(
-        (item) => !targetKeys.includes(item)
+        (item) => !targetKeys.includes(item),
       );
 
       onChange?.({
@@ -65,6 +65,7 @@ export const EMTransferTree = (props: EMTransferLeftTreeProps) => {
         targetKeys,
       });
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [targetKeys, mode]);
 
   useEffect(() => {
@@ -73,8 +74,9 @@ export const EMTransferTree = (props: EMTransferLeftTreeProps) => {
         treeNodes: dataSource,
         targetKeys,
         searchText,
-      })
+      }),
     );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [dataSource, targetKeys, searchText]);
 
   useEffect(() => {
@@ -85,6 +87,7 @@ export const EMTransferTree = (props: EMTransferLeftTreeProps) => {
       setIndeterminate(false);
       setCheckAll(true);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedKeys]);
 
   useEffect(() => {
@@ -93,6 +96,7 @@ export const EMTransferTree = (props: EMTransferLeftTreeProps) => {
       setIndeterminate(false);
       setCheckAll(false);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [targetKeys]);
 
   const getAllFlattenItems = useCallback(() => {
@@ -126,7 +130,7 @@ export const EMTransferTree = (props: EMTransferLeftTreeProps) => {
         setCheckAll(false);
       }
     },
-    [getAllFlattenItems, targetKeys]
+    [getAllFlattenItems, mode, setSelectedKeys, targetKeys],
   );
 
   const onSearch = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
@@ -148,7 +152,7 @@ export const EMTransferTree = (props: EMTransferLeftTreeProps) => {
                   }
                 })
                 .map((entry) => entry.key)
-            : []
+            : [],
         );
         setIndeterminate(false);
         setCheckAll(e.target.checked);
@@ -158,11 +162,11 @@ export const EMTransferTree = (props: EMTransferLeftTreeProps) => {
         setCheckAll(e.target.checked);
       }
     },
-    [mode, targetKeys, getAllFlattenItems]
+    [mode, setSelectedKeys, getAllFlattenItems, targetKeys],
   );
 
   const onDropCallback = useCallback(
-    (info) => {
+    (info: any) => {
       const { dragNode, dropPosition } = info;
       const { key } = dragNode;
 
@@ -178,7 +182,7 @@ export const EMTransferTree = (props: EMTransferLeftTreeProps) => {
       }
       setTargetKeys(newSelectedKeys);
     },
-    [targetKeys]
+    [setTargetKeys, targetKeys],
   );
 
   const draggableProps =
@@ -202,7 +206,7 @@ export const EMTransferTree = (props: EMTransferLeftTreeProps) => {
             {selectedKeys.length > 0 ? `${selectedKeys.length}/` : ""}
             {`${flatten(treeData)?.length || 0} ${tForLang(
               "exportModalItemsUnit",
-              locale
+              locale,
             )}`}
           </Checkbox>
         </Col>

src/components/other/ExportModal/ExportModal.tsx

@@ -1,26 +1,27 @@
+import useWindowDimensions from "@/hooks/useWindowDimensions";
 import { Divider, Modal } from "antd";
-import React, { useCallback, useContext, useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
+import { EMBottomBar } from "./EMBottomBar";
+import { EMExportTypeSelector } from "./EMExportTypeSelector";
+import { EMNameDialog } from "./EMNameDialog";
+import { EMPredefinedModal } from "./EMPredefinedModal";
+import { EMSeparator } from "./EMSeparator";
+import { EMTotalRegSelector } from "./EMTotalRegSelector";
+import { EMTransfer } from "./EMTransfer";
 import {
   ExportField,
   ExportModalProps,
   ExportRegistersAmount,
   ExportType,
   PredefinedExport,
   PredefinedExportField,
+  PredefinedExportMandatoryId,
 } from "./ExportModal.types";
-import useWindowDimensions from "@/hooks/useWindowDimensions";
-import { EMExportTypeSelector } from "./EMExportTypeSelector";
-import { EMTotalRegSelector } from "./EMTotalRegSelector";
-import { EMTransfer } from "./EMTransfer";
-import { EMSeparator } from "./EMSeparator";
-import { ExportModalTopBar } from "./ExportModalTopBar";
-import { EMPredefinedModal } from "./EMPredefinedModal";
-import { EMNameDialog } from "./EMNameDialog";
-import { EMBottomBar } from "./EMBottomBar";
 import {
-  ExportModalContext,
   ExportModalContextProvider,
+  useExportModalContext,
 } from "./ExportModalContext";
+import { ExportModalTopBar } from "./ExportModalTopBar";
 import { updateTreeData } from "./exportModalHelper";
 
 const { error } = Modal;
@@ -53,24 +54,25 @@ export const ExportModalWithContext = (props: ExportModalProps) => {
   const [registersAmount, setRegistersAmount] =
     useState<ExportRegistersAmount>("all");
   const [selectedFields, setSelectedFields] = useState<PredefinedExportField[]>(
-    selectedKeysProps.map((key) => ({ key }))
+    selectedKeysProps.map((key) => ({ key })),
   );
   const [predefinedModalVisible, setPredefinedModalVisible] = useState(false);
   const [predefinedNameDialogVisible, setPredefinedNameDialogVisible] =
     useState(false);
-  const { dataSource, setDataSource } = useContext(ExportModalContext);
+  const { dataSource, setDataSource } = useExportModalContext();
 
   const [currentPredefinedExport, setCurrentPredefinedExport] = useState<
     PredefinedExport | undefined
   >();
 
   useEffect(() => {
     if (!visible) {
-      setSelectedFields(undefined);
+      setSelectedFields([]);
       setCurrentPredefinedExport(undefined);
       setExportType("xlsx");
       setRegistersAmount(selectedRegistersToExport ? "selected" : "all");
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [visible]);
 
   useEffect(() => {
@@ -105,13 +107,16 @@ export const ExportModalWithContext = (props: ExportModalProps) => {
       });
     }
     setLoading(false);
-  }, [exportType, selectedFields, registersAmount]);
+  }, [onSucceed, exportType, selectedFields, registersAmount]);
 
-  const loadPredefinedExport = (predefinedExport: PredefinedExport) => {
-    setPredefinedModalVisible(false);
-    setCurrentPredefinedExport(predefinedExport);
-    setSelectedFields(predefinedExport.fields);
-  };
+  const loadPredefinedExport = useCallback(
+    (predefinedExport: PredefinedExport) => {
+      setPredefinedModalVisible(false);
+      setCurrentPredefinedExport(predefinedExport);
+      setSelectedFields(predefinedExport.fields);
+    },
+    [],
+  );
 
   const onSaveNewPredefined = useCallback(
     async (name: string) => {
@@ -121,15 +126,15 @@ export const ExportModalWithContext = (props: ExportModalProps) => {
       });
       setCurrentPredefinedExport(newPredefinedExport);
     },
-    [currentPredefinedExport, selectedFields]
+    [onSavePredefinedExport, selectedFields],
   );
 
   const onGetPredefinedExportsCallback = useCallback(async () => {
     const { predefinedExports, keysWithChilds } =
       await onGetPredefinedExports();
 
     if (keysWithChilds.length > 0) {
-      let updatedTree: ExportField[] = undefined;
+      let updatedTree: ExportField[] = [];
 
       for (const entry of keysWithChilds) {
         const { key, childs } = entry;
@@ -142,11 +147,11 @@ export const ExportModalWithContext = (props: ExportModalProps) => {
       setDataSource(updatedTree);
     }
 
-    return predefinedExports;
-  }, [dataSource]);
+    return predefinedExports as PredefinedExportMandatoryId[];
+  }, [dataSource, onGetPredefinedExports, setDataSource]);
 
   return (
-    (<Modal
+    <Modal
       title={
         <ExportModalTopBar
           disabled={loading}
@@ -216,6 +221,6 @@ export const ExportModalWithContext = (props: ExportModalProps) => {
         }}
         onSave={onSaveNewPredefined}
       />
-    </Modal>)
+    </Modal>
   );
 };