@pautena/react-design-system 0.5.0 → 0.6.0

package/dist/index.d.ts

@@ -2,10 +2,12 @@
 import * as React$1 from 'react';
 import React__default, { PropsWithChildren, FunctionComponent, ReactElement, ReactNode, Dispatch, SetStateAction } from 'react';
 import * as _mui_material from '@mui/material';
-import { SxProps, Theme, GridProps, AppBarProps as AppBarProps$1, PropTypes, DrawerProps as DrawerProps$1, ChipTypeMap, AutocompleteProps, AlertColor, Color } from '@mui/material';
+import { SxProps, Theme, GridProps, PropTypes, AppBarProps, DrawerProps as DrawerProps$1, ListSubheaderProps, ChipTypeMap, AutocompleteProps as AutocompleteProps$1, AlertColor, Color } from '@mui/material';
 import { MarkdownToJSX } from 'markdown-to-jsx';
 import * as _emotion_styled from '@emotion/styled';
 import * as _mui_system from '@mui/system';
+import * as csstype from 'csstype';
+import * as _mui_material_OverridableComponent from '@mui/material/OverridableComponent';
 import { SelectInputProps } from '@mui/material/Select/SelectInput';
 import { Variant } from '@mui/material/styles/createTypography';
 import { LoremUnit } from 'lorem-ipsum/types/src/constants/units';
@@ -157,21 +159,6 @@ type QueryContainerProps = PropsWithChildren<{
  */
 declare function QueryContainer({ isFetching, error, success, children }: QueryContainerProps): JSX.Element;
 
-interface AppBarProfile {
-    name: string;
-}
-interface AppBarProps extends AppBarProps$1 {
-    menu?: boolean;
-    title?: string;
-    search?: boolean;
-    profile?: AppBarProfile;
-    onClickSignOut: () => void;
-}
-type AppBarComponent = FunctionComponent<AppBarProps>;
-type AppBarElement = ReactElement<AppBarProps, AppBarComponent>;
-
-declare const MiniAppBar: AppBarComponent;
-
 type BulletVariant = "primary" | "secondary" | "default" | "info" | "warning" | "error";
 declare const bulletClasses: {
     root: string;
@@ -181,11 +168,15 @@ interface BulletProps {
      * Color palette used to draw the component
      */
     variant?: BulletVariant;
+    /**
+     * Custom styles
+     */
+    sx?: SxProps<Theme>;
 }
 /**
  * Dot to attract the user attention
  */
-declare const Bullet: ({ variant }: BulletProps) => JSX.Element;
+declare const Bullet: ({ variant, sx }: BulletProps) => JSX.Element;
 
 type LabelVariant = "primary" | "secondary" | "default" | "info" | "warning" | "error";
 declare const labelClasses: {
@@ -200,11 +191,15 @@ interface LabelProps {
      * Color palette used to draw the component
      */
     variant?: LabelVariant;
+    /**
+     * Custom styles
+     */
+    sx?: SxProps<Theme>;
 }
 /**
  * Compact element to represent a text
  */
-declare const Label: ({ text, variant }: LabelProps) => JSX.Element;
+declare const Label: ({ text, variant, sx }: LabelProps) => JSX.Element;
 
 type HeaderPreset = PropTypes.Color | "transparent";
 type HeaderActionVariant = "text" | "outlined" | "contained";
@@ -322,46 +317,54 @@ interface CenterContainerProps {
 }
 declare function CenterContainer({ children, centerVertical, centerHorizontal, sx, }: CenterContainerProps): JSX.Element;
 
-interface NavItemAvatar {
+interface DrawerAppBarProps extends AppBarProps {
+    title?: string;
+}
+declare const DrawerAppBar: ({ title, sx, children, ...rest }: DrawerAppBarProps) => JSX.Element;
+
+type DrawerVariant = "temporary" | "mini" | "persistent" | "clipped";
+type DrawerState = "open" | "collapse" | "close";
+type DrawerSize = "small" | "medium";
+interface DrawerItemAvatar {
     src: string;
     alt: string;
 }
-interface NavItemLabel {
+interface DrawerItemLabel {
     text: string;
     variant: LabelVariant;
 }
-interface NavItemBullet {
+interface DrawerItemBullet {
     variant: BulletVariant;
 }
-interface NavItemLink {
+interface DrawerNavigationItemLink {
     id: string;
     text: string;
     href: string;
     icon?: ReactElement;
-    avatar?: NavItemAvatar;
-    label?: NavItemLabel;
-    bullet?: NavItemBullet;
+    avatar?: DrawerItemAvatar;
+    label?: DrawerItemLabel;
+    bullet?: DrawerItemBullet;
 }
-type NavItemCollapsable = Pick<NavItemLink, "id" | "text" | "icon"> & {
-    items: NavItemLink[];
+type DrawerNavigationItemCollapsable = Pick<DrawerNavigationItemLink, "id" | "text" | "icon"> & {
+    items: DrawerNavigationItem[];
 };
-type NavItem = NavItemLink | NavItemCollapsable;
-interface NavSection {
+type DrawerNavigationItem = DrawerNavigationItemLink | DrawerNavigationItemCollapsable;
+interface DrawerNavigationSection {
     title?: string;
-    items: NavItem[];
+    items: DrawerNavigationItem[];
 }
-interface Nav {
-    items: NavSection[];
+interface DrawerNavigation {
+    items: DrawerNavigationSection[];
 }
 interface DrawerContentProps {
     /**
-     * Item currently selected in the navigation
+     * Object with the content that has to be rendered
      */
-    selectedItem?: string;
+    nav: DrawerNavigation;
     /**
-     * Object with the content that has to be rendered
+     * Item size. default to medium
      */
-    nav: Nav;
+    size?: DrawerSize;
 }
 type DrawerContentComponent = FunctionComponent<DrawerContentProps>;
 type DrawerContentElement = ReactElement<DrawerContentProps, DrawerContentComponent>;
@@ -370,20 +373,36 @@ interface DrawerProps extends DrawerProps$1 {
 }
 type DrawerComponent = FunctionComponent<DrawerProps>;
 type DrawerElement = ReactElement<DrawerProps, DrawerComponent>;
+declare const getDrawerItemColors: (theme: Theme, selected: boolean | undefined) => {
+    color: string | undefined;
+    fontWeight: csstype.Property.FontWeight | undefined;
+};
+type DrawerAppBarComponent = FunctionComponent<DrawerAppBarProps>;
+type DrawerAppBarElement = ReactElement<DrawerAppBarProps, DrawerAppBarComponent>;
 
+declare const DrawerHeader: _emotion_styled.StyledComponent<_mui_system.MUIStyledCommonProps<Theme>, React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 declare const Drawer: DrawerComponent;
 
-declare const MiniDrawer: _emotion_styled.StyledComponent<DrawerProps & _mui_system.MUIStyledCommonProps<_mui_material.Theme>, {}, {}>;
-
-type Props$1 = PropsWithChildren<{
-    initialOpen?: boolean;
+type DrawerProviderProps = PropsWithChildren<{
+    initialState?: DrawerState;
+    underAppBar?: boolean;
+    drawerWidth?: number;
+    variant?: DrawerVariant;
+    selectedItemId?: string;
 }>;
-declare const DrawerProvider: ({ children, initialOpen }: Props$1) => JSX.Element;
+declare const DrawerProvider: ({ children, initialState: initialStateProp, variant, drawerWidth: drawerWidthProp, underAppBar, selectedItemId, }: DrawerProviderProps) => JSX.Element;
 
 interface DrawerContextProps {
-    isOpen: boolean;
+    selectedItemId?: string;
+    state: DrawerState;
+    variant: DrawerVariant;
+    drawerWidth: number;
+    underAppBar: boolean;
+    switchState(): void;
     close(): void;
+    collapse(): void;
     open(): void;
+    setState: (state: DrawerState) => void;
 }
 declare const DrawerContext: React$1.Context<DrawerContextProps | undefined>;
 declare const UndefinedProvider: Error;
@@ -394,46 +413,6 @@ declare const useDrawer: () => DrawerContextProps;
  */
 declare const DrawerContent: DrawerContentComponent;
 
-interface DrawerItemProps {
-    /**
-     * Text displayed inside the item
-     */
-    text: string;
-    /**
-     * Url where the user is going to be redirected
-     * if the item is clicked
-     */
-    href: string;
-    /**
-     * Icon displayed to the left
-     */
-    icon?: ReactElement;
-    /**
-     * Avatar displayed to the left
-     */
-    avatar?: NavItemAvatar;
-    /**
-     * Label with extra info displayed to the right
-     */
-    label?: NavItemLabel;
-    /**
-     * Bullet to attract the user attention displyed to the right
-     */
-    bullet?: NavItemBullet;
-    /**
-     * The item has to be marked as selected
-     */
-    selected?: boolean;
-    /**
-     * Custom styles
-     */
-    sx?: SxProps<Theme>;
-}
-/**
- * Clicable item inside a drawer
- */
-declare const DrawerItem: ({ text, icon, avatar, label, bullet, href, selected, sx, }: DrawerItemProps) => JSX.Element;
-
 interface DrawerSectionProps {
     /**
      * Section title
@@ -442,31 +421,52 @@ interface DrawerSectionProps {
     /**
      * List of items of that section
      */
-    items: NavItem[];
+    items: DrawerNavigationItem[];
     /**
-     * Id of the item that has to be marked as selected
+     * Item size. default to medium
      */
-    selectedItem?: string;
+    size?: DrawerSize;
 }
 /**
  * Render a group of items inside the drawer
  * with an optional title
  */
-declare const DrawerSection: ({ title, items, selectedItem }: DrawerSectionProps) => JSX.Element;
+declare const DrawerSection: ({ title, items, size }: DrawerSectionProps) => JSX.Element;
+
+interface DrawerSubheaderProps extends ListSubheaderProps {
+    /**
+     * Item size. default to medium
+     */
+    size?: DrawerSize;
+}
+declare const DrawerSubheader: _emotion_styled.StyledComponent<{
+    children?: any;
+    classes?: Partial<_mui_material.ListSubheaderClasses> | undefined;
+    color?: "default" | "inherit" | "primary" | undefined;
+    disableGutters?: boolean | undefined;
+    disableSticky?: boolean | undefined;
+    inset?: boolean | undefined;
+    sx?: _mui_material.SxProps<_mui_material.Theme> | undefined;
+} & _mui_material_OverridableComponent.CommonProps & Omit<Omit<React$1.DetailedHTMLProps<React$1.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
+    ref?: ((instance: HTMLLIElement | null) => void) | React$1.RefObject<HTMLLIElement> | null | undefined;
+}, "color" | "inset" | "sx" | keyof _mui_material_OverridableComponent.CommonProps | "children" | "disableGutters" | "disableSticky"> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & DrawerSubheaderProps, {}, {}>;
+
+type DrawerMainProps = PropsWithChildren;
+declare const DrawerMain: ({ children }: DrawerMainProps) => JSX.Element;
 
-type EnhancedSelectSize = "small" | "medium";
-interface EnhancedSelectProps<T> {
+type SelectSize = "small" | "medium";
+interface SelectProps<T> {
     label: string;
     value: T;
     loading?: boolean;
     fetching?: boolean;
-    size?: EnhancedSelectSize;
+    size?: SelectSize;
     color?: string;
     fullWidth?: boolean;
     children?: ReactNode;
     onChange?: SelectInputProps<T>["onChange"];
 }
-declare const EnhancedSelect: <T extends React__default.ReactNode>({ label, value, loading, fetching, size, fullWidth, color, children, onChange, }: EnhancedSelectProps<T>) => JSX.Element;
+declare const Select: <T extends any>({ label, value, loading, fetching, size, fullWidth, color, children, onChange, }: SelectProps<T>) => JSX.Element;
 
 interface SignInProps {
     title: string;
@@ -477,14 +477,14 @@ interface SignInProps {
 }
 declare const SignIn: ({ title, subtitle, loading, error, onSubmitSignIn }: SignInProps) => JSX.Element;
 
-interface EnhancedAutocompleteProps<T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined, ChipComponent extends React__default.ElementType = ChipTypeMap["defaultComponent"]> extends Omit<AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>, "renderInput" | "onChange" | "color"> {
+interface AutocompleteProps<T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined, ChipComponent extends React__default.ElementType = ChipTypeMap["defaultComponent"]> extends Omit<AutocompleteProps$1<T, Multiple, DisableClearable, FreeSolo, ChipComponent>, "renderInput" | "onChange" | "color"> {
     label: string;
     helperText?: string;
     color?: string;
     fetching?: boolean;
     onChangeValue?: (value: T) => void;
 }
-declare const EnhancedAutocomplete: <T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined, ChipComponent extends React__default.ElementType<any> = "div">(props: EnhancedAutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>) => JSX.Element;
+declare const Autocomplete: <T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined, ChipComponent extends React__default.ElementType<any> = "div">(props: AutocompleteProps<T, Multiple, DisableClearable, FreeSolo, ChipComponent>) => JSX.Element;
 
 interface TabPanelProps {
     children?: React__default.ReactNode;
@@ -592,7 +592,7 @@ interface ExpandableAlertProps {
     metadata?: string | string[];
     onClose: () => void;
 }
-declare const ExpandableAlert: ({ severity, iconMapping, title, message, metadata, onClose, }: ExpandableAlertProps) => JSX.Element;
+declare const ExpandableAlert: React__default.ForwardRefExoticComponent<ExpandableAlertProps & React__default.RefAttributes<any>>;
 
 interface DialogAction {
     id: string;
@@ -647,7 +647,7 @@ declare const useDialog: (intialOpen?: boolean) => {
     setIsOpen: React$1.Dispatch<React$1.SetStateAction<boolean>>;
 };
 
-declare const newArrayWithSize: <T>(size: number, fillValue: T) => any[];
+declare const newArrayWithSize: <T>(size: number, fillValue: T) => any;
 declare const getRandomItem: <T>(items: T[]) => {
     index: number;
     item: T;
@@ -658,10 +658,11 @@ declare const useGetDefaultThemeColor: ({ lightWeight, darkWeight, }?: {
     darkWeight?: keyof Color | undefined;
 }) => string;
 
-interface AppBarWithDrawerLayoutProps {
-    children: [DrawerElement, AppBarElement, ReactNode];
+interface DrawerLayoutProps {
+    drawerProviderProps?: DrawerProviderProps;
+    children: [DrawerElement, DrawerAppBarElement, ReactNode];
 }
-declare const AppBarWithDrawerLayout: ({ children: childrenProps, }: AppBarWithDrawerLayoutProps) => JSX.Element;
+declare const DrawerLayoutProps: ({ drawerProviderProps, children: childrenProps, }: DrawerLayoutProps) => JSX.Element;
 
 interface HeaderLayoutProps {
     loading?: boolean;
@@ -937,4 +938,4 @@ type TabProviderProps = PropsWithChildren<{
 }>;
 declare const TabProvider: ({ children, initialValue }: TabProviderProps) => JSX.Element;
 
-export { AppBarComponent, AppBarElement, AppBarProfile, AppBarProps, AppBarWithDrawerLayout, AppBarWithDrawerLayoutProps, ArrayFieldType, BaseFieldType, BaseValueProps, BasicModelInstance, Board, BoardProps, BootstrapDialog, BootstrapDialogDialogProps, Bullet, BulletProps, BulletVariant, CenterContainer, CenterContainerProps, ConfirmDialog, ConfirmDialogProps, Content, ContentComponent, ContentElement, ContentPlaceholder, ContentPlaceholderProps, ContentProps, DefaultPlaceholder, DialogAction, Drawer, DrawerComponent, DrawerContent, DrawerContentComponent, DrawerContentElement, DrawerContentProps, DrawerContext, DrawerContextProps, DrawerElement, DrawerItem, DrawerItemProps, DrawerProps, DrawerProvider, DrawerSection, DrawerSectionProps, EditInputType, EditableValueProps, EnhancedAutocomplete, EnhancedAutocompleteProps, EnhancedRemoteTable, EnhancedRemoteTableProps, EnhancedSelect, EnhancedSelectProps, EnhancedSelectSize, EnhancedTable, EnhancedTableHead, ExpandableAlert, ExpandableAlertProps, FieldType, FormDialog, FormDialogProps, GroupField, GroupInstanceType, GroupValueCard, GroupValueCardProps, GroupValueItem, GroupValueItemComponent, GroupValueItemElement, GroupValueItemProps, HeadCell, Header, HeaderAction, HeaderActionVariant, HeaderBreadcrumb, HeaderComponent, HeaderElement, HeaderLayout, HeaderLayoutProps, HeaderNavigationButton, HeaderPreset, HeaderProps, HeaderTab, IdleRequest, Label, LabelProps, LabelVariant, LoadingArea, LoadingRequest, LoremIpsumPlaceholder, LoremIpsumPlaceholderProps, Markdown, MarkdownProps, MiniAppBar, MiniDrawer, Model, ModelField, ModelFieldTypes, ModelForm, ModelFormProps, ModelRouter, ModelRouterProps, Nav, NavItem, NavItemAvatar, NavItemBullet, NavItemCollapsable, NavItemLabel, NavItemLink, NavSection, Notification, NotificationCenterContext, NotificationCenterProps, NotificationCenterProvider, NotificationCenterProviderProps, NotificationCenterProviderUndefinedError, NotifyWhenValueChangesOptions, ObjectDetails, ObjectDetailsProps, Order, Placeholder, PlaceholderAction, PlaceholderIconArgs, PlaceholderProps, QueryContainer, QueryContainerError, QueryContainerProps, QueryContainerSuccess, RequestState, SignIn, SignInProps, SingleFieldType, SkeletonCard, SkeletonCardProps, SkeletonGrid, SkeletonGridProps, SuccessRequest, TabCard, TabCardProps, TabContext, TabContextProvider, TabPanel, TabProvider, TableList, TableListProps, TableRowOption, UndefinedProvider, ValueBoolean, ValueBooleanProps, ValueCard, ValueCardProps, ValueDatetime, ValueDatetimeProps, ValueEditButtons, ValueEditButtonsProps, ValueRating, ValueRatingProps, ValueText, ValueTextProps, bulletClasses, getRandomItem, groupValueItemClasses, labelClasses, markdownDefaultOptions, newArrayWithSize, newInstanceFromValuesOrZeroValue, useDialog, useDrawer, useEditableValueDisplay, useGetDefaultThemeColor, useNotificationCenter, useNotifyWhenValueChanges, useTab };
+export { ArrayFieldType, Autocomplete, AutocompleteProps, BaseFieldType, BaseValueProps, BasicModelInstance, Board, BoardProps, BootstrapDialog, BootstrapDialogDialogProps, Bullet, BulletProps, BulletVariant, CenterContainer, CenterContainerProps, ConfirmDialog, ConfirmDialogProps, Content, ContentComponent, ContentElement, ContentPlaceholder, ContentPlaceholderProps, ContentProps, DefaultPlaceholder, DialogAction, Drawer, DrawerAppBar, DrawerAppBarComponent, DrawerAppBarElement, DrawerAppBarProps, DrawerComponent, DrawerContent, DrawerContentComponent, DrawerContentElement, DrawerContentProps, DrawerContext, DrawerContextProps, DrawerElement, DrawerHeader, DrawerItemAvatar, DrawerItemBullet, DrawerItemLabel, DrawerLayoutProps, DrawerMain, DrawerMainProps, DrawerNavigation, DrawerNavigationItem, DrawerNavigationItemCollapsable, DrawerNavigationItemLink, DrawerNavigationSection, DrawerProps, DrawerProvider, DrawerProviderProps, DrawerSection, DrawerSectionProps, DrawerSize, DrawerState, DrawerSubheader, DrawerSubheaderProps, DrawerVariant, EditInputType, EditableValueProps, EnhancedRemoteTable, EnhancedRemoteTableProps, EnhancedTable, EnhancedTableHead, ExpandableAlert, ExpandableAlertProps, FieldType, FormDialog, FormDialogProps, GroupField, GroupInstanceType, GroupValueCard, GroupValueCardProps, GroupValueItem, GroupValueItemComponent, GroupValueItemElement, GroupValueItemProps, HeadCell, Header, HeaderAction, HeaderActionVariant, HeaderBreadcrumb, HeaderComponent, HeaderElement, HeaderLayout, HeaderLayoutProps, HeaderNavigationButton, HeaderPreset, HeaderProps, HeaderTab, IdleRequest, Label, LabelProps, LabelVariant, LoadingArea, LoadingRequest, LoremIpsumPlaceholder, LoremIpsumPlaceholderProps, Markdown, MarkdownProps, Model, ModelField, ModelFieldTypes, ModelForm, ModelFormProps, ModelRouter, ModelRouterProps, Notification, NotificationCenterContext, NotificationCenterProps, NotificationCenterProvider, NotificationCenterProviderProps, NotificationCenterProviderUndefinedError, NotifyWhenValueChangesOptions, ObjectDetails, ObjectDetailsProps, Order, Placeholder, PlaceholderAction, PlaceholderIconArgs, PlaceholderProps, QueryContainer, QueryContainerError, QueryContainerProps, QueryContainerSuccess, RequestState, Select, SelectProps, SelectSize, SignIn, SignInProps, SingleFieldType, SkeletonCard, SkeletonCardProps, SkeletonGrid, SkeletonGridProps, SuccessRequest, TabCard, TabCardProps, TabContext, TabContextProvider, TabPanel, TabProvider, TableList, TableListProps, TableRowOption, UndefinedProvider, ValueBoolean, ValueBooleanProps, ValueCard, ValueCardProps, ValueDatetime, ValueDatetimeProps, ValueEditButtons, ValueEditButtonsProps, ValueRating, ValueRatingProps, ValueText, ValueTextProps, bulletClasses, getDrawerItemColors, getRandomItem, groupValueItemClasses, labelClasses, markdownDefaultOptions, newArrayWithSize, newInstanceFromValuesOrZeroValue, useDialog, useDrawer, useEditableValueDisplay, useGetDefaultThemeColor, useNotificationCenter, useNotifyWhenValueChanges, useTab };

package/package.json

@@ -1,16 +1,17 @@
 {
   "name": "@pautena/react-design-system",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "My custom design system on top of MUI",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "build": "rollup -c",
-    "test": "jest",
-    "coverage": "jest --coverage",
-    "storybook": "start-storybook -p 6006",
-    "storybook:build": "build-storybook",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "coverage": "vitest run --coverage",
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "storybook build",
     "storybook:deploy": "gh-pages -d storybook-static",
     "lint": "npm-run-all lint:*",
     "lint:eslint": "eslint *.js src --ext .js,.ts,.tsx",
@@ -56,35 +57,33 @@
     "@rollup/plugin-commonjs": "^22.0.2",
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-typescript": "8.3.3",
-    "@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.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",
+    "@storybook/addon-actions": "^7.0.2",
+    "@storybook/addon-essentials": "^7.0.2",
+    "@storybook/addon-interactions": "^7.0.2",
+    "@storybook/addon-knobs": "^7.0.0",
+    "@storybook/addon-links": "^7.0.2",
+    "@storybook/addon-mdx-gfm": "^7.0.2",
+    "@storybook/react": "^7.0.2",
+    "@storybook/react-webpack5": "^7.0.2",
+    "@storybook/testing-library": "^0.1.0",
+    "@storybook/testing-react": "^2.0.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
-    "@types/jest": "^29.5.0",
     "@types/ramda": "^0.28.23",
     "@types/react": "^18.0.31",
     "@typescript-eslint/eslint-plugin": "^5.57.0",
     "@typescript-eslint/parser": "^5.57.0",
-    "babel-jest": "^29.5.0",
     "babel-loader": "^9.1.2",
     "babel-plugin-module-resolver": "^5.0.0",
     "eslint": "^8.37.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-storybook": "^0.6.11",
     "gh-pages": "^5.0.0",
     "history": "^5.3.0",
     "husky": "^8.0.3",
-    "jest": "^29.5.0",
-    "jest-environment-jsdom": "^29.5.0",
+    "jsdom": "^21.1.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.7",
     "ramda": "^0.28.0",
@@ -93,8 +92,11 @@
     "rollup-plugin-dts": "^4.2.3",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-terser": "^7.0.2",
+    "storybook": "^7.0.2",
     "tslib": "^2.5.0",
-    "typescript": "^4.9.5"
+    "typescript": "^4.9.5",
+    "vite-tsconfig-paths": "^4.0.8",
+    "vitest": "^0.29.8"
   },
   "peerDependencies": {
     "@emotion/react": "^11.10.6",
@@ -108,10 +110,10 @@
     "@types/react": "^17.0.0 || ^18.0.0",
     "date-fns": "^2.0.0",
     "lorem-ipsum": "^2.0.0",
+    "markdown-to-jsx": "^7.0.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
-    "react-router-dom": "^6.0.0",
-    "markdown-to-jsx": "^7.0.0"
+    "react-router-dom": "^6.0.0"
   },
   "repository": {
     "type": "git",

package/setupTests.ts

@@ -0,0 +1,22 @@
+import "@testing-library/jest-dom";
+import { vi } from "vitest";
+
+beforeAll(() => {
+  const originalError = console.error;
+  console.error = (...data: any[]) => {
+    if (data.length > 0) {
+      const error = data[0] as string;
+      if (
+        error.startsWith("Warning: An update to") ||
+        error.startsWith("Warning: Failed prop type")
+      ) {
+        return;
+      }
+    }
+    originalError(...data);
+  };
+});
+
+beforeEach(() => {
+  vi.resetAllMocks();
+});

package/src/components/alerts/expandable-alert/expandable-alert.stories.tsx

@@ -1,7 +1,8 @@
-import { ComponentMeta, ComponentStory } from "@storybook/react";
-import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
+import React, { useState } from "react";
 import { ExpandableAlert } from "./expandable-alert";
 import { withContainer } from "~/storybook";
+import { Alert, AlertColor, Box, Button, Snackbar } from "@mui/material";
 
 export default {
   title: "Components/Alerts/ExpandableAlert",
@@ -10,39 +11,64 @@ export default {
   parameters: {
     layout: "centered",
   },
-} as ComponentMeta<typeof ExpandableAlert>;
+} satisfies Meta<typeof ExpandableAlert>;
+type Story = StoryObj<typeof ExpandableAlert>;
 
-const Template: ComponentStory<typeof ExpandableAlert> = (args) => <ExpandableAlert {...args} />;
+export const Info: Story = {
+  args: {
+    severity: "info",
+    title: "Lorem ipsum",
+    message: "Lorem ipsum dolor sit amet",
+    metadata: ["lorem: ipsum", "foo: bar", "header: this", "host: localhost"],
+  },
+};
 
-export const Info = Template.bind({});
-Info.args = {
-  severity: "info",
-  title: "Lorem ipsum",
-  message: "Lorem ipsum dolor sit amet",
-  metadata: ["lorem: ipsum", "foo: bar", "header: this", "host: localhost"],
+export const Success: Story = {
+  args: {
+    ...Info.args,
+    severity: "success",
+  },
 };
 
-export const Success = Template.bind({});
-Success.args = {
-  ...Info.args,
-  severity: "success",
+export const Error: Story = {
+  args: {
+    ...Info.args,
+    severity: "error",
+  },
 };
 
-export const Error = Template.bind({});
-Error.args = {
-  ...Info.args,
-  severity: "error",
+export const Warning: Story = {
+  args: {
+    ...Info.args,
+    severity: "warning",
+  },
 };
 
-export const Warning = Template.bind({});
-Warning.args = {
-  ...Info.args,
-  severity: "warning",
+export const WihtoutMetadata: Story = {
+  args: {
+    severity: "info",
+    title: "Lorem ipsum",
+    message: "Lorem ipsum dolor sit amet",
+  },
 };
 
-export const WihtoutMetadata = Template.bind({});
-WihtoutMetadata.args = {
-  severity: "info",
-  title: "Lorem ipsum",
-  message: "Lorem ipsum dolor sit amet",
+export const SnackbarAlert = () => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Box>
+      <Button variant="contained" onClick={() => setOpen(true)}>
+        Snackbar
+      </Button>
+      <Snackbar open={open}>
+        <ExpandableAlert
+          severity="info"
+          onClose={() => setOpen(false)}
+          title="Lorem ipsum"
+          message="Lorem ipsum dolor sit amet"
+          metadata={["lorem: ipsum", "foo: bar", "header: this", "host: localhost"]}
+        />
+      </Snackbar>
+    </Box>
+  );
 };

package/src/components/alerts/expandable-alert/expandable-alert.test.tsx

@@ -1,7 +1,9 @@
-import React from "react";
+import React, { useState } from "react";
 import { render, screen, waitFor } from "~/tests/testing-library";
 import { ExpandableAlert } from "./expandable-alert";
 import userEvent from "@testing-library/user-event";
+import { vi } from "vitest";
+import { Box, Button, Snackbar } from "@mui/material";
 
 const message = "Lorem ipsum dolor sit amet";
 const metadata =
@@ -13,8 +15,8 @@ describe("ExpandableAlert", () => {
     title,
     metadata,
   }: { title?: string; metadata?: string | string[] } = {}) => {
-    const onClose = jest.fn();
-    const copy = jest.fn();
+    const onClose = vi.fn();
+    const copy = vi.fn();
     Object.assign(navigator, {
       clipboard: {
         writeText: copy,
@@ -111,4 +113,25 @@ describe("ExpandableAlert", () => {
     expect(copy).toHaveBeenCalledTimes(1);
     expect(copy).toHaveBeenCalledWith(metadata);
   });
+
+  it("should work inside a snackbar", async () => {
+    const SnackbarAlert = () => {
+      const [open, setOpen] = useState(false);
+
+      return (
+        <Box>
+          <Button onClick={() => setOpen(true)}>snackbar</Button>
+          <Snackbar open={open}>
+            <ExpandableAlert severity="info" message="lorem ipsum" onClose={() => setOpen(false)} />
+          </Snackbar>
+        </Box>
+      );
+    };
+
+    render(<SnackbarAlert />);
+
+    await userEvent.click(screen.getByRole("button", { name: /snackbar/i }));
+
+    expect(screen.getByText(/lorem ipsum/i)).toBeVisible();
+  });
 });