@gisce/react-ooui 1.2.0-rc.8 → 1.2.0-rc.82

package/src/index.ts

@@ -37,7 +37,9 @@ import { Image } from "@/widgets/base/Image";
 import showConfirmDialog from "@/ui/ConfirmDialog";
 import Dashboard from "@/widgets/views/Dashboard/Dashboard";
 import { Tags } from "@/widgets/custom/Tags";
+import { Tag } from "@/widgets/custom/Tag";
 import { MultiCheckbox } from "./widgets/custom/MultiCheckbox";
+import { Markdown } from "@/widgets/custom/Markdown";
 import { Radio } from "@/widgets/custom/Radio";
 import { Switch } from "@/widgets/custom/Switch";
 import { Steps } from "@/widgets/custom/Steps";
@@ -77,6 +79,7 @@ import TabSelector from "./views/TabSelector";
 import CurrentTabContent from "./views/CurrentTabContent";
 import ContentRootProvider from "./context/ContentRootContext";
 import FavouriteButton from "./ui/FavouriteButton";
+import { ConfigContext } from "./context/ConfigContext";
 
 export {
   Button,
@@ -145,10 +148,13 @@ export {
   DashboardGridItem,
   DashboardGrid,
   Tags,
+  Tag,
   MultiCheckbox,
+  Markdown,
   Radio,
   Switch,
   Steps,
   CodeEditor,
   ExportModal,
+  ConfigContext,
 };

package/src/locales/ca_ES.tsx

@@ -88,4 +88,6 @@ export default {
   selectAtLeastOneField: "Selecciona almenys un camp per a l'exportació",
   printScreen: "Imprimir pantalla",
   advancedExport: "Exportació avançada",
+  savedRegisters: "Registre guardat correctament",
+  errorWhileSavingForm: "Error en guardar el formulari",
 };

package/src/locales/en_US.tsx

@@ -85,4 +85,6 @@ export default {
   selectAtLeastOneField: "Select at least one field for the export",
   printScreen: "Print screen",
   advancedExport: "Advanced export",
+  savedRegisters: "Record successfully saved",
+  errorWhileSavingForm: "Error while saving form",
 };

package/src/locales/es_ES.tsx

@@ -89,4 +89,6 @@ export default {
   selectAtLeastOneField: "Selecciona al menos un campo para la exportación",
   printScreen: "Imprimir pantalla",
   advancedExport: "Exportación avanzada",
+  savedRegisters: "Registro guardado correctamente",
+  errorWhileSavingForm: "Error al guardar el formulario",
 };

package/src/stories/Binary.stories.tsx

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

package/src/stories/Boolean.stories.tsx

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

package/src/stories/Button.stories.tsx

@@ -2,7 +2,10 @@ import React from "react";
 
 import { Button } from "..";
 import { Button as ButtonOoui } from "@gisce/ooui";
-import "antd/dist/antd.css";
+
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../context/LocaleContext";
 
 export default {

package/src/stories/Char.stories.tsx

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

package/src/stories/FiberGrid.stories.tsx

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

package/src/stories/Float.stories.tsx

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

package/src/stories/FloatTime.stories.tsx

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

package/src/stories/Image.stories.tsx

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

package/src/stories/Integer.stories.tsx

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

package/src/stories/Label.stories.tsx

@@ -2,7 +2,10 @@ import React from "react";
 
 import { Label } from "..";
 import { Label as LabelOoui } from "@gisce/ooui";
-import "antd/dist/antd.css";
+
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../context/LocaleContext";
 
 export default {
@@ -12,7 +15,7 @@ export default {
 export const Default = (): React.ReactElement => {
   const ooui = new LabelOoui({
     name: "field",
-    string: "Lorem ipsum",
+    string: "<b>Lorem ipsum</b>",
   });
   return (
     <LocaleProvider lang="en_US">
@@ -25,7 +28,7 @@ export const LabelSecondary = (): React.ReactElement => {
   const ooui = new LabelOoui({
     name: "field",
     string: "Lorem ipsum",
-    widget_props: "{'label_type': 'secondary'}"
+    widget_props: "{'label_type': 'secondary'}",
   });
   return (
     <LocaleProvider lang="en_US">
@@ -38,7 +41,7 @@ export const LabelWaning = (): React.ReactElement => {
   const ooui = new LabelOoui({
     name: "field",
     string: "Lorem ipsum",
-    widget_props: "{'label_type': 'warning'}"
+    widget_props: "{'label_type': 'warning'}",
   });
   return (
     <LocaleProvider lang="en_US">
@@ -51,7 +54,7 @@ export const LabelDanger = (): React.ReactElement => {
   const ooui = new LabelOoui({
     name: "field",
     string: "Lorem ipsum",
-    widget_props: "{'label_type': 'danger'}"
+    widget_props: "{'label_type': 'danger'}",
   });
   return (
     <LocaleProvider lang="en_US">
@@ -64,7 +67,7 @@ export const LabelSuccess = (): React.ReactElement => {
   const ooui = new LabelOoui({
     name: "field",
     string: "Lorem ipsum",
-    widget_props: "{'label_type': 'success'}"
+    widget_props: "{'label_type': 'success'}",
   });
   return (
     <LocaleProvider lang="en_US">
@@ -73,12 +76,11 @@ export const LabelSuccess = (): React.ReactElement => {
   );
 };
 
-
 export const LabelH1 = (): React.ReactElement => {
   const ooui = new LabelOoui({
     name: "field",
     string: "Lorem ipsum",
-    widget_props: "{'label_size': 'h1'}"
+    widget_props: "{'label_size': 1}",
   });
   return (
     <LocaleProvider lang="en_US">
@@ -91,7 +93,7 @@ export const LabelH2Warning = (): React.ReactElement => {
   const ooui = new LabelOoui({
     name: "field",
     string: "Lorem ipsum",
-    widget_props: "{'label_size': 'h1', 'label_type': 'warning'}"
+    widget_props: "{'label_size': 2, 'label_type': 'warning'}",
   });
   return (
     <LocaleProvider lang="en_US">

package/src/stories/Many2one.stories.tsx

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

package/src/stories/One2many.stories.tsx

@@ -2,7 +2,10 @@ import React from "react";
 
 import { One2many } from "..";
 import { One2many as One2manyOoui } from "@gisce/ooui";
-import "antd/dist/antd.css";
+
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../context/LocaleContext";
 
 export default {

package/src/stories/ProgressBar.stories.tsx

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

package/src/stories/Reference.stories.tsx

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

package/src/stories/Selection.stories.tsx

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

package/src/stories/Separator.stories.tsx

@@ -2,7 +2,10 @@ import React from "react";
 
 import { Separator } from "..";
 import { Separator as SeparatorOoui } from "@gisce/ooui";
-import "antd/dist/antd.css";
+
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../context/LocaleContext";
 
 export default {
@@ -19,3 +22,36 @@ export const Default = (): React.ReactElement => {
     </LocaleProvider>
   );
 };
+
+export const WithoutText = (): React.ReactElement => {
+  const ooui = new SeparatorOoui({
+  });
+  return (
+    <LocaleProvider lang="en_US">
+      <Separator ooui={ooui} showLabel />
+    </LocaleProvider>
+  );
+};
+
+export const OnlyIcon = (): React.ReactElement => {
+  const ooui = new SeparatorOoui({
+    icon: "home"
+  });
+  return (
+    <LocaleProvider lang="en_US">
+      <Separator ooui={ooui} showLabel />
+    </LocaleProvider>
+  );
+};
+
+export const WithIcon = (): React.ReactElement => {
+  const ooui = new SeparatorOoui({
+    string: "General",
+    icon: "home"
+  });
+  return (
+    <LocaleProvider lang="en_US">
+      <Separator ooui={ooui} showLabel />
+    </LocaleProvider>
+  );
+};

package/src/stories/Text.stories.tsx

@@ -2,7 +2,10 @@ import React from "react";
 
 import { Text } from "..";
 import { Text as TextOoui } from "@gisce/ooui";
-import "antd/dist/antd.css";
+
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../context/LocaleContext";
 
 export default {

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

@@ -1,5 +1,8 @@
 import React from "react";
-import "antd/dist/antd.css";
+
+// import "antd/dist/antd.css";
+
+
 import "@/tailwind.generated.css";
 
 import { withKnobs, number, text } from "@storybook/addon-knobs";
@@ -61,3 +64,27 @@ export const Default = (): React.ReactElement => {
     </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,7 +1,10 @@
 import React from "react";
 
 import { Form } from "../..";
-import "antd/dist/antd.css";
+
+// import "antd/dist/antd.css";
+
+
 import "@/tailwind.generated.css";
 import LocaleProvider from "../../context/LocaleContext";
 

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

@@ -1,5 +1,8 @@
 import React from "react";
-import "antd/dist/antd.css";
+
+// import "antd/dist/antd.css";
+
+
 import "@/tailwind.generated.css";
 
 import { withKnobs } from "@storybook/addon-knobs";
@@ -167,3 +170,30 @@ export const IconTabs = (): React.ReactElement => {
     </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/ButtonGroup.stories.tsx

@@ -4,7 +4,10 @@ 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 "antd/dist/antd.css";
+
+
 import LocaleProvider from "../../context/LocaleContext";
 
 export default {

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

@@ -2,7 +2,10 @@ import React from "react";
 
 import { CodeEditor } from "../../widgets/custom/CodeEditor";
 import { CodeEditor as CodeEditorOoui } from "@gisce/ooui";
-import "antd/dist/antd.css";
+
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../../context/LocaleContext";
 
 export default {

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

@@ -2,7 +2,10 @@ import React, {useState} from "react";
 
 import {Indicator} from "../../widgets/custom/Indicator";
 import { Indicator as IndicatorOoui } from "@gisce/ooui";
-import "antd/dist/antd.css";
+
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../../context/LocaleContext";
 
 export default {

package/src/stories/custom/Markdown.stories.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { Markdown as MarkdownOOui } from "@gisce/ooui";
+
+// import "antd/dist/antd.css";
+
+
+import LocaleProvider from "../../context/LocaleContext";
+import { MarkdownInput } from "../../widgets/custom/Markdown";
+
+export default {
+  title: "Components/Widgets/Custom/Markdown",
+};
+
+
+export const Default = (): React.ReactElement => {
+  const ooui = new MarkdownOOui({
+    name: "enabled",
+    string: "Lorem ipsum",
+  });
+
+ const markdown = `A paragraph with *emphasis* and **strong importance**.
+
+> A block quote with ~strikethrough~ and a URL: https://reactjs.org.
+
+## Header 2
+
+* Lists
+* [ ] todo
+* [x] done
+
+A table:
+
+| a | b |
+| - | - |
+`
+
+  return (
+    <LocaleProvider lang="en_US">
+      <MarkdownInput ooui={ooui} value={markdown} />
+    </LocaleProvider>
+  );
+};

package/src/stories/custom/MultiCheckbox.stories.tsx

@@ -3,7 +3,10 @@ import React from "react";
 import { MultiCheckboxInput } from "../../widgets/custom/MultiCheckbox";
 import { Checkbox, Space, Row, Col } from "antd";
 import { MultiCheckbox as MultiCheckboxOoui } from "@gisce/ooui";
-import "antd/dist/antd.css";
+
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../../context/LocaleContext";
 
 export default {

package/src/stories/custom/Radio.stories.tsx

@@ -2,7 +2,10 @@ import React from "react";
 
 import { Radio } from "../../widgets/custom/Radio";
 import { Radio as RadioOoui } from "@gisce/ooui";
-import "antd/dist/antd.css";
+
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../../context/LocaleContext";
 
 export default {

package/src/stories/custom/Steps.stories.tsx

@@ -2,7 +2,10 @@ import React from "react";
 
 import { Steps, StepsInput } from "../../widgets/custom/Steps";
 import { Steps as StepsOoui } from "@gisce/ooui";
-import "antd/dist/antd.css";
+
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../../context/LocaleContext";
 
 export default {

package/src/stories/custom/Switch.stories.tsx

@@ -2,7 +2,10 @@ import React from "react";
 
 import { Switch } from "../../widgets/custom/Switch";
 import { Switch as SwitchOoui } from "@gisce/ooui";
-import "antd/dist/antd.css";
+
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../../context/LocaleContext";
 
 export default {

package/src/stories/custom/Tag.stories.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+
+import { Tag as TagOoui } from "@gisce/ooui";
+
+// import "antd/dist/antd.css";
+
+
+import LocaleProvider from "../../context/LocaleContext";
+import { TagInput } from "../../widgets/custom/Tag";
+
+export default {
+  title: "Components/Widgets/Custom/Tag",
+};
+
+export const Default = (): React.ReactElement => {
+  const ooui = new TagOoui({
+    name: "status",
+    string: "Status",
+    field: "status",
+    selection: [['draft', 'Draft'], ['open', 'Open']],
+    widget_props: '{"colors": {"draft": "blue", "open": "green"}}'
+  });
+
+  return (
+    <LocaleProvider lang="en_US">
+     <TagInput value="draft" ooui={ooui}/>
+    </LocaleProvider>
+  );
+};
+
+export const WithoutColor = (): React.ReactElement => {
+  const ooui = new TagOoui({
+    name: "status",
+    string: "Status",
+    field: "status",
+    selection: [['draft', 'Draft'], ['open', 'Open']],
+  });
+
+  return (
+    <LocaleProvider lang="en_US">
+     <TagInput value="draft" ooui={ooui}/>
+    </LocaleProvider>
+  );
+};
+
+export const WithColorAuto = (): React.ReactElement => {
+  const ooui = new TagOoui({
+    name: "status",
+    string: "Status",
+    field: "status",
+    selection: [['draft', 'Draft'], ['open', 'Open']],
+    widget_props: '{"colors": "auto"}'
+  });
+
+  return (
+    <LocaleProvider lang="en_US">
+     <TagInput value="draft" ooui={ooui}/>
+    </LocaleProvider>
+  );
+};