norma-library 0.5.131 → 0.5.133

package/src/components/Accordion.tsx

@@ -1,39 +1,39 @@
-import React from 'react';
-import {
-  AccordionDetails,
-  AccordionSummary,
-  Accordion as MuiAccordion,
-  Typography
-} from '@mui/material';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import { AccordionBaseProps } from '../interfaces';
-import { styled } from '@mui/material/styles';
-
-const AccordionStyled = styled(MuiAccordion)({});
-
-export const Accordion = ({ data = [], defaultExpanded = false, ...props }: AccordionBaseProps) => {
-  const [expanded, setExpanded] = React.useState<boolean | string>(defaultExpanded);
-
-  const handleChange = (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
-    console.log('Event ==> ', event);
-    setExpanded(isExpanded ? panel : false);
-  };
-
-  return (
-    <>
-      {data &&
-        data.map((item, key) => (
-          <AccordionStyled expanded={expanded === item.id} onChange={handleChange(item.id)} key={key} {...props}>
-            <AccordionSummary
-              expandIcon={<ExpandMoreIcon />}
-              aria-controls={`panel-${key}-content`}
-              id={`panel-${key}-header`}
-            >
-              <Typography sx={{ width: '66%', flexShrink: 0 }}>{item.label}</Typography>
-            </AccordionSummary>
-            <AccordionDetails>{item.children}</AccordionDetails>
-          </AccordionStyled>
-        ))}
-    </>
-  );
-};
+import React from 'react';
+import {
+  AccordionDetails,
+  AccordionSummary,
+  Accordion as MuiAccordion,
+  Typography
+} from '@mui/material';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { AccordionBaseProps } from '../interfaces';
+import { styled } from '@mui/material/styles';
+
+const AccordionStyled = styled(MuiAccordion)({});
+
+export const Accordion = ({ data = [], defaultExpanded = false, ...props }: AccordionBaseProps) => {
+  const [expanded, setExpanded] = React.useState<boolean | string>(defaultExpanded);
+
+  const handleChange = (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
+    console.log('Event ==> ', event);
+    setExpanded(isExpanded ? panel : false);
+  };
+
+  return (
+    <>
+      {data &&
+        data.map((item, key) => (
+          <AccordionStyled expanded={expanded === item.id} onChange={handleChange(item.id)} key={key} {...props}>
+            <AccordionSummary
+              expandIcon={<ExpandMoreIcon />}
+              aria-controls={`panel-${key}-content`}
+              id={`panel-${key}-header`}
+            >
+              <Typography sx={{ width: '66%', flexShrink: 0 }}>{item.label}</Typography>
+            </AccordionSummary>
+            <AccordionDetails>{item.children}</AccordionDetails>
+          </AccordionStyled>
+        ))}
+    </>
+  );
+};

package/src/components/Avatar.tsx

@@ -1,17 +1,17 @@
-import React from 'react';
-
-import { Avatar as MuiVatar } from '@mui/material';
-
-import { AvatarBaseProps } from '../interfaces';
-import { styled } from '@mui/material/styles';
-
-const AvatarStyled = styled(MuiVatar)({
-  textTransform: 'none',
-  color: 'currentcolor',
-});
-
-export const Avatar: React.FC<AvatarBaseProps> = ({ src, ...props }) => {
-  return (
-    <AvatarStyled src={src} {...props} />
-  );
-};
+import React from 'react';
+
+import { Avatar as MuiVatar } from '@mui/material';
+
+import { AvatarBaseProps } from '../interfaces';
+import { styled } from '@mui/material/styles';
+
+const AvatarStyled = styled(MuiVatar)({
+  textTransform: 'none',
+  color: 'currentcolor',
+});
+
+export const Avatar: React.FC<AvatarBaseProps> = ({ src, ...props }) => {
+  return (
+    <AvatarStyled src={src} {...props} />
+  );
+};

package/src/components/Badge.tsx

@@ -1,14 +1,14 @@
-import React from 'react';
-
-import { Badge as MuiBadge } from '@mui/material';
-
-import { BadgeBaseProps } from '../interfaces';
-import { styled } from '@mui/material/styles';
-
-const BadgeStyled = styled(MuiBadge)({});
-
-export const Badge: React.FC<BadgeBaseProps> = ({ ...props }) => {
-  return (
-    <BadgeStyled {...props} />
-  );
-};
+import React from 'react';
+
+import { Badge as MuiBadge } from '@mui/material';
+
+import { BadgeBaseProps } from '../interfaces';
+import { styled } from '@mui/material/styles';
+
+const BadgeStyled = styled(MuiBadge)({});
+
+export const Badge: React.FC<BadgeBaseProps> = ({ ...props }) => {
+  return (
+    <BadgeStyled {...props} />
+  );
+};

package/src/components/Box/index.tsx

@@ -1,13 +1,13 @@
-import React from 'react'
-import * as S from "./styles"
-import { BoxProps } from "./interfaces"
-
-const Box:React.FC<BoxProps> = ({ children, size }) => {
-  return (
-    <S.Container size={size}>
-      {children}
-    </S.Container>
-  )
-}
-
+import React from 'react'
+import * as S from "./styles"
+import { BoxProps } from "./interfaces"
+
+const Box:React.FC<BoxProps> = ({ children, size }) => {
+  return (
+    <S.Container size={size}>
+      {children}
+    </S.Container>
+  )
+}
+
 export default Box

package/src/components/Box/interfaces.ts

@@ -1,4 +1,4 @@
-export interface BoxProps {
-  children: JSX.Element[] | JSX.Element
-  size: string
+export interface BoxProps {
+  children: JSX.Element[] | JSX.Element
+  size: string
 }

package/src/components/Box/styles.tsx

@@ -1,23 +1,23 @@
-import styled from 'styled-components'
-import { BoxProps } from "./interfaces"
-
-const setSizeSelected = (size: string) => {
-  switch (size) {
-    case "small":
-      return "10px";
-    case "medium":
-      return "16px";
-    case "large":
-      return "24px"
-    default:
-      return "16px";
-  }
-} 
-
-export const Container = styled.div<BoxProps>`
-  background: #fff;
-  border-radius: 5px;
-  width: 100%;
-  box-shadow: 0px 2px 6px #0000000A;
-  padding: ${props => setSizeSelected(props.size)}
+import styled from 'styled-components'
+import { BoxProps } from "./interfaces"
+
+const setSizeSelected = (size: string) => {
+  switch (size) {
+    case "small":
+      return "10px";
+    case "medium":
+      return "16px";
+    case "large":
+      return "24px"
+    default:
+      return "16px";
+  }
+} 
+
+export const Container = styled.div<BoxProps>`
+  background: #fff;
+  border-radius: 5px;
+  width: 100%;
+  box-shadow: 0px 2px 6px #0000000A;
+  padding: ${props => setSizeSelected(props.size)}
 `

package/src/components/Breadcrumb/index.tsx

@@ -1,27 +1,27 @@
-import React, { useMemo } from 'react';
-import * as S from "./styles"
-import { BreadcrumbProps, Link } from './interface';
-
-const Breadcrumb:React.FC<BreadcrumbProps> = ({ links, onChange }) => {
-  const listLinks = useMemo(() => {
-    return links.map((link: Link, index: number, self: Link[]) => {
-      const showIcon = self.length > index + 1
-      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>
-      )
-    })
-  }, [links])
-
-  return (
-    <S.Container>
-      <S.ListLinks>
-        { listLinks }
-      </S.ListLinks>
-    </S.Container>
-  )
-}
-
-export default Breadcrumb
+import React, { useMemo } from 'react';
+import * as S from "./styles"
+import { BreadcrumbProps, Link } from './interface';
+
+const Breadcrumb:React.FC<BreadcrumbProps> = ({ links, onChange }) => {
+  const listLinks = useMemo(() => {
+    return links.map((link: Link, index: number, self: Link[]) => {
+      const showIcon = self.length > index + 1
+      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>
+      )
+    })
+  }, [links])
+
+  return (
+    <S.Container>
+      <S.ListLinks>
+        { listLinks }
+      </S.ListLinks>
+    </S.Container>
+  )
+}
+
+export default Breadcrumb

package/src/components/Breadcrumb/interface.ts

@@ -1,9 +1,9 @@
-export interface Link {
-  name: string
-  route: string 
-}
-
-export interface BreadcrumbProps {
-  links: Link[]
-  onChange: Function
+export interface Link {
+  name: string
+  route: string 
+}
+
+export interface BreadcrumbProps {
+  links: Link[]
+  onChange: Function
 }

package/src/components/Breadcrumb/styles.tsx

@@ -1,33 +1,33 @@
-import styled from "styled-components";
-
-export const Container = styled.div`
-  margin: 0 0 16px 0;
-`
-
-export const ListLinks = styled.div`
-  display: flex;
-  gap: 8px;
-  .content {
-    display: flex;
-    gap: 8px;
-  }
-`
-
-export const Link = styled.p`
-  color: #666;
-  font-size: 14px;
-  cursor: pointer;
-`
-
-export const Arrow = 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);
-  }
+import styled from "styled-components";
+
+export const Container = styled.div`
+  margin: 0 0 16px 0;
+`
+
+export const ListLinks = styled.div`
+  display: flex;
+  gap: 8px;
+  .content {
+    display: flex;
+    gap: 8px;
+  }
+`
+
+export const Link = styled.p`
+  color: #666;
+  font-size: 14px;
+  cursor: pointer;
+`
+
+export const Arrow = 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);
+  }
 `

package/src/components/Button.tsx

@@ -1,26 +1,26 @@
-import React from 'react';
-import { Button as MuiButton } from '@mui/material';
-import { ButtonBaseProps } from '../interfaces';
-import { styled } from '@mui/material/styles';
-
-const ButtonStyled = styled(MuiButton)({
-  textTransform: 'none',
-  '& .MuiButton-sizeLarge': {
-    height: '75px',
-    backgroundColor: 'red',
-  },
-});
-
-export const Button = ({ label, children, ...props }: ButtonBaseProps) => {
-  
-  return (
-    <ButtonStyled
-      {...props}
-      sx={{
-        color: props.variant === 'contained' ? '#FFFF' : props.color,
-      }}
-    >
-      {label ? label : children}
-    </ButtonStyled>
-  );
-};
+import React from 'react';
+import { Button as MuiButton } from '@mui/material';
+import { ButtonBaseProps } from '../interfaces';
+import { styled } from '@mui/material/styles';
+
+const ButtonStyled = styled(MuiButton)({
+  textTransform: 'none',
+  '& .MuiButton-sizeLarge': {
+    height: '75px',
+    backgroundColor: 'red',
+  },
+});
+
+export const Button = ({ label, children, ...props }: ButtonBaseProps) => {
+  
+  return (
+    <ButtonStyled
+      {...props}
+      sx={{
+        color: props.variant === 'contained' ? '#FFFF' : props.color,
+      }}
+    >
+      {label ? label : children}
+    </ButtonStyled>
+  );
+};

package/src/components/Card.tsx

@@ -1,38 +1,38 @@
-import React from 'react';
-import { Card as MuiCard } from '@mui/material';
-import { CardBaseProps } from '../interfaces';
-import { palette } from '../helpers';
-import { styled } from '@mui/material/styles';
-import { ColorVariant } from '@/types';
-
-const colorMap: Record<ColorVariant, string> = {
-  inherit: palette.inherit,
-  primary: palette.primary,
-  secondary: palette.secondary,
-  error: palette.error,
-  warning: palette.warning,
-  info: palette.info,
-  success: palette.success,
-};
-
-const CardStyled = styled(MuiCard)<{
-  borderColor?: ColorVariant;
-}>(({ borderColor }) => ({
-  padding: 16,
-  borderRadius: 5,
-  boxShadow: '0px 2px 8px #00000053',
-  borderLeft: borderColor ? `7px solid ${colorMap[borderColor]}` : 'none',
-}));
-
-export const Card = ({
-  children,
-  border,
-  color = 'inherit',
-  ...props
-}: CardBaseProps & { border?: boolean; color?: ColorVariant }) => {
-  return (
-    <CardStyled borderColor={border ? color : undefined} {...props}>
-      {children}
-    </CardStyled>
-  );
+import React from 'react';
+import { Card as MuiCard } from '@mui/material';
+import { CardBaseProps } from '../interfaces';
+import { palette } from '../helpers';
+import { styled } from '@mui/material/styles';
+import { ColorVariant } from '@/types';
+
+const colorMap: Record<ColorVariant, string> = {
+  inherit: palette.inherit,
+  primary: palette.primary,
+  secondary: palette.secondary,
+  error: palette.error,
+  warning: palette.warning,
+  info: palette.info,
+  success: palette.success,
+};
+
+const CardStyled = styled(MuiCard)<{
+  borderColor?: ColorVariant;
+}>(({ borderColor }) => ({
+  padding: 16,
+  borderRadius: 5,
+  boxShadow: '0px 2px 8px #00000053',
+  borderLeft: borderColor ? `7px solid ${colorMap[borderColor]}` : 'none',
+}));
+
+export const Card = ({
+  children,
+  border,
+  color = 'inherit',
+  ...props
+}: CardBaseProps & { border?: boolean; color?: ColorVariant }) => {
+  return (
+    <CardStyled borderColor={border ? color : undefined} {...props}>
+      {children}
+    </CardStyled>
+  );
 };