norma-library 0.4.8 → 0.5.0

package/src/components/IconButton.tsx

@@ -1,13 +1,9 @@
-import React, { useMemo } from "react";
-import {
-  IconButton as MuiIconButton,
-  ThemeProvider,
-  useMediaQuery,
-} from "@mui/material";
-import { IconButtonBaseProps } from "../interfaces";
-import { palette, themes } from "../helpers";
-import { styled } from "@mui/material/styles";
-import { ButtonVariant, ColorVariant } from "@/types";
+import React, { useMemo } from 'react';
+import { IconButton as MuiIconButton, ThemeProvider, useMediaQuery } from '@mui/material';
+import { IconButtonBaseProps } from '../interfaces';
+import { palette, themes } from '../helpers';
+import { styled } from '@mui/material/styles';
+import { ButtonVariant, ColorVariant } from '@/types';
 
 const colorMap: Record<ColorVariant, string> = {
   inherit: palette.inherit,
@@ -26,31 +22,18 @@ const IconButtonStyled = styled(MuiIconButton)<{
   cursor: string;
 }>(({ circle, color, variant, cursor }) => ({
   borderRadius: circle === true ? 99 : 5,
-  border: variant === "outlined" ? `1px solid ${colorMap[color]}` : "none",
-  backgroundColor: variant === "contained" ? `${colorMap[color]}` : "none",
+  border: variant === 'outlined' ? `1px solid ${colorMap[color]}` : 'none',
+  backgroundColor: variant === 'contained' ? `${colorMap[color]}` : 'none',
   cursor: cursor,
 }));
 
-export const IconButton = ({
-  circle = false,
-  children,
-  ...props
-}: IconButtonBaseProps) => {
-  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
-  const theme = useMemo(
-    () => (prefersDarkMode ? themes.dark : themes.light),
-    [prefersDarkMode]
-  );
+export const IconButton = ({ circle = false, children, ...props }: IconButtonBaseProps) => {
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+  const theme = useMemo(() => (prefersDarkMode ? themes.dark : themes.light), [prefersDarkMode]);
 
   return (
     <ThemeProvider theme={theme}>
-      <IconButtonStyled
-        circle={circle}
-        color="primary"
-        variant="text"
-        cursor="default"
-        {...props}
-      >
+      <IconButtonStyled circle={circle} color="primary" variant="text" cursor="default" {...props}>
         {children}
       </IconButtonStyled>
     </ThemeProvider>

package/src/components/Icons.tsx

@@ -1,87 +1,82 @@
-import React, { FunctionComponent } from "react";
-import { iconsSVG } from "./Svgs";
-import { IconColors, IconScale } from "../types";
-import { IconsProps, SvgProps } from "../interfaces/Icons";
-import styled from "@emotion/styled";
-import { palette } from "../helpers";
-
-export const Svg = styled.svg<SvgProps>(
-  {
-    shapeRendering: "inherit",
-    transform: "translate3d(0,0,0)",
-  },
-  ({ inline }) => (inline ? { display: "inline-block" } : { display: "block" })
-);
-
-const scaleSize: Record<IconScale, number> = {
-  xsmall: 14,
-  small: 20,
-  medium: 24,
-  large: 28,
-  xlarge: 32,
-  "2xlarge": 36,
-  "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,
-  secondary: palette.secondary,
-  error: palette.error,
-  info: palette.info,
-  success: palette.success,
-  warning: palette.warning,
-  white: palette.white,
-  black: palette.black,
-};
-
-export const Icons: FunctionComponent<IconsProps> = ({
-  icon,
-  scale,
-  useSymbol,
-  color = "inherit",
-  ...props
-}: IconsProps) => {
-  let width = 24;
-  let height = 24;
-  if (scale) {
-    width = scaleSize[scale];
-    height = scaleSize[scale];
-  }
-
-  // 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 Svg = styled.svg`
-    display: inline-block;
-    shape-rendering: inherit;
-    vertical-align: middle;
-    fill: ${fill};
-    path {
-      stroke: ${stroke};
-    }
-    circle {
-      stroke: ${stroke};
-    }
-    rect {
-      stroke: ${stroke};
-    }
-  `;
-
-  return (
-    <Svg
-      viewBox="0 0 56 56"
-      width={`${width}px`}
-      height={`${height}px`}
-      {...props}
-    >
-      {useSymbol ? (
-        <use xlinkHref={`#icon--${icon}`} fill={fill} stroke={stroke} />
-      ) : (
-        React.cloneElement(iconsSVG[icon], { fill, stroke })
-      )}
-    </Svg>
-  );
-};
+import React, { FunctionComponent } from 'react';
+import { iconsSVG } from './Svgs';
+import { IconColors, IconScale } from '../types';
+import { IconsProps, SvgProps } from '../interfaces/Icons';
+import styled from '@emotion/styled';
+import { palette } from '../helpers';
+
+export const Svg = styled.svg<SvgProps>(
+  {
+    shapeRendering: 'inherit',
+    transform: 'translate3d(0,0,0)',
+  },
+  ({ inline }) => (inline ? { display: 'inline-block' } : { display: 'block' }),
+);
+
+const scaleSize: Record<IconScale, number> = {
+  xsmall: 14,
+  small: 20,
+  medium: 24,
+  large: 28,
+  xlarge: 32,
+  '2xlarge': 36,
+  '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,
+  secondary: palette.secondary,
+  error: palette.error,
+  info: palette.info,
+  success: palette.success,
+  warning: palette.warning,
+  white: palette.white,
+  black: palette.black,
+};
+
+export const Icons: FunctionComponent<IconsProps> = ({
+  icon,
+  scale,
+  useSymbol,
+  color = 'inherit',
+  ...props
+}: IconsProps) => {
+  let width = 24;
+  let height = 24;
+  if (scale) {
+    width = scaleSize[scale];
+    height = scaleSize[scale];
+  }
+
+  // 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 Svg = styled.svg`
+    display: inline-block;
+    shape-rendering: inherit;
+    vertical-align: middle;
+    fill: ${fill};
+    path {
+      stroke: ${stroke};
+    }
+    circle {
+      stroke: ${stroke};
+    }
+    rect {
+      stroke: ${stroke};
+    }
+  `;
+
+  return (
+    <Svg viewBox="0 0 56 56" width={`${width}px`} height={`${height}px`} {...props}>
+      {useSymbol ? (
+        <use xlinkHref={`#icon--${icon}`} fill={fill} stroke={stroke} />
+      ) : (
+        React.cloneElement(iconsSVG[icon], { fill, stroke })
+      )}
+    </Svg>
+  );
+};

package/src/components/Modal.tsx

@@ -1,123 +1,114 @@
-import React, { useMemo } from "react";
-import {
-  Modal as MuiModal,
-  Paper,
-  Box,
-  ThemeProvider,
-  useMediaQuery,
-} from "@mui/material";
-import { ModalBaseProps } from "../interfaces";
-import { themes } from "../helpers";
-import { styled } from "@mui/material/styles";
-import { IconButton } from "./IconButton";
-import { Button } from "./Button";
-
-const ModalStyled = styled(MuiModal)({});
-
-const ModalContentStyled = styled(Paper)`
-  border: 1px solid #00000033;
-  border-radius: 4px;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 421px;
-  transform: translate(-50%, -50%);
-  bgcolor: background.paper;
-  box-shadow: 24px;
-  padding: 16px;
-`;
-
-const ModalHeaderStyled = styled(Box)`
-  text-align: left;
-  border-bottom: 1px solid #00000033;
-  margin: 0;
-  top: -5px;
-  position: relative;
-  padding: 0 5px;
-  display: flex;
-
-  & h2 {
-    font: normal normal 600 18px/30px Source Sans Pro;
-    color: #292929;
-  }
-`;
-
-const ModalFooterStyled = styled(Box)`
-  text-align: left;
-  border-top: 1px solid #00000033;
-  margin-top: 16px;
-  bottom: -5px;
-  position: relative;
-  padding: 10px 5px 5px;
-  display: flex;
-  justify-content: end;
-`;
-
-export function Close() {
-  return (
-    <svg
-      fill="#808080"
-      viewBox="0 0 24 24"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-hidden="true"
-      height="24"
-      width="24"
-    >
-      <path
-        clipRule="evenodd"
-        fillRule="evenodd"
-        d="M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z"
-      />
-    </svg>
-  );
-}
-
-export const Modal = ({ open, children, ...props }: ModalBaseProps) => {
-  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
-  const theme = useMemo(
-    () => (prefersDarkMode ? themes.light : themes.dark),
-    [prefersDarkMode]
-  );
-
-  return (
-    <ThemeProvider theme={theme}>
-      <ModalStyled open {...props}>
-        <ModalContentStyled>
-          {props.title && (
-            <ModalHeaderStyled>
-              <>
-                <h2>{props.title}</h2>
-                <IconButton
-                  onClick={props.onClose}
-                  size="small"
-                  color="inherit"
-                  variant="text"
-                  cursor="pointer"
-                  sx={{ position: "absolute", right: 0, top: 5 }}
-                >
-                  <Close />
-                </IconButton>
-              </>
-            </ModalHeaderStyled>
-          )}
-          {children}
-          {props.action && (
-            <ModalFooterStyled>
-              {props.action.map((item, key) => (
-                <Button
-                  color={item.color}
-                  variant={item.variant}
-                  key={key}
-                  onClick={item.action}
-                  style={{ marginLeft: 10 }}
-                >
-                  {item.label}
-                </Button>
-              ))}
-            </ModalFooterStyled>
-          )}
-        </ModalContentStyled>
-      </ModalStyled>
-    </ThemeProvider>
-  );
-};
+import React, { useMemo } from 'react';
+import { Modal as MuiModal, Paper, Box, ThemeProvider, useMediaQuery } from '@mui/material';
+import { ModalBaseProps } from '../interfaces';
+import { themes } from '../helpers';
+import { styled } from '@mui/material/styles';
+import { IconButton } from './IconButton';
+import { Button } from './Button';
+
+const ModalStyled = styled(MuiModal)({});
+
+const ModalContentStyled = styled(Paper)`
+  border: 1px solid #00000033;
+  border-radius: 4px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 421px;
+  transform: translate(-50%, -50%);
+  bgcolor: background.paper;
+  box-shadow: 24px;
+  padding: 16px;
+`;
+
+const ModalHeaderStyled = styled(Box)`
+  text-align: left;
+  border-bottom: 1px solid #00000033;
+  margin: 0;
+  top: -5px;
+  position: relative;
+  padding: 0 5px;
+  display: flex;
+
+  & h2 {
+    font: normal normal 600 18px/30px Source Sans Pro;
+    color: #292929;
+  }
+`;
+
+const ModalFooterStyled = styled(Box)`
+  text-align: left;
+  border-top: 1px solid #00000033;
+  margin-top: 16px;
+  bottom: -5px;
+  position: relative;
+  padding: 10px 5px 5px;
+  display: flex;
+  justify-content: end;
+`;
+
+export function Close() {
+  return (
+    <svg
+      fill="#808080"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      height="24"
+      width="24"
+    >
+      <path
+        clipRule="evenodd"
+        fillRule="evenodd"
+        d="M5.47 5.47a.75.75 0 011.06 0L12 10.94l5.47-5.47a.75.75 0 111.06 1.06L13.06 12l5.47 5.47a.75.75 0 11-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 01-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 010-1.06z"
+      />
+    </svg>
+  );
+}
+
+export const Modal = ({ open, children, ...props }: ModalBaseProps) => {
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+  const theme = useMemo(() => (prefersDarkMode ? themes.light : themes.dark), [prefersDarkMode]);
+
+  return (
+    <ThemeProvider theme={theme}>
+      <ModalStyled open {...props}>
+        <ModalContentStyled>
+          {props.title && (
+            <ModalHeaderStyled>
+              <>
+                <h2>{props.title}</h2>
+                <IconButton
+                  onClick={props.onClose}
+                  size="small"
+                  color="inherit"
+                  variant="text"
+                  cursor="pointer"
+                  sx={{ position: 'absolute', right: 0, top: 5 }}
+                >
+                  <Close />
+                </IconButton>
+              </>
+            </ModalHeaderStyled>
+          )}
+          {children}
+          {props.action && (
+            <ModalFooterStyled>
+              {props.action.map((item, key) => (
+                <Button
+                  color={item.color}
+                  variant={item.variant}
+                  key={key}
+                  onClick={item.action}
+                  style={{ marginLeft: 10 }}
+                >
+                  {item.label}
+                </Button>
+              ))}
+            </ModalFooterStyled>
+          )}
+        </ModalContentStyled>
+      </ModalStyled>
+    </ThemeProvider>
+  );
+};

package/src/components/Paper.tsx

@@ -1,22 +1,19 @@
-import React, { useMemo } from "react";
-import { Paper as MuiPaper, ThemeProvider, useMediaQuery } from "@mui/material";
-import { PaperBaseProps } from "../interfaces";
-import { themes } from "../helpers";
-import { styled } from "@mui/material/styles";
-
-const PaperStyled = styled(MuiPaper)({});
-
-export const Paper = ({ children, ...props }: PaperBaseProps & {}) => {
-  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
-
-  const theme = useMemo(
-    () => (prefersDarkMode ? themes.light : themes.dark),
-    [prefersDarkMode]
-  );
-
-  return (
-    <ThemeProvider theme={theme}>
-      <PaperStyled {...props}>{children}</PaperStyled>
-    </ThemeProvider>
-  );
-};
+import React, { useMemo } from 'react';
+import { Paper as MuiPaper, ThemeProvider, useMediaQuery } from '@mui/material';
+import { PaperBaseProps } from '../interfaces';
+import { themes } from '../helpers';
+import { styled } from '@mui/material/styles';
+
+const PaperStyled = styled(MuiPaper)({});
+
+export const Paper = ({ children, ...props }: PaperBaseProps & {}) => {
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+
+  const theme = useMemo(() => (prefersDarkMode ? themes.light : themes.dark), [prefersDarkMode]);
+
+  return (
+    <ThemeProvider theme={theme}>
+      <PaperStyled {...props}>{children}</PaperStyled>
+    </ThemeProvider>
+  );
+};

package/src/components/ProgressBar.tsx

@@ -1,63 +1,54 @@
-import React, { useMemo } from "react";
-import {
-  LinearProgress as MuiProgressBar,
-  linearProgressClasses,
-  ThemeProvider,
-  useMediaQuery,
-  Typography,
-} from "@mui/material";
-
-import { ProgressBarBaseProps } from "../interfaces";
-import { themes } from "../helpers";
-import { styled } from "@mui/material/styles";
-
-const ProgressBarStyled = styled(MuiProgressBar)({
-  width: "100%",
-  height: "10px",
-  borderRadius: "10px",
-  position: "relative",
-  backgroundColor: `&.${linearProgressClasses.determinate} {
-    background-color: #e0e0e0,
-  }`,
-});
-
-const ProgressBarLabelStyled = styled(Typography)`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 8px;
-  position: relative;
-  text-align: left;
-  font: normal normal normal 16px/20px Source Sans Pro;
-`;
-
-export const ProgressBar = ({
-  value = 0,
-  label,
-  variant = "determinate",
-  total,
-  ...props
-}: ProgressBarBaseProps) => {
-  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
-  const percentage = value && total ? (value / total) * 100 : 0;
-  const theme = useMemo(
-    () => (prefersDarkMode ? themes.light : themes.dark),
-    [prefersDarkMode]
-  );
-
-  return (
-    <ThemeProvider theme={theme}>
-      <div style={{ minWidth: "100px" }}>
-        {label && (
-          <ProgressBarLabelStyled>
-            {label}
-            <span style={{ right: 0 }}>
-              {total} ({percentage.toFixed(2)}%)
-            </span>
-          </ProgressBarLabelStyled>
-        )}
-        <ProgressBarStyled value={value} variant={variant} {...props} />
-      </div>
-    </ThemeProvider>
-  );
-};
+import React, { useMemo } from 'react';
+import {
+  LinearProgress as MuiProgressBar,
+  linearProgressClasses,
+  ThemeProvider,
+  useMediaQuery,
+  Typography,
+} from '@mui/material';
+
+import { ProgressBarBaseProps } from '../interfaces';
+import { themes } from '../helpers';
+import { styled } from '@mui/material/styles';
+
+const ProgressBarStyled = styled(MuiProgressBar)({
+  width: '100%',
+  height: '10px',
+  borderRadius: '10px',
+  position: 'relative',
+  backgroundColor: `&.${linearProgressClasses.determinate} {
+    background-color: #e0e0e0,
+  }`,
+});
+
+const ProgressBarLabelStyled = styled(Typography)`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+  position: relative;
+  text-align: left;
+  font: normal normal normal 16px/20px Source Sans Pro;
+`;
+
+export const ProgressBar = ({ value = 0, label, variant = 'determinate', total, ...props }: ProgressBarBaseProps) => {
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+  const percentage = value && total ? (value / total) * 100 : 0;
+  const theme = useMemo(() => (prefersDarkMode ? themes.light : themes.dark), [prefersDarkMode]);
+
+  return (
+    <ThemeProvider theme={theme}>
+      <div style={{ minWidth: '100px' }}>
+        {label && (
+          <ProgressBarLabelStyled>
+            {label}
+            <span style={{ right: 0 }}>
+              {total} ({percentage.toFixed(2)}%)
+            </span>
+          </ProgressBarLabelStyled>
+        )}
+        <ProgressBarStyled value={value} variant={variant} {...props} />
+      </div>
+    </ThemeProvider>
+  );
+};