feat(organisms): ajustes en comportamiento de flashNotification

- componente alert recibe string con elementos html inmersos, validando estos antes de montarlos
- componentes reciben sx como props para modificarlos: label, tinyAlert, btn y sus variantes, alerts, newTooltip
- optimizan los test, dejando mock globales

Author: Jonathangarrido

.gitignore

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

__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-lock.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
-}
+}

package.json

@@ -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/Icons/Base.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/Label/Label.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/atoms/TinyAlert/TinyAlert.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 />}>