@gisce/react-ooui 1.5.2-alpha.1 → 1.5.2-rc.0

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;
 }) => {
-  const reformattedValues: { [key: string]: any } = {};
+  let reformattedValues: { [key: string]: any } = {};
 
   Object.keys(values).forEach((key) => {
     const value = values[key];
@@ -245,29 +245,30 @@ 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++) {
-    const value = (hash >> (i * 8)) & 0xff;
-    hexColour += ("00" + value.toString(16)).slice(-2);
+    var 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) {
@@ -275,27 +276,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 = [];
-  let evaluatedColorsForTree;
+  let values = [],
+    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,10 +8,7 @@ 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) => {
@@ -67,7 +64,7 @@ const getParamForField = (key: string, value: any, widgetContainer: any) => {
       key,
       "in",
       value.map((valueEntry: string) =>
-        convertBooleanParamIfNeeded(valueEntry),
+        convertBooleanParamIfNeeded(valueEntry)
       ),
     ];
   } else {
@@ -86,7 +83,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;
 };
@@ -136,7 +133,7 @@ const ungroupDateValuesIfNeeded = (values: any, widgetContainer: any) => {
     return widget && widget.type === "date";
   });
 
-  const newValues: any = { ...values };
+  let newValues: any = { ...values };
 
   dateFields.forEach((key) => {
     delete newValues[key];
@@ -159,7 +156,7 @@ export const removeUndefinedFields = (values: any) => {
       (newValues[key] === undefined ||
         newValues[key] === null ||
         newValues[key] === "") &&
-      delete newValues[key],
+      delete newValues[key]
   );
   return newValues;
 };

package/src/helpers/treeHelper.ts

@@ -18,8 +18,8 @@ const getTree = (treeView: TreeView): TreeOoui => {
 const getTableColumns = (
   tree: TreeOoui,
   components: any,
-  context: any,
-): Column[] => {
+  context: any
+): Array<Column> => {
   const tableColumns = tree.columns.map((column) => {
     const type = column.type;
     const key = column.id;
@@ -38,8 +38,8 @@ const getTableColumns = (
       title: column.label,
       render,
       sorter: (a: any, b: any) => {
-        let aItem = a[key] || "";
-        let bItem = b[key] || "";
+        let aItem = a[key] || "",
+          bItem = b[key] || "";
 
         if (type === "many2one") {
           aItem = a[key]?.value || "";
@@ -55,7 +55,7 @@ const getTableColumns = (
   return tableColumns;
 };
 
-const getTableItems = (treeOoui: TreeOoui, results: any[]): any[] => {
+const getTableItems = (treeOoui: TreeOoui, results: Array<any>): Array<any> => {
   const tableItems = results.map((item: any) => {
     const parsedItem: any = {};
     Object.keys(item).map((key) => {
@@ -158,8 +158,8 @@ function sortResults({
   const type = fields[field].type;
 
   const sortFn = (a: any, b: any) => {
-    let aItem = a[field] || "";
-    let bItem = b[field] || "";
+    let aItem = a[field] || "",
+      bItem = b[field] || "";
 
     if (type === "many2one") {
       aItem = a[field]?.[1] || "";

package/src/helpers/viewHelper.ts

@@ -1,7 +1,7 @@
 import { ViewTuple, ViewType } from "@/types";
 
 export async function resolveViewInfoPromises(
-  viewsToRetrieve: Array<{ viewTuple: ViewTuple; promise?: Promise<any> }>,
+  viewsToRetrieve: { viewTuple: ViewTuple; promise?: Promise<any> }[]
 ) {
   const results = await Promise.all(
     viewsToRetrieve.map(async (item) => {
@@ -11,7 +11,7 @@ export async function resolveViewInfoPromises(
         console.error(`Error for ${item.viewTuple}:`, error);
         return null;
       }
-    }),
+    })
   );
 
   const updatedViews = viewsToRetrieve.map((item, index) => ({

package/src/hooks/useExport.ts

@@ -181,7 +181,7 @@ export const useExport = ({
 
   const onRemovePredefinedExport = useCallback(
     async (pExport: PredefinedExport) => {
-      await ConnectionProvider.getHandler().deleteObjects({
+      await ConnectionProvider.getHandler().delete({
         model: "ir.exports",
         ids: [pExport.id!],
       });
@@ -367,7 +367,8 @@ const retrieveKeyFieldsForPredefinedExports = async ({
   onGetFieldChilds: (key: string) => Promise<ExportField[]>;
 }) => {
   const allPredefinedExportKeys = predefinedExports.flatMap(
-    (exp: PredefinedExport) => exp.fields.map((field: any) => field.key)
+    (exp: PredefinedExport) =>
+      exp.fields.map((field: any) => field.key)
   );
 
   const keysWithoutChildsInFields = getKeysWithoutChildsInFields({

package/src/hooks/useSearch.ts

@@ -207,7 +207,7 @@ export const useSearch = (opts: UseSearchOpts) => {
         sorter !== undefined
           ? sortResults({
               resultsToSort: results,
-              sorter,
+              sorter: sorter,
               fields: { ...treeView!.fields, ...formView!.fields },
             })
           : [...originalResults.current];
@@ -216,7 +216,7 @@ export const useSearch = (opts: UseSearchOpts) => {
 
       if (resultsActionView && resultsSorted.length > 0) {
         const newCurrentItemIndex = resultsSorted.findIndex(
-          (item) => currentId === item.id,
+          (item) => currentId === item.id
         );
 
         if (newCurrentItemIndex === -1) {
@@ -249,7 +249,7 @@ export const useSearch = (opts: UseSearchOpts) => {
       limit,
       offset,
       searchParams,
-    ],
+    ]
   );
 
   const fetchResults = useCallback(
@@ -290,7 +290,7 @@ export const useSearch = (opts: UseSearchOpts) => {
       setTreeIsLoading,
       sorter,
       treeView,
-    ],
+    ]
   );
 
   const changeSort = useCallback(
@@ -307,7 +307,7 @@ export const useSearch = (opts: UseSearchOpts) => {
           : [...originalResults.current];
       setResults(sortedResults);
     },
-    [setSorter, getResults, treeView, formView, setResults],
+    [setSorter, getResults, treeView, formView, setResults]
   );
 
   const submit = useCallback(
@@ -351,7 +351,7 @@ export const useSearch = (opts: UseSearchOpts) => {
       setLimit,
       setOffset,
       fetchResults,
-    ],
+    ]
   );
 
   const requestPageChange = useCallback(
@@ -360,7 +360,7 @@ export const useSearch = (opts: UseSearchOpts) => {
       setPage(page);
       setOffset((page - 1) * limit!);
     },
-    [setTableRefreshing, limit, setOffset, setPage],
+    [setTableRefreshing, limit, setOffset, setPage]
   );
 
   const clear = useCallback(() => {
@@ -400,7 +400,7 @@ export const useSearch = (opts: UseSearchOpts) => {
 
       return getTableItems(getTree(treeView!), children);
     },
-    [treeView, model, context, getResults, setResults],
+    [treeView, model, context, getResults, setResults]
   );
 
   const getAllIds = useCallback(async () => {

package/src/index.ts

@@ -82,8 +82,6 @@ import CurrentTabContent from "./views/CurrentTabContent";
 import ContentRootProvider from "./context/ContentRootContext";
 import FavouriteButton from "./ui/FavouriteButton";
 import { ConfigContext } from "./context/ConfigContext";
-import Tab from "./views/tabs/Tab";
-import ActionView from "./views/ActionView";
 
 export {
   Button,
@@ -163,6 +161,4 @@ export {
   CommentsTimelineField,
   ExportModal,
   ConfigContext,
-  Tab,
-  ActionView,
 };

package/src/stories/Binary.stories.tsx

@@ -3,6 +3,9 @@ import React, { useState } from "react";
 import { BinaryInput } from "../widgets/base/Binary";
 import { Binary as BinaryOoui } from "@gisce/ooui";
 
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../context/LocaleContext";
 
 export default {

package/src/stories/Boolean.stories.tsx

@@ -3,6 +3,9 @@ import React from "react";
 import { Boolean } from "..";
 import { Boolean as BooleanOoui } from "@gisce/ooui";
 
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../context/LocaleContext";
 
 export default {

package/src/stories/Button.stories.tsx

@@ -3,6 +3,9 @@ import React from "react";
 import { Button } from "..";
 import { Button as ButtonOoui } from "@gisce/ooui";
 
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../context/LocaleContext";
 
 export default {
@@ -25,7 +28,7 @@ export const WithStockIcon = (): React.ReactElement => {
   const ooui = new ButtonOoui({
     name: "button_field",
     string: "Lorem ipsum",
-    icon: "gtk-ok",
+    icon: "gtk-ok"
   });
   return (
     <LocaleProvider lang="en_US">
@@ -38,7 +41,7 @@ export const WithCustomIcon = (): React.ReactElement => {
   const ooui = new ButtonOoui({
     name: "button_field",
     string: "Lorem ipsum",
-    icon: "terp-purchase",
+    icon: "terp-purchase"
   });
   return (
     <LocaleProvider lang="en_US">
@@ -51,7 +54,7 @@ export const WithAntdIcon = (): React.ReactElement => {
   const ooui = new ButtonOoui({
     name: "button_field",
     string: "Lorem ipsum",
-    icon: "ant-design",
+    icon: "ant-design"
   });
   return (
     <LocaleProvider lang="en_US">
@@ -64,7 +67,7 @@ export const WithUnexistingdIcon = (): React.ReactElement => {
   const ooui = new ButtonOoui({
     name: "button_field",
     string: "Lorem ipsum",
-    icon: "foo",
+    icon: "foo"
   });
   return (
     <LocaleProvider lang="en_US">
@@ -77,7 +80,7 @@ export const WithTablerIcon = (): React.ReactElement => {
   const ooui = new ButtonOoui({
     name: "button_field",
     string: "Lorem ipsum",
-    icon: "bulb-off",
+    icon: "bulb-off"
   });
   return (
     <LocaleProvider lang="en_US">
@@ -91,7 +94,7 @@ export const PrimaryButton = (): React.ReactElement => {
     name: "button_field",
     string: "Lorem ipsum",
     icon: "send",
-    primary: "1",
+    primary: "1"
   });
   return (
     <LocaleProvider lang="en_US">
@@ -105,7 +108,7 @@ export const DangerButton = (): React.ReactElement => {
     name: "button_field",
     string: "Lorem ipsum",
     icon: "exclamation-circle",
-    danger: "1",
+    danger: "1"
   });
   return (
     <LocaleProvider lang="en_US">
@@ -114,13 +117,14 @@ export const DangerButton = (): React.ReactElement => {
   );
 };
 
+
 export const PrimaryDangerButton = (): React.ReactElement => {
   const ooui = new ButtonOoui({
     name: "button_field",
     string: "Lorem ipsum",
     icon: "exclamation-circle",
     danger: "1",
-    primary: "1",
+    primary: "1"
   });
   return (
     <LocaleProvider lang="en_US">
@@ -128,3 +132,5 @@ export const PrimaryDangerButton = (): React.ReactElement => {
     </LocaleProvider>
   );
 };
+
+

package/src/stories/Char.stories.tsx

@@ -3,6 +3,9 @@ import React from "react";
 import { Char } from "..";
 import { Char as CharOoui } from "@gisce/ooui";
 
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../context/LocaleContext";
 
 export default {

package/src/stories/FiberGrid.stories.tsx

@@ -3,6 +3,9 @@ import React from "react";
 import { FiberGrid } from "../widgets/custom/FiberGrid";
 import { Char as CharOoui } from "@gisce/ooui";
 
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../context/LocaleContext";
 import { Form } from "antd";
 

package/src/stories/Float.stories.tsx

@@ -3,6 +3,9 @@ import React from "react";
 import { Float } from "..";
 import { Float as FloatOoui } from "@gisce/ooui";
 
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../context/LocaleContext";
 
 export default {

package/src/stories/FloatTime.stories.tsx

@@ -3,6 +3,9 @@ import React, { useState } from "react";
 import { FloatTimeInput } from "../widgets/base/FloatTime";
 import { Float as FloatOoui } from "@gisce/ooui";
 
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../context/LocaleContext";
 
 export default {

package/src/stories/Image.stories.tsx

@@ -3,6 +3,9 @@ import React from "react";
 import { Image } from "..";
 import { Image as ImageOoui } from "@gisce/ooui";
 
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../context/LocaleContext";
 
 export default {

package/src/stories/Integer.stories.tsx

@@ -3,6 +3,9 @@ import React from "react";
 import { Integer } from "..";
 import { Integer as IntegerOoui } from "@gisce/ooui";
 
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../context/LocaleContext";
 
 export default {

package/src/stories/Label.stories.tsx

@@ -3,6 +3,9 @@ import React from "react";
 import { Label } from "..";
 import { Label as LabelOoui } from "@gisce/ooui";
 
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../context/LocaleContext";
 
 export default {

package/src/stories/Many2one.stories.tsx

@@ -3,6 +3,9 @@ import React from "react";
 import { Many2one } from "..";
 import { Many2one as Many2oneOoui } from "@gisce/ooui";
 
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../context/LocaleContext";
 
 export default {

package/src/stories/One2many.stories.tsx

@@ -3,6 +3,9 @@ import React from "react";
 import { One2many } from "..";
 import { One2many as One2manyOoui } from "@gisce/ooui";
 
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../context/LocaleContext";
 
 export default {
@@ -17,7 +20,8 @@ export const Default = (): React.ReactElement => {
     mode: "form,tree",
     views: {
       form: {
-        arch: '<form string="Partner Contacts -">\n                                    <notebook>\n                                        <page string="General">\n                                            <field name="name" select="2" required="True"/>\n                                            <field domain="[(\'domain\', \'=\', \'contact\')]" name="title" string="Type"/>\n                                            <field name="function"/>\n                                            <field name="type" select="2"/>\n                                            <separator string="Street" colspan="4"/>\n                                            <field name="street" select="2" colspan="4" width="200"/>\n                                            <group colspan="2" col="4">\n                        <field name="tv" select="2"/>\n                        <newline/>\n                        <field name="nv" colspan="4"/>\n                    </group>\n                    <group colspan="2" col="8">\n                        <field name="pnp"/>\n                        <field name="es"/>\n                        <field name="pt"/>\n                        <field name="pu"/>\n                        <field name="bq" colspan="1"/>\n                        <field name="aclarador" colspan="5"/>\n                    </group>\n                <field name="street2"/>\n                                            <newline/>\n                                            <field name="zip" select="2"/>\n                                            <field name="apartat_correus"/>\n                    <newline/>\n                <newline/>\n                                            <field name="id_municipi" on_change="onchange_municipi_id(id_municipi,context)"/>\n                    <field name="id_poblacio" domain="[(\'municipi_id\',\'=\',id_municipi)]"/>\n                <field name="state_id" select="2"/>\n                                            <field completion="1" name="country_id" select="2"/>\n                                            <newline/>\n                                            <separator string="Catastre" colspan="4"/>\n                    <field name="ref_catastral"/>\n                <separator string="Comunication channels" colspan="4"/>\n                                            <field name="phone"/>\n                                            <field name="fax"/>\n                                            <newline/>\n                                            <field name="mobile"/>\n                                            <field name="email" select="2" widget="email"/>\n                                        </page>\n                                        <page string="Notes">\n                                            <field name="notes" nolabel="1" colspan="4"/>\n                                        </page>\n                                    </notebook>\n                                </form>\n                                ',
+        arch:
+          '<form string="Partner Contacts -">\n                                    <notebook>\n                                        <page string="General">\n                                            <field name="name" select="2" required="True"/>\n                                            <field domain="[(\'domain\', \'=\', \'contact\')]" name="title" string="Type"/>\n                                            <field name="function"/>\n                                            <field name="type" select="2"/>\n                                            <separator string="Street" colspan="4"/>\n                                            <field name="street" select="2" colspan="4" width="200"/>\n                                            <group colspan="2" col="4">\n                        <field name="tv" select="2"/>\n                        <newline/>\n                        <field name="nv" colspan="4"/>\n                    </group>\n                    <group colspan="2" col="8">\n                        <field name="pnp"/>\n                        <field name="es"/>\n                        <field name="pt"/>\n                        <field name="pu"/>\n                        <field name="bq" colspan="1"/>\n                        <field name="aclarador" colspan="5"/>\n                    </group>\n                <field name="street2"/>\n                                            <newline/>\n                                            <field name="zip" select="2"/>\n                                            <field name="apartat_correus"/>\n                    <newline/>\n                <newline/>\n                                            <field name="id_municipi" on_change="onchange_municipi_id(id_municipi,context)"/>\n                    <field name="id_poblacio" domain="[(\'municipi_id\',\'=\',id_municipi)]"/>\n                <field name="state_id" select="2"/>\n                                            <field completion="1" name="country_id" select="2"/>\n                                            <newline/>\n                                            <separator string="Catastre" colspan="4"/>\n                    <field name="ref_catastral"/>\n                <separator string="Comunication channels" colspan="4"/>\n                                            <field name="phone"/>\n                                            <field name="fax"/>\n                                            <newline/>\n                                            <field name="mobile"/>\n                                            <field name="email" select="2" widget="email"/>\n                                        </page>\n                                        <page string="Notes">\n                                            <field name="notes" nolabel="1" colspan="4"/>\n                                        </page>\n                                    </notebook>\n                                </form>\n                                ',
         fields: {
           aclarador: {
             size: 256,
@@ -189,7 +193,8 @@ export const Default = (): React.ReactElement => {
             views: {},
           },
           type: {
-            help: "Used to select automatically the right address according to the context in sales and purchases documents.",
+            help:
+              "Used to select automatically the right address according to the context in sales and purchases documents.",
             selection: [
               ["default", "Default"],
               ["invoice", "Invoice"],
@@ -212,7 +217,8 @@ export const Default = (): React.ReactElement => {
         },
       },
       tree: {
-        arch: '<tree string="Partner Contacts">\n                                    <field name="name"/>\n                                    <field name="street"/>\n                    <field name="type"/>\n                <field name="zip"/>\n                                    <field name="city"/>\n                                    <field name="country_id"/>\n                                    <field name="phone"/>\n                                    <field name="email"/>\n                                </tree>\n                            ',
+        arch:
+          '<tree string="Partner Contacts">\n                                    <field name="name"/>\n                                    <field name="street"/>\n                    <field name="type"/>\n                <field name="zip"/>\n                                    <field name="city"/>\n                                    <field name="country_id"/>\n                                    <field name="phone"/>\n                                    <field name="email"/>\n                                </tree>\n                            ',
         fields: {
           city: {
             size: 128,
@@ -256,7 +262,8 @@ export const Default = (): React.ReactElement => {
             views: {},
           },
           type: {
-            help: "Used to select automatically the right address according to the context in sales and purchases documents.",
+            help:
+              "Used to select automatically the right address according to the context in sales and purchases documents.",
             selection: [
               ["default", "Default"],
               ["invoice", "Invoice"],

package/src/stories/ProgressBar.stories.tsx

@@ -3,6 +3,9 @@ import React from "react";
 import { ProgressBarInput } from "../widgets/base/ProgressBar";
 import { Float as FloatOoui } from "@gisce/ooui";
 
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../context/LocaleContext";
 
 export default {

package/src/stories/Reference.stories.tsx

@@ -3,6 +3,9 @@ import React from "react";
 import { ReferenceInput } from "../widgets/base/Reference";
 import { Reference as ReferenceOoui } from "@gisce/ooui";
 
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../context/LocaleContext";
 
 export default {

package/src/stories/Selection.stories.tsx

@@ -3,6 +3,9 @@ import React from "react";
 import { SelectionInput } from "../widgets/base/Selection";
 import { Selection as SelectionOoui } from "@gisce/ooui";
 
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../context/LocaleContext";
 
 import { withKnobs, text } from "@storybook/addon-knobs";