@trackunit/react-components 0.0.36

package/layout/helper/MinTopFullContentLayout.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="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 IMinTopFullContentLayoutProps extends CommonProps {
+    children: React.ReactNode;
+}
+export declare const MinTopFullContentLayout: ({ children, className, dataTestId }: IMinTopFullContentLayoutProps) => 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,19 @@
+/// <reference types="react" />
+/**
+ * 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
+ *
+ */
+interface IProps {
+    children: React.ReactNode;
+}
+export declare const FilterListMapLayout: ({ children }: IProps) => JSX.Element;
+export {};

package/layout/responsive/FullWidthRepeatingLayout.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+/**
+ * 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
+ */
+declare type RowSizing = "Equal" | "MinContent" | "Unmanaged";
+interface IFullWidthRepeatingLayoutProps {
+    children: React.ReactNode;
+    rowSizing?: RowSizing;
+    rowMinHeight?: number;
+    dataTestId?: string;
+    className?: string;
+}
+export declare const FullWidthRepeatingLayout: ({ children, rowSizing, rowMinHeight, dataTestId, className, }: IFullWidthRepeatingLayoutProps) => JSX.Element;
+export {};

package/layout/responsive/GridArea.d.ts

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

package/layout/responsive/IntrinsicallyResponsiveGrid.d.ts

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

package/layout/responsive/TitleNavContentLayout.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface IProps {
+    children: React.ReactNode;
+}
+export declare const TitleNavContentLayout: ({ children }: IProps) => JSX.Element;
+export {};

package/layout/responsive/TwoColumnLayout.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface IProps {
+    children: React.ReactNode;
+}
+export declare const TwoColumnLayout: ({ children }: IProps) => JSX.Element;
+export {};

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@trackunit/react-components",
+  "version": "0.0.36",
+  "repository": "https://github.com/Trackunit/manager",
+  "license": "MIT",
+  "dependencies": {
+    "@trackunit/css-core": "0.0.31",
+    "@trackunit/ui-design-tokens": "0.0.31",
+    "@trackunit/ui-icons": "0.0.31",
+    "@trackunit/tailwind-styled-components": "0.0.31",
+    "echarts": "^5.3.2",
+    "react": "17.0.1",
+    "echarts-for-react": "^3.0.2",
+    "uuid": "^8.3.2",
+    "@react-spring/web": "^9.4.4",
+    "react-use": "^17.3.2",
+    "react-day-picker": "^8.0.3",
+    "date-fns": "^2.28.0",
+    "react-useportal": "^1.0.16",
+    "react-helmet": "^6.1.0",
+    "@popperjs/core": "^2.11.4",
+    "history": "^5.3.0",
+    "react-router-dom": "^6.2.2",
+    "react-select": "^5.2.2",
+    "faker": "^5.5.3"
+  },
+  "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 };