@gisce/react-ooui 1.5.1 → 2.0.0-alpha.1

package/package.json

@@ -1,34 +1,33 @@
 {
   "name": "@gisce/react-ooui",
-  "version": "1.5.1",
+  "version": "2.0.0-alpha.1",
+  "engines": {
+    "node": "20.5.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
   "files": [
     "dist",
     "src",
     "README.md"
   ],
-  "main": "./dist/react-ooui.umd.js",
   "module": "./dist/react-ooui.es.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/react-ooui.es.js",
-      "require": "./dist/react-ooui.umd.js"
+      "import": "./dist/react-ooui.es.js"
     }
   },
-  "publishConfig": {
-    "access": "public"
-  },
   "scripts": {
-    "preminor": "npm version preminor --preid rc",
-    "prerelease": "npm version prerelease --preid rc",
-    "prepatch": "npm version prepatch --preid rc",
-    "premajor": "npm version premajor --preid rc",
-    "start": "while :; do tsc && vite build --watch --force; done",
-    "build:tailwind": "postcss src/tailwind.css -o src/tailwind.generated.css",
-    "build": "tsc && vite build",
-    "test": "jest",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "preinstall": "npx only-allow npm",
+    "build": "tsc --noEmit && vite build",
+    "preview": "npm run build && vite preview",
+    "dev:vite": "while :; do tsc && vite build --watch --force; done",
+    "dev:tsc": "tsc --noEmit --watch",
+    "prepare": "husky install",
+    "start": "concurrently npm:dev:*",
+    "check": "lint-staged"
   },
   "dependencies": {
     "@ant-design/plots": "^1.0.9",
@@ -49,51 +48,83 @@
     "react-hotkeys-hook": "^3.4.4",
     "react-markdown": "^8.0.7",
     "react-measure": "^2.5.2",
+    "styled-components": "5.3.5",
     "use-deep-compare-effect": "^1.8.1",
     "uuid": "^3.4.0",
     "validator": "^13.6.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.19.1",
-    "@storybook/addon-actions": "^6.5.12",
-    "@storybook/addon-essentials": "^6.5.12",
-    "@storybook/addon-interactions": "^6.5.12",
-    "@storybook/addon-knobs": "^6.4.0",
-    "@storybook/addon-links": "^6.5.12",
-    "@storybook/builder-vite": "^0.2.2",
-    "@storybook/react": "^6.5.12",
-    "@storybook/testing-library": "^0.0.13",
-    "@tailwindcss/postcss7-compat": "^2.0.2",
-    "@types/jest": "^26.0.15",
+    "@semantic-release/exec": "6.0.3",
+    "@semantic-release/git": "10.0.1",
+    "@semantic-release/npm": "10.0.4",
     "@types/lodash": "^4.14.170",
     "@types/md5": "^2.3.2",
-    "@types/node": "^12.0.0",
     "@types/react": "^17.0.1",
     "@types/react-dom": "^17.0.1",
     "@types/react-grid-layout": "^1.3.2",
     "@types/react-measure": "^2.0.7",
     "@types/react-responsive": "^8.0.2",
+    "@types/rollup-plugin-peer-deps-external": "^2.2.2",
     "@types/scroll-into-view": "^1.16.0",
     "@types/styled-components": "^5.1.7",
     "@types/uuid": "^8.3.1",
     "@types/validator": "^13.6.3",
-    "@vitejs/plugin-react": "^2.1.0",
-    "autoprefixer": "^9.8.6",
-    "babel-loader": "^8.2.5",
-    "jest": "^26.6.3",
-    "jest-enzyme": "^7.1.2",
-    "postcss": "^7.0.35",
-    "postcss-cli": "^7.1.0",
+    "@typescript-eslint/eslint-plugin": "5.59.0",
+    "@typescript-eslint/parser": "5.59.0",
+    "@vitejs/plugin-react-swc": "3.3.2",
+    "concurrently": "8.2.0",
+    "eslint": "8.51.0",
+    "eslint-config-prettier": "8.5.0",
+    "eslint-config-standard-with-typescript": "24.0.0",
+    "eslint-plugin-import": "2.28.0",
+    "eslint-plugin-n": "15.6.0",
+    "eslint-plugin-promise": "6.1.1",
+    "eslint-plugin-react": "7.33.1",
+    "eslint-plugin-react-hooks": "4.6.0",
+    "husky": "8.0.3",
+    "lint-staged": "13.2.3",
+    "only-allow": "1.1.1",
+    "prettier": "3.0.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
-    "ts-jest": "^26.4.4",
-    "typescript": "^4.0.3",
-    "vite": "^3.1.0",
-    "vite-plugin-dts": "^1.0.3"
+    "semantic-release": "21.0.7",
+    "typescript": "^5.0.4",
+    "vite": "4.4.8",
+    "vite-plugin-dts": "^3.6.0",
+    "vite-plugin-package-version": "1.0.2",
+    "vite-tsconfig-paths": "3.5.0"
   },
   "peerDependencies": {
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "styled-components": "^5.2.1"
+    "styled-components": "5.3.5"
+  },
+  "lint-staged": {
+    "src/**/*.{js,jsx,ts,tsx}": "eslint --fix",
+    "src/**/*.{js,jsx,ts,tsx,json,css,md}": "prettier --write"
+  },
+  "release": {
+    "branches": [
+      "master",
+      {
+        "name": "develop",
+        "prerelease": "rc"
+      },
+      {
+        "name": "alpha",
+        "prerelease": true
+      }
+    ],
+    "plugins": [
+      "@semantic-release/commit-analyzer",
+      "@semantic-release/release-notes-generator",
+      [
+        "@semantic-release/npm",
+        {
+          "npmPublish": true
+        }
+      ],
+      "@semantic-release/github",
+      "@semantic-release/git"
+    ]
   }
 }

package/src/actionbar/FormActionBar.tsx

@@ -141,7 +141,7 @@ function FormActionBar({ toolbar }: { toolbar: any }) {
     try {
       setRemovingItem?.(true);
 
-      await ConnectionProvider.getHandler().delete({
+      await ConnectionProvider.getHandler().deleteObjects({
         model: currentModel!,
         ids: [currentId!],
       });

package/src/actionbar/TreeActionBar.tsx

@@ -92,7 +92,7 @@ function TreeActionBar(props: Props) {
     try {
       setRemovingItem?.(true);
 
-      await ConnectionProvider.getHandler().delete({
+      await ConnectionProvider.getHandler().deleteObjects({
         model: currentModel!,
         ids: selectedRowItems!.map((item) => item.id),
       });

package/src/common/DatePicker.tsx

@@ -5,9 +5,9 @@ import Field from "@/common/Field";
 import { WidgetProps } from "@/types";
 import { Date as DateOoui } from "@gisce/ooui";
 import dayjs from "dayjs";
-const { useToken } = theme;
 import weekday from "dayjs/plugin/weekday";
 import localeData from "dayjs/plugin/localeData";
+const { useToken } = theme;
 dayjs.extend(weekday);
 dayjs.extend(localeData);
 
@@ -47,7 +47,7 @@ interface DatePickerInputProps {
 }
 
 const DatePickerInput: React.FC<DatePickerInputProps> = (
-  props: DatePickerInputProps
+  props: DatePickerInputProps,
 ) => {
   const { value, onChange, ooui, showTime } = props;
   const { id, readOnly, required } = ooui as DateOoui;

package/src/common/SelectAllRecordsRow.tsx

@@ -1,6 +1,5 @@
 import styled from "styled-components";
-import { useContext, useState } from "react";
-import React from "react";
+import React, { useContext, useState } from "react";
 import { Spin } from "antd";
 import { LocaleContext, LocaleContextType } from "@/context/LocaleContext";
 import Link from "antd/es/typography/Link";
@@ -60,7 +59,7 @@ export const SelectAllRecordsRow = ({
     <span>
       {translations.recordsSelected.replace(
         "{numberOfSelectedRows}",
-        numberOfVisibleSelectedRows.toString()
+        numberOfVisibleSelectedRows.toString(),
       ) + " "}
 
       {loading ? (
@@ -69,7 +68,7 @@ export const SelectAllRecordsRow = ({
         <Link onClick={handleClick} style={{ fontWeight: 600 }}>
           {translations.selectAllRecords.replace(
             "{totalRecords}",
-            totalRecords.toString()
+            totalRecords.toString(),
           )}
         </Link>
       )}
@@ -80,7 +79,7 @@ export const SelectAllRecordsRow = ({
     <span style={{ fontWeight: 600 }}>
       {translations.allRecordsSelected.replace(
         "{totalRecords}",
-        numberOfRealSelectedRows.toString()
+        numberOfRealSelectedRows.toString(),
       ) + " "}
     </span>
   );

package/src/context/ContentRootContext.tsx

@@ -59,14 +59,14 @@ const callRefreshValues = async (fns: any[]) => {
 
 const ContentRootProvider = (
   props: ContentRootProviderProps,
-  ref: any
+  ref: any,
 ): any => {
   const { children, globalValues = {} } = props;
   const reportInProgressInterval = useRef<any>();
   const waitingForReport = useRef<boolean>();
   const [reportGenerating, setReportGenerating] = useState<boolean>(false);
   const tabManagerContext = useContext(
-    TabManagerContext
+    TabManagerContext,
   ) as TabManagerContextType;
   const { openAction } = tabManagerContext || {};
   const onRefreshParentValues = useRef<any>([]);
@@ -82,7 +82,7 @@ const ContentRootProvider = (
   const [actionModalOptions, setActionModalOptions] = useState<ActionModalOpts>(
     {
       context: {},
-    }
+    },
   );
 
   async function generateReport(options: GenerateReportOptions) {
@@ -103,7 +103,7 @@ const ContentRootProvider = (
 
     const { ids } = datas || {};
 
-    let idsToExecute = ids || [];
+    const idsToExecute = ids || [];
 
     const reportContextParsed =
       typeof reportContext === "string"
@@ -182,9 +182,12 @@ const ContentRootProvider = (
         context,
       });
     } else if (type === "ir.actions.act_window") {
-      return await runAction({actionData, fields, values, context});
+      return await runAction({ actionData, fields, values, context });
     } else if (type === "ir.actions.act_url") {
-      window.open(stringFormat(actionData.url, {...values, context}), "_blank");
+      window.open(
+        stringFormat(actionData.url, { ...values, context }),
+        "_blank",
+      );
     } else {
       showErrorDialog(`${type} action not supported`);
       return {};
@@ -275,7 +278,7 @@ const ContentRootProvider = (
         context: mergedContext,
         domain: parsedDomain,
         model: actionData.res_model,
-        views: views,
+        views,
         title: actionData.name,
         initialView,
         action_id: actionData.id,
@@ -346,52 +349,54 @@ const ContentRootProvider = (
     });
   }
 
-  return (<>
-    <ContentRootContext.Provider
-      value={{
-        processAction,
-        globalValues,
-      }}
-    >
-      <>
-        {children}
-        <Modal
-          title={t("generatingReport")}
-          open={reportGenerating}
-          footer={null}
-          closable={false}
-          centered
-          maskClosable={false}
-        >
-          <Spin />
-        </Modal>
-        <FormModal
-          buttonModal
-          parentContext={actionModalOptions.context}
-          model={actionModalOptions.model!}
-          formView={actionModalOptions.formView}
-          visible={actionModalVisible}
-          onSubmitSucceed={onFormModalSucceed}
-          onCancel={() => {
-            callRefreshValues(onRefreshParentValues.current);
-            onRefreshParentValues.current = [];
-            setActionModalVisible(false);
-            setActionModalOptions({
-              domain: undefined,
-              model: undefined,
-              context: {},
-              formView: undefined,
-              actionData: undefined,
-            });
-          }}
-          showFooter={false}
-          actionDomain={actionModalOptions.domain}
-          isMenuAction={actionModalOptions?.actionData !== undefined}
-          actionData={actionModalOptions?.actionData}
-        />
-      </>
-    </ContentRootContext.Provider>
-  </>);
+  return (
+    <>
+      <ContentRootContext.Provider
+        value={{
+          processAction,
+          globalValues,
+        }}
+      >
+        <>
+          {children}
+          <Modal
+            title={t("generatingReport")}
+            open={reportGenerating}
+            footer={null}
+            closable={false}
+            centered
+            maskClosable={false}
+          >
+            <Spin />
+          </Modal>
+          <FormModal
+            buttonModal
+            parentContext={actionModalOptions.context}
+            model={actionModalOptions.model!}
+            formView={actionModalOptions.formView}
+            visible={actionModalVisible}
+            onSubmitSucceed={onFormModalSucceed}
+            onCancel={() => {
+              callRefreshValues(onRefreshParentValues.current);
+              onRefreshParentValues.current = [];
+              setActionModalVisible(false);
+              setActionModalOptions({
+                domain: undefined,
+                model: undefined,
+                context: {},
+                formView: undefined,
+                actionData: undefined,
+              });
+            }}
+            showFooter={false}
+            actionDomain={actionModalOptions.domain}
+            isMenuAction={actionModalOptions?.actionData !== undefined}
+            actionData={actionModalOptions?.actionData}
+          />
+        </>
+      </ContentRootContext.Provider>
+    </>
+  );
 };
 
 async function getViewsAndInitialView({
@@ -439,7 +444,9 @@ async function getViewsAndInitialView({
     };
   } else if (!view_id) {
     const type = view_mode.split(",")[0];
-    const [retrievedViewId] = retriedViewData.find(([_, viewType]) => viewType === type)!;
+    const [retrievedViewId] = retriedViewData.find(
+      ([_, viewType]) => viewType === type,
+    )!;
     initialView = { id: retrievedViewId, type };
   } else {
     initialView = {

package/src/context/TabManagerContext.tsx

@@ -20,7 +20,7 @@ export type TabManagerContextType = {
     domain: any;
     context: any;
     model: string;
-    views: Array<any>;
+    views: any[];
     title: string;
     target: string;
     initialView: InitialViewData;
@@ -69,9 +69,8 @@ export type TabManagerContextType = {
   setCurrentId?: (id?: number) => void;
 };
 
-export const TabManagerContext = React.createContext<TabManagerContextType | null>(
-  null
-);
+export const TabManagerContext =
+  React.createContext<TabManagerContextType | null>(null);
 
 type TabManagerProviderProps = TabManagerContextType & {
   children: React.ReactNode;

package/src/helpers/dynamicColumnsHelper.ts

@@ -23,7 +23,7 @@ export const calculateColumnsWidth = (
   maxWidthPerCell = 500
 ) => {
   if (columns.length === 0) {
-    return columns;
+    return { columns };
   }
 
   // First we calculate the width for each column

package/src/helpers/filesHelper.ts

@@ -8,7 +8,7 @@ export function getFilesize(base64string: string) {
 
 export async function getMimeType(base64string: string) {
   const mimeInfo = await fileTypeFromBuffer(
-    Buffer.from(base64string, "base64")
+    Buffer.from(base64string, "base64"),
   );
   if (!mimeInfo) {
     return {
@@ -29,13 +29,13 @@ export const toBase64 = (file: File): Promise<string> =>
   });
 
 export function openBase64InNewTab(data: string, mimeType: string) {
-  var byteCharacters = atob(data);
-  var byteNumbers = new Array(byteCharacters.length);
-  for (var i = 0; i < byteCharacters.length; i++) {
+  const byteCharacters = atob(data);
+  const byteNumbers = new Array(byteCharacters.length);
+  for (let i = 0; i < byteCharacters.length; i++) {
     byteNumbers[i] = byteCharacters.charCodeAt(i);
   }
-  var byteArray = new Uint8Array(byteNumbers);
-  var file = new Blob([byteArray], { type: mimeType + ";base64" });
-  var fileURL = URL.createObjectURL(file);
+  const byteArray = new Uint8Array(byteNumbers);
+  const file = new Blob([byteArray], { type: mimeType + ";base64" });
+  const fileURL = URL.createObjectURL(file);
   window.open(fileURL);
 }

package/src/helpers/formHelper.ts

@@ -57,7 +57,7 @@ export const getTouchedValues = ({
 
       const nonOriginalItems =
         target[key]?.items?.filter(
-          (item: One2manyItem) => item.operation !== "original"
+          (item: One2manyItem) => item.operation !== "original",
         ) || [];
 
       if (nonOriginalItems.length > 0) {
@@ -203,7 +203,7 @@ export const mergeSearchFields = (searchFields: any[]) => {
 
     mergedSearchFields.primary = mergedSearchFields.primary.concat(sf.primary);
     mergedSearchFields.secondary = mergedSearchFields.secondary.concat(
-      sf.secondary
+      sf.secondary,
     );
   });
 
@@ -224,7 +224,7 @@ export const transformPlainMany2Ones = ({
   values: any;
   fields: any;
 }) => {
-  let reformattedValues: { [key: string]: any } = {};
+  const reformattedValues: { [key: string]: any } = {};
 
   Object.keys(values).forEach((key) => {
     const value = values[key];
@@ -245,30 +245,29 @@ export const transformPlainMany2Ones = ({
   return reformattedValues;
 };
 
-
 export const colorFromString = (text: string) => {
   let hash = 0;
-  text = text.toString().padEnd(10, '0');
+  text = text.toString().padEnd(10, "0");
   for (let i = 0; i < text.length; i++) {
     hash = text.charCodeAt(i) + ((hash << 5) - hash);
   }
-  let hexColour = '#';
+  let hexColour = "#";
   for (let i = 0; i < 3; i++) {
-    var value = (hash >> (i * 8)) & 0xFF;
-    hexColour += ('00' + value.toString(16)).slice(-2);
+    const value = (hash >> (i * 8)) & 0xff;
+    hexColour += ("00" + value.toString(16)).slice(-2);
   }
   return hexColour;
-}
+};
 
 export const colorTextFromBackground = (color: string) => {
   function getRGB(c: string): number {
-    return parseInt(c, 16) || parseInt(c)
+    return parseInt(c, 16) || parseInt(c);
   }
 
-  function getsRGB(c: string ) {
+  function getsRGB(c: string) {
     return getRGB(c) / 255 <= 0.03928
       ? getRGB(c) / 255 / 12.92
-      : Math.pow((getRGB(c) / 255 + 0.055) / 1.055, 2.4)
+      : Math.pow((getRGB(c) / 255 + 0.055) / 1.055, 2.4);
   }
 
   function getLuminance(hexColor: string) {
@@ -276,27 +275,27 @@ export const colorTextFromBackground = (color: string) => {
       0.2126 * getsRGB(hexColor.substr(1, 2)) +
       0.7152 * getsRGB(hexColor.substr(3, 2)) +
       0.0722 * getsRGB(hexColor.substr(-2))
-    )
+    );
   }
 
   function getContrast(f: string, b: string) {
-    const L1 = getLuminance(f)
-    const L2 = getLuminance(b)
-    return (Math.max(L1, L2) + 0.05) / (Math.min(L1, L2) + 0.05)
+    const L1 = getLuminance(f);
+    const L2 = getLuminance(b);
+    return (Math.max(L1, L2) + 0.05) / (Math.min(L1, L2) + 0.05);
   }
 
   function getTextColor(bgColor: string) {
-    const whiteContrast = getContrast(bgColor, '#ffffff')
-    const blackContrast = getContrast(bgColor, '#000000')
+    const whiteContrast = getContrast(bgColor, "#ffffff");
+    const blackContrast = getContrast(bgColor, "#000000");
 
-    return whiteContrast > blackContrast ? '#ffffff' : '#000000'
+    return whiteContrast > blackContrast ? "#ffffff" : "#000000";
   }
 
   return getTextColor(color);
-
-}
-
+};
 
 export const stringFormat = (text: string, values: any): string => {
-  return text.replace(/\{([^}]+)\}/g, (match, key)  => values[key] !== undefined ? values[key] : match);
-}
+  return text.replace(/\{([^}]+)\}/g, (match, key) =>
+    values[key] !== undefined ? values[key] : match,
+  );
+};

package/src/helpers/one2manyHelper.ts

@@ -18,7 +18,7 @@ type ReadObjectValuesOptions = {
 };
 
 const readObjectValues = async (
-  options: ReadObjectValuesOptions
+  options: ReadObjectValuesOptions,
 ): Promise<[One2manyItem[], any]> => {
   const {
     items,
@@ -30,7 +30,7 @@ const readObjectValues = async (
   } = options;
 
   const temporalItems: One2manyItem = items.filter(
-    (item) => item.operation !== "original"
+    (item) => item.operation !== "original",
   );
 
   // We get a number array of id's
@@ -43,8 +43,8 @@ const readObjectValues = async (
     tree: treeView.fields,
   };
 
-  let values = [],
-    evaluatedColorsForTree;
+  let values = [];
+  let evaluatedColorsForTree;
 
   if (currentView === "tree" && treeView?.arch) {
     const colors = getTree(treeView as TreeView)?.colors;
@@ -85,7 +85,7 @@ const readObjectValues = async (
   // We fill the values property of the One2manyItem with the retrieved values from the API
   const originalItemsWithFetchedValues: One2manyItem[] = items.map((item) => {
     const fetchedItemValues = filteredValues.find(
-      (itemValues: any) => itemValues.id === item.id
+      (itemValues: any) => itemValues.id === item.id,
     );
 
     const itemWithFetchedValues = {
@@ -177,7 +177,7 @@ const convertToPlain2ManyValues = (values: any, fields: any) => {
       values[key]?.items
     ) {
       result[key] = values[key].items.filter(
-        (item: One2manyItem) => item.operation !== "pendingRemove"
+        (item: One2manyItem) => item.operation !== "pendingRemove",
       );
     } else {
       result[key] = values[key];

package/src/helpers/searchHelper.ts

@@ -8,7 +8,10 @@ const convertBooleanParamIfNeeded = (value: any) => {
 export const getParamsForFields = (values: any, widgetContainer: any) => {
   const filteredValues = removeUndefinedFields(values);
   const groupedDateTime = groupDateTimeValuesIfNeeded(filteredValues);
-  const groupedValues = ungroupDateValuesIfNeeded(groupedDateTime, widgetContainer);
+  const groupedValues = ungroupDateValuesIfNeeded(
+    groupedDateTime,
+    widgetContainer,
+  );
 
   const params = [
     ...Object.keys(groupedValues).map((key) => {
@@ -64,7 +67,7 @@ const getParamForField = (key: string, value: any, widgetContainer: any) => {
       key,
       "in",
       value.map((valueEntry: string) =>
-        convertBooleanParamIfNeeded(valueEntry)
+        convertBooleanParamIfNeeded(valueEntry),
       ),
     ];
   } else {
@@ -83,7 +86,7 @@ const removeDateTimeSingleFields = (values: any) => {
   Object.keys(newValues).forEach(
     (key) =>
       (key.indexOf("#time") !== -1 || key.indexOf("#date") !== -1) &&
-      delete newValues[key]
+      delete newValues[key],
   );
   return newValues;
 };
@@ -133,7 +136,7 @@ const ungroupDateValuesIfNeeded = (values: any, widgetContainer: any) => {
     return widget && widget.type === "date";
   });
 
-  let newValues: any = { ...values };
+  const newValues: any = { ...values };
 
   dateFields.forEach((key) => {
     delete newValues[key];
@@ -156,7 +159,7 @@ export const removeUndefinedFields = (values: any) => {
       (newValues[key] === undefined ||
         newValues[key] === null ||
         newValues[key] === "") &&
-      delete newValues[key]
+      delete newValues[key],
   );
   return newValues;
 };