@gisce/react-ooui 0.1.0

package/src/stories/Text.stories.tsx

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

package/src/stories/containers/Group.stories.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import "antd/dist/antd.css";
+import "@/tailwind.generated.css";
+
+import { withKnobs, number, text } from "@storybook/addon-knobs";
+import LocaleProvider from "../../context/LocaleContext";
+
+import { Form } from "antd";
+import { Form as FormOoui, Group as GroupOoui } from "@gisce/ooui";
+import { Group } from "../..";
+
+export default {
+  title: "Components/Widgets/Containers/Group",
+  decorators: [withKnobs],
+};
+
+const archTemplate = [
+  `<form><group name="group" label="{label}" colspan="{colspan}" col="{col}">`,
+  `</group></form>`,
+];
+
+const field = '<field name="name"/>';
+
+const fields = {
+  name: {
+    string: "Field",
+    type: "char",
+  },
+};
+
+export const Default = (): React.ReactElement => {
+  const label = text("Label", undefined) || undefined;
+  const col = number("Columns", 4) || 4;
+  const colspan = number("Colspan", 4) || 4;
+  const num_fields = number("Number of widgets", 2) || 2;
+
+  const arch = [
+    archTemplate[0]
+      .replace("{label}", label)
+      .replace("{colspan}", colspan.toString())
+      .replace("{col}", col.toString()),
+  ];
+
+  let fieldsXml = "";
+  for (let i = 0; i < num_fields; i += 1) {
+    fieldsXml += field;
+  }
+  arch.push(fieldsXml);
+  arch.push(archTemplate[1]);
+
+  const formOoui = new FormOoui(fields);
+  formOoui.parse(arch.join(""));
+  const groupOoui = formOoui.findById("group") as GroupOoui;
+  groupOoui.label = label;
+
+  return (
+    <LocaleProvider lang="en_US">
+      <Form>
+        <Group ooui={groupOoui} />
+      </Form>
+    </LocaleProvider>
+  );
+};

package/src/stories/containers/NewLine.stories.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+
+import { Form } from "../..";
+import "antd/dist/antd.css";
+import "@/tailwind.generated.css";
+import LocaleProvider from "../../context/LocaleContext";
+
+export default {
+  component: Form,
+  title: "Components/Widgets/Containers/NewLineExample",
+};
+
+const Template = (args: any) => (
+  <LocaleProvider lang="en_US">
+    <Form {...args} />
+  </LocaleProvider>
+);
+export const Default = Template.bind({});
+Default.args = {
+  initialValues: {
+    name: "John Appleseed",
+    login: "john",
+    context_lang: "ca_ES",
+    context_tz: "Europe/Madrid",
+    password: "MaskedPassword",
+    signature: "John Appleseed\n___\nReach me at +34973748312",
+  },
+  arch: `
+  <form string="Users">
+    <group colspan="4" col="4">
+      <field name="name"/>
+      <newline/>
+      <field name="login" readonly="1"/>
+    </group>
+  </form>`,
+  fields: {
+    login: {
+      required: true,
+      size: 64,
+      string: "Login",
+      type: "char",
+      views: {},
+    },
+    name: {
+      required: true,
+      select: true,
+      size: 64,
+      string: "Name",
+      type: "char",
+      views: {},
+    },
+  },
+};

package/src/stories/containers/Notebook.stories.tsx

@@ -0,0 +1,91 @@
+import React from "react";
+import "antd/dist/antd.css";
+import "@/tailwind.generated.css";
+
+import { withKnobs } from "@storybook/addon-knobs";
+import LocaleProvider from "../../context/LocaleContext";
+
+import { Form } from "antd";
+import { Form as FormOoui, Notebook as NotebookOoui } from "@gisce/ooui";
+import { Notebook } from "../..";
+
+export default {
+  title: "Components/Widgets/Containers/Notebook",
+  decorators: [withKnobs],
+};
+
+const arch = `<form><notebook name="notebook">
+<page string="General">
+  <field name="name" />
+</page>
+<page string="Secondary">
+  <field name="surname" />
+</page>
+</notebook>
+</form>`;
+
+const testArch = `<form><notebook name="notebook"><page string="Corbes">
+<group colspan="4">
+    <group string="Validada" colspan="2">
+        <field name="name" string="Última corba"/>
+        <field name="surname" string="Format"/>
+    </group>
+    <group string="Facturada" colspan="2">
+        <field name="name" string="Última corba"/>
+        <field name="surname" string="Format"/>
+    </group>
+    <group string="Autoconsumida" colspan="2">
+        <field name="name" string="Última corba"/>
+        <field name="surname" string="Format"/>
+    </group>
+    <group string="Generada Neta" colspan="2">
+        <field name="name" string="Última corba"/>
+        <field name="surname" string="Format"/>
+    </group>
+    <group string="Quart-Horària" colspan="2">
+        <field name="name" string="Última corba"/>
+        <field name="surname" string="Format"/>
+    </group>
+    <group colspan="2"></group>
+</group>
+</page></notebook>
+</form>`;
+
+const fields = {
+  name: {
+    string: "Field of page 1",
+    type: "char",
+  },
+  surname: {
+    string: "Field of page 2",
+    type: "char",
+  },
+};
+
+export const Default = (): React.ReactElement => {
+  const formOoui = new FormOoui(fields);
+  formOoui.parse(arch);
+  const notebookOoui = formOoui.findById("notebook") as NotebookOoui;
+
+  return (
+    <LocaleProvider lang="en_US">
+      <Form>
+        <Notebook ooui={notebookOoui} />
+      </Form>
+    </LocaleProvider>
+  );
+};
+
+export const Test = (): React.ReactElement => {
+  const formOoui = new FormOoui(fields);
+  formOoui.parse(testArch);
+  const notebookOoui = formOoui.findById("notebook") as NotebookOoui;
+
+  return (
+    <LocaleProvider lang="en_US">
+      <Form>
+        <Notebook ooui={notebookOoui} />
+      </Form>
+    </LocaleProvider>
+  );
+};

package/src/stories/custom/Indicator.stories.tsx

@@ -0,0 +1,41 @@
+import React, {useState} from "react";
+
+import {Indicator} from "../../widgets/custom/Indicator";
+import { Indicator as IndicatorOoui } from "@gisce/ooui";
+import "antd/dist/antd.css";
+import LocaleProvider from "../../context/LocaleContext";
+
+export default {
+  title: "Components/Widgets/Custom/Indicator",
+};
+
+export const Default = (): React.ReactElement => {
+  const ooui = new IndicatorOoui({
+    name: "button_field",
+    string: "Lorem ipsum",
+  });
+  return (
+    <LocaleProvider lang="en_US">
+      <Indicator ooui={ooui} />
+    </LocaleProvider>
+  );
+};
+
+
+export const WithIconAndSuffix = (): React.ReactElement => {
+  const ooui = new IndicatorOoui({
+    name: "test",
+    string: "Pending amount",
+    widget_props: "{'icon': 'wallet', 'suffix': '€'}",
+  });
+
+  return (
+    <LocaleProvider lang="en_US">
+      <Indicator ooui={ooui} value={300}/>
+    </LocaleProvider>
+  );
+};
+
+
+
+

package/src/stories/dashboard/Dashboard.stories.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+import { Dashboard } from "../..";
+import LocaleProvider from "../../context/LocaleContext";
+
+export default {
+  title: "Components/Widgets/Dashboard/Sample",
+};
+
+const xml = `<?xml version="1.0"?>
+    <dashboard string="Partner dashboard">
+        <dashboard_item action_id="71" position="{'x':0,'y':0,'w':6,'h':24}" />
+        <dashboard_item action_id="75" position="{'x':7,'y':0,'w':6,'h':24}" />
+    </dashboard>
+    `;
+
+export function Default(): React.ReactElement {
+  return (
+    <LocaleProvider lang="en_US">
+      <Dashboard arch={xml} />
+    </LocaleProvider>
+  );
+}

package/src/stories/dashboard/DashboardGrid.stories.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { DashboardGridItem, DashboardGrid, GraphIndicator } from "../..";
+
+import LocaleProvider from "../../context/LocaleContext";
+
+export default {
+  title: "Components/Widgets/Dashboard/DashboardGrid",
+};
+
+export function Default(): React.ReactElement {
+  return (
+    <LocaleProvider lang="en_US">
+      <DashboardGrid>
+        <DashboardGridItem
+          title="test"
+          parms={{ w: 3, h: 9, x: 0, y: 0, id: 10 }}
+        >
+          <GraphIndicator
+            model="res.partner"
+            context={{}}
+            domain={{}}
+            icon={"wallet"}
+            showPercent={true}
+            // suffix={"€"}
+          />
+        </DashboardGridItem>
+      </DashboardGrid>
+    </LocaleProvider>
+  );
+}

package/src/stories/forms/Attachment.stories.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+import { Form } from "../..";
+import LocaleProvider from "../../context/LocaleContext";
+
+export default {
+  title: "Components/Widgets/Forms/Attachments",
+};
+
+export const Default = (): React.ReactElement => {
+  return (
+    <LocaleProvider lang="en_US">
+      <Form
+        model={"ir.attachment"}
+        onCancel={() => {
+          console.log();
+        }}
+        onSubmitSucceed={(value: any) => {
+          console.log();
+        }}
+      />
+    </LocaleProvider>
+  );
+};

package/src/stories/forms/CUPSForm.stories.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+import { Form } from "../..";
+import LocaleProvider from "../../context/LocaleContext";
+
+export default {
+  title: "Components/Widgets/Forms/CUPS",
+};
+
+export const Default = (): React.ReactElement => {
+  return (
+    <LocaleProvider lang="en_US">
+      <Form
+        model={"giscedata.cups.ps"}
+        id={6}
+        onCancel={() => {
+          console.log();
+        }}
+        onSubmitSucceed={(value: any) => {
+          console.log();
+        }}
+      />
+    </LocaleProvider>
+  );
+};

package/src/stories/forms/Company.stories.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+import { Form } from "../..";
+import LocaleProvider from "../../context/LocaleContext";
+
+export default {
+  title: "Components/Widgets/Forms/Company",
+};
+
+export const Default = (): React.ReactElement => {
+  return (
+    <LocaleProvider lang="en_US">
+      <Form
+        model={"res.company"}
+        id={6}
+        onCancel={() => {
+          console.log();
+        }}
+        onSubmitSucceed={(value: any) => {
+          console.log();
+        }}
+      />
+    </LocaleProvider>
+  );
+};

package/src/stories/forms/CrmCaseForm.stories.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+import { Form } from "../..";
+import LocaleProvider from "../../context/LocaleContext";
+
+export default {
+  title: "Components/Widgets/Forms/CrmCase",
+};
+
+export const Default = (): React.ReactElement => {
+  return (
+    <LocaleProvider lang="en_US">
+      <Form
+        model={"crm.case"}
+        id={6}
+        onCancel={() => {
+          console.log();
+        }}
+        onSubmitSucceed={(value: any) => {
+          console.log();
+        }}
+      />
+    </LocaleProvider>
+  );
+};

package/src/stories/forms/Documents.stories.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+import { Form } from "../..";
+import LocaleProvider from "../../context/LocaleContext";
+
+export default {
+  title: "Components/Widgets/Forms/Documents",
+};
+
+export const Default = (): React.ReactElement => {
+  return (
+    <LocaleProvider lang="en_US">
+      <Form
+        model={"giscedata.signatura.documents"}
+        id={6}
+        onCancel={() => {
+          console.log();
+        }}
+        onSubmitSucceed={(value: any) => {
+          console.log();
+        }}
+      />
+    </LocaleProvider>
+  );
+};

package/src/stories/forms/FormWithGridFiber.stories.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+import { Form } from "../..";
+import LocaleProvider from "../../context/LocaleContext";
+
+export default {
+  title: "Components/Widgets/Forms/FormWithGridFiber",
+};
+
+export const Default = (): React.ReactElement => {
+  return (
+    <LocaleProvider lang="en_US">
+      <Form
+        model={"res.company.fiber"}
+        id={6}
+        onCancel={() => {
+          console.log();
+        }}
+        onSubmitSucceed={(value: any) => {
+          console.log();
+        }}
+      />
+    </LocaleProvider>
+  );
+};

package/src/stories/forms/FormWithLinks.stories.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+
+import { Form } from "../..";
+import LocaleProvider from "../../context/LocaleContext";
+
+export default {
+  title: "Components/Widgets/Forms/FormWithLinks",
+};
+
+export const Default = (): React.ReactElement => {
+  return (
+    <LocaleProvider lang="en_US">
+      <Form
+        model={"test"}
+        id={6}
+        formView={{
+          arch:
+            '<form string="test"><field name="url" /><field name="email" /></form>',
+          fields: { url: { type: "url" }, email: { type: "email" } },
+        }}
+        values={{ url: "http://www.google.com", email: "test@test.net" }}
+        onCancel={() => {
+          console.log();
+        }}
+        onSubmitSucceed={(value: any) => {
+          console.log();
+        }}
+      />
+    </LocaleProvider>
+  );
+};

package/src/stories/forms/Lead.stories.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+import { Form } from "../..";
+import LocaleProvider from "../../context/LocaleContext";
+
+export default {
+  title: "Components/Widgets/Forms/CRMLead",
+};
+
+export const Default = (): React.ReactElement => {
+  return (
+    <LocaleProvider lang="en_US">
+      <Form
+        model={"giscedata.crm.lead"}
+        id={6}
+        onCancel={() => {
+          console.log();
+        }}
+        onSubmitSucceed={(value: any) => {
+          console.log();
+        }}
+      />
+    </LocaleProvider>
+  );
+};

package/src/stories/forms/ModContractForm.stories.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+import { Form } from "../..";
+import LocaleProvider from "../../context/LocaleContext";
+
+export default {
+  title: "Components/Widgets/Forms/ModContract",
+};
+
+export const Default = (): React.ReactElement => {
+  return (
+    <LocaleProvider lang="en_US">
+      <Form
+        model={"giscedata.polissa.modcontractual"}
+        id={6}
+        onCancel={() => {
+          console.log();
+        }}
+        onSubmitSucceed={(value: any) => {
+          console.log();
+        }}
+      />
+    </LocaleProvider>
+  );
+};

package/src/stories/forms/PartnersForm.stories.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+import { Form } from "../..";
+import LocaleProvider from "../../context/LocaleContext";
+
+export default {
+  title: "Components/Widgets/Forms/Partners",
+};
+
+export const Default = (): React.ReactElement => {
+  return (
+    <LocaleProvider lang="en_US">
+      <Form
+        model={"res.partner"}
+        id={6}
+        onCancel={() => {
+          console.log();
+        }}
+        onSubmitSucceed={(value: any) => {
+          console.log();
+        }}
+      />
+    </LocaleProvider>
+  );
+};

package/src/stories/forms/PolissaForm.stories.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+
+import { Form } from "../..";
+import LocaleProvider from "../../context/LocaleContext";
+
+export default {
+  title: "Components/Widgets/Forms/Polissa",
+};
+
+export const Default = (): React.ReactElement => {
+  return (
+    <LocaleProvider lang="en_US">
+      <Form
+        model={"giscedata.polissa"}
+        id={6}
+        onCancel={() => {
+          console.log();
+        }}
+        onSubmitSucceed={(value: any) => {
+          console.log();
+        }}
+      />
+    </LocaleProvider>
+  );
+};