@trackunit/react-components 0.0.1-alpha-59a0a75488.0

package/layout/helper/MinTopFullContentLayout.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from "react";
+import { CommonProps } from "../../common/CommonProps";
+/**
+ * Pass two children. The first will be min-content and the second full height
+ * Useful when toy want the second child to have 100% height and be scrollable
+ * Example: FilterBar + Fleet List
+ */
+interface MinTopFullContentLayoutProps extends CommonProps {
+    children: ReactNode;
+}
+/**
+ * The MinTopFullContentLayout component.
+ *
+ * @param {MinTopFullContentLayoutProps} props - The props for the MinTopFullContentLayout component
+ * @returns {JSX.Element} MinTopFullContentLayout component
+ */
+export declare const MinTopFullContentLayout: ({ children, className, dataTestId }: MinTopFullContentLayoutProps) => JSX.Element;
+export {};

package/layout/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./helper/MinTopFullContentLayout";
+export * from "./responsive/FilterListMapLayout";
+export * from "./responsive/FullWidthRepeatingLayout";
+export * from "./responsive/GridArea";
+export * from "./responsive/IntrinsicallyResponsiveGrid";
+export * from "./responsive/TitleNavContentLayout";
+export * from "./responsive/TwoColumnLayout";

package/layout/responsive/FilterListMapLayout.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+interface FilterListMapLayoutProps {
+    children: React.ReactNode;
+}
+/**
+ * Responsive layout component setting up three grid areas
+ * one for filtering, (result-)list and (result-map)
+ *
+ * List needs to handle its own min size - and map takes up the rest.
+ *
+ * Will be inlined to
+ *  - filter
+ *  - list
+ *  - map
+ * on screens < mediaQuery.xxl
+ *
+ *
+ * @param {FilterListMapLayoutProps} props - The props for the FilterListMapLayout component
+ * @returns {JSX.Element} FilterListMapLayout component
+ */
+export declare const FilterListMapLayout: ({ children }: FilterListMapLayoutProps) => JSX.Element;
+export {};

package/layout/responsive/FullWidthRepeatingLayout.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+declare type RowSizing = "Equal" | "MinContent" | "Unmanaged";
+interface FullWidthRepeatingLayoutProps {
+    children: React.ReactNode;
+    rowSizing?: RowSizing;
+    rowMinHeight?: number;
+    dataTestId?: string;
+    className?: string;
+}
+/**
+ * Layout component with repeating full width areas, default one height fraction each but option to use content height instead
+ * Row min height can optionally be set here or managed by children
+ * Scrolling happens if/when children's a min-height is reached
+ *
+ * @param {FullWidthRepeatingLayoutProps} props - The props for the FullWidthRepeatingLayout component
+ * @returns {JSX.Element} FullWidthRepeatingLayout component
+ */
+export declare const FullWidthRepeatingLayout: ({ children, rowSizing, rowMinHeight, dataTestId, className, }: FullWidthRepeatingLayoutProps) => JSX.Element;
+export {};

package/layout/responsive/GridArea.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { CommonProps } from "../../common/CommonProps";
+export interface GridAreaProps extends CommonProps {
+    area: string;
+    children: React.ReactNode;
+}
+/**
+ * Simply applies a Grid Area to the element
+ *
+ * @param {GridAreaProps} props - The props for the GridArea component
+ * @returns {JSX.Element} GridArea component
+ */
+export declare const GridArea: ({ area, dataTestId, className, children }: GridAreaProps) => JSX.Element;

package/layout/responsive/IntrinsicallyResponsiveGrid.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import { CommonProps } from "../../common/CommonProps";
+declare type ColumnWidth = "xs" | "sm" | "md" | "lg" | "xl";
+declare type Space = "inherit" | "auto" | "none" | "tiny" | "mini" | "small" | "medium" | "large" | "giant" | "enormous";
+declare type Occupation = "auto-fill" | "auto-fit";
+interface IntrinsicallyResponsiveGridProps extends CommonProps {
+    /**
+     * The children to be laid out
+     */
+    children: React.ReactNode;
+    /**
+     * Default "auto-fill" stretch a little, till there's room for another column.
+     * Optionally set "auto-fit" to stretch children to fit entire container width,
+     */
+    occupation?: Occupation;
+    minColumnWidth?: ColumnWidth;
+    /**
+     * The gap size between children
+     */
+    gap?: Space;
+}
+/**
+ * A grid container that has a flexible number of columns.
+ * Adds more columns if constraints allow it, otherwise wraps to next row
+ *
+ * @param {IntrinsicallyResponsiveGridProps} props - The props for the IntrinsicallyResponsiveGrid component
+ * @returns {JSX.Element} IntrinsicallyResponsiveGrid component
+ */
+export declare const IntrinsicallyResponsiveGrid: ({ children, occupation, minColumnWidth, gap, dataTestId, className, }: IntrinsicallyResponsiveGridProps) => JSX.Element;
+export {};

package/layout/responsive/TitleNavContentLayout.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+interface TitleNavContentLayoutProps {
+    children: React.ReactNode;
+}
+/**
+ * The TitleNavContentLayout.
+ *
+ * @param {TitleNavContentLayoutProps} props - The props for the TitleNavContentLayout component
+ * @returns {JSX.Element} TitleNavContentLayout component
+ */
+export declare const TitleNavContentLayout: ({ children }: TitleNavContentLayoutProps) => JSX.Element;
+export {};

package/layout/responsive/TwoColumnLayout.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+interface TwoColumnLayoutProps {
+    children: React.ReactNode;
+}
+/**
+ * TwoColumnLayout.
+ *
+ * @param {TwoColumnLayoutProps} props - The props for the TwoColumnLayout component
+ * @returns {JSX.Element} TwoColumnLayout component
+ */
+export declare const TwoColumnLayout: ({ children }: TwoColumnLayoutProps) => JSX.Element;
+export {};

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@trackunit/react-components",
+  "version": "0.0.1-alpha-59a0a75488.0",
+  "repository": "https://github.com/Trackunit/manager",
+  "license": "SEE LICENSE IN LICENSE.txt",
+  "dependencies": {
+    "@trackunit/css-core": "0.0.1-alpha-59a0a75488.0",
+    "@trackunit/tailwind-styled-components": "0.0.46",
+    "react": "17.0.2",
+    "@trackunit/ui-design-tokens": "0.0.47",
+    "echarts-for-react": "^3.0.2",
+    "echarts": "^5.4.0",
+    "uuid": "^8.3.2",
+    "react-use": "^17.4.0",
+    "date-fns": "^2.29.3",
+    "react-day-picker": "^8.3.0",
+    "@trackunit/ui-icons": "0.0.49",
+    "react-useportal": "1.0.17",
+    "@react-spring/web": "9.5.4",
+    "react-router-dom": "6.4.1",
+    "@popperjs/core": "^2.11.6",
+    "react-helmet": "^6.1.0",
+    "react-select": "^5.4.0",
+    "jest-canvas-mock": "^2.4.0"
+  },
+  "module": "./index.js",
+  "main": "./index.js",
+  "type": "module",
+  "types": "./index.d.ts",
+  "peerDependencies": {}
+}

package/test-config/jest.setup.d.ts

@@ -0,0 +1 @@
+export {};

package/test-utils/hooks.d.ts

@@ -0,0 +1,4 @@
+import { RenderHookOptions } from "@testing-library/react-hooks";
+declare const customRenderHook: <T, K>(callback: (props: T) => K, options?: RenderHookOptions<T> | undefined) => import("@testing-library/react-hooks").RenderHookResult<T, K, import("@testing-library/react-hooks").Renderer<T>>;
+export * from "@testing-library/react-hooks";
+export { customRenderHook as renderHook };

package/test-utils/test-utils.d.ts

@@ -0,0 +1,5 @@
+import { RenderOptions } from "@testing-library/react";
+import * as React from "react";
+declare const customRender: (ui: React.ReactElement, options?: Omit<RenderOptions, "queries">) => import("@testing-library/react").RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement>;
+export * from "@testing-library/react";
+export { customRender as render };