@qoretechnologies/reqore 0.19.8 → 0.19.12

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
@@ -31,15 +33,28 @@ jobs:
       - name: Installing modules
         id: install_modules
         run: |
+          yarn cache clean
+          rm -rf node_modules
           yarn install
+      - name: Running tests
+        id: tests
+        run: yarn test:ci
       - 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(