norma-library 0.6.3 → 0.6.4

package/src/components/Button.tsx

@@ -1,26 +1,26 @@
-import React from 'react';
-import { Button as MuiButton } from '@mui/material';
-import { ButtonBaseProps } from '../interfaces';
-import { styled } from '@mui/material/styles';
-
-const ButtonStyled = styled(MuiButton)({
-  textTransform: 'none',
-  '& .MuiButton-sizeLarge': {
-    height: '75px',
-    backgroundColor: 'red',
-  },
-});
-
-export const Button = ({ label, children, ...props }: ButtonBaseProps) => {
-  
-  return (
-    <ButtonStyled
-      {...props}
-      sx={{
-        color: props.variant === 'contained' ? '#FFFF' : props.color,
-      }}
-    >
-      {label ? label : children}
-    </ButtonStyled>
-  );
-};
+import React from 'react';
+import { Button as MuiButton } from '@mui/material';
+import { ButtonBaseProps } from '../interfaces';
+import { styled } from '@mui/material/styles';
+
+const ButtonStyled = styled(MuiButton)({
+  textTransform: 'none',
+  '& .MuiButton-sizeLarge': {
+    height: '75px',
+    backgroundColor: 'red',
+  },
+});
+
+export const Button = ({ label, children, ...props }: ButtonBaseProps) => {
+  
+  return (
+    <ButtonStyled
+      {...props}
+      sx={{
+        color: props.variant === 'contained' ? '#FFFF' : props.color,
+      }}
+    >
+      {label ? label : children}
+    </ButtonStyled>
+  );
+};

package/src/components/Card.tsx

@@ -1,38 +1,38 @@
-import React from 'react';
-import { Card as MuiCard } from '@mui/material';
-import { CardBaseProps } from '../interfaces';
-import { palette } from '../helpers';
-import { styled } from '@mui/material/styles';
-import { 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 CardStyled = styled(MuiCard)<{
-  borderColor?: ColorVariant;
-}>(({ borderColor }) => ({
-  padding: 16,
-  borderRadius: 5,
-  boxShadow: '0px 2px 8px #00000053',
-  borderLeft: borderColor ? `7px solid ${colorMap[borderColor]}` : 'none',
-}));
-
-export const Card = ({
-  children,
-  border,
-  color = 'inherit',
-  ...props
-}: CardBaseProps & { border?: boolean; color?: ColorVariant }) => {
-  return (
-    <CardStyled borderColor={border ? color : undefined} {...props}>
-      {children}
-    </CardStyled>
-  );
+import React from 'react';
+import { Card as MuiCard } from '@mui/material';
+import { CardBaseProps } from '../interfaces';
+import { palette } from '../helpers';
+import { styled } from '@mui/material/styles';
+import { 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 CardStyled = styled(MuiCard)<{
+  borderColor?: ColorVariant;
+}>(({ borderColor }) => ({
+  padding: 16,
+  borderRadius: 5,
+  boxShadow: '0px 2px 8px #00000053',
+  borderLeft: borderColor ? `7px solid ${colorMap[borderColor]}` : 'none',
+}));
+
+export const Card = ({
+  children,
+  border,
+  color = 'inherit',
+  ...props
+}: CardBaseProps & { border?: boolean; color?: ColorVariant }) => {
+  return (
+    <CardStyled borderColor={border ? color : undefined} {...props}>
+      {children}
+    </CardStyled>
+  );
 };

package/src/components/ChatMessage.tsx

@@ -1,87 +1,87 @@
-import React from 'react';
-import { Box, Typography } from '@mui/material';
-import { styled } from '@mui/material/styles';
-import { ChatMessageProps } from '@/interfaces';
-
-const Item = styled(Box)<{
-  orient?: string;
-}>(({ orient }) => ({
-  borderColor: '#ccc',
-  display: 'flex',
-  position: 'relative',
-  width: '100%',
-  justifyContent: orient === 'replay' ? 'flex-end' : 'flex-start',
-  marginBottom: '10px',
-  alignItems: 'center',
-}));
-
-const ContainerStyled = styled(Box)({
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  minWidth: '640px',
-  backgroundColor: '#F0F0F0',
-  padding: '10px',
-});
-
-const BoxStyled = styled(Box)<{
-  orient?: string;
-}>(({ orient }) => ({
-  width: '70%',
-  backgroundColor: orient === 'replay' ? '#E18B50' : '#FFF',
-  color: orient === 'replay' ? '#FFF' : '#4D4F5C',
-  borderTopLeftRadius: 30,
-  borderTopRightRadius: 30,
-  borderBottomLeftRadius: orient === 'me' ? 2 : 30,
-  borderBottomRightRadius: orient === 'me' ? 30 : 2,
-  marginLeft: orient === 'replay' ? '10px' : 0,
-  marginRight: orient === 'me' ? '10px' : 0,
-  padding: 20,
-}));
-
-export const ChatMessage: React.FC<ChatMessageProps> = ({ data }) => {
-  return (
-    <ContainerStyled>
-      {data.map((item, key) => (
-        <Item key={key} orient={item.send}>
-          {item.emotion && item.send === 'replay' && <>{item.emotion}</>}
-          <BoxStyled orient={item.send}>
-            <Typography
-              variant="subtitle2"
-              style={{
-                marginBottom: '5px',
-                font: 'normal normal 600 16px/20px Source Sans Pro',
-              }}
-            >
-              {item.name}
-            </Typography>
-            <Typography
-              variant="body1"
-              style={{
-                font: 'normal normal normal 16px/20px Source Sans Pro',
-              }}
-            >
-              {item.message}
-            </Typography>
-            <Typography
-              variant="caption"
-              style={{
-                position: 'absolute',
-                bottom: '-18px',
-                left: item.send === 'me' ? 0 : 'auto',
-                right: item.send === 'me' ? 'auto' : 0,
-                font: 'normal normal normal 11px/13px Source Sans Pro',
-                opacity: 0.5,
-                color: '#4D4F5C',
-              }}
-            >
-              {item.time}
-            </Typography>
-          </BoxStyled>
-          {item.emotion && item.send === 'me' && <>{item.emotion}</>}
-          {item.emotionReplay && item.send === 'me' && <>{item.emotionReplay}</>}
-        </Item>
-      ))}
-    </ContainerStyled>
-  );
-};
+import React from 'react';
+import { Box, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { ChatMessageProps } from '@/interfaces';
+
+const Item = styled(Box)<{
+  orient?: string;
+}>(({ orient }) => ({
+  borderColor: '#ccc',
+  display: 'flex',
+  position: 'relative',
+  width: '100%',
+  justifyContent: orient === 'replay' ? 'flex-end' : 'flex-start',
+  marginBottom: '10px',
+  alignItems: 'center',
+}));
+
+const ContainerStyled = styled(Box)({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  minWidth: '640px',
+  backgroundColor: '#F0F0F0',
+  padding: '10px',
+});
+
+const BoxStyled = styled(Box)<{
+  orient?: string;
+}>(({ orient }) => ({
+  width: '70%',
+  backgroundColor: orient === 'replay' ? '#E18B50' : '#FFF',
+  color: orient === 'replay' ? '#FFF' : '#4D4F5C',
+  borderTopLeftRadius: 30,
+  borderTopRightRadius: 30,
+  borderBottomLeftRadius: orient === 'me' ? 2 : 30,
+  borderBottomRightRadius: orient === 'me' ? 30 : 2,
+  marginLeft: orient === 'replay' ? '10px' : 0,
+  marginRight: orient === 'me' ? '10px' : 0,
+  padding: 20,
+}));
+
+export const ChatMessage: React.FC<ChatMessageProps> = ({ data }) => {
+  return (
+    <ContainerStyled>
+      {data.map((item, key) => (
+        <Item key={key} orient={item.send}>
+          {item.emotion && item.send === 'replay' && <>{item.emotion}</>}
+          <BoxStyled orient={item.send}>
+            <Typography
+              variant="subtitle2"
+              style={{
+                marginBottom: '5px',
+                font: 'normal normal 600 16px/20px Source Sans Pro',
+              }}
+            >
+              {item.name}
+            </Typography>
+            <Typography
+              variant="body1"
+              style={{
+                font: 'normal normal normal 16px/20px Source Sans Pro',
+              }}
+            >
+              {item.message}
+            </Typography>
+            <Typography
+              variant="caption"
+              style={{
+                position: 'absolute',
+                bottom: '-18px',
+                left: item.send === 'me' ? 0 : 'auto',
+                right: item.send === 'me' ? 'auto' : 0,
+                font: 'normal normal normal 11px/13px Source Sans Pro',
+                opacity: 0.5,
+                color: '#4D4F5C',
+              }}
+            >
+              {item.time}
+            </Typography>
+          </BoxStyled>
+          {item.emotion && item.send === 'me' && <>{item.emotion}</>}
+          {item.emotionReplay && item.send === 'me' && <>{item.emotionReplay}</>}
+        </Item>
+      ))}
+    </ContainerStyled>
+  );
+};

package/src/components/ChatMessageBalloon/ChatMessageBalloon.style.ts

@@ -1,56 +1,56 @@
-import { Box, Typography } from '@mui/material';
-import { styled } from '@mui/material/styles';
-
-export const ChatMessageBalloonContainerStyle: any = styled(Box)({
-  display: 'flex',
-  flexDirection: 'column',
-});
-
-export const ChatMessageBalloonRowStyle: any = styled('div')<{ direction: string }>`
-  display: flex;
-  margin-bottom: 8px;
-  flex-direction: ${props => (props.direction === 'I' ? 'row-reverse' : 'row')};
-
-  &:last-child {
-    margin-bottom: 0px;
-  }
-`;
-
-export const ChatMessageBalloonStyle: any = styled('div')<{ direction: string }>`
-  background-color: ${props => (props.direction === 'I' ? '#FFF' : '#E18B50')};
-  border: 2px solid transparent;
-  border-radius: ${props => (props.direction === 'I' ? '20px 20px 0px 20px' : '20px 20px 20px 0px')};
-  box-sizing: border-box;
-  color: ${props => (props.direction === 'I' ? '#4D4F5B' : '#FFF')};
-  display: flex;
-  flex-direction: column;
-  padding: 12px 24px;
-  width: 60%;
-  transition: border 0.6s cubic-bezier(0.16, 1, 0.3, 1);
-
-  &.is-highlight {
-    border: 2px solid #8a8888;
-  }
-
-  &.is-interactive {
-    cursor: pointer;
-
-    &:hover {
-      border: 2px solid #8a8888;
-    }
-  }
-`;
-
-export const ChatMessageDateStyle: any = styled(Typography)`
-  color: #43425d;
-  opacity: 0.5;
-`;
-
-export const ChatMessageChildrenStyle: any = styled('div')<{ direction: string }>`
-  align-items: center;
-  box-sizing: border-box;
-  display: flex;
-  flex: 1;
-  justify-content: ${props => (props.direction === 'I' ? 'end' : 'start')};
-  padding: 8px;
-`;
+import { Box, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+export const ChatMessageBalloonContainerStyle: any = styled(Box)({
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+export const ChatMessageBalloonRowStyle: any = styled('div')<{ direction: string }>`
+  display: flex;
+  margin-bottom: 8px;
+  flex-direction: ${props => (props.direction === 'I' ? 'row-reverse' : 'row')};
+
+  &:last-child {
+    margin-bottom: 0px;
+  }
+`;
+
+export const ChatMessageBalloonStyle: any = styled('div')<{ direction: string }>`
+  background-color: ${props => (props.direction === 'I' ? '#FFF' : '#E18B50')};
+  border: 2px solid transparent;
+  border-radius: ${props => (props.direction === 'I' ? '20px 20px 0px 20px' : '20px 20px 20px 0px')};
+  box-sizing: border-box;
+  color: ${props => (props.direction === 'I' ? '#4D4F5B' : '#FFF')};
+  display: flex;
+  flex-direction: column;
+  padding: 12px 24px;
+  width: 60%;
+  transition: border 0.6s cubic-bezier(0.16, 1, 0.3, 1);
+
+  &.is-highlight {
+    border: 2px solid #8a8888;
+  }
+
+  &.is-interactive {
+    cursor: pointer;
+
+    &:hover {
+      border: 2px solid #8a8888;
+    }
+  }
+`;
+
+export const ChatMessageDateStyle: any = styled(Typography)`
+  color: #43425d;
+  opacity: 0.5;
+`;
+
+export const ChatMessageChildrenStyle: any = styled('div')<{ direction: string }>`
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  flex: 1;
+  justify-content: ${props => (props.direction === 'I' ? 'end' : 'start')};
+  padding: 8px;
+`;

package/src/components/ChatMessageBalloon/ChatMessageBalloon.tsx

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

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

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