norma-library 0.4.8 → 0.5.0

package/src/stories/Select.stories.tsx

@@ -1,128 +1,100 @@
-import React from "react";
-
-import type { Meta, StoryObj } from "@storybook/react";
-import { Select } from "../components";
-import { DataSelect, TextFieldSizeVariant } from "../types";
-import { SelectChangeEvent } from "@mui/material";
-
-const sizes: TextFieldSizeVariant[] = ["small", "medium"];
-
-const data: DataSelect[] = [
-  { label: "Oliver Hansen", value: "oliver-hansen" },
-  { label: "Van Henry", value: "van-henry" },
-  { label: "April Tucker", value: "april-tucker" },
-  { label: "Ralph Hubbard", value: "ralph-hubbard" },
-  { label: "Omar Alexander", value: "omar-alexander" },
-  { label: "Carlos Abbott", value: "carlos-abbott" },
-  { label: "Miriam Wagner", value: "miriam-wagner" },
-  { label: "Bradley Wilkerson", value: "bradley-wilkerson" },
-  { label: "Virginia Andrews", value: "virginia-andrews" },
-  { label: "Kelly Snyder", value: "kelly-snyder" },
-];
-
-const meta = {
-  title: "Form/Select",
-  component: Select,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  argTypes: {},
-} satisfies Meta<typeof Select>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const SelectBasic = () => {
-  const [value, setValue] = React.useState("");
-
-  const handleChange = (event: SelectChangeEvent) => {
-    setValue(event.target.value as string);
-  };
-  return (
-    <div style={{ width: "480px", marginBottom: 30 }}>
-      <Select
-        id="select-demo"
-        value={value}
-        onChange={handleChange}
-        label="Members"
-        variant="standard"
-        data={data}
-      />
-    </div>
-  );
-};
-
-SelectBasic.storyName = "Select Basic";
-
-export const SelectVariants = () => {
-  const [value, setValue] = React.useState("");
-
-  const handleChange = (event: SelectChangeEvent) => {
-    setValue(event.target.value as string);
-  };
-  return (
-    <>
-      <div style={{ width: "480px", marginBottom: 30 }}>
-        <Select
-          id="select-demo"
-          value={value}
-          onChange={handleChange}
-          label="Members"
-          variant="standard"
-          data={data}
-        />
-      </div>
-      <div style={{ width: "480px", marginBottom: 30 }}>
-        <Select
-          id="select-demo"
-          value={value}
-          onChange={handleChange}
-          label="Members"
-          variant="filled"
-          data={data}
-        />
-      </div>
-      <div style={{ width: "480px", marginBottom: 30 }}>
-        <Select
-          id="select-demo"
-          value={value}
-          onChange={handleChange}
-          label="Members"
-          variant="outlined"
-          data={data}
-        />
-      </div>
-    </>
-  );
-};
-
-SelectVariants.storyName = "Select Variantes";
-
-export const SelectMultiple = () => {
-  const [value, setValue] = React.useState<string[]>([]);
-
-  const handleChange = (event: SelectChangeEvent<typeof value>) => {
-    const {
-      target: { value },
-    } = event;
-    setValue(typeof value === "string" ? value.split(",") : value);
-  };
-
-  return (
-    <div style={{ width: "480px", marginBottom: 30 }}>
-      <Select
-        id="select-demo"
-        value={value}
-        onChange={handleChange}
-        label="Members"
-        multiple={true}
-        data={data}
-        variant="standard"
-      />
-    </div>
-  );
-};
-
-SelectMultiple.storyName = "Select Multiples";
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { Select } from '../components';
+import { DataSelect, TextFieldSizeVariant } from '../types';
+import { SelectChangeEvent } from '@mui/material';
+
+const sizes: TextFieldSizeVariant[] = ['small', 'medium'];
+
+const data: DataSelect[] = [
+  { label: 'Oliver Hansen', value: 'oliver-hansen' },
+  { label: 'Van Henry', value: 'van-henry' },
+  { label: 'April Tucker', value: 'april-tucker' },
+  { label: 'Ralph Hubbard', value: 'ralph-hubbard' },
+  { label: 'Omar Alexander', value: 'omar-alexander' },
+  { label: 'Carlos Abbott', value: 'carlos-abbott' },
+  { label: 'Miriam Wagner', value: 'miriam-wagner' },
+  { label: 'Bradley Wilkerson', value: 'bradley-wilkerson' },
+  { label: 'Virginia Andrews', value: 'virginia-andrews' },
+  { label: 'Kelly Snyder', value: 'kelly-snyder' },
+];
+
+const meta = {
+  title: 'Form/Select',
+  component: Select,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof Select>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const SelectBasic = () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: SelectChangeEvent) => {
+    setValue(event.target.value as string);
+  };
+  return (
+    <div style={{ width: '480px', marginBottom: 30 }}>
+      <Select id="select-demo" value={value} onChange={handleChange} label="Members" variant="standard" data={data} />
+    </div>
+  );
+};
+
+SelectBasic.storyName = 'Select Basic';
+
+export const SelectVariants = () => {
+  const [value, setValue] = React.useState('');
+
+  const handleChange = (event: SelectChangeEvent) => {
+    setValue(event.target.value as string);
+  };
+  return (
+    <>
+      <div style={{ width: '480px', marginBottom: 30 }}>
+        <Select id="select-demo" value={value} onChange={handleChange} label="Members" variant="standard" data={data} />
+      </div>
+      <div style={{ width: '480px', marginBottom: 30 }}>
+        <Select id="select-demo" value={value} onChange={handleChange} label="Members" variant="filled" data={data} />
+      </div>
+      <div style={{ width: '480px', marginBottom: 30 }}>
+        <Select id="select-demo" value={value} onChange={handleChange} label="Members" variant="outlined" data={data} />
+      </div>
+    </>
+  );
+};
+
+SelectVariants.storyName = 'Select Variantes';
+
+export const SelectMultiple = () => {
+  const [value, setValue] = React.useState<string[]>([]);
+
+  const handleChange = (event: SelectChangeEvent<typeof value>) => {
+    const {
+      target: { value },
+    } = event;
+    setValue(typeof value === 'string' ? value.split(',') : value);
+  };
+
+  return (
+    <div style={{ width: '480px', marginBottom: 30 }}>
+      <Select
+        id="select-demo"
+        value={value}
+        onChange={handleChange}
+        label="Members"
+        multiple={true}
+        data={data}
+        variant="standard"
+      />
+    </div>
+  );
+};
+
+SelectMultiple.storyName = 'Select Multiples';

package/src/stories/Tabs.stories.tsx

@@ -1,62 +1,62 @@
-import React from "react";
-
-import type { Meta, StoryObj } from "@storybook/react";
-import { Tabs } from "../components";
-import { DataTabs } from "../types";
-import { Typography } from "@mui/material";
-
-const data: DataTabs[] = [
-  {
-    label: "Tab 1",
-    id: "panel-1",
-    children: (
-      <Typography>
-        Tab 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-        Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
-      </Typography>
-    ),
-  },
-  {
-    label: "Tab 2",
-    id: "panel-2",
-    children: (
-      <Typography>
-        Tab 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-        Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
-      </Typography>
-    ),
-  },
-];
-
-const meta = {
-  title: "Display/Tabs",
-  component: Tabs,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  argTypes: {
-    data: data,
-  },
-} satisfies Meta<typeof Tabs>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Playground: Story = {
-  args: {
-    textColor: "primary",
-    data: data,
-  },
-};
-
-export const TabsBasic = () => {
-  return (
-    <div style={{ width: "480px", marginBottom: 30 }}>
-      <Tabs data={data} />
-    </div>
-  );
-};
-
-TabsBasic.storyName = "Tabs Basic";
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { Tabs } from '../components';
+import { DataTabs } from '../types';
+import { Typography } from '@mui/material';
+
+const data: DataTabs[] = [
+  {
+    label: 'Tab 1',
+    id: 'panel-1',
+    children: (
+      <Typography>
+        Tab 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet
+        blandit leo lobortis eget.
+      </Typography>
+    ),
+  },
+  {
+    label: 'Tab 2',
+    id: 'panel-2',
+    children: (
+      <Typography>
+        Tab 2 - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet
+        blandit leo lobortis eget.
+      </Typography>
+    ),
+  },
+];
+
+const meta = {
+  title: 'Display/Tabs',
+  component: Tabs,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    data: data,
+  },
+} satisfies Meta<typeof Tabs>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  args: {
+    textColor: 'primary',
+    data: data,
+  },
+};
+
+export const TabsBasic = () => {
+  return (
+    <div style={{ width: '480px', marginBottom: 30 }}>
+      <Tabs data={data} />
+    </div>
+  );
+};
+
+TabsBasic.storyName = 'Tabs Basic';

package/src/stories/Tag.stories.tsx

@@ -1,74 +1,56 @@
-import React from "react";
-
-import type { Meta } from "@storybook/react";
-import { Tag } from "../components";
-import { ColorVariant, TextFieldSizeVariant } from "../types";
-
-const colors: ColorVariant[] = [
-  "inherit",
-  "primary",
-  "secondary",
-  "success",
-  "error",
-  "info",
-  "warning",
-];
-
-const sizes: TextFieldSizeVariant[] = ["small", "medium"];
-
-const meta = {
-  title: "Display/Tag",
-  component: Tag,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-  argTypes: {},
-} satisfies Meta<typeof Tag>;
-
-export default meta;
-
-export const TagBasic = () => {
-  return (
-    <>
-      <Tag label="Chip Filled" color="primary" style={{ margin: 5 }} />
-      <Tag label="Chip Outlined" outlined style={{ margin: 5 }} />
-    </>
-  );
-};
-
-export const TagColors = () => {
-  return (
-    <>
-      {colors.map((color, key) => (
-        <div>
-          <Tag label="Chip Filled" color={color} style={{ margin: 5 }} />
-          <Tag
-            label="Chip Outlined"
-            color={color}
-            outlined
-            style={{ margin: 5 }}
-          />
-        </div>
-      ))}
-    </>
-  );
-};
-
-export const TagSizes = () => {
-  return (
-    <>
-      {sizes.map((size, key) => (
-        <div>
-          <Tag label="Chip Filled" size={size} style={{ margin: 5 }} />
-          <Tag
-            label="Chip Outlined"
-            size={size}
-            outlined={true}
-            style={{ margin: 5 }}
-          />
-        </div>
-      ))}
-    </>
-  );
-};
+import React from 'react';
+
+import type { Meta } from '@storybook/react';
+import { Tag } from '../components';
+import { ColorVariant, TextFieldSizeVariant } from '../types';
+
+const colors: ColorVariant[] = ['inherit', 'primary', 'secondary', 'success', 'error', 'info', 'warning'];
+
+const sizes: TextFieldSizeVariant[] = ['small', 'medium'];
+
+const meta = {
+  title: 'Display/Tag',
+  component: Tag,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof Tag>;
+
+export default meta;
+
+export const TagBasic = () => {
+  return (
+    <>
+      <Tag label="Chip Filled" color="primary" style={{ margin: 5 }} />
+      <Tag label="Chip Outlined" outlined style={{ margin: 5 }} />
+    </>
+  );
+};
+
+export const TagColors = () => {
+  return (
+    <>
+      {colors.map((color, key) => (
+        <div>
+          <Tag label="Chip Filled" color={color} style={{ margin: 5 }} />
+          <Tag label="Chip Outlined" color={color} outlined style={{ margin: 5 }} />
+        </div>
+      ))}
+    </>
+  );
+};
+
+export const TagSizes = () => {
+  return (
+    <>
+      {sizes.map((size, key) => (
+        <div>
+          <Tag label="Chip Filled" size={size} style={{ margin: 5 }} />
+          <Tag label="Chip Outlined" size={size} outlined={true} style={{ margin: 5 }} />
+        </div>
+      ))}
+    </>
+  );
+};