norma-library 0.6.3 → 0.6.5

package/src/stories/Card.stories.tsx

@@ -1,40 +1,40 @@
-import React from 'react';
-import { Card } from '../components/Card';
-import type { Meta, StoryObj } from '@storybook/react';
-import { ColorVariant } from '../types';
-
-const colors: ColorVariant[] = ['inherit', 'primary', 'secondary', 'success', 'error', 'info', 'warning'];
-
-const meta = {
-  title: 'Layout/Card',
-  component: Card,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {},
-} satisfies Meta<typeof Card>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-const defaultArgs = {};
-
-export const BasicCard = () => <Card sx={{ minWidth: 275 }}>Content children card</Card>;
-
-export const BasicBordered = () => (
-  <Card sx={{ minWidth: 275 }} border={true} color="primary">
-    Card with border
-  </Card>
-);
-
-export const BasicBorderedColors = () => (
-  <>
-    {colors.map((color, key) => (
-      <Card sx={{ minWidth: 275, marginBottom: 2 }} border={true} color={color} key={key}>
-        Card with border {color}
-      </Card>
-    ))}
-  </>
+import React from 'react';
+import { Card } from '../components/Card';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ColorVariant } from '../types';
+
+const colors: ColorVariant[] = ['inherit', 'primary', 'secondary', 'success', 'error', 'info', 'warning'];
+
+const meta = {
+  title: 'Layout/Card',
+  component: Card,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof Card>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const defaultArgs = {};
+
+export const BasicCard = () => <Card sx={{ minWidth: 275 }}>Content children card</Card>;
+
+export const BasicBordered = () => (
+  <Card sx={{ minWidth: 275 }} border={true} color="primary">
+    Card with border
+  </Card>
+);
+
+export const BasicBorderedColors = () => (
+  <>
+    {colors.map((color, key) => (
+      <Card sx={{ minWidth: 275, marginBottom: 2 }} border={true} color={color} key={key}>
+        Card with border {color}
+      </Card>
+    ))}
+  </>
 );

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,108 +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') }
-        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>
-
-    
-  );
-};
+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';