@gisce/react-ooui 1.5.1 → 1.5.2-alpha.1

package/src/helpers/treeHelper.ts

@@ -18,8 +18,8 @@ const getTree = (treeView: TreeView): TreeOoui => {
 const getTableColumns = (
   tree: TreeOoui,
   components: any,
-  context: any
-): Array<Column> => {
+  context: any,
+): Column[] => {
   const tableColumns = tree.columns.map((column) => {
     const type = column.type;
     const key = column.id;
@@ -38,8 +38,8 @@ const getTableColumns = (
       title: column.label,
       render,
       sorter: (a: any, b: any) => {
-        let aItem = a[key] || "",
-          bItem = b[key] || "";
+        let aItem = a[key] || "";
+        let bItem = b[key] || "";
 
         if (type === "many2one") {
           aItem = a[key]?.value || "";
@@ -55,7 +55,7 @@ const getTableColumns = (
   return tableColumns;
 };
 
-const getTableItems = (treeOoui: TreeOoui, results: Array<any>): Array<any> => {
+const getTableItems = (treeOoui: TreeOoui, results: any[]): any[] => {
   const tableItems = results.map((item: any) => {
     const parsedItem: any = {};
     Object.keys(item).map((key) => {
@@ -158,8 +158,8 @@ function sortResults({
   const type = fields[field].type;
 
   const sortFn = (a: any, b: any) => {
-    let aItem = a[field] || "",
-      bItem = b[field] || "";
+    let aItem = a[field] || "";
+    let bItem = b[field] || "";
 
     if (type === "many2one") {
       aItem = a[field]?.[1] || "";

package/src/helpers/viewHelper.ts

@@ -1,7 +1,7 @@
 import { ViewTuple, ViewType } from "@/types";
 
 export async function resolveViewInfoPromises(
-  viewsToRetrieve: { viewTuple: ViewTuple; promise?: Promise<any> }[]
+  viewsToRetrieve: Array<{ viewTuple: ViewTuple; promise?: Promise<any> }>,
 ) {
   const results = await Promise.all(
     viewsToRetrieve.map(async (item) => {
@@ -11,7 +11,7 @@ export async function resolveViewInfoPromises(
         console.error(`Error for ${item.viewTuple}:`, error);
         return null;
       }
-    })
+    }),
   );
 
   const updatedViews = viewsToRetrieve.map((item, index) => ({

package/src/hooks/useExport.ts

@@ -181,7 +181,7 @@ export const useExport = ({
 
   const onRemovePredefinedExport = useCallback(
     async (pExport: PredefinedExport) => {
-      await ConnectionProvider.getHandler().delete({
+      await ConnectionProvider.getHandler().deleteObjects({
         model: "ir.exports",
         ids: [pExport.id!],
       });
@@ -367,8 +367,7 @@ const retrieveKeyFieldsForPredefinedExports = async ({
   onGetFieldChilds: (key: string) => Promise<ExportField[]>;
 }) => {
   const allPredefinedExportKeys = predefinedExports.flatMap(
-    (exp: PredefinedExport) =>
-      exp.fields.map((field: any) => field.key)
+    (exp: PredefinedExport) => exp.fields.map((field: any) => field.key)
   );
 
   const keysWithoutChildsInFields = getKeysWithoutChildsInFields({

package/src/hooks/useSearch.ts

@@ -207,7 +207,7 @@ export const useSearch = (opts: UseSearchOpts) => {
         sorter !== undefined
           ? sortResults({
               resultsToSort: results,
-              sorter: sorter,
+              sorter,
               fields: { ...treeView!.fields, ...formView!.fields },
             })
           : [...originalResults.current];
@@ -216,7 +216,7 @@ export const useSearch = (opts: UseSearchOpts) => {
 
       if (resultsActionView && resultsSorted.length > 0) {
         const newCurrentItemIndex = resultsSorted.findIndex(
-          (item) => currentId === item.id
+          (item) => currentId === item.id,
         );
 
         if (newCurrentItemIndex === -1) {
@@ -249,7 +249,7 @@ export const useSearch = (opts: UseSearchOpts) => {
       limit,
       offset,
       searchParams,
-    ]
+    ],
   );
 
   const fetchResults = useCallback(
@@ -290,7 +290,7 @@ export const useSearch = (opts: UseSearchOpts) => {
       setTreeIsLoading,
       sorter,
       treeView,
-    ]
+    ],
   );
 
   const changeSort = useCallback(
@@ -307,7 +307,7 @@ export const useSearch = (opts: UseSearchOpts) => {
           : [...originalResults.current];
       setResults(sortedResults);
     },
-    [setSorter, getResults, treeView, formView, setResults]
+    [setSorter, getResults, treeView, formView, setResults],
   );
 
   const submit = useCallback(
@@ -351,7 +351,7 @@ export const useSearch = (opts: UseSearchOpts) => {
       setLimit,
       setOffset,
       fetchResults,
-    ]
+    ],
   );
 
   const requestPageChange = useCallback(
@@ -360,7 +360,7 @@ export const useSearch = (opts: UseSearchOpts) => {
       setPage(page);
       setOffset((page - 1) * limit!);
     },
-    [setTableRefreshing, limit, setOffset, setPage]
+    [setTableRefreshing, limit, setOffset, setPage],
   );
 
   const clear = useCallback(() => {
@@ -400,7 +400,7 @@ export const useSearch = (opts: UseSearchOpts) => {
 
       return getTableItems(getTree(treeView!), children);
     },
-    [treeView, model, context, getResults, setResults]
+    [treeView, model, context, getResults, setResults],
   );
 
   const getAllIds = useCallback(async () => {

package/src/index.ts

@@ -82,6 +82,8 @@ import CurrentTabContent from "./views/CurrentTabContent";
 import ContentRootProvider from "./context/ContentRootContext";
 import FavouriteButton from "./ui/FavouriteButton";
 import { ConfigContext } from "./context/ConfigContext";
+import Tab from "./views/tabs/Tab";
+import ActionView from "./views/ActionView";
 
 export {
   Button,
@@ -161,4 +163,6 @@ export {
   CommentsTimelineField,
   ExportModal,
   ConfigContext,
+  Tab,
+  ActionView,
 };

package/src/stories/Binary.stories.tsx

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

package/src/stories/Boolean.stories.tsx

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

package/src/stories/Button.stories.tsx

@@ -3,9 +3,6 @@ import React from "react";
 import { Button } from "..";
 import { Button as ButtonOoui } from "@gisce/ooui";
 
-// import "antd/dist/antd.css";
-
-
 import LocaleProvider from "../context/LocaleContext";
 
 export default {
@@ -28,7 +25,7 @@ export const WithStockIcon = (): React.ReactElement => {
   const ooui = new ButtonOoui({
     name: "button_field",
     string: "Lorem ipsum",
-    icon: "gtk-ok"
+    icon: "gtk-ok",
   });
   return (
     <LocaleProvider lang="en_US">
@@ -41,7 +38,7 @@ export const WithCustomIcon = (): React.ReactElement => {
   const ooui = new ButtonOoui({
     name: "button_field",
     string: "Lorem ipsum",
-    icon: "terp-purchase"
+    icon: "terp-purchase",
   });
   return (
     <LocaleProvider lang="en_US">
@@ -54,7 +51,7 @@ export const WithAntdIcon = (): React.ReactElement => {
   const ooui = new ButtonOoui({
     name: "button_field",
     string: "Lorem ipsum",
-    icon: "ant-design"
+    icon: "ant-design",
   });
   return (
     <LocaleProvider lang="en_US">
@@ -67,7 +64,7 @@ export const WithUnexistingdIcon = (): React.ReactElement => {
   const ooui = new ButtonOoui({
     name: "button_field",
     string: "Lorem ipsum",
-    icon: "foo"
+    icon: "foo",
   });
   return (
     <LocaleProvider lang="en_US">
@@ -80,7 +77,7 @@ export const WithTablerIcon = (): React.ReactElement => {
   const ooui = new ButtonOoui({
     name: "button_field",
     string: "Lorem ipsum",
-    icon: "bulb-off"
+    icon: "bulb-off",
   });
   return (
     <LocaleProvider lang="en_US">
@@ -94,7 +91,7 @@ export const PrimaryButton = (): React.ReactElement => {
     name: "button_field",
     string: "Lorem ipsum",
     icon: "send",
-    primary: "1"
+    primary: "1",
   });
   return (
     <LocaleProvider lang="en_US">
@@ -108,7 +105,7 @@ export const DangerButton = (): React.ReactElement => {
     name: "button_field",
     string: "Lorem ipsum",
     icon: "exclamation-circle",
-    danger: "1"
+    danger: "1",
   });
   return (
     <LocaleProvider lang="en_US">
@@ -117,14 +114,13 @@ export const DangerButton = (): React.ReactElement => {
   );
 };
 
-
 export const PrimaryDangerButton = (): React.ReactElement => {
   const ooui = new ButtonOoui({
     name: "button_field",
     string: "Lorem ipsum",
     icon: "exclamation-circle",
     danger: "1",
-    primary: "1"
+    primary: "1",
   });
   return (
     <LocaleProvider lang="en_US">
@@ -132,5 +128,3 @@ export const PrimaryDangerButton = (): React.ReactElement => {
     </LocaleProvider>
   );
 };
-
-

package/src/stories/Char.stories.tsx

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

package/src/stories/FiberGrid.stories.tsx

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

package/src/stories/Float.stories.tsx

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

package/src/stories/FloatTime.stories.tsx

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

package/src/stories/Image.stories.tsx

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

package/src/stories/Integer.stories.tsx

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

package/src/stories/Label.stories.tsx

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

package/src/stories/Many2one.stories.tsx

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

package/src/stories/One2many.stories.tsx

@@ -3,9 +3,6 @@ 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 {
@@ -20,8 +17,7 @@ export const Default = (): React.ReactElement => {
     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                                ',
+        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,
@@ -193,8 +189,7 @@ export const Default = (): React.ReactElement => {
             views: {},
           },
           type: {
-            help:
-              "Used to select automatically the right address according to the context in sales and purchases documents.",
+            help: "Used to select automatically the right address according to the context in sales and purchases documents.",
             selection: [
               ["default", "Default"],
               ["invoice", "Invoice"],
@@ -217,8 +212,7 @@ export const Default = (): React.ReactElement => {
         },
       },
       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                            ',
+        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,
@@ -262,8 +256,7 @@ export const Default = (): React.ReactElement => {
             views: {},
           },
           type: {
-            help:
-              "Used to select automatically the right address according to the context in sales and purchases documents.",
+            help: "Used to select automatically the right address according to the context in sales and purchases documents.",
             selection: [
               ["default", "Default"],
               ["invoice", "Invoice"],

package/src/stories/ProgressBar.stories.tsx

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

package/src/stories/Reference.stories.tsx

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

package/src/stories/Selection.stories.tsx

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

package/src/stories/Separator.stories.tsx

@@ -3,9 +3,6 @@ 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 {
@@ -24,8 +21,7 @@ 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 />
@@ -35,7 +31,7 @@ export const WithoutText = (): React.ReactElement => {
 
 export const OnlyIcon = (): React.ReactElement => {
   const ooui = new SeparatorOoui({
-    icon: "home"
+    icon: "home",
   });
   return (
     <LocaleProvider lang="en_US">
@@ -47,7 +43,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,9 +3,6 @@ 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,10 +1,5 @@
 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,10 +2,6 @@ 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,10 +1,5 @@
 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,7 +2,6 @@ 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,17 +15,16 @@ 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>
@@ -33,29 +32,43 @@ export const OnlyAntComponents = (): React.ReactElement => {
 };
 
 export const Default = (): React.ReactElement => {
-
   const btn1 = new ButtonOoui({
-    name: "btn1", icon: "gtk-execute", string: "Button 1",
-    buttonType: "object"
+    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 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
+    danger: true,
+  });
+  const buttonGroup = new ButtonGroupOoui({
+    name: "btnGroup",
+    default: "btn1",
   });
-  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>
   );
 };