@trackunit/react-components 0.1.295 → 0.1.297

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.295",
+  "version": "0.1.297",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -27,7 +27,8 @@
     "@tanstack/react-router": "1.19.1",
     "string-ts": "^2.0.0",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/react-table-pagination": "*"
+    "@trackunit/react-table-pagination": "*",
+    "uuid": "^9.0.1"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js"

package/src/components/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import { BreadcrumbContainerProps, BreadcrumbItemRenderProps, BreadcrumbProps } from "./utils/types";
+/**
+ * The breadcrumb component shows a user's location in a website or application. Breadcrumbs are particularly useful when a large amount of content is organized in a hierarchical manner. They streamline navigation, minimize the steps required to revisit previous pages, and offer contextual insights to the users.
+ *
+ * ### When to use
+ * Use breadcrumbs when deep navigation is available, on apps or pages where users might dive into content and could benefit from a quick way to return to higher levels. Breadcrumbs display the current screen as the final item in the list to make it clear where the user is.
+ *
+ * ### When not to use
+ * Do not use on the first hierarchal level, such as a home page or a main page, as there is no previous step the user can get to.
+ * Avoid using breadcrumbs to indicate forthcoming steps. For processes with sequential steps, use a wizard flow instead.
+ *
+ * @param {BreadcrumbProps} props - The props for the Breadcrumb component
+ * @returns {JSX.Element} Breadcrumb component
+ */
+export declare const Breadcrumb: ({ className, dataTestId, breadcrumbItems, back }: BreadcrumbProps) => JSX.Element;
+/**
+ * BreadcrumbContainer is a helper component that renders the breadcrumb items based on the screen size.
+ *
+ * @param {BreadcrumbContainerProps} props - The props for the BreadcrumbContainer component
+ */
+export declare const BreadcrumbContainer: ({ dataTestId, breadcrumbItems }: BreadcrumbContainerProps) => JSX.Element;
+/**
+ * BreadcrumbItem is a helper component that renders the individual breadcrumb item.
+ */
+export declare const BreadcrumbItem: ({ item, dataTestId }: BreadcrumbItemRenderProps) => JSX.Element;

package/src/components/Breadcrumb/Breadcrumb.variant.d.ts

@@ -0,0 +1,7 @@
+export declare const cvaBreadcrumb: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaBreadcrumbItem: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaBreadcrumbForLargeScreen: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+export declare const cvaBreadcrumbForMediumScreen: (props?: ({
+    expanded?: boolean | null | undefined;
+    defaultVariants?: "expanded" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/Breadcrumb/BreadcrumbForLargeScreen.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { BreadcrumbContainerProps } from "./utils/types";
+/**
+ * BreadcrumbForLargeScreen is a helper component that renders the breadcrumb items for large screens.
+ */
+export declare const BreadcrumbForLargeScreen: ({ dataTestId, breadcrumbItems }: BreadcrumbContainerProps) => JSX.Element;

package/src/components/Breadcrumb/BreadcrumbForSmallScreen.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { BreadcrumbContainerProps } from "./utils/types";
+/**
+ * BreadcrumbForSmallScreen is a helper component that renders the breadcrumb items for small screens.
+ */
+export declare const BreadcrumbForSmallScreen: ({ dataTestId, breadcrumbItems }: BreadcrumbContainerProps) => JSX.Element;

package/src/components/Breadcrumb/BreadcumbForMediumScreen.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { BreadcrumbContainerProps } from "./utils/types";
+/**
+ * BreadcrumbForMediumScreen is a helper component that renders the breadcrumb items for medium screens.
+ */
+export declare const BreadcrumbForMediumScreen: ({ dataTestId, breadcrumbItems }: BreadcrumbContainerProps) => JSX.Element;

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

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

package/src/components/Breadcrumb/utils/types.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { CommonProps } from "../../../common";
+export interface BreadcrumbItemProps {
+    label: string;
+    to: string;
+}
+export interface BreadcrumbProps extends CommonProps {
+    breadcrumbItems: BreadcrumbItemProps[];
+    back: () => void;
+}
+export interface BreadcrumbContainerProps extends CommonProps {
+    breadcrumbItems: React.ReactElement<BreadcrumbItemProps>[];
+}
+export interface BreadcrumbItemRenderProps extends CommonProps {
+    item: React.ReactElement<BreadcrumbItemProps>;
+}

package/src/components/Breadcrumb/utils/useBreadcrumbItemsToRender.d.ts

@@ -0,0 +1,5 @@
+import { BreadcrumbItemProps } from "./types";
+/**
+ * useBreadcrumbItemsToRender is a custom hook that takes an array of BreadcrumbItemProps and returns an array of React.ReactElement
+ */
+export declare const useBreadcrumbItemsToRender: (breadcrumbItems: BreadcrumbItemProps[]) => React.ReactElement<BreadcrumbItemProps>[];

package/src/components/VirtualizedList/VirtualizedList.d.ts

@@ -4,12 +4,15 @@ import { RelayPagination } from "@trackunit/react-table-pagination";
 import { CommonProps } from "../../common/CommonProps";
 import { cvaVirtualizedListItem } from "./VirtualizedList.variants";
 type Separator = NonNullable<VariantProps<typeof cvaVirtualizedListItem>["separator"]>;
+type LoadingIndicator = "spinner" | "skeletonLines";
 export interface VirtualizedListProps extends CommonProps {
     count: number;
     rowHeight?: number;
     pagination?: RelayPagination;
     children: (index: number) => JSX.Element;
     separator?: Separator;
+    loadingIndicator?: LoadingIndicator;
+    skeletonLinesHeight?: string;
 }
 /**
  * Render a performant virtualized list of items. Optionally with infinite scrolling.
@@ -19,6 +22,8 @@ export interface VirtualizedListProps extends CommonProps {
  * @property {RelayPagination | undefined} pagination - Pagination configuration for the list.
  * @property {separator} [separator="line"] - The separator style between items in the list.
  * @property {(index: number) => JSX.Element} children - A function that takes an index and returns the JSX element to be rendered at said index.
+ * @property {loadingIndicator} [loadingIndicator="spinner"] - The type of loading indicator in the list.
+ * @property {skeletonLinesHeight} [skeletonLinesHeight="2rem"] - The height of the skeleton lines.
  */
-export declare const VirtualizedList: ({ count, rowHeight, pagination, children, className, dataTestId, separator, }: VirtualizedListProps) => JSX.Element;
+export declare const VirtualizedList: ({ count, rowHeight, pagination, children, className, dataTestId, separator, loadingIndicator, skeletonLinesHeight, }: VirtualizedListProps) => JSX.Element;
 export {};

package/src/components/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./Alert";
 export * from "./Badge";
+export * from "./Breadcrumb/Breadcrumb";
 export * from "./Card";
 export * from "./Collapse";
 export * from "./CopyableText";