@gisce/react-ooui 0.1.0

package/src/stories/FiberGrid.stories.tsx

@@ -0,0 +1,109 @@
+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";
+
+export default {
+  title: "Components/Widgets/Custom/FiberGrid",
+};
+
+const exampleJson = {
+  res: {
+    elements: {
+      wires: [
+        {
+          id: 21,
+          name: "TRAM1 23/06",
+          disposition: "LEFT",
+          tubes: [
+            {
+              id: 23,
+              name: "T1-Tub 1",
+              color: "#cfc",
+              fibers: [
+                { id: 223, name: "F1-F1 - ROJA", color: "#448844" },
+                { id: 224, name: "F2-F2 - VERDE", color: "#00f0ff" },
+                { id: 225, name: "F3-F3 - AZUL", color: "#0000FF" },
+                { id: 226, name: "F4-F4 - NEGRA", color: "#000000" },
+              ],
+            },
+            {
+              id: 24,
+              name: "T2-Tub 2",
+              color: "#bbf",
+              fibers: [
+                { id: 227, name: "F1-F1 - ROJA", color: "#FF0000" },
+                { id: 228, name: "F2-F2 - VERDE", color: "#00FF00" },
+                { id: 229, name: "F3-F3 - AZUL", color: "#0000FF" },
+                { id: 230, name: "F4-F4 - NEGRA", color: "#000000" },
+              ],
+            },
+          ],
+        },
+        {
+          id: 22,
+          name: "TRAM2 23/06",
+          disposition: "RIGHT",
+          tubes: [
+            {
+              id: 25,
+              name: "T1-Tub 1",
+              color: "#faf",
+              fibers: [
+                { id: 231, name: "F1-F1 - ROJA", color: "#FF0000" },
+                { id: 232, name: "F2-F2 - VERDE", color: "#00FF00" },
+                { id: 233, name: "F3-F3 - AZUL", color: "#0000FF" },
+                { id: 234, name: "F4-F4 - NEGRA", color: "#000000" },
+              ],
+            },
+            {
+              id: 26,
+              name: "T2-Tub 2",
+              color: "#aafaff",
+              fibers: [
+                { id: 235, name: "F1-F1 - ROJA", color: "#F000FF" },
+                { id: 236, name: "F2-F2 - VERDE", color: "#3F090F" },
+                { id: 237, name: "F3-F3 - AZUL", color: "#128312" },
+                { id: 238, name: "F4-F4 - NEGRA", color: "#F39F39" },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+    connections: {
+      fibers: [
+        { fiber_in: 231, fiber_out: 227 },
+        { fiber_in: 228, fiber_out: 232 },
+        { fiber_in: 233, fiber_out: 229 },
+        { fiber_in: 230, fiber_out: 234 },
+        { fiber_in: 223, fiber_out: 235 },
+        { fiber_in: 236, fiber_out: 224 },
+        { fiber_in: 225, fiber_out: 237 },
+        { fiber_in: 238, fiber_out: 226 },
+      ],
+    },
+  },
+};
+
+export const Default = (): React.ReactElement => {
+  const ooui = new CharOoui({
+    name: "field",
+    string: "Lorem ipsum",
+  });
+
+  return (
+    <Form
+      initialValues={{
+        field: JSON.stringify(exampleJson),
+      }}
+    >
+      <LocaleProvider lang="en_US">
+        <FiberGrid ooui={ooui} />
+      </LocaleProvider>
+    </Form>
+  );
+};

package/src/stories/Float.stories.tsx

@@ -0,0 +1,22 @@
+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 {
+  title: "Components/Widgets/Base/Float",
+};
+
+export const Default = (): React.ReactElement => {
+  const ooui = new FloatOoui({
+    name: "field",
+    string: "Lorem ipsum",
+  });
+  return (
+    <LocaleProvider lang="en_US">
+      <Float ooui={ooui} showLabel />
+    </LocaleProvider>
+  );
+};

package/src/stories/FloatTime.stories.tsx

@@ -0,0 +1,32 @@
+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 {
+  title: "Components/Widgets/Base/FloatTime",
+};
+
+export const Default = (): React.ReactElement => {
+  const ooui = new FloatOoui({
+    name: "field",
+    string: "Lorem ipsum",
+  });
+
+  const [value, setValue] = useState<number>(1.5);
+
+  return (
+    <LocaleProvider lang="en_US">
+      <FloatTimeInput
+        ooui={ooui}
+        value={value}
+        onChange={(newValue) => {
+          setValue(newValue);
+        }}
+      />
+      {/* <FloatTime ooui={ooui} showLabel /> */}
+    </LocaleProvider>
+  );
+};

package/src/stories/Image.stories.tsx

@@ -0,0 +1,25 @@
+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 {
+  title: "Components/Widgets/Base/Image",
+};
+
+export const StockIcon = ({ name }): React.ReactElement => {
+  const ooui = new ImageOoui({
+    name: name,
+  });
+  return (
+    <LocaleProvider lang="en_US">
+      <Image ooui={ooui} />
+    </LocaleProvider>
+  );
+};
+
+StockIcon.args = {
+  name: "gtk-print",
+};

package/src/stories/Integer.stories.tsx

@@ -0,0 +1,22 @@
+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 {
+  title: "Components/Widgets/Base/Integer",
+};
+
+export const Default = (): React.ReactElement => {
+  const ooui = new IntegerOoui({
+    name: "field",
+    string: "Lorem ipsum",
+  });
+  return (
+    <LocaleProvider lang="en_US">
+      <Integer ooui={ooui} showLabel />
+    </LocaleProvider>
+  );
+};

package/src/stories/Label.stories.tsx

@@ -0,0 +1,22 @@
+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 {
+  title: "Components/Widgets/Base/Label",
+};
+
+export const Default = (): React.ReactElement => {
+  const ooui = new LabelOoui({
+    name: "field",
+    string: "Lorem ipsum",
+  });
+  return (
+    <LocaleProvider lang="en_US">
+      <Label ooui={ooui} />
+    </LocaleProvider>
+  );
+};

package/src/stories/Many2one.stories.tsx

@@ -0,0 +1,31 @@
+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 {
+  title: "Components/Widgets/Base/Many2One",
+};
+
+export const Default = (): React.ReactElement => {
+  const ooui = new Many2oneOoui({
+    name: "field",
+    string: "Lorem ipsum",
+    relation: "res.partners",
+  });
+  return (
+    <LocaleProvider lang="en_US">
+      <div style={{ width: 200 }}>
+        <Many2one ooui={ooui} showLabel />
+      </div>
+      <div style={{ width: 300 }}>
+        <Many2one ooui={ooui} showLabel />
+      </div>
+      <div style={{ width: 500 }}>
+        <Many2one ooui={ooui} showLabel />
+      </div>
+    </LocaleProvider>
+  );
+};

package/src/stories/One2many.stories.tsx

@@ -0,0 +1,292 @@
+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 {
+  title: "Components/Widgets/Base/One2many",
+};
+
+export const Default = (): React.ReactElement => {
+  const ooui = new One2manyOoui({
+    name: "field",
+    string: "Lorem ipsum",
+    relation: "res.partners",
+    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                                ',
+        fields: {
+          aclarador: {
+            size: 256,
+            string: "Aclarador",
+            type: "char",
+            views: {},
+          },
+          apartat_correus: {
+            size: 5,
+            string: "Apartat de Correus",
+            type: "char",
+            views: {},
+          },
+          bq: {
+            size: 4,
+            string: "Bloc",
+            type: "char",
+            views: {},
+          },
+          country_id: {
+            context: "",
+            domain: [],
+            relation: "res.country",
+            size: 64,
+            string: "Country",
+            type: "many2one",
+            views: {},
+          },
+          email: {
+            size: 240,
+            string: "E-Mail",
+            type: "char",
+            views: {},
+          },
+          es: {
+            size: 10,
+            string: "Escala",
+            type: "char",
+            views: {},
+          },
+          fax: {
+            size: 64,
+            string: "Fax",
+            type: "char",
+            views: {},
+          },
+          function: {
+            context: "",
+            domain: [],
+            relation: "res.partner.function",
+            size: 64,
+            string: "Function",
+            type: "many2one",
+            views: {},
+          },
+          id_municipi: {
+            context: "",
+            domain: [],
+            relation: "res.municipi",
+            size: 64,
+            string: "Municipi",
+            type: "many2one",
+            views: {},
+          },
+          id_poblacio: {
+            context: "",
+            domain: [],
+            relation: "res.poblacio",
+            size: 64,
+            string: "Població",
+            type: "many2one",
+            views: {},
+          },
+          mobile: {
+            size: 64,
+            string: "Mobile",
+            type: "char",
+            views: {},
+          },
+          name: {
+            size: 128,
+            string: "Contact Name",
+            type: "char",
+            views: {},
+          },
+          notes: {
+            string: "Notes",
+            type: "text",
+            views: {},
+          },
+          nv: {
+            size: 256,
+            string: "Carrer",
+            type: "char",
+            views: {},
+          },
+          phone: {
+            size: 64,
+            string: "Phone",
+            type: "char",
+            views: {},
+          },
+          pnp: {
+            size: 10,
+            string: "Número",
+            type: "char",
+            views: {},
+          },
+          pt: {
+            size: 10,
+            string: "Planta",
+            type: "char",
+            views: {},
+          },
+          pu: {
+            size: 10,
+            string: "Porta",
+            type: "char",
+            views: {},
+          },
+          ref_catastral: {
+            size: 20,
+            string: "Ref Catastral (c)",
+            type: "char",
+            views: {},
+          },
+          state_id: {
+            context: "",
+            domain: "[('country_id','=',country_id)]",
+            relation: "res.country.state",
+            size: 64,
+            string: "Fed. State",
+            type: "many2one",
+            views: {},
+          },
+          street: {
+            digits: [16, 2],
+            readonly: 1,
+            size: 128,
+            string: "Street",
+            type: "char",
+            views: {},
+          },
+          street2: {
+            size: 128,
+            string: "Street2",
+            type: "char",
+            views: {},
+          },
+          title: {
+            selection: [
+              ["Ms.", "Madam"],
+              ["Mss", "Miss"],
+              ["M.", "Sir"],
+              ["", ""],
+            ],
+            size: 32,
+            string: "Title",
+            type: "selection",
+            views: {},
+          },
+          tv: {
+            context: "",
+            domain: [],
+            relation: "res.tipovia",
+            size: 64,
+            string: "Tipus Via",
+            type: "many2one",
+            views: {},
+          },
+          type: {
+            help:
+              "Used to select automatically the right address according to the context in sales and purchases documents.",
+            selection: [
+              ["default", "Default"],
+              ["invoice", "Invoice"],
+              ["delivery", "Delivery"],
+              ["contact", "Contact"],
+              ["other", "Other"],
+              ["ov", "Oficina Virtual"],
+            ],
+            string: "Address Type",
+            type: "selection",
+            views: {},
+          },
+          zip: {
+            change_default: true,
+            size: 24,
+            string: "Zip",
+            type: "char",
+            views: {},
+          },
+        },
+      },
+      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                            ',
+        fields: {
+          city: {
+            size: 128,
+            string: "City",
+            type: "char",
+            views: {},
+          },
+          country_id: {
+            context: "",
+            domain: [],
+            relation: "res.country",
+            size: 64,
+            string: "Country",
+            type: "many2one",
+            views: {},
+          },
+          email: {
+            size: 240,
+            string: "E-Mail",
+            type: "char",
+            views: {},
+          },
+          name: {
+            size: 128,
+            string: "Contact Name",
+            type: "char",
+            views: {},
+          },
+          phone: {
+            size: 64,
+            string: "Phone",
+            type: "char",
+            views: {},
+          },
+          street: {
+            digits: [16, 2],
+            readonly: 1,
+            size: 128,
+            string: "Street",
+            type: "char",
+            views: {},
+          },
+          type: {
+            help:
+              "Used to select automatically the right address according to the context in sales and purchases documents.",
+            selection: [
+              ["default", "Default"],
+              ["invoice", "Invoice"],
+              ["delivery", "Delivery"],
+              ["contact", "Contact"],
+              ["other", "Other"],
+              ["ov", "Oficina Virtual"],
+            ],
+            string: "Address Type",
+            type: "selection",
+            views: {},
+          },
+          zip: {
+            change_default: true,
+            size: 24,
+            string: "Zip",
+            type: "char",
+            views: {},
+          },
+        },
+      },
+    },
+  });
+  return (
+    <LocaleProvider lang="en_US">
+      <One2many ooui={ooui} />
+    </LocaleProvider>
+  );
+};

package/src/stories/ProgressBar.stories.tsx

@@ -0,0 +1,22 @@
+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 {
+  title: "Components/Widgets/Base/ProgressBar",
+};
+
+export const Default = (): React.ReactElement => {
+  const ooui = new FloatOoui({
+    name: "field",
+    string: "Lorem ipsum",
+  });
+  return (
+    <LocaleProvider lang="en_US">
+      <ProgressBarInput value={50} />
+    </LocaleProvider>
+  );
+};

package/src/stories/Reference.stories.tsx

@@ -0,0 +1,43 @@
+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 {
+  title: "Components/Widgets/Base/Reference",
+};
+
+const selectionValues = [
+  ["product.product", "Product"],
+  ["purchase.order", "Purchase Order"],
+  ["account.invoice", "Invoice"],
+  ["stock.production.lot", "Production Lot"],
+  ["giscedata.polissa", "Pòlissa"],
+  ["giscegas.polissa", "Contrato"],
+  ["giscedata.signatura.process", "Firma"],
+  ["giscedata.crm.lead", "Oferta/Oportunidad"],
+  ["crm.case", "Case"],
+  ["giscedata.switching", "Caso ATR"],
+];
+
+export const Default = (): React.ReactElement => {
+  const ooui = new ReferenceOoui({
+    name: "selcontext_langection",
+    string: "Lorem ipsum",
+    selection: selectionValues,
+  });
+
+  return (
+    <LocaleProvider lang="en_US">
+      <ReferenceInput
+        ooui={ooui}
+        value={"product.product,5"}
+        onChange={(newValue: any) => {
+          console.log(newValue);
+        }}
+      />
+    </LocaleProvider>
+  );
+};

package/src/stories/Selection.stories.tsx

@@ -0,0 +1,34 @@
+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";
+
+export default {
+  title: "Components/Widgets/Base/Selection",
+  decorators: [withKnobs],
+};
+
+const selectionValues = [
+  ["en_US", "English"],
+  ["ca_ES", "Catalan / Català"],
+  ["es_ES", "Spanish / Español"],
+];
+
+export const Default = (): React.ReactElement => {
+  const ooui = new SelectionOoui({
+    name: "selcontext_langection",
+    string: "Lorem ipsum",
+    selection: selectionValues,
+  });
+  const value = text("value", "en_US") || undefined;
+
+  return (
+    <LocaleProvider lang="en_US">
+      <SelectionInput ooui={ooui} value={value} />
+    </LocaleProvider>
+  );
+};

package/src/stories/Separator.stories.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+import { Separator } from "..";
+import { Separator as SeparatorOoui } from "@gisce/ooui";
+import "antd/dist/antd.css";
+import LocaleProvider from "../context/LocaleContext";
+
+export default {
+  title: "Components/Widgets/Base/Separator",
+};
+
+export const Default = (): React.ReactElement => {
+  const ooui = new SeparatorOoui({
+    string: "Lorem ipsum",
+  });
+  return (
+    <LocaleProvider lang="en_US">
+      <Separator ooui={ooui} showLabel />
+    </LocaleProvider>
+  );
+};