@qoretechnologies/reqore 0.19.9 → 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(