armtek-uikit-react 1.0.56 → 1.0.57

package/assets/ListItem.scss

@@ -27,8 +27,11 @@
   user-select: none;
   cursor: default;
 }
-
-.listitemText__adornment_left{
+.listitem__Content{
+  display: block;
+  margin-right: calc($size-step * 2);
+}
+.listitem__Content_adornment_left{
   margin-left: calc($size-step * 2);
 }
 .listitem_endAdornment{
@@ -39,5 +42,9 @@
 }
 .listitemText{
   display: block;
-  margin-right: calc($size-step * 2);
+}
+.listitem__helper{
+  margin-top: calc($size-step / 2);
+  display: block;
+  color: $color-neutral-light;
 }

package/assets/Table.scss

@@ -0,0 +1,29 @@
+@import "variables";
+
+.table{
+  width: 100%;
+  margin:0;
+  padding:0;
+  background:none;
+  border:none;
+  border-collapse:collapse;
+  border-spacing:0;
+}
+
+.tableCell{
+  color: $color-gray-800;
+  font-size: 14px;
+}
+.tableCellInner{
+  padding: calc($size-step * 2 ) $size-step;
+}
+.tableCell_head{
+  color: $color-gray-500
+}
+.tableRow td{
+  border-bottom: 1px solid $color-gray-300;
+  background: #fff;
+}
+.tableRow:hover td{
+  background: #F8F9FA;
+}

package/package.json

@@ -1 +1 @@
-{"name":"armtek-uikit-react","version":"1.0.56","description":"Armtek UIKit for React","repository":{"type":"git","url":"ssh://git@gl.corp:10022/int/uikit/uikit_react.git"},"author":"","license":"ISC","dependencies":{"build":"^0.1.4","clsx":"^2.0.0","rc-slider":"^10.2.1","react":"*","react-datepicker":"^4.16.0","react-dom":"*"},"peerDependencies":{"react":"*","react-dom":"*"},"scripts":{"pub":"npm version patch && npm publish"}}
+{"name":"armtek-uikit-react","version":"1.0.57","description":"Armtek UIKit for React","repository":{"type":"git","url":"ssh://git@gl.corp:10022/int/uikit/uikit_react.git"},"author":"","license":"ISC","dependencies":{"build":"^0.1.4","clsx":"^2.0.0","rc-slider":"^10.2.1","react":"*","react-datepicker":"^4.16.0","react-dom":"*"},"peerDependencies":{"react":"*","react-dom":"*"},"scripts":{"pub":"npm version patch && npm publish"}}

package/ui/List/ListItem.js

@@ -13,6 +13,7 @@ const ListItem = props => {
   let {
     children,
     className,
+    title,
     active,
     divider,
     checked,
@@ -44,11 +45,17 @@ const ListItem = props => {
           position: 'start',
           children: startAdornment
         })]
-      }), /*#__PURE__*/_jsx("span", {
-        className: clsx(css.listitemText, {
-          [css.listitemText__adornment_left]: withStartAdornment
+      }), /*#__PURE__*/_jsxs("span", {
+        className: clsx(css.listitem__Content, {
+          [css.listitem__content_adornment_left]: withStartAdornment
         }),
-        children: children
+        children: [/*#__PURE__*/_jsx("span", {
+          className: clsx(css.listitemText),
+          children: children
+        }), title && /*#__PURE__*/_jsx("span", {
+          className: css.listitem__helper,
+          children: title
+        })]
       }), !!endAdornment && /*#__PURE__*/_jsx(AdornmentContainer, {
         position: 'end',
         children: /*#__PURE__*/_jsx(Adornment, {

package/ui/Table/Table.d.ts

@@ -0,0 +1,22 @@
+import { ComponentPropsWithoutRef, ReactNode, MouseEvent } from 'react';
+type ItemType = Record<string, any>;
+type ClassesType<T extends ItemType> = {
+    tableRowHead?: string;
+    tableRow?: string | ((item: T) => string);
+    tableCellHead?: string;
+    tableCell?: string;
+};
+export type TableColType<T extends ItemType> = {
+    text: string;
+    getValue?: (item: T) => string | ReactNode | number;
+    getTitle?: () => string | ReactNode | number;
+    code: keyof T;
+};
+type TableProps<T extends ItemType> = Omit<ComponentPropsWithoutRef<'table'>, 'onClick'> & {
+    classes?: ClassesType<T>;
+    structure: TableColType<T>[];
+    items: T[];
+    onClick: (item: T, e: MouseEvent<HTMLTableRowElement>) => void;
+};
+export declare function Table<T extends ItemType>(props: TableProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/ui/Table/Table.js

@@ -0,0 +1,43 @@
+import clsx from 'clsx';
+import { TableRow } from "./TableRow";
+import { TableCell } from "./TableCell";
+import css from "./Table.module.scss";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+// TODO TESTS
+export function Table(props) {
+  const {
+    className,
+    structure,
+    items,
+    onClick,
+    classes,
+    ...tableProps
+  } = props;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsxs("table", {
+      ...tableProps,
+      className: clsx(className, css.table),
+      children: [/*#__PURE__*/_jsx(TableRow, {
+        className: classes == null ? void 0 : classes.tableRowHead,
+        children: structure.map(item => /*#__PURE__*/_jsx(TableCell, {
+          head: true,
+          className: classes == null ? void 0 : classes.tableCellHead,
+          children: item.getTitle ? item.getTitle() : item.text
+        }))
+      }), items.map(row => {
+        let rowClass = !!(classes != null && classes.tableRow) ? typeof classes.tableRow === 'string' ? classes.tableRow : classes.tableRow(row) : '';
+        return /*#__PURE__*/_jsx(TableRow, {
+          className: rowClass,
+          onClick: e => onClick(row, e),
+          children: structure.map(item => {
+            return /*#__PURE__*/_jsx(TableCell, {
+              children: item.getValue ? item.getValue(row) : row[item.code]
+            });
+          })
+        });
+      })]
+    })
+  });
+}

package/ui/Table/Table.module.scss

@@ -0,0 +1 @@
+@import "../../assets/Table";

package/ui/Table/TableCell.d.ts

@@ -0,0 +1,6 @@
+import { ComponentPropsWithoutRef } from 'react';
+type TableCellProps = ComponentPropsWithoutRef<'td'> & {
+    head?: boolean;
+};
+export declare const TableCell: (props: TableCellProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/ui/Table/TableCell.js

@@ -0,0 +1,24 @@
+import clsx from 'clsx';
+import css from "./Table.module.scss";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export const TableCell = props => {
+  const {
+    className,
+    children,
+    head,
+    ...cellProps
+  } = props;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx("td", {
+      ...cellProps,
+      className: clsx(className, css.tableCell, {
+        [css.tableCell_head]: !!head
+      }),
+      children: /*#__PURE__*/_jsx("div", {
+        className: css.tableCellInner,
+        children: children
+      })
+    })
+  });
+};

package/ui/Table/TableRow.d.ts

@@ -0,0 +1,4 @@
+import { ComponentPropsWithoutRef } from 'react';
+type TableRowProps = ComponentPropsWithoutRef<'tr'>;
+export declare const TableRow: (props: TableRowProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/ui/Table/TableRow.js

@@ -0,0 +1,18 @@
+import clsx from 'clsx';
+import css from "./Table.module.scss";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+export const TableRow = props => {
+  const {
+    className,
+    children,
+    ...rowProps
+  } = props;
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx("tr", {
+      ...rowProps,
+      className: clsx(className, css.tableRow),
+      children: children
+    })
+  });
+};

package/ui/Table/index.d.ts

@@ -0,0 +1,3 @@
+export { Table, type TableColType } from './Table';
+export { TableCell } from './TableCell';
+export { TableRow } from './TableRow';

package/ui/Table/index.js

@@ -0,0 +1,3 @@
+export { Table } from "./Table";
+export { TableCell } from "./TableCell";
+export { TableRow } from "./TableRow";