@gisce/react-ooui 2.0.0-rc.8 → 2.0.0

package/src/stories/Text.stories.tsx

@@ -1,38 +0,0 @@
-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/Time.stories.tsx

@@ -1,32 +0,0 @@
-// @ts-ignore
-import React, { useState } from "react";
-
-import { TimeInput } from "../widgets/base/Time";
-import { Time as TimeOoui } from "@gisce/ooui";
-
-
-import LocaleProvider from "../context/LocaleContext";
-
-export default {
-  title: "Components/Widgets/Base/Time",
-};
-
-export const Default = (): React.ReactElement => {
-  const ooui = new TimeOoui({
-    name: "field",
-    string: "Lorem ipsum",
-  });
-
-  const [value, setValue] = useState<string>('23:12:34');
-
-  const onChange = (value: string) => {
-    console.log(value);
-    setValue(value);
-  }
-
-  return (
-    <LocaleProvider lang="en_US">
-      <TimeInput ooui={ooui} onChange={onChange} value={value} />
-    </LocaleProvider>
-  );
-};

package/src/stories/Utils.stories.tsx

@@ -1,16 +0,0 @@
-// @ts-ignore
-import React from "react";
-import { CustomTag } from "../widgets/custom/Tag";
-import { colorFromString } from "../helpers/formHelper";
-
-export default {
-  title: "Components/Pure",
-};
-
-
-
-export const CustomTagWithColor = (): React.ReactElement => {
-  const text = "Hacker";
-  const color = colorFromString(text);
-  return <CustomTag color={color}>{text}</CustomTag>
-};

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

@@ -1,90 +0,0 @@
-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>
-  );
-};
-
-export const WithIcon = (): React.ReactElement => {
-  const ooui = new GroupOoui({
-    string: "General",
-    icon: "home"
-  });
-  return (
-    <LocaleProvider lang="en_US">
-      <Group ooui={ooui} />
-    </LocaleProvider>
-  );
-};
-
-
-export const OnlyIcon = (): React.ReactElement => {
-  const ooui = new GroupOoui({
-    icon: "home"
-  });
-  return (
-    <LocaleProvider lang="en_US">
-      <Group ooui={ooui} />
-    </LocaleProvider>
-  );
-};

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

@@ -1,56 +0,0 @@
-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

@@ -1,199 +0,0 @@
-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>
-</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>
-  );
-};
-
-export const BottomPosition = (): React.ReactElement => {
-
-  const arch = `<form>
-    <notebook name="notebook" tabpos="bottom">
-      <page string="General">
-        <field name="name" />
-      </page>
-      <page string="Secondary">
-        <field name="surname" />
-      </page>
-    </notebook>
-  </form>`;
-
-  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 LeftPosition = (): React.ReactElement => {
-
-  const arch = `<form>
-    <notebook name="notebook" tabpos="left">
-      <page string="General">
-        <field name="name" />
-      </page>
-      <page string="Secondary">
-        <field name="surname" />
-      </page>
-    </notebook>
-  </form>`;
-
-  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 IconTabs = (): React.ReactElement => {
-
-  const arch = `<form>
-    <notebook name="notebook">
-      <page string="Home" icon="home">
-        <field name="name" />
-      </page>
-      <page string="Attributes" icon="project">
-        <field name="surname" />
-      </page>
-    </notebook>
-  </form>`;
-
-  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 IconTablerTabs = (): React.ReactElement => {
-
-  const arch = `<form>
-    <notebook name="notebook">
-      <page string="Home" icon="bolt">
-        <field name="name" />
-      </page>
-      <page string="Attributes" icon="address-book">
-        <field name="surname" />
-      </page>
-    </notebook>
-  </form>`;
-
-  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>
-  );
-};

package/src/stories/custom/Avatar.stories.tsx

@@ -1,27 +0,0 @@
-import React, {useState} from "react";
-
-import { Avatar as AvatarOoui } from "@gisce/ooui";
-import Avatar from "@/widgets/custom/Avatar";
-import "antd/dist/antd.css";
-import LocaleProvider from "../../context/LocaleContext";
-
-export default {
-  title: "Components/Widgets/Custom/Avatar",
-};
-
-export const Default = (): React.ReactElement => {
-  const ooui = new AvatarOoui({
-    name: "user",
-    string: "Lorem ipsum",
-  });
-  const value = "John Wick";
-  return (
-    <LocaleProvider lang="en_US">
-      <Avatar ooui={ooui} value={value} />
-    </LocaleProvider>
-  );
-};
-
-
-
-

package/src/stories/custom/ButtonGroup.stories.tsx

@@ -1,61 +0,0 @@
-import React from "react";
-
-import { Dropdown, Menu } from 'antd';
-import { DownOutlined, UserOutlined } from '@ant-design/icons';
-import { ButtonGroup as ButtonGroupOoui, Button as ButtonOoui } from "@gisce/ooui";
-import { ButtonGroup } from "../../widgets/custom/ButtonGroup";
-
-// import "antd/dist/antd.css";
-
-
-import LocaleProvider from "../../context/LocaleContext";
-
-export default {
-  title: "Components/Widgets/Custom/ButtonGroup",
-};
-
-export const OnlyAntComponents = (): React.ReactElement => {
-
-  const overlay = (
-    <Menu>
-      <Menu.Item icon={<UserOutlined/>}>Button 1</Menu.Item>
-      <Menu.Item icon={<UserOutlined/>}>Button 2</Menu.Item>
-    </Menu>
-  )
-
-  return (
-    <LocaleProvider lang="en_US">
-      <Dropdown.Button overlay={overlay} icon={<DownOutlined/>}>
-        Default button
-      </Dropdown.Button>
-    </LocaleProvider>
-  );
-};
-
-export const Default = (): React.ReactElement => {
-
-  const btn1 = new ButtonOoui({
-    name: "btn1", icon: "gtk-execute", string: "Button 1",
-    buttonType: "object"
-  });
-  const btn2 = new ButtonOoui({name: "btn2", readonly: true, buttonType: "object", icon: "gtk-execute", string: "Button 2"});
-  const btn3 = new ButtonOoui({
-    name: "btn3", buttonType: "object",
-    icon: "gtk-about", string: "Button 3",
-    confirm: "Are you sure?"
-  });
-  const btn4 = new ButtonOoui({
-    name: "btn4", buttonType: "object",
-    icon: "gtk-dialog-warning", string: "Button 4",
-    confirm: "Are you sure?",
-    danger: true
-  });
-  const buttonGroup = new ButtonGroupOoui({name: "btnGroup", default: "btn1"});
-  buttonGroup.container.rows[0].push(...[btn1, btn2, btn3, btn4]);
-
-  return (
-    <LocaleProvider lang="en_US">
-      <ButtonGroup ooui={buttonGroup}/>
-    </LocaleProvider>
-  );
-};

package/src/stories/custom/CodeEditor.stories.tsx

@@ -1,28 +0,0 @@
-import React from "react";
-
-import { CodeEditor } from "../../widgets/custom/CodeEditor";
-import { CodeEditor as CodeEditorOoui } from "@gisce/ooui";
-
-// import "antd/dist/antd.css";
-
-
-import LocaleProvider from "../../context/LocaleContext";
-
-export default {
-  title: "Components/Widgets/Custom/CodeEditor",
-};
-
-export const Default = (): React.ReactElement => {
-  const ooui = new CodeEditorOoui({
-    name: "code",
-    string: "Code",
-    height: 400,
-    widget_props: "{'lang': 'xml'}"
-  });
-
-  return (
-    <LocaleProvider lang="en_US">
-      <CodeEditor ooui={ooui} />
-    </LocaleProvider>
-  );
-};