feat(organisms): ajustes en comportamiento de flashNotification

.gitignore

@@ -8,4 +8,5 @@ yarn-error.log
 docs
 .eslintcache
 tsconfig.tsbuildinfo
-*.env*
+*.env*
+.jest-cache

.vscode/settings.json

@@ -16,5 +16,13 @@
     "titleBar.inactiveBackground": "#61dafb99",
     "titleBar.inactiveForeground": "#15202b99"
   },
-  "peacock.color": "#61dafb"
+  "peacock.color": "#61dafb",
+  "editor.formatOnSave": true,
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "mdx"
+  ]
 }

__mocks__/dompurify.ts

@@ -0,0 +1,5 @@
+const DOMPurify = {
+  sanitize: (html: string) => html,
+}
+
+export default DOMPurify

__mocks__/react-ripples.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+
+const Ripples = ({ children }: { children: React.ReactNode }) => {
+  return <>{children}</>
+}
+
+export default Ripples

jest.config.js

@@ -10,6 +10,14 @@ module.exports = {
   setupFilesAfterEnv: ['<rootDir>/src/test/jest-setup.ts'],
   watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'],
   roots: ['<rootDir>'],
+  maxWorkers: '50%',
+  cacheDirectory: '<rootDir>/.jest-cache',
+  globals: {
+    'ts-jest': {
+      diagnostics: false,
+      isolatedModules: true,
+    },
+  },
   modulePaths: tsConfig.compilerOptions ? [tsConfig.compilerOptions.baseUrl] : [],
   moduleNameMapper: {
     ...(tsConfig.compilerOptions && tsConfig.compilerOptions.paths
@@ -18,4 +26,4 @@ module.exports = {
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/__mocks__/fileMock.js',
     '\\.(css)$': 'identity-obj-proxy'
   }
-};
+};

package.json

@@ -128,7 +128,9 @@
     "@emotion/react": "11.8.2",
     "@emotion/styled": "11.8.1",
     "date-fns": "^4.1.0",
+    "dompurify": "^3.3.1",
     "framer-motion": "6.2.8",
+    "html-react-parser": "^5.2.11",
     "react-hot-toast": "2.4.1",
     "react-ripples": "2.2.1"
   },
@@ -137,4 +139,4 @@
     "@types/react-dom": "17.0.2"
   },
   "sideEffects": false
-}
+}

src/atoms/Icons/Base.tsx

@@ -11,7 +11,7 @@ export interface BaseProps {
 }
 interface IconProps extends BaseProps {
   viewBox?: string
-  children: React.ReactChild | React.ReactChild[]
+  children: React.ReactNode
   title?: string
 }
 

src/atoms/Label/Label.tsx

@@ -1,13 +1,14 @@
-import { Box } from '@chakra-ui/react'
+import { Box, CSSObject } from '@chakra-ui/react'
 
 import { vars } from '@theme'
 
 export interface LabelProps {
-  children: React.ReactChild
+  children: React.ReactNode
   bg?: string
   color?: string
   size?: 'md' | 'sm'
   m?: string
+  sx?: CSSObject
 }
 
 /**
@@ -20,6 +21,7 @@ export function Label({
   color = vars('colors-neutral-darkCharcoal'),
   size = 'md',
   m = '0',
+  sx,
 }: LabelProps): JSX.Element {
   const config = {
     md: {
@@ -45,6 +47,7 @@ export function Label({
       lineHeight=".875rem"
       m={m}
       p={config[size].p}
+      sx={sx}
     >
       {children}
     </Box>

src/atoms/TinyAlert/TinyAlert.tsx

@@ -1,4 +1,4 @@
-import { Box } from '@chakra-ui/react'
+import { Box, CSSObject } from '@chakra-ui/react'
 import { vars } from '@theme'
 
 import { TinyAlertInfo, TinyAlertError, TinyAlertWarning, TinyAlertSuccess } from '../Icons'
@@ -7,6 +7,7 @@ export interface props {
   status: 'success' | 'error' | 'info' | 'warning' | 'answered' | 'pending' | 'omitted' | 'new'
   text?: string
   margin?: string
+  sx?: CSSObject
 }
 
 /**
@@ -16,7 +17,7 @@ export interface props {
  * <TinyAlert status="info" />
  */
 
-export function TinyAlert({ status, text, margin = '0' }: props): JSX.Element | null {
+export function TinyAlert({ status, text, margin = '0', sx }: props): JSX.Element | null {
   const alerts = {
     success: {
       icon: <TinyAlertSuccess />,
@@ -84,6 +85,7 @@ export function TinyAlert({ status, text, margin = '0' }: props): JSX.Element |
       width="fit-content"
       borderRadius=".25rem"
       className="TinyAlert-Box"
+      sx={sx}
     >
       {alerts[status].icon && (
         <Box

src/documentation/Documentation.tsx

@@ -5,6 +5,7 @@ import { routes } from './utils/routes'
 import { Home, NoMatch } from './pages'
 import { Layout } from './components'
 import { Box } from '@chakra-ui/react'
+import { FlashNotificationGlobal } from '@/organisms/Alerts/FlashNotification'
 
 export const Documentation = (): JSX.Element => {
   React.useEffect(() => {
@@ -16,6 +17,7 @@ export const Documentation = (): JSX.Element => {
 
   return (
     <Box w="100%" overflowX="hidden">
+      <FlashNotificationGlobal />
       <BrowserRouter>
         <Routes>
           <Route path="/" element={<Layout />}>

src/documentation/components/FlashNotificationDemo.tsx

@@ -5,20 +5,16 @@ import { Box, Button } from '@chakra-ui/react'
 export default function FlashNotificationDemo({
   state,
   message,
+  maxContent,
 }: IFlashNotificationProps): JSX.Element {
   const { show, active, config } = useFlashNotification({
     state: state,
     message: message,
+    maxContent: maxContent,
   })
   return (
     <Box>
-      <Button
-        onClick={() => {
-          active()
-        }}
-      >
-        {state}
-      </Button>
+      <Button onClick={active}>{state}</Button>
       <FlashNotification {...config} show={show} />
     </Box>
   )

src/documentation/pages/Organisms/Alerts.tsx

@@ -200,7 +200,7 @@ export const ViewAlert = (): JSX.Element => {
       <MyText>Tipos implementados en el Alert</MyText>
       <Code
         text={`interface IAlertProps {
-          children?: React.ReactChild | React.ReactChild[]
+          children?: React.ReactNode
           canDismiss?: boolean // Muestra el botón para cerrar
           buttonText?: string // Texto del botón
           buttonIcon?: React.ReactElement // Ícono del botón

src/documentation/pages/Organisms/FlashNotification.tsx

@@ -35,7 +35,11 @@ export const ViewFlashNotification = (): JSX.Element => {
       <MyTitle>Estados</MyTitle>
       <MyText>Existen 4 posibles estados que definen el ícono y color de la notificación.</MyText>
       <ListComponent>
-        <FlashNotificationDemo state="info" message="Mensaje informativo" />
+        <FlashNotificationDemo
+          maxContent
+          state="info"
+          message="<b>¡Grupo creado!</b><br />Tu grupo ha sido creado. Ahora puedes invitar a tus compañeros."
+        />
         <FlashNotificationDemo state="success" message="Mensaje de éxito" />
         <FlashNotificationDemo state="error" message="Mensaje de error" />
         <FlashNotificationDemo state="warning" message="Mensaje de advertencia" />