@webiny/admin-ui 6.0.0-alpha.0

package/Heading/Heading.mdx

@@ -0,0 +1,184 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+
+import * as HeadingStories from './Heading.stories';
+
+<Meta of={HeadingStories} />
+
+# Heading
+
+The Heading component is used to display titles and section headings in the UI. It provides consistent typography and semantic HTML structure through six different heading levels (h1-h6).
+
+## Usage
+
+<Canvas of={HeadingStories.Documentation} source={ { code: `
+import React from "react";
+import { Heading } from "@webiny/admin-ui";
+
+const HeadingExample = () => {
+    return <Heading level={1}>This is a heading</Heading>;
+};
+
+export default HeadingExample;
+
+` } }
+        additionalActions={[
+            {
+                title: 'Open in GitHub',
+                onClick: () => {
+                    window.open(
+                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/Heading/Heading.tsx',
+                        '_blank'
+                    );
+                },
+            }
+        ]}
+/>
+
+<Controls of={HeadingStories.Documentation} />
+
+```tsx
+import React from "react";
+import { Heading } from "@webiny/admin-ui";
+
+const HeadingExample = () => {
+    return <Heading level={1}>This is a heading</Heading>;
+};
+
+export default HeadingExample;
+```
+
+## Examples
+
+### Heading Level 1
+
+The largest heading, typically used for page titles.
+
+<Canvas of={HeadingStories.Heading1} source={ { code: `
+import React from "react";
+import { Heading } from "@webiny/admin-ui";
+
+const Heading1Example = () => {
+    return (
+        <Heading level={1}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.
+        </Heading>
+    );
+};
+
+export default Heading1Example;
+` } } />
+
+
+### Heading Level 2
+
+Used for major section headings.
+
+<Canvas of={HeadingStories.Heading2} source={ { code: `
+import React from "react";
+import { Heading } from "@webiny/admin-ui";
+
+const Heading2Example = () => {
+    return (
+        <Heading level={2}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.
+        </Heading>
+    );
+};
+
+export default Heading2Example;
+` } } />
+
+### Heading Level 3
+
+Used for subsection headings.
+
+<Canvas of={HeadingStories.Heading3} source={ { code: `
+import React from "react";
+import { Heading } from "@webiny/admin-ui";
+
+const Heading3Example = () => {
+    return (
+        <Heading level={3}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.
+        </Heading>
+    );
+};
+
+export default Heading3Example;
+` } } />
+
+### Heading Level 4
+
+Used for minor subsection headings.
+
+<Canvas of={HeadingStories.Heading4} source={ { code: `
+import React from "react";
+import { Heading } from "@webiny/admin-ui";
+
+const Heading4Example = () => {
+    return (
+        <Heading level={4}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.
+        </Heading>
+    );
+};
+
+export default Heading4Example;
+` } } />
+
+### Heading Level 5
+
+Used for small headings within sections.
+
+<Canvas of={HeadingStories.Heading5} source={ { code: `
+import React from "react";
+import { Heading } from "@webiny/admin-ui";
+
+const Heading5Example = () => {
+    return (
+        <Heading level={5}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.
+        </Heading>
+    );
+};
+
+export default Heading5Example;
+` } } />
+
+### Heading Level 6
+
+The smallest heading, used for the least significant section headings.
+
+<Canvas of={HeadingStories.Heading6} source={ { code: `
+import React from "react";
+import { Heading } from "@webiny/admin-ui";
+
+const Heading6Example = () => {
+    return (
+        <Heading level={6}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.
+        </Heading>
+    );
+};
+
+export default Heading6Example;
+` } } />
+
+### as Example
+
+`as` prop is used to change the HTML tag of the heading. This is useful when you want to maintain semantic structure but want different visual styling.
+
+<Canvas of={HeadingStories.As} source={ { code: `
+import React from "react";
+import { Heading } from "@webiny/admin-ui";
+
+const AsExample = () => {
+    return (
+        <Heading level={2} as="h1">
+            This is visually a Heading level 2, but semantically an h1
+        </Heading>
+    );
+};
+
+export default AsExample;
+` } } />

package/Heading/Heading.stories.d.ts

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Heading } from "./Heading";
+declare const meta: Meta<typeof Heading>;
+export default meta;
+type Story = StoryObj<typeof Heading>;
+export declare const Heading1: Story;
+export declare const Heading2: Story;
+export declare const Heading3: Story;
+export declare const Heading4: Story;
+export declare const Heading5: Story;
+export declare const Heading6: Story;
+export declare const As: Story;
+export declare const Documentation: Story;

package/Heading/Heading.stories.js

@@ -0,0 +1,88 @@
+import { Heading } from "./Heading";
+const meta = {
+  title: "Components/Heading",
+  component: Heading,
+  argTypes: {
+    level: {
+      control: {
+        type: "number",
+        min: 1,
+        max: 6
+      }
+    }
+  }
+};
+export default meta;
+export const Heading1 = {
+  args: {
+    level: 1,
+    children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
+  }
+};
+export const Heading2 = {
+  args: {
+    level: 2,
+    children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
+  }
+};
+export const Heading3 = {
+  args: {
+    level: 3,
+    children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
+  }
+};
+export const Heading4 = {
+  args: {
+    level: 4,
+    children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
+  }
+};
+export const Heading5 = {
+  args: {
+    level: 5,
+    children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
+  }
+};
+export const Heading6 = {
+  args: {
+    level: 6,
+    children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus."
+  }
+};
+export const As = {
+  args: {
+    level: 2,
+    as: "h1",
+    children: "This is visually a Heading level 2, but semantically an h1"
+  }
+};
+export const Documentation = {
+  args: {
+    level: 1,
+    children: "This is a heading",
+    as: undefined,
+    className: undefined
+  },
+  argTypes: {
+    level: {
+      description: "The heading level (1-6) which determines the size and semantic meaning.",
+      control: "select",
+      options: [1, 2, 3, 4, 5, 6]
+    },
+    as: {
+      description: "The HTML tag to render, overriding the default tag based on level. This is useful when you want to maintain semantic structure but want different visual styling.",
+      control: "select",
+      options: ["none", "h1", "h2", "h3", "h4", "h5", "h6"]
+    },
+    children: {
+      description: "The content of the heading.",
+      control: "text"
+    },
+    className: {
+      description: "Additional CSS classes to apply to the heading. You can pass multiple classes, separated by commas or spaces.",
+      control: "none"
+    }
+  }
+};
+
+//# sourceMappingURL=Heading.stories.js.map

package/Heading/Heading.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Heading","meta","title","component","argTypes","level","control","type","min","max","Heading1","args","children","Heading2","Heading3","Heading4","Heading5","Heading6","As","as","Documentation","undefined","className","description","options"],"sources":["Heading.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\n\nimport { Heading } from \"./Heading\";\n\nconst meta: Meta<typeof Heading> = {\n    title: \"Components/Heading\",\n    component: Heading,\n    argTypes: {\n        level: {\n            control: {\n                type: \"number\",\n                min: 1,\n                max: 6\n            }\n        }\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof Heading>;\n\nexport const Heading1: Story = {\n    args: {\n        level: 1,\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const Heading2: Story = {\n    args: {\n        level: 2,\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const Heading3: Story = {\n    args: {\n        level: 3,\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const Heading4: Story = {\n    args: {\n        level: 4,\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const Heading5: Story = {\n    args: {\n        level: 5,\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const Heading6: Story = {\n    args: {\n        level: 6,\n        children:\n            \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tempus tortor eu sapien interdum rhoncus.\"\n    }\n};\n\nexport const As: Story = {\n    args: {\n        level: 2,\n        as: \"h1\",\n        children: \"This is visually a Heading level 2, but semantically an h1\"\n    }\n};\n\nexport const Documentation: Story = {\n    args: {\n        level: 1,\n        children: \"This is a heading\",\n        as: undefined,\n        className: undefined\n    },\n    argTypes: {\n        level: {\n            description: \"The heading level (1-6) which determines the size and semantic meaning.\",\n            control: \"select\",\n            options: [1, 2, 3, 4, 5, 6]\n        },\n        as: {\n            description:\n                \"The HTML tag to render, overriding the default tag based on level. This is useful when you want to maintain semantic structure but want different visual styling.\",\n            control: \"select\",\n            options: [\"none\", \"h1\", \"h2\", \"h3\", \"h4\", \"h5\", \"h6\"]\n        },\n        children: {\n            description: \"The content of the heading.\",\n            control: \"text\"\n        },\n        className: {\n            description:\n                \"Additional CSS classes to apply to the heading. You can pass multiple classes, separated by commas or spaces.\",\n            control: \"none\"\n        }\n    }\n};\n"],"mappings":"AAEA,SAASA,OAAO;AAEhB,MAAMC,IAA0B,GAAG;EAC/BC,KAAK,EAAE,oBAAoB;EAC3BC,SAAS,EAAEH,OAAO;EAClBI,QAAQ,EAAE;IACNC,KAAK,EAAE;MACHC,OAAO,EAAE;QACLC,IAAI,EAAE,QAAQ;QACdC,GAAG,EAAE,CAAC;QACNC,GAAG,EAAE;MACT;IACJ;EACJ;AACJ,CAAC;AAED,eAAeR,IAAI;AAGnB,OAAO,MAAMS,QAAe,GAAG;EAC3BC,IAAI,EAAE;IACFN,KAAK,EAAE,CAAC;IACRO,QAAQ,EACJ;EACR;AACJ,CAAC;AAED,OAAO,MAAMC,QAAe,GAAG;EAC3BF,IAAI,EAAE;IACFN,KAAK,EAAE,CAAC;IACRO,QAAQ,EACJ;EACR;AACJ,CAAC;AAED,OAAO,MAAME,QAAe,GAAG;EAC3BH,IAAI,EAAE;IACFN,KAAK,EAAE,CAAC;IACRO,QAAQ,EACJ;EACR;AACJ,CAAC;AAED,OAAO,MAAMG,QAAe,GAAG;EAC3BJ,IAAI,EAAE;IACFN,KAAK,EAAE,CAAC;IACRO,QAAQ,EACJ;EACR;AACJ,CAAC;AAED,OAAO,MAAMI,QAAe,GAAG;EAC3BL,IAAI,EAAE;IACFN,KAAK,EAAE,CAAC;IACRO,QAAQ,EACJ;EACR;AACJ,CAAC;AAED,OAAO,MAAMK,QAAe,GAAG;EAC3BN,IAAI,EAAE;IACFN,KAAK,EAAE,CAAC;IACRO,QAAQ,EACJ;EACR;AACJ,CAAC;AAED,OAAO,MAAMM,EAAS,GAAG;EACrBP,IAAI,EAAE;IACFN,KAAK,EAAE,CAAC;IACRc,EAAE,EAAE,IAAI;IACRP,QAAQ,EAAE;EACd;AACJ,CAAC;AAED,OAAO,MAAMQ,aAAoB,GAAG;EAChCT,IAAI,EAAE;IACFN,KAAK,EAAE,CAAC;IACRO,QAAQ,EAAE,mBAAmB;IAC7BO,EAAE,EAAEE,SAAS;IACbC,SAAS,EAAED;EACf,CAAC;EACDjB,QAAQ,EAAE;IACNC,KAAK,EAAE;MACHkB,WAAW,EAAE,yEAAyE;MACtFjB,OAAO,EAAE,QAAQ;MACjBkB,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC;IAC9B,CAAC;IACDL,EAAE,EAAE;MACAI,WAAW,EACP,mKAAmK;MACvKjB,OAAO,EAAE,QAAQ;MACjBkB,OAAO,EAAE,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI;IACxD,CAAC;IACDZ,QAAQ,EAAE;MACNW,WAAW,EAAE,6BAA6B;MAC1CjB,OAAO,EAAE;IACb,CAAC;IACDgB,SAAS,EAAE;MACPC,WAAW,EACP,+GAA+G;MACnHjB,OAAO,EAAE;IACb;EACJ;AACJ,CAAC","ignoreList":[]}

package/Heading/index.d.ts

@@ -0,0 +1 @@
+export * from "./Heading";

package/Heading/index.js

@@ -0,0 +1,3 @@
+export * from "./Heading";
+
+//# sourceMappingURL=index.js.map

package/Heading/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Heading\";\n"],"mappings":"AAAA","ignoreList":[]}

package/Icon/Icon.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+import { type VariantProps } from "../utils";
+declare const iconVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "xs" | null | undefined;
+    color?: "accent" | "inherit" | "neutral-light" | "neutral-strong" | "neutral-strong-transparent" | "neutral-base" | "neutral-negative" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+interface IconProps extends Omit<React.HTMLAttributes<HTMLOrSVGElement>, "color">, VariantProps<typeof iconVariants> {
+    label: string;
+    icon: React.ReactNode;
+}
+declare const Icon: ((props: IconProps) => React.JSX.Element) & {
+    original: (props: IconProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: ((props: IconProps) => React.JSX.Element) & {
+        original: (props: IconProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<((props: IconProps) => React.JSX.Element) & {
+        original: (props: IconProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { Icon, type IconProps };

package/Icon/Icon.js

@@ -0,0 +1,49 @@
+import React from "react";
+import { AccessibleIcon } from "radix-ui";
+import { cn, cva, makeDecoratable } from "../utils";
+const iconVariants = cva("wby-shrink-0", {
+  variants: {
+    size: {
+      xs: "wby-size-sm-extra",
+      sm: "wby-size-md",
+      md: "wby-size-md-plus",
+      lg: "wby-size-lg"
+    },
+    color: {
+      inherit: "wby-fill-inherit",
+      accent: "wby-fill-accent-default",
+      "neutral-light": "wby-fill-neutral-strong",
+      "neutral-strong": "wby-fill-neutral-xstrong",
+      "neutral-strong-transparent": "wby-fill-neutral-xstrong/30",
+      "neutral-base": "wby-fill-neutral-base",
+      "neutral-negative": "wby-fill-neutral-base/50"
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    color: "inherit"
+  }
+});
+const IconBase = props => {
+  const {
+    label,
+    icon,
+    color,
+    size,
+    className,
+    ...rest
+  } = props;
+  return /*#__PURE__*/React.createElement(AccessibleIcon.Root, {
+    label: label
+  }, /*#__PURE__*/React.cloneElement(icon, {
+    ...rest,
+    className: cn(iconVariants({
+      color,
+      size
+    }), className)
+  }));
+};
+const Icon = makeDecoratable("Icon", IconBase);
+export { Icon };
+
+//# sourceMappingURL=Icon.js.map

package/Icon/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","AccessibleIcon","cn","cva","makeDecoratable","iconVariants","variants","size","xs","sm","md","lg","color","inherit","accent","defaultVariants","IconBase","props","label","icon","className","rest","createElement","Root","cloneElement","Icon"],"sources":["Icon.tsx"],"sourcesContent":["import React from \"react\";\nimport { AccessibleIcon } from \"radix-ui\";\nimport { cn, cva, makeDecoratable, type VariantProps } from \"~/utils\";\n\nconst iconVariants = cva(\"wby-shrink-0\", {\n    variants: {\n        size: {\n            xs: \"wby-size-sm-extra\",\n            sm: \"wby-size-md\",\n            md: \"wby-size-md-plus\",\n            lg: \"wby-size-lg\"\n        },\n        color: {\n            inherit: \"wby-fill-inherit\",\n            accent: \"wby-fill-accent-default\",\n            \"neutral-light\": \"wby-fill-neutral-strong\",\n            \"neutral-strong\": \"wby-fill-neutral-xstrong\",\n            \"neutral-strong-transparent\": \"wby-fill-neutral-xstrong/30\",\n            \"neutral-base\": \"wby-fill-neutral-base\",\n            \"neutral-negative\": \"wby-fill-neutral-base/50\"\n        }\n    },\n    defaultVariants: {\n        size: \"md\",\n        color: \"inherit\"\n    }\n});\n\ninterface IconProps\n    extends Omit<React.HTMLAttributes<HTMLOrSVGElement>, \"color\">,\n        VariantProps<typeof iconVariants> {\n    label: string;\n    icon: React.ReactNode;\n}\n\nconst IconBase = (props: IconProps) => {\n    const { label, icon, color, size, className, ...rest } = props;\n    return (\n        <AccessibleIcon.Root label={label}>\n            {/* @ts-expect-error */}\n            {React.cloneElement(icon, {\n                ...rest,\n                className: cn(iconVariants({ color, size }), className)\n            })}\n        </AccessibleIcon.Root>\n    );\n};\n\nconst Icon = makeDecoratable(\"Icon\", IconBase);\n\nexport { Icon, type IconProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,QAAQ,UAAU;AACzC,SAASC,EAAE,EAAEC,GAAG,EAAEC,eAAe;AAEjC,MAAMC,YAAY,GAAGF,GAAG,CAAC,cAAc,EAAE;EACrCG,QAAQ,EAAE;IACNC,IAAI,EAAE;MACFC,EAAE,EAAE,mBAAmB;MACvBC,EAAE,EAAE,aAAa;MACjBC,EAAE,EAAE,kBAAkB;MACtBC,EAAE,EAAE;IACR,CAAC;IACDC,KAAK,EAAE;MACHC,OAAO,EAAE,kBAAkB;MAC3BC,MAAM,EAAE,yBAAyB;MACjC,eAAe,EAAE,yBAAyB;MAC1C,gBAAgB,EAAE,0BAA0B;MAC5C,4BAA4B,EAAE,6BAA6B;MAC3D,cAAc,EAAE,uBAAuB;MACvC,kBAAkB,EAAE;IACxB;EACJ,CAAC;EACDC,eAAe,EAAE;IACbR,IAAI,EAAE,IAAI;IACVK,KAAK,EAAE;EACX;AACJ,CAAC,CAAC;AASF,MAAMI,QAAQ,GAAIC,KAAgB,IAAK;EACnC,MAAM;IAAEC,KAAK;IAAEC,IAAI;IAAEP,KAAK;IAAEL,IAAI;IAAEa,SAAS;IAAE,GAAGC;EAAK,CAAC,GAAGJ,KAAK;EAC9D,oBACIjB,KAAA,CAAAsB,aAAA,CAACrB,cAAc,CAACsB,IAAI;IAACL,KAAK,EAAEA;EAAM,gBAE7BlB,KAAK,CAACwB,YAAY,CAACL,IAAI,EAAE;IACtB,GAAGE,IAAI;IACPD,SAAS,EAAElB,EAAE,CAACG,YAAY,CAAC;MAAEO,KAAK;MAAEL;IAAK,CAAC,CAAC,EAAEa,SAAS;EAC1D,CAAC,CACgB,CAAC;AAE9B,CAAC;AAED,MAAMK,IAAI,GAAGrB,eAAe,CAAC,MAAM,EAAEY,QAAQ,CAAC;AAE9C,SAASS,IAAI","ignoreList":[]}