norma-library 0.4.8 → 0.5.0

package/src/stories/ChatMessage.stories.tsx

@@ -1,85 +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/CheckBox.stories.tsx

@@ -1,16 +1,16 @@
-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";
+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",
+  title: 'Form/CheckBox',
   component: CheckBox,
   parameters: {
-    layout: "centered",
+    layout: 'centered',
   },
-  tags: ["autodocs"],
+  tags: ['autodocs'],
   argTypes: {},
 } satisfies Meta<typeof CheckBox>;
 
@@ -24,11 +24,11 @@ const defaultArgs = {
 
 export const Playground: Story = {
   args: {
-    color: "primary",
+    color: 'primary',
   },
 };
 
-const label = { inputProps: { "aria-label": "Checkbox demo" } };
+const label = { inputProps: { 'aria-label': 'Checkbox demo' } };
 
 export const CheckboxVariant = () => {
   return (
@@ -40,7 +40,7 @@ export const CheckboxVariant = () => {
     </>
   );
 };
-CheckboxVariant.storyName = "CheckBox Variants";
+CheckboxVariant.storyName = 'CheckBox Variants';
 
 export const CheckboxProps = () => {
   return (
@@ -52,7 +52,7 @@ export const CheckboxProps = () => {
     </>
   );
 };
-CheckboxProps.storyName = "Variants and Label";
+CheckboxProps.storyName = 'Variants and Label';
 
 export const CheckboxColors = () => {
   return (
@@ -66,7 +66,7 @@ export const CheckboxColors = () => {
         defaultChecked
         sx={{
           color: pink[800],
-          "&.Mui-checked": {
+          '&.Mui-checked': {
             color: pink[600],
           },
         }}
@@ -74,21 +74,15 @@ export const CheckboxColors = () => {
     </>
   );
 };
-CheckboxColors.storyName = "CheckBox Colors";
+CheckboxColors.storyName = 'CheckBox Colors';
 
 export const CheckboxSizes = () => {
   return (
     <>
-      <FormControlLabel
-        control={<CheckBox size="small" />}
-        label="CheckBox Small"
-      />
+      <FormControlLabel control={<CheckBox size="small" />} label="CheckBox Small" />
       <FormControlLabel control={<CheckBox />} label="CheckBox Default" />
-      <FormControlLabel
-        control={<CheckBox size="medium" />}
-        label="CheckBox Medium"
-      />
+      <FormControlLabel control={<CheckBox size="medium" />} label="CheckBox Medium" />
     </>
   );
 };
-CheckboxSizes.storyName = "CheckBox Sizes";
+CheckboxSizes.storyName = 'CheckBox Sizes';

package/src/stories/DataGrid.stories.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import type { Meta } from '@storybook/react';
+import { DataGrid } from '../components';
+import dataSource from '../components/DataGrid/allData.json';
+import data from '../sample-data.json';
+
+const meta = {
+  title: 'Display/DataGrid',
+  component: DataGrid,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof DataGrid>;
+
+export default meta;
+
+export const DataGridBasic = () => {
+  return (
+    <>
+      <DataGrid data={data} />
+    </>
+  );
+};
+
+DataGridBasic.storyName = 'DataGrid Basic';

package/src/stories/DatePicker.stories.tsx

@@ -1,77 +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';

package/src/stories/DropDown.stories.tsx

@@ -1,57 +1,57 @@
-import React from "react";
-
-import type { Meta, StoryObj } from "@storybook/react";
-import { Button, DropDown } from "../components";
-import { MenuItem } from "@mui/material";
-
-const meta = {
-  title: "Layout/DropDown",
-  component: DropDown,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  argTypes: {},
-} satisfies Meta<typeof DropDown>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const DropDownlBasic = () => {
-  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-  const open = Boolean(anchorEl);
-
-  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
-
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
-  return (
-    <>
-      <Button
-        id="basic-button"
-        aria-controls={open ? "basic-menu" : undefined}
-        aria-haspopup="true"
-        aria-expanded={open ? "true" : undefined}
-        onClick={handleClick}
-        color="primary"
-        variant="outlined"
-      >
-        Open DropDown
-      </Button>
-      {open && (
-        <DropDown onClose={handleClose} open anchorEl={anchorEl}>
-          <MenuItem onClick={handleClose}>Profile</MenuItem>
-          <MenuItem onClick={handleClose}>My account</MenuItem>
-          <MenuItem onClick={handleClose}>Logout</MenuItem>
-        </DropDown>
-      )}
-    </>
-  );
-};
-
-DropDownlBasic.storyName = "DropDown Basic";
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button, DropDown } from '../components';
+import { MenuItem } from '@mui/material';
+
+const meta = {
+  title: 'Layout/DropDown',
+  component: DropDown,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof DropDown>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const DropDownlBasic = () => {
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+  const open = Boolean(anchorEl);
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <>
+      <Button
+        id="basic-button"
+        aria-controls={open ? 'basic-menu' : undefined}
+        aria-haspopup="true"
+        aria-expanded={open ? 'true' : undefined}
+        onClick={handleClick}
+        color="primary"
+        variant="outlined"
+      >
+        Open DropDown
+      </Button>
+      {open && (
+        <DropDown onClose={handleClose} open anchorEl={anchorEl}>
+          <MenuItem onClick={handleClose}>Profile</MenuItem>
+          <MenuItem onClick={handleClose}>My account</MenuItem>
+          <MenuItem onClick={handleClose}>Logout</MenuItem>
+        </DropDown>
+      )}
+    </>
+  );
+};
+
+DropDownlBasic.storyName = 'DropDown Basic';