norma-library 0.4.2 → 0.4.5

package/src/stories/RangerSlider.stories.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { RangerSlider } from "../components";
+import { ColorVariant, SizeVariant, TextFieldSizeVariant } from "../types";
+
+const colors: ColorVariant[] = [
+  "inherit",
+  "primary",
+  "secondary",
+  "success",
+  "error",
+  "info",
+  "warning",
+];
+
+const sizes: TextFieldSizeVariant[] = ["small", "medium"];
+
+const meta = {
+  title: "Display/RangerSlider",
+  component: RangerSlider,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+} satisfies Meta<typeof RangerSlider>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  args: {
+    max: 90,
+    min: 10,
+    value: [20, 80],
+    color: "primary",
+  },
+};
+
+function valuetext(value: number) {
+  return `${value}°C`;
+}
+
+export const RangerSliderBasic = () => {
+  const [value, setValue] = React.useState<number[]>([20, 37]);
+
+  const handleChange = (event: Event, newValue: number | number[]) => {
+    setValue(newValue as number[]);
+  };
+
+  return (
+    <div
+      style={{ display: "flex", gap: "1rem", width: "480px", marginBottom: 30 }}
+    >
+      <RangerSlider
+        getAriaLabel={() => "Temperature range"}
+        value={value}
+        onChange={handleChange}
+        valueLabelDisplay="on"
+        getAriaValueText={valuetext}
+      />
+    </div>
+  );
+};
+
+RangerSliderBasic.storyName = "RangerSlider Basic";

package/src/stories/Select.stories.tsx

@@ -0,0 +1,128 @@
+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

@@ -0,0 +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";

package/src/stories/Tag.stories.tsx

@@ -0,0 +1,76 @@
+import React from "react";
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { Tag } from "../components";
+import { ColorVariant, SizeVariant, 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;
+
+type Story = StoryObj<typeof 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>
+      ))}
+    </>
+  );
+};