@trackunit/react-filter-components 0.0.2

package/README.md

@@ -0,0 +1,22 @@
+> **⚠️ Beta**
+>
+> This is a beta version and subject to change without notice.
+
+# Trackunit React Filter Components
+The `@trackunit/react-filter-components` package is the home of Trackunits public react components used for Filters.
+
+This library is exposed publicly for use in the  the Trackunit [Iris App SDK](https://www.npmjs.com/package/@trackunit/iris-app).  
+
+To browse all avaliable components visit our [Public Storybook](https://developers.trackunit.com/page/ui-components).
+
+For more info and a full guide on Iris App SDK Development, please visit our [Developer Hub](https://developers.trackunit.com/).
+
+## Development
+At this point this library is only developed by Trackunit Employees.  
+For development related information see the [development readme](https://github.com/Trackunit/manager/blob/master/libs/react/components/DEVELOPMENT.md).
+
+## Trackunit
+This package was developed by Trackunit ApS.
+Trackunit is the leading SaaS-based IoT solution for the construction industry, offering an ecosystem of hardware, fleet management software & telematics.
+
+![The Trackunit logo](https://trackunit.com/wp-content/uploads/2022/03/top-logo.svg)

package/index.js

@@ -0,0 +1,139 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Button, MenuList, Popover, MenuItem, Checkbox, Spinner } from '@trackunit/react-components';
+import { twx, tws, tw } from '@trackunit/tailwind-styled-components';
+import React, { useRef } from 'react';
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+/**
+ * The Filter component is the base component used in the manager to filter data.
+ *
+ * - This component in generic and does not have any connection to the data.
+ * - The base props extends button props, and any button props such as prefix and suffix can be used.
+ * - Color and size has special default values in this component, but can be overridden if needed.
+ *
+ * To add items to the popover list use the children prop, this is where you build all the filter items and connected logic.
+ *
+ * @param {FilterProps} props - The props for the Filter component
+ * @returns {JSX.Element} Filter component
+ */
+const Filter = (_a) => {
+    var { title, children, popoverProps, isActive, activeLabel, menuListProps, className, dataTestId, withStickyHeader = false } = _a, rest = __rest(_a, ["title", "children", "popoverProps", "isActive", "activeLabel", "menuListProps", "className", "dataTestId", "withStickyHeader"]);
+    const buttonProps = Object.assign({}, rest);
+    return (jsx(Popover, Object.assign({ dataTestId: `${dataTestId}-popover`, placement: "bottom-start" }, popoverProps, { render: () => (jsx(CustomMenuList, Object.assign({ withStickyHeader: withStickyHeader, dataTestId: `${dataTestId}-menulist` }, menuListProps, { children: children }))) }, { children: jsxs(CustomButton, Object.assign({ color: "tertiary", size: "small", dataTestId: dataTestId }, buttonProps, { "$isActive": isActive, className: className }, { children: [title, " ", isActive && jsx(ActiveLabel, { children: activeLabel })] })) })));
+};
+const CustomButton = twx(Button) `
+  ${({ $isActive }) => ($isActive ? tws `!border-primary-600` : "")}
+`;
+const CustomMenuList = twx(MenuList) `
+  max-h-[50vh]
+  overflow-x-hidden
+  overflow-y-auto
+  relative
+`;
+const ActiveLabel = tw.span `
+  text-primary-600
+`;
+
+/**
+ * The FilterItem component is the base component used in the manager to FilterItem data.
+ * This component in generic and does not have any connection to the data.
+ *
+ * @param {FilterItemProps} props - The props for the FilterItem component
+ * @returns {JSX.Element} FilterItem component
+ */
+const FilterItem = (_a) => {
+    var { itemCount, className, prefix, dataTestId, menuItemProps } = _a, rest = __rest(_a, ["itemCount", "className", "prefix", "dataTestId", "menuItemProps"]);
+    const checkboxProps = Object.assign({}, rest);
+    const checkboxRef = useRef(null);
+    return (jsx(MenuItem, Object.assign({ onClick: e => {
+            var _a;
+            e.preventDefault();
+            (_a = checkboxRef.current) === null || _a === void 0 ? void 0 : _a.click();
+        }, selected: checkboxProps.checked, disabled: checkboxProps.disabled, className: `${className} overflow-hidden`, dataTestId: dataTestId, prefix: prefix }, menuItemProps, { suffix: jsx("small", { children: itemCount }) }, { children: jsx(Checkbox, Object.assign({ ref: checkboxRef }, checkboxProps, { dataTestId: `${dataTestId}-checkbox`, className: "flex-grow cursor-pointer" })) })));
+};
+
+/**
+ * The FilterHeader component is used to display the title of the filter and a reset button.
+ * IT is intended for use in the Filter component.
+ * The reset button will only be visible if the showReset prop is set to true.
+ *
+ * @param {FilterHeaderProps} props - The props for the FilterHeader component
+ * @returns {JSX.Element} FilterHeader component
+ */
+const FilterHeader = (_a) => {
+    var { title, resetLabel, showReset, dataTestId, onReset, loading, children } = _a, rest = __rest(_a, ["title", "resetLabel", "showReset", "dataTestId", "onReset", "loading", "children"]);
+    return (jsxs(Root$1, Object.assign({}, rest, { "data-testid": dataTestId }, { children: [jsxs(HeadingContainer, { children: [jsx("h4", { children: title }), loading ? (jsx(Spinner, { size: "small" })) : (jsx(HiddenButton, Object.assign({ "$isVisible": Boolean(showReset), size: "small", variant: "transparent", color: "danger", onClick: onReset }, { children: resetLabel })))] }), children] })));
+};
+const HeadingContainer = tw.div `
+  flex
+  items-center
+  pl-1
+  justify-between
+  font-medium
+  text-sm
+  text-slate-600
+  uppercase
+`;
+const HiddenButton = twx(Button) `
+  ${props => (props.$isVisible ? tws `visible` : tws `invisible`)}
+`;
+const Root$1 = tw.div `
+  grid
+  gap-1
+  p-1
+`;
+
+/**
+ * The FilterBody component is used to display the title of the filter and a reset button.
+ * IT is intended for use in the Filter component.
+ * The reset button will only be visible if the showReset prop is set to true.
+ *
+ * @param {FilterBodyProps} props - The props for the FilterBody component
+ * @returns {JSX.Element} FilterBody component
+ */
+const FilterBody = React.forwardRef((_a, ref) => {
+    var { children, dataTestId, limitSize = false } = _a, rest = __rest(_a, ["children", "dataTestId", "limitSize"]);
+    return (jsx(Root, Object.assign({ "$limitSize": limitSize, ref: ref }, rest, { "data-testid": dataTestId }, { children: children })));
+});
+const Root = tw.div `
+  grid
+  gap-1
+  p-1
+  rounded
+  ${props => props.$limitSize
+    ? tws `
+          overflow-hidden
+          max-h-80
+          max-w-sm
+          overflow-y-auto
+        `
+    : ""}
+`;
+
+export { Filter, FilterBody, FilterHeader, FilterItem };

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@trackunit/react-filter-components",
+  "version": "0.0.2",
+  "repository": "https://github.com/Trackunit/manager",
+  "license": "SEE LICENSE IN LICENSE.txt",
+  "dependencies": {
+    "@trackunit/react-components": "0.1.24",
+    "react": "18.2.0",
+    "@trackunit/tailwind-styled-components": "0.0.51",
+    "jest-canvas-mock": "2.4.0"
+  },
+  "module": "./index.js",
+  "main": "./index.js",
+  "type": "module",
+  "types": "./src/index.d.ts",
+  "peerDependencies": {}
+}

package/src/Filter/Filter.d.ts

@@ -0,0 +1,50 @@
+/// <reference types="react" />
+import { ButtonProps, MenuListProps, PopoverProps } from "@trackunit/react-components";
+export interface FilterProps extends ButtonProps {
+    /**
+     * The title/name of the filter.
+     */
+    title: string;
+    /**
+     * Used to indicate if the user has any active selection in the filter.
+     */
+    isActive?: boolean;
+    /**
+     * The label that will be displayed when the filter is active.
+     */
+    activeLabel?: string;
+    /**
+     * When enabled the menu list padding will be removed, and a grid will be applied to keep the first column "sticky".
+     * This intended to be used withe the FilterHeader component.
+     *
+     * @default false
+     */
+    withStickyHeader?: boolean;
+    /**
+     * Child elements will be rendered inside the menu list and are only visible when the popover is open.
+     */
+    children: MenuListProps["children"];
+    /**
+     * Can be used to override the pops of the popover.
+     * The render prop cannot be overridden.
+     */
+    popoverProps?: Omit<PopoverProps, "render">;
+    /**
+     * Can be used to override the pops of the MenuList.
+     * The render prop cannot be overridden.
+     */
+    menuListProps?: Omit<MenuListProps, "children">;
+}
+/**
+ * The Filter component is the base component used in the manager to filter data.
+ *
+ * - This component in generic and does not have any connection to the data.
+ * - The base props extends button props, and any button props such as prefix and suffix can be used.
+ * - Color and size has special default values in this component, but can be overridden if needed.
+ *
+ * To add items to the popover list use the children prop, this is where you build all the filter items and connected logic.
+ *
+ * @param {FilterProps} props - The props for the Filter component
+ * @returns {JSX.Element} Filter component
+ */
+export declare const Filter: ({ title, children, popoverProps, isActive, activeLabel, menuListProps, className, dataTestId, withStickyHeader, ...rest }: FilterProps) => JSX.Element;

package/src/FilterBody/FilterBody.d.ts

@@ -0,0 +1,19 @@
+import { CommonProps } from "@trackunit/react-components";
+import React from "react";
+export interface FilterBodyProps extends CommonProps {
+    /**
+     * Children to render in the body of the filter.
+     * This is intended for FilterItems.
+     */
+    children?: React.ReactNode;
+    limitSize?: boolean;
+}
+/**
+ * The FilterBody component is used to display the title of the filter and a reset button.
+ * IT is intended for use in the Filter component.
+ * The reset button will only be visible if the showReset prop is set to true.
+ *
+ * @param {FilterBodyProps} props - The props for the FilterBody component
+ * @returns {JSX.Element} FilterBody component
+ */
+export declare const FilterBody: React.ForwardRefExoticComponent<FilterBodyProps & React.RefAttributes<HTMLDivElement>>;

package/src/FilterHeader/FilterHeader.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import { CommonProps } from "@trackunit/react-components";
+export interface FilterHeaderProps extends CommonProps {
+    /**
+     * The title of the filter will be displayed in the header.
+     */
+    title: string;
+    /**
+     * Used to indicate if the user has any active selection in the filter.
+     */
+    showReset?: boolean;
+    /**
+     * The Label to display on the reset button.
+     */
+    resetLabel?: string;
+    loading?: boolean;
+    /**
+     * The callback that will be called when the user clicks the reset button.
+     */
+    onReset?: () => void;
+    /**
+     * Optional elements to render blow the title and reset button.
+     * This is intended for use with the search component.
+     */
+    children?: React.ReactNode;
+}
+/**
+ * The FilterHeader component is used to display the title of the filter and a reset button.
+ * IT is intended for use in the Filter component.
+ * The reset button will only be visible if the showReset prop is set to true.
+ *
+ * @param {FilterHeaderProps} props - The props for the FilterHeader component
+ * @returns {JSX.Element} FilterHeader component
+ */
+export declare const FilterHeader: ({ title, resetLabel, showReset, dataTestId, onReset, loading, children, ...rest }: FilterHeaderProps) => JSX.Element;

package/src/FilterItem/FilterItem.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import { CheckboxProps, MenuItemProps } from "@trackunit/react-components";
+export interface FilterItemProps extends Omit<CheckboxProps, "prefix" | "suffix"> {
+    /**
+     * The number of results for the filter item.
+     * This displays the number next to the label.
+     */
+    itemCount?: number;
+    /**
+     * An boolean flag to set checkbox to checked state.
+     */
+    checked?: boolean;
+    /**
+     * An boolean flag to set checkbox to disabled state.
+     */
+    disabled?: boolean;
+    /**
+     * Properties to be passed to the MenuItem component.
+     */
+    menuItemProps?: MenuItemProps;
+    prefix?: MenuItemProps["prefix"];
+}
+/**
+ * The FilterItem component is the base component used in the manager to FilterItem data.
+ * This component in generic and does not have any connection to the data.
+ *
+ * @param {FilterItemProps} props - The props for the FilterItem component
+ * @returns {JSX.Element} FilterItem component
+ */
+export declare const FilterItem: ({ itemCount, className, prefix, dataTestId, menuItemProps, ...rest }: FilterItemProps) => JSX.Element;

package/src/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./Filter/Filter";
+export * from "./FilterItem/FilterItem";
+export * from "./FilterHeader/FilterHeader";
+export * from "./FilterBody/FilterBody";