@luscii-healthtech/web-ui 0.4.6 → 0.5.2

package/dist/components/Table/Table.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { PaginationMenuProps } from "../PaginationMenu/PaginationMenu.types";
+import { TableFieldConfig } from "./Table.types";
+export interface TableProps<Item> extends React.HTMLAttributes<HTMLTableElement> {
+    items?: Item[];
+    fieldConfigurations: TableFieldConfig<Item>[];
+    emptyRowsText: string;
+    emptyFieldContentText?: string;
+    isLoading?: boolean;
+    showHeader?: boolean;
+    paginationMenuProps?: PaginationMenuProps;
+    onRowClick?: (item: Item) => void;
+    className?: string;
+}
+export declare function Table<Item>({ items, fieldConfigurations, emptyRowsText, emptyFieldContentText, isLoading, showHeader, paginationMenuProps, onRowClick, className, ...otherAttributes }: TableProps<Item>): JSX.Element;

package/dist/components/Table/Table.types.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import { IconProps } from "../Icons/types/IconProps.type";
+import { TagColorTheme } from "../Tag/Tag";
+export interface TableFieldConfig<Item> {
+    key: string;
+    headerText?: string;
+    content: (item: Item) => TableFieldContent<Item>;
+    onlyShowContentOnHovering?: boolean;
+}
+export declare type TableFieldContent<Item> = TableFieldText | [TableFieldAction<Item>?, TableFieldAction<Item>?];
+export interface TableFieldText {
+    text: string;
+    tag?: {
+        text: string;
+        color: TagColorTheme;
+    };
+}
+export interface TableFieldAction<Item> {
+    key: string;
+    icon: React.FunctionComponent<IconProps>;
+    handleClick: (item: Item) => void;
+}

package/dist/components/Table/Table.utils.d.ts

@@ -0,0 +1,3 @@
+import { TableFieldText, TableFieldAction, TableFieldContent } from "./Table.types";
+export declare function isTableFieldText<Item>(content: TableFieldContent<Item>): content is TableFieldText;
+export declare function isTableFieldAction<Item>(content: TableFieldContent<Item>): content is [TableFieldAction<Item>?, TableFieldAction<Item>?];

package/dist/components/Table/TableBody.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { TableFieldConfig } from "./Table.types";
+export interface TableBody<Item> {
+    items?: Item[];
+    fieldConfigurations: TableFieldConfig<Item>[];
+    emptyItemsText: string;
+    emptyFieldContentText?: string;
+    isLoading: boolean;
+    showEmptyView: boolean;
+    onRowClick?: (item: Item) => void;
+    className?: string;
+}
+export declare function TableBody<Item>(props: TableBody<Item>): JSX.Element;

package/dist/components/Table/TableBodyRow.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { TableFieldConfig } from "./Table.types";
+export interface TableBodyRowProps<Item> {
+    item: Item;
+    fieldConfigurations: TableFieldConfig<Item>[];
+    emptyFieldContentText?: string;
+    onClick?: (item: Item) => void;
+    className?: string;
+}
+export declare function TableBodyRow<Item>(props: TableBodyRowProps<Item>): JSX.Element;

package/dist/components/Table/TableBodyRowDataCell.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { TableFieldConfig } from "./Table.types";
+export interface TableBodyRowDataCellProps<Item> {
+    item: Item;
+    fieldConfig: TableFieldConfig<Item>;
+    emptyFieldContentText?: string;
+}
+export declare function TableBodyRowDataCell<Item>(props: TableBodyRowDataCellProps<Item>): JSX.Element;

package/dist/components/Table/TableFooter.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { PaginationMenuProps } from "../PaginationMenu/PaginationMenu.types";
+interface TableFooterProps {
+    colSpan: number;
+    paginationMenuProps: PaginationMenuProps;
+}
+export declare const TableFooter: (props: TableFooterProps) => JSX.Element;
+export {};

package/dist/components/Table/TableHeader.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { TableFieldConfig } from "./Table.types";
+export interface TableHeaderProps<Item> {
+    fieldConfigurations: TableFieldConfig<Item>[];
+    className?: string;
+}
+export declare function TableHeader<Item>(props: TableHeaderProps<Item>): JSX.Element;

package/dist/index.d.ts

@@ -17,7 +17,8 @@ export { default as InfoBlock } from "./components/InfoBlock/InfoBlock";
 export { InfoField } from "./components/InfoField/InfoField";
 export { INPUT_TYPES, default as Input } from "./components/Input/Input";
 export { default as Line } from "./components/Line/Line";
-export { ListTable, ListTableProps, ListTablePropsConfiguration, ListTablePropsConfigurationField, } from "./components/ListTable/ListTable";
+export { Table, TableProps } from "./components/Table/Table";
+export { TableFieldConfig, TableFieldContent, TableFieldText, TableFieldAction, } from "./components/Table/Table.types";
 export { LoadingIndicator, LoadingIndicatorProps, } from "./components/LoadingIndicator/LoadingIndicator";
 export { default as Menu } from "./components/Menu/Menu";
 export { MultiSelect } from "./components/MultiSelect/MultiSelect";

package/dist/web-ui-tailwind.css

@@ -751,6 +751,12 @@ video {
   background-color: rgba(113, 128, 150, var(--bg-opacity));
 }
 
+.hover\:bg-blue-50:hover {
+  --bg-opacity: 1;
+  background-color: #F2FAFD;
+  background-color: rgba(242, 250, 253, var(--bg-opacity));
+}
+
 .hover\:bg-blue-900:hover {
   --bg-opacity: 1;
   background-color: #045BAA;
@@ -948,6 +954,10 @@ video {
   border-style: solid;
 }
 
+.last\:border-none:last-child {
+  border-style: none;
+}
+
 .border-2 {
   border-width: 2px;
 }
@@ -972,6 +982,10 @@ video {
   border-left-width: 1px;
 }
 
+.last\:border-r:last-child {
+  border-right-width: 1px;
+}
+
 .cursor-default {
   cursor: default;
 }
@@ -988,6 +1002,10 @@ video {
   display: block;
 }
 
+.inline-block {
+  display: inline-block;
+}
+
 .inline {
   display: inline;
 }
@@ -1096,24 +1114,12 @@ video {
   height: 1.5rem;
 }
 
-.h-8 {
-  height: 2rem;
-}
-
 .h-11 {
   height: 2.75rem;
 }
 
-.h-13 {
-  height: 3.25rem;
-}
-
-.h-16 {
-  height: 4rem;
-}
-
-.h-20 {
-  height: 5rem;
+.h-12 {
+  height: 3rem;
 }
 
 .h-56 {
@@ -1164,6 +1170,10 @@ video {
   font-size: 4rem;
 }
 
+.leading-5 {
+  line-height: 1.25rem;
+}
+
 .leading-none {
   line-height: 1;
 }
@@ -1229,6 +1239,10 @@ video {
   margin-left: 0.5rem;
 }
 
+.mt-3 {
+  margin-top: 0.75rem;
+}
+
 .mr-3 {
   margin-right: 0.75rem;
 }
@@ -1285,6 +1299,14 @@ video {
   margin-left: 0.625rem;
 }
 
+.first\:ml-0:first-child {
+  margin-left: 0;
+}
+
+.last\:mr-0:last-child {
+  margin-right: 0;
+}
+
 .max-h-78 {
   max-height: 19.5rem;
 }
@@ -1293,18 +1315,10 @@ video {
   max-height: 100vh;
 }
 
-.max-w-40 {
-  max-width: 10rem;
-}
-
 .max-w-3xl {
   max-width: 48rem;
 }
 
-.max-w-full {
-  max-width: 100%;
-}
-
 .min-w-24 {
   min-width: 1.5rem;
 }
@@ -1329,6 +1343,10 @@ video {
   opacity: 1;
 }
 
+.group:hover .group-hover\:opacity-100 {
+  opacity: 1;
+}
+
 .outline-primary {
   outline: 4px solid rgba(0, 159, 227, 0.3);
   outline-offset: 0;
@@ -1418,6 +1436,11 @@ video {
   padding-right: 1.25rem;
 }
 
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+
 .px-6 {
   padding-left: 1.5rem;
   padding-right: 1.5rem;
@@ -1460,6 +1483,14 @@ video {
   padding-bottom: 5rem;
 }
 
+.first\:pl-6:first-child {
+  padding-left: 1.5rem;
+}
+
+.last\:pr-6:last-child {
+  padding-right: 1.5rem;
+}
+
 .placeholder-gray-500:-ms-input-placeholder {
   --placeholder-opacity: 1;
   color: #a0aec0;
@@ -1572,6 +1603,10 @@ video {
   stroke: currentColor;
 }
 
+.table-auto {
+  table-layout: auto;
+}
+
 .text-left {
   text-align: left;
 }
@@ -1750,10 +1785,6 @@ video {
   text-transform: uppercase;
 }
 
-.capitalize {
-  text-transform: capitalize;
-}
-
 .underline {
   text-decoration: underline;
 }
@@ -1767,6 +1798,10 @@ video {
       user-select: none;
 }
 
+.align-top {
+  vertical-align: top;
+}
+
 .visible {
   visibility: visible;
 }
@@ -1784,6 +1819,10 @@ video {
   overflow-wrap: break-word;
 }
 
+.break-all {
+  word-break: break-all;
+}
+
 .truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1806,20 +1845,16 @@ video {
   width: 1.5rem;
 }
 
-.w-8 {
-  width: 2rem;
-}
-
 .w-11 {
   width: 2.75rem;
 }
 
-.w-24 {
-  width: 6rem;
+.w-12 {
+  width: 3rem;
 }
 
-.w-40 {
-  width: 10rem;
+.w-24 {
+  width: 6rem;
 }
 
 .w-46 {
@@ -1893,6 +1928,10 @@ video {
   transition-property: background-color, border-color, color, fill, stroke;
 }
 
+.transition-opacity {
+  transition-property: opacity;
+}
+
 .ease-in {
   transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
@@ -2054,6 +2093,10 @@ video {
     padding-right: 2rem;
   }
 
+  .lg\:last\:pb-2:last-child {
+    padding-bottom: 0.5rem;
+  }
+
   .lg\:relative {
     position: relative;
   }