norma-library 0.6.3 → 0.6.5

package/src/components/Icons.tsx

@@ -1,82 +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,103 +1,103 @@
-import React from 'react';
-import { Modal as MuiModal, Paper, Box, Typography } from '@mui/material';
-import { ModalBaseProps } from '../interfaces';
-import { styled } from '@mui/material/styles';
-import { IconButton } from './IconButton';
-import { Button } from './Button';
-
-const ModalStyled = styled(MuiModal)({});
-
-const ModalContentStyled = styled(Paper)<{ $w?: string }>`
-  border: 1px solid #00000033;
-  border-radius: 4px;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: ${props => props.$w || '421px'};
-  transform: translate(-50%, -50%);
-  background-color: #fff;
-`;
-
-const ModalHeaderStyled = styled(Box)`
-  text-align: left;
-  box-sizing: border-box;
-  margin: 0;
-  position: relative;
-  padding: 22px 26px 15px 26px;
-  justify-content: space-between;
-  display: flex;
-
-  & h2 {
-    font-style: normal;
-    font-weight: 600;
-    font-size: 18px;
-    color: #1D1D1D;
-  }
-`;
-
-const ModalFooterStyled = styled(Box)<{$spaceBetween?: boolean}>`
-  box-sizing: border-box;
-  position: relative;
-  padding: 24px;
-  display: flex;
-  justify-content: ${props => props.$spaceBetween ? 'space-between' : 'flex-end'};
-  gap: 24px;
-`;
-
-const ModalContainerChildrenStyled = styled(Box)`
-  box-sizing: border-box;
-  padding: 24px;
-`;
-
-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, paperProps, ...props }: ModalBaseProps) => {
-  return (
-    <ModalStyled open {...props}>
-      <ModalContentStyled {...paperProps} $w={props.width}>
-        {props.title && (
-          <ModalHeaderStyled>
-            <Typography variant="h2">{props.title}</Typography>
-            <IconButton
-              onClick={props.onClose}
-              size="small"
-              color="inherit"
-              variant="text"
-              cursor="pointer"
-              sx={{ padding: '0' }}
-            >
-              <Close />
-            </IconButton>
-          </ModalHeaderStyled>
-        )}
-        <ModalContainerChildrenStyled>{children}</ModalContainerChildrenStyled>
-        {!!props.action?.length && (
-          <ModalFooterStyled $spaceBetween={props.actionSpaceBetween}>
-            {props.action.map(({ color, variant, action, size, label, ...rest }, key) => (
-              <Button color={color} variant={variant} key={key} onClick={action} size={size} {...rest}>
-                {label}
-              </Button>
-            ))}
-          </ModalFooterStyled>
-        )}
-      </ModalContentStyled>
-    </ModalStyled>
-  );
-};
+import React from 'react';
+import { Modal as MuiModal, Paper, Box, Typography } from '@mui/material';
+import { ModalBaseProps } from '../interfaces';
+import { styled } from '@mui/material/styles';
+import { IconButton } from './IconButton';
+import { Button } from './Button';
+
+const ModalStyled = styled(MuiModal)({});
+
+const ModalContentStyled = styled(Paper)<{ $w?: string }>`
+  border: 1px solid #00000033;
+  border-radius: 4px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: ${props => props.$w || '421px'};
+  transform: translate(-50%, -50%);
+  background-color: #fff;
+`;
+
+const ModalHeaderStyled = styled(Box)`
+  text-align: left;
+  box-sizing: border-box;
+  margin: 0;
+  position: relative;
+  padding: 22px 26px 15px 26px;
+  justify-content: space-between;
+  display: flex;
+
+  & h2 {
+    font-style: normal;
+    font-weight: 600;
+    font-size: 18px;
+    color: #1D1D1D;
+  }
+`;
+
+const ModalFooterStyled = styled(Box)<{$spaceBetween?: boolean}>`
+  box-sizing: border-box;
+  position: relative;
+  padding: 24px;
+  display: flex;
+  justify-content: ${props => props.$spaceBetween ? 'space-between' : 'flex-end'};
+  gap: 24px;
+`;
+
+const ModalContainerChildrenStyled = styled(Box)`
+  box-sizing: border-box;
+  padding: 24px;
+`;
+
+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, paperProps, ...props }: ModalBaseProps) => {
+  return (
+    <ModalStyled open {...props}>
+      <ModalContentStyled {...paperProps} $w={props.width}>
+        {props.title && (
+          <ModalHeaderStyled>
+            <Typography variant="h2">{props.title}</Typography>
+            <IconButton
+              onClick={props.onClose}
+              size="small"
+              color="inherit"
+              variant="text"
+              cursor="pointer"
+              sx={{ padding: '0' }}
+            >
+              <Close />
+            </IconButton>
+          </ModalHeaderStyled>
+        )}
+        <ModalContainerChildrenStyled>{children}</ModalContainerChildrenStyled>
+        {!!props.action?.length && (
+          <ModalFooterStyled $spaceBetween={props.actionSpaceBetween}>
+            {props.action.map(({ color, variant, action, size, label, ...rest }, key) => (
+              <Button color={color} variant={variant} key={key} onClick={action} size={size} {...rest}>
+                {label}
+              </Button>
+            ))}
+          </ModalFooterStyled>
+        )}
+      </ModalContentStyled>
+    </ModalStyled>
+  );
+};

package/src/components/MultiSelectInput/components/MultiValue/index.tsx

@@ -1,44 +1,44 @@
-import React from 'react'
-import { components } from "react-select"
-
-const MoreSelectedBadge = ({ items }: any) => {
-  const style = {
-    marginLeft: "auto",
-    background: "#F8F9FA",
-    color: "#666666",
-    borderRadius: "4px",
-    fontFamily: "Open Sans",
-    fontSize: "11px",
-    padding: "3px",
-    order: 99
-  };
-
-  const title = items.join(", ");
-  const length = items.length;
-  const label = `+ ${length}`;
-
-  return (
-    <div style={style} title={title}>
-      {label}
-    </div>
-  );
-};
-
-const MultiValue:React.FC<any> = ({
-  index, 
-  getValue, 
-  ...props
-}) => {
-  const maxToShow = 3;
-  const overflow = getValue()
-    .slice(maxToShow)
-    .map((x: any) => x.label);
-
-  return index < maxToShow ? (
-    <components.MultiValue {...props} />
-  ) : index === maxToShow ? (
-    <MoreSelectedBadge items={overflow} />
-  ) : null;
-}
-
-export default MultiValue
+import React from 'react'
+import { components } from "react-select"
+
+const MoreSelectedBadge = ({ items }: any) => {
+  const style = {
+    marginLeft: "auto",
+    background: "#F8F9FA",
+    color: "#666666",
+    borderRadius: "4px",
+    fontFamily: "Open Sans",
+    fontSize: "11px",
+    padding: "3px",
+    order: 99
+  };
+
+  const title = items.join(", ");
+  const length = items.length;
+  const label = `+ ${length}`;
+
+  return (
+    <div style={style} title={title}>
+      {label}
+    </div>
+  );
+};
+
+const MultiValue:React.FC<any> = ({
+  index, 
+  getValue, 
+  ...props
+}) => {
+  const maxToShow = 3;
+  const overflow = getValue()
+    .slice(maxToShow)
+    .map((x: any) => x.label);
+
+  return index < maxToShow ? (
+    <components.MultiValue {...props} />
+  ) : index === maxToShow ? (
+    <MoreSelectedBadge items={overflow} />
+  ) : null;
+}
+
+export default MultiValue

package/src/components/MultiSelectInput/components/Option/index.tsx

@@ -1,63 +1,63 @@
-import React, { useState } from "react"
-import { components } from "react-select"
-import * as S from "./styles";
-
-const Option:React.FC<any> = ({
-  isFocused,
-  isSelected,
-  innerProps,
-  children,
-  getStyles,
-  isDisabled,
-  ...rest
-}) => {
-  const [isActive, setIsActive] = useState(false);
-  const onMouseDown = () => setIsActive(true);
-  const onMouseUp = () => setIsActive(false);
-  const onMouseLeave = () => setIsActive(false);
-
-  let bg = "transparent"
-  let color = "#000"
-
-  if (isFocused) {
-    bg = "#f1f1f1"
-  };
-  if (isActive) {
-    bg = "#F8F9FA"
-  };
-
-  const style = {
-    alignItems: "center",
-    transition: "0.3s",
-    backgroundColor: bg,
-    color: color,
-    display: "flex ",
-    gap: '8px'
-  };
-
-  const props = {
-    ...innerProps,
-    onMouseDown,
-    onMouseUp,
-    onMouseLeave,
-    style,
-    ...rest
-  };
-
-  return (
-    <S.Container>
-      <components.Option
-        {...rest}
-        isDisabled={isDisabled}
-        isFocused={isFocused}
-        isSelected={isSelected}
-        getStyles={getStyles}
-        innerProps={props}>
-        <input type="checkbox" checked={isSelected} onChange={() => null}/>
-        {children}
-      </components.Option>
-    </S.Container>
-  );
-};
-
+import React, { useState } from "react"
+import { components } from "react-select"
+import * as S from "./styles";
+
+const Option:React.FC<any> = ({
+  isFocused,
+  isSelected,
+  innerProps,
+  children,
+  getStyles,
+  isDisabled,
+  ...rest
+}) => {
+  const [isActive, setIsActive] = useState(false);
+  const onMouseDown = () => setIsActive(true);
+  const onMouseUp = () => setIsActive(false);
+  const onMouseLeave = () => setIsActive(false);
+
+  let bg = "transparent"
+  let color = "#000"
+
+  if (isFocused) {
+    bg = "#f1f1f1"
+  };
+  if (isActive) {
+    bg = "#F8F9FA"
+  };
+
+  const style = {
+    alignItems: "center",
+    transition: "0.3s",
+    backgroundColor: bg,
+    color: color,
+    display: "flex ",
+    gap: '8px'
+  };
+
+  const props = {
+    ...innerProps,
+    onMouseDown,
+    onMouseUp,
+    onMouseLeave,
+    style,
+    ...rest
+  };
+
+  return (
+    <S.Container>
+      <components.Option
+        {...rest}
+        isDisabled={isDisabled}
+        isFocused={isFocused}
+        isSelected={isSelected}
+        getStyles={getStyles}
+        innerProps={props}>
+        <input type="checkbox" checked={isSelected} onChange={() => null}/>
+        {children}
+      </components.Option>
+    </S.Container>
+  );
+};
+
 export default Option

package/src/components/MultiSelectInput/components/Option/styles.tsx

@@ -1,9 +1,9 @@
-import styled from "styled-components";
-
-export const Container = styled.div`
-  font-size: 16px;
-  color: #666666;
-  &:nth-child(even) {
-    background: #F8F9FA;
-  }
+import styled from "styled-components";
+
+export const Container = styled.div`
+  font-size: 16px;
+  color: #666666;
+  &:nth-child(even) {
+    background: #F8F9FA;
+  }
 `