norma-library 0.5.79 → 0.5.121

package/src/stories/ChatMessage.stories.tsx

@@ -1,84 +1,84 @@
-import React from 'react';
-
-import type { Meta } from '@storybook/react';
-import { ChatMessage, Icons, Avatar } from '../components';
-
-const meta = {
-  title: 'Display/ChatMessage',
-  component: ChatMessage,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {},
-} satisfies Meta<typeof ChatMessage>;
-
-export default meta;
-
-const chat = [
-  {
-    send: 'me',
-    name: 'Alice',
-    message: 'Olá, tudo bem? Meu nome é Alice e falo em nome do banco Bradesco. Eu gostaria de falar com Bob',
-    time: '09:50',
-    emotion: (
-      <Avatar
-        sx={{
-          backgroundColor: '#FFF',
-          border: '1px solid  rgb(255, 195, 0)',
-          m: '5px',
-        }}
-      >
-        <Icons icon="faceNeutral" scale="large" color="warning" />
-      </Avatar>
-    ),
-    emotionReplay: (
-      <Avatar
-        sx={{
-          backgroundColor: '#FFF',
-          border: '1px solid  rgb(219, 102, 25)',
-          m: '5px',
-        }}
-      >
-        <Icons icon="faceHappy" scale="large" color="primary" />
-      </Avatar>
-    ),
-  },
-  {
-    send: 'replay',
-    name: 'Bob',
-    message: 'Oi, estou bem, obrigado! E você?',
-    time: '10:05',
-  },
-  {
-    send: 'me',
-    name: 'Alice',
-    message: 'Estou ótima, obrigada por perguntar!',
-    time: '10:10',
-  },
-  {
-    send: 'replay',
-    name: 'Bob',
-    message: 'Que bom ouvir isso!',
-    time: '10:15',
-    emotion: (
-      <Avatar
-        sx={{
-          backgroundColor: '#FFF',
-          border: '1px solid  rgb(219, 102, 25)',
-          m: '5px',
-        }}
-      >
-        <Icons icon="faceHappy" scale="large" color="primary" />
-      </Avatar>
-    ),
-  },
-];
-
-export const ChatMessageBasic = () => {
-  return (
-    <>
-      <ChatMessage data={chat} />
-    </>
-  );
-};
+import React from 'react';
+
+import type { Meta } from '@storybook/react';
+import { ChatMessage, Icons, Avatar } from '../components';
+
+const meta = {
+  title: 'Display/ChatMessage',
+  component: ChatMessage,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof ChatMessage>;
+
+export default meta;
+
+const chat = [
+  {
+    send: 'me',
+    name: 'Alice',
+    message: 'Olá, tudo bem? Meu nome é Alice e falo em nome do banco Bradesco. Eu gostaria de falar com Bob',
+    time: '09:50',
+    emotion: (
+      <Avatar
+        sx={{
+          backgroundColor: '#FFF',
+          border: '1px solid  rgb(255, 195, 0)',
+          m: '5px',
+        }}
+      >
+        <Icons icon="faceNeutral" scale="large" color="warning" />
+      </Avatar>
+    ),
+    emotionReplay: (
+      <Avatar
+        sx={{
+          backgroundColor: '#FFF',
+          border: '1px solid  rgb(219, 102, 25)',
+          m: '5px',
+        }}
+      >
+        <Icons icon="faceHappy" scale="large" color="primary" />
+      </Avatar>
+    ),
+  },
+  {
+    send: 'replay',
+    name: 'Bob',
+    message: 'Oi, estou bem, obrigado! E você?',
+    time: '10:05',
+  },
+  {
+    send: 'me',
+    name: 'Alice',
+    message: 'Estou ótima, obrigada por perguntar!',
+    time: '10:10',
+  },
+  {
+    send: 'replay',
+    name: 'Bob',
+    message: 'Que bom ouvir isso!',
+    time: '10:15',
+    emotion: (
+      <Avatar
+        sx={{
+          backgroundColor: '#FFF',
+          border: '1px solid  rgb(219, 102, 25)',
+          m: '5px',
+        }}
+      >
+        <Icons icon="faceHappy" scale="large" color="primary" />
+      </Avatar>
+    ),
+  },
+];
+
+export const ChatMessageBasic = () => {
+  return (
+    <>
+      <ChatMessage data={chat} />
+    </>
+  );
+};

package/src/stories/ChatMessageBalloon.stories.tsx

@@ -1,64 +1,108 @@
-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 
-        onMouseEnter={ () => console.log('onMouseEnter') }
-        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>
-  );
-};
+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 
+        onMouseEnter={ () => console.log('onMouseEnter') }
+        bottomChildren={<div>Bottom Children</div>}
+        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>
+
+      <ChatMessageBalloon 
+        onMouseEnter={ () => console.log('onMouseEnter') }
+        bottomChildren={<div>Bottom children</div>}
+        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="O"
+        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>
+
+    
+  );
+};

package/src/stories/CheckBox.stories.tsx

@@ -1,88 +1,88 @@
-import React from 'react';
-import { CheckBox } from '../components/CheckBox';
-import type { Meta, StoryObj } from '@storybook/react';
-import { FormControlLabel } from '@mui/material';
-import { pink } from '@mui/material/colors';
-
-const meta = {
-  title: 'Form/CheckBox',
-  component: CheckBox,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {},
-} satisfies Meta<typeof CheckBox>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-const defaultArgs = {
-  disabled: false,
-};
-
-export const Playground: Story = {
-  args: {
-    color: 'primary',
-  },
-};
-
-const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
-
-export const CheckboxVariant = () => {
-  return (
-    <>
-      <CheckBox {...label} />
-      <CheckBox {...label} defaultChecked />
-      <CheckBox {...label} disabled />
-      <CheckBox {...label} disabled checked />
-    </>
-  );
-};
-CheckboxVariant.storyName = 'CheckBox Variants';
-
-export const CheckboxProps = () => {
-  return (
-    <>
-      <FormControlLabel control={<CheckBox />} label="Label Default" />
-      <FormControlLabel control={<CheckBox defaultChecked />} label="Label" />
-      <FormControlLabel required control={<CheckBox />} label="Required" />
-      <FormControlLabel disabled control={<CheckBox />} label="Disabled" />
-    </>
-  );
-};
-CheckboxProps.storyName = 'Variants and Label';
-
-export const CheckboxColors = () => {
-  return (
-    <>
-      <CheckBox {...label} defaultChecked />
-      <CheckBox {...label} defaultChecked color="secondary" />
-      <CheckBox {...label} defaultChecked color="success" />
-      <CheckBox {...label} defaultChecked color="default" />
-      <CheckBox
-        {...label}
-        defaultChecked
-        sx={{
-          color: pink[800],
-          '&.Mui-checked': {
-            color: pink[600],
-          },
-        }}
-      />
-    </>
-  );
-};
-CheckboxColors.storyName = 'CheckBox Colors';
-
-export const CheckboxSizes = () => {
-  return (
-    <>
-      <FormControlLabel control={<CheckBox size="small" />} label="CheckBox Small" />
-      <FormControlLabel control={<CheckBox />} label="CheckBox Default" />
-      <FormControlLabel control={<CheckBox size="medium" />} label="CheckBox Medium" />
-    </>
-  );
-};
-CheckboxSizes.storyName = 'CheckBox Sizes';
+import React from 'react';
+import { CheckBox } from '../components/CheckBox';
+import type { Meta, StoryObj } from '@storybook/react';
+import { FormControlLabel } from '@mui/material';
+import { pink } from '@mui/material/colors';
+
+const meta = {
+  title: 'Form/CheckBox',
+  component: CheckBox,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof CheckBox>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const defaultArgs = {
+  disabled: false,
+};
+
+export const Playground: Story = {
+  args: {
+    color: 'primary',
+  },
+};
+
+const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
+
+export const CheckboxVariant = () => {
+  return (
+    <>
+      <CheckBox {...label} />
+      <CheckBox {...label} defaultChecked />
+      <CheckBox {...label} disabled />
+      <CheckBox {...label} disabled checked />
+    </>
+  );
+};
+CheckboxVariant.storyName = 'CheckBox Variants';
+
+export const CheckboxProps = () => {
+  return (
+    <>
+      <FormControlLabel control={<CheckBox />} label="Label Default" />
+      <FormControlLabel control={<CheckBox defaultChecked />} label="Label" />
+      <FormControlLabel required control={<CheckBox />} label="Required" />
+      <FormControlLabel disabled control={<CheckBox />} label="Disabled" />
+    </>
+  );
+};
+CheckboxProps.storyName = 'Variants and Label';
+
+export const CheckboxColors = () => {
+  return (
+    <>
+      <CheckBox {...label} defaultChecked />
+      <CheckBox {...label} defaultChecked color="secondary" />
+      <CheckBox {...label} defaultChecked color="success" />
+      <CheckBox {...label} defaultChecked color="default" />
+      <CheckBox
+        {...label}
+        defaultChecked
+        sx={{
+          color: pink[800],
+          '&.Mui-checked': {
+            color: pink[600],
+          },
+        }}
+      />
+    </>
+  );
+};
+CheckboxColors.storyName = 'CheckBox Colors';
+
+export const CheckboxSizes = () => {
+  return (
+    <>
+      <FormControlLabel control={<CheckBox size="small" />} label="CheckBox Small" />
+      <FormControlLabel control={<CheckBox />} label="CheckBox Default" />
+      <FormControlLabel control={<CheckBox size="medium" />} label="CheckBox Medium" />
+    </>
+  );
+};
+CheckboxSizes.storyName = 'CheckBox Sizes';

package/src/stories/DateInput.stories.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import DateInput from '../components/DateInput';
+
+export default {
+  title: 'Form/DateInput',
+  component: DateInput,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: { 
+    dateFormat: {
+      description: "Adicione uma formato de data: 'dd/MM/yyyy' ou 'dd/MM/yyyy HH:mm'.",
+      options: ['dd/MM/yyyy', 'dd/MM/yyyy HH:mm']
+    },
+    className: {
+      description: 'Adicione uma classe.',
+    },
+    label: {
+      description: 'Adicione uma label.'
+    },
+    dateSelected: {
+      description: 'Adicione uma data inicial.'
+    },
+    onChange: {
+      description: 'Função para capturar o valor quando alterado.'
+    },
+    showTimeSelect: {
+      description: 'Adiciona horario na seleção da data.'
+    },
+    timeFormat: {
+      description: "Adicione uma formato ao horario na seleção da data."
+    },
+    disabled: {
+      description: 'Habilita ou desabilita.'
+    }
+  }
+
+}
+
+export const Default = (args) => <DateInput {...args} />
+
+Default.args = {
+  dateFormat: "dd/MM/yyyy HH:mm",
+  className: '',
+  label: 'Data:',
+  dateSelected: new Date(),
+  onChange: '',
+  showTimeSelect: false,
+  timeFormat: 'HH:mm',
+  disabled: false
+}

package/src/stories/DatePicker.stories.tsx

@@ -1,50 +1,50 @@
-import React from 'react';
-import { DatePicker } from '../components';
-import type { Meta } from '@storybook/react';
-
-const meta = {
-  title: 'Form/DatePicker',
-  component: DatePicker,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {},
-} satisfies Meta<typeof DatePicker>;
-
-export default meta;
-
-export const BasicDatePicker = () => <DatePicker sx={{ minWidth: 275 }} label="DatePicker" />;
-BasicDatePicker.storyName = 'DatePicker Basic';
-
-export const DatePickerVariants = () => (
-  <>
-    <div style={{ width: '480px', marginBottom: 30 }}>
-      <DatePicker sx={{ minWidth: 275 }} label="DatePicker Responsive" variant="responsive" />
-    </div>
-    <div style={{ width: '480px', marginBottom: 30 }}>
-      <DatePicker sx={{ minWidth: 275 }} label="DatePicker Mobile" variant="mobile" />
-    </div>
-    <div style={{ width: '480px', marginBottom: 30 }}>
-      <DatePicker sx={{ minWidth: 275 }} label="DatePicker Desktop" variant="desktop" />
-    </div>
-  </>
-);
-
-DatePickerVariants.storyName = 'DatePicker Variants';
-
-export const DatePickerLanguage = () => (
-  <>
-    <div style={{ width: '480px', marginBottom: 30 }}>
-      <DatePicker sx={{ minWidth: 275 }} label="DatePicker Brazil" language="pt-br" />
-    </div>
-    <div style={{ width: '480px', marginBottom: 30 }}>
-      <DatePicker sx={{ minWidth: 275 }} label="DatePicker English" language="en" format="YYYY-MM-DD" />
-    </div>
-    <div style={{ width: '480px', marginBottom: 30 }}>
-      <DatePicker sx={{ minWidth: 275 }} label="DatePicker Spain" language="es" />
-    </div>
-  </>
-);
-
-DatePickerLanguage.storyName = 'DatePicker Languages';
+import React from 'react';
+import { DatePicker } from '../components';
+import type { Meta } from '@storybook/react';
+
+const meta = {
+  title: 'Form/DatePicker',
+  component: DatePicker,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof DatePicker>;
+
+export default meta;
+
+export const BasicDatePicker = () => <DatePicker sx={{ minWidth: 275 }} label="DatePicker" />;
+BasicDatePicker.storyName = 'DatePicker Basic';
+
+export const DatePickerVariants = () => (
+  <>
+    <div style={{ width: '480px', marginBottom: 30 }}>
+      <DatePicker sx={{ minWidth: 275 }} label="DatePicker Responsive" variant="responsive" />
+    </div>
+    <div style={{ width: '480px', marginBottom: 30 }}>
+      <DatePicker sx={{ minWidth: 275 }} label="DatePicker Mobile" variant="mobile" />
+    </div>
+    <div style={{ width: '480px', marginBottom: 30 }}>
+      <DatePicker sx={{ minWidth: 275 }} label="DatePicker Desktop" variant="desktop" />
+    </div>
+  </>
+);
+
+DatePickerVariants.storyName = 'DatePicker Variants';
+
+export const DatePickerLanguage = () => (
+  <>
+    <div style={{ width: '480px', marginBottom: 30 }}>
+      <DatePicker sx={{ minWidth: 275 }} label="DatePicker Brazil" language="pt-br" />
+    </div>
+    <div style={{ width: '480px', marginBottom: 30 }}>
+      <DatePicker sx={{ minWidth: 275 }} label="DatePicker English" language="en" format="YYYY-MM-DD" />
+    </div>
+    <div style={{ width: '480px', marginBottom: 30 }}>
+      <DatePicker sx={{ minWidth: 275 }} label="DatePicker Spain" language="es" />
+    </div>
+  </>
+);
+
+DatePickerLanguage.storyName = 'DatePicker Languages';