norma-library 0.5.66 → 0.5.67

package/dist/esm/components/ChatMessageBalloon/ChatMessageBalloon.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { ChatMessageBalloonProps } from '@/interfaces';
+export declare const ChatMessageBalloon: React.FC<ChatMessageBalloonProps>;

package/dist/esm/components/ChatMessageBalloon/ChatMessageBalloon.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Typography } from '@mui/material';
+import * as S from './ChatMessageBalloon.style';
+export var ChatMessageBalloon = function (_a) {
+    var label = _a.label, description = _a.description, date = _a.date, direction = _a.direction, children = _a.children;
+    return (React.createElement(S.ChatMessageBalloonContainerStyle, null,
+        React.createElement(S.ChatMessageBalloonRowStyle, { direction: direction },
+            React.createElement(S.ChatMessageBalloonStyle, { direction: direction },
+                React.createElement(Typography, { variant: "subtitle2", style: {
+                        fontSize: "1rem",
+                        fontWeight: "600",
+                        marginBottom: '5px'
+                    } }, label),
+                description),
+            React.createElement(S.ChatMessageChildrenStyle, { direction: direction }, children)),
+        React.createElement(S.ChatMessageBalloonRowStyle, { direction: direction },
+            React.createElement(S.ChatMessageDateStyle, { fontSize: "0.7rem" }, date))));
+};
+//# sourceMappingURL=ChatMessageBalloon.js.map

package/dist/esm/components/ChatMessageBalloon/ChatMessageBalloon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessageBalloon.js","sourceRoot":"","sources":["../../../../src/components/ChatMessageBalloon/ChatMessageBalloon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,KAAK,CAAC,MAAM,4BAA4B,CAAA;AAG/C,MAAM,CAAC,IAAM,kBAAkB,GAAsC,UAAC,EAAiD;QAA/C,KAAK,WAAA,EAAE,WAAW,iBAAA,EAAE,IAAI,UAAA,EAAE,SAAS,eAAA,EAAE,QAAQ,cAAA;IACnH,OAAO,CACL,oBAAC,CAAC,CAAC,gCAAgC;QACjC,oBAAC,CAAC,CAAC,0BAA0B,IAAC,SAAS,EAAE,SAAS;YAChD,oBAAC,CAAC,CAAC,uBAAuB,IAAC,SAAS,EAAE,SAAS;gBAC7C,oBAAC,UAAU,IACT,OAAO,EAAC,WAAW,EACnB,KAAK,EAAE;wBACL,QAAQ,EAAE,MAAM;wBAChB,UAAU,EAAE,KAAK;wBACjB,YAAY,EAAE,KAAK;qBACpB,IAEA,KAAK,CACK;gBACZ,WAAW,CACc;YAC5B,oBAAC,CAAC,CAAC,wBAAwB,IAAC,SAAS,EAAE,SAAS,IAC7C,QAAQ,CACkB,CACA;QAC/B,oBAAC,CAAC,CAAC,0BAA0B,IAAC,SAAS,EAAE,SAAS;YAChD,oBAAC,CAAC,CAAC,oBAAoB,IAAC,QAAQ,EAAE,QAAQ,IAAG,IAAI,CAA0B,CAC9C,CACI,CACtC,CAAC;AACJ,CAAC,CAAC"}

package/dist/esm/components/ChatMessageBalloon/ChatMessageBalloon.style.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export declare const ChatMessageBalloonContainerStyle: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const ChatMessageBalloonRowStyle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    direction: string;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ChatMessageBalloonStyle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    direction: string;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ChatMessageDateStyle: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "p" | "style" | "className" | "classes" | "children" | "sx" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const ChatMessageChildrenStyle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    direction: string;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/components/ChatMessageBalloon/ChatMessageBalloon.style.js

@@ -0,0 +1,13 @@
+import { __makeTemplateObject } from "tslib";
+import { Box, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+export var ChatMessageBalloonContainerStyle = styled(Box)({
+    display: 'flex',
+    flexDirection: "column",
+});
+export var ChatMessageBalloonRowStyle = styled('div')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  margin-bottom: 8px;\n  flex-direction: ", ";\n\n  &:last-child {\n    margin-bottom: 0px;\n  }\n"], ["\n  display: flex;\n  margin-bottom: 8px;\n  flex-direction: ", ";\n\n  &:last-child {\n    margin-bottom: 0px;\n  }\n"])), function (props) { return (props.direction === "I") ? "row-reverse" : "row"; });
+export var ChatMessageBalloonStyle = styled('div')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  display: flex;\n  flex-direction: column;\n  padding: 12px 24px;\n  width: 60%;\n"], ["\n  background-color: ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  display: flex;\n  flex-direction: column;\n  padding: 12px 24px;\n  width: 60%;\n"])), function (props) { return (props.direction === "I") ? "#FFF" : "#E18B50"; }, function (props) { return (props.direction === "I") ? "20px 20px 0px 20px" : "20px 20px 20px 0px"; }, function (props) { return (props.direction === "I") ? "#4D4F5B" : "#FFF"; });
+export var ChatMessageDateStyle = styled(Typography)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: #43425D;\n  opacity: .5;\n"], ["\n  color: #43425D;\n  opacity: .5;\n"])));
+export var ChatMessageChildrenStyle = styled('div')(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  flex: 1;\n  justify-content: ", ";\n  padding: 8px;\n"], ["\n  align-items: center;\n  box-sizing: border-box;\n  display: flex;\n  flex: 1;\n  justify-content: ", ";\n  padding: 8px;\n"])), function (props) { return (props.direction === "I") ? "end" : "start"; });
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+//# sourceMappingURL=ChatMessageBalloon.style.js.map

package/dist/esm/components/ChatMessageBalloon/ChatMessageBalloon.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessageBalloon.style.js","sourceRoot":"","sources":["../../../../src/components/ChatMessageBalloon/ChatMessageBalloon.style.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,MAAM,CAAC,IAAM,gCAAgC,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IAC1D,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;CACxB,CAAC,CAAC;AAEH,MAAM,CAAC,IAAM,0BAA0B,GAAG,MAAM,CAAC,KAAK,CAAC,2LAAuB,+DAG1D,EAA4D,uDAK/E,KALmB,UAAC,KAAK,IAAK,OAAA,CAAC,KAAK,CAAC,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,KAAK,EAAjD,CAAiD,CAK/E,CAAA;AAED,MAAM,CAAC,IAAM,uBAAuB,GAAG,MAAM,CAAC,KAAK,CAAC,wPAAuB,wBACrD,EAAyD,sBAC5D,EAAkF,yCAE1F,EAAyD,wFAKnE,KARqB,UAAC,KAAK,IAAK,OAAA,CAAC,KAAK,CAAC,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAA9C,CAA8C,EAC5D,UAAC,KAAK,IAAK,OAAA,CAAC,KAAK,CAAC,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,oBAAoB,EAAvE,CAAuE,EAE1F,UAAC,KAAK,IAAK,OAAA,CAAC,KAAK,CAAC,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,EAA9C,CAA8C,CAKnE,CAAA;AAED,MAAM,CAAC,IAAM,oBAAoB,GAAG,MAAM,CAAC,UAAU,CAAC,0GAAA,uCAGrD,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,wBAAwB,GAAG,MAAM,CAAC,KAAK,CAAC,mMAAuB,wGAKvD,EAAsD,sBAE1E,KAFoB,UAAC,KAAK,IAAK,OAAA,CAAC,KAAK,CAAC,SAAS,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,EAA3C,CAA2C,CAE1E,CAAC"}

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

@@ -4,6 +4,7 @@ export * from './Badge';
 export * from './Button';
 export * from './Card';
 export * from './ChatMessage';
+export * from './ChatMessageBalloon/ChatMessageBalloon';
 export * from './CheckBox';
 export * from './DataGrid';
 export * from './DatePicker';

package/dist/esm/components/index.js

@@ -4,6 +4,7 @@ export * from './Badge';
 export * from './Button';
 export * from './Card';
 export * from './ChatMessage';
+export * from './ChatMessageBalloon/ChatMessageBalloon';
 export * from './CheckBox';
 export * from './DataGrid';
 export * from './DatePicker';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/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,yCAAyC,CAAC;AACxD,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/interfaces/ChatMessageBalloon.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+export interface ChatMessageBalloonProps {
+    label: string;
+    description: ReactNode;
+    date: string;
+    direction: "I" | "O";
+    attachments?: string[];
+    children?: ReactNode;
+}

package/dist/esm/interfaces/ChatMessageBalloon.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ChatMessageBalloon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMessageBalloon.js","sourceRoot":"","sources":["../../../src/interfaces/ChatMessageBalloon.ts"],"names":[],"mappings":""}

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

@@ -21,3 +21,4 @@ export * from './Tag';
 export * from './TextField';
 export * from './TimeLine';
 export * from './TimePicker';
+export * from './ChatMessageBalloon';

package/dist/esm/interfaces/index.js

@@ -21,4 +21,5 @@ export * from './Tag';
 export * from './TextField';
 export * from './TimeLine';
 export * from './TimePicker';
+export * from './ChatMessageBalloon';
 //# sourceMappingURL=index.js.map

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,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"}
+{"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;AAC7B,cAAc,sBAAsB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "norma-library",
-  "version": "0.5.66",
+  "version": "0.5.67",
   "private": false,
   "description": "Olos/Norma-DS. Design System based on Material UI, developed with TypeScript and Styled Components to create reusable and consistent components in web applications.",
   "scripts": {
@@ -98,6 +98,7 @@
     "@mui/icons-material": "^5.14.9",
     "@mui/material": "^5.14.8",
     "@mui/x-date-pickers": "^6.14.0",
+    "@storybook/addon-mdx-gfm": "^7.5.2",
     "dayjs": "^1.11.9",
     "react-i18next": "^13.2.2",
     "react-scripts": "^5.0.1",

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

@@ -0,0 +1,42 @@
+import { Box, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+
+export const ChatMessageBalloonContainerStyle = styled(Box)({
+  display: 'flex',
+  flexDirection: "column",
+});
+
+export const ChatMessageBalloonRowStyle = 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 = styled('div')<{ direction: string }>`
+  background-color: ${(props) => (props.direction === "I") ? "#FFF" : "#E18B50"};
+  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%;
+`
+
+export const ChatMessageDateStyle = styled(Typography)`
+  color: #43425D;
+  opacity: .5;
+`
+
+export const ChatMessageChildrenStyle = 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

@@ -0,0 +1,33 @@
+import React 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 }) => {
+  return (
+    <S.ChatMessageBalloonContainerStyle>
+      <S.ChatMessageBalloonRowStyle direction={direction}>
+        <S.ChatMessageBalloonStyle direction={direction}>
+          <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>
+  );
+};

package/src/components/index.ts

@@ -4,6 +4,7 @@ export * from './Badge';
 export * from './Button';
 export * from './Card';
 export * from './ChatMessage';
+export * from './ChatMessageBalloon/ChatMessageBalloon';
 export * from './CheckBox';
 export * from './DataGrid';
 export * from './DatePicker';

package/src/interfaces/ChatMessageBalloon.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+
+export interface ChatMessageBalloonProps {
+  label: string;
+  description: ReactNode;
+  date: string;
+  direction: "I" | "O";
+  attachments?: string[];
+  children?:ReactNode;
+}

package/src/interfaces/index.ts

@@ -21,3 +21,4 @@ export * from './Tag';
 export * from './TextField';
 export * from './TimeLine';
 export * from './TimePicker';
+export * from './ChatMessageBalloon';

package/src/stories/ChatMessageBalloon.stories.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+
+import type { Meta } from '@storybook/react';
+import { ChatMessageBalloon } from '../components';
+import { Typography } from '@mui/material';
+
+const meta = {
+  title: 'Display/ChatMessageBalloon',
+  component: ChatMessageBalloon,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+} ;
+
+export default meta;
+
+
+export const ChatMessageBalloonBasic = () => {
+  return (
+    <div style={{backgroundColor: "#F0F0F0", boxSizing: "border-box", padding: "20px"}}>
+      <ChatMessageBalloon 
+        label="Agente Marcos" 
+        description={
+          <Typography
+            variant="body1"
+            style={{
+              fontSize: "16px"
+            }}
+          >
+            {"Olá, tudo bem? Meu nome é Ana e falo em nome do banco Bradesco. Eu gostaria de falar com Maria Conceição da Silva"}
+          </Typography>
+        }
+        date={"10:23"} 
+        direction="I"
+        attachments={[]}
+      >
+        <span style={{ 
+          height: "38px", 
+          width: "38px", 
+          border: "1px solid #FF8348", 
+          borderRadius: "38px", 
+          backgroundColor: "#FFF",
+          display: "flex", 
+          alignItems: "center",
+          justifyContent: "center",
+          marginRight: "10px"
+        }}>{"1"}</span>
+        <span style={{ 
+          height: "38px", 
+          width: "38px", 
+          border: "1px solid #FF8348", 
+          borderRadius: "38px", 
+          backgroundColor: "#FFF",
+          display: "flex", 
+          alignItems: "center",
+          justifyContent: "center"
+        }}>{"2"}</span>
+      </ChatMessageBalloon>
+    </div>
+  );
+};