@trackunit/react-components 0.1.270 → 0.1.272

package/index.cjs.js

@@ -4,11 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var sharedUtils = require('@trackunit/shared-utils');
 var uiDesignTokens = require('@trackunit/ui-design-tokens');
 var uiIcons = require('@trackunit/ui-icons');
 var IconSpriteMini = require('@trackunit/ui-icons/icons-sprite-mini.svg');
 var IconSpriteOutline = require('@trackunit/ui-icons/icons-sprite-outline.svg');
 var IconSpriteSolid = require('@trackunit/ui-icons/icons-sprite-solid.svg');
+var stringTs = require('string-ts');
 var cssClassVarianceUtilities = require('@trackunit/css-class-variance-utilities');
 var reactUse = require('react-use');
 var reactDayPicker = require('react-day-picker');
@@ -162,8 +164,7 @@ cssClassVarianceUtilities.cvaMerge([
 ]);
 
 const iconPalette = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, uiDesignTokens.intentPalette), uiDesignTokens.generalPalette), uiDesignTokens.criticalityPalette), uiDesignTokens.activityPalette), uiDesignTokens.utilizationPalette), uiDesignTokens.sitesPalette), uiDesignTokens.rentalStatusPalette);
-// eslint-disable-next-line local-rules/no-typescript-assertion
-const iconColorNames = Object.keys(iconPalette).map(key => key.toLowerCase()); // This users the object in the Object.keys() to infer the type of the keys.
+const iconColorNames = sharedUtils.objectKeys(iconPalette).map(key => stringTs.snakeCase(key));
 const isSafari = () => {
     const ua = navigator.userAgent.toLowerCase();
     return ua.includes("safari") && !ua.includes("chrome");
@@ -1907,6 +1908,39 @@ const useModal = ({ closeOnOutsideClick } = {}) => {
     };
 };
 
+const cvaPage = cssClassVarianceUtilities.cvaMerge(["grid", "h-full"], {
+    variants: {
+        layout: {
+            content: ["grid-rows-1"],
+            "header-content": "grid-rows-min-fr",
+            "sidebar-content": ["grid-cols-[360px_minmax(0,1fr)]", "grid-rows-1"],
+            none: [],
+        },
+    },
+    defaultVariants: {
+        layout: "none",
+    },
+});
+const cvaPageContent = cssClassVarianceUtilities.cvaMerge(["overflow-auto", "p-4", "md:p-6", "lg:p-8"]);
+
+/**
+ * Renders the page component. Adds padding and layout to the page.
+ */
+const Page = ({ layout, className, children, dataTestId }) => {
+    return (jsxRuntime.jsx("div", { className: cvaPage({ className, layout }), "data-testid": dataTestId || "page", children: children }));
+};
+
+/**
+ * Renders the content of a page.
+ * Applies padding to content. To be used within a <Page/>
+ *
+ * @param {PageContentProps} props - The component props.
+ * @returns {React.ReactNode} - The rendered component.
+ */
+const PageContent = ({ className, children, dataTestId }) => {
+    return (jsxRuntime.jsx("div", { className: cvaPageContent({ className }), "data-testid": dataTestId || "page-content", children: children }));
+};
+
 const cvaNotice = cssClassVarianceUtilities.cvaMerge(["flex", "items-center"]);
 const cvaNoticeLabel = cssClassVarianceUtilities.cvaMerge(["pl-1", "pr-1", "font-medium", "text-sm"], {
     variants: {
@@ -2247,7 +2281,7 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
         childUniqueIdentifierAttribute: "id",
         threshold: overflowThreshold !== null && overflowThreshold !== void 0 ? overflowThreshold : 0.8,
     });
-    const overflowItemCount = Object.values(itemOverflowMap).filter(isOverflowing => isOverflowing).length;
+    const overflowItemCount = sharedUtils.objectValues(itemOverflowMap).filter(isOverflowing => isOverflowing).length;
     const itemVisibilityClassName = (id) => {
         if (itemOverflowMap[id]) {
             return "invisible";
@@ -3116,6 +3150,8 @@ exports.ModalBackdrop = ModalBackdrop;
 exports.MoreMenu = MoreMenu;
 exports.Notice = Notice;
 exports.PackageNameStoryComponent = PackageNameStoryComponent;
+exports.Page = Page;
+exports.PageContent = PageContent;
 exports.PageHeader = PageHeader;
 exports.Pagination = Pagination;
 exports.Popover = Popover;

package/index.esm.js

@@ -1,11 +1,13 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { useRef, useMemo, useEffect, useState, useCallback, memo, createContext, useContext, forwardRef, isValidElement, cloneElement, Children, useReducer } from 'react';
+import { objectKeys, objectValues } from '@trackunit/shared-utils';
 import { rentalStatusPalette, intentPalette, generalPalette, criticalityPalette, activityPalette, utilizationPalette, sitesPalette, color } from '@trackunit/ui-design-tokens';
 import { iconNames } from '@trackunit/ui-icons';
 import IconSpriteMini from '@trackunit/ui-icons/icons-sprite-mini.svg';
 import IconSpriteOutline from '@trackunit/ui-icons/icons-sprite-outline.svg';
 import IconSpriteSolid from '@trackunit/ui-icons/icons-sprite-solid.svg';
+import { snakeCase } from 'string-ts';
 import { cvaMerge } from '@trackunit/css-class-variance-utilities';
 import { useMeasure, useCopyToClipboard, usePrevious } from 'react-use';
 import { DayPicker as DayPicker$1 } from 'react-day-picker';
@@ -131,8 +133,7 @@ cvaMerge([
 ]);
 
 const iconPalette = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, intentPalette), generalPalette), criticalityPalette), activityPalette), utilizationPalette), sitesPalette), rentalStatusPalette);
-// eslint-disable-next-line local-rules/no-typescript-assertion
-const iconColorNames = Object.keys(iconPalette).map(key => key.toLowerCase()); // This users the object in the Object.keys() to infer the type of the keys.
+const iconColorNames = objectKeys(iconPalette).map(key => snakeCase(key));
 const isSafari = () => {
     const ua = navigator.userAgent.toLowerCase();
     return ua.includes("safari") && !ua.includes("chrome");
@@ -1876,6 +1877,39 @@ const useModal = ({ closeOnOutsideClick } = {}) => {
     };
 };
 
+const cvaPage = cvaMerge(["grid", "h-full"], {
+    variants: {
+        layout: {
+            content: ["grid-rows-1"],
+            "header-content": "grid-rows-min-fr",
+            "sidebar-content": ["grid-cols-[360px_minmax(0,1fr)]", "grid-rows-1"],
+            none: [],
+        },
+    },
+    defaultVariants: {
+        layout: "none",
+    },
+});
+const cvaPageContent = cvaMerge(["overflow-auto", "p-4", "md:p-6", "lg:p-8"]);
+
+/**
+ * Renders the page component. Adds padding and layout to the page.
+ */
+const Page = ({ layout, className, children, dataTestId }) => {
+    return (jsx("div", { className: cvaPage({ className, layout }), "data-testid": dataTestId || "page", children: children }));
+};
+
+/**
+ * Renders the content of a page.
+ * Applies padding to content. To be used within a <Page/>
+ *
+ * @param {PageContentProps} props - The component props.
+ * @returns {React.ReactNode} - The rendered component.
+ */
+const PageContent = ({ className, children, dataTestId }) => {
+    return (jsx("div", { className: cvaPageContent({ className }), "data-testid": dataTestId || "page-content", children: children }));
+};
+
 const cvaNotice = cvaMerge(["flex", "items-center"]);
 const cvaNoticeLabel = cvaMerge(["pl-1", "pr-1", "font-medium", "text-sm"], {
     variants: {
@@ -2216,7 +2250,7 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
         childUniqueIdentifierAttribute: "id",
         threshold: overflowThreshold !== null && overflowThreshold !== void 0 ? overflowThreshold : 0.8,
     });
-    const overflowItemCount = Object.values(itemOverflowMap).filter(isOverflowing => isOverflowing).length;
+    const overflowItemCount = objectValues(itemOverflowMap).filter(isOverflowing => isOverflowing).length;
     const itemVisibilityClassName = (id) => {
         if (itemOverflowMap[id]) {
             return "invisible";
@@ -3060,4 +3094,4 @@ const useVisibilityChange = ({ onChange, targetState = "hidden" }) => {
     }, [onChange, targetState]);
 };
 
-export { Alert, Badge, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CopyableText, DayPicker, DayRangePicker, Drawer, EmptyState, ExternalLink, Heading, Icon, IconButton, Indicator, MenuItem, MenuList, Modal, ModalBackdrop, MoreMenu, Notice, PackageNameStoryComponent, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, Timeline, TimelineElement, Tooltip, ValueBar, WidgetBody, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaIconButton, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContainerProps, useContinuousTimeout, useDebounce, useDevicePixelRatio, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useModal, useOptionallyElevatedState, useOverflowItems, usePopoverContext, usePrompt, useResize, useSelfUpdatingRef, useTimeout, useVisibilityChange };
+export { Alert, Badge, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CopyableText, DayPicker, DayRangePicker, Drawer, EmptyState, ExternalLink, Heading, Icon, IconButton, Indicator, MenuItem, MenuList, Modal, ModalBackdrop, 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, Tooltip, ValueBar, WidgetBody, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaIconButton, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContainerProps, useContinuousTimeout, useDebounce, useDevicePixelRatio, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useModal, useOptionallyElevatedState, useOverflowItems, usePopoverContext, usePrompt, useResize, useSelfUpdatingRef, useTimeout, useVisibilityChange };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.270",
+  "version": "0.1.272",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -23,7 +23,8 @@
     "lodash": "4.17.21",
     "jest-fetch-mock": "^3.0.3",
     "@testing-library/react": "14.0.0",
-    "@floating-ui/react": "^0.26.6"
+    "@floating-ui/react": "^0.26.6",
+    "string-ts": "^2.0.0"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js"

package/src/components/Icon/Icon.d.ts

@@ -205,11 +205,7 @@ export declare const iconPalette: {
         readonly 50: "239 246 255";
         readonly 100: "219 234 254";
         readonly 200: "191 219 254";
-        readonly 300: "147 197 253"; /**
-         * Select if the icon should be rendered as solid or outline.
-         * Default value depends on the Size prop, mini == solid, medium == solid, large == outline.
-         * Trackunit icons might not support both outline and Solid.
-         */
+        readonly 300: "147 197 253";
         readonly 400: "96 165 250";
         readonly 500: "59 130 246";
         readonly 600: "37 99 235";
@@ -221,7 +217,11 @@ export declare const iconPalette: {
         readonly 50: "240 253 244";
         readonly 100: "220 252 231";
         readonly 200: "187 247 208";
-        readonly 300: "134 239 172";
+        readonly 300: "134 239 172"; /**
+         * Custom styles object used to override existing styles or add some extra styling
+         *
+         * @memberof IconProps
+         */
         readonly 400: "74 222 128";
         readonly 500: "34 197 94";
         readonly 600: "22 163 74";

package/src/components/Page/Page.d.ts

@@ -0,0 +1,20 @@
+import { VariantProps } from "@trackunit/css-class-variance-utilities";
+import * as React from "react";
+import { CommonProps } from "../../common";
+import { cvaPage } from "./Page.variants";
+/**
+ * The layout of the page.
+ */
+export type Layout = VariantProps<typeof cvaPage>["layout"];
+/**
+ * The props for the page component.
+ */
+export interface PageProps extends CommonProps {
+    layout: Layout;
+    children?: React.ReactNode;
+    dataTestId?: string;
+}
+/**
+ * Renders the page component. Adds padding and layout to the page.
+ */
+export declare const Page: ({ layout, className, children, dataTestId }: PageProps) => JSX.Element;

package/src/components/Page/Page.variants.d.ts

@@ -0,0 +1,4 @@
+export declare const cvaPage: (props?: ({
+    layout?: "content" | "header-content" | "sidebar-content" | "none" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const cvaPageContent: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

package/src/components/Page/PageContent.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { CommonProps } from "../../common";
+/**
+ * The props for the page content component.
+ */
+interface PageContentProps extends CommonProps {
+    children?: React.ReactNode;
+}
+/**
+ * Renders the content of a page.
+ * Applies padding to content. To be used within a <Page/>
+ *
+ * @param {PageContentProps} props - The component props.
+ * @returns {React.ReactNode} - The rendered component.
+ */
+export declare const PageContent: ({ className, children, dataTestId }: PageContentProps) => JSX.Element;
+export {};

package/src/components/Page/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Page";
+export * from "./PageContent";

package/src/components/index.d.ts

@@ -12,6 +12,7 @@ export * from "./Icon/Icon";
 export * from "./Indicator";
 export * from "./Menu";
 export * from "./Modal";
+export * from "./Page";
 export * from "./Notice";
 export * from "./PageHeader";
 export * from "./Pagination/Pagination";