norma-library 0.5.811 → 0.5.812

package/src/components/Box/interfaces.ts

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

package/src/components/Box/styles.tsx

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

package/src/components/Breadcrumb/index.tsx

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

package/src/components/Breadcrumb/interface.ts

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

package/src/components/Breadcrumb/styles.tsx

@@ -0,0 +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);
+  }
+`

package/src/components/DateInput/index.tsx

@@ -0,0 +1,35 @@
+import React, { useState } from "react"
+import DatePicker from "react-datepicker";
+import * as S from "./styles"
+import { DateInputProps } from './interface';
+
+const DateInput:React.FC<DateInputProps> = ({ 
+    label, 
+    dateFormat, 
+    dateSelected, 
+    className,
+    showTimeSelect,
+    timeFormat,
+    disabled, 
+    onChange 
+  }) => {
+  const [date, setDate] = useState<Date | null>(dateSelected)
+  return (
+    <S.Container className={className}>
+      <S.Label>{label}</S.Label>
+      <DatePicker
+        dateFormat={dateFormat}
+        selected={date}
+        showTimeSelect={showTimeSelect}
+        timeFormat={timeFormat}
+        disabled={disabled}
+        onChange={(date) => {
+          setDate(date)
+          onChange(date)
+        }}
+      />
+    </S.Container>
+  )
+}
+
+export default DateInput

package/src/components/DateInput/interface.ts

@@ -0,0 +1,14 @@
+export interface DateInputProps {
+  className?: string
+  label: string 
+  dateSelected: Date 
+  onChange: Function
+  dateFormat: string
+  showTimeSelect?: boolean
+  timeFormat?: string
+  disabled?: boolean
+}
+
+export interface ContainerStyles {
+  
+}

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/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/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/Table/components/header/index.tsx

@@ -0,0 +1,59 @@
+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,
+  setGlobalFilters,
+  setOrderLargest,
+  setOrderSmallest
+}) => {
+  const [openTools, setOpenTools] = useState(false)
+
+  return (
+    <S.Header>
+      <S.Results>
+        <S.TextResult>{ table.getRowModel().rows.length } resultados encontrados.</S.TextResult>
+        { globalFilters.length || !!orderSmallest || !!orderLargest ? <S.TextClearSearch onClick={() => {
+          table.resetColumnFilters(true)
+          setGlobalFilters([])
+          setOrderLargest(false)
+          setOrderSmallest(false)
+          table.resetSorting(true)
+        }}>Limpar busca</S.TextClearSearch> : null }
+      </S.Results>
+      <S.Tools>
+        <S.IconTools onClick={() => setOpenTools(!openTools)}>
+          <SettingsIcon sx={{ fontSize: 24 }} color='primary' />
+        </S.IconTools>
+        {
+          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