@qoretechnologies/reqore 0.19.7 → 0.19.11

package/.github/workflows/beta_release.yml

@@ -19,6 +19,8 @@ jobs:
     steps:
       # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
       - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
       - uses: actions/setup-node@v1
         with:
           node-version: 14.16.0
@@ -35,11 +37,19 @@ jobs:
       - name: Build
         id: build
         run: ./node_modules/.bin/tsc
-      - name: Publish
-        id: publish
-        run: |
-          ./node_modules/.bin/npm-cli-login -u ${{ secrets.NPM_USER }} -p '${{ secrets.NPM_PASSWORD }}' -e ${{ secrets.NPM_EMAIL }}
-          npm publish --access public --tag beta
+      - name: Publish to NPM
+        id: npm_publish
+        uses: JS-DevTools/npm-publish@v1
+        with:
+          token: ${{ secrets.NPM_TOKEN }}
+          tag: beta
+          access: public
+      - name: Publish to Chromatic
+        id: chromatic_publish
+        uses: chromaui/action@v1
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
       - name: Create a release
         id: release
         uses: actions/create-release@v1

package/.github/workflows/tests.yml

@@ -20,6 +20,8 @@ jobs:
     steps:
       # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
       - uses: actions/checkout@v2
+        with:
+            fetch-depth: 0
       - uses: actions/setup-node@v1
         with:
           node-version: 14.16.0
@@ -38,6 +40,13 @@ jobs:
       - name: Running tests
         id: tests
         run: yarn test:ci
+      - name: Publish to Chromatic
+        id: chromatic_publish
+        uses: chromaui/action@v1
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          exitZeroOnChanges: true
       - name: Slack notification
         uses: Foxhoundn/slack@v1.2.94
         with:

package/.gitpod.yml

@@ -1,17 +1,3 @@
-vscode:
-  extensions:
-    - oderwat.indent-rainbow
-    - tombonnike.vscode-status-bar-format-toggle
-    - usernamehw.errorlens
-    - emmanuelbeziat.vscode-great-icons
-    - esbenp.prettier-vscode
-    - jpoissonnier.vscode-styled-components
-    - streetsidesoftware.code-spell-checker
-    - foxhoundn.synthax
-    - alefragnani.bookmarks
-    - tabnine.tabnine-vscode
-    - akosyakov.gitpod-monitor
-    - eamodio.gitlens
 tasks:
   - init: "yarn install"
   - command: "yarn storybook"

package/.jest-test-results.json

@@ -0,0 +1 @@
+{"numFailedTestSuites":0,"numFailedTests":0,"numPassedTestSuites":2,"numPassedTests":12,"numPendingTestSuites":0,"numPendingTests":0,"numRuntimeErrorTestSuites":0,"numTodoTests":0,"numTotalTestSuites":2,"numTotalTests":12,"openHandles":[],"snapshot":{"added":0,"didUpdate":false,"failure":false,"filesAdded":0,"filesRemoved":0,"filesRemovedList":[],"filesUnmatched":0,"filesUpdated":0,"matched":0,"total":0,"unchecked":0,"uncheckedKeysByFile":[],"unmatched":0,"updated":0},"startTime":1640860411341,"success":true,"testResults":[{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"Renders <Button /> properly","location":null,"status":"passed","title":"Renders <Button /> properly"},{"ancestorTitles":[],"failureMessages":[],"fullName":"Renders <Button /> with size properly","location":null,"status":"passed","title":"Renders <Button /> with size properly"},{"ancestorTitles":[],"failureMessages":[],"fullName":"Renders <Button /> with icon properly","location":null,"status":"passed","title":"Renders <Button /> with icon properly"},{"ancestorTitles":[],"failureMessages":[],"fullName":"Renders <Button /> with intent properly","location":null,"status":"passed","title":"Renders <Button /> with intent properly"},{"ancestorTitles":[],"failureMessages":[],"fullName":"Renders <Button /> with right icon properly","location":null,"status":"passed","title":"Renders <Button /> with right icon properly"},{"ancestorTitles":[],"failureMessages":[],"fullName":"Renders <Button /> with icon and right icon properly","location":null,"status":"passed","title":"Renders <Button /> with icon and right icon properly"},{"ancestorTitles":[],"failureMessages":[],"fullName":"Renders <Button /> with onClick function","location":null,"status":"passed","title":"Renders <Button /> with onClick function"}],"endTime":1640860416953,"message":"","name":"/workspace/reqore/__tests__/button.test.tsx","startTime":1640860412163,"status":"passed","summary":""},{"assertionResults":[{"ancestorTitles":[],"failureMessages":[],"fullName":"Does not render <Drawer /> if not open","location":null,"status":"passed","title":"Does not render <Drawer /> if not open"},{"ancestorTitles":[],"failureMessages":[],"fullName":"Renders opened <Drawer /> properly","location":null,"status":"passed","title":"Renders opened <Drawer /> properly"},{"ancestorTitles":[],"failureMessages":[],"fullName":"Renders hidable <Drawer /> properly","location":null,"status":"passed","title":"Renders hidable <Drawer /> properly"},{"ancestorTitles":[],"failureMessages":[],"fullName":"Renders closable <Drawer /> properly","location":null,"status":"passed","title":"Renders closable <Drawer /> properly"},{"ancestorTitles":[],"failureMessages":[],"fullName":"Renders <Drawer /> with interactive backdrop","location":null,"status":"passed","title":"Renders <Drawer /> with interactive backdrop"}],"endTime":1640860417371,"message":"","name":"/workspace/reqore/__tests__/drawer.test.tsx","startTime":1640860412108,"status":"passed","summary":""}],"wasInterrupted":false}

package/__tests__/button.test.tsx

@@ -1,24 +1,126 @@
-import { render } from "@testing-library/react";
-import React from "react";
-import {
-  ReqoreButton,
-  ReqoreContent,
-  ReqoreLayoutContent,
-  ReqoreUIProvider
-} from "../src";
-
-test("Renders <Button /> properly", () => {
+import { fireEvent, render } from '@testing-library/react';
+import React from 'react';
+import { ReqoreButton, ReqoreContent, ReqoreLayoutContent, ReqoreUIProvider } from '../src';
+
+test('Renders <Button /> properly', () => {
+  render(
+    <ReqoreUIProvider>
+      <ReqoreLayoutContent>
+        <ReqoreContent>
+          <ReqoreButton minimal>Hello</ReqoreButton>
+          <ReqoreButton icon='4KFill'>Another</ReqoreButton>
+        </ReqoreContent>
+      </ReqoreLayoutContent>
+    </ReqoreUIProvider>
+  );
+
+  expect(document.querySelectorAll('.reqore-icon').length).toBe(1);
+  expect(document.querySelectorAll('.reqore-button').length).toBe(2);
+});
+
+test('Renders <Button /> with size properly', () => {
+  render(
+    <ReqoreUIProvider>
+      <ReqoreLayoutContent>
+        <ReqoreContent>
+          <ReqoreButton size='tiny'>Tiny</ReqoreButton>
+          <ReqoreButton size='small'>Small</ReqoreButton>
+          <ReqoreButton size='big'>Big</ReqoreButton>
+          <ReqoreButton size='huge'>Huge</ReqoreButton>
+        </ReqoreContent>
+      </ReqoreLayoutContent>
+    </ReqoreUIProvider>
+  );
+
+  expect(document.querySelectorAll('.reqore-button').length).toBe(4);
+});
+
+test('Renders <Button /> with icon properly', () => {
+  render(
+    <ReqoreUIProvider>
+      <ReqoreLayoutContent>
+        <ReqoreContent>
+          <ReqoreButton icon='4KFill'>4K</ReqoreButton>
+          <ReqoreButton icon='24HoursFill'>24</ReqoreButton>
+          <ReqoreButton icon='BallPenFill'>Pen</ReqoreButton>
+        </ReqoreContent>
+      </ReqoreLayoutContent>
+    </ReqoreUIProvider>
+  );
+
+  expect(document.querySelectorAll('.reqore-icon').length).toBe(3);
+  expect(document.querySelectorAll('.reqore-button').length).toBe(3);
+});
+
+test('Renders <Button /> with intent properly', () => {
   render(
     <ReqoreUIProvider>
       <ReqoreLayoutContent>
         <ReqoreContent>
-            <ReqoreButton minimal>Hello</ReqoreButton>
-            <ReqoreButton icon="4KFill">Another</ReqoreButton>
+          <ReqoreButton intent='pending'>Pending</ReqoreButton>
+          <ReqoreButton intent='info'>Info</ReqoreButton>
+          <ReqoreButton intent='success'>Success</ReqoreButton>
+          <ReqoreButton intent='warning'>Warning</ReqoreButton>
+          <ReqoreButton intent='danger'>Danger</ReqoreButton>
+        </ReqoreContent>
+      </ReqoreLayoutContent>
+    </ReqoreUIProvider>
+  );
+
+  expect(document.querySelectorAll('.reqore-button').length).toBe(5);
+});
+
+test('Renders <Button /> with right icon properly', () => {
+  render(
+    <ReqoreUIProvider>
+      <ReqoreLayoutContent>
+        <ReqoreContent>
+          <ReqoreButton rightIcon='4KFill'>4K</ReqoreButton>
+          <ReqoreButton rightIcon='24HoursFill'>24</ReqoreButton>
+          <ReqoreButton rightIcon='BallPenFill'>Pen</ReqoreButton>
+        </ReqoreContent>
+      </ReqoreLayoutContent>
+    </ReqoreUIProvider>
+  );
+
+  expect(document.querySelectorAll('.reqore-button').length).toBe(3);
+});
+
+test('Renders <Button /> with icon and right icon properly', () => {
+  render(
+    <ReqoreUIProvider>
+      <ReqoreLayoutContent>
+        <ReqoreContent>
+          <ReqoreButton icon='4KFill' rightIcon='24HoursFill'>
+            4K
+          </ReqoreButton>
+          <ReqoreButton icon='24HoursFill' rightIcon='BallPenFill'>
+            24
+          </ReqoreButton>
+          <ReqoreButton icon='BallPenFill' rightIcon='4KFill'>
+            Pen
+          </ReqoreButton>
+        </ReqoreContent>
+      </ReqoreLayoutContent>
+    </ReqoreUIProvider>
+  );
+
+  expect(document.querySelectorAll('.reqore-button').length).toBe(3);
+});
+
+// A test that tests the onClick function of the button using fireEvent
+test('Renders <Button /> with onClick function', () => {
+  const onClick = jest.fn();
+  const { getAllByText } = render(
+    <ReqoreUIProvider>
+      <ReqoreLayoutContent>
+        <ReqoreContent>
+          <ReqoreButton onClick={onClick}>Click</ReqoreButton>
         </ReqoreContent>
       </ReqoreLayoutContent>
     </ReqoreUIProvider>
   );
 
-  expect(document.querySelectorAll(".reqore-icon").length).toBe(1);
-  expect(document.querySelectorAll(".reqore-button").length).toBe(2);
+  fireEvent.click(getAllByText('Click')[0]);
+  expect(onClick).toHaveBeenCalledTimes(1);
 });

package/__tests__/drawer.test.tsx

@@ -1,11 +1,6 @@
 import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
-import {
-  ReqoreContent,
-  ReqoreDrawer,
-  ReqoreLayoutContent,
-  ReqoreUIProvider,
-} from '../src';
+import { ReqoreContent, ReqoreDrawer, ReqoreLayoutContent, ReqoreUIProvider } from '../src';
 
 test('Does not render <Drawer /> if not open', () => {
   render(

package/__tests__/menu.test.tsx

@@ -1,11 +1,6 @@
 import { fireEvent, render } from '@testing-library/react';
 import React from 'react';
-import {
-  ReqoreMenu,
-  ReqoreMenuDivider,
-  ReqoreMenuItem,
-  ReqoreUIProvider,
-} from '../src/index';
+import { ReqoreMenu, ReqoreMenuDivider, ReqoreMenuItem, ReqoreUIProvider } from '../src/index';
 
 test('Renders <Menu /> properly', () => {
   render(
@@ -14,13 +9,14 @@ test('Renders <Menu /> properly', () => {
         <ReqoreMenuItem> Item 1 </ReqoreMenuItem>
         <ReqoreMenuItem> Item 2 </ReqoreMenuItem>
         <ReqoreMenuDivider label='Divider' />
+        <ReqoreMenuItem label={2.5} />
         <ReqoreMenuItem> Item 3 </ReqoreMenuItem>
         <ReqoreMenuItem> Item 4 </ReqoreMenuItem>
       </ReqoreMenu>
     </ReqoreUIProvider>
   );
 
-  expect(document.querySelectorAll('.reqore-menu-item').length).toBe(4);
+  expect(document.querySelectorAll('.reqore-menu-item').length).toBe(5);
   expect(document.querySelectorAll('.reqore-menu-divider').length).toBe(1);
 });
 
@@ -52,11 +48,7 @@ test('<Menu /> item has right clickable button', () => {
     <ReqoreUIProvider>
       <ReqoreMenu>
         <ReqoreMenuItem> Item 1 </ReqoreMenuItem>
-        <ReqoreMenuItem
-          onClick={itemCb}
-          rightIcon='24HoursFill'
-          onRightIconClick={iconCb}
-        >
+        <ReqoreMenuItem onClick={itemCb} rightIcon='24HoursFill' onRightIconClick={iconCb}>
           Item 2
         </ReqoreMenuItem>
         <ReqoreMenuDivider label='Divider' />

package/__tests__/tabs.test.tsx

@@ -1,11 +1,6 @@
 import { act, fireEvent, render, screen } from '@testing-library/react';
 import React, { useState } from 'react';
-import {
-  ReqoreLayoutContent,
-  ReqoreTabs,
-  ReqoreTabsContent,
-  ReqoreUIProvider,
-} from '../src';
+import { ReqoreLayoutContent, ReqoreTabs, ReqoreTabsContent, ReqoreUIProvider } from '../src';
 
 test('Renders full <Tabs /> properly', () => {
   render(
@@ -21,11 +16,11 @@ test('Renders full <Tabs /> properly', () => {
               { label: 'Tab 5', icon: 'Home3Line', id: 'tab5' },
             ]}
           >
-            <ReqoreTabsContent id='tab1'>Tab 1 content</ReqoreTabsContent>
-            <ReqoreTabsContent id='tab2'>Tab 2 content</ReqoreTabsContent>
-            <ReqoreTabsContent id='tab3'>Tab 3 content</ReqoreTabsContent>
-            <ReqoreTabsContent id='tab4'>Tab 4 content</ReqoreTabsContent>
-            <ReqoreTabsContent id='tab5'>Tab 5 content</ReqoreTabsContent>
+            <ReqoreTabsContent tabId='tab1'>Tab 1 content</ReqoreTabsContent>
+            <ReqoreTabsContent tabId='tab2'>Tab 2 content</ReqoreTabsContent>
+            <ReqoreTabsContent tabId='tab3'>Tab 3 content</ReqoreTabsContent>
+            <ReqoreTabsContent tabId='tab4'>Tab 4 content</ReqoreTabsContent>
+            <ReqoreTabsContent tabId='tab5'>Tab 5 content</ReqoreTabsContent>
           </ReqoreTabs>
         </ReqoreLayoutContent>
       </ReqoreUIProvider>
@@ -54,11 +49,11 @@ test('Renders shortened <Tabs /> properly', () => {
               { label: 'Tab 5', icon: 'Home3Line', id: 'tab5' },
             ]}
           >
-            <ReqoreTabsContent id='tab1'>Tab 1 content</ReqoreTabsContent>
-            <ReqoreTabsContent id='tab2'>Tab 2 content</ReqoreTabsContent>
-            <ReqoreTabsContent id='tab3'>Tab 3 content</ReqoreTabsContent>
-            <ReqoreTabsContent id='tab4'>Tab 4 content</ReqoreTabsContent>
-            <ReqoreTabsContent id='tab5'>Tab 5 content</ReqoreTabsContent>
+            <ReqoreTabsContent tabId='tab1'>Tab 1 content</ReqoreTabsContent>
+            <ReqoreTabsContent tabId='tab2'>Tab 2 content</ReqoreTabsContent>
+            <ReqoreTabsContent tabId='tab3'>Tab 3 content</ReqoreTabsContent>
+            <ReqoreTabsContent tabId='tab4'>Tab 4 content</ReqoreTabsContent>
+            <ReqoreTabsContent tabId='tab5'>Tab 5 content</ReqoreTabsContent>
           </ReqoreTabs>
         </ReqoreLayoutContent>
       </ReqoreUIProvider>
@@ -66,10 +61,7 @@ test('Renders shortened <Tabs /> properly', () => {
   });
 
   expect(document.querySelectorAll('.reqore-tabs-list-item').length).toBe(2);
-  expect(
-    document.querySelectorAll('.reqore-tabs-list .reqore-popover-wrapper')
-      .length
-  ).toBe(1);
+  expect(document.querySelectorAll('.reqore-tabs-list .reqore-popover-wrapper').length).toBe(1);
 });
 
 test('Default active tab can be specified', () => {
@@ -87,11 +79,11 @@ test('Default active tab can be specified', () => {
             ]}
             activeTab='tab4'
           >
-            <ReqoreTabsContent id='tab1'>Tab 1 content</ReqoreTabsContent>
-            <ReqoreTabsContent id='tab2'>Tab 2 content</ReqoreTabsContent>
-            <ReqoreTabsContent id='tab3'>Tab 3 content</ReqoreTabsContent>
-            <ReqoreTabsContent id='tab4'>Tab 4 content</ReqoreTabsContent>
-            <ReqoreTabsContent id='tab5'>Tab 5 content</ReqoreTabsContent>
+            <ReqoreTabsContent tabId='tab1'>Tab 1 content</ReqoreTabsContent>
+            <ReqoreTabsContent tabId='tab2'>Tab 2 content</ReqoreTabsContent>
+            <ReqoreTabsContent tabId='tab3'>Tab 3 content</ReqoreTabsContent>
+            <ReqoreTabsContent tabId='tab4'>Tab 4 content</ReqoreTabsContent>
+            <ReqoreTabsContent tabId='tab5'>Tab 5 content</ReqoreTabsContent>
           </ReqoreTabs>
         </ReqoreLayoutContent>
       </ReqoreUIProvider>
@@ -118,11 +110,11 @@ test('Changes tab and runs callback', () => {
             ]}
             onTabChange={cb}
           >
-            <ReqoreTabsContent id='tab1'>Tab 1 content</ReqoreTabsContent>
-            <ReqoreTabsContent id='tab2'>Tab 2 content</ReqoreTabsContent>
-            <ReqoreTabsContent id='tab3'>Tab 3 content</ReqoreTabsContent>
-            <ReqoreTabsContent id='tab4'>Tab 4 content</ReqoreTabsContent>
-            <ReqoreTabsContent id='tab5'>Tab 5 content</ReqoreTabsContent>
+            <ReqoreTabsContent tabId='tab1'>Tab 1 content</ReqoreTabsContent>
+            <ReqoreTabsContent tabId='tab2'>Tab 2 content</ReqoreTabsContent>
+            <ReqoreTabsContent tabId='tab3'>Tab 3 content</ReqoreTabsContent>
+            <ReqoreTabsContent tabId='tab4'>Tab 4 content</ReqoreTabsContent>
+            <ReqoreTabsContent tabId='tab5'>Tab 5 content</ReqoreTabsContent>
           </ReqoreTabs>
         </ReqoreLayoutContent>
       </ReqoreUIProvider>
@@ -133,9 +125,7 @@ test('Changes tab and runs callback', () => {
 
   expect(screen.getByText('Tab 3 content')).toBeTruthy();
   expect(cb).toHaveBeenCalledWith('tab3');
-  expect(
-    document.querySelectorAll('.reqore-tabs-list-item__active').length
-  ).toBe(1);
+  expect(document.querySelectorAll('.reqore-tabs-list-item__active').length).toBe(1);
 });
 
 test('Does not change tab and run callback when disabled', () => {
@@ -155,11 +145,11 @@ test('Does not change tab and run callback when disabled', () => {
             ]}
             onTabChange={cb}
           >
-            <ReqoreTabsContent id='tab1'>Tab 1 content</ReqoreTabsContent>
-            <ReqoreTabsContent id='tab2'>Tab 2 content</ReqoreTabsContent>
-            <ReqoreTabsContent id='tab3'>Tab 3 content</ReqoreTabsContent>
-            <ReqoreTabsContent id='tab4'>Tab 4 content</ReqoreTabsContent>
-            <ReqoreTabsContent id='tab5'>Tab 5 content</ReqoreTabsContent>
+            <ReqoreTabsContent tabId='tab1'>Tab 1 content</ReqoreTabsContent>
+            <ReqoreTabsContent tabId='tab2'>Tab 2 content</ReqoreTabsContent>
+            <ReqoreTabsContent tabId='tab3'>Tab 3 content</ReqoreTabsContent>
+            <ReqoreTabsContent tabId='tab4'>Tab 4 content</ReqoreTabsContent>
+            <ReqoreTabsContent tabId='tab5'>Tab 5 content</ReqoreTabsContent>
           </ReqoreTabs>
         </ReqoreLayoutContent>
       </ReqoreUIProvider>
@@ -170,9 +160,7 @@ test('Does not change tab and run callback when disabled', () => {
 
   expect(screen.getByText('Tab 1 content')).toBeTruthy();
   expect(cb).not.toHaveBeenCalled();
-  expect(
-    document.querySelectorAll('.reqore-tabs-list-item__active').length
-  ).toBe(1);
+  expect(document.querySelectorAll('.reqore-tabs-list-item__active').length).toBe(1);
 });
 
 test('Changes tab programatically and runs callback', () => {
@@ -195,15 +183,13 @@ test('Changes tab programatically and runs callback', () => {
             onTabChange={cb}
             activeTab={activeTab}
           >
-            <ReqoreTabsContent id='tab1'>
-              <button onClick={() => setActiveTab('tab2')}>
-                Change active tab
-              </button>
+            <ReqoreTabsContent tabId='tab1'>
+              <button onClick={() => setActiveTab('tab2')}>Change active tab</button>
             </ReqoreTabsContent>
-            <ReqoreTabsContent id='tab2'>Tab 2 content</ReqoreTabsContent>
-            <ReqoreTabsContent id='tab3'>Tab 3 content</ReqoreTabsContent>
-            <ReqoreTabsContent id='tab4'>Tab 4 content</ReqoreTabsContent>
-            <ReqoreTabsContent id='tab5'>Tab 5 content</ReqoreTabsContent>
+            <ReqoreTabsContent tabId='tab2'>Tab 2 content</ReqoreTabsContent>
+            <ReqoreTabsContent tabId='tab3'>Tab 3 content</ReqoreTabsContent>
+            <ReqoreTabsContent tabId='tab4'>Tab 4 content</ReqoreTabsContent>
+            <ReqoreTabsContent tabId='tab5'>Tab 5 content</ReqoreTabsContent>
           </ReqoreTabs>
         </ReqoreLayoutContent>
       </ReqoreUIProvider>
@@ -242,11 +228,11 @@ test('Closable tab can be closed if not disabled', () => {
             ]}
             onTabChange={cb}
           >
-            <ReqoreTabsContent id='tab1'>Tab 1 content</ReqoreTabsContent>
-            <ReqoreTabsContent id='tab2'>Tab 2 content</ReqoreTabsContent>
-            <ReqoreTabsContent id='tab3'>Tab 3 content</ReqoreTabsContent>
-            <ReqoreTabsContent id='tab4'>Tab 4 content</ReqoreTabsContent>
-            <ReqoreTabsContent id='tab5'>Tab 5 content</ReqoreTabsContent>
+            <ReqoreTabsContent tabId='tab1'>Tab 1 content</ReqoreTabsContent>
+            <ReqoreTabsContent tabId='tab2'>Tab 2 content</ReqoreTabsContent>
+            <ReqoreTabsContent tabId='tab3'>Tab 3 content</ReqoreTabsContent>
+            <ReqoreTabsContent tabId='tab4'>Tab 4 content</ReqoreTabsContent>
+            <ReqoreTabsContent tabId='tab5'>Tab 5 content</ReqoreTabsContent>
           </ReqoreTabs>
         </ReqoreLayoutContent>
       </ReqoreUIProvider>