test(vitest): update configuration and add ci script

.github/workflows/pr-check.yml

@@ -82,7 +82,7 @@ jobs:
       - name: Install packages ⚙️
         run: npm ci
       - name: Check Tests 🧪
-        run: npm run test
+        run: npm run test:ci
 
   #  lint:
   #    name: Eslint ⬣

package.json

@@ -46,6 +46,7 @@
     "storybook:dev": "storybook dev -p 6006",
     "storybook:serve": "serve storybook-static",
     "test": "vitest",
+    "test:ci": "env CI=true vitest",
     "test:coverage": "vitest --coverage",
     "test:ui": "vitest --ui",
     "test:watch": "vitest --watch",
@@ -76,7 +77,7 @@
     "@storybook/react": "^8.0.10",
     "@storybook/react-vite": "^8.0.10",
     "@storybook/theming": "^8.0.10",
-    "@szum-tech/prettier-config": "^1.3.2",
+    "@szum-tech/prettier-config": "^1.3.4",
     "@szum-tech/semantic-release-preset": "^1.5.6",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/jest-dom": "^6.4.5",

src/components/avatar/avatar.styles.ts

@@ -3,7 +3,7 @@ import { cva } from "class-variance-authority";
 export const avatarCva = cva("relative flex shrink-0 overflow-hidden rounded", {
   variants: {
     size: {
-      sm: "h-6 w-6 text-lg",
+      sm: "text-lg h-6 w-6",
       md: "h-10 w-10 text-xl",
       lg: "h-14 w-14 text-2xl"
     }

src/components/button/Button.styles.ts

@@ -2,9 +2,9 @@ import { cva } from "class-variance-authority";
 
 export const buttonCva = cva(
   [
-    "inline-flex items-center justify-center align-middle no-underline transition-colors ease-in-out duration-300",
-    "font-sans appearance-none select-none rounded-sm border font-medium tracking-[.02857em]",
-    "aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed"
+    "inline-flex items-center justify-center align-middle no-underline transition-colors duration-300 ease-in-out",
+    "font-sans select-none appearance-none rounded-sm border font-medium tracking-[.02857em]",
+    "aria-disabled:pointer-events-none aria-disabled:cursor-not-allowed aria-disabled:opacity-50"
   ],
   {
     variants: {
@@ -81,42 +81,42 @@ export const buttonCva = cva(
       {
         variant: "outlined",
         color: "neutral",
-        class: ["text-gray-100 border-gray-350", "hover:bg-gray-350", "active:bg-gray-400"]
+        class: ["border-gray-350 text-gray-100", "hover:bg-gray-350", "active:bg-gray-400"]
       },
       {
         variant: "outlined",
         color: "primary",
         class: [
-          "text-primary-500 border-primary-500",
+          "border-primary-500 text-primary-500",
           "hover:bg-primary-500 hover:text-white",
-          "active:text-white active:bg-primary-600"
+          "active:bg-primary-600 active:text-white"
         ]
       },
       {
         variant: "outlined",
         color: "success",
         class: [
-          "text-success-500 border-success-500",
+          "border-success-500 text-success-500",
           "hover:bg-success-500 hover:text-white",
-          "active:text-white active:bg-success-600"
+          "active:bg-success-600 active:text-white"
         ]
       },
       {
         variant: "outlined",
         color: "warning",
         class: [
-          "text-warning-500 border-warning-500",
+          "border-warning-500 text-warning-500",
           "hover:bg-warning-500 hover:text-white",
-          "active:text-white active:bg-warning-600"
+          "active:bg-warning-600 active:text-white"
         ]
       },
       {
         variant: "outlined",
         color: "error",
         class: [
-          "text-error-500 border-error-500",
+          "border-error-500 text-error-500",
           "hover:bg-error-500 hover:text-white",
-          "active:text-white active:bg-error-600"
+          "active:bg-error-600 active:text-white"
         ]
       },
 
@@ -125,7 +125,7 @@ export const buttonCva = cva(
         variant: "contained",
         color: "neutral",
         class: [
-          "text-gray-100 border-gray-350 bg-gray-350",
+          "border-gray-350 bg-gray-350 text-gray-100",
           "hover:border-gray-300 hover:bg-gray-300",
           "active:border-gray-400 active:bg-gray-400"
         ]
@@ -232,7 +232,7 @@ export const iconContainerCva = cva("", {
 export const iconCva = cva("", {
   variants: {
     loading: {
-      true: "motion-reduce:hidden animate-spin"
+      true: "animate-spin motion-reduce:hidden"
     },
     size: {
       sm: "h-4.5 w-4.5",

src/components/dialog/content/dialog-content.styles.ts

@@ -2,7 +2,7 @@ import { cva } from "class-variance-authority";
 
 export const dialogContentStyles = cva(
   [
-    "fixed left-1/2 top-1/2 border-gray-400 z-50 flex flex-col w-full -translate-x-1/2 -translate-y-1/2 border bg-foreground p-4 shadow-lg w-full rounded",
+    "fixed left-1/2 top-1/2 z-50 flex w-full w-full -translate-x-1/2 -translate-y-1/2 flex-col rounded border border-gray-400 bg-foreground p-4 shadow-lg",
     "duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]"
   ],
   {

src/components/helper-text/helper-text.styles.ts

@@ -3,8 +3,8 @@ import { cva } from "class-variance-authority";
 export const helperTextCva = cva("", {
   variants: {
     type: {
-      description: "typography-body-2 text-gray-200",
-      error: "typography-caption text-error-500"
+      description: "text-gray-200 typography-body-2",
+      error: "text-error-500 typography-caption"
     }
   },
   defaultVariants: {

src/components/input/input.styles.tsx

@@ -10,8 +10,8 @@ export const inputCva = cva(
   {
     variants: {
       invalid: {
-        true: ["text-error-500 border-error-500 hover:border-error-400 focus:text-gray-100"],
-        false: ["text-gray-100 border-gray-350 hover:border-primary-500"]
+        true: ["border-error-500 text-error-500 hover:border-error-400 focus:text-gray-100"],
+        false: ["border-gray-350 text-gray-100 hover:border-primary-500"]
       },
       withStartIcon: {
         true: "pl-11",

src/components/select/Select.styles.tsx

@@ -2,16 +2,16 @@ import { cva } from "class-variance-authority";
 
 export const selectCva = cva(
   [
-    "h-10 px-3 w-full appearance-none border bg-app-primary py-2 font-poppins outline-0 inline-flex items-center justify-between text-gray-100 typography-body-2 gap-2 transition-colors duration-300 ease-in-out",
+    "inline-flex h-10 w-full appearance-none items-center justify-between gap-2 border bg-app-primary px-3 py-2 font-poppins text-gray-100 outline-0 transition-colors duration-300 ease-in-out typography-body-2",
     "placeholder:select-none placeholder:text-gray-200",
     "invalid:border-error-500 focus:border-primary-400 active:border-primary-400",
     "disabled:border-gray-400 disabled:text-gray-200 disabled:placeholder:text-gray-300"
   ],
   {
     variants: {
       invalid: {
-        true: ["text-error-500 border-error-500 hover:border-error-400 focus:text-gray-100"],
-        false: ["text-gray-100 border-gray-350 hover:border-primary-500"]
+        true: ["border-error-500 text-error-500 hover:border-error-400 focus:text-gray-100"],
+        false: ["border-gray-350 text-gray-100 hover:border-primary-500"]
       }
     },
     defaultVariants: {

src/components/sheet/content/sheet-content.styles.ts

@@ -1,7 +1,7 @@
 import { cva } from "class-variance-authority";
 
 export const sheetContentStyles = cva(
-  "fixed z-50 flex flex-col border-gray-400 bg-foreground p-4 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  "fixed z-50 flex flex-col border-gray-400 bg-foreground p-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
   {
     variants: {
       side: {

src/components/textarea/Textarea.styles.tsx

@@ -10,8 +10,8 @@ export const textareaCva = cva(
   {
     variants: {
       invalid: {
-        true: ["text-error-500 border-error-500", "hover:border-error-400", "focus:text-gray-100"],
-        false: ["text-gray-100 border-gray-350", "hover:border-primary-500"]
+        true: ["border-error-500 text-error-500", "hover:border-error-400", "focus:text-gray-100"],
+        false: ["border-gray-350 text-gray-100", "hover:border-primary-500"]
       }
     },
     defaultVariants: {

vitest.config.ts

@@ -1,12 +1,14 @@
 import { defineConfig } from "vitest/config";
 
+const reporters = process.env.CI ? ["dot", "github-actions"] : ["dot"];
+
 export default defineConfig({
   test: {
     globals: true,
     environment: "happy-dom",
     setupFiles: ["./src/test/setup-test-env.ts"],
+    reporters,
     coverage: {
-      include: ["src/components/**/*.{ts,tsx}"],
       provider: "v8"
     }
   }