@webiny/admin-ui 6.2.0-beta.0 → 6.3.0-beta.0

package/CheckboxGroup/CheckboxGroup.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
+import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";
 
-import * as CheckboxGroupStories from './CheckboxGroup.stories';
+import * as CheckboxGroupStories from "./CheckboxGroup.stories";
 
 <Meta of={CheckboxGroupStories} />
 
@@ -18,8 +18,8 @@ import React, { useState } from "react";
 import { CheckboxGroup } from "@webiny/admin-ui";
 
 const CheckboxGroupExample = () => {
-    const [selectedValues, setSelectedValues] = useState<string[]>([]);
-    const [validation, setValidation] = useState({ isValid: true, message: "" });
+const [selectedValues, setSelectedValues] = useState<string[]>([]);
+const [validation, setValidation] = useState({ isValid: true, message: "" });
 
     const handleChange = (newValues: string[]) => {
         setSelectedValues(newValues);
@@ -50,25 +50,26 @@ const CheckboxGroupExample = () => {
             />
         </div>
     );
+
 };
 
 export default CheckboxGroupExample;
 
 ` } }
-        additionalActions={[
-            {
-                title: 'Open in GitHub',
-                onClick: () => {
-                    window.open(
-                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/CheckboxGroup/CheckboxGroup.tsx',
-                        '_blank'
-                    );
-                },
-            }
-        ]}
+additionalActions={[
+{
+title: 'Open in GitHub',
+onClick: () => {
+window.open(
+'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/CheckboxGroup/CheckboxGroup.tsx',
+'_blank'
+);
+},
+}
+]}
 />
 
-<Controls of={CheckboxGroupStories.Documentation} exclude={"onChange"}/>
+<Controls of={CheckboxGroupStories.Documentation} exclude={"onChange"} />
 
 ```tsx
 import React, { useState } from "react";
@@ -76,38 +77,38 @@ import React, { useState } from "react";
 import { CheckboxGroup } from "@webiny/admin-ui";
 
 const CheckboxGroupExample = () => {
-    const [selectedValues, setSelectedValues] = useState<string[]>([]);
-    const [validation, setValidation] = useState({ isValid: true, message: "" });
-
-    const handleChange = (newValues: string[]) => {
-        setSelectedValues(newValues);
-
-        // Simple required validation
-        if (!newValues || newValues.length === 0) {
-            setValidation({ isValid: false, message: "Please select at least one option." });
-        } else {
-            setValidation({ isValid: true, message: "" });
-        }
-    };
-
-    return (
-        <div>
-            <CheckboxGroup
-                label="Select your preferences"
-                description="Choose one or more options."
-                note="Note: You can select multiple values."
-                required={true}
-                items={[
-                    { label: "Value 1", value: "value-1" },
-                    { label: "Value 2", value: "value-2" },
-                    { label: "Value 3", value: "value-3" }
-                ]}
-                value={selectedValues}
-                onChange={handleChange}
-                validation={validation}
-            />
-        </div>
-    );
+  const [selectedValues, setSelectedValues] = useState<string[]>([]);
+  const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+  const handleChange = (newValues: string[]) => {
+    setSelectedValues(newValues);
+
+    // Simple required validation
+    if (!newValues || newValues.length === 0) {
+      setValidation({ isValid: false, message: "Please select at least one option." });
+    } else {
+      setValidation({ isValid: true, message: "" });
+    }
+  };
+
+  return (
+    <div>
+      <CheckboxGroup
+        label="Select your preferences"
+        description="Choose one or more options."
+        note="Note: You can select multiple values."
+        required={true}
+        items={[
+          { label: "Value 1", value: "value-1" },
+          { label: "Value 2", value: "value-2" },
+          { label: "Value 3", value: "value-3" }
+        ]}
+        value={selectedValues}
+        onChange={handleChange}
+        validation={validation}
+      />
+    </div>
+  );
 };
 
 export default CheckboxGroupExample;
@@ -116,10 +117,7 @@ export default CheckboxGroupExample;
 ## Anatomy
 
 ### General
-Checkbox Group input enable users to select a single or multiple items from a list of offered choices. A checkbox input group organizes related checkbox input options together for better clarity and functionality.
-
-<img src="/images/storybook/checkbox-group/general.png" alt="General"/>
-
-
 
+Checkbox Group input enable users to select a single or multiple items from a list of offered choices. A checkbox input group organizes related checkbox input options together for better clarity and functionality.
 
+<img src="/images/storybook/checkbox-group/general.png" alt="General" />

package/CodeEditor/CodeEditor.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
+import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";
 
-import * as CodeEditorStories from './CodeEditor.stories';
+import * as CodeEditorStories from "./CodeEditor.stories";
 
 <Meta of={CodeEditorStories} />
 
@@ -15,8 +15,8 @@ import React, { useState } from "react";
 import { CodeEditor } from "@webiny/admin-ui";
 
 const CodeEditorExample = () => {
-    const [code, setCode] = useState('{\\n  "name": "example",\\n  "version": "1.0.0"\\n}');
-    const [validation, setValidation] = useState({ isValid: true, message: "" });
+const [code, setCode] = useState('{\\n "name": "example",\\n "version": "1.0.0"\\n}');
+const [validation, setValidation] = useState({ isValid: true, message: "" });
 
     const handleChange = (newCode: string) => {
         setCode(newCode);
@@ -42,58 +42,59 @@ const CodeEditorExample = () => {
             validation={validation}
         />
     );
+
 };
 
 export default CodeEditorExample;
 
 ` } }
-        additionalActions={[
-            {
-                title: 'Open in GitHub',
-                onClick: () => {
-                    window.open(
-                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/CodeEditor/CodeEditor.tsx',
-                        '_blank'
-                    );
-                },
-            }
-        ]}
+additionalActions={[
+{
+title: 'Open in GitHub',
+onClick: () => {
+window.open(
+'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/CodeEditor/CodeEditor.tsx',
+'_blank'
+);
+},
+}
+]}
 />
 
-<Controls of={CodeEditorStories.Documentation} exclude={"onChange"}/>
+<Controls of={CodeEditorStories.Documentation} exclude={"onChange"} />
 
 ```tsx
 import React, { useState } from "react";
 import { CodeEditor } from "@webiny/admin-ui";
 
 const CodeEditorExample = () => {
-    const [code, setCode] = useState('{\n  "name": "example",\n  "version": "1.0.0"\n}');
-    const [validation, setValidation] = useState({ isValid: true, message: "" });
-
-    const handleChange = (newCode: string) => {
-        setCode(newCode);
-
-        // Simple required validation
-        if (!newCode || newCode.trim() === "") {
-            setValidation({ isValid: false, message: "This field is required" });
-        } else {
-            setValidation({ isValid: true, message: "" });
-        }
-    };
-
-    return (
-        <CodeEditor
-            label="JSON Configuration"
-            description="Enter your configuration in JSON format"
-            note="Note: Make sure your JSON is valid"
-            required={true}
-            mode="json"
-            theme="github"
-            value={code}
-            onChange={handleChange}
-            validation={validation}
-        />
-    );
+  const [code, setCode] = useState('{\n  "name": "example",\n  "version": "1.0.0"\n}');
+  const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+  const handleChange = (newCode: string) => {
+    setCode(newCode);
+
+    // Simple required validation
+    if (!newCode || newCode.trim() === "") {
+      setValidation({ isValid: false, message: "This field is required" });
+    } else {
+      setValidation({ isValid: true, message: "" });
+    }
+  };
+
+  return (
+    <CodeEditor
+      label="JSON Configuration"
+      description="Enter your configuration in JSON format"
+      note="Note: Make sure your JSON is valid"
+      required={true}
+      mode="json"
+      theme="github"
+      value={code}
+      onChange={handleChange}
+      validation={validation}
+    />
+  );
 };
 
 export default CodeEditorExample;

package/ColorPicker/ColorPicker.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
+import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";
 
-import * as ColorPickerStories from './ColorPicker.stories';
+import * as ColorPickerStories from "./ColorPicker.stories";
 
 <Meta of={ColorPickerStories} />
 
@@ -15,8 +15,8 @@ import React, { useState } from "react";
 import { ColorPicker } from "@webiny/admin-ui";
 
 const ColorPickerExample = () => {
-    const [color, setColor] = useState("#4285F4");
-    const [validation, setValidation] = useState({ isValid: true, message: "" });
+const [color, setColor] = useState("#4285F4");
+const [validation, setValidation] = useState({ isValid: true, message: "" });
 
     const handleChange = (newColor: string) => {
         setColor(newColor);
@@ -39,55 +39,56 @@ const ColorPickerExample = () => {
             validation={validation}
         />
     );
+
 };
 
 export default ColorPickerExample;
 
 ` } }
-        additionalActions={[
-            {
-                title: 'Open in GitHub',
-                onClick: () => {
-                    window.open(
-                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/ColorPicker/ColorPicker.tsx',
-                        '_blank'
-                    );
-                },
-            }
-        ]}
+additionalActions={[
+{
+title: 'Open in GitHub',
+onClick: () => {
+window.open(
+'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/ColorPicker/ColorPicker.tsx',
+'_blank'
+);
+},
+}
+]}
 />
 
-<Controls of={ColorPickerStories.Documentation} exclude={"onChange"}/>
+<Controls of={ColorPickerStories.Documentation} exclude={"onChange"} />
 
 ```tsx
 import React, { useState } from "react";
 import { ColorPicker } from "@webiny/admin-ui";
 
 const ColorPickerExample = () => {
-    const [color, setColor] = useState("#4285F4");
-    const [validation, setValidation] = useState({ isValid: true, message: "" });
-
-    const handleChange = (newColor: string) => {
-        setColor(newColor);
-
-        if (!newColor) {
-            setValidation({ isValid: false, message: "Please select a color" });
-        } else {
-            setValidation({ isValid: true, message: "" });
-        }
-    };
-
-    return (
-        <ColorPicker
-            label="Brand Color"
-            description="Select your primary brand color"
-            note="Note: Choose a color that aligns with your brand identity"
-            required={true}
-            value={color}
-            onChange={handleChange}
-            validation={validation}
-        />
-    );
+  const [color, setColor] = useState("#4285F4");
+  const [validation, setValidation] = useState({ isValid: true, message: "" });
+
+  const handleChange = (newColor: string) => {
+    setColor(newColor);
+
+    if (!newColor) {
+      setValidation({ isValid: false, message: "Please select a color" });
+    } else {
+      setValidation({ isValid: true, message: "" });
+    }
+  };
+
+  return (
+    <ColorPicker
+      label="Brand Color"
+      description="Select your primary brand color"
+      note="Note: Choose a color that aligns with your brand identity"
+      required={true}
+      value={color}
+      onChange={handleChange}
+      validation={validation}
+    />
+  );
 };
 
 export default ColorPickerExample;

package/Command/components/Item.d.ts

@@ -3,7 +3,7 @@ import { Command as CommandPrimitive } from "cmdk";
 import { type VariantProps } from "../../utils.js";
 declare const commandItemVariants: (props?: ({
     selected?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface ItemProps extends React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>, VariantProps<typeof commandItemVariants> {
     selected?: boolean;
 }

package/Command/components/Item.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ReactComponent","Check","Command","CommandPrimitive","cn","cva","commandItemVariants","variants","selected","true","Item","className","children","props","createElement","Object","assign"],"sources":["Item.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ReactComponent as Check } from \"@webiny/icons/check.svg\";\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\n\nconst commandItemVariants = cva(\n    [\n        \"flex items-center justify-between gap-sm-extra cursor-default select-none rounded-sm p-sm mx-sm text-md outline-none overflow-hidden\",\n        \"bg-neutral-base text-neutral-primary fill-neutral-xstrong\",\n        \"data-[disabled=true]:text-neutral-disabled data-[disabled=true]:cursor-not-allowed\",\n        \"data-[selected=true]:bg-neutral-dimmed\"\n    ],\n    {\n        variants: {\n            selected: {\n                true: \"font-semibold bg-neutral-dimmed\"\n            }\n        }\n    }\n);\n\ninterface ItemProps\n    extends React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>,\n        VariantProps<typeof commandItemVariants> {\n    selected?: boolean;\n}\n\nconst Item = ({ className, children, selected, ...props }: ItemProps) => (\n    <CommandPrimitive.Item className={cn(commandItemVariants({ selected }), className)} {...props}>\n        <span className={\"w-full overflow-hidden truncate whitespace-nowrap\"}>{children}</span>\n        {selected ? <Check className=\"w-md h-md\" /> : null}\n    </CommandPrimitive.Item>\n);\n\nexport { Item, type ItemProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,cAAc,IAAIC,KAAK,QAAQ,yBAAyB;AACjE,SAASC,OAAO,IAAIC,gBAAgB,QAAQ,MAAM;AAClD,SAASC,EAAE,EAAEC,GAAG;AAEhB,MAAMC,mBAAmB,GAAGD,GAAG,CAC3B,CACI,sIAAsI,EACtI,2DAA2D,EAC3D,oFAAoF,EACpF,wCAAwC,CAC3C,EACD;EACIE,QAAQ,EAAE;IACNC,QAAQ,EAAE;MACNC,IAAI,EAAE;IACV;EACJ;AACJ,CACJ,CAAC;AAQD,MAAMC,IAAI,GAAGA,CAAC;EAAEC,SAAS;EAAEC,QAAQ;EAAEJ,QAAQ;EAAE,GAAGK;AAAiB,CAAC,kBAChEd,KAAA,CAAAe,aAAA,CAACX,gBAAgB,CAACO,IAAI,EAAAK,MAAA,CAAAC,MAAA;EAACL,SAAS,EAAEP,EAAE,CAACE,mBAAmB,CAAC;IAAEE;EAAS,CAAC,CAAC,EAAEG,SAAS;AAAE,GAAKE,KAAK,gBACzFd,KAAA,CAAAe,aAAA;EAAMH,SAAS,EAAE;AAAoD,GAAEC,QAAe,CAAC,EACtFJ,QAAQ,gBAAGT,KAAA,CAAAe,aAAA,CAACb,KAAK;EAACU,SAAS,EAAC;AAAW,CAAE,CAAC,GAAG,IAC3B,CAC1B;AAED,SAASD,IAAI","ignoreList":[]}
+{"version":3,"names":["React","ReactComponent","Check","Command","CommandPrimitive","cn","cva","commandItemVariants","variants","selected","true","Item","className","children","props","createElement","Object","assign"],"sources":["Item.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { ReactComponent as Check } from \"@webiny/icons/check.svg\";\nimport { Command as CommandPrimitive } from \"cmdk\";\nimport { cn, cva, type VariantProps } from \"~/utils.js\";\n\nconst commandItemVariants = cva(\n    [\n        \"flex items-center justify-between gap-sm-extra cursor-default select-none rounded-sm p-sm mx-sm text-md outline-none overflow-hidden\",\n        \"bg-neutral-base text-neutral-primary fill-neutral-xstrong\",\n        \"data-[disabled=true]:text-neutral-disabled data-[disabled=true]:cursor-not-allowed\",\n        \"data-[selected=true]:bg-neutral-dimmed\"\n    ],\n    {\n        variants: {\n            selected: {\n                true: \"font-semibold bg-neutral-dimmed\"\n            }\n        }\n    }\n);\n\ninterface ItemProps\n    extends\n        React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>,\n        VariantProps<typeof commandItemVariants> {\n    selected?: boolean;\n}\n\nconst Item = ({ className, children, selected, ...props }: ItemProps) => (\n    <CommandPrimitive.Item className={cn(commandItemVariants({ selected }), className)} {...props}>\n        <span className={\"w-full overflow-hidden truncate whitespace-nowrap\"}>{children}</span>\n        {selected ? <Check className=\"w-md h-md\" /> : null}\n    </CommandPrimitive.Item>\n);\n\nexport { Item, type ItemProps };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,cAAc,IAAIC,KAAK,QAAQ,yBAAyB;AACjE,SAASC,OAAO,IAAIC,gBAAgB,QAAQ,MAAM;AAClD,SAASC,EAAE,EAAEC,GAAG;AAEhB,MAAMC,mBAAmB,GAAGD,GAAG,CAC3B,CACI,sIAAsI,EACtI,2DAA2D,EAC3D,oFAAoF,EACpF,wCAAwC,CAC3C,EACD;EACIE,QAAQ,EAAE;IACNC,QAAQ,EAAE;MACNC,IAAI,EAAE;IACV;EACJ;AACJ,CACJ,CAAC;AASD,MAAMC,IAAI,GAAGA,CAAC;EAAEC,SAAS;EAAEC,QAAQ;EAAEJ,QAAQ;EAAE,GAAGK;AAAiB,CAAC,kBAChEd,KAAA,CAAAe,aAAA,CAACX,gBAAgB,CAACO,IAAI,EAAAK,MAAA,CAAAC,MAAA;EAACL,SAAS,EAAEP,EAAE,CAACE,mBAAmB,CAAC;IAAEE;EAAS,CAAC,CAAC,EAAEG,SAAS;AAAE,GAAKE,KAAK,gBACzFd,KAAA,CAAAe,aAAA;EAAMH,SAAS,EAAE;AAAoD,GAAEC,QAAe,CAAC,EACtFJ,QAAQ,gBAAGT,KAAA,CAAAe,aAAA,CAACb,KAAK;EAACU,SAAS,EAAC;AAAW,CAAE,CAAC,GAAG,IAC3B,CAC1B;AAED,SAASD,IAAI","ignoreList":[]}