@webiny/admin-ui 6.0.0-alpha.5 → 6.0.0-rc.0

package/ScrollArea/ScrollArea.js

@@ -0,0 +1,72 @@
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { cn } from "../utils.js";
+function ScrollArea({
+  className,
+  children,
+  onScrollPositionChange,
+  onScroll,
+  ...props
+}) {
+  const viewportRef = React.useRef(null);
+  React.useEffect(() => {
+    const viewport = viewportRef.current;
+    if (!viewport || !onScrollPositionChange && !onScroll) {
+      return;
+    }
+
+    // The Viewport component itself is the scrollable element.
+    const handleScroll = () => {
+      const {
+        scrollTop,
+        scrollLeft,
+        scrollHeight,
+        scrollWidth,
+        clientHeight,
+        clientWidth
+      } = viewport;
+      const position = {
+        top: scrollHeight > clientHeight ? scrollTop / (scrollHeight - clientHeight) : 0,
+        left: scrollWidth > clientWidth ? scrollLeft / (scrollWidth - clientWidth) : 0,
+        scrollTop,
+        scrollLeft,
+        scrollHeight,
+        scrollWidth,
+        clientHeight,
+        clientWidth
+      };
+      onScrollPositionChange?.(position);
+      onScroll?.(position);
+    };
+
+    // Call handleScroll initially to provide initial position.
+    handleScroll();
+    viewport.addEventListener("scroll", handleScroll);
+    return () => viewport.removeEventListener("scroll", handleScroll);
+  }, [onScrollPositionChange, onScroll]);
+  return /*#__PURE__*/React.createElement(ScrollAreaPrimitive.Root, Object.assign({
+    "data-slot": "scroll-area",
+    className: cn("relative", className)
+  }, props), /*#__PURE__*/React.createElement(ScrollAreaPrimitive.Viewport, {
+    ref: viewportRef,
+    "data-slot": "scroll-area-viewport",
+    className: "focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+  }, children), /*#__PURE__*/React.createElement(ScrollBar, null), /*#__PURE__*/React.createElement(ScrollAreaPrimitive.Corner, null));
+}
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /*#__PURE__*/React.createElement(ScrollAreaPrimitive.ScrollAreaScrollbar, Object.assign({
+    "data-slot": "scroll-area-scrollbar",
+    orientation: orientation,
+    className: cn("flex touch-none transition-colors select-none", orientation === "vertical" && "h-full w-[8px] border-l border-l-transparent", orientation === "horizontal" && "h-[8px] flex-col border-t border-t-transparent", className)
+  }, props), /*#__PURE__*/React.createElement(ScrollAreaPrimitive.ScrollAreaThumb, {
+    "data-slot": "scroll-area-thumb",
+    className: "bg-neutral-strong/70 relative flex-1 rounded-full"
+  }));
+}
+export { ScrollArea, ScrollBar };
+
+//# sourceMappingURL=ScrollArea.js.map

package/ScrollArea/ScrollArea.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","ScrollAreaPrimitive","cn","ScrollArea","className","children","onScrollPositionChange","onScroll","props","viewportRef","useRef","useEffect","viewport","current","handleScroll","scrollTop","scrollLeft","scrollHeight","scrollWidth","clientHeight","clientWidth","position","top","left","addEventListener","removeEventListener","createElement","Root","Object","assign","Viewport","ref","ScrollBar","Corner","orientation","ScrollAreaScrollbar","ScrollAreaThumb"],"sources":["ScrollArea.tsx"],"sourcesContent":["import * as React from \"react\";\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\";\nimport { cn } from \"~/utils.js\";\n\nexport interface ScrollPosition {\n    top: number;\n    left: number;\n    scrollTop: number;\n    scrollLeft: number;\n    scrollHeight: number;\n    scrollWidth: number;\n    clientHeight: number;\n    clientWidth: number;\n}\n\ninterface ScrollAreaProps\n    extends Omit<React.ComponentProps<typeof ScrollAreaPrimitive.Root>, \"onScroll\"> {\n    onScrollPositionChange?: (position: ScrollPosition) => void;\n    onScroll?: (position: ScrollPosition) => void;\n}\n\nfunction ScrollArea({\n    className,\n    children,\n    onScrollPositionChange,\n    onScroll,\n    ...props\n}: ScrollAreaProps) {\n    const viewportRef = React.useRef<HTMLDivElement>(null);\n\n    React.useEffect(() => {\n        const viewport = viewportRef.current;\n        if (!viewport || (!onScrollPositionChange && !onScroll)) {\n            return;\n        }\n\n        // The Viewport component itself is the scrollable element.\n        const handleScroll = () => {\n            const { scrollTop, scrollLeft, scrollHeight, scrollWidth, clientHeight, clientWidth } =\n                viewport;\n\n            const position: ScrollPosition = {\n                top: scrollHeight > clientHeight ? scrollTop / (scrollHeight - clientHeight) : 0,\n                left: scrollWidth > clientWidth ? scrollLeft / (scrollWidth - clientWidth) : 0,\n                scrollTop,\n                scrollLeft,\n                scrollHeight,\n                scrollWidth,\n                clientHeight,\n                clientWidth\n            };\n\n            onScrollPositionChange?.(position);\n            onScroll?.(position);\n        };\n\n        // Call handleScroll initially to provide initial position.\n        handleScroll();\n\n        viewport.addEventListener(\"scroll\", handleScroll);\n        return () => viewport.removeEventListener(\"scroll\", handleScroll);\n    }, [onScrollPositionChange, onScroll]);\n\n    return (\n        <ScrollAreaPrimitive.Root\n            data-slot=\"scroll-area\"\n            className={cn(\"relative\", className)}\n            {...props}\n        >\n            <ScrollAreaPrimitive.Viewport\n                ref={viewportRef}\n                data-slot=\"scroll-area-viewport\"\n                className=\"focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1\"\n            >\n                {children}\n            </ScrollAreaPrimitive.Viewport>\n            <ScrollBar />\n            <ScrollAreaPrimitive.Corner />\n        </ScrollAreaPrimitive.Root>\n    );\n}\n\nfunction ScrollBar({\n    className,\n    orientation = \"vertical\",\n    ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {\n    return (\n        <ScrollAreaPrimitive.ScrollAreaScrollbar\n            data-slot=\"scroll-area-scrollbar\"\n            orientation={orientation}\n            className={cn(\n                \"flex touch-none transition-colors select-none\",\n                orientation === \"vertical\" && \"h-full w-[8px] border-l border-l-transparent\",\n                orientation === \"horizontal\" && \"h-[8px] flex-col border-t border-t-transparent\",\n                className\n            )}\n            {...props}\n        >\n            <ScrollAreaPrimitive.ScrollAreaThumb\n                data-slot=\"scroll-area-thumb\"\n                className=\"bg-neutral-strong/70 relative flex-1 rounded-full\"\n            />\n        </ScrollAreaPrimitive.ScrollAreaScrollbar>\n    );\n}\n\nexport { ScrollArea, ScrollBar };\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAO,KAAKC,mBAAmB,MAAM,6BAA6B;AAClE,SAASC,EAAE;AAmBX,SAASC,UAAUA,CAAC;EAChBC,SAAS;EACTC,QAAQ;EACRC,sBAAsB;EACtBC,QAAQ;EACR,GAAGC;AACU,CAAC,EAAE;EAChB,MAAMC,WAAW,GAAGT,KAAK,CAACU,MAAM,CAAiB,IAAI,CAAC;EAEtDV,KAAK,CAACW,SAAS,CAAC,MAAM;IAClB,MAAMC,QAAQ,GAAGH,WAAW,CAACI,OAAO;IACpC,IAAI,CAACD,QAAQ,IAAK,CAACN,sBAAsB,IAAI,CAACC,QAAS,EAAE;MACrD;IACJ;;IAEA;IACA,MAAMO,YAAY,GAAGA,CAAA,KAAM;MACvB,MAAM;QAAEC,SAAS;QAAEC,UAAU;QAAEC,YAAY;QAAEC,WAAW;QAAEC,YAAY;QAAEC;MAAY,CAAC,GACjFR,QAAQ;MAEZ,MAAMS,QAAwB,GAAG;QAC7BC,GAAG,EAAEL,YAAY,GAAGE,YAAY,GAAGJ,SAAS,IAAIE,YAAY,GAAGE,YAAY,CAAC,GAAG,CAAC;QAChFI,IAAI,EAAEL,WAAW,GAAGE,WAAW,GAAGJ,UAAU,IAAIE,WAAW,GAAGE,WAAW,CAAC,GAAG,CAAC;QAC9EL,SAAS;QACTC,UAAU;QACVC,YAAY;QACZC,WAAW;QACXC,YAAY;QACZC;MACJ,CAAC;MAEDd,sBAAsB,GAAGe,QAAQ,CAAC;MAClCd,QAAQ,GAAGc,QAAQ,CAAC;IACxB,CAAC;;IAED;IACAP,YAAY,CAAC,CAAC;IAEdF,QAAQ,CAACY,gBAAgB,CAAC,QAAQ,EAAEV,YAAY,CAAC;IACjD,OAAO,MAAMF,QAAQ,CAACa,mBAAmB,CAAC,QAAQ,EAAEX,YAAY,CAAC;EACrE,CAAC,EAAE,CAACR,sBAAsB,EAAEC,QAAQ,CAAC,CAAC;EAEtC,oBACIP,KAAA,CAAA0B,aAAA,CAACzB,mBAAmB,CAAC0B,IAAI,EAAAC,MAAA,CAAAC,MAAA;IACrB,aAAU,aAAa;IACvBzB,SAAS,EAAEF,EAAE,CAAC,UAAU,EAAEE,SAAS;EAAE,GACjCI,KAAK,gBAETR,KAAA,CAAA0B,aAAA,CAACzB,mBAAmB,CAAC6B,QAAQ;IACzBC,GAAG,EAAEtB,WAAY;IACjB,aAAU,sBAAsB;IAChCL,SAAS,EAAC;EAAoJ,GAE7JC,QACyB,CAAC,eAC/BL,KAAA,CAAA0B,aAAA,CAACM,SAAS,MAAE,CAAC,eACbhC,KAAA,CAAA0B,aAAA,CAACzB,mBAAmB,CAACgC,MAAM,MAAE,CACP,CAAC;AAEnC;AAEA,SAASD,SAASA,CAAC;EACf5B,SAAS;EACT8B,WAAW,GAAG,UAAU;EACxB,GAAG1B;AAC+D,CAAC,EAAE;EACrE,oBACIR,KAAA,CAAA0B,aAAA,CAACzB,mBAAmB,CAACkC,mBAAmB,EAAAP,MAAA,CAAAC,MAAA;IACpC,aAAU,uBAAuB;IACjCK,WAAW,EAAEA,WAAY;IACzB9B,SAAS,EAAEF,EAAE,CACT,+CAA+C,EAC/CgC,WAAW,KAAK,UAAU,IAAI,8CAA8C,EAC5EA,WAAW,KAAK,YAAY,IAAI,gDAAgD,EAChF9B,SACJ;EAAE,GACEI,KAAK,gBAETR,KAAA,CAAA0B,aAAA,CAACzB,mBAAmB,CAACmC,eAAe;IAChC,aAAU,mBAAmB;IAC7BhC,SAAS,EAAC;EAAmD,CAChE,CACoC,CAAC;AAElD;AAEA,SAASD,UAAU,EAAE6B,SAAS","ignoreList":[]}

package/ScrollArea/ScrollArea.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import { ScrollArea } from "./ScrollArea.js";
+declare const meta: Meta<typeof ScrollArea>;
+export default meta;
+type Story = StoryObj<typeof ScrollArea>;
+export declare const Default: Story;
+export declare const HorizontalScrolling: Story;
+export declare const WithScrollPositionTracking: Story;

package/ScrollArea/ScrollArea.stories.js

@@ -0,0 +1,117 @@
+import { ScrollArea, ScrollBar } from "./ScrollArea.js";
+import React from "react";
+import { Heading } from "../Heading/index.js";
+import { Text } from "../Text/index.js";
+import { Separator } from "../Separator/index.js";
+const meta = {
+  title: "Components/ScrollArea",
+  component: ScrollArea,
+  argTypes: {},
+  decorators: [Story => /*#__PURE__*/React.createElement("div", {
+    className: "w-[700px]"
+  }, /*#__PURE__*/React.createElement(Story, null))]
+};
+export default meta;
+const tags = Array.from({
+  length: 50
+}).map((_, i, a) => `v1.2.0-beta.${a.length - i}`);
+export const Default = {
+  render: () => {
+    return /*#__PURE__*/React.createElement(ScrollArea, {
+      className: "h-72 w-48 rounded-md border border-neutral-dimmed"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "p-4"
+    }, /*#__PURE__*/React.createElement(Heading, {
+      level: 6,
+      className: "mb-4"
+    }, "Tags"), tags.map(tag => /*#__PURE__*/React.createElement("div", {
+      key: tag
+    }, /*#__PURE__*/React.createElement(Text, {
+      className: "text-sm"
+    }, tag), /*#__PURE__*/React.createElement(Separator, {
+      className: "my-2"
+    })))));
+  }
+};
+export const HorizontalScrolling = {
+  render: () => {
+    const works = [{
+      artist: "Ornella Binni",
+      art: "https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80"
+    }, {
+      artist: "Ornella Binni",
+      art: "https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80"
+    }, {
+      artist: "Ornella Binni",
+      art: "https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80"
+    }];
+    return /*#__PURE__*/React.createElement(ScrollArea, {
+      className: "w-96 whitespace-nowrap rounded-md border border-neutral-dimmed"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "flex w-max space-x-4 p-4"
+    }, works.map(artwork => /*#__PURE__*/React.createElement("figure", {
+      key: artwork.artist,
+      className: "shrink-0"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "overflow-hidden rounded-md"
+    }, /*#__PURE__*/React.createElement("img", {
+      src: artwork.art,
+      alt: `Photo by ${artwork.artist}`,
+      className: "aspect-[3/4] h-fit w-fit object-cover",
+      width: 300,
+      height: 400
+    })), /*#__PURE__*/React.createElement("figcaption", {
+      className: "pt-2 text-xs text-neutral-strong"
+    }, "Photo by", " ", /*#__PURE__*/React.createElement("span", {
+      className: "font-semibold text-neutral-primary"
+    }, artwork.artist))))), /*#__PURE__*/React.createElement(ScrollBar, {
+      orientation: "horizontal"
+    }));
+  }
+};
+export const WithScrollPositionTracking = {
+  render: () => {
+    const [position, setPosition] = React.useState(null);
+    const [loadMoreTriggered, setLoadMoreTriggered] = React.useState(false);
+    const handleScrollPositionChange = React.useCallback(pos => {
+      setPosition(pos);
+
+      // Trigger load more when scrolled 90% down.
+      if (pos.top >= 0.9 && !loadMoreTriggered) {
+        setLoadMoreTriggered(true);
+        console.log("Load more triggered at position:", pos);
+      } else if (pos.top < 0.9) {
+        setLoadMoreTriggered(false);
+      }
+    }, [loadMoreTriggered]);
+    return /*#__PURE__*/React.createElement("div", {
+      className: "space-y-4"
+    }, /*#__PURE__*/React.createElement(ScrollArea, {
+      className: "h-72 w-48 rounded-md border border-neutral-dimmed",
+      onScrollPositionChange: handleScrollPositionChange
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "p-4"
+    }, /*#__PURE__*/React.createElement(Heading, {
+      level: 6,
+      className: "mb-4"
+    }, "Tags"), tags.map(tag => /*#__PURE__*/React.createElement("div", {
+      key: tag
+    }, /*#__PURE__*/React.createElement(Text, {
+      className: "text-sm"
+    }, tag), /*#__PURE__*/React.createElement(Separator, {
+      className: "my-2"
+    }))))), position && /*#__PURE__*/React.createElement("div", {
+      className: "rounded-md border border-neutral-dimmed p-4 space-y-2"
+    }, /*#__PURE__*/React.createElement(Text, {
+      className: "font-semibold"
+    }, "Scroll Position:"), /*#__PURE__*/React.createElement(Text, {
+      className: "text-sm"
+    }, "Top: ", (position.top * 100).toFixed(1), "%"), /*#__PURE__*/React.createElement(Text, {
+      className: "text-sm"
+    }, "ScrollTop: ", position.scrollTop, "px"), /*#__PURE__*/React.createElement(Text, {
+      className: "text-sm"
+    }, "Load More Triggered: ", loadMoreTriggered ? "Yes" : "No")));
+  }
+};
+
+//# sourceMappingURL=ScrollArea.stories.js.map

package/ScrollArea/ScrollArea.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ScrollArea","ScrollBar","React","Heading","Text","Separator","meta","title","component","argTypes","decorators","Story","createElement","className","tags","Array","from","length","map","_","i","a","Default","render","level","tag","key","HorizontalScrolling","works","artist","art","artwork","src","alt","width","height","orientation","WithScrollPositionTracking","position","setPosition","useState","loadMoreTriggered","setLoadMoreTriggered","handleScrollPositionChange","useCallback","pos","top","console","log","onScrollPositionChange","toFixed","scrollTop"],"sources":["ScrollArea.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ScrollArea, ScrollBar, ScrollPosition } from \"./ScrollArea.js\";\nimport React from \"react\";\nimport { Heading } from \"~/Heading/index.js\";\nimport { Text } from \"~/Text/index.js\";\nimport { Separator } from \"~/Separator/index.js\";\n\nconst meta: Meta<typeof ScrollArea> = {\n    title: \"Components/ScrollArea\",\n    component: ScrollArea,\n    argTypes: {},\n    decorators: [\n        Story => (\n            <div className=\"w-[700px]\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof ScrollArea>;\n\nconst tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`);\n\nexport const Default: Story = {\n    render: () => {\n        return (\n            <ScrollArea className=\"h-72 w-48 rounded-md border border-neutral-dimmed\">\n                <div className=\"p-4\">\n                    <Heading level={6} className=\"mb-4\">\n                        Tags\n                    </Heading>\n                    {tags.map(tag => (\n                        <div key={tag}>\n                            <Text className=\"text-sm\">{tag}</Text>\n                            <Separator className=\"my-2\" />\n                        </div>\n                    ))}\n                </div>\n            </ScrollArea>\n        );\n    }\n};\n\nexport const HorizontalScrolling: Story = {\n    render: () => {\n        const works = [\n            {\n                artist: \"Ornella Binni\",\n                art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\"\n            },\n            {\n                artist: \"Ornella Binni\",\n                art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\"\n            },\n            {\n                artist: \"Ornella Binni\",\n                art: \"https://images.unsplash.com/photo-1465869185982-5a1a7522cbcb?auto=format&fit=crop&w=300&q=80\"\n            }\n        ];\n\n        return (\n            <ScrollArea className=\"w-96 whitespace-nowrap rounded-md border border-neutral-dimmed\">\n                <div className=\"flex w-max space-x-4 p-4\">\n                    {works.map(artwork => (\n                        <figure key={artwork.artist} className=\"shrink-0\">\n                            <div className=\"overflow-hidden rounded-md\">\n                                <img\n                                    src={artwork.art}\n                                    alt={`Photo by ${artwork.artist}`}\n                                    className=\"aspect-[3/4] h-fit w-fit object-cover\"\n                                    width={300}\n                                    height={400}\n                                />\n                            </div>\n                            <figcaption className=\"pt-2 text-xs text-neutral-strong\">\n                                Photo by{\" \"}\n                                <span className=\"font-semibold text-neutral-primary\">\n                                    {artwork.artist}\n                                </span>\n                            </figcaption>\n                        </figure>\n                    ))}\n                </div>\n                <ScrollBar orientation=\"horizontal\" />\n            </ScrollArea>\n        );\n    }\n};\n\nexport const WithScrollPositionTracking: Story = {\n    render: () => {\n        const [position, setPosition] = React.useState<ScrollPosition | null>(null);\n        const [loadMoreTriggered, setLoadMoreTriggered] = React.useState(false);\n\n        const handleScrollPositionChange = React.useCallback(\n            (pos: ScrollPosition) => {\n                setPosition(pos);\n\n                // Trigger load more when scrolled 90% down.\n                if (pos.top >= 0.9 && !loadMoreTriggered) {\n                    setLoadMoreTriggered(true);\n                    console.log(\"Load more triggered at position:\", pos);\n                } else if (pos.top < 0.9) {\n                    setLoadMoreTriggered(false);\n                }\n            },\n            [loadMoreTriggered]\n        );\n\n        return (\n            <div className=\"space-y-4\">\n                <ScrollArea\n                    className=\"h-72 w-48 rounded-md border border-neutral-dimmed\"\n                    onScrollPositionChange={handleScrollPositionChange}\n                >\n                    <div className=\"p-4\">\n                        <Heading level={6} className=\"mb-4\">\n                            Tags\n                        </Heading>\n                        {tags.map(tag => (\n                            <div key={tag}>\n                                <Text className=\"text-sm\">{tag}</Text>\n                                <Separator className=\"my-2\" />\n                            </div>\n                        ))}\n                    </div>\n                </ScrollArea>\n\n                {position && (\n                    <div className=\"rounded-md border border-neutral-dimmed p-4 space-y-2\">\n                        <Text className=\"font-semibold\">Scroll Position:</Text>\n                        <Text className=\"text-sm\">Top: {(position.top * 100).toFixed(1)}%</Text>\n                        <Text className=\"text-sm\">ScrollTop: {position.scrollTop}px</Text>\n                        <Text className=\"text-sm\">\n                            Load More Triggered: {loadMoreTriggered ? \"Yes\" : \"No\"}\n                        </Text>\n                    </div>\n                )}\n            </div>\n        );\n    }\n};\n"],"mappings":"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","ignoreList":[]}

package/ScrollArea/index.d.ts

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

package/ScrollArea/index.js

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

package/ScrollArea/index.js.map

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

package/Scrollbar/index.d.ts

@@ -1 +1 @@
-export * from "./Scrollbar";
+export * from "./Scrollbar.js";

package/Scrollbar/index.js

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

package/Scrollbar/index.js.map

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

package/SegmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+import type { SegmentedControlPrimitiveProps } from "./primitives/index.js";
+import type { FormComponentProps } from "../FormComponent/index.js";
+type SegmentedControlProps = SegmentedControlPrimitiveProps & FormComponentProps;
+declare const SegmentedControl: (({ label, description, note, hint, required, disabled, validation, ...props }: SegmentedControlProps) => React.JSX.Element) & {
+    original: ({ label, description, note, hint, required, disabled, validation, ...props }: SegmentedControlProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ label, description, note, hint, required, disabled, validation, ...props }: SegmentedControlProps) => React.JSX.Element) & {
+        original: ({ label, description, note, hint, required, disabled, validation, ...props }: SegmentedControlProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ label, description, note, hint, required, disabled, validation, ...props }: SegmentedControlProps) => React.JSX.Element) & {
+        original: ({ label, description, note, hint, required, disabled, validation, ...props }: SegmentedControlProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+};
+export { SegmentedControl, type SegmentedControlProps };

package/{RichTextEditor/RichTextEditor.js → SegmentedControl/SegmentedControl.js}

@@ -1,11 +1,12 @@
 import React, { useMemo } from "react";
-import { makeDecoratable } from "../utils";
-import { RichTextEditorPrimitive } from "./RichTextEditorPrimitive";
-import { FormComponentDescription, FormComponentErrorMessage, FormComponentLabel, FormComponentNote } from "../FormComponent";
-const DecoratableRichTextEditor = ({
+import { makeDecoratable } from "../utils.js";
+import { SegmentedControlPrimitive } from "./primitives/index.js";
+import { FormComponentDescription, FormComponentErrorMessage, FormComponentLabel, FormComponentNote } from "../FormComponent/index.js";
+const DecoratableSegmentedControl = ({
   label,
   description,
   note,
+  hint,
   required,
   disabled,
   validation,
@@ -17,28 +18,30 @@ const DecoratableRichTextEditor = ({
   } = validation || {};
   const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);
   return /*#__PURE__*/React.createElement("div", {
-    className: "wby-w-full"
+    className: "w-full"
   }, /*#__PURE__*/React.createElement(FormComponentLabel, {
     text: label,
+    hint: hint,
     required: required,
     disabled: disabled,
     invalid: invalid
   }), /*#__PURE__*/React.createElement(FormComponentDescription, {
     text: description,
-    disabled: disabled
-  }), /*#__PURE__*/React.createElement(RichTextEditorPrimitive, Object.assign({}, props, {
     disabled: disabled,
-    invalid: invalid
-  })), /*#__PURE__*/React.createElement(FormComponentErrorMessage, {
+    className: "mb-xs-plus"
+  }), /*#__PURE__*/React.createElement(FormComponentErrorMessage, {
     text: validationMessage,
     invalid: invalid,
+    disabled: disabled,
+    className: "mt-none mb-xs-plus"
+  }), /*#__PURE__*/React.createElement(SegmentedControlPrimitive, Object.assign({}, props, {
     disabled: disabled
-  }), /*#__PURE__*/React.createElement(FormComponentNote, {
+  })), /*#__PURE__*/React.createElement(FormComponentNote, {
     text: note,
     disabled: disabled
   }));
 };
-const RichTextEditor = makeDecoratable("RichTextEditor", DecoratableRichTextEditor);
-export { RichTextEditor };
+const SegmentedControl = makeDecoratable("SegmentedControl", DecoratableSegmentedControl);
+export { SegmentedControl };
 
-//# sourceMappingURL=RichTextEditor.js.map
+//# sourceMappingURL=SegmentedControl.js.map

package/SegmentedControl/SegmentedControl.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","makeDecoratable","SegmentedControlPrimitive","FormComponentDescription","FormComponentErrorMessage","FormComponentLabel","FormComponentNote","DecoratableSegmentedControl","label","description","note","hint","required","disabled","validation","props","isValid","validationIsValid","message","validationMessage","invalid","createElement","className","text","Object","assign","SegmentedControl"],"sources":["SegmentedControl.tsx"],"sourcesContent":["import React, { useMemo } from \"react\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport type { SegmentedControlPrimitiveProps } from \"./primitives/index.js\";\nimport { SegmentedControlPrimitive } from \"./primitives/index.js\";\nimport type { FormComponentProps } from \"~/FormComponent/index.js\";\nimport {\n    FormComponentDescription,\n    FormComponentErrorMessage,\n    FormComponentLabel,\n    FormComponentNote\n} from \"~/FormComponent/index.js\";\n\ntype SegmentedControlProps = SegmentedControlPrimitiveProps & FormComponentProps;\n\nconst DecoratableSegmentedControl = ({\n    label,\n    description,\n    note,\n    hint,\n    required,\n    disabled,\n    validation,\n    ...props\n}: SegmentedControlProps) => {\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n    return (\n        <div className=\"w-full\">\n            <FormComponentLabel\n                text={label}\n                hint={hint}\n                required={required}\n                disabled={disabled}\n                invalid={invalid}\n            />\n            <FormComponentDescription\n                text={description}\n                disabled={disabled}\n                className=\"mb-xs-plus\"\n            />\n            <FormComponentErrorMessage\n                text={validationMessage}\n                invalid={invalid}\n                disabled={disabled}\n                className=\"mt-none mb-xs-plus\"\n            />\n            <SegmentedControlPrimitive {...props} disabled={disabled} />\n            <FormComponentNote text={note} disabled={disabled} />\n        </div>\n    );\n};\n\nconst SegmentedControl = makeDecoratable(\"SegmentedControl\", DecoratableSegmentedControl);\n\nexport { SegmentedControl, type SegmentedControlProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,eAAe;AAExB,SAASC,yBAAyB;AAElC,SACIC,wBAAwB,EACxBC,yBAAyB,EACzBC,kBAAkB,EAClBC,iBAAiB;AAKrB,MAAMC,2BAA2B,GAAGA,CAAC;EACjCC,KAAK;EACLC,WAAW;EACXC,IAAI;EACJC,IAAI;EACJC,QAAQ;EACRC,QAAQ;EACRC,UAAU;EACV,GAAGC;AACgB,CAAC,KAAK;EACzB,MAAM;IAAEC,OAAO,EAAEC,iBAAiB;IAAEC,OAAO,EAAEC;EAAkB,CAAC,GAAGL,UAAU,IAAI,CAAC,CAAC;EACnF,MAAMM,OAAO,GAAGpB,OAAO,CAAC,MAAMiB,iBAAiB,KAAK,KAAK,EAAE,CAACA,iBAAiB,CAAC,CAAC;EAE/E,oBACIlB,KAAA,CAAAsB,aAAA;IAAKC,SAAS,EAAC;EAAQ,gBACnBvB,KAAA,CAAAsB,aAAA,CAAChB,kBAAkB;IACfkB,IAAI,EAAEf,KAAM;IACZG,IAAI,EAAEA,IAAK;IACXC,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBO,OAAO,EAAEA;EAAQ,CACpB,CAAC,eACFrB,KAAA,CAAAsB,aAAA,CAAClB,wBAAwB;IACrBoB,IAAI,EAAEd,WAAY;IAClBI,QAAQ,EAAEA,QAAS;IACnBS,SAAS,EAAC;EAAY,CACzB,CAAC,eACFvB,KAAA,CAAAsB,aAAA,CAACjB,yBAAyB;IACtBmB,IAAI,EAAEJ,iBAAkB;IACxBC,OAAO,EAAEA,OAAQ;IACjBP,QAAQ,EAAEA,QAAS;IACnBS,SAAS,EAAC;EAAoB,CACjC,CAAC,eACFvB,KAAA,CAAAsB,aAAA,CAACnB,yBAAyB,EAAAsB,MAAA,CAAAC,MAAA,KAAKV,KAAK;IAAEF,QAAQ,EAAEA;EAAS,EAAE,CAAC,eAC5Dd,KAAA,CAAAsB,aAAA,CAACf,iBAAiB;IAACiB,IAAI,EAAEb,IAAK;IAACG,QAAQ,EAAEA;EAAS,CAAE,CACnD,CAAC;AAEd,CAAC;AAED,MAAMa,gBAAgB,GAAGzB,eAAe,CAAC,kBAAkB,EAAEM,2BAA2B,CAAC;AAEzF,SAASmB,gBAAgB","ignoreList":[]}

package/SegmentedControl/SegmentedControl.mdx

@@ -0,0 +1,123 @@
+import { Canvas, Meta, Controls } from '@storybook/addon-docs/blocks';
+
+import * as SegmentedControlStories from './SegmentedControl.stories';
+
+<Meta of={SegmentedControlStories} />
+
+# SegmentedControl
+
+A segmented control component that allows users to select a single option from a set of mutually exclusive choices. It's visually similar to a button group where the selected item is highlighted. Unlike tabs, it doesn't have associated content panels.
+
+## Features
+
+- **Radio-like behavior**: Only one item can be selected at a time
+- **Visual variants**: Accent (default) and Ghost styles
+- **Icon support**: Optional icons can be added to items
+- **Sizes**: Small and medium sizes available
+- **Form integration**: Works with form labels, descriptions, and validation
+- **Accessibility**: Built with proper ARIA attributes and keyboard navigation
+
+## Basic Usage
+
+```tsx
+import { SegmentedControl } from "@webiny/admin-ui";
+import { useState } from "react";
+
+const MyComponent = () => {
+    const [value, setValue] = useState("option1");
+
+    return (
+        <SegmentedControl
+            items={[
+                { label: "Option 1", value: "option1" },
+                { label: "Option 2", value: "option2" },
+                { label: "Option 3", value: "option3" }
+            ]}
+            value={value}
+            onChange={setValue}
+        />
+    );
+};
+```
+
+## With Icons
+
+```tsx
+import { SegmentedControl } from "@webiny/admin-ui";
+import { Icon } from "@webiny/admin-ui";
+
+<SegmentedControl
+    items={[
+        { label: "Lock", value: "lock", icon: <Icon name="lock" /> },
+        { label: "Unlock", value: "unlock", icon: <Icon name="lock-open" /> },
+        { label: "Settings", value: "settings", icon: <Icon name="settings" /> }
+    ]}
+    value={value}
+    onChange={setValue}
+/>
+```
+
+## Variants
+
+### Accent (Default)
+The accent variant uses the primary color for the selected state.
+
+### Ghost
+The ghost variant is designed for use on dark backgrounds, using a more subtle appearance.
+
+## Form Integration
+
+```tsx
+<SegmentedControl
+    label="Select a plan"
+    description="Choose your subscription plan"
+    required
+    items={plans}
+    value={selectedPlan}
+    onChange={setSelectedPlan}
+    validation={{
+        isValid: false,
+        message: "Please select a plan"
+    }}
+/>
+```
+
+## API
+
+### SegmentedControl Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `items` | `SegmentedControlItemParams[]` | - | Array of items to display |
+| `value` | `string` | - | Currently selected value |
+| `onChange` | `(value: string) => void` | - | Callback when selection changes |
+| `variant` | `"accent" \| "ghost"` | `"accent"` | Visual style variant |
+| `size` | `"sm" \| "md"` | `"md"` | Size of the control |
+| `disabled` | `boolean` | `false` | Disable all items |
+| `className` | `string` | - | Additional CSS class |
+| `label` | `string \| React.ReactNode` | - | Form label |
+| `description` | `string \| React.ReactNode` | - | Form description |
+| `note` | `string \| React.ReactNode` | - | Form note |
+| `required` | `boolean` | - | Show required indicator |
+| `validation` | `object` | - | Validation state and message |
+
+### SegmentedControlItemParams
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `label` | `string \| React.ReactNode` | - | Item label |
+| `value` | `string \| number` | - | Item value |
+| `disabled` | `boolean` | `false` | Disable this specific item |
+| `icon` | `React.ReactNode` | - | Optional icon to display |
+| `id` | `string` | - | Optional custom ID |
+
+## Examples
+
+<Canvas of={SegmentedControlStories.General} />
+<Canvas of={SegmentedControlStories.VariantAccent} />
+<Canvas of={SegmentedControlStories.VariantGhost} />
+<Canvas of={SegmentedControlStories.StatesAccent} />
+<Canvas of={SegmentedControlStories.StatesGhost} />
+<Canvas of={SegmentedControlStories.WithFormComponent} />
+<Canvas of={SegmentedControlStories.Disabled} />
+

package/SegmentedControl/SegmentedControl.stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import { SegmentedControl } from "./SegmentedControl.js";
+declare const meta: Meta<typeof SegmentedControl>;
+export default meta;
+type Story = StoryObj<typeof SegmentedControl>;
+export declare const Default: Story;
+export declare const VariantLight: Story;
+export declare const VariantDimmed: Story;
+export declare const VariantGhost: Story;
+export declare const WithFormComponent: Story;
+export declare const Disabled: Story;

package/SegmentedControl/SegmentedControl.stories.js

@@ -0,0 +1,164 @@
+import React, { useState } from "react";
+import { SegmentedControl } from "./SegmentedControl.js";
+import { Icon } from "../Icon/index.js";
+import { ReactComponent as LockIcon } from "@webiny/icons/notifications.svg";
+const meta = {
+  title: "Components/Form/SegmentedControl",
+  component: SegmentedControl
+};
+export default meta;
+const items = [{
+  label: "Item",
+  value: "item1"
+}, {
+  label: "Item",
+  value: "item2"
+}, {
+  label: "Item",
+  value: "item3"
+}, {
+  label: "Item",
+  value: "item4"
+}];
+const itemsWithIcons = [{
+  label: "Item 1",
+  value: "item1",
+  icon: /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(LockIcon, null),
+    label: "Lock"
+  })
+}, {
+  label: "Item 1",
+  value: "item2",
+  icon: /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(LockIcon, null),
+    label: "Lock"
+  })
+}, {
+  label: "Item 1",
+  value: "item3",
+  icon: /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(LockIcon, null),
+    label: "Lock"
+  })
+}, {
+  label: "Item 1",
+  value: "item4",
+  icon: /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(LockIcon, null),
+    label: "Lock"
+  })
+}];
+export const Default = {
+  render: args => {
+    const [value, setValue] = useState(args.value);
+    return /*#__PURE__*/React.createElement(SegmentedControl, Object.assign({}, args, {
+      value: value,
+      onChange: value => setValue(value)
+    }));
+  },
+  args: {
+    items: itemsWithIcons
+  }
+};
+export const VariantLight = {
+  render: () => {
+    const [value, setValue] = useState("item1");
+    return /*#__PURE__*/React.createElement(SegmentedControl, {
+      items: items,
+      value: value,
+      onChange: setValue,
+      variant: "light"
+    });
+  }
+};
+export const VariantDimmed = {
+  render: () => {
+    const [value, setValue] = useState("item1");
+    return /*#__PURE__*/React.createElement(SegmentedControl, {
+      items: items,
+      value: value,
+      onChange: setValue,
+      variant: "dimmed"
+    });
+  }
+};
+export const VariantGhost = {
+  render: () => {
+    const [value, setValue] = useState("item1");
+    return /*#__PURE__*/React.createElement("div", {
+      className: "p-md rounded-md"
+    }, /*#__PURE__*/React.createElement(SegmentedControl, {
+      items: items,
+      value: value,
+      onChange: setValue,
+      variant: "ghost"
+    }));
+  }
+};
+export const WithFormComponent = {
+  render: () => {
+    const [value, setValue] = useState("item1");
+    return /*#__PURE__*/React.createElement("div", {
+      className: "space-y-lg"
+    }, /*#__PURE__*/React.createElement(SegmentedControl, {
+      label: "Select an option",
+      description: "Choose one of the available options",
+      items: items,
+      value: value,
+      onChange: setValue
+    }), /*#__PURE__*/React.createElement(SegmentedControl, {
+      label: "With error",
+      items: items,
+      value: value,
+      onChange: setValue,
+      validation: {
+        isValid: false,
+        message: "This field is required"
+      }
+    }), /*#__PURE__*/React.createElement(SegmentedControl, {
+      label: "Disabled",
+      items: items,
+      value: value,
+      onChange: setValue,
+      disabled: true
+    }));
+  }
+};
+export const Disabled = {
+  render: () => {
+    const [value, setValue] = useState("item1");
+    return /*#__PURE__*/React.createElement("div", {
+      className: "space-y-md"
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
+      className: "text-lg font-semibold mb-sm"
+    }, "Fully Disabled"), /*#__PURE__*/React.createElement(SegmentedControl, {
+      items: items,
+      value: value,
+      onChange: setValue,
+      disabled: true
+    })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
+      className: "text-lg font-semibold mb-sm"
+    }, "Partially Disabled"), /*#__PURE__*/React.createElement(SegmentedControl, {
+      items: [{
+        label: "Item",
+        value: "item1"
+      }, {
+        label: "Item (disabled)",
+        value: "item2",
+        disabled: true
+      }, {
+        label: "Item",
+        value: "item3"
+      }, {
+        label: "Item (disabled)",
+        value: "item4",
+        disabled: true
+      }],
+      value: value,
+      onChange: setValue
+    })));
+  }
+};
+
+//# sourceMappingURL=SegmentedControl.stories.js.map