norma-library 0.4.7 → 0.4.9

package/dist/esm/interfaces/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/interfaces/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/interfaces/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC"}

package/dist/esm/types/index.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-import { AvatarProps as MuiAvatarProps, ButtonProps as MuiButtonProps, BadgeProps as MuiBadgeProps, IconButtonProps as MuiIconButtonProps, TextFieldProps as MuiTextFieldProps, CheckboxProps as MuiCheckBoxProps, MenuProps as MuiDropDownProps, ChipProps as MuiChipProps, LinearProgressProps as MuiLinearProgressProps, SliderProps as MuiSliderProps, AccordionProps as MuiAccordionProps, TabsProps as MuiTabsProps, SelectProps as MuiSelectProps, PaperProps as MuiPaperProps, SvgIconProps, ModalProps, CardProps as MuiCardProps } from "@mui/material";
+import { AvatarProps as MuiAvatarProps, ButtonProps as MuiButtonProps, BadgeProps as MuiBadgeProps, IconButtonProps as MuiIconButtonProps, TextFieldProps as MuiTextFieldProps, CheckboxProps as MuiCheckBoxProps, MenuProps as MuiDropDownProps, ChipProps as MuiChipProps, LinearProgressProps as MuiLinearProgressProps, SliderProps as MuiSliderProps, AccordionProps as MuiAccordionProps, TabsProps as MuiTabsProps, SelectProps as MuiSelectProps, PaperProps as MuiPaperProps, SvgIconProps, ModalProps, CardProps as MuiCardProps, TableProps as MuiTableProps } from "@mui/material";
+import { TimelineProps as MuiTimeLineProps } from "@mui/lab";
 import { SwitchBaseProps as MuiSwitchBaseProps } from "@mui/material/internal/SwitchBase";
 import { iconsSVG } from "../components/Svgs";
 export type ColorVariant = "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning";
@@ -19,6 +20,7 @@ export type TextFieldVariant = "standard" | "outlined" | "filled";
 export type TextFieldSizeVariant = "small" | "medium";
 export type DirectionVariant = "vertical" | "horizontal";
 export type PaperVariant = "elevation" | "outlined";
+export type PositionVariant = "left" | "right" | "alternate" | "alternate-reverse";
 export type MuiTextFieldBaseProps = Omit<MuiTextFieldProps, "onChange" | "onBlur" | "onFocus" | "defaultValue" | "size" | "value" | "id" | "fullWidth" | "helperText" | "type" | "InputProps" | "InputLabelProps" | "autoComplete" | "label" | "helperText" | "InputLabelProps" | "margin" | "maxRows" | "minRows" | "multiline" | "name" | "placeholder" | "rows" | "select" | "SelectProps" | "sx" | "autoFocus" | "error" | "classes" | "children" | "color" | "variant">;
 export interface CheckboxPropsSizeOverrides {
 }
@@ -30,13 +32,15 @@ export type MuiCardBaseProps = Omit<MuiCardProps, "sx">;
 export type MuiDropDownBaseProps = Omit<MuiDropDownProps, "sx" | "variant">;
 export type MuiTagBaseProps = Omit<MuiChipProps, "sx" | "color">;
 export type MuiRangerSliderBaseProps = Omit<MuiSliderProps, "sx" | "color">;
-export type MuiProgressBarBaseProps = Omit<MuiLinearProgressProps, "sx">;
+export type MuiProgressBarBaseProps = Omit<MuiLinearProgressProps, "sx" | "ref">;
 export type MuiTabsBaseProps = Omit<MuiTabsProps, "sx" | "children" | "onChange" | "variant" | "value">;
 export type MuiAccordionBaseProps = Omit<MuiAccordionProps, "sx" | "children" | "defaultExpanded" | "onChange">;
 export type MuiSelectBaseProps = Omit<MuiSelectProps, "sx" | "value" | "onClose" | "onOpen" | "input" | "label">;
 export type MuiPaperBaseProps = Omit<MuiPaperProps, "sx">;
 export type MuiDatePickerBaseProps = Omit<MuiTextFieldProps, "sx">;
+export type MuiDataGridBaseProps = Omit<MuiTableProps, "sx">;
 export type MuiAvatarBaseProps = Omit<MuiAvatarProps, "sx" | "src" | "children" | "variant" | "sizes">;
+export type MuiTimeLineBaseProps = Omit<MuiTimeLineProps, "sx" | "position" | "children" | "ref">;
 export type MuiBadgeBaseProps = Omit<MuiBadgeProps, "sx" | "color" | "children" | "invisible" | "variant" | "className" | "badgeContent">;
 export type IconScale = "xsmall" | "small" | "medium" | "large" | "xlarge" | "2xlarge" | "3xlarge";
 export type IconColors = "inherit" | "primary" | "secondary" | "error" | "info" | "success" | "warning" | "white" | "black";
@@ -73,6 +77,12 @@ export type DataSelect = {
     label: string;
     value: string | number;
 };
+export type DataTimeLine = {
+    id?: string;
+    title: string;
+    data: string;
+    by: string;
+};
 export type RenderProps<E extends HTMLElement = HTMLElement> = {
     focusRef?: React.MutableRefObject<E | null>;
     id?: string;

package/dist/esm/types/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAoLA,MAAM,CAAC,IAAM,SAAS,GAA8B;IAClD,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,SAAS,EAAE,EAAE;IACb,SAAS,EAAE,EAAE;CACd,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/types/index.ts"],"names":[],"mappings":"AAsMA,MAAM,CAAC,IAAM,SAAS,GAA8B;IAClD,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,SAAS,EAAE,EAAE;IACb,SAAS,EAAE,EAAE;CACd,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "norma-library",
-  "version": "0.4.7",
+  "version": "0.4.9",
   "private": false,
   "description": "Norma Library. A React UI kit.",
   "scripts": {
@@ -18,6 +18,7 @@
     "@babel/preset-env": "^7.22.15",
     "@babel/preset-react": "^7.22.15",
     "@babel/preset-typescript": "^7.22.15",
+    "@mui/lab": "^5.0.0-alpha.145",
     "@storybook/addon-essentials": "^7.5.0-alpha.1",
     "@storybook/addon-interactions": "^7.5.0-alpha.1",
     "@storybook/addon-links": "^7.5.0-alpha.1",
@@ -42,7 +43,7 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@material-tailwind/react": "^2.1.1",
-    "@mui/icons-material": "^5.14.8",
+    "@mui/icons-material": "^5.14.9",
     "@mui/material": "^5.14.8",
     "@mui/x-date-pickers": "^6.14.0",
     "dayjs": "^1.11.9",

package/src/components/ChatMessage.tsx

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