@gisce/react-ooui 1.5.2-alpha.1 → 1.5.2-rc.0

package/src/stories/Separator.stories.tsx

@@ -3,6 +3,9 @@ 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 {
@@ -21,7 +24,8 @@ export const Default = (): React.ReactElement => {
 };
 
 export const WithoutText = (): React.ReactElement => {
-  const ooui = new SeparatorOoui({});
+  const ooui = new SeparatorOoui({
+  });
   return (
     <LocaleProvider lang="en_US">
       <Separator ooui={ooui} showLabel />
@@ -31,7 +35,7 @@ export const WithoutText = (): React.ReactElement => {
 
 export const OnlyIcon = (): React.ReactElement => {
   const ooui = new SeparatorOoui({
-    icon: "home",
+    icon: "home"
   });
   return (
     <LocaleProvider lang="en_US">
@@ -43,7 +47,7 @@ export const OnlyIcon = (): React.ReactElement => {
 export const WithIcon = (): React.ReactElement => {
   const ooui = new SeparatorOoui({
     string: "General",
-    icon: "home",
+    icon: "home"
   });
   return (
     <LocaleProvider lang="en_US">

package/src/stories/Text.stories.tsx

@@ -3,6 +3,9 @@ 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 {

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

@@ -1,5 +1,10 @@
 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";
 

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

@@ -2,6 +2,10 @@ import React from "react";
 
 import { Form } from "../..";
 
+// import "antd/dist/antd.css";
+
+
+import "@/tailwind.generated.css";
 import LocaleProvider from "../../context/LocaleContext";
 
 export default {

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

@@ -1,5 +1,10 @@
 import React from "react";
 
+// import "antd/dist/antd.css";
+
+
+import "@/tailwind.generated.css";
+
 import { withKnobs } from "@storybook/addon-knobs";
 import LocaleProvider from "../../context/LocaleContext";
 

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

@@ -2,6 +2,7 @@ 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 {

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

@@ -1,13 +1,13 @@
 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 { 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 {
@@ -15,16 +15,17 @@ export default {
 };
 
 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.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 />}>
+      <Dropdown.Button overlay={overlay} icon={<DownOutlined/>}>
         Default button
       </Dropdown.Button>
     </LocaleProvider>
@@ -32,43 +33,29 @@ export const OnlyAntComponents = (): React.ReactElement => {
 };
 
 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",
+    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?",
+    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",
+    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",
+    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} />
+      <ButtonGroup ooui={buttonGroup}/>
     </LocaleProvider>
   );
 };

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

@@ -3,6 +3,9 @@ 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 {
@@ -14,7 +17,7 @@ export const Default = (): React.ReactElement => {
     name: "code",
     string: "Code",
     height: 400,
-    widget_props: "{'lang': 'xml'}",
+    widget_props: "{'lang': 'xml'}"
   });
 
   return (

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

@@ -1,8 +1,11 @@
-import React, { useState } from "react";
+import React, {useState} from "react";
 
-import { Indicator } from "../../widgets/custom/Indicator";
+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 {
@@ -21,6 +24,7 @@ export const Default = (): React.ReactElement => {
   );
 };
 
+
 export const WithIconAndSuffix = (): React.ReactElement => {
   const ooui = new IndicatorOoui({
     name: "test",
@@ -30,7 +34,11 @@ export const WithIconAndSuffix = (): React.ReactElement => {
 
   return (
     <LocaleProvider lang="en_US">
-      <Indicator ooui={ooui} value={300} />
+      <Indicator ooui={ooui} value={300}/>
     </LocaleProvider>
   );
 };
+
+
+
+

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

@@ -1,6 +1,9 @@
 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";
 
@@ -8,13 +11,14 @@ 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**.
+ const markdown = `A paragraph with *emphasis* and **strong importance**.
 
 > A block quote with ~strikethrough~ and a URL: https://reactjs.org.
 
@@ -28,7 +32,7 @@ A table:
 
 | a | b |
 | - | - |
-`;
+`
 
   return (
     <LocaleProvider lang="en_US">

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

@@ -4,6 +4,9 @@ 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 LocaleProvider from "../../context/LocaleContext";
 
 export default {
@@ -15,20 +18,16 @@ export const Default = (): React.ReactElement => {
     name: "button_field",
     string: "Lorem ipsum",
     field: "name",
-    relation: "res.partner.category",
+    relation: "res.partner.category"
   });
 
   return (
     <LocaleProvider lang="en_US">
-      <MultiCheckboxInput
-        ooui={ooui}
-        value={{
-          items: [
-            { id: 1, operation: "original" },
-            { id: 2, operation: "original" },
-            { id: 3, operation: "pendingRemove" },
-          ],
-        }}
+      <MultiCheckboxInput ooui={ooui} value={{items: [
+          {id: 1, operation: "original"},
+          {id: 2, operation: "original"},
+          {id: 3, operation: "pendingRemove"}
+        ]}}
       />
     </LocaleProvider>
   );
@@ -45,16 +44,12 @@ export const Readonly = (): React.ReactElement => {
 
   return (
     <LocaleProvider lang="en_US">
-      <MultiCheckboxInput
-        ooui={ooui}
-        value={{
-          items: [
-            { id: 1, operation: "original" },
-            { id: 2, operation: "original" },
-            { id: 3, operation: "pendingRemove" },
-          ],
-        }}
+      <MultiCheckboxInput ooui={ooui} value={{items: [
+          {id: 1, operation: "original"},
+          {id: 2, operation: "original"},
+          {id: 3, operation: "pendingRemove"}
+        ]}}
       />
     </LocaleProvider>
   );
-};
+};

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

@@ -3,6 +3,9 @@ import React from "react";
 import { Radio } from "../../widgets/custom/Radio";
 import { Radio as RadioOoui } from "@gisce/ooui";
 
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../../context/LocaleContext";
 
 export default {
@@ -15,10 +18,10 @@ export const Default = (): React.ReactElement => {
     string: "Level",
     required: true,
     selection: [
-      ["easy", "Easy"],
-      ["medium", "Medium"],
-      ["hard", "Hard"],
-    ],
+      ['easy', 'Easy'],
+      ['medium', 'Medium'],
+      ['hard', 'Hard']
+    ]
   });
 
   return (
@@ -34,10 +37,10 @@ export const Readonly = (): React.ReactElement => {
     string: "Level",
     readonly: true,
     selection: [
-      ["easy", "Easy"],
-      ["medium", "Medium"],
-      ["hard", "Hard"],
-    ],
+      ['easy', 'Easy'],
+      ['medium', 'Medium'],
+      ['hard', 'Hard']
+    ]
   });
 
   return (
@@ -53,11 +56,11 @@ export const RadioVertical = (): React.ReactElement => {
     string: "Level",
     readonly: true,
     selection: [
-      ["easy", "Easy"],
-      ["medium", "Medium"],
-      ["hard", "Hard"],
+      ['easy', 'Easy'],
+      ['medium', 'Medium'],
+      ['hard', 'Hard']
     ],
-    widget_props: "{'direction': 'vertical'}",
+    widget_props: "{'direction': 'vertical'}"
   });
 
   return (
@@ -65,4 +68,4 @@ export const RadioVertical = (): React.ReactElement => {
       <Radio ooui={ooui} />
     </LocaleProvider>
   );
-};
+};

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

@@ -3,6 +3,9 @@ import React from "react";
 import { Steps, StepsInput } from "../../widgets/custom/Steps";
 import { Steps as StepsOoui } from "@gisce/ooui";
 
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../../context/LocaleContext";
 
 export default {
@@ -13,12 +16,7 @@ export const Default = (): React.ReactElement => {
   const ooui = new StepsOoui({
     name: "enabled",
     string: "Lorem ipsum",
-    selection: [
-      ["init", "Start"],
-      ["second", "Second"],
-      ["third", "Third"],
-      ["end", "End"],
-    ],
+    selection: [['init', 'Start'], ['second', 'Second'], ['third', 'Third'], ['end', 'End']]
   });
 
   return (
@@ -40,4 +38,4 @@ export const Many2One = (): React.ReactElement => {
       <StepsInput ooui={ooui} value="third" />
     </LocaleProvider>
   );
-};
+};

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

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

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

@@ -2,6 +2,9 @@ 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";
 
@@ -14,16 +17,13 @@ export const Default = (): React.ReactElement => {
     name: "status",
     string: "Status",
     field: "status",
-    selection: [
-      ["draft", "Draft"],
-      ["open", "Open"],
-    ],
-    widget_props: '{"colors": {"draft": "blue", "open": "green"}}',
+    selection: [['draft', 'Draft'], ['open', 'Open']],
+    widget_props: '{"colors": {"draft": "blue", "open": "green"}}'
   });
 
   return (
     <LocaleProvider lang="en_US">
-      <TagInput value="draft" ooui={ooui} />
+     <TagInput value="draft" ooui={ooui}/>
     </LocaleProvider>
   );
 };
@@ -33,15 +33,12 @@ export const WithoutColor = (): React.ReactElement => {
     name: "status",
     string: "Status",
     field: "status",
-    selection: [
-      ["draft", "Draft"],
-      ["open", "Open"],
-    ],
+    selection: [['draft', 'Draft'], ['open', 'Open']],
   });
 
   return (
     <LocaleProvider lang="en_US">
-      <TagInput value="draft" ooui={ooui} />
+     <TagInput value="draft" ooui={ooui}/>
     </LocaleProvider>
   );
 };
@@ -51,16 +48,13 @@ export const WithColorAuto = (): React.ReactElement => {
     name: "status",
     string: "Status",
     field: "status",
-    selection: [
-      ["draft", "Draft"],
-      ["open", "Open"],
-    ],
-    widget_props: '{"colors": "auto"}',
+    selection: [['draft', 'Draft'], ['open', 'Open']],
+    widget_props: '{"colors": "auto"}'
   });
 
   return (
     <LocaleProvider lang="en_US">
-      <TagInput value="draft" ooui={ooui} />
+     <TagInput value="draft" ooui={ooui}/>
     </LocaleProvider>
   );
 };

package/src/stories/custom/Tags.stories.tsx

@@ -3,6 +3,9 @@ import React from "react";
 import { TagsInput, Tags } from "../../widgets/custom/Tags";
 import { Tags as TagsOoui } from "@gisce/ooui";
 
+// import "antd/dist/antd.css";
+
+
 import LocaleProvider from "../../context/LocaleContext";
 
 export default {
@@ -14,20 +17,16 @@ export const Default = (): React.ReactElement => {
     name: "button_field",
     string: "Lorem ipsum",
     field: "name",
-    relation: "res.partner.category",
+    relation: "res.partner.category"
   });
 
   return (
     <LocaleProvider lang="en_US">
-      <TagsInput
-        ooui={ooui}
-        value={{
-          items: [
-            { id: 1, operation: "original" },
-            { id: 2, operation: "original" },
-            { id: 3, operation: "pendingRemove" },
-          ],
-        }}
+      <TagsInput ooui={ooui} value={{items: [
+          {id: 1, operation: "original"},
+          {id: 2, operation: "original"},
+          {id: 3, operation: "pendingRemove"}
+        ]}}
       />
     </LocaleProvider>
   );
@@ -44,20 +43,17 @@ export const Readonly = (): React.ReactElement => {
 
   return (
     <LocaleProvider lang="en_US">
-      <TagsInput
-        ooui={ooui}
-        value={{
-          items: [
-            { id: 1, operation: "original" },
-            { id: 2, operation: "original" },
-            { id: 3, operation: "pendingRemove" },
-          ],
-        }}
+      <TagsInput ooui={ooui} value={{items: [
+          {id: 1, operation: "original"},
+          {id: 2, operation: "original"},
+          {id: 3, operation: "pendingRemove"}
+        ]}}
       />
     </LocaleProvider>
   );
 };
 
+
 export const TagsLabel = (): React.ReactElement => {
   const ooui = new TagsOoui({
     name: "button_field",
@@ -68,7 +64,7 @@ export const TagsLabel = (): React.ReactElement => {
 
   return (
     <LocaleProvider lang="en_US">
-      <Tags ooui={ooui} showLabel />
+      <Tags ooui={ooui} showLabel/>
     </LocaleProvider>
   );
 };

package/src/stories/forms/PreferencesForm.stories.tsx

@@ -2,6 +2,10 @@ import React from "react";
 
 import { Form } from "../..";
 
+// import "antd/dist/antd.css";
+
+
+import "@/tailwind.generated.css";
 import LocaleProvider from "../../context/LocaleContext";
 
 export default {

package/src/stories/ui/ActionBar.stories.tsx

@@ -3,6 +3,9 @@ import React from "react";
 import { ActionBar } from "../..";
 import LocaleProvider from "../../context/LocaleContext";
 
+// import "antd/dist/antd.css";
+
+
 export default {
   title: "Components/Widgets/UI/ActionBar",
 };

package/src/stories/ui/FavouriteButton.stories.tsx

@@ -3,6 +3,9 @@ import React from "react";
 import FavouriteButton from "../../ui/FavouriteButton";
 import LocaleProvider from "../../context/LocaleContext";
 
+// import "antd/dist/antd.css";
+
+
 export default {
   title: "Components/Widgets/UI/FavouriteButton",
 };

package/src/stories/ui/GoToResourceModal.stories.tsx

@@ -3,6 +3,9 @@ import React from "react";
 import { GoToResourceModal } from "../../ui/GoToResourceModal";
 import LocaleProvider from "../../context/LocaleContext";
 
+// import "antd/dist/antd.css";
+
+
 export default {
   title: "Components/Widgets/UI/GoToResourceModal",
 };