@qoretechnologies/reqore 0.19.6 → 0.19.10

package/.github/workflows/beta_release.yml

@@ -35,11 +35,18 @@ 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
+      - uses: JS-DevTools/npm-publish@v1
+        with:
+          token: ${{ secrets.NPM_TOKEN }}
+          tag: beta
+          access: public
+      - name: Publish to Chromatic
+        uses: chromaui/action@v1
+        # Chromatic GitHub Action options
+        with:
+          token: ${{ secrets.GITHUB_TOKEN }}
+          # 👇 Chromatic projectToken, refer to the manage page to obtain it.
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
       - name: Create a release
         id: release
         uses: actions/create-release@v1

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/__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>