@pautena/react-design-system 0.4.2 → 0.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pautena/react-design-system",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "My custom design system on top of MUI",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -29,81 +29,86 @@
   "author": "Pau Tena Vidal",
   "license": "MIT",
   "dependencies": {
-    "@emotion/react": "^11.9.3",
-    "@emotion/styled": "^11.9.3",
-    "@mui/icons-material": "^5.8.4",
-    "@mui/lab": "^5.0.0-alpha.90",
-    "@mui/material": "^5.9.0",
-    "@mui/x-data-grid": "^5.13.0",
-    "@mui/x-date-pickers": "^5.0.0-beta.7",
-    "date-fns": "^2.29.2",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@emotion/utils": "^1.2.0",
+    "@mui/icons-material": "^5.11.9",
+    "@mui/lab": "^5.0.0-alpha.120",
+    "@mui/material": "^5.11.10",
+    "@mui/x-data-grid": "^5.17.24",
+    "@mui/x-date-pickers": "^5.0.19",
+    "date-fns": "^2.29.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.3.0"
+    "react-router-dom": "^6.8.1"
   },
   "devDependencies": {
-    "@date-io/date-fns": "^2.15.0",
-    "@babel/core": "^7.18.6",
-    "@babel/preset-env": "^7.18.6",
+    "@babel/core": "^7.21.0",
+    "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
-    "@faker-js/faker": "^7.3.0",
-    "@mui/x-data-grid-generator": "^5.13.0",
-    "@rollup/plugin-alias": "^3.1.9",
-    "@rollup/plugin-commonjs": "^22.0.1",
-    "@rollup/plugin-node-resolve": "^13.3.0",
-    "@rollup/plugin-typescript": "^8.3.3",
-    "@storybook/addon-actions": "^6.5.9",
-    "@storybook/addon-essentials": "^6.5.9",
-    "@storybook/addon-interactions": "^6.5.9",
+    "@babel/preset-typescript": "^7.21.0",
+    "@date-io/date-fns": "^2.16.0",
+    "@faker-js/faker": "^7.6.0",
+    "@mui/x-data-grid-generator": "^5.17.24",
+    "@rollup/plugin-alias": "^4.0.3",
+    "@rollup/plugin-commonjs": "^24.0.1",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-typescript": "^11.0.0",
+    "@storybook/addon-actions": "^6.5.16",
+    "@storybook/addon-essentials": "^6.5.16",
+    "@storybook/addon-interactions": "^6.5.16",
     "@storybook/addon-knobs": "^6.4.0",
-    "@storybook/addon-links": "^6.5.9",
-    "@storybook/builder-webpack4": "^6.5.9",
-    "@storybook/manager-webpack4": "^6.5.9",
-    "@storybook/react": "^6.5.9",
+    "@storybook/addon-links": "^6.5.16",
+    "@storybook/builder-webpack4": "^6.5.16",
+    "@storybook/manager-webpack4": "^6.5.16",
+    "@storybook/react": "^6.5.16",
     "@storybook/testing-library": "^0.0.13",
     "@storybook/testing-react": "^1.3.0",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.3.0",
-    "@types/jest": "^28.1.5",
-    "@types/ramda": "^0.28.15",
-    "@types/react": "^18.0.15",
-    "@typescript-eslint/eslint-plugin": "^5.30.6",
-    "@typescript-eslint/parser": "^5.30.6",
-    "babel-jest": "^28.1.3",
-    "babel-loader": "^8.2.5",
-    "babel-plugin-module-resolver": "^4.1.0",
-    "eslint": "^8.19.0",
-    "eslint-config-prettier": "^8.5.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.0.0",
+    "@types/jest": "^29.4.0",
+    "@types/ramda": "^0.28.23",
+    "@types/react": "^18.0.28",
+    "@typescript-eslint/eslint-plugin": "^5.53.0",
+    "@typescript-eslint/parser": "^5.53.0",
+    "babel-jest": "^29.4.3",
+    "babel-loader": "^9.1.2",
+    "babel-plugin-module-resolver": "^5.0.0",
+    "eslint": "^8.34.0",
+    "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.30.1",
-    "gh-pages": "^4.0.0",
-    "husky": "^8.0.1",
-    "jest": "^28.1.3",
-    "jest-environment-jsdom": "^28.1.3",
+    "eslint-plugin-react": "^7.32.2",
+    "gh-pages": "^5.0.0",
+    "history": "^5.3.0",
+    "husky": "^8.0.3",
+    "jest": "^29.4.3",
+    "jest-environment-jsdom": "^29.4.3",
     "lorem-ipsum": "^2.0.8",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.7.1",
+    "prettier": "^2.8.4",
     "ramda": "^0.28.0",
     "react-test-renderer": "^18.2.0",
     "rollup": "^2.77.0",
     "rollup-plugin-dts": "^4.2.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-terser": "^7.0.2",
-    "tslib": "^2.4.0",
-    "typescript": "^4.7.4"
+    "tslib": "^2.5.0",
+    "typescript": "^4.9.5"
   },
   "peerDependencies": {
-    "@emotion/react": "^11.5.0",
-    "@emotion/styled": "^11.3.0",
-    "@mui/icons-material": "^5.0.0",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@emotion/utils": "^1.2.0",
+    "@mui/icons-material": "^5.11.0",
     "@mui/lab": "^5.0.0",
-    "@mui/material": "^5.0.0",
-    "@mui/x-data-grid": "^5.13.0",
+    "@mui/material": "^5.11.0",
+    "@mui/x-data-grid": "^5.17.0",
+    "@mui/x-date-pickers": "^5.0.0",
     "@types/react": "^17.0.0 || ^18.0.0",
+    "date-fns": "^2.0.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
-    "react-router-dom": "^6.0.0",
-    "date-fns": "^2.0.0"
+    "react-router-dom": "^6.0.0"
   },
   "repository": {
     "type": "git",

package/src/components/app-bar/app-bar.stories.tsx

@@ -3,6 +3,7 @@ import { ComponentMeta } from "@storybook/react";
 import { createTemplate } from "../../storybook";
 import { AppBar } from "./app-bar";
 import { DrawerProvider } from "../drawer";
+import { AppBarProps } from "./app-bar.types";
 
 export default {
   title: "AppBars/AppBar",
@@ -12,7 +13,7 @@ export default {
   },
 } as ComponentMeta<typeof AppBar>;
 
-const Template = createTemplate((args) => {
+const Template = createTemplate((args: AppBarProps) => {
   return (
     <DrawerProvider>
       <AppBar {...args} />

package/src/components/app-bar/app-bar.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { fireEvent, render, screen } from "../../tests";
+import { fireEvent, render, screen } from "~/tests/testing-library";
 import { AppBar } from "./app-bar";
 import { DrawerProvider } from "../drawer";
 import { AppBarProfile } from "./app-bar.types";

package/src/components/bullet/bullet.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Bullet, BulletVariant } from "./bullet";
-import { render, screen } from "../../tests";
+import { render, screen } from "~/tests/testing-library";
 
 describe("Bullet", () => {
   const renderComponent = (variant: BulletVariant | undefined = undefined) => {

package/src/components/center-container/center-container.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Typography } from "@mui/material";
-import { render, screen } from "../../tests";
+import { render, screen } from "~/tests/testing-library";
 import { CenterContainer } from "./center-container";
 
 describe("CenterContainer", () => {

package/src/components/content/content.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { ComponentMeta } from "@storybook/react";
 import { createTemplate } from "../../storybook";
 import { Content } from "./content";
-import { SkeletonGrid } from "../../tests";
+import { SkeletonGrid } from "~/tests/components";
 
 export default {
   title: "Sections/Content",

package/src/components/content/content.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Content } from "./content";
-import { render, screen } from "../../tests";
+import { render, screen } from "~/tests/testing-library";
 import { Typography } from "@mui/material";
 
 describe("Content", () => {

package/src/components/drawer/__snapshots__/drawer.test.tsx.snap

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`mixins closedMixin would match a snapshot 1`] = `
-Object {
-  "@media (min-width:600px)": Object {
+{
+  "@media (min-width:600px)": {
     "width": "calc(64px + 1px)",
   },
   "overflowX": "hidden",
@@ -12,7 +12,7 @@ Object {
 `;
 
 exports[`mixins openedMixin would match a snapshot 1`] = `
-Object {
+{
   "overflowX": "hidden",
   "transition": "width 225ms cubic-bezier(0.4, 0, 0.6, 1) 0ms",
   "width": 240,

package/src/components/drawer/drawer.test.tsx

@@ -1,12 +1,13 @@
 import React from "react";
 import { Drawer } from "./drawer";
-import { render, screen } from "../../tests";
+import { render, screen } from "~/tests/testing-library";
 import { DrawerProvider } from "./drawer.provider";
 import { DummyDrawerContent, mockNav } from "./drawer.mock";
 import { Box, Button, createTheme } from "@mui/material";
 import { UndefinedProvider, useDrawer } from "./drawer.context";
 import userEvent from "@testing-library/user-event";
 import { openedMixin, closedMixin } from "./drawer.mixins";
+import { mockConsoleError } from "~/tests/mocks";
 
 const TestContent = () => {
   const { open, close } = useDrawer();
@@ -58,13 +59,15 @@ describe("Drawer", () => {
 
     await userEvent.click(screen.getByText(/close/i));
 
-    expect(screen.queryByRole("menu", { hidden: true })).not.toBeInTheDocument();
+    expect(screen.getByRole("menu", { hidden: true })).toBeInTheDocument();
   });
 });
 
 describe("DrawerContext", () => {
+  mockConsoleError();
+
   it("would throw an error if no Provider is defined", () => {
-    try {
+    expect(() =>
       render(
         <Box>
           <Drawer>
@@ -72,11 +75,8 @@ describe("DrawerContext", () => {
           </Drawer>
           <TestContent />
         </Box>,
-      );
-      fail("No error has been thrown");
-    } catch (e) {
-      expect(e).toStrictEqual(UndefinedProvider);
-    }
+      ),
+    ).toThrow(UndefinedProvider);
   });
 });
 

package/src/components/drawer-content/drawer-content.stories.tsx

@@ -25,5 +25,4 @@ const Template = createTemplate(DrawerContent);
 export const Default = Template.bind({});
 Default.args = {
   nav: mockNav,
-  open: true,
 };

package/src/components/drawer-content/drawer-content.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { render, screen } from "../../tests";
+import { render, screen } from "~/tests/testing-library";
 import { mockNav } from "../drawer/drawer.mock";
 import { DrawerContent } from "./drawer-content";
 

package/src/components/drawer-item/drawer-item.test.tsx

@@ -2,7 +2,7 @@ import React, { ReactElement } from "react";
 import userEvent from "@testing-library/user-event";
 import { DrawerItem } from "./drawer-item";
 import DiamondIcon from "@mui/icons-material/Diamond";
-import { render, screen } from "../../tests";
+import { render, screen } from "~/tests/testing-library";
 import { NavItemAvatar, NavItemBullet, NavItemLabel } from "../drawer/drawer.types";
 
 describe("DrawerItem", () => {
@@ -35,10 +35,10 @@ describe("DrawerItem", () => {
     expect(screen.getByRole("link", { name: /lorem ipsum/i })).toBeInTheDocument();
   });
 
-  it("would navigate to the href when is clicked", () => {
+  it("would navigate to the href when is clicked", async () => {
     const { history } = renderComponent();
 
-    userEvent.click(screen.getByRole("link", { name: /lorem ipsum/i }));
+    await userEvent.click(screen.getByRole("link", { name: /lorem ipsum/i }));
 
     expect(history.location.pathname).toBe("/items/1");
   });

package/src/components/drawer-section/drawer-section.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { render, screen } from "../../tests";
+import { render, screen } from "~/tests/testing-library";
 import userEvent from "@testing-library/user-event";
 import { DrawerSection } from "./drawer-section";
 import { SectionItems } from "./drawer-section.mock";

package/src/components/enhanced-select/enhanced-select.stories.tsx

@@ -1,14 +1,14 @@
-import { Box, MenuItem, PropTypes, useTheme } from "@mui/material";
+import { Box, MenuItem, useTheme } from "@mui/material";
 import { ComponentMeta } from "@storybook/react";
 import React, { ReactNode } from "react";
 import { createTemplate, withContainer } from "../../storybook";
-import { EnhancedSelect, EnhancedSelectProps } from "./enhanced-select";
+import { EnhancedSelect, EnhancedSelectProps, EnhancedSelectSize } from "./enhanced-select";
 import { faker } from "@faker-js/faker";
 
 const baseArgs = {
   label: "Car model",
   value: faker.vehicle.model(),
-  size: "medium",
+  size: "medium" as EnhancedSelectSize,
   fetching: false,
   loading: false,
   fullWidth: true,
@@ -69,15 +69,15 @@ SizeSmall.args = {
   size: "small",
 };
 
-type WithBackgroundProps<T extends ReactNode> = TemplateProps<T> & { bgcolor: PropTypes.Color };
+type WithBackgroundProps = TemplateProps<string> & { bgcolor: "primary" | "secondary" };
 
-export const WithBackground = <T extends string>({
-  options,
-  bgcolor: bgcolorProp,
-  ...rest
-}: WithBackgroundProps<T>) => {
+export const WithBackground = ({ options, bgcolor: bgcolorProp, ...rest }: WithBackgroundProps) => {
   const { palette } = useTheme();
-  const bgcolor = palette[bgcolorProp].main;
+  const BackgroundColors: Record<"primary" | "secondary", string> = {
+    primary: palette.primary.main,
+    secondary: palette.secondary.main,
+  };
+  const bgcolor = BackgroundColors[bgcolorProp];
   const selectColor = palette.getContrastText(bgcolor);
 
   return (

package/src/components/enhanced-select/enhanced-select.test.tsx

@@ -1,17 +1,22 @@
 import React from "react";
 import { EnhancedSelectLoaded } from "./enhanced-select.stories";
-import { render, screen } from "../../tests";
+import { render, screen } from "~/tests/testing-library";
 import userEvent from "@testing-library/user-event";
 
 describe("EnhancedSelect", () => {
   const renderComponent = ({
-    label = EnhancedSelectLoaded.args.label,
+    label = EnhancedSelectLoaded.args?.label || "invalid",
     loading = false,
     fetching = false,
   } = {}) => {
+    const options = (EnhancedSelectLoaded.args?.options as string[]) || [];
+    const value = EnhancedSelectLoaded.args?.value as string;
+
     render(
       <EnhancedSelectLoaded
         {...EnhancedSelectLoaded.args}
+        options={options}
+        value={value}
         label={label}
         loading={loading}
         fetching={fetching}
@@ -19,8 +24,8 @@ describe("EnhancedSelect", () => {
     );
 
     return {
-      options: EnhancedSelectLoaded.args.options as string[],
-      value: EnhancedSelectLoaded.args.value as string,
+      options,
+      value,
     };
   };
 

package/src/components/enhanced-select/enhanced-select.tsx

@@ -5,15 +5,13 @@ import {
   FormControl,
   InputLabel,
   LinearProgress,
-  useTheme,
   Select,
-  Typography,
   styled,
 } from "@mui/material";
 import { CenterContainer } from "../center-container";
 import { SelectInputProps } from "@mui/material/Select/SelectInput";
 
-type EnhancedSelectSize = "small" | "medium";
+export type EnhancedSelectSize = "small" | "medium";
 
 export interface EnhancedSelectProps<T> {
   label: string;

package/src/components/header/header.dummy.ts

@@ -1,5 +1,5 @@
 import { action } from "@storybook/addon-actions";
-import { HeaderBreadcrumb, HeaderAction, HeaderTab } from "./header";
+import { HeaderBreadcrumb, HeaderAction, HeaderTab } from "./header.types";
 
 export const breadcrumbs: HeaderBreadcrumb[] = [
   {

package/src/components/header/header.stories.tsx

@@ -36,7 +36,6 @@ ColorInherit.args = {
   preset: "inherit",
   breadcrumbs,
   tabs,
-  selectedTab: 2,
   actions,
 };
 
@@ -47,7 +46,6 @@ ColorPrimary.args = {
   preset: "primary",
   breadcrumbs,
   tabs,
-  selectedTab: 2,
   actions,
 };
 
@@ -58,7 +56,6 @@ ColorSecondary.args = {
   preset: "secondary",
   breadcrumbs,
   tabs,
-  selectedTab: 2,
   actions,
 };
 
@@ -69,7 +66,6 @@ ColorDefault.args = {
   preset: "default",
   breadcrumbs,
   tabs,
-  selectedTab: 2,
   actions,
 };
 
@@ -80,7 +76,6 @@ ColorTransparent.args = {
   preset: "transparent",
   breadcrumbs,
   tabs,
-  selectedTab: 2,
   actions,
 };
 
@@ -112,5 +107,4 @@ WithTabs.args = {
   preset: "default",
   breadcrumbs,
   tabs,
-  selectedTab: 2,
 };

package/src/components/header/header.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { render, screen } from "../../tests";
+import { render, screen } from "~/tests/testing-library";
 import userEvent from "@testing-library/user-event";
 import { Header } from "./header";
 import {

package/src/components/label/label.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Label, LabelVariant } from "./label";
-import { render, screen } from "../../tests";
+import { render, screen } from "~/tests/testing-library";
 
 describe("Label", () => {
   const renderComponent = (variant: LabelVariant | undefined = undefined) => {

package/src/components/link/link.tsx

@@ -3,7 +3,7 @@ import { Link as RouterLink, LinkProps as RouterLinkProps } from "react-router-d
 import { forwardRef } from "react";
 import { LinkProps, Link as MuiLink } from "@mui/material";
 
-// eslint-disable-next-line react/display-name, @typescript-eslint/no-explicit-any
+/* eslint-disable react/display-name, @typescript-eslint/no-explicit-any */
 export const LinkBehaviour = forwardRef<
   any,
   Omit<RouterLinkProps, "to"> & { href: RouterLinkProps["to"] }
@@ -12,6 +12,6 @@ export const LinkBehaviour = forwardRef<
   return <RouterLink ref={ref} to={href} {...other} />;
 });
 
-export const Link = forwardRef<any, LinkProps>((props, _) => {
+export const Link = forwardRef<any, LinkProps>((props, _1) => {
   return <MuiLink {...props} component={LinkBehaviour} />;
 });

package/src/components/loading-area/loading-area.test.tsx

@@ -1,5 +1,6 @@
 import React from "react";
-import { render, expectProgressIndicator } from "../../tests";
+import { expectProgressIndicator } from "~/tests/assertions";
+import { render } from "~/tests/testing-library";
 import { LoadingArea } from "./loading-area";
 
 describe("LoadingArea", () => {

package/src/components/placeholder/placeholder.test.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement } from "react";
-import { render, screen } from "../../tests";
+import { render, screen } from "~/tests/testing-library";
 import userEvent from "@testing-library/user-event";
 import { Placeholder, PlaceholderAction } from "./placeholder";
 import { actions as actionData } from "./placeholder.mock";
@@ -12,12 +12,13 @@ describe("Placeholder", () => {
     actions = undefined,
     icon = undefined,
   }: { actions?: PlaceholderAction[]; icon?: ReactElement } = {}) => {
+    const iconFn = icon ? () => icon : undefined;
     return render(
       <Placeholder
         title="Lorem ipsum"
         subtitle="Lorem ipsum sit amet"
         actions={actions}
-        icon={() => icon}
+        icon={iconFn}
       />,
     );
   };

package/src/components/query-container/query-container.test.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import { QueryContainer, QueryContainerError, QueryContainerSuccess } from "./query-container";
-import { expectProgressIndicator, render, screen } from "../../tests";
+import { render, screen } from "~/tests/testing-library";
 import { Typography } from "@mui/material";
+import { expectProgressIndicator } from "~/tests/assertions";
 
 describe("QueryContainer", () => {
   const renderComponent = ({

package/src/components/sign-in/sign-in.test.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import { SignIn } from "./sign-in";
-import { expectProgressIndicator, render, screen } from "../../tests";
+import { render, screen } from "~/tests/testing-library";
 import userEvent from "@testing-library/user-event";
+import { expectProgressIndicator } from "~/tests/assertions";
 
 async function submitSignIn(email: string | null, password: string | null) {
   email && (await userEvent.type(screen.getByRole("input", { name: /email/i }), email));

package/src/components/sign-in/sign-in.tsx

@@ -2,7 +2,7 @@ import React, { FormEvent, useState } from "react";
 import { Stack, Box, TextField, Typography, Alert } from "@mui/material";
 import { LoadingButton } from "@mui/lab";
 
-interface Props {
+export interface SignInProps {
   title: string;
   subtitle: string;
   error?: Error;
@@ -10,7 +10,7 @@ interface Props {
   onSubmitSignIn: (email: string, password: string) => void;
 }
 
-export function SignIn({ title, subtitle, loading, error, onSubmitSignIn }: Props) {
+export const SignIn = ({ title, subtitle, loading, error, onSubmitSignIn }: SignInProps) => {
   const [emailError, setEmailError] = useState("");
   const [passwordError, setPasswordError] = useState("");
 
@@ -94,4 +94,4 @@ export function SignIn({ title, subtitle, loading, error, onSubmitSignIn }: Prop
       </Box>
     </>
   );
-}
+};

package/src/components/tab/tab-card/tab-card.dummy.tsx

@@ -6,12 +6,12 @@ import { TabProvider } from "../../../providers";
 
 export const DummyTabs = ["tab 1", "tab 2.1", "tab 2.2", "tab 3"];
 
-interface Props {
+export interface TabCardDummyProps {
   tabs: string[];
   initialTab: number;
 }
 
-export function TabCardDummy({ tabs, initialTab }: Props) {
+export function TabCardDummy({ tabs, initialTab }: TabCardDummyProps) {
   return (
     <TabProvider initialValue={initialTab}>
       <TabCard tabs={tabs}>

package/src/components/tab/tab-card/tab-card.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { ComponentMeta } from "@storybook/react";
 import { TabCard } from "./tab-card";
 import { createTemplate } from "../../../storybook";
-import { DummyTabs, TabCardDummy } from "./tab-card.dummy";
+import { DummyTabs, TabCardDummy, TabCardDummyProps } from "./tab-card.dummy";
 
 export default {
   title: "Cards/Tab card",
@@ -12,7 +12,7 @@ export default {
   },
 } as ComponentMeta<typeof TabCard>;
 
-const Template = createTemplate((props) => {
+const Template = createTemplate((props: TabCardDummyProps) => {
   return <TabCardDummy {...props} />;
 });
 

package/src/components/tab/tab-card/tab-card.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { DummyTabs, TabCardDummy } from "./tab-card.dummy";
-import { screen, render } from "../../../tests";
+import { screen, render } from "~/tests/testing-library";
 import userEvent from "@testing-library/user-event";
 
 describe("TabCard", () => {