norma-library 0.5.4 → 0.5.10

package/src/components/DateInput/styles.tsx

@@ -0,0 +1,28 @@
+import styled from "styled-components";
+import "react-datepicker/dist/react-datepicker.css";
+import { ContainerStyles } from './interface';
+
+export const Container = styled.div<ContainerStyles>`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  .react-datepicker-wrapper {
+    width: 100%;
+    input {
+      border: none;
+      color: #4D4F5C;
+      border-bottom: 1px solid #00000033;
+      outline: none;
+      font-size: 18px;
+      padding: 8px;
+      width: 100%;
+      font-size: 16px;
+    }
+  }
+`
+
+export const Label = styled.label`
+  font-size: 14px;
+  margin: 0 0 4px 0;
+  color: #666;
+`

package/src/components/Modal.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Modal as MuiModal, Paper, Box } from '@mui/material';
+import { Modal as MuiModal, Paper, Box, Typography } from '@mui/material';
 import { ModalBaseProps } from '../interfaces';
 import { styled } from '@mui/material/styles';
 import { IconButton } from './IconButton';
@@ -15,18 +15,18 @@ const ModalContentStyled = styled(Paper)`
   left: 50%;
   width: 421px;
   transform: translate(-50%, -50%);
-  bgcolor: background.paper;
+  background-color: #FFF;
   box-shadow: 24px;
-  padding: 16px;
 `;
 
 const ModalHeaderStyled = styled(Box)`
   text-align: left;
   border-bottom: 1px solid #00000033;
+  box-sizing: border-box;
   margin: 0;
-  top: -5px;
   position: relative;
-  padding: 0 5px;
+  padding: 22px 26px 15px 26px;
+  justify-content: space-between;
   display: flex;
 
   & h2 {
@@ -36,14 +36,18 @@ const ModalHeaderStyled = styled(Box)`
 `;
 
 const ModalFooterStyled = styled(Box)`
-  text-align: left;
   border-top: 1px solid #00000033;
-  margin-top: 16px;
-  bottom: -5px;
+  box-sizing: border-box;
   position: relative;
-  padding: 10px 5px 5px;
+  padding: 24px;
   display: flex;
   justify-content: end;
+  gap: 24px;
+`;
+
+const ModalContainerChildrenStyled = styled(Box)`
+  box-sizing: border-box;
+  padding: 24px;
 `;
 
 export function Close() {
@@ -65,40 +69,40 @@ export function Close() {
   );
 }
 
-export const Modal = ({ open, children, ...props }: ModalBaseProps) => {
-  
+export const Modal = ({ open, children, paperProps, ...props }: ModalBaseProps) => {
   return (
     <ModalStyled open {...props}>
-      <ModalContentStyled>
+      <ModalContentStyled {...paperProps}>
         {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>
-            </>
+            <Typography variant='h2'>{props.title}</Typography>
+            <IconButton
+              onClick={props.onClose}
+              size="small"
+              color="inherit"
+              variant="text"
+              cursor="pointer"
+              sx={{padding: "0"}}
+            >
+              <Close />
+            </IconButton>
           </ModalHeaderStyled>
         )}
-        {children}
-        {props.action && (
+        <ModalContainerChildrenStyled>
+          {children}
+        </ModalContainerChildrenStyled>
+        {!!props.action?.length  && (
           <ModalFooterStyled>
-            {props.action.map((item, key) => (
+            {props.action.map(({color, variant, action, size, label, ...rest}, key) => (
               <Button
-                color={item.color}
-                variant={item.variant}
+                color={color}
+                variant={variant}
                 key={key}
-                onClick={item.action}
-                style={{ marginLeft: 10 }}
+                onClick={action}
+                size={size}
+                {...rest}
               >
-                {item.label}
+                {label}
               </Button>
             ))}
           </ModalFooterStyled>

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/ProgressBar.tsx

@@ -28,20 +28,20 @@ const ProgressBarLabelStyled = styled(Typography)`
   font: normal normal normal 16px/20px Source Sans Pro;
 `;
 
-export const ProgressBar = ({ value = 0, label, variant = 'determinate', total, ...props }: ProgressBarBaseProps) => {
+export const ProgressBar = ({ value = 0, label, variant = 'determinate', total, className, ...props }: ProgressBarBaseProps) => {
   const percentage = value && total ? (value / total) * 100 : 0;
 
   return (
-    <div style={{ minWidth: '100px' }}>
+    <div className={className} style={{ minWidth: '100px' }}>
       {label && (
         <ProgressBarLabelStyled>
           {label}
           <span style={{ right: 0 }}>
-            {total} ({percentage.toFixed(2)}%)
+            {value} ({percentage.toFixed(2)}%)
           </span>
         </ProgressBarLabelStyled>
       )}
-      <ProgressBarStyled value={value} variant={variant} {...props} />
+      <ProgressBarStyled value={percentage} variant={variant} {...props} />
     </div>
   );
 };

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

@@ -0,0 +1,62 @@
+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}>
+        {children}
+      </components.Option>
+    </S.Container>
+  );
+};
+
+export default Option

package/src/components/SelectInput/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/SelectInput/index.tsx

@@ -0,0 +1,46 @@
+import React, { useState } from "react"
+import Select from "react-select"
+import { SelectInputProps } from "./interfaces"
+import * as S from "./styles"
+import Option from "./components/Option"
+
+const SelectInput:React.FC<SelectInputProps> = ({
+  className,
+  label,
+  onChange,
+  placeholder,
+  disabled,
+  options,
+  value,
+  isSearchable,
+  isClearable,
+}) => {
+  const [valueSelected, setValueSelected] = useState(value)
+
+  const components = {
+    Option
+  }
+
+  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}
+        isDisabled={disabled}
+        isSearchable={isSearchable}
+        isClearable={isClearable}
+        components={components}
+        onChange={(values: any) => {
+          setValueSelected(values) 
+          onChange(values)
+        }}
+      />
+    </S.Container>
+  )
+}
+
+export default SelectInput

package/src/components/SelectInput/interfaces.ts

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

package/src/components/SelectInput/styles.tsx

@@ -0,0 +1,32 @@
+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;
+      box-shadow: 0 0 0 #fff;
+    }
+    &__indicator-separator {
+      background: #fff;
+    }
+  }
+`
+
+export const Label = styled.label`
+  font-size: 14px;
+  margin: 0 0 4px 0;
+  color: #666;
+`

package/src/components/Svgs.tsx

@@ -495,4 +495,12 @@ 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"/>
+      </g>
+    </>
+  ),
 } as const;

package/src/components/Table/components/header/index.tsx

@@ -0,0 +1,87 @@
+import React, { useState } from "react"
+import * as S from "./styles"
+import SettingsIcon from '@mui/icons-material/Settings';
+
+const Header:React.FC<any> = ({ 
+  table, 
+  globalFilters, 
+  orderSmallest, 
+  orderLargest,
+  showTotalResults,
+  showSettings,
+  setGlobalFilters,
+  setOrderLargest,
+  setOrderSmallest,
+  customTotalResult
+}) => {
+  const [openTools, setOpenTools] = useState(false)
+
+  const totalResults = customTotalResult ? customTotalResult : `${table.getRowModel().rows.length} resultados encontrados.`
+
+  return (
+    <S.Header $showResults={showTotalResults}>
+      <div>
+      { showTotalResults
+          ? <S.Results>
+              <S.TextResult>{totalResults}</S.TextResult>
+              <S.TextClearSearchContent>
+                { globalFilters.length || !!orderSmallest || !!orderLargest ? <S.TextClearSearch onClick={() => {
+                  table.resetColumnFilters(true)
+                  setGlobalFilters([])
+                  setOrderLargest(false)
+                  setOrderSmallest(false)
+                  table.resetSorting(true)
+                }}>Limpar busca</S.TextClearSearch> : null }
+              </S.TextClearSearchContent>
+            </S.Results>
+          : null
+      }
+      </div>
+      {
+        !showTotalResults 
+          ? (
+            globalFilters.length || !!orderSmallest || !!orderLargest ? <S.TextClearSearch onClick={() => {
+              table.resetColumnFilters(true)
+              setGlobalFilters([])
+              setOrderLargest(false)
+              setOrderSmallest(false)
+              table.resetSorting(true)
+            }}>Limpar busca</S.TextClearSearch> : null
+          )
+          : null
+      }
+      <S.Tools>
+        { showSettings 
+            ? <S.IconTools onClick={() => setOpenTools(!openTools)}>
+                <SettingsIcon sx={{ fontSize: 16, color: '#DE8B50' }} />
+              </S.IconTools>
+            : null
+        }
+        {
+          openTools
+            ? <S.ListTools>
+                { table.getAllLeafColumns().map((column: any) => {
+                  return (
+                    <div key={column.id} className="px-1">
+                      <label>
+                        <input
+                          {...{
+                            type: 'checkbox',
+                            checked: column.getIsVisible(),
+                            onChange: column.getToggleVisibilityHandler(),
+                          }}
+                        />{' '}
+                        {column.id}
+                      </label>
+                    </div>
+                  )
+                })}
+              </S.ListTools>
+            : null
+        }
+      </S.Tools>
+    </S.Header>
+  )
+}
+
+export default Header