norma-library 0.4.9 → 0.5.0

package/src/components/ChatMessage.tsx

@@ -1,89 +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/CheckBox.tsx

@@ -1,32 +1,21 @@
-import React, { useMemo } from "react";
-import {
-  FormControlLabel,
-  Checkbox as MuiCheckbox,
-  ThemeProvider,
-  useMediaQuery,
-} from "@mui/material";
+import React, { useMemo } from 'react';
+import { FormControlLabel, Checkbox as MuiCheckbox, ThemeProvider, useMediaQuery } from '@mui/material';
 
-import { CheckBoxBaseProps } from "../interfaces";
+import { CheckBoxBaseProps } from '../interfaces';
 
-import { themes } from "../helpers";
-import { styled } from "@mui/material/styles";
+import { themes } from '../helpers';
+import { styled } from '@mui/material/styles';
 
 const CheckBoxStyled = styled(MuiCheckbox)({});
 
 export const CheckBox = ({ ...props }: CheckBoxBaseProps) => {
-  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
-  const theme = useMemo(
-    () => (prefersDarkMode ? themes.light : themes.dark),
-    [prefersDarkMode]
-  );
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+  const theme = useMemo(() => (prefersDarkMode ? themes.light : themes.dark), [prefersDarkMode]);
 
   return (
     <ThemeProvider theme={theme}>
       {props.label ? (
-        <FormControlLabel
-          control={<CheckBoxStyled {...props} />}
-          label={props.label}
-        />
+        <FormControlLabel control={<CheckBoxStyled {...props} />} label={props.label} />
       ) : (
         <CheckBoxStyled {...props} />
       )}