norma-library 0.5.80 → 0.5.122

package/src/components/ChatMessageBalloon/ChatMessageBalloon.tsx

@@ -1,53 +1,55 @@
-import React, { useMemo } from 'react';
-import { Typography } from '@mui/material';
-import { ChatMessageBalloonProps } from '../../interfaces';
-import * as S from './ChatMessageBalloon.style'
-
-export const ChatMessageBalloon: React.FC<ChatMessageBalloonProps> = ({ 
-    label, 
-    description, 
-    date,
-    direction,
-    children,
-    className,
-    onMouseEnter,
-    onMouseLeave,
-    onRowMouseEnter,
-    onRowMouseLeave,
-    highlight,
-    ...rest 
-  }) => {
-
-  const ballonClassNames = useMemo(() => {
-    const classNames = []
-    if(!!onMouseEnter) classNames.push('is-interactive')
-    if(!!highlight) classNames.push('is-highlight')
-    return classNames.join(" ")
-  }, [highlight, onMouseEnter])
-
-  return (
-    <S.ChatMessageBalloonContainerStyle className={className} {...rest}>
-      <S.ChatMessageBalloonRowStyle direction={direction} onMouseLeave={onRowMouseLeave} onMouseEnter={onRowMouseEnter}>
-        <S.ChatMessageBalloonStyle onMouseLeave={onMouseLeave} onMouseEnter={onMouseEnter} direction={direction} className={ballonClassNames}>
-          <Typography
-            variant="subtitle2"
-            style={{
-              fontSize: "1rem",
-              fontWeight: "600",
-              marginBottom: '5px'
-            }}
-          >
-            {label}
-          </Typography>
-          {description}
-        </S.ChatMessageBalloonStyle>
-        <S.ChatMessageChildrenStyle direction={direction}>
-          {children}
-        </S.ChatMessageChildrenStyle>
-      </S.ChatMessageBalloonRowStyle>
-      <S.ChatMessageBalloonRowStyle direction={direction}>
-        <S.ChatMessageDateStyle fontSize={"0.7rem"}>{date}</S.ChatMessageDateStyle>
-      </S.ChatMessageBalloonRowStyle>
-    </S.ChatMessageBalloonContainerStyle>
-  );
-};
+import React, { useMemo } from 'react';
+import { Typography } from '@mui/material';
+import { ChatMessageBalloonProps } from '../../interfaces';
+import * as S from './ChatMessageBalloon.style'
+
+export const ChatMessageBalloon: React.FC<ChatMessageBalloonProps> = ({ 
+    label, 
+    description, 
+    date,
+    direction,
+    children,
+    className,
+    bottomChildren,
+    onMouseEnter,
+    onMouseLeave,
+    onRowMouseEnter,
+    onRowMouseLeave,
+    highlight,
+    ...rest 
+  }) => {
+
+  const ballonClassNames = useMemo(() => {
+    const classNames = []
+    if(!!onMouseEnter) classNames.push('is-interactive')
+    if(!!highlight) classNames.push('is-highlight')
+    return classNames.join(" ")
+  }, [highlight, onMouseEnter])
+
+  return (
+    <S.ChatMessageBalloonContainerStyle className={className} {...rest}>
+      <S.ChatMessageBalloonRowStyle direction={direction} onMouseLeave={onRowMouseLeave} onMouseEnter={onRowMouseEnter}>
+        <S.ChatMessageBalloonStyle onMouseLeave={onMouseLeave} onMouseEnter={onMouseEnter} direction={direction} className={ballonClassNames}>
+          <Typography
+            variant="subtitle2"
+            style={{
+              fontSize: "1rem",
+              fontWeight: "600",
+              marginBottom: '5px'
+            }}
+          >
+            {label}
+          </Typography>
+          {description}
+        </S.ChatMessageBalloonStyle>
+        <S.ChatMessageChildrenStyle direction={direction}>
+          {children}
+        </S.ChatMessageChildrenStyle>
+      </S.ChatMessageBalloonRowStyle>
+      <S.ChatMessageBalloonRowStyle direction={direction} sx={{gap: "10px"}}>
+        <S.ChatMessageDateStyle fontSize={"0.7rem"}>{date}</S.ChatMessageDateStyle>
+        {bottomChildren}
+      </S.ChatMessageBalloonRowStyle>
+    </S.ChatMessageBalloonContainerStyle>
+  );
+};

package/src/components/CheckBox.tsx

@@ -1,21 +1,21 @@
-import React from 'react';
-import { FormControlLabel, Checkbox as MuiCheckbox } from '@mui/material';
-
-import { CheckBoxBaseProps } from '../interfaces';
-
-import { styled } from '@mui/material/styles';
-
-const CheckBoxStyled = styled(MuiCheckbox)({});
-
-export const CheckBox = ({ ...props }: CheckBoxBaseProps) => {
-  
-  return (
-    <>
-      {props.label ? (
-        <FormControlLabel control={<CheckBoxStyled {...props} />} label={props.label} />
-      ) : (
-        <CheckBoxStyled {...props} />
-      )}
-    </>
-  );
-};
+import React from 'react';
+import { FormControlLabel, Checkbox as MuiCheckbox } from '@mui/material';
+
+import { CheckBoxBaseProps } from '../interfaces';
+
+import { styled } from '@mui/material/styles';
+
+const CheckBoxStyled = styled(MuiCheckbox)({});
+
+export const CheckBox = ({ ...props }: CheckBoxBaseProps) => {
+  
+  return (
+    <>
+      {props.label ? (
+        <FormControlLabel control={<CheckBoxStyled {...props} />} label={props.label} />
+      ) : (
+        <CheckBoxStyled {...props} />
+      )}
+    </>
+  );
+};

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

@@ -1,67 +1,67 @@
-import React from 'react';
-import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
-import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import { DatePicker as MuiDatePicker } from '@mui/x-date-pickers/DatePicker';
-import { MobileDatePicker as MuiMobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';
-import { DesktopDatePicker as MuiDesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
-import { DatePickerBaseProps } from '../interfaces';
-import { styled } from '@mui/material/styles';
-
-import 'dayjs/locale/pt-br';
-import 'dayjs/locale/en';
-import 'dayjs/locale/es';
-
-const MuiDatePickerStyled = styled(MuiDatePicker)({
-  '& .MuiOutlinedInput-notchedOutline': {
-    border: 'none',
-    borderRadius: 0,
-    borderBottom: '1px solid #666666',
-  },
-  '& .MuiFormLabel-root': {
-    backgroundColor: '#fff',
-    padding: '0 5px',
-  },
-});
-
-const MuiMobileDatePickerStyled = styled(MuiMobileDatePicker)({
-  '& .MuiOutlinedInput-notchedOutline': {
-    border: 'none',
-    borderRadius: 0,
-    borderBottom: '1px solid #666666',
-  },
-  '& .MuiFormLabel-root': {
-    backgroundColor: '#fff',
-    padding: '0 5px',
-  },
-});
-
-const MuiDesktopDatePickerStyled = styled(MuiDesktopDatePicker)({
-  '& .MuiOutlinedInput-notchedOutline': {
-    border: 'none',
-    borderRadius: 0,
-    borderBottom: '1px solid #666666',
-  },
-  '& .MuiFormLabel-root': {
-    backgroundColor: '#fff',
-    padding: '0 5px',
-  },
-});
-
-export const DatePicker = ({
-  label,
-  format = 'DD/MM/YYYY',
-  language = 'pt-br',
-  variant = 'desktop',
-}: DatePickerBaseProps) => {
-  
-  return (
-    <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={language}>
-      <DemoContainer components={['TimePicker', 'MobileTimePicker', 'DesktopTimePicker']}>
-        {variant === 'responsive' && <MuiDatePickerStyled label={label} format={format} />}
-        {variant === 'mobile' && <MuiMobileDatePickerStyled label={label} format={format} />}
-        {variant === 'desktop' && <MuiDesktopDatePickerStyled label={label} format={format} />}
-      </DemoContainer>
-    </LocalizationProvider>
-  );
-};
+import React from 'react';
+import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DatePicker as MuiDatePicker } from '@mui/x-date-pickers/DatePicker';
+import { MobileDatePicker as MuiMobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';
+import { DesktopDatePicker as MuiDesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
+import { DatePickerBaseProps } from '../interfaces';
+import { styled } from '@mui/material/styles';
+
+import 'dayjs/locale/pt-br';
+import 'dayjs/locale/en';
+import 'dayjs/locale/es';
+
+const MuiDatePickerStyled = styled(MuiDatePicker)({
+  '& .MuiOutlinedInput-notchedOutline': {
+    border: 'none',
+    borderRadius: 0,
+    borderBottom: '1px solid #666666',
+  },
+  '& .MuiFormLabel-root': {
+    backgroundColor: '#fff',
+    padding: '0 5px',
+  },
+});
+
+const MuiMobileDatePickerStyled = styled(MuiMobileDatePicker)({
+  '& .MuiOutlinedInput-notchedOutline': {
+    border: 'none',
+    borderRadius: 0,
+    borderBottom: '1px solid #666666',
+  },
+  '& .MuiFormLabel-root': {
+    backgroundColor: '#fff',
+    padding: '0 5px',
+  },
+});
+
+const MuiDesktopDatePickerStyled = styled(MuiDesktopDatePicker)({
+  '& .MuiOutlinedInput-notchedOutline': {
+    border: 'none',
+    borderRadius: 0,
+    borderBottom: '1px solid #666666',
+  },
+  '& .MuiFormLabel-root': {
+    backgroundColor: '#fff',
+    padding: '0 5px',
+  },
+});
+
+export const DatePicker = ({
+  label,
+  format = 'DD/MM/YYYY',
+  language = 'pt-br',
+  variant = 'desktop',
+}: DatePickerBaseProps) => {
+  
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={language}>
+      <DemoContainer components={['TimePicker', 'MobileTimePicker', 'DesktopTimePicker']}>
+        {variant === 'responsive' && <MuiDatePickerStyled label={label} format={format} />}
+        {variant === 'mobile' && <MuiMobileDatePickerStyled label={label} format={format} />}
+        {variant === 'desktop' && <MuiDesktopDatePickerStyled label={label} format={format} />}
+      </DemoContainer>
+    </LocalizationProvider>
+  );
+};

package/src/components/DropDown.tsx

@@ -1,24 +1,24 @@
-import React from 'react';
-import { Menu as MuiDropDown } from '@mui/material';
-import { DropDownBaseProps } from '../interfaces';
-import { styled } from '@mui/material/styles';
-
-const DropDownStyled = styled(MuiDropDown)({});
-
-export const DropDown = ({ open, children, ...props }: DropDownBaseProps) => {
-  
-  return (
-    <DropDownStyled
-      open
-      id="basic-menu"
-      anchorEl={props.anchorEl}
-      onClose={props.onClose}
-      MenuListProps={{
-        'aria-labelledby': 'basic-button',
-      }}
-      {...props}
-    >
-      {children}
-    </DropDownStyled>
-  );
-};
+import React from 'react';
+import { Menu as MuiDropDown } from '@mui/material';
+import { DropDownBaseProps } from '../interfaces';
+import { styled } from '@mui/material/styles';
+
+const DropDownStyled = styled(MuiDropDown)({});
+
+export const DropDown = ({ open, children, ...props }: DropDownBaseProps) => {
+  
+  return (
+    <DropDownStyled
+      open
+      id="basic-menu"
+      anchorEl={props.anchorEl}
+      onClose={props.onClose}
+      MenuListProps={{
+        'aria-labelledby': 'basic-button',
+      }}
+      {...props}
+    >
+      {children}
+    </DropDownStyled>
+  );
+};

package/src/components/IconButton.tsx

@@ -1,37 +1,37 @@
-import React from 'react';
-import { IconButton as MuiIconButton } from '@mui/material';
-import { IconButtonBaseProps } from '../interfaces';
-import { palette } from '../helpers';
-import { styled } from '@mui/material/styles';
-import { ButtonVariant, ColorVariant } from '@/types';
-
-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 IconButtonStyled = styled(MuiIconButton)<{
-  circle: boolean;
-  color: ColorVariant;
-  variant: ButtonVariant;
-  cursor: string;
-}>(({ circle, color, variant, cursor }) => ({
-  borderRadius: circle === true ? 99 : 5,
-  border: variant === 'outlined' ? `1px solid ${colorMap[color]}` : 'none',
-  backgroundColor: variant === 'contained' ? `${colorMap[color]}` : 'none',
-  cursor: cursor,
-}));
-
-export const IconButton = ({ circle = false, children, ...props }: IconButtonBaseProps) => {
-  
-  return (
-    <IconButtonStyled circle={circle} color="primary" variant="text" cursor="default" {...props}>
-      {children}
-    </IconButtonStyled>
-  );
-};
+import React from 'react';
+import { IconButton as MuiIconButton } from '@mui/material';
+import { IconButtonBaseProps } from '../interfaces';
+import { palette } from '../helpers';
+import { styled } from '@mui/material/styles';
+import { ButtonVariant, ColorVariant } from '@/types';
+
+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 IconButtonStyled = styled(MuiIconButton)<{
+  circle: boolean;
+  color: ColorVariant;
+  variant: ButtonVariant;
+  cursor: string;
+}>(({ circle, color, variant, cursor }) => ({
+  borderRadius: circle === true ? 99 : 5,
+  border: variant === 'outlined' ? `1px solid ${colorMap[color]}` : 'none',
+  backgroundColor: variant === 'contained' ? `${colorMap[color]}` : 'none',
+  cursor: cursor,
+}));
+
+export const IconButton = ({ circle = false, children, ...props }: IconButtonBaseProps) => {
+  
+  return (
+    <IconButtonStyled circle={circle} color="primary" variant="text" cursor="default" {...props}>
+      {children}
+    </IconButtonStyled>
+  );
+};

package/src/components/Icons.tsx

@@ -1,82 +1,82 @@
-import React, { FunctionComponent } from 'react';
-import { iconsSVG } from './Svgs';
-import { IconColors, IconScale } from '../types';
-import { IconsProps, SvgProps } from '../interfaces/Icons';
-import styled from '@emotion/styled';
-import { palette } from '../helpers';
-
-export const Svg = styled.svg<SvgProps>(
-  {
-    shapeRendering: 'inherit',
-    transform: 'translate3d(0,0,0)',
-  },
-  ({ inline }) => (inline ? { display: 'inline-block' } : { display: 'block' }),
-);
-
-const scaleSize: Record<IconScale, number> = {
-  xsmall: 14,
-  small: 20,
-  medium: 24,
-  large: 28,
-  xlarge: 32,
-  '2xlarge': 36,
-  '3xlarge': 40,
-};
-
-// Definindo um objeto com as cores de preenchimento e traço com base no MUI
-const colors: Record<IconColors, string> = {
-  inherit: palette.inherit,
-  primary: palette.primary,
-  secondary: palette.secondary,
-  error: palette.error,
-  info: palette.info,
-  success: palette.success,
-  warning: palette.warning,
-  white: palette.white,
-  black: palette.black,
-};
-
-export const Icons: FunctionComponent<IconsProps> = ({
-  icon,
-  scale,
-  useSymbol,
-  color = 'inherit',
-  ...props
-}: IconsProps) => {
-  let width = 24;
-  let height = 24;
-  if (scale) {
-    width = scaleSize[scale];
-    height = scaleSize[scale];
-  }
-
-  // Obtém a cor de preenchimento e traço com base no valor da prop 'color'
-  const fill = colors[color];
-  const stroke = colors[color];
-
-  const Svg = styled.svg`
-    display: inline-block;
-    shape-rendering: inherit;
-    vertical-align: middle;
-    fill: ${fill};
-    path {
-      stroke: ${stroke};
-    }
-    circle {
-      stroke: ${stroke};
-    }
-    rect {
-      stroke: ${stroke};
-    }
-  `;
-
-  return (
-    <Svg viewBox="0 0 56 56" width={`${width}px`} height={`${height}px`} {...props}>
-      {useSymbol ? (
-        <use xlinkHref={`#icon--${icon}`} fill={fill} stroke={stroke} />
-      ) : (
-        React.cloneElement(iconsSVG[icon], { fill, stroke })
-      )}
-    </Svg>
-  );
-};
+import React, { FunctionComponent } from 'react';
+import { iconsSVG } from './Svgs';
+import { IconColors, IconScale } from '../types';
+import { IconsProps, SvgProps } from '../interfaces/Icons';
+import styled from '@emotion/styled';
+import { palette } from '../helpers';
+
+export const Svg = styled.svg<SvgProps>(
+  {
+    shapeRendering: 'inherit',
+    transform: 'translate3d(0,0,0)',
+  },
+  ({ inline }) => (inline ? { display: 'inline-block' } : { display: 'block' }),
+);
+
+const scaleSize: Record<IconScale, number> = {
+  xsmall: 14,
+  small: 20,
+  medium: 24,
+  large: 28,
+  xlarge: 32,
+  '2xlarge': 36,
+  '3xlarge': 40,
+};
+
+// Definindo um objeto com as cores de preenchimento e traço com base no MUI
+const colors: Record<IconColors, string> = {
+  inherit: palette.inherit,
+  primary: palette.primary,
+  secondary: palette.secondary,
+  error: palette.error,
+  info: palette.info,
+  success: palette.success,
+  warning: palette.warning,
+  white: palette.white,
+  black: palette.black,
+};
+
+export const Icons: FunctionComponent<IconsProps> = ({
+  icon,
+  scale,
+  useSymbol,
+  color = 'inherit',
+  ...props
+}: IconsProps) => {
+  let width = 24;
+  let height = 24;
+  if (scale) {
+    width = scaleSize[scale];
+    height = scaleSize[scale];
+  }
+
+  // Obtém a cor de preenchimento e traço com base no valor da prop 'color'
+  const fill = colors[color];
+  const stroke = colors[color];
+
+  const Svg = styled.svg`
+    display: inline-block;
+    shape-rendering: inherit;
+    vertical-align: middle;
+    fill: ${fill};
+    path {
+      stroke: ${stroke};
+    }
+    circle {
+      stroke: ${stroke};
+    }
+    rect {
+      stroke: ${stroke};
+    }
+  `;
+
+  return (
+    <Svg viewBox="0 0 56 56" width={`${width}px`} height={`${height}px`} {...props}>
+      {useSymbol ? (
+        <use xlinkHref={`#icon--${icon}`} fill={fill} stroke={stroke} />
+      ) : (
+        React.cloneElement(iconsSVG[icon], { fill, stroke })
+      )}
+    </Svg>
+  );
+};