@trackunit/react-components 0.1.398 → 0.1.400

package/index.cjs.js

@@ -4277,6 +4277,35 @@ const Pagination = ({ previousPage, nextPage, canPreviousPage, canNextPage, page
                     : page !== undefined && pageCount !== undefined && pageCount !== null && page >= pageCount - 1, icon: jsxRuntime.jsx(Icon, { name: "ChevronRight", size: "small" }), onClick: () => handlePageChange("next"), size: "small", variant: "ghost-neutral" })] }));
 };
 
+const STROKE_WIDTH_THRESHOLD = 32;
+/**
+ *  Draws an svg Polygon from a set of points.
+ *
+ * @param { PolygonProps} props - The props for the  Polygon component
+ * @returns {JSX.Element}  Polygon component
+ */
+const Polygon = ({ points, size, color = "black", opaque = true, className, dataTestId }) => {
+    // Calculate the bounds of the points
+    const minX = Math.min(...points.map(coord => coord[0]));
+    const maxX = Math.max(...points.map(coord => coord[0]));
+    const minY = Math.min(...points.map(coord => coord[1]));
+    const maxY = Math.max(...points.map(coord => coord[1]));
+    const strokeWidth = size >= STROKE_WIDTH_THRESHOLD ? 2 : 1;
+    const sizeToNormalizeAgainst = size - strokeWidth * 2; // because strole is centered, so will be clipped on the outside otherwise
+    // Normalize the points to fit within the viewBox
+    const normalizedPoints = points
+        .map(([x, y]) => `${normalize({ value: x, min: minX, max: maxX, size: sizeToNormalizeAgainst })},${normalize({ value: y, min: minY, max: maxY, size: sizeToNormalizeAgainst })}`)
+        .join(" ");
+    return (jsxRuntime.jsx("svg", { className: className, "data-testid": dataTestId, height: size, style: { width: `${size}px`, height: `${size}px` }, viewBox: `0 0 ${size} ${size}`, width: size, xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("polygon", { points: normalizedPoints, style: {
+                fill: color,
+                fillOpacity: opaque ? 0.2 : undefined,
+                stroke: color,
+                strokeOpacity: opaque ? 0.8 : undefined,
+                strokeWidth,
+            }, transform: `translate(${strokeWidth}, ${strokeWidth})` }) }));
+};
+const normalize = ({ value, min, max, size }) => ((value - min) / (max - min)) * size;
+
 function useConfirmExit(confirmExit, when = true) {
     reactRouter.useBlocker(confirmExit, when);
 }
@@ -4892,6 +4921,7 @@ exports.Page = Page;
 exports.PageContent = PageContent;
 exports.PageHeader = PageHeader;
 exports.Pagination = Pagination;
+exports.Polygon = Polygon;
 exports.Popover = Popover;
 exports.PopoverContent = PopoverContent;
 exports.PopoverTitle = PopoverTitle;

package/index.esm.js

@@ -4257,6 +4257,35 @@ const Pagination = ({ previousPage, nextPage, canPreviousPage, canNextPage, page
                     : page !== undefined && pageCount !== undefined && pageCount !== null && page >= pageCount - 1, icon: jsx(Icon, { name: "ChevronRight", size: "small" }), onClick: () => handlePageChange("next"), size: "small", variant: "ghost-neutral" })] }));
 };
 
+const STROKE_WIDTH_THRESHOLD = 32;
+/**
+ *  Draws an svg Polygon from a set of points.
+ *
+ * @param { PolygonProps} props - The props for the  Polygon component
+ * @returns {JSX.Element}  Polygon component
+ */
+const Polygon = ({ points, size, color = "black", opaque = true, className, dataTestId }) => {
+    // Calculate the bounds of the points
+    const minX = Math.min(...points.map(coord => coord[0]));
+    const maxX = Math.max(...points.map(coord => coord[0]));
+    const minY = Math.min(...points.map(coord => coord[1]));
+    const maxY = Math.max(...points.map(coord => coord[1]));
+    const strokeWidth = size >= STROKE_WIDTH_THRESHOLD ? 2 : 1;
+    const sizeToNormalizeAgainst = size - strokeWidth * 2; // because strole is centered, so will be clipped on the outside otherwise
+    // Normalize the points to fit within the viewBox
+    const normalizedPoints = points
+        .map(([x, y]) => `${normalize({ value: x, min: minX, max: maxX, size: sizeToNormalizeAgainst })},${normalize({ value: y, min: minY, max: maxY, size: sizeToNormalizeAgainst })}`)
+        .join(" ");
+    return (jsx("svg", { className: className, "data-testid": dataTestId, height: size, style: { width: `${size}px`, height: `${size}px` }, viewBox: `0 0 ${size} ${size}`, width: size, xmlns: "http://www.w3.org/2000/svg", children: jsx("polygon", { points: normalizedPoints, style: {
+                fill: color,
+                fillOpacity: opaque ? 0.2 : undefined,
+                stroke: color,
+                strokeOpacity: opaque ? 0.8 : undefined,
+                strokeWidth,
+            }, transform: `translate(${strokeWidth}, ${strokeWidth})` }) }));
+};
+const normalize = ({ value, min, max, size }) => ((value - min) / (max - min)) * size;
+
 function useConfirmExit(confirmExit, when = true) {
     useBlocker(confirmExit, when);
 }
@@ -4841,4 +4870,4 @@ const cvaClickable = cvaMerge([
     },
 });
 
-export { Alert, Badge, Breadcrumb, BreadcrumbContainer, BreadcrumbItem, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, Drawer, EmptyState, EmptyValue, ExternalLink, Heading, Icon, IconButton, Indicator, KPICard, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, Timeline, TimelineElement, ToggleGroup, Tooltip, ValueBar, VirtualizedList, WidgetBody, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaIconButton, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInteractableItem, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContainerProps, useContinuousTimeout, useDebounce, useDevicePixelRatio, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useOptionallyElevatedState, useOverflowItems, usePopoverContext, usePrompt, useResize, useSelfUpdatingRef, useTimeout, useWindowActivity };
+export { Alert, Badge, Breadcrumb, BreadcrumbContainer, BreadcrumbItem, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, Drawer, EmptyState, EmptyValue, ExternalLink, Heading, Icon, IconButton, Indicator, KPICard, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, Pagination, Polygon, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, Timeline, TimelineElement, ToggleGroup, Tooltip, ValueBar, VirtualizedList, WidgetBody, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaIconButton, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaInteractableItem, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemStyle, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContainerProps, useContinuousTimeout, useDebounce, useDevicePixelRatio, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useOptionallyElevatedState, useOverflowItems, usePopoverContext, usePrompt, useResize, useSelfUpdatingRef, useTimeout, useWindowActivity };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.398",
+  "version": "0.1.400",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {

package/src/components/Polygon/Polygon.d.ts

@@ -0,0 +1,16 @@
+import { CommonProps } from "../../common/CommonProps";
+type Point = [number, number];
+export interface PolygonProps extends CommonProps {
+    points: Point[];
+    size: number;
+    color?: "white" | "black";
+    opaque?: boolean;
+}
+/**
+ *  Draws an svg Polygon from a set of points.
+ *
+ * @param { PolygonProps} props - The props for the  Polygon component
+ * @returns {JSX.Element}  Polygon component
+ */
+export declare const Polygon: ({ points, size, color, opaque, className, dataTestId }: PolygonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/src/components/index.d.ts

@@ -1,6 +1,7 @@
 export * from "./Alert";
 export * from "./Badge";
 export * from "./Breadcrumb/Breadcrumb";
+export * from "./buttons";
 export * from "./Card";
 export * from "./Collapse";
 export * from "./CompletionStatusIndicator/CompletionStatusIndicator";
@@ -18,6 +19,7 @@ export * from "./Notice";
 export * from "./Page";
 export * from "./PageHeader";
 export * from "./Pagination/Pagination";
+export * from "./Polygon/Polygon";
 export * from "./Popover";
 export * from "./Popover/Popover";
 export * from "./Prompt";
@@ -39,4 +41,3 @@ export * from "./Tooltip";
 export * from "./ValueBar";
 export * from "./VirtualizedList/VirtualizedList";
 export * from "./Widget";
-export * from "./buttons";