norma-library 0.6.2 → 0.6.4

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,71 +1,71 @@
-import React from 'react';
-import { LinearProgress as MuiProgressBar, linearProgressClasses, Typography } from '@mui/material';
-import { styled } from '@mui/material/styles';
-import { ProgressBarBaseProps, CustomColor } from '../interfaces';
-
-const ProgressBarStyled = styled(MuiProgressBar)<{ colorCustom?: CustomColor; $h?: number }>(({ colorCustom, $h }) => ({
-  width: '100%',
-  height: $h ? `${$h}px` : '10px',
-  borderRadius: '10px',
-  position: 'relative',
-  backgroundColor: colorCustom ? colorCustom.root : undefined,
-  [`&.${linearProgressClasses.determinate}`]: {
-    backgroundColor: colorCustom ? colorCustom.root : undefined,
-  },
-  [`& .${linearProgressClasses.bar}`]: {
-    backgroundColor: colorCustom ? colorCustom.bar : undefined,
-  },
-}));
-
-const ProgressBarLabelStyled = styled(Typography)<{ $fSize?: string }>`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 8px;
-  position: relative;
-  text-align: left;
-  font-size: ${({ $fSize }) => $fSize || '1rem'};
-`;
-
-export const ProgressBar = ({
-  value = 0,
-  label,
-  variant = 'determinate',
-  total,
-  className,
-  localeString,
-  colorCustom,
-  color = 'primary',
-  htmlLabel,
-  ...props
-}: ProgressBarBaseProps) => {
-  const percentage = value && total ? (value / total) * 100 : 0;
-
-  return (
-    <div className={className} style={{ minWidth: '100px' }}>
-      {label ? (
-        <ProgressBarLabelStyled $fSize={props.fSize} className="ProgressBarLabel">
-          <>
-            {label}
-            {!props.hideValue && (
-              <span style={{ right: 0 }}>
-                {localeString ? value.toLocaleString() : value} ({percentage.toFixed(2)}%)
-              </span>
-            )}
-          </>
-        </ProgressBarLabelStyled>
-      ) : (
-        htmlLabel
-      )}
-
-      <ProgressBarStyled
-        value={percentage}
-        variant={variant}
-        colorCustom={colorCustom}
-        $h={props.h}
-        color={colorCustom ? undefined : color}
-        {...props}
-      />
-    </div>
-  );
-};
+import React from 'react';
+import { LinearProgress as MuiProgressBar, linearProgressClasses, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { ProgressBarBaseProps, CustomColor } from '../interfaces';
+
+const ProgressBarStyled = styled(MuiProgressBar)<{ colorCustom?: CustomColor; $h?: number }>(({ colorCustom, $h }) => ({
+  width: '100%',
+  height: $h ? `${$h}px` : '10px',
+  borderRadius: '10px',
+  position: 'relative',
+  backgroundColor: colorCustom ? colorCustom.root : undefined,
+  [`&.${linearProgressClasses.determinate}`]: {
+    backgroundColor: colorCustom ? colorCustom.root : undefined,
+  },
+  [`& .${linearProgressClasses.bar}`]: {
+    backgroundColor: colorCustom ? colorCustom.bar : undefined,
+  },
+}));
+
+const ProgressBarLabelStyled = styled(Typography)<{ $fSize?: string }>`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+  position: relative;
+  text-align: left;
+  font-size: ${({ $fSize }) => $fSize || '1rem'};
+`;
+
+export const ProgressBar = ({
+  value = 0,
+  label,
+  variant = 'determinate',
+  total,
+  className,
+  localeString,
+  colorCustom,
+  color = 'primary',
+  htmlLabel,
+  ...props
+}: ProgressBarBaseProps) => {
+  const percentage = value && total ? (value / total) * 100 : 0;
+
+  return (
+    <div className={className} style={{ minWidth: '100px' }}>
+      {label ? (
+        <ProgressBarLabelStyled $fSize={props.fSize} className="ProgressBarLabel">
+          <>
+            {label}
+            {!props.hideValue && (
+              <span style={{ right: 0 }}>
+                {localeString ? value.toLocaleString() : value} ({percentage.toFixed(2)}%)
+              </span>
+            )}
+          </>
+        </ProgressBarLabelStyled>
+      ) : (
+        htmlLabel
+      )}
+
+      <ProgressBarStyled
+        value={percentage}
+        variant={variant}
+        colorCustom={colorCustom}
+        $h={props.h}
+        color={colorCustom ? undefined : color}
+        {...props}
+      />
+    </div>
+  );
+};

package/src/components/RadioGroup.tsx

@@ -1,43 +1,43 @@
-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) => {
-  const { onChange } = props;
-  
-  return (
-    <FormControl disabled={props.disabled}>
-      <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}
-        onChange={!!onChange ? (event, value) => onChange(event, value) : undefined}
-      >
-        {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}
-              sx={{alignItems: "start"}}
-            />
-          ))}
-      </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) => {
+  const { onChange } = props;
+  
+  return (
+    <FormControl disabled={props.disabled}>
+      <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}
+        onChange={!!onChange ? (event, value) => onChange(event, value) : undefined}
+      >
+        {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}
+              sx={{alignItems: "start"}}
+            />
+          ))}
+      </MuiRadioGroup>
+    </FormControl>
+  );
+};

package/src/components/RangerSlider.tsx

@@ -1,65 +1,65 @@
-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';
-
-const colorMap: Record<ColorVariant, string> = {
-  inherit: palette.inherit,
-  primary: palette.primary,
-  secondary: palette.secondary,
-  error: palette.error,
-  warning: palette.warning,
-  info: palette.info,
-  success: palette.success,
-};
-
-const RangerSliderStyled = styled(MuiSlider)(() => ({
-  height: 8,
-  color: colorMap['primary'],
-  '& .MuiSlider-track': {
-    border: 'none',
-  },
-  '& .MuiSlider-thumb': {
-    height: 18,
-    width: 18,
-    backgroundColor: '#FFF',
-    border: `2px solid ${colorMap['primary']}`,
-    '&:focus, &:hover, &.Mui-active, &.Mui-focusVisible': {
-      boxShadow: 'inherit',
-    },
-    '&:before': {
-      width: '8px',
-      height: '8px',
-      position: 'absolute',
-      display: 'block',
-      background: colorMap['primary'],
-    },
-  },
-  '& .MuiSlider-valueLabel': {
-    fontSize: 12,
-    fontWeight: 'normal',
-    top: 48,
-    position: 'absolute',
-    transition: 'none',
-    color: colorMap['primary'],
-    '&:before': {
-      bottom: 'inherit',
-      top: '-8px',
-    },
-    '& *': {
-      background: 'transparent',
-      color: '#FFF',
-    },
-  },
-  '& .MuiSlider-rail': {
-    color: '#F0F2F8 ',
-    opacity: 1,
-    height: 10,
-  },
-}));
-
-export const RangerSlider = ({ defaultValue = 50, color = 'primary', ...props }: RangerSliderBaseProps) => {
-  return <RangerSliderStyled aria-label="Default" color={color} {...props} />;
-};
+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';
+
+const colorMap: Record<ColorVariant, string> = {
+  inherit: palette.inherit,
+  primary: palette.primary,
+  secondary: palette.secondary,
+  error: palette.error,
+  warning: palette.warning,
+  info: palette.info,
+  success: palette.success,
+};
+
+const RangerSliderStyled = styled(MuiSlider)(() => ({
+  height: 8,
+  color: colorMap['primary'],
+  '& .MuiSlider-track': {
+    border: 'none',
+  },
+  '& .MuiSlider-thumb': {
+    height: 18,
+    width: 18,
+    backgroundColor: '#FFF',
+    border: `2px solid ${colorMap['primary']}`,
+    '&:focus, &:hover, &.Mui-active, &.Mui-focusVisible': {
+      boxShadow: 'inherit',
+    },
+    '&:before': {
+      width: '8px',
+      height: '8px',
+      position: 'absolute',
+      display: 'block',
+      background: colorMap['primary'],
+    },
+  },
+  '& .MuiSlider-valueLabel': {
+    fontSize: 12,
+    fontWeight: 'normal',
+    top: 48,
+    position: 'absolute',
+    transition: 'none',
+    color: colorMap['primary'],
+    '&:before': {
+      bottom: 'inherit',
+      top: '-8px',
+    },
+    '& *': {
+      background: 'transparent',
+      color: '#FFF',
+    },
+  },
+  '& .MuiSlider-rail': {
+    color: '#F0F2F8 ',
+    opacity: 1,
+    height: 10,
+  },
+}));
+
+export const RangerSlider = ({ defaultValue = 50, color = 'primary', ...props }: RangerSliderBaseProps) => {
+  return <RangerSliderStyled aria-label="Default" color={color} {...props} />;
+};

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