@qoretechnologies/reqore 0.18.6 → 0.19.3

package/__tests__/table.test.tsx

@@ -1,10 +1,10 @@
-import { fireEvent, render } from "@testing-library/react";
-import React from "react";
-import { ReqoreLayoutContent, ReqoreTable, ReqoreUIProvider } from "../src";
-import { IReqoreTableColumn, IReqoreTableSort } from "../src/components/Table";
-import tableData from "../src/mock/tableData";
+import { fireEvent, render } from '@testing-library/react';
+import React from 'react';
+import { ReqoreLayoutContent, ReqoreTable, ReqoreUIProvider } from '../src';
+import { IReqoreTableColumn, IReqoreTableSort } from '../src/components/Table';
+import tableData from '../src/mock/tableData';
 
-test("Renders basic <Table /> properly", () => {
+test('Renders basic <Table /> properly', () => {
   render(
     <ReqoreUIProvider>
       <ReqoreLayoutContent>
@@ -13,38 +13,38 @@ test("Renders basic <Table /> properly", () => {
     </ReqoreUIProvider>
   );
 
-  expect(document.querySelectorAll(".reqore-table-header-cell").length).toBe(7);
-  expect(document.querySelectorAll(".reqore-table-row").length).toBe(10);
+  expect(document.querySelectorAll('.reqore-table-header-cell').length).toBe(8);
+  expect(document.querySelectorAll('.reqore-table-row').length).toBe(10);
 });
 
-test("Renders <Table /> with grouped columns properly", () => {
+test('Renders <Table /> with grouped columns properly', () => {
   const data = {
     ...tableData,
     columns: [
       {
-        dataId: "id",
-        header: "ID",
+        dataId: 'id',
+        header: 'ID',
         width: 50,
-        align: "center",
+        align: 'center',
       },
       {
-        header: "Name",
-        dataId: "name",
+        header: 'Name',
+        dataId: 'name',
         grow: 3,
         columns: [
-          { dataId: "firstName", header: "First Name", width: 150, grow: 2 },
-          { dataId: "lastName", header: "Last Name", width: 150, grow: 1 },
+          { dataId: 'firstName', header: 'First Name', width: 150, grow: 2 },
+          { dataId: 'lastName', header: 'Last Name', width: 150, grow: 1 },
         ],
       },
-      { dataId: "address", header: "Address", width: 300, grow: 2 },
+      { dataId: 'address', header: 'Address', width: 300, grow: 2 },
       {
-        dataId: "age",
-        header: "Really long age header",
+        dataId: 'age',
+        header: 'Really long age header',
         width: 50,
-        align: "center",
+        align: 'center',
       },
-      { dataId: "occupation", header: "Ocuppation", width: 200 },
-      { dataId: "group", header: "Group", width: 150 },
+      { dataId: 'occupation', header: 'Ocuppation', width: 200 },
+      { dataId: 'group', header: 'Group', width: 150 },
     ] as IReqoreTableColumn[],
   };
 
@@ -56,41 +56,98 @@ test("Renders <Table /> with grouped columns properly", () => {
     </ReqoreUIProvider>
   );
 
-  expect(document.querySelectorAll(".reqore-table-column-group").length).toBe(
-    1
-  );
-  expect(document.querySelectorAll(".reqore-table-header-cell").length).toBe(7);
+  expect(document.querySelectorAll('.reqore-table-column-group').length).toBe(1);
+  expect(document.querySelectorAll('.reqore-table-header-cell').length).toBe(7);
 });
 
-test("Renders <Table /> with custom content", () => {
+test('Renders <Table /> with custom content', () => {
   const data = {
     ...tableData,
     columns: [
       {
-        dataId: "id",
-        header: "ID",
+        dataId: 'id',
+        header: 'ID',
         width: 50,
-        align: "center",
+        align: 'center',
         content: ({ id }) => <span>ID {id}</span>,
       },
       {
-        header: "Name",
-        dataId: "name",
+        header: 'Name',
+        dataId: 'name',
+        grow: 3,
+        columns: [
+          { dataId: 'firstName', header: 'First Name', width: 150, grow: 2 },
+          { dataId: 'lastName', header: 'Last Name', width: 150, grow: 1 },
+        ],
+      },
+      { dataId: 'address', header: 'Address', width: 300, grow: 2 },
+      {
+        dataId: 'age',
+        header: 'Really long age header',
+        width: 50,
+        align: 'center',
+      },
+      { dataId: 'occupation', header: 'Ocuppation', width: 200 },
+      { dataId: 'group', header: 'Group', width: 150 },
+    ] as IReqoreTableColumn[],
+  };
+
+  render(
+    <ReqoreUIProvider>
+      <ReqoreLayoutContent>
+        <ReqoreTable {...data} />
+      </ReqoreLayoutContent>
+    </ReqoreUIProvider>
+  );
+
+  const firstRow = document.querySelector('.reqore-table-row');
+  const idCell = firstRow.querySelector('.reqore-table-cell');
+
+  expect(idCell.textContent).toBe('ID 0');
+});
+
+test('Renders <Table /> with predefined content', () => {
+  const data = {
+    ...tableData,
+    columns: [
+      {
+        dataId: 'id',
+        header: 'ID',
+        width: 50,
+        align: 'center',
+        content: 'tag:info',
+      },
+      {
+        header: 'Name',
+        dataId: 'name',
         grow: 3,
         columns: [
-          { dataId: "firstName", header: "First Name", width: 150, grow: 2 },
-          { dataId: "lastName", header: "Last Name", width: 150, grow: 1 },
+          {
+            dataId: 'firstName',
+            header: 'First Name',
+            width: 150,
+            grow: 2,
+            content: 'tag:#000000',
+          },
+          {
+            dataId: 'lastName',
+            header: 'Last Name',
+            width: 150,
+            grow: 1,
+            content: 'title:success',
+          },
         ],
       },
-      { dataId: "address", header: "Address", width: 300, grow: 2 },
+      { dataId: 'address', header: 'Address', width: 300, grow: 2, content: 'text:warning' },
       {
-        dataId: "age",
-        header: "Really long age header",
+        dataId: 'age',
+        header: 'Really long age header',
         width: 50,
-        align: "center",
+        align: 'center',
       },
-      { dataId: "occupation", header: "Ocuppation", width: 200 },
-      { dataId: "group", header: "Group", width: 150 },
+      { dataId: 'occupation', header: 'Ocuppation', width: 200 },
+      { dataId: 'group', header: 'Group', width: 150 },
+      { dataId: 'date', header: 'Date', content: 'time-ago' },
     ] as IReqoreTableColumn[],
   };
 
@@ -102,39 +159,48 @@ test("Renders <Table /> with custom content", () => {
     </ReqoreUIProvider>
   );
 
-  const firstRow = document.querySelector(".reqore-table-row");
-  const idCell = firstRow.querySelector(".reqore-table-cell");
+  const firstRow = document.querySelector('.reqore-table-row');
+
+  const idCell = firstRow.querySelectorAll('.reqore-table-cell')[0];
+  const firstNameCell = firstRow.querySelectorAll('.reqore-table-cell')[1];
+  const lastNameCell = firstRow.querySelectorAll('.reqore-table-cell')[2];
+  const addressCell = firstRow.querySelectorAll('.reqore-table-cell')[3];
+  const dateCell = firstRow.querySelectorAll('.reqore-table-cell')[7];
 
-  expect(idCell.textContent).toBe("ID 0");
+  expect(idCell.querySelector('.reqore-tag')).toBeTruthy();
+  expect(firstNameCell.querySelector('.reqore-tag')).toBeTruthy();
+  expect(lastNameCell.querySelector('h3')).toBeTruthy();
+  expect(addressCell.querySelector('p.reqore-paragraph-warning')).toBeTruthy();
+  expect(dateCell.textContent).toBe('just now');
 });
 
-test("Sorting on <Table /> works properly", () => {
+test('Sorting on <Table /> works properly', () => {
   const data = {
     ...tableData,
     columns: [
       {
-        dataId: "id",
-        header: "ID",
+        dataId: 'id',
+        header: 'ID',
         width: 50,
-        align: "center",
+        align: 'center',
         sortable: true,
       },
-      { dataId: "firstName", header: "First Name", width: 150 },
-      { dataId: "lastName", header: "Last Name", width: 150 },
-      { dataId: "address", header: "Address", width: 300, grow: 2 },
+      { dataId: 'firstName', header: 'First Name', width: 150 },
+      { dataId: 'lastName', header: 'Last Name', width: 150 },
+      { dataId: 'address', header: 'Address', width: 300, grow: 2 },
       {
-        dataId: "age",
-        header: "Really long age header",
+        dataId: 'age',
+        header: 'Really long age header',
         width: 50,
-        align: "center",
+        align: 'center',
         sortable: true,
       },
-      { dataId: "occupation", header: "Ocuppation", width: 200 },
-      { dataId: "group", header: "Group", width: 150 },
+      { dataId: 'occupation', header: 'Ocuppation', width: 200 },
+      { dataId: 'group', header: 'Group', width: 150 },
     ] as IReqoreTableColumn[],
     sort: {
-      by: "id",
-      direction: "desc",
+      by: 'id',
+      direction: 'desc',
     } as IReqoreTableSort,
   };
 
@@ -148,26 +214,26 @@ test("Sorting on <Table /> works properly", () => {
     </ReqoreUIProvider>
   );
 
-  const firstRow = document.querySelector(".reqore-table-row");
-  const idCell = firstRow.querySelector(".reqore-table-cell");
+  const firstRow = document.querySelector('.reqore-table-row');
+  const idCell = firstRow.querySelector('.reqore-table-cell');
 
-  expect(idCell.textContent).toBe("99");
+  expect(idCell.textContent).toBe('99');
 
-  fireEvent.click(document.querySelectorAll(".reqore-table-header-cell")[4]);
+  fireEvent.click(document.querySelectorAll('.reqore-table-header-cell')[4]);
 
-  const ageCell = firstRow.querySelectorAll(".reqore-table-cell")[4];
+  const ageCell = firstRow.querySelectorAll('.reqore-table-cell')[4];
 
-  expect(fn).toHaveBeenCalledWith({ by: "age", direction: "desc" });
-  expect(ageCell.textContent).toBe("99");
+  expect(fn).toHaveBeenCalledWith({ by: 'age', direction: 'desc' });
+  expect(ageCell.textContent).toBe('99');
 
-  fireEvent.click(document.querySelectorAll(".reqore-table-header-cell")[4]);
+  fireEvent.click(document.querySelectorAll('.reqore-table-header-cell')[4]);
 
-  expect(fn).toHaveBeenLastCalledWith({ by: "age", direction: "asc" });
-  expect(ageCell.textContent).toBe("0");
-  expect(idCell.textContent).toBe("99");
+  expect(fn).toHaveBeenLastCalledWith({ by: 'age', direction: 'asc' });
+  expect(ageCell.textContent).toBe('0');
+  expect(idCell.textContent).toBe('99');
 });
 
-test("Rows on <Table /> can be selected", () => {
+test('Rows on <Table /> can be selected', () => {
   const data = {
     ...tableData,
     selectable: true,
@@ -183,22 +249,22 @@ test("Rows on <Table /> can be selected", () => {
     </ReqoreUIProvider>
   );
 
-  const firstRow = document.querySelector(".reqore-table-row");
-  const firstCheckCell = firstRow.querySelector(".reqore-table-cell");
+  const firstRow = document.querySelector('.reqore-table-row');
+  const firstCheckCell = firstRow.querySelector('.reqore-table-cell');
 
   fireEvent.click(firstCheckCell);
 
-  expect(fn).toHaveBeenCalledWith(["Row-0"]);
+  expect(fn).toHaveBeenCalledWith(['Row-0']);
 
-  const secondRow = document.querySelectorAll(".reqore-table-row")[1];
-  const secondCheckCell = secondRow.querySelector(".reqore-table-cell");
+  const secondRow = document.querySelectorAll('.reqore-table-row')[1];
+  const secondCheckCell = secondRow.querySelector('.reqore-table-cell');
 
   fireEvent.click(secondCheckCell);
 
-  expect(fn).toHaveBeenLastCalledWith(["Row-0", "Row-1"]);
+  expect(fn).toHaveBeenLastCalledWith(['Row-0', 'Row-1']);
 });
 
-test("Rows on <Table /> cannot be selected if _selectId is missing", () => {
+test('Rows on <Table /> cannot be selected if _selectId is missing', () => {
   const data = {
     ...tableData,
     selectable: true,
@@ -214,20 +280,20 @@ test("Rows on <Table /> cannot be selected if _selectId is missing", () => {
     </ReqoreUIProvider>
   );
 
-  const firstRow = document.querySelector(".reqore-table-row");
-  const firstCheckCell = firstRow.querySelector(".reqore-table-cell");
+  const firstRow = document.querySelector('.reqore-table-row');
+  const firstCheckCell = firstRow.querySelector('.reqore-table-cell');
 
   fireEvent.click(firstCheckCell);
 
-  const fourthRow = document.querySelectorAll(".reqore-table-row")[3];
-  const fourthCheckCell = fourthRow.querySelector(".reqore-table-cell");
+  const fourthRow = document.querySelectorAll('.reqore-table-row')[3];
+  const fourthCheckCell = fourthRow.querySelector('.reqore-table-cell');
 
   fireEvent.click(fourthCheckCell);
 
   expect(fn).toHaveBeenCalledTimes(1);
 });
 
-test("Rows on <Table /> are all selected/deselected when clicking on header", () => {
+test('Rows on <Table /> are all selected/deselected when clicking on header', () => {
   const data = {
     ...tableData,
     selectable: true,
@@ -243,8 +309,8 @@ test("Rows on <Table /> are all selected/deselected when clicking on header", ()
     </ReqoreUIProvider>
   );
 
-  const header = document.querySelector(".reqore-table-header-wrapper");
-  const firstHeaderCell = header.querySelector(".reqore-table-header-cell");
+  const header = document.querySelector('.reqore-table-header-wrapper');
+  const firstHeaderCell = header.querySelector('.reqore-table-header-cell');
 
   fireEvent.click(firstHeaderCell);
 
@@ -258,8 +324,8 @@ test("Rows on <Table /> are all selected/deselected when clicking on header", ()
 
   expect(fn).toHaveBeenLastCalledWith([]);
 
-  const firstRow = document.querySelector(".reqore-table-row");
-  const firstCheckCell = firstRow.querySelector(".reqore-table-cell");
+  const firstRow = document.querySelector('.reqore-table-row');
+  const firstCheckCell = firstRow.querySelector('.reqore-table-cell');
 
   fireEvent.click(firstCheckCell);
   fireEvent.click(firstHeaderCell);
@@ -267,38 +333,38 @@ test("Rows on <Table /> are all selected/deselected when clicking on header", ()
   expect(fn).toHaveBeenLastCalledWith(selectableData);
 });
 
-test("Cells on <Table /> are interactive", () => {
+test('Cells on <Table /> are interactive', () => {
   const fn = jest.fn();
   const data = {
     ...tableData,
     columns: [
       {
-        dataId: "id",
-        header: "ID",
+        dataId: 'id',
+        header: 'ID',
         width: 50,
-        align: "center",
+        align: 'center',
         sortable: true,
-        tooltip: "Custom ID tooltip nice",
+        tooltip: 'Custom ID tooltip nice',
         onCellClick: ({ id }) => {
           fn(id);
         },
       },
       {
-        header: "Name",
-        dataId: "name",
+        header: 'Name',
+        dataId: 'name',
         grow: 3,
         columns: [
           {
-            icon: "SlideshowLine",
-            dataId: "firstName",
-            header: "First Name",
+            icon: 'SlideshowLine',
+            dataId: 'firstName',
+            header: 'First Name',
             width: 150,
             grow: 2,
           },
           {
-            icon: "SlideshowLine",
-            dataId: "lastName",
-            header: "Last Name",
+            icon: 'SlideshowLine',
+            dataId: 'lastName',
+            header: 'Last Name',
             width: 150,
             grow: 1,
             sortable: true,
@@ -306,26 +372,26 @@ test("Cells on <Table /> are interactive", () => {
         ],
       },
       {
-        dataId: "address",
-        header: "Address",
+        dataId: 'address',
+        header: 'Address',
         width: 300,
         grow: 2,
-        onClick: () => alert("clicked address"),
+        onClick: () => alert('clicked address'),
       },
       {
-        icon: "User4Line",
-        dataId: "age",
-        header: "Really long age header",
+        icon: 'User4Line',
+        dataId: 'age',
+        header: 'Really long age header',
         width: 50,
-        align: "center",
+        align: 'center',
         sortable: true,
       },
       {
-        header: "Data",
-        dataId: "data",
+        header: 'Data',
+        dataId: 'data',
         columns: [
-          { dataId: "occupation", header: "Ocuppation", width: 200 },
-          { dataId: "group", header: "Group", width: 150 },
+          { dataId: 'occupation', header: 'Ocuppation', width: 200 },
+          { dataId: 'group', header: 'Group', width: 150 },
         ],
       },
     ] as IReqoreTableColumn[],
@@ -339,8 +405,8 @@ test("Cells on <Table /> are interactive", () => {
     </ReqoreUIProvider>
   );
 
-  const firstRow = document.querySelector(".reqore-table-row");
-  const firstCheckCell = firstRow.querySelector(".reqore-table-cell");
+  const firstRow = document.querySelector('.reqore-table-row');
+  const firstCheckCell = firstRow.querySelector('.reqore-table-cell');
 
   fireEvent.click(firstCheckCell);
 

package/__tests__/timeAgo.test.tsx

@@ -0,0 +1,27 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import { ReqoreContent, ReqoreLayoutContent, ReqoreP, ReqoreUIProvider } from '../src';
+import { TimeAgo } from '../src/components/TimeAgo';
+
+test('Renders <TimeAgo /> data properly', () => {
+  render(
+    <ReqoreUIProvider>
+      <ReqoreLayoutContent>
+        <ReqoreContent>
+          <ReqoreP>
+            <TimeAgo time={Date.now()} />
+          </ReqoreP>
+          <ReqoreP>
+            <TimeAgo time='2021-11-29T14:48:35.846576+01:00' />
+          </ReqoreP>
+        </ReqoreContent>
+      </ReqoreLayoutContent>
+    </ReqoreUIProvider>
+  );
+
+  const firstPara = document.querySelectorAll('.reqore-paragraph')[0];
+  const secondPara = document.querySelectorAll('.reqore-paragraph')[1];
+
+  expect(firstPara.textContent).toBe('just now');
+  expect(secondPara.textContent).not.toBe('NaN');
+});

package/dist/components/Button/index.d.ts

@@ -15,8 +15,10 @@ export interface IReqoreButtonProps extends React.HTMLAttributes<HTMLButtonEleme
     intent?: IReqoreIntent;
     active?: boolean;
     flat?: boolean;
+    rightIcon?: IReqoreIconName;
+    color?: string;
 }
-export interface IReqoreButtonStyle extends IReqoreButtonProps {
+export interface IReqoreButtonStyle extends Omit<IReqoreButtonProps, 'intent'> {
     theme: IReqoreTheme;
 }
 export declare const StyledActiveContent: any;

package/dist/components/Button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,KAA6B,MAAM,OAAO,CAAC;AAElD,OAAO,EAKL,MAAM,EACP,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAIpE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC;IACjF,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,kBAAmB,SAAQ,kBAAkB;IAC5D,KAAK,EAAE,YAAY,CAAC;CACrB;AAUD,eAAO,MAAM,mBAAmB,KAM/B,CAAC;AAEF,eAAO,MAAM,qBAAqB,KAIjC,CAAC;AAEF,eAAO,MAAM,sBAAsB,KAGlC,CAAC;AAEF,eAAO,MAAM,YAAY,KA6HxB,CAAC;AAEF,QAAA,MAAM,YAAY,oFA0DjB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,KAAyC,MAAM,OAAO,CAAC;AAE9D,OAAO,EAKL,MAAM,EACP,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAKpE,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC;IACjF,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,kBAAkB,EAAE,QAAQ,CAAC;IAC5E,KAAK,EAAE,YAAY,CAAC;CACrB;AAUD,eAAO,MAAM,mBAAmB,KAM/B,CAAC;AAEF,eAAO,MAAM,qBAAqB,KAIjC,CAAC;AAEF,eAAO,MAAM,sBAAsB,KAGlC,CAAC;AAEF,eAAO,MAAM,YAAY,KAuHxB,CAAC;AAEF,QAAA,MAAM,YAAY,oFAyEjB,CAAC;AAEF,eAAe,YAAY,CAAC"}