norma-library 0.6.81 → 0.6.84

package/src/components/NormaChatMessageBalloon/components/MessageItem.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { NormaChatMessageBalloonProps } from "../../../interfaces";
+import Content from "./Content";
+import Row from "./Row";
+import Date from "./Date";
+import { useChatMessageBalloon } from "../hook";
+import { Avatar, Typography } from "@mui/material";
+import Root from "./Root";
+
+export default function MessageItem({ avatar, label, description, date, direction, onMouseEnter, highlight, children }: NormaChatMessageBalloonProps) {
+    const { balloonClassNames } = useChatMessageBalloon(onMouseEnter, highlight);
+    return (
+        <Root onMouseEnter={() => console.log('hover')} onMouseLeave={() => console.log('leave')}>
+            <Row direction={direction} onMouseEnter={() => console.log('row hover')} onMouseLeave={() => console.log('row leave')}>
+                <Content
+                    label={label}
+                    description={description}
+                    direction={direction}
+                    className={balloonClassNames}
+                />
+            </Row>
+            <Row direction={direction}>
+            {avatar && (
+            <Avatar
+                  sx={{
+                    width: '30px',
+                    height: '30px',
+                    marginX: '10px',
+                    position: 'relative',
+                  }}
+                  src={avatar?.src}
+                  alt={avatar?.alt}
+                >
+                  <Typography
+                    sx={{
+                      position: 'absolute',
+                      top: '50%',
+                      left: '50%',
+                      transform: 'translate(-50%, -50%)',
+                    }}
+                  >
+                    {avatar?.alt}
+                  </Typography>
+                </Avatar>
+            )}
+                <Date date={date} />
+            </Row>
+            {/* Children located here */}
+            <Row direction={direction}>
+                {children}
+            </Row>
+
+        </Root>
+    );
+}

package/src/components/NormaChatMessageBalloon/components/Root.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { ChatMessageBalloonContainerStyle } from "../styles";
+import { NormaChatMessageBalloonProps } from "../../../interfaces";
+
+export default function Root({children, className, ...rest}: NormaChatMessageBalloonProps) {
+    return (
+        <ChatMessageBalloonContainerStyle className={className} {...rest}>
+                {children}
+        </ChatMessageBalloonContainerStyle>
+    )
+}

package/src/components/NormaChatMessageBalloon/components/Row.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { ChatMessageBalloonRowStyle } from "../styles";
+import { NormaChatMessageBalloonProps } from "../../../interfaces";
+
+export default function Row({children, direction, onRowMouseEnter, onRowMouseLeave }: NormaChatMessageBalloonProps) {
+  return (
+    <ChatMessageBalloonRowStyle direction={direction} onMouseLeave={onRowMouseLeave} onMouseEnter={onRowMouseEnter}>
+        {children}
+    </ChatMessageBalloonRowStyle>
+  );
+}

package/src/components/NormaChatMessageBalloon/hook.tsx

@@ -0,0 +1,12 @@
+import React, { useMemo } from "react"
+
+export const useChatMessageBalloon = (onMouseEnter: React.MouseEventHandler<HTMLDivElement> | undefined, highlight: boolean | undefined) => {
+    const balloonClassNames = useMemo(() => {
+        const classNames = []
+        if(!!onMouseEnter) classNames.push('is-interactive')
+        if(!!highlight) classNames.push('is-highlight')
+        return classNames.join(" ")
+      }, [highlight, onMouseEnter])
+
+      return {balloonClassNames}
+}

package/src/components/NormaChatMessageBalloon/index.tsx

@@ -0,0 +1,13 @@
+import Content from "./components/Content";
+import Date from "./components/Date";
+import MessageItem from "./components/MessageItem";
+import Root from "./components/Root";
+import Row from "./components/Row";
+
+export const NormaChatMessageBalloon = {
+    Root: Root,
+    Row: Row,
+    Content: Content,
+    MessageItem: MessageItem,
+    Date: Date,
+}

package/src/components/NormaChatMessageBalloon/styles.ts

@@ -0,0 +1,59 @@
+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')};
+  justify-content: flex-start;
+  align-items: flex-start;
+  vertical-align: middle;
+  &: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;
+  margin-top: 7px;
+`;
+
+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/ProductCard/ProductCard.tsx

@@ -12,13 +12,15 @@ export const ProductCard: React.FC<ProductCardProps> = ({
   // product = 'analytics'
   color,
   iconColor,
+  iconSize,
   onClick,
   hasBorder = true,
   disabled = false,
   title,
   description,
   iconName,
-  flaggable = false
+  flaggable = false,
+  flagged = false 
 }) => {
 
   /* const colors: { [key: string]: string } = {
@@ -44,6 +46,7 @@ export const ProductCard: React.FC<ProductCardProps> = ({
                  event.preventDefault()
                  event.stopPropagation()
                }}
+               color={flagged ? 'primary' : 'inherit'}
                cursor="pointer"
              >
                <GradeIcon />
@@ -57,7 +60,7 @@ export const ProductCard: React.FC<ProductCardProps> = ({
             $iColor={iconColor}
             $bColor={color}
           >
-            <IconifyIcon iconName={iconName} color={iconColor} size="100%" />
+            <IconifyIcon iconName={iconName} color={iconColor} size={iconSize || '2em'} />
           </IconCardStyle>
           <p>{title}</p>
         </TitleContainer>

package/src/components/RadioGroup.tsx

@@ -34,7 +34,7 @@ export const RadioGroup = ({ ...props }: RadioBaseProps) => {
               control={<RadioStyled color={props.color} size={item.size ? item.size : sizes[1]} />}
               label={item.label}
               key={key}
-              sx={{alignItems: "start"}}
+              sx={{alignItems: "center"}}
             />
           ))}
       </MuiRadioGroup>

package/src/components/ServiceCard/ServiceCard.tsx

@@ -4,7 +4,7 @@ import { IconCardStyle, ServiceCardStyle, TitleContainer } from "./ServiceCard.s
 import { Card } from "../Card";
 import { IconifyIcon } from "../IconifyIcon";
 
-export const ServiceCard: React.FC<ServiceCardProps> = ({iconName, onClick, disabled = false, color, iconColor, description, title }) => {
+export const ServiceCard: React.FC<ServiceCardProps> = ({iconName, onClick, disabled = false, color, iconColor, iconSize, description, title }) => {
     return (
         <ServiceCardStyle disabled={disabled} $bColor={iconColor}>
             <Card
@@ -17,7 +17,7 @@ export const ServiceCard: React.FC<ServiceCardProps> = ({iconName, onClick, disa
             >
                 <TitleContainer>
                     <IconCardStyle $iColor={iconColor || ""} $bColor={color || ""}>
-                        <IconifyIcon iconName={iconName || ""} color={iconColor} size="100%"/>
+                        <IconifyIcon iconName={iconName || ""} color={iconColor} size={iconSize || "100%"}/>
                     </IconCardStyle>
                     <div className="text">
                         <p className="title">{title}</p>

package/src/components/index.ts

@@ -11,6 +11,7 @@ export * from './DropDown';
 export * from './IconButton';
 export * from './Icons';
 export * from './Modal';
+export * from './NormaChatMessageBalloon';
 export * from './Paper';
 export * from './ProductCard/ProductCard';
 export * from './ProgressBar';

package/src/index.ts

@@ -14,7 +14,7 @@ import { Tabs } from './components/Tabs';
 import { Tag } from './components/Tag';
 import { TextField } from './components/TextField';
 import { DatePicker } from './components/DatePicker';
-import { ChatMessage, ChatMessageBalloon, ProductCard, ServiceCard } from './components';
+import { ChatMessage, ChatMessageBalloon, NormaChatMessageBalloon, ProductCard, ServiceCard } from './components';
 import { NormaProvider } from './providers/NormaProvider';
 import { themes, getPalette } from './helpers';
 import DateInput from './components/DateInput';
@@ -62,6 +62,7 @@ export {
   SelectInput,
   ServiceCard,
   MultiSelectInput,
+  NormaChatMessageBalloon,
   Text,
   Title,
   TextInput,

package/src/interfaces/Modal.ts

@@ -11,6 +11,7 @@ export interface ModalBaseProps extends MuiModalBaseProps {
   actionSpaceBetween?: boolean;
   className?: string;
   title?: string;
+  description?: string;
   id?: string;
   paperProps?: MuiPaperBaseProps;
   width?: string;

package/src/interfaces/NormaChatMessageBalloon.ts

@@ -0,0 +1,21 @@
+import { ReactNode, MouseEventHandler } from "react";
+
+export interface NormaChatMessageBalloonProps {
+  avatar?: {
+    src: string;
+    alt: string;
+  }
+  label?: string;
+  description?: ReactNode;
+  date?: string;
+  direction?: "I" | "O";
+  onMouseEnter?: MouseEventHandler<HTMLDivElement>;
+  onMouseLeave?: MouseEventHandler<HTMLDivElement>;
+  onRowMouseEnter?: MouseEventHandler<HTMLDivElement>;
+  onRowMouseLeave?: MouseEventHandler<HTMLDivElement>;
+  highlight?: boolean;
+  attachments?: string[];
+  children?: ReactNode;
+  bottomChildren?: ReactNode;
+  className?: string;
+}

package/src/interfaces/ProductCard.ts

@@ -6,11 +6,13 @@ export interface ProductCardProps {
     disabled?: boolean
     color: string
     iconColor: string
+    iconSize: string
     iconName: string
     title: string
     description: string
     hasBorder?: boolean
     flaggable?: boolean
+    flagged?: boolean
   }
   
   

package/src/interfaces/ServiceCard.ts

@@ -8,4 +8,5 @@ export interface ServiceCardProps {
     iconColor?: string;
     iconName?: string;
     borderColor?: string;
+    iconSize?: string;
   }

package/src/interfaces/index.ts

@@ -10,6 +10,7 @@ export * from './DropDown';
 export * from './IconButton';
 export * from './Icons';
 export * from './Modal';
+export * from './NormaChatMessageBalloon';
 export * from './Paper';
 export * from './ProgressBar';
 export * from './RadioGroup';

package/src/stories/Modal.stories.tsx

@@ -67,6 +67,7 @@ export const ModalTitle = () => {
           aria-labelledby="modal-modal-title"
           aria-describedby="modal-modal-description"
           title="Title Modal"
+          description='Description Modal'
         >
           <>
             <Typography id="modal-modal-title" variant="h6" component="h2">

package/src/stories/NormaChatMessageBalloon.stories.tsx

@@ -0,0 +1,229 @@
+import React from 'react';
+import type { Meta } from '@storybook/react';
+import { IconButton, NormaChatMessageBalloon } from '../components';
+import { useChatMessageBalloon } from '../components/NormaChatMessageBalloon/hook';
+import { Avatar, Box, Typography } from '@mui/material';
+import { IconifyIcon } from '../components/IconifyIcon';
+
+const messageArr = [
+  {
+    direction: 'O' as 'O',
+    label: "Teste de Título",
+    description: "lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus feugiat, molestie ipsum et, varius velit. Nulla nec purus feugiat, molestie ipsum et, varius velit.",
+    date: "06/02/2025",
+  },
+  {
+    direction: 'I' as 'I',
+    label: "Teste de Título",
+    description: "lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus feugiat, molestie ipsum et, varius velit. Nulla nec purus feugiat, molestie ipsum et, varius velit.",
+    date: "06/02/2025",
+  },
+  {
+    direction: 'O' as 'O',
+    label: "Teste de Título",
+    description: "lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus feugiat, molestie ipsum et, varius velit. Nulla nec purus feugiat, molestie ipsum et, varius velit.",
+    date: "07/02/2025",
+  }
+];
+
+const avatars = {
+  O: {
+    src: '',
+    alt: 'HC'
+  },
+  I: {
+    src: 'https://letsenhance.io/static/73136da51c245e80edc6ccfe44888a99/1015f/MainBefore.jpg',
+    alt: 'MB'
+  },
+}
+
+const Template = () => {
+  return (
+    <>
+      {messageArr.map((message, index) => {
+        const { balloonClassNames } = useChatMessageBalloon(() => console.log('hover'), false);
+        return (
+          <Box key={index} sx={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            backgroundColor: '#F5F5F5',
+            padding: '20px',
+          }}>
+            <NormaChatMessageBalloon.Root onMouseEnter={() => console.log('hover')} onMouseLeave={() => console.log('leave')}>
+              <NormaChatMessageBalloon.Row direction={message.direction} onMouseEnter={() => console.log('row hover')} onMouseLeave={() => console.log('row leave')}>
+                <NormaChatMessageBalloon.Content
+                  label={message.label}
+                  description={message.description}
+                  direction={message.direction}
+                  className={balloonClassNames}
+                />
+              </NormaChatMessageBalloon.Row>
+              <NormaChatMessageBalloon.Row direction={message.direction}>
+                <NormaChatMessageBalloon.Date date={message.date} />
+              </NormaChatMessageBalloon.Row>
+            </NormaChatMessageBalloon.Root>
+          </Box>
+        );
+      })}
+    </>
+  );
+};
+
+const TemplateWithAvatar = () => {
+  return (
+    <>
+      {messageArr.map((message, index) => {
+        const { balloonClassNames } = useChatMessageBalloon(() => console.log('hover'), false);
+        return (
+          <Box key={index} sx={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            backgroundColor: '#F5F5F5',
+            padding: '20px',
+          }}>
+            <NormaChatMessageBalloon.Root onMouseEnter={() => console.log('hover')} onMouseLeave={() => console.log('leave')}>
+              <NormaChatMessageBalloon.Row direction={message.direction} onMouseEnter={() => console.log('row hover')} onMouseLeave={() => console.log('row leave')}>
+                <NormaChatMessageBalloon.Content
+                  label={message.label}
+                  description={message.description}
+                  direction={message.direction}
+                  className={balloonClassNames}
+
+                />
+              </NormaChatMessageBalloon.Row>
+              <NormaChatMessageBalloon.Row direction={message.direction}>
+                <Avatar
+                  sx={{
+                    width: '30px',
+                    height: '30px',
+                    marginX: '10px',
+                    position: 'relative',
+                  }}
+                  src={avatars[message.direction].src}
+                  alt={avatars[message.direction].alt}
+                >
+                  <Typography
+                    sx={{
+                      position: 'absolute',
+                      top: '50%',
+                      left: '50%',
+                      transform: 'translate(-50%, -50%)',
+                    }}
+                  >
+                    {avatars[message.direction].alt}
+                  </Typography>
+                </Avatar>
+                <NormaChatMessageBalloon.Date date={message.date} />
+              </NormaChatMessageBalloon.Row>
+            </NormaChatMessageBalloon.Root>
+          </Box>
+        );
+      })}
+    </>
+  );
+};
+
+const TemplateWithChildren = () => {
+  return (
+    <>
+      {messageArr.map((message, index) => {
+        const { balloonClassNames } = useChatMessageBalloon(() => console.log('hover'), false);
+        return (
+          <Box key={index} sx={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            backgroundColor: '#F5F5F5',
+            padding: '20px',
+          }}>
+            <NormaChatMessageBalloon.Root onMouseEnter={() => console.log('hover')} onMouseLeave={() => console.log('leave')}>
+              <NormaChatMessageBalloon.Row direction={message.direction} onMouseEnter={() => console.log('row hover')} onMouseLeave={() => console.log('row leave')}>
+                <NormaChatMessageBalloon.Content
+                  label={message.label}
+                  description={message.description}
+                  direction={message.direction}
+                  className={balloonClassNames}
+                />
+              </NormaChatMessageBalloon.Row>
+              <NormaChatMessageBalloon.Row direction={message.direction}>
+                <NormaChatMessageBalloon.Date date={message.date} />
+              </NormaChatMessageBalloon.Row>
+              {/* Children located here */}
+              <NormaChatMessageBalloon.Row direction={message.direction}>
+                <IconButton>
+                  <IconifyIcon iconName="bx:bx-smile" size='2rem' color='#E18B50' />
+                </IconButton>
+                <IconButton>
+                  <IconifyIcon iconName="uil:atom" size='2rem' color='#E18B50' />
+                </IconButton>
+                <p>...children</p>
+              </NormaChatMessageBalloon.Row>
+
+            </NormaChatMessageBalloon.Root>
+          </Box>
+        );
+      })}
+    </>
+  );
+};
+
+const SimplifiedTemplate = () => {
+  return (
+    <>
+      {messageArr.map((message, index) => {
+        const { balloonClassNames } = useChatMessageBalloon(() => console.log('hover'), false);
+        return (
+          <Box key={index} sx={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            backgroundColor: '#F5F5F5',
+            padding: '20px',
+          }}>
+            <NormaChatMessageBalloon.Root onMouseEnter={() => console.log('hover')} onMouseLeave={() => console.log('leave')}>
+              <NormaChatMessageBalloon.MessageItem
+                direction={message.direction}
+                label={message.label}
+                description={message.description}
+                onMouseEnter={() => console.log('row hover')}
+                onMouseLeave={() => console.log('row leave')}
+                className={balloonClassNames}
+                avatar={avatars[message.direction]}
+                children={
+                  <>
+                    <IconButton>
+                      <IconifyIcon iconName="bx:bx-smile" size='2rem' color='#E18B50' />
+                    </IconButton>
+                    <IconButton>
+                      <IconifyIcon iconName="uil:atom" size='2rem' color='#E18B50' />
+                    </IconButton>
+                    <p>...children</p>
+                  </>
+                }
+              />
+            </NormaChatMessageBalloon.Root>
+          </Box>
+        );
+      })}
+    </>
+  );
+};
+
+const meta = {
+  title: 'Norma/ChatMessageBalloon',
+  component: Template,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof Template>;
+
+export default meta;
+
+export const Default = Template.bind({});
+export const WithAvatar = TemplateWithAvatar.bind({});
+export const WithChildren = TemplateWithChildren.bind({});
+export const Simplified = SimplifiedTemplate.bind({});

package/src/stories/Icons.stories.mdx

@@ -1,27 +0,0 @@
-import { Meta, ColorPalette, ColorItem } from "@storybook/blocks";
-import { Box, Card, Grid, Typography, Paper } from "@mui/material";
-import { palette } from "../helpers";
-import { iconsSVG } from "../components/Svgs";
-import { Icons } from "../components/Icons";
-
-<Meta title="Display/Icons" />
-
-<Grid container spacing={2}>
-  <Grid item xs={12}>
-    <Typography variant="h5">Norma DS Icons</Typography>
-  </Grid>
-  {Object.keys(iconsSVG).map((key) => (
-    <Grid item xs={3} key={key}>
-      <Paper sx={{ padding: 2 }}>
-        <Typography variant={"body1"}> {key} </Typography>
-        <Icons icon={key} scale="xsmall" />
-        <Icons icon={key} scale="small" color="secondary" />
-        <Icons icon={key} scale="medium" color="error" />
-        <Icons icon={key} scale="large" color="warning" />
-        <Icons icon={key} scale="xlarge" color="success" />
-        <Icons icon={key} scale="2xlarge" color="black" />
-        <Icons icon={key} scale="3xlarge" color="primary" />
-      </Paper>
-    </Grid>
-  ))}
-</Grid>