norma-library 0.6.3 → 0.6.5

package/src/components/Select.tsx

@@ -1,74 +1,74 @@
-import React from 'react';
-import {
-  FormControl,
-  InputLabel,
-  ListItemText,
-  MenuItem,
-  Select as MuiSelect,
-  OutlinedInput,
-} from '@mui/material';
-import { SelectBaseProps } from '../interfaces';
-import { styled } from '@mui/material/styles';
-import { CheckBox } from './CheckBox';
-
-const ITEM_HEIGHT = 48;
-const ITEM_PADDING_TOP = 8;
-const MenuProps = {
-  PaperProps: {
-    style: {
-      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
-      width: 250,
-    },
-  },
-};
-
-const SelectStyled = styled(MuiSelect)(({ multiple, variant }) => ({
-  '& .MuiOutlinedInput-notchedOutline': {
-    border: multiple === true ? 'none' : '1px solid #666666 ',
-    borderRadius: multiple === true ? 0 : 4,
-    borderBottom: '1px solid #666666',
-  },
-  '& .MuiFormLabel-root': {
-    backgroundColor: variant === 'standard' ? '#fff' : 'inherit',
-    padding: variant === 'standard' ? '0 5px' : 0,
-  },
-}));
-
-export const Select = ({ label, onChange, data = [], value = '', multiple = false, ...props }: SelectBaseProps) => {
-  return (
-    <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>
-  );
-};
+import React from 'react';
+import {
+  FormControl,
+  InputLabel,
+  ListItemText,
+  MenuItem,
+  Select as MuiSelect,
+  OutlinedInput,
+} from '@mui/material';
+import { SelectBaseProps } from '../interfaces';
+import { styled } from '@mui/material/styles';
+import { CheckBox } from './CheckBox';
+
+const ITEM_HEIGHT = 48;
+const ITEM_PADDING_TOP = 8;
+const MenuProps = {
+  PaperProps: {
+    style: {
+      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+      width: 250,
+    },
+  },
+};
+
+const SelectStyled = styled(MuiSelect)(({ multiple, variant }) => ({
+  '& .MuiOutlinedInput-notchedOutline': {
+    border: multiple === true ? 'none' : '1px solid #666666 ',
+    borderRadius: multiple === true ? 0 : 4,
+    borderBottom: '1px solid #666666',
+  },
+  '& .MuiFormLabel-root': {
+    backgroundColor: variant === 'standard' ? '#fff' : 'inherit',
+    padding: variant === 'standard' ? '0 5px' : 0,
+  },
+}));
+
+export const Select = ({ label, onChange, data = [], value = '', multiple = false, ...props }: SelectBaseProps) => {
+  return (
+    <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>
+  );
+};

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

@@ -1,62 +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>
-  );
-};
-
+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

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

package/src/components/SelectInput/index.tsx

@@ -1,46 +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>
-  )
-}
-
+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

@@ -1,16 +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
+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

@@ -1,32 +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;
+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/StatusModal/StatusModal.style.tsx

@@ -1,75 +1,75 @@
-import styled from 'styled-components';
-
-export const Container = styled.div`
-  width: 100vw;
-  height: 100vh;
-  position: fixed;
-  top: 0;
-  left: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: rgba(0, 0, 0, 0.6);
-  z-index: 9999;
-`;
-
-export const Modal = styled.div<{ $w?: string }>`
-  display: flex;
-  width: ${props => props.$w || '430px'};
-  padding: 24px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  border-radius: 4px;
-  background: #fff;
-`;
-
-export const ModalHeader = styled.div`
-  display: flex;
-  gap: 16px;
-  align-self: stretch;
-  align-items: center;
-`;
-
-export const ModalIcon = styled.div<{ $bg: string }>`
-  display: flex;
-  padding: 4px;
-  align-items: center;
-  border-radius: 4px;
-  background-color: ${props => props.$bg};
-`;
-
-export const ModalTitle = styled.h1`
-  color: #1d1d1d;
-  font-size: 24px;
-  font-style: normal;
-  font-weight: 500;
-  letter-spacing: 0.25px;
-  margin: 0;
-`;
-
-export const ModalBody = styled.div`
-  display: flex;
-  width: 100%;
-  border-bottom: 2px solid #a3a3a3;
-  margin-top: 16px;
-  padding-bottom: 32px;
-`;
-
-export const ModalText = styled.p`
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  letter-spacing: 0.17px;
-  margin: 0;
-  line-height: 1.3;
-`;
-
-export const ModalFooter = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  width: 100%;
-  margin-top: 8px;
-  gap: 8px;
-`;
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 9999;
+`;
+
+export const Modal = styled.div<{ $w?: string }>`
+  display: flex;
+  width: ${props => props.$w || '430px'};
+  padding: 24px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  border-radius: 4px;
+  background: #fff;
+`;
+
+export const ModalHeader = styled.div`
+  display: flex;
+  gap: 16px;
+  align-self: stretch;
+  align-items: center;
+`;
+
+export const ModalIcon = styled.div<{ $bg: string }>`
+  display: flex;
+  padding: 4px;
+  align-items: center;
+  border-radius: 4px;
+  background-color: ${props => props.$bg};
+`;
+
+export const ModalTitle = styled.h1`
+  color: #1d1d1d;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 500;
+  letter-spacing: 0.25px;
+  margin: 0;
+`;
+
+export const ModalBody = styled.div`
+  display: flex;
+  width: 100%;
+  border-bottom: 2px solid #a3a3a3;
+  margin-top: 16px;
+  padding-bottom: 32px;
+`;
+
+export const ModalText = styled.p`
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  letter-spacing: 0.17px;
+  margin: 0;
+  line-height: 1.3;
+`;
+
+export const ModalFooter = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+  margin-top: 8px;
+  gap: 8px;
+`;