norma-library 0.5.80 → 0.5.122

package/src/components/Modal.tsx

@@ -1,113 +1,113 @@
-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)`
-  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;
-`;
-
-const ModalHeaderStyled = styled(Box)`
-  text-align: left;
-  border-bottom: 1px solid #00000033;
-  box-sizing: border-box;
-  margin: 0;
-  position: relative;
-  padding: 22px 26px 15px 26px;
-  justify-content: space-between;
-  display: flex;
-
-  & h2 {
-    font: normal normal 600 18px/30px Source Sans Pro;
-    color: #292929;
-  }
-`;
-
-const ModalFooterStyled = styled(Box)`
-  border-top: 1px solid #00000033;
-  box-sizing: border-box;
-  position: relative;
-  padding: 24px;
-  display: flex;
-  justify-content: 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, ...props }: ModalBaseProps) => {
-  
-  return (
-    <ModalStyled open {...props}>
-      <ModalContentStyled>
-        {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 && (
-          <ModalFooterStyled>
-            {props.action.map((item, key) => (
-              <Button
-                color={item.color}
-                variant={item.variant}
-                key={key}
-                onClick={item.action}
-                size={item.size}
-              >
-                {item.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)`
+  border: 1px solid #00000033;
+  border-radius: 4px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 421px;
+  transform: translate(-50%, -50%);
+  background-color: #FFF;
+  box-shadow: 24px;
+`;
+
+const ModalHeaderStyled = styled(Box)`
+  text-align: left;
+  border-bottom: 1px solid #00000033;
+  box-sizing: border-box;
+  margin: 0;
+  position: relative;
+  padding: 22px 26px 15px 26px;
+  justify-content: space-between;
+  display: flex;
+
+  & h2 {
+    font: normal normal 600 18px/30px Source Sans Pro;
+    color: #292929;
+  }
+`;
+
+const ModalFooterStyled = styled(Box)`
+  border-top: 1px solid #00000033;
+  box-sizing: border-box;
+  position: relative;
+  padding: 24px;
+  display: flex;
+  justify-content: 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}>
+        {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>
+            {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

@@ -0,0 +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

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

@@ -0,0 +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>
+  );
+};
+
+export default Option

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

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

package/src/components/MultiSelectInput/index.tsx

@@ -0,0 +1,61 @@
+import React, { useState } from "react"
+import Select from "react-select"
+import { MultiSelectProps } from "./interfaces"
+import * as S from "./styles"
+import Option from "./components/Option"
+import MultiValue from "./components/MultiValue"
+
+const MultiSelectInput:React.FC<MultiSelectProps> = ({
+  className,
+  label,
+  onChange,
+  placeholder,
+  disabled,
+  options,
+  value,
+  isSearchable,
+  isClearable,
+}) => {
+  const [valueSelected, setValueSelected] = useState(value)
+
+  const components = {
+    MultiValueContainer: ({ selectProps, data }: any) => {
+      const values = selectProps.value;
+      if (values) {
+        const separator = values.length > 1 ? ', ' : ''
+        return values[values.length - 1]?.label === data?.label
+          ? data?.label
+          : data?.label + `${separator}`;
+      }
+      return
+    },
+    Option, 
+    MultiValue
+  };
+
+  return (
+    <S.Container className={className}>
+      { label ? <S.Label>{label}</S.Label> : null }
+      <Select
+        placeholder={placeholder}
+        className="react-select-container"
+        classNamePrefix="react-select"
+        defaultValue={valueSelected || []}
+        options={options}
+        isMulti
+        closeMenuOnSelect={false}
+        hideSelectedOptions={false}
+        isDisabled={disabled}
+        isSearchable={isSearchable}
+        isClearable={isClearable}
+        components={components}
+        onChange={(values: any) => {
+          setValueSelected(values) 
+          onChange(values)
+        }}
+      />
+    </S.Container>
+  )
+}
+
+export default MultiSelectInput 

package/src/components/MultiSelectInput/interfaces.ts

@@ -0,0 +1,16 @@
+export interface Option {
+  value: string | number,
+  label: string
+}
+
+export interface MultiSelectProps {
+  className?: string
+  label?: string 
+  onChange: Function
+  placeholder?: string
+  disabled?: boolean
+  options: Option[]
+  value: Option
+  isSearchable?: boolean
+  isClearable?: boolean
+}

package/src/components/MultiSelectInput/styles.tsx

@@ -0,0 +1,44 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  .react-select {
+    &__control {
+      border-radius: 0;
+      border: none;
+      border-bottom: 1px solid #00000033;
+    }
+    &__control--is-focused {
+      border-bottom: 1px solid #00000033;
+      box-shadow: none;
+    }
+    &__control:hover {
+      border: none;
+      border-bottom: 1px solid #00000033 !important;
+      box-shadow: 0 0 0 #fff;
+    }
+    &__indicator-separator {
+      background: #fff;
+    }
+    &__multi-value {
+      background: transparent;
+      border-radius: 4px;
+      &__label {
+        color: #4D4F5C;
+        font-size: 18px;
+        padding: 0;
+      }
+      &__remove {
+        display: none;
+      }
+    }
+  }
+`
+
+export const Label = styled.label`
+  font-size: 14px;
+  margin: 0 0 4px 0;
+  color: #4D4F5C;
+`

package/src/components/Paper.tsx

@@ -1,12 +1,12 @@
-import React from 'react';
-import { Paper as MuiPaper } from '@mui/material';
-import { PaperBaseProps } from '../interfaces';
-import { styled } from '@mui/material/styles';
-
-const PaperStyled = styled(MuiPaper)({});
-
-export const Paper = ({ children, ...props }: PaperBaseProps & {}) => {
-  return (
-    <PaperStyled {...props}>{children}</PaperStyled>
-  );
-};
+import React from 'react';
+import { Paper as MuiPaper } from '@mui/material';
+import { PaperBaseProps } from '../interfaces';
+import { styled } from '@mui/material/styles';
+
+const PaperStyled = styled(MuiPaper)({});
+
+export const Paper = ({ children, ...props }: PaperBaseProps & {}) => {
+  return (
+    <PaperStyled {...props}>{children}</PaperStyled>
+  );
+};

package/src/components/ProgressBar.tsx

@@ -1,47 +1,51 @@
-import React from 'react';
-import {
-  LinearProgress as MuiProgressBar,
-  linearProgressClasses,
-  Typography,
-} from '@mui/material';
-
-import { ProgressBarBaseProps } from '../interfaces';
-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, className, ...props }: ProgressBarBaseProps) => {
-  const percentage = value && total ? (value / total) * 100 : 0;
-
-  return (
-    <div className={className} style={{ minWidth: '100px' }}>
-      {label && (
-        <ProgressBarLabelStyled>
-          {label}
-          <span style={{ right: 0 }}>
-            {value} ({percentage.toFixed(2)}%)
-          </span>
-        </ProgressBarLabelStyled>
-      )}
-      <ProgressBarStyled value={percentage} variant={variant} {...props} />
-    </div>
-  );
-};
+import React from 'react';
+import { LinearProgress as MuiProgressBar, linearProgressClasses, Typography } from '@mui/material';
+
+import { ProgressBarBaseProps } from '../interfaces';
+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,
+  className,
+  localeString,
+  ...props
+}: ProgressBarBaseProps) => {
+  const percentage = value && total ? (value / total) * 100 : 0;
+
+  return (
+    <div className={className} style={{ minWidth: '100px' }}>
+      {label && (
+        <ProgressBarLabelStyled>
+          {label}
+          <span style={{ right: 0 }}>
+            {localeString ? value.toLocaleString() : value} ({percentage.toFixed(2)}%)
+          </span>
+        </ProgressBarLabelStyled>
+      )}
+      <ProgressBarStyled value={percentage} variant={variant} {...props} />
+    </div>
+  );
+};

package/src/components/RadioGroup.tsx

@@ -1,40 +1,40 @@
-import React from 'react';
-import {
-  FormControl,
-  FormControlLabel,
-  FormLabel,
-  Radio as MuiRadio,
-  RadioGroup as MuiRadioGroup,
-} from '@mui/material';
-
-import { styled } from '@mui/material/styles';
-import { RadioBaseProps } from '../interfaces/RadioGroup';
-import { TextFieldSizeVariant } from '../types';
-
-const RadioStyled = styled(MuiRadio)({});
-const sizes: TextFieldSizeVariant[] = ['small', 'medium'];
-
-export const RadioGroup = ({ ...props }: RadioBaseProps) => {
-  
-  return (
-    <FormControl>
-      <FormLabel id={props.id}>{props.label}</FormLabel>
-      <MuiRadioGroup
-        aria-labelledby={props.id}
-        defaultValue={props.checked}
-        name="radio-buttons-group"
-        row={props.direction === 'horizontal' ? true : false}
-      >
-        {props.options &&
-          props.options.map((item, key) => (
-            <FormControlLabel
-              value={item.value}
-              control={<RadioStyled color={props.color} size={item.size ? item.size : sizes[1]} />}
-              label={item.label}
-              key={key}
-            />
-          ))}
-      </MuiRadioGroup>
-    </FormControl>
-  );
-};
+import React from 'react';
+import {
+  FormControl,
+  FormControlLabel,
+  FormLabel,
+  Radio as MuiRadio,
+  RadioGroup as MuiRadioGroup,
+} from '@mui/material';
+
+import { styled } from '@mui/material/styles';
+import { RadioBaseProps } from '../interfaces/RadioGroup';
+import { TextFieldSizeVariant } from '../types';
+
+const RadioStyled = styled(MuiRadio)({});
+const sizes: TextFieldSizeVariant[] = ['small', 'medium'];
+
+export const RadioGroup = ({ ...props }: RadioBaseProps) => {
+  
+  return (
+    <FormControl>
+      <FormLabel id={props.id}>{props.label}</FormLabel>
+      <MuiRadioGroup
+        aria-labelledby={props.id}
+        defaultValue={props.checked}
+        name="radio-buttons-group"
+        row={props.direction === 'horizontal' ? true : false}
+      >
+        {props.options &&
+          props.options.map((item, key) => (
+            <FormControlLabel
+              value={item.value}
+              control={<RadioStyled color={props.color} size={item.size ? item.size : sizes[1]} />}
+              label={item.label}
+              key={key}
+            />
+          ))}
+      </MuiRadioGroup>
+    </FormControl>
+  );
+};