norma-library 0.6.85 → 0.6.87

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "norma-library",
-  "version": "0.6.85",
+  "version": "0.6.87",
   "private": false,
   "description": "Olos/Norma-DS. Design System based on Material UI, developed with TypeScript and Styled Components to create reusable and consistent components in web applications.",
   "scripts": {
@@ -33,21 +33,20 @@
     "@babel/preset-typescript": "^7.22.15",
     "@emotion/core": "^11.0.0",
     "@emotion/styled-base": "^11.0.0",
-    "@iconify/react": "^5.2.0",
     "@mdx-js/loader": "^2.3.0",
-    "@storybook/addon-essentials": "^7.5.0",
-    "@storybook/addon-interactions": "^7.5.0",
-    "@storybook/addon-links": "^7.5.0",
-    "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/addon-essentials": "^8.5.6",
+    "@storybook/addon-interactions": "^8.5.6",
+    "@storybook/addon-links": "^8.5.6",
+    "@storybook/addon-onboarding": "^8.5.6",
     "@storybook/addon-styling": "^1.3.7",
-    "@storybook/blocks": "^7.5.0",
-    "@storybook/react": "^7.5.0",
-    "@storybook/react-vite": "^7.5.0",
-    "@storybook/react-webpack5": "^7.5.0-alpha.1",
-    "@storybook/testing-library": "^0.2.2",
-    "@types/react": "^18.2.15",
-    "@types/react-datepicker": "^4.19.1",
-    "@types/react-dom": "^18.2.7",
+    "@storybook/blocks": "^8.5.6",
+    "@storybook/react": "^8.5.6",
+    "@storybook/react-vite": "^8.5.6",
+    "@storybook/react-webpack5": "^8.5.6",
+    "@storybook/test": "^8.5.6",
+    "@types/react": "^19.0.0",
+    "@types/react-datepicker": "^7.0.0",
+    "@types/react-dom": "^19.0.0",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react": "^4.0.3",
@@ -61,17 +60,17 @@
     "eslint": "^8.45.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.3",
-    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-storybook": "^0.11.2",
     "git-cz": "^4.9.0",
     "lint-staged": "^14.0.1",
     "path": "^0.12.7",
     "postcss": "^8.4.29",
     "postcss-prettify": "^0.3.4",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "rimraf": "^5.0.5",
-    "storybook": "^7.5.0",
-    "storybook-dark-mode": "^3.0.1",
+    "storybook": "^8.5.6",
+    "storybook-dark-mode": "^4.0.2",
     "style-loader": "^3.3.3",
     "tsconfig-paths-webpack-plugin": "^4.1.0",
     "typescript": "^5.0.2",
@@ -93,25 +92,24 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
-    "@emotion/react": "^11.11.1",
+    "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.14.9",
     "@mui/lab": "^5.0.0-alpha.152",
     "@mui/material": "^5.16.7",
-    "@mui/x-date-pickers": "^6.20.2",
-    "@storybook/addon-mdx-gfm": "^7.5.2",
+    "@mui/x-date-pickers": "^7.26.0",
+    "@storybook/addon-mdx-gfm": "^8.5.6",
     "@tanstack/react-table": "^8.10.7",
     "dayjs": "^1.11.9",
     "react-datepicker": "^7.5.0",
-    "react-i18next": "^13.2.2",
+    "react-i18next": "^15.4.0",
     "react-select": "^5.8.0",
     "styled-components": "^6.1.0",
     "tslib": "^2.6.2"
   },
   "peerDependencies": {
-    "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0",
-    "@iconify/react": "^5.2.0"
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "browserslist": {
     "production": [

package/src/components/Box/interfaces.ts

@@ -1,3 +1,5 @@
+import { JSX } from "react"
+
 export interface BoxProps {
   children: JSX.Element[] | JSX.Element
   size: string

package/src/components/Breadcrumb/index.tsx

@@ -1,25 +1,30 @@
 import React, { useMemo } from 'react';
 import * as S from "./styles"
-import { BreadcrumbProps, Link } from './interface';
+import { BreadCrumbProps, Item } from './interface';
+import { Icons } from '../Icons';
+import { Home } from '@mui/icons-material';
 
-const Breadcrumb:React.FC<BreadcrumbProps> = ({ links, onChange }) => {
-  const listLinks = useMemo(() => {
-    return links.map((link: Link, index: number, self: Link[]) => {
+const Breadcrumb: React.FC<BreadCrumbProps> = ({ items, onHomeClick, onPathClick }) => {
+  const listItems = useMemo(() => {
+    return items.map((item: Item, index: number, self: Item[]) => {
       const showIcon = self.length > index + 1
+      const isFixedIcon = items[0] === item
       return (
-        <div className='content' key={index}>
-          <S.Link onClick={() => onChange(link)}>{link.name}</S.Link>
-          { showIcon ? <S.Arrow><i className="icon"></i></S.Arrow> : null }
+        <div className='content' key={index} onClick={(event) => items[0] === item ? onHomeClick(event) : onPathClick(item, event)}>
+          {isFixedIcon && <Icons icon={Home} />}
+          {!isFixedIcon && item.icon && <Icons icon={item.icon} color='inherit' />}
+          <S.Item>{item.label}</S.Item>
+          {showIcon && <S.Divisor>/</S.Divisor>}
         </div>
       )
     })
-  }, [links])
+  }, [items])
 
   return (
     <S.Container>
-      <S.ListLinks>
-        { listLinks }
-      </S.ListLinks>
+      <S.ListItems>
+        {listItems}
+      </S.ListItems>
     </S.Container>
   )
 }

package/src/components/Breadcrumb/interface.ts

@@ -1,9 +1,15 @@
-export interface Link {
-  name: string
-  route: string 
+import { IconType } from "../../types";
+import { SvgIconComponent } from "@mui/icons-material";
+
+export interface Item {
+  id: string;
+  label: string;
+  href: string;
+  icon?: SvgIconComponent | IconType;
 }
 
-export interface BreadcrumbProps {
-  links: Link[]
-  onChange: Function
+export interface BreadCrumbProps {
+  onPathClick: Function;
+  onHomeClick: Function;
+  items: Item[];
 }

package/src/components/Breadcrumb/styles.tsx

@@ -4,30 +4,29 @@ export const Container = styled.div`
   margin: 0 0 16px 0;
 `
 
-export const ListLinks = styled.div`
+export const ListItems = styled.div`
   display: flex;
   gap: 8px;
   .content {
     display: flex;
     gap: 8px;
+    align-items: center;
   }
 `
 
-export const Link = styled.p`
+export const Item = styled.p`
   color: #666;
   font-size: 14px;
   cursor: pointer;
+  &:hover {
+    text-decoration: underline;
+  }
 `
 
-export const Arrow = styled.div`
+export const Divisor = styled.div`
   display: flex;
   align-items: center;
-  .icon {
-    border: solid #999;
-    border-width: 0 2px 2px 0;
-    display: inline-block;
-    padding: 2px;
-    transform: rotate(-45deg);
-    -webkit-transform: rotate(-45deg);
-  }
+  justify-content: center;
+  color: #666;
+  content: '/';
 `

package/src/components/Icons.tsx

@@ -1,4 +1,5 @@
 import React, { FunctionComponent } from 'react';
+import { SvgIconComponent } from '@mui/icons-material';
 import { iconsSVG } from './Svgs';
 import { IconColors, IconScale } from '../types';
 import { IconsProps, SvgProps } from '../interfaces/Icons';
@@ -13,7 +14,7 @@ export const Svg = styled.svg<SvgProps>(
   ({ inline }) => (inline ? { display: 'inline-block' } : { display: 'block' }),
 );
 
-const scaleSize: Record<IconScale, number> = {
+const scaleSize: Partial<Record<IconScale, number>> = {
   xsmall: 14,
   small: 20,
   medium: 24,
@@ -23,7 +24,6 @@ const scaleSize: Record<IconScale, number> = {
   '3xlarge': 40,
 };
 
-// Definindo um objeto com as cores de preenchimento e traço com base no MUI
 const colors: Record<IconColors, string> = {
   inherit: palette.inherit,
   primary: palette.primary,
@@ -36,6 +36,7 @@ const colors: Record<IconColors, string> = {
   black: palette.black,
 };
 
+
 export const Icons: FunctionComponent<IconsProps> = ({
   icon,
   scale,
@@ -46,13 +47,12 @@ export const Icons: FunctionComponent<IconsProps> = ({
   let width = 24;
   let height = 24;
   if (scale) {
-    width = scaleSize[scale];
-    height = scaleSize[scale];
+    width = scaleSize[scale] || 24;
+    height = scaleSize[scale] || 24;
   }
 
-  // Obtém a cor de preenchimento e traço com base no valor da prop 'color'
-  const fill = colors[color];
-  const stroke = colors[color];
+  const fill = colors[color] || color;
+  const stroke = colors[color] || color;
 
   const Svg = styled.svg`
     display: inline-block;
@@ -70,13 +70,17 @@ export const Icons: FunctionComponent<IconsProps> = ({
     }
   `;
 
+  const isMuiIcon = typeof icon !== 'string';
+
   return (
     <Svg viewBox="0 0 56 56" width={`${width}px`} height={`${height}px`} {...props}>
       {useSymbol ? (
         <use xlinkHref={`#icon--${icon}`} fill={fill} stroke={stroke} />
+      ) : isMuiIcon ? (
+        React.createElement(icon as SvgIconComponent, { style: { fill, stroke } })
       ) : (
         React.cloneElement(iconsSVG[icon], { fill, stroke })
       )}
     </Svg>
   );
-};
+};

package/src/components/ProductCard/ProductCard.style.ts

@@ -9,6 +9,9 @@ export const ProductCardStyle = styled.div<{ disabled?: boolean, $bColor?: strin
   border-left: 7px solid ${(props) => props.hasBorder ? props.$bColor : 'transparent'} !important;
   border-radius: 5px;
 
+  p.title {
+    font-weight: 600;
+  }
 
   p.description {
     margin-bottom: ${pxToRem(17)};
@@ -37,8 +40,8 @@ export const IconCardStyle = styled.div<{ $bColor?: string; $iColor: string }>`
   box-sizing: border-box;
 
   svg {
-    max-height: 24px;
-
+  max-height: 100%;
+  max-width: 100%;
     path {
       fill: ${(props) => props.$iColor};
     }

package/src/components/ProductCard/ProductCard.tsx

@@ -5,22 +5,20 @@ import { IconCardStyle, ProductCardStyle, TitleContainer } from "./ProductCard.s
 import React from "react";
 import { IconButton } from "../IconButton";
 import GradeIcon from '@mui/icons-material/Grade'
-import { IconifyIcon } from "../IconifyIcon";
+import { Icons } from '../Icons'
+import { IconScale, IconType } from "../../types";
 
 
 export const ProductCard: React.FC<ProductCardProps> = ({
   // product = 'analytics'
   color,
-  iconColor,
-  iconSize,
+  icon,
   onClick,
   hasBorder = true,
   disabled = false,
   title,
   description,
-  iconName,
-  flaggable = false,
-  flagged = false 
+  favorite,
 }) => {
 
   /* const colors: { [key: string]: string } = {
@@ -31,38 +29,40 @@ export const ProductCard: React.FC<ProductCardProps> = ({
   }
 */
   return (
-    <ProductCardStyle disabled={disabled} $bColor={iconColor} hasBorder={hasBorder}>
+    <ProductCardStyle disabled={disabled} $bColor={icon?.iconColor} hasBorder={hasBorder}>
       <Card
         variant="outlined"
         onClick={() => onClick && onClick()}
       >
-        {flaggable && (
-           <Grid container justifyContent={'flex-end'} alignItems={'flex-start'}>
-           <Grid item>
-             <IconButton
-               sx={{ padding: 0 }}
-               aria-label="favorite"
-               onClick={(event) => {
-                 event.preventDefault()
-                 event.stopPropagation()
-               }}
-               color={flagged ? 'primary' : 'inherit'}
-               cursor="pointer"
-             >
-               <GradeIcon />
-             </IconButton>
-           </Grid>
-         </Grid>
+        {favorite?.flagged && (
+          <Grid container justifyContent={'flex-end'} alignItems={'flex-start'} position={'relative'}>
+            <Grid item>
+              <IconButton
+                sx={{
+                  padding: 0,
+                  position: 'absolute',
+                  top: '10px',
+                  right: '5px',
+                }}
+                aria-label="favorite"
+                onClick={favorite.onFlag}
+                color={favorite.flagged ? 'primary' : 'inherit'}
+                cursor="pointer"
+              >
+                <GradeIcon />
+              </IconButton>
+            </Grid>
+          </Grid>
         )}
 
         <TitleContainer>
           <IconCardStyle
-            $iColor={iconColor}
+            $iColor={icon?.iconColor || ""}
             $bColor={color}
           >
-            <IconifyIcon iconName={iconName} color={iconColor} size={iconSize || '2em'} />
+            <Icons icon={icon?.iconName as IconType} color={icon?.iconColor} scale={icon?.scale as IconScale} width={icon?.iconWidth} height={icon?.iconHeight} />
           </IconCardStyle>
-          <p>{title}</p>
+          <p className="title">{title}</p>
         </TitleContainer>
 
         <p className="description">

package/src/components/ServiceCard/ServiceCard.style.ts

@@ -31,7 +31,6 @@ export const IconCardStyle = styled.div<{ $bColor?: string; $iColor: string }>`
   box-sizing: border-box;
 
   svg {
-    max-height: 24px;
 
     path.stroke {
       stroke: ${(props) => props.$iColor};

package/src/components/ServiceCard/ServiceCard.tsx

@@ -2,13 +2,13 @@ import React from "react";
 import { ServiceCardProps } from "../../interfaces/ServiceCard";
 import { IconCardStyle, ServiceCardStyle, TitleContainer } from "./ServiceCard.style";
 import { Card } from "../Card";
-import { IconifyIcon } from "../IconifyIcon";
+import { Icons } from "../Icons";
+import { IconType, IconScale } from "../../types";
 
-export const ServiceCard: React.FC<ServiceCardProps> = ({iconName, onClick, disabled = false, color, iconColor, iconSize, description, title }) => {
+export const ServiceCard: React.FC<ServiceCardProps> = ({ icon, onClick, disabled = false, description, title}) => {
     return (
-        <ServiceCardStyle disabled={disabled} $bColor={iconColor}>
+        <ServiceCardStyle disabled={disabled} $bColor={icon?.iconColor  || ""}>
             <Card
-                border={true}
                 variant="outlined"
                 onClick={() => {
                     if (disabled) return;
@@ -16,8 +16,8 @@ export const ServiceCard: React.FC<ServiceCardProps> = ({iconName, onClick, disa
                 }}
             >
                 <TitleContainer>
-                    <IconCardStyle $iColor={iconColor || ""} $bColor={color || ""}>
-                        <IconifyIcon iconName={iconName || ""} color={iconColor} size={iconSize || "100%"}/>
+                    <IconCardStyle $iColor={icon?.iconColor || ""} $bColor={icon?.bgColor || ""}>
+                        <Icons icon={icon?.iconName as IconType} color={icon?.iconColor} scale={icon?.scale as IconScale} width={icon?.iconWidth} height={icon?.iconHeight} />
                     </IconCardStyle>
                     <div className="text">
                         <p className="title">{title}</p>