norma-library 0.6.85 → 0.6.87

package/src/components/Svgs.tsx

@@ -498,9 +498,231 @@ export const iconsSVG = {
   warning: (
     <>
       <g id="warning">
-        <path strokeWidth="0" d="M27.5 55C12.34 55 0 42.66 0 27.5S12.34 0 27.5 0 55 12.34 55 27.5 42.66 55 27.5 55Zm0-48.89c-11.79 0-21.39 9.6-21.39 21.39s9.6 21.39 21.39 21.39 21.39-9.6 21.39-21.39S39.29 6.11 27.5 6.11Z"/>
-        <path strokeWidth="0" d="M27.5 29.89a3.06 3.06 0 0 1-3.06-3.06v-8.71a3.06 3.06 0 1 1 6.12 0v8.71a3.06 3.06 0 0 1-3.06 3.06ZM27.5 40.32c-.81 0-1.59-.33-2.16-.9-.57-.57-.9-1.34-.9-2.16s.33-1.59.9-2.16c1.12-1.14 3.18-1.14 4.32 0 .57.57.9 1.37.9 2.16s-.33 1.59-.9 2.16-1.37.9-2.16.9Z"/>
+        <path strokeWidth="0" d="M27.5 55C12.34 55 0 42.66 0 27.5S12.34 0 27.5 0 55 12.34 55 27.5 42.66 55 27.5 55Zm0-48.89c-11.79 0-21.39 9.6-21.39 21.39s9.6 21.39 21.39 21.39 21.39-9.6 21.39-21.39S39.29 6.11 27.5 6.11Z" />
+        <path strokeWidth="0" d="M27.5 29.89a3.06 3.06 0 0 1-3.06-3.06v-8.71a3.06 3.06 0 1 1 6.12 0v8.71a3.06 3.06 0 0 1-3.06 3.06ZM27.5 40.32c-.81 0-1.59-.33-2.16-.9-.57-.57-.9-1.34-.9-2.16s.33-1.59.9-2.16c1.12-1.14 3.18-1.14 4.32 0 .57.57.9 1.37.9 2.16s-.33 1.59-.9 2.16-1.37.9-2.16.9Z" />
       </g>
     </>
   ),
+  olosAcademy: (
+    <svg xmlns="http://www.w3.org/2000/svg" width="" height="" viewBox="0 0 32.902 19.741">
+      <path
+        id="Icon_awesome-graduation-cap"
+        data-name="Icon awesome-graduation-cap"
+        d="M31.994,9.086,17.654,4.68a4.107,4.107,0,0,0-2.405,0L.908,9.086a1.21,1.21,0,0,0,0,2.344l2.5.768a4.051,4.051,0,0,0-.919,2.411,1.586,1.586,0,0,0-.131,2.726L1.045,23.24a.822.822,0,0,0,.8,1H4.732a.823.823,0,0,0,.8-1L4.223,17.334a1.582,1.582,0,0,0-.093-2.7,2.425,2.425,0,0,1,1.064-1.888l10.054,3.089a4.111,4.111,0,0,0,2.405,0L31.994,11.43a1.211,1.211,0,0,0,0-2.344ZM18.137,17.408a5.755,5.755,0,0,1-3.372,0L7.31,15.118l-.729,5.833c0,1.817,4.419,3.29,9.871,3.29s9.871-1.473,9.871-3.29l-.729-5.833-7.456,2.291Z"
+        transform="translate(0 -4.5)"
+      />
+    </svg>
+  ),
+  olosFinancial: (
+    <svg xmlns="http://www.w3.org/2000/svg" width="" height="" viewBox="0 0 13.457 23.782">
+      <path
+        id="Icon_metro-money"
+        data-name="Icon metro-money"
+        d="M17.935,16.865c-3-.78-3.964-1.579-3.964-2.834,0-1.44,1.328-2.451,3.567-2.451,2.352,0,3.224,1.123,3.3,2.775h2.92A5.26,5.26,0,0,0,19.52,9.32V6.427H15.556V9.281c-2.563.562-4.624,2.213-4.624,4.77,0,3.052,2.53,4.571,6.21,5.457,3.31.793,3.964,1.949,3.964,3.191,0,.905-.641,2.358-3.567,2.358-2.722,0-3.8-1.222-3.937-2.775H10.688c.165,2.894,2.325,4.512,4.869,5.06v2.867H19.52V27.368c2.57-.5,4.624-1.982,4.624-4.7,0-3.739-3.211-5.021-6.21-5.807Z"
+        transform="translate(-10.688 -6.427)"
+        fill=""
+      />
+    </svg>
+  ),
+  olosSupport: (
+    <svg xmlns="http://www.w3.org/2000/svg" width="" height="" viewBox="0 0 27.599 27.599">
+      <g id="Icon_feather-help-circle" data-name="Icon feather-help-circle" transform="translate(-1.5 -1.5)">
+        <path
+          id="Caminho_2020"
+          data-name="Caminho 2020"
+          d="M27.6,15.3A12.3,12.3,0,1,1,15.3,3,12.3,12.3,0,0,1,27.6,15.3Z"
+          transform="translate(0 0)"
+          fill="none"
+          stroke=""
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="3"
+        />
+        <path
+          id="Caminho_2021"
+          data-name="Caminho 2021"
+          d="M13.635,12.959a3.69,3.69,0,0,1,7.171,1.23c0,2.46-3.69,3.69-3.69,3.69"
+          transform="translate(-1.915 -1.349)"
+          fill="none"
+          stroke=""
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="3"
+        />
+        <path
+          id="Caminho_2022"
+          data-name="Caminho 2022"
+          d="M18,25.5h0"
+          transform="translate(-2.701 -4.051)"
+          fill="none"
+          stroke=""
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="3"
+        />
+      </g>
+    </svg>
+  ),
+  olosSettings: (
+    <svg xmlns="http://www.w3.org/2000/svg" width="" height="" viewBox="0 0 23.536 23.536">
+      <g id="Icon_feather-settings" data-name="Icon feather-settings" transform="translate(-0.5 -0.5)">
+        <path
+          id="Caminho_2023"
+          data-name="Caminho 2023"
+          d="M19.373,16.437A2.937,2.937,0,1,1,16.437,13.5,2.937,2.937,0,0,1,19.373,16.437Z"
+          transform="translate(-4.169 -4.169)"
+          fill="none"
+          stroke=""
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+        />
+        <path
+          id="Caminho_2024"
+          data-name="Caminho 2024"
+          d="M19.512,15.2a1.615,1.615,0,0,0,.323,1.782l.059.059a1.959,1.959,0,1,1-2.77,2.77l-.059-.059A1.628,1.628,0,0,0,14.3,20.912v.166a1.958,1.958,0,1,1-3.916,0V20.99a1.615,1.615,0,0,0-1.057-1.478,1.615,1.615,0,0,0-1.782.323l-.059.059a1.959,1.959,0,1,1-2.77-2.77l.059-.059A1.628,1.628,0,0,0,3.624,14.3H3.458a1.958,1.958,0,1,1,0-3.916h.088A1.615,1.615,0,0,0,5.024,9.331,1.615,1.615,0,0,0,4.7,7.55l-.059-.059a1.959,1.959,0,1,1,2.77-2.77l.059.059A1.615,1.615,0,0,0,9.253,5.1h.078a1.615,1.615,0,0,0,.979-1.478V3.458a1.958,1.958,0,1,1,3.916,0v.088A1.628,1.628,0,0,0,16.986,4.7l.059-.059a1.959,1.959,0,1,1,2.77,2.77l-.059.059a1.615,1.615,0,0,0-.323,1.782v.078a1.615,1.615,0,0,0,1.478.979h.166a1.958,1.958,0,1,1,0,3.916H20.99a1.615,1.615,0,0,0-1.478.979Z"
+          transform="translate(0 0)"
+          fill="none"
+          stroke=""
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth="2"
+        />
+      </g>
+    </svg>
+  ),
+  olosConsumption: (
+    <svg xmlns="http://www.w3.org/2000/svg" width="" height="" viewBox="0 0 31.138 23.47">
+      <path
+        id="Icon_feather-cloud"
+        data-name="Icon feather-cloud"
+        d="M23.232,13.67H21.621a10.227,10.227,0,1,0-9.9,12.784H23.232a6.392,6.392,0,1,0,0-12.784Z"
+        transform="translate(0.014 -4.485)"
+        fill="none"
+        stroke=""
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="3"
+      />
+    </svg>
+  ),
+  olosMarketing: (
+    <svg xmlns="http://www.w3.org/2000/svg" width="" height="" viewBox="0 0 24.76 22.856">
+      <path
+        id="Icon_ionic-md-business"
+        data-name="Icon ionic-md-business"
+        d="M16.053,9.577V4.5H3.375V27.356h24.76V9.577ZM8.446,24.814H5.911V22.273H8.446Zm0-5.077H5.911V17.2H8.446Zm0-5.077H5.911V12.119H8.446Zm0-5.083H5.911V7.036H8.446Zm5.071,15.237H10.982V22.273h2.536Zm0-5.077H10.982V17.2h2.536Zm0-5.077H10.982V12.119h2.536Zm0-5.083H10.982V7.036h2.536ZM25.6,24.814H16.053V22.273h2.536V19.737H16.053V17.2h2.536V14.654H16.053V12.119H25.6ZM23.362,14.66H20.826V17.2h2.536Zm0,5.077H20.826v2.541h2.536Z"
+        transform="translate(-3.375 -4.5)"
+        fill=""
+      />
+    </svg>
+  ),
+  olosDownload: (
+    <>
+      <svg xmlns="http://www.w3.org/2000/svg" width="" height="" viewBox="0 0 21.592 21.592">
+        <g id="Icon_feather-download" data-name="Icon feather-download" transform="translate(-3 -3)">
+          <path
+            id="Caminho_2025"
+            data-name="Caminho 2025"
+            d="M23.092,22.5v4.132A2.066,2.066,0,0,1,21.026,28.7H6.566A2.066,2.066,0,0,1,4.5,26.632V22.5"
+            transform="translate(0 -5.605)"
+            fill="none"
+            stroke=""
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="3"
+          />
+          <path
+            id="Caminho_2026"
+            data-name="Caminho 2026"
+            d="M10.5,15l5.165,5.165L20.829,15"
+            transform="translate(-1.868 -3.27)"
+            fill="none"
+            stroke=""
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="3"
+          />
+          <path
+            id="Caminho_2027"
+            data-name="Caminho 2027"
+            d="M18,16.895V4.5"
+            transform="translate(-4.204)"
+            fill="none"
+            stroke=""
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="3"
+          />
+        </g>
+      </svg>
+    </>
+  ),
+  olosPartners: (
+    <svg xmlns="http://www.w3.org/2000/svg" width="" height="" viewBox="0 0 27.924 16.76">
+      <path
+        id="Icon_awesome-handshake"
+        data-name="Icon awesome-handshake"
+        d="M18.966,4.5H15.218a1.4,1.4,0,0,0-.942.367L9.987,8.793s-.009.013-.013.017a1.736,1.736,0,0,0-.092,2.443,1.82,1.82,0,0,0,2.448.118s.013,0,.017-.009l3.486-3.194a.7.7,0,0,1,.942,1.03l-1.139,1.043L21.99,15.4a3.144,3.144,0,0,1,.345.336V7.292L19.952,4.91a1.386,1.386,0,0,0-.986-.41Zm4.769,2.8V17.07a1.4,1.4,0,0,0,1.4,1.4h2.792V7.3ZM25.83,17.07a.7.7,0,1,1,.7-.7A.7.7,0,0,1,25.83,17.07ZM0,18.462H2.792a1.4,1.4,0,0,0,1.4-1.4V7.3H0Zm2.094-2.788a.7.7,0,1,1-.7.7A.7.7,0,0,1,2.094,15.674Zm19.019.812L14.6,11.2,13.29,12.4A3.141,3.141,0,0,1,9.045,7.768L12.614,4.5H8.957a1.394,1.394,0,0,0-.986.41L5.585,7.292v9.769h.8l3.949,3.573a2.792,2.792,0,0,0,3.927-.406l.009-.009.781.676a1.621,1.621,0,0,0,2.282-.236l1.37-1.684.236.192a1.394,1.394,0,0,0,1.963-.205l.414-.51a1.4,1.4,0,0,0-.2-1.968Z"
+        transform="translate(0 -4.5)"
+        fill=""
+      />
+    </svg>
+  ),
+  olosAnalytics: (
+    <svg xmlns="http://www.w3.org/2000/svg" width="" height="" viewBox="0 0 29.538 24">
+      <path
+        id="Icon_metro-chart-bars"
+        data-name="Icon metro-chart-bars"
+        d="M2.571,26.092H32.109v3.692H2.571Zm3.692-7.385H9.955v5.538H6.263ZM11.8,11.323h3.692V24.246H11.8Zm5.538,5.538h3.692v7.385H17.34ZM22.878,5.784h3.692V24.246H22.878Z"
+        transform="translate(-2.571 -5.784)"
+        fill=""
+      />
+    </svg>
+  ),
+  olosJourneyX: (
+    <>
+      <svg xmlns="http://www.w3.org/2000/svg" width="26.052" height="22.796" viewBox="0 0 26.052 22.796">
+        <path
+          id="Icon_metro-table"
+          data-name="Icon metro-table"
+          d="M2.571,3.856v22.8H28.623V3.856H2.571Zm9.77,14.654V13.626h6.513v4.885Zm6.513,1.628v4.885H12.34V20.139Zm0-13.026V12H12.34V7.113h6.513Zm-8.141,0V12H4.2V7.113h6.513ZM4.2,13.626h6.513v4.885H4.2V13.626Zm16.283,0h6.513v4.885H20.482V13.626Zm0-1.628V7.113h6.513V12ZM4.2,20.139h6.513v4.885H4.2V20.139Zm16.283,4.885V20.139h6.513v4.885Z"
+          transform="translate(-2.571 -3.856)"
+          fill=""
+        />
+      </svg>
+    </>
+  ),
+  olosAnywhere: (
+    <svg xmlns="http://www.w3.org/2000/svg" width="" height="" viewBox="0 0 21.917 30.298">
+      <g id="Grupo_2083" data-name="Grupo 2083" transform="translate(-3.363 -1.039)">
+        <path
+          id="Icon_material-phonelink-erase"
+          data-name="Icon material-phonelink-erase"
+          d="M27.026,1.5H13.254A2.762,2.762,0,0,0,10.5,4.254V8.386h2.754V5.631H27.026V27.666H13.254V24.912H10.5v4.131A2.762,2.762,0,0,0,13.254,31.8H27.026a2.762,2.762,0,0,0,2.754-2.754V4.254A2.762,2.762,0,0,0,27.026,1.5Z"
+          transform="translate(-4.5 -0.461)"
+          fill=""
+        />
+        <path
+          id="Icon_awesome-map-marker-alt"
+          data-name="Icon awesome-map-marker-alt"
+          d="M3.828,11.147C.6,6.467,0,5.986,0,4.266a4.266,4.266,0,0,1,8.532,0c0,1.72-.6,2.2-3.828,6.881a.533.533,0,0,1-.877,0Zm.438-5.1A1.778,1.778,0,1,0,2.489,4.266,1.778,1.778,0,0,0,4.266,6.044Z"
+          transform="translate(3.363 10.5)"
+          fill=""
+        />
+      </g>
+    </svg>
+  ),
+  olosVm5: (
+    <svg xmlns="http://www.w3.org/2000/svg" width="" height="" viewBox="0 0 27.95 24.456">
+      <path
+        id="Icon_awesome-headphones-alt"
+        data-name="Icon awesome-headphones-alt"
+        d="M8.734,16.225H7.861a3.5,3.5,0,0,0-3.494,3.5v3.481a3.5,3.5,0,0,0,3.494,3.5h.873a1.749,1.749,0,0,0,1.747-1.75V17.975A1.748,1.748,0,0,0,8.734,16.225Zm11.355,0h-.873a1.748,1.748,0,0,0-1.747,1.75v6.981a1.749,1.749,0,0,0,1.747,1.75h.873a3.5,3.5,0,0,0,3.494-3.5V19.725a3.5,3.5,0,0,0-3.494-3.5ZM13.975,2.25C6.164,2.25.249,8.753,0,16.225v6.114a.873.873,0,0,0,.873.873h.873a.873.873,0,0,0,.873-.873V16.225a11.355,11.355,0,0,1,22.709,0v6.114a.873.873,0,0,0,.873.873h.873a.873.873,0,0,0,.873-.873V16.225C27.7,8.753,21.786,2.25,13.975,2.25Z"
+        transform="translate(0 -2.25)"
+        fill=""
+      />
+    </svg>
+  )
+
 } as const;

package/src/components/Typography/Text/interfaces.ts

@@ -1,6 +1,8 @@
+import { JSX } from 'react'
+
 export interface TextProps {
   children: JSX.Element[] | JSX.Element | string
   className?: string
   size: string
   type: string
-}
+}

package/src/components/Typography/Title/interfaces.ts

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

package/src/hooks/useClickOutside.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 
-const useClickOutside = (ref: React.RefObject<HTMLElement>, callback: () => void) => {
+const useClickOutside = (ref: React.RefObject<HTMLElement | null>, callback: () => void) => {
   const handleClickOutside = (event: MouseEvent) => {
     if (ref.current && !ref.current.contains(event.target as Node)) {
       callback();

package/src/index.ts

@@ -32,7 +32,6 @@ import { ModalStatus } from './components/StatusModal/StatusModal';
 import { breakpoints } from './utils/styledBreakpoints';
 
 import { useTheme } from '@mui/material';
-import { IconifyIcon } from './components/IconifyIcon';
 
 export {
   Accordion,
@@ -44,7 +43,6 @@ export {
   DatePicker,
   getPalette,
   IconButton,
-  IconifyIcon,
   Icons,
   Modal,
   Paper,

package/src/interfaces/Icons.ts

@@ -1,15 +1,16 @@
 import { ComponentProps } from 'react';
 import { IconScale, IconColors, IconType } from '../types';
 import { Svg } from '../components/Icons';
+import { SvgIconComponent } from '@mui/icons-material';
 
 export interface IconsProps extends ComponentProps<typeof Svg> {
   useSymbol?: boolean;
   scale?: IconScale;
   color?: IconColors;
-  width?: number;
-  height?: number;
+  width?: number | string;
+  height?: number | string;
   fill?: string;
-  icon: IconType;
+  icon: SvgIconComponent | IconType;
 }
 
 export interface SvgProps {

package/src/interfaces/ProductCard.ts

@@ -1,25 +1,34 @@
+import { iconsSVG } from '../components/Svgs'
+import { IconScale } from '../types'
+import { SvgIconComponent } from '@mui/icons-material'
 import { ReactNode } from 'react'
 
 export interface ProductCardProps {
-    // product?: string
-    onClick?: () => void
-    disabled?: boolean
-    color: string
-    iconColor: string
-    iconSize: string
-    iconName: string
-    title: string
-    description: string
-    hasBorder?: boolean
-    flaggable?: boolean
-    flagged?: boolean
+  // product?: string
+  onClick?: () => void
+  disabled?: boolean
+  color: string
+  title: string
+  description: string
+  hasBorder?: boolean
+  favorite?: {
+    flagged: boolean
+    onFlag: () => any
   }
-  
-  
+  icon?: {
+      bgColor?: string;
+      iconColor?: string;
+      iconName?: keyof typeof iconsSVG | SvgIconComponent;
+      iconWidth?: string | number;
+      iconHeight?: string | number;
+      scale?: IconScale;
+    }
+}
+
+
 export interface BgIconProps {
-    $bColor: string
-    children?: ReactNode
-    className?: string
-    color: string
-  }
-  
+  $bColor: string
+  children?: ReactNode
+  className?: string
+  color: string
+}

package/src/interfaces/ServiceCard.ts

@@ -1,12 +1,21 @@
+import { SvgIconComponent } from "@mui/icons-material";
+import { iconsSVG } from "../components/Svgs";
+import { IconColors, IconScale } from "../types";
+
 export interface ServiceCardProps {
-    // service: string;
-    title?: string;
-    description: string;
-    onClick?: () => void;
-    disabled?: boolean;
-    color?: string;
+  // service: string;
+  title?: string;
+  description: string;
+  onClick?: () => void;
+  disabled?: boolean;
+  icon?: {
+    bgColor?: string;
     iconColor?: string;
-    iconName?: string;
-    borderColor?: string;
-    iconSize?: string;
-  }
+    iconName?: keyof typeof iconsSVG | SvgIconComponent;
+    iconWidth?: string | number;
+    iconHeight?: string | number;
+    scale?: IconScale;
+  }
+  borderColor?: string;
+  color?: IconColors | string;
+}

package/src/stories/Accordion.stories.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import React from 'react'
 
-import type { Meta, StoryObj } from '@storybook/react';
-import { Accordion } from '../components';
-import { DataAccordion } from '../types';
-import { Typography } from '@mui/material';
+import type { Meta, StoryObj } from '@storybook/react'
+import { Accordion } from '../components'
+import { DataAccordion } from '../types'
+import { Typography } from '@mui/material'
 
 const data: DataAccordion[] = [
   {
@@ -11,8 +11,8 @@ const data: DataAccordion[] = [
     id: 'panel-1',
     children: (
       <Typography>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
-        lobortis eget.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit
+        amet blandit leo lobortis eget.
       </Typography>
     ),
   },
@@ -21,12 +21,12 @@ const data: DataAccordion[] = [
     id: 'panel-2',
     children: (
       <Typography>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo
-        lobortis eget.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit
+        amet blandit leo lobortis eget.
       </Typography>
     ),
   },
-];
+]
 
 const meta = {
   title: 'Display/Accordion',
@@ -38,28 +38,28 @@ const meta = {
   argTypes: {
     data: data,
   },
-} satisfies Meta<typeof Accordion>;
+} satisfies Meta<typeof Accordion>
 
-export default meta;
+export default meta
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof meta>
 
 export const AccordionBasic = () => {
   return (
     <div style={{ width: '480px', marginBottom: 30 }}>
       <Accordion data={data} />
     </div>
-  );
-};
+  )
+}
 
-AccordionBasic.storyName = 'Accordion Basic';
+AccordionBasic.storyName = 'Accordion Basic'
 
 export const AccordionExpanded = () => {
   return (
     <div style={{ width: '480px', marginBottom: 30 }}>
       <Accordion data={data} defaultExpanded="panel-1" />
     </div>
-  );
-};
+  )
+}
 
-AccordionExpanded.storyName = 'Accordion Expanded';
+AccordionExpanded.storyName = 'Accordion Expanded'

package/src/stories/Avatar.stories.tsx

@@ -1,9 +1,9 @@
-import React from 'react';
+import React from 'react'
 
-import type { Meta } from '@storybook/react';
-import { Avatar, Icons } from '../components';
-import { AvatarGroup, Stack } from '@mui/material';
-import { green, pink } from '@mui/material/colors';
+import type { Meta } from '@storybook/react'
+import { Avatar, Icons } from '../components'
+import { AvatarGroup, Stack } from '@mui/material'
+import { green, pink } from '@mui/material/colors'
 
 const meta = {
   title: 'Display/Avatar',
@@ -13,28 +13,28 @@ const meta = {
   },
   tags: ['autodocs'],
   argTypes: {},
-} satisfies Meta<typeof Avatar>;
+} satisfies Meta<typeof Avatar>
 
-export default meta;
+export default meta
 
 function stringToColor(string: string) {
-  let hash = 0;
-  let i;
+  let hash = 0
+  let i
 
   /* eslint-disable no-bitwise */
   for (i = 0; i < string.length; i += 1) {
-    hash = string.charCodeAt(i) + ((hash << 5) - hash);
+    hash = string.charCodeAt(i) + ((hash << 5) - hash)
   }
 
-  let color = '#';
+  let color = '#'
 
   for (i = 0; i < 3; i += 1) {
-    const value = (hash >> (i * 8)) & 0xff;
-    color += `00${value.toString(16)}`.slice(-2);
+    const value = (hash >> (i * 8)) & 0xff
+    color += `00${value.toString(16)}`.slice(-2)
   }
   /* eslint-enable no-bitwise */
 
-  return color;
+  return color
 }
 
 function stringAvatar(name: string) {
@@ -43,7 +43,7 @@ function stringAvatar(name: string) {
       bgcolor: stringToColor(name),
     },
     children: `${name.split(' ')[0][0]}${name.split(' ')[1][0]}`,
-  };
+  }
 }
 
 export const AvatarBasic = () => {
@@ -51,8 +51,8 @@ export const AvatarBasic = () => {
     <>
       <Avatar src="https://mui.com/static/images/avatar/2.jpg" />
     </>
-  );
-};
+  )
+}
 
 export const AvatarVariants = () => {
   return (
@@ -61,8 +61,8 @@ export const AvatarVariants = () => {
       <Avatar src="https://mui.com/static/images/avatar/2.jpg" variant="rounded" />
       <Avatar src="https://mui.com/static/images/avatar/3.jpg" />
     </Stack>
-  );
-};
+  )
+}
 
 export const AvatarLetters = () => {
   return (
@@ -73,20 +73,24 @@ export const AvatarLetters = () => {
         <Avatar {...stringAvatar('Tim Neutkens')} />
       </Stack>
     </>
-  );
-};
+  )
+}
 
 export const AvatarSizes = () => {
   return (
     <>
       <Stack direction="row" spacing={2}>
-        <Avatar src="https://mui.com/static/images/avatar/1.jpg" variant="square" sx={{ width: 24, height: 24 }} />
+        <Avatar
+          src="https://mui.com/static/images/avatar/1.jpg"
+          variant="square"
+          sx={{ width: 24, height: 24 }}
+        />
         <Avatar src="https://mui.com/static/images/avatar/2.jpg" variant="rounded" />
         <Avatar src="https://mui.com/static/images/avatar/3.jpg" sx={{ width: 56, height: 56 }} />
       </Stack>
     </>
-  );
-};
+  )
+}
 
 export const AvatarWidthIcons = () => {
   return (
@@ -103,8 +107,8 @@ export const AvatarWidthIcons = () => {
         </Avatar>
       </Stack>
     </>
-  );
-};
+  )
+}
 
 export const AvatarGrouped = () => {
   return (
@@ -119,5 +123,5 @@ export const AvatarGrouped = () => {
         </AvatarGroup>
       </Stack>
     </>
-  );
-};
+  )
+}

package/src/stories/Badge.stories.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
+import React from 'react'
 
-import type { Meta } from '@storybook/react';
-import { Avatar, Badge, Icons } from '../components';
-import { AvatarGroup, Stack } from '@mui/material';
+import type { Meta } from '@storybook/react'
+import { Avatar, Badge, Icons } from '../components'
+import { AvatarGroup, Stack } from '@mui/material'
 
 const meta = {
   title: 'Display/Badge',
@@ -12,9 +12,9 @@ const meta = {
   },
   tags: ['autodocs'],
   argTypes: {},
-} satisfies Meta<typeof Badge>;
+} satisfies Meta<typeof Badge>
 
-export default meta;
+export default meta
 
 export const BadgeBasic = () => {
   return (
@@ -23,17 +23,19 @@ export const BadgeBasic = () => {
         <Icons icon="user" />
       </Badge>
     </>
-  );
-};
+  )
+}
 
 export const BadgeColors = () => {
   return (
     <Stack direction="row" spacing={2}>
-      {['primary', 'secondary', 'default', 'error', 'info', 'success', 'warning'].map((color, key) => (
-        <Badge badgeContent={4} color={color} key={key}>
-          <Icons icon="user" />
-        </Badge>
-      ))}
+      {['primary', 'secondary', 'default', 'error', 'info', 'success', 'warning'].map(
+        (color, key) => (
+          <Badge badgeContent={4} color={color} key={key}>
+            <Icons icon="user" />
+          </Badge>
+        ),
+      )}
     </Stack>
-  );
-};
+  )
+}