norma-library 0.5.3 → 0.5.9

package/src/components/RangerSlider.tsx

@@ -1,6 +1,6 @@
-import React, { useMemo } from 'react';
-import { Slider as MuiSlider, ThemeProvider, useMediaQuery } from '@mui/material';
-import { palette, themes } from '../helpers';
+import React from 'react';
+import { Slider as MuiSlider } from '@mui/material';
+import { palette } from '../helpers';
 import { styled } from '@mui/material/styles';
 import { ColorVariant } from '@/types';
 import { RangerSliderBaseProps } from '@/interfaces/RangerSlider';
@@ -59,12 +59,7 @@ const RangerSliderStyled = styled(MuiSlider)(() => ({
 }));
 
 export const RangerSlider = ({ defaultValue = 50, color = 'primary', ...props }: RangerSliderBaseProps) => {
-  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-  const theme = useMemo(() => (prefersDarkMode ? themes.light : themes.dark), [prefersDarkMode]);
-
   return (
-    <ThemeProvider theme={theme}>
-      <RangerSliderStyled aria-label="Default" color={color} {...props} />
-    </ThemeProvider>
+    <RangerSliderStyled aria-label="Default" color={color} {...props} />
   );
 };

package/src/components/Select.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import {
   FormControl,
   InputLabel,
@@ -6,11 +6,8 @@ import {
   MenuItem,
   Select as MuiSelect,
   OutlinedInput,
-  ThemeProvider,
-  useMediaQuery,
 } from '@mui/material';
 import { SelectBaseProps } from '../interfaces';
-import { themes } from '../helpers';
 import { styled } from '@mui/material/styles';
 import { CheckBox } from './CheckBox';
 
@@ -38,45 +35,40 @@ const SelectStyled = styled(MuiSelect)(({ multiple, variant }) => ({
 }));
 
 export const Select = ({ label, onChange, data = [], value = '', multiple = false, ...props }: SelectBaseProps) => {
-  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-  const theme = useMemo(() => (prefersDarkMode ? themes.light : themes.dark), [prefersDarkMode]);
-
   return (
-    <ThemeProvider theme={theme}>
-      <FormControl fullWidth>
-        <InputLabel id={props.id}>{label}</InputLabel>
+    <FormControl fullWidth>
+      <InputLabel id={props.id}>{label}</InputLabel>
 
-        {multiple ? (
-          <SelectStyled
-            labelId={props.id}
-            id="demo-simple-select"
-            value={value}
-            MenuProps={MenuProps}
-            input={<OutlinedInput label="Tag" />}
-            renderValue={(selected: any) => selected.join(', ')}
-            onChange={onChange}
-            multiple
-            {...props}
-          >
-            {data &&
-              data.map((item, key) => (
-                <MenuItem value={item.value} key={key}>
-                  <CheckBox checked={value.includes(String(item.value))} />
-                  <ListItemText primary={String(item.label)} />
-                </MenuItem>
-              ))}
-          </SelectStyled>
-        ) : (
-          <SelectStyled labelId={props.id} id="demo-simple-select" value={value} onChange={onChange} {...props}>
-            {data &&
-              data.map((item, key) => (
-                <MenuItem value={item.value} key={key}>
-                  <ListItemText primary={String(item.label)} />
-                </MenuItem>
-              ))}
-          </SelectStyled>
-        )}
-      </FormControl>
-    </ThemeProvider>
+      {multiple ? (
+        <SelectStyled
+          labelId={props.id}
+          id="demo-simple-select"
+          value={value}
+          MenuProps={MenuProps}
+          input={<OutlinedInput label="Tag" />}
+          renderValue={(selected: any) => selected.join(', ')}
+          onChange={onChange}
+          multiple
+          {...props}
+        >
+          {data &&
+            data.map((item, key) => (
+              <MenuItem value={item.value} key={key}>
+                <CheckBox checked={value.includes(String(item.value))} />
+                <ListItemText primary={String(item.label)} />
+              </MenuItem>
+            ))}
+        </SelectStyled>
+      ) : (
+        <SelectStyled labelId={props.id} id="demo-simple-select" value={value} onChange={onChange} {...props}>
+          {data &&
+            data.map((item, key) => (
+              <MenuItem value={item.value} key={key}>
+                <ListItemText primary={String(item.label)} />
+              </MenuItem>
+            ))}
+        </SelectStyled>
+      )}
+    </FormControl>
   );
 };

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

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

@@ -0,0 +1,60 @@
+import styled from "styled-components";
+
+export const Header = styled.div<any>`
+  margin: ${props => props.$showResults ? '0 16px 32px 16px;' : '0 16px;' };
+  display: flex;
+  justify-content: space-between;
+`
+
+export const Results = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`
+
+export const Tools = styled.div`
+
+`
+
+export const TextResult = styled.div`
+  color: #666666;
+  font-size: 16px;
+`
+
+export const TextClearSearchContent = styled.div`
+  height: 10px;
+`
+
+export const TextClearSearch = styled.p`
+  color: #DE8B50;
+  font-size: 14px;
+  cursor: pointer;
+  margin: 0;
+  &:hover {
+    text-decoration: underline;
+  }
+`
+
+export const IconTools = styled.div`
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+`
+
+export const ListTools = styled.div`
+  padding: 12px;
+  margin: 6px 0 0 -106px;
+  position: absolute;
+  background: #fff;
+  box-shadow: 0px 3px 6px #00000029;
+  border: 1px solid #E0E0E0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  font-size: 14px;
+  label {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  }
+`

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

@@ -0,0 +1,9 @@
+import Pagination from "./pagination";
+import Header from "./header"
+import TBody from "./tbody";
+
+export {
+  Pagination,
+  Header,
+  TBody
+}

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

@@ -0,0 +1,40 @@
+import React, { useCallback } from "react"
+import { Pagination as MuiPagination, PaginationItem } from '@mui/material'
+import * as S from "./styles"
+
+const PreviousPagination:React.FC<any> = () => {
+  return <span>{'<'}</span>
+}
+const NextPagination:React.FC<any> = () => {
+  return <span>{'>'}</span>
+}
+
+const Pagination:React.FC<any> = ({ table, onChangePage }) => {
+  
+  const onPageChange = useCallback((_event:React.ChangeEvent<unknown>, page:number) => {
+    if(!!onChangePage) {
+      onChangePage(page-1)
+    } else {
+      table.setPageIndex(page - 1)
+    }
+  }, [table])
+
+  return <S.Pagination>
+    <div className='content'>
+      <MuiPagination
+        onChange={onPageChange}
+        count={table.getPageCount()}
+        renderItem={(item:any) => (
+          <PaginationItem
+            classes={{root: 'button', selected: 'button-active'}}
+            slots={{ previous: PreviousPagination, next: NextPagination }}
+            sx={{height: '35px', minWidth: '35px'}}
+            {...item}
+          />
+        )}
+      />
+    </div>
+  </S.Pagination>
+}
+
+export default Pagination

package/src/components/Table/components/pagination/styles.tsx

@@ -0,0 +1,29 @@
+import styled from "styled-components";
+
+export const Pagination = styled.div`
+  width: 100%;
+  margin: 24px 0 0 0;
+  display: flex;
+  justify-content: center;
+  .content {
+    display: flex;
+    gap: 8px;
+    .button {
+      border: 1px solid #E8E9EC;
+      background: #fff;
+      border-radius: 4px;
+      color: #4D4F5C;
+      cursor: pointer;
+      &:disabled {
+        opacity: 0.4;
+      }
+    }
+    .button-active {
+      border: 1px solid #FFDB9F;
+      background: #FFDB9F;
+      color: #B74616;
+      border-radius: 4px;
+      cursor: pointer;
+    }
+  }
+`

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

@@ -0,0 +1,31 @@
+import React from "react"
+import { flexRender } from '@tanstack/react-table'
+import * as S from "./styles"
+
+const TBody:React.FC<any> = ({ table, onClick, onMouseOver, onMouseOut }) => {
+  return (
+    <tbody>
+      { table.getRowModel().rows.map((row: any, index: number) => {
+        return <S.Tr 
+          key={index} 
+          $hasAction={!!onClick || !!onMouseOver || !!onMouseOut}
+          onClick={() => onClick ? onClick(row.original) : null}
+          onMouseOver={() => onMouseOver ? onMouseOver(row.original) : null}
+          onMouseOut={() => onMouseOut ? onMouseOut(row.original) : null}>
+          { row.getVisibleCells().map((cell: any, index: number) => {
+            return (
+              <td key={index}>
+                { cell.column.columnDef.type == 'action'
+                    ? cell.getValue()
+                    : flexRender(cell.column.columnDef.cell, cell.getContext()) 
+                }
+              </td>
+            )
+          }) }
+        </S.Tr>
+      }) }
+    </tbody>
+  )
+}
+
+export default TBody

package/src/components/Table/components/tbody/styles.tsx

@@ -0,0 +1,5 @@
+import styled from "styled-components"
+
+export const Tr = styled.tr<any>`
+  cursor: ${props => props.$hasAction  ? 'pointer' : 'default' };
+`