@gisce/react-ooui 0.1.0

package/src/stories/views/Tab.stories.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+
+import Tab from "../../views/tabs/Tab";
+
+import "antd/dist/antd.css";
+import LocaleProvider from "../../context/LocaleContext";
+
+export default {
+  title: "Components/Widgets/Views/Tab",
+};
+
+export const Default = (): React.ReactElement => {
+  return (
+    <LocaleProvider lang="es_ES">
+      <div
+        style={{
+          display: "inline-flex",
+          gap: 5,
+        }}
+      >
+        <Tab
+          tabKey="1"
+          label="Test TestTestTest"
+          onClose={() => {}}
+          isActive={true}
+          onSelected={() => {}}
+        />
+        <Tab
+          tabKey="1"
+          label="Test TestTestTest"
+          onClose={() => {}}
+          onSelected={() => {}}
+          isActive={false}
+        />
+        <Tab
+          tabKey="1"
+          label="Test TestTestTest"
+          onClose={() => {}}
+          onSelected={() => {}}
+          isActive={false}
+        />
+        <Tab
+          tabKey="1"
+          label="Test TestTestTest"
+          onClose={() => {}}
+          onSelected={() => {}}
+          isActive={false}
+        />
+        <Tab
+          tabKey="1"
+          label="Test TestTestTest"
+          onClose={() => {}}
+          onSelected={() => {}}
+          isActive={false}
+        />
+        <Tab
+          tabKey="1"
+          label="Test TestTestTest"
+          onClose={() => {}}
+          onSelected={() => {}}
+          isActive={false}
+        />
+        <Tab
+          tabKey="1"
+          label="Test TestTestTest"
+          onClose={() => {}}
+          onSelected={() => {}}
+          isActive={false}
+        />
+        <Tab
+          tabKey="1"
+          label="Test TestTestTest"
+          onClose={() => {}}
+          onSelected={() => {}}
+          isActive={false}
+        />
+        <Tab
+          tabKey="1"
+          label="Test TestTestTest"
+          onClose={() => {}}
+          onSelected={() => {}}
+          isActive={false}
+        />
+        <Tab
+          tabKey="1"
+          label="Test TestTestTest"
+          onClose={() => {}}
+          onSelected={() => {}}
+          isActive={false}
+        />
+      </div>
+    </LocaleProvider>
+  );
+};

package/src/stories/views/TabManager.stories.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+import { TabManager } from "../..";
+
+export default {
+  title: "Components/Widgets/Views/TabManager",
+};
+
+export const Default = (): React.ReactElement => {
+  return (
+    <TabManager lang="en_US">
+      <></>
+    </TabManager>
+  );
+};

package/src/stories/views/TabsAndContent.stories.tsx

@@ -0,0 +1,89 @@
+import React from "react";
+
+import Tab from "../../views/tabs/Tab";
+
+import "antd/dist/antd.css";
+import LocaleProvider from "../../context/LocaleContext";
+
+export default {
+  title: "Components/Widgets/Views/TabsAndContent",
+};
+
+export const Default = (): React.ReactElement => {
+  return (
+    <LocaleProvider lang="es_ES">
+      <div>
+        <Tab
+          tabKey="1"
+          label="Test TestTestTest"
+          onClose={() => {}}
+          isActive={true}
+          onSelected={() => {}}
+        />
+        <Tab
+          tabKey="1"
+          label="Test TestTestTest"
+          onClose={() => {}}
+          onSelected={() => {}}
+          isActive={false}
+        />
+        <Tab
+          tabKey="1"
+          label="Test TestTestTest"
+          onClose={() => {}}
+          onSelected={() => {}}
+          isActive={false}
+        />
+        <Tab
+          tabKey="1"
+          label="Test TestTestTest"
+          onClose={() => {}}
+          onSelected={() => {}}
+          isActive={false}
+        />
+        <Tab
+          tabKey="1"
+          label="Test TestTestTest"
+          onClose={() => {}}
+          onSelected={() => {}}
+          isActive={false}
+        />
+        <Tab
+          tabKey="1"
+          label="Test TestTestTest"
+          onClose={() => {}}
+          onSelected={() => {}}
+          isActive={false}
+        />
+        <Tab
+          tabKey="1"
+          label="Test TestTestTest"
+          onClose={() => {}}
+          onSelected={() => {}}
+          isActive={false}
+        />
+        <Tab
+          tabKey="1"
+          label="Test TestTestTest"
+          onClose={() => {}}
+          onSelected={() => {}}
+          isActive={false}
+        />
+        <Tab
+          tabKey="1"
+          label="Test TestTestTest"
+          onClose={() => {}}
+          onSelected={() => {}}
+          isActive={false}
+        />
+        <Tab
+          tabKey="1"
+          label="Test TestTestTest"
+          onClose={() => {}}
+          onSelected={() => {}}
+          isActive={false}
+        />
+      </div>
+    </LocaleProvider>
+  );
+};

package/src/stories/views/Tree.stories.js

@@ -0,0 +1,166 @@
+import React from "react";
+
+import { Tree } from "../..";
+import "antd/dist/antd.css";
+import "@/tailwind.generated.css";
+import LocaleProvider from "../../context/LocaleContext";
+
+export default {
+  component: Tree,
+  title: "Components/Widgets/Views/Tree",
+};
+
+const Template = (args) => (
+  <LocaleProvider lang="en_US">
+    <Tree {...args} />
+  </LocaleProvider>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  total: 5,
+  limit: 80,
+  page: 1,
+  loading: false,
+  results: [
+    {
+      city: false,
+      country: false,
+      id: 62,
+      lang: false,
+      name: "AGRI ENERGIA ELECTRICA, S.A.",
+      ref: "0112",
+      title: false,
+      numeric: 30.1,
+      progressbar: 100,
+    },
+    {
+      city: "Wavre",
+      country: [20, "Belgium"],
+      id: 3,
+      lang: false,
+      name: "Agrolait",
+      ref: false,
+      title: false,
+      numeric: 30.1,
+      progressbar: 70.434331,
+    },
+    {
+      city: false,
+      country: false,
+      id: 106,
+      lang: "ca_ES",
+      name: "ALCAZAR SANZ, GUSTAVO",
+      ref: false,
+      title: false,
+      numeric: 30.32,
+      progressbar: 60.44433332,
+    },
+    {
+      city: "Sevilla",
+      country: [67, "España"],
+      id: 32,
+      lang: false,
+      name: "Andalucía",
+      ref: "01",
+      title: false,
+      numeric: 30.1,
+      progressbar: 10,
+    },
+    {
+      city: false,
+      country: [67, "España"],
+      id: 82,
+      lang: "es_ES",
+      name: "Apellido2 Apellido2, Nombre",
+      ref: false,
+      title: false,
+      numeric: 30.1,
+      progressbar: 30,
+    },
+    {
+      city: "Zaragoza",
+      country: [67, "España"],
+      id: 33,
+      lang: false,
+      name: "Aragón",
+      ref: "02",
+      title: false,
+      numeric: 30.1,
+      progressbar: 20.01,
+    },
+  ],
+  treeView: {
+    arch:
+      '<tree string="Partners">\n<field name="numeric" sum="Numeric"/><field name="name"/>\n                    <field name="title"/>\n                    <field name="ref"/>\n                    <field name="city" select="2"/>\n                    <field name="country" select="2"/>\n                    <field name="lang"/>\n <field name="progressbar" string="Progress" />               </tree>',
+    fields: {
+      progressbar: {
+        string: "Progress bar",
+        type: "progressbar",
+      },
+      numeric: {
+        digits: [16, 3],
+        string: "Potència contractada (kW)",
+        type: "float",
+      },
+      city: {
+        digits: [16, 2],
+        string: "City",
+        type: "char",
+        views: {},
+      },
+      country: {
+        context: "",
+        digits: [16, 2],
+        domain: [],
+        relation: "res.country",
+        string: "Country",
+        type: "many2one",
+        views: {},
+      },
+      lang: {
+        help:
+          "If the selected language is loaded in the system, all documents related to this partner will be printed in this language. If not, it will be english.",
+        selection: [
+          ["en_US", "English"],
+          ["ca_ES", "Catalan / Català"],
+          ["es_ES", "Spanish / Español"],
+          ["", ""],
+        ],
+        size: 5,
+        string: "Language",
+        type: "selection",
+        views: {},
+      },
+      name: {
+        required: true,
+        select: true,
+        size: 128,
+        string: "Name",
+        type: "char",
+        views: {},
+      },
+      ref: {
+        select: true,
+        size: 64,
+        string: "Code",
+        type: "char",
+        views: {},
+      },
+      title: {
+        selection: [
+          ["Corp.", "Corp."],
+          ["ltd", "Ltd"],
+          ["", ""],
+        ],
+        size: 32,
+        string: "Title",
+        type: "selection",
+        views: {},
+      },
+    },
+  },
+  onRequestPageChange: (page, pageSize) => {
+    console.log(`Change - Page: ${page} PageSize: ${pageSize}`);
+  },
+};

package/src/stories/views/searchFilter/DateRangePicker.stories.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+import { Field as FieldOoui } from "@gisce/ooui";
+import LocaleProvider from "../../../context/LocaleContext";
+
+import { DateRangePicker } from "../../../widgets/views/searchFilter/DateRangePicker";
+import "antd/dist/antd.css";
+
+export default {
+  title: "Components/Widgets/Views/SearchFilter/DateRangePicker",
+};
+
+export const Default = (): React.ReactElement => {
+  const ooui = new FieldOoui({
+    name: "field",
+    string: "Lorem ipsum",
+  });
+  return (
+    <LocaleProvider lang="en_US">
+      <DateRangePicker ooui={ooui} showLabel />
+    </LocaleProvider>
+  );
+};

package/src/stories/views/searchFilter/DateTimeRangePicker.stories.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+import { Field as FieldOoui } from "@gisce/ooui";
+
+import { DateTimeRangePicker } from "../../../widgets/views/searchFilter/DateTimeRangePicker";
+import "antd/dist/antd.css";
+import LocaleProvider from "../../../context/LocaleContext";
+
+export default {
+  title: "Components/Widgets/Views/SearchFilter/DateTimeRangePicker",
+};
+
+export const Default = (): React.ReactElement => {
+  const ooui = new FieldOoui({
+    name: "field",
+    string: "Lorem ipsum",
+  });
+  return (
+    <LocaleProvider lang="en_US">
+      <DateTimeRangePicker ooui={ooui} showLabel />
+    </LocaleProvider>
+  );
+};

package/src/stories/views/searchFilter/PairFields.stories.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+import { Field as FieldOoui } from "@gisce/ooui";
+
+import { PairFields } from "../../../widgets/views/searchFilter/PairFields";
+import "antd/dist/antd.css";
+import LocaleProvider from "../../../context/LocaleContext";
+
+export default {
+  title: "Components/Widgets/Views/SearchFilter/PairFields",
+};
+
+export const Default = (): React.ReactElement => {
+  const ooui = new FieldOoui({
+    name: "field",
+    string: "Lorem ipsum",
+  });
+  return (
+    <LocaleProvider lang="en_US">
+      <PairFields ooui={ooui} showLabel />
+    </LocaleProvider>
+  );
+};

package/src/stories/views/searchFilter/SearchFilter.stories.tsx

@@ -0,0 +1,166 @@
+import React from "react";
+
+import { SearchFilter } from "../../..";
+import "antd/dist/antd.css";
+import "@/tailwind.generated.css";
+import LocaleProvider from "../../../context/LocaleContext";
+
+export default {
+  component: SearchFilter,
+  title: "Components/Widgets/Views/SearchFilter/SearchFilter",
+};
+
+const Template = (args: any) => (
+  <LocaleProvider lang="en_US">
+    <SearchFilter {...args} />
+  </LocaleProvider>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  limit: 80,
+  offset: 1,
+  searchFields: {
+    primary: [
+      "char",
+      "boolean",
+      "one2many",
+      "many2many",
+      "many2one",
+      "text",
+      "float",
+      "float_time",
+      "progressbar",
+      "integer",
+      "date",
+      "datetime",
+      "selection",
+    ],
+    secondary: ["char_2", "boolean_2", "selection_2"],
+  },
+  fields: {
+    boolean: {
+      string: "Boolean",
+      type: "boolean",
+      views: {},
+    },
+    boolean_2: {
+      string: "Boolean 2",
+      type: "boolean",
+      views: {},
+    },
+    one2many: {
+      context: "",
+      domain: [],
+      inv_field: "partner_id",
+      relation: "res.partner.address",
+      string: "One2many",
+      type: "one2many",
+    },
+    many2many: {
+      context: "",
+      domain: [],
+      relation: "res.partner.category",
+      string: "Many2many",
+      type: "many2many",
+      views: {},
+    },
+    char: {
+      select: true,
+      size: 128,
+      string: "Char",
+      type: "char",
+      help: "Test message",
+      views: {},
+    },
+    char_2: {
+      select: true,
+      size: 128,
+      string: "Char 2",
+      type: "char",
+      views: {},
+    },
+    text: {
+      string: "Text",
+      type: "text",
+      views: {},
+    },
+    integer: {
+      help: "Total amount this customer owes you.",
+      readonly: 1,
+      string: "Integer",
+      type: "integer",
+      views: {},
+    },
+    float: {
+      digits: [16, 2],
+      help: "Total amount this customer owes you.",
+      readonly: 1,
+      string: "Float",
+      type: "float",
+      views: {},
+    },
+    float_time: {
+      string: "Float time",
+      type: "float_time",
+    },
+    progressbar: {
+      string: "Progress bar",
+      type: "progressbar",
+    },
+    date: {
+      select: 1,
+      string: "Date",
+      type: "date",
+      views: {},
+    },
+    datetime: {
+      select: 1,
+      string: "Date time",
+      type: "datetime",
+      views: {},
+    },
+    selection: {
+      digits: [16, 2],
+      readonly: 1,
+      selection: [
+        ["electric", "Electric"],
+        ["gas", "Gas"],
+        ["elegas", "Electric & Gas"],
+        ["undefined", "Indefinit"],
+      ],
+      string: "Selection",
+      type: "selection",
+      views: {},
+    },
+    selection_2: {
+      digits: [16, 2],
+      readonly: 1,
+      selection: [
+        ["electric", "Electric"],
+        ["gas", "Gas"],
+        ["elegas", "Electric & Gas"],
+        ["undefined", "Indefinit"],
+      ],
+      string: "Selection 2",
+      type: "selection",
+      views: {},
+    },
+    many2one: {
+      context: "",
+      domain: [],
+      relation: "res.partner",
+      select: 2,
+      size: 64,
+      string: "Many2one",
+      type: "many2one",
+      views: {},
+    },
+  },
+  onClear: () => {
+    console.log("onClear");
+  },
+  onSubmit: (fields) => {
+    console.log("onSubmit");
+  },
+};