norma-library 0.4.2 → 0.4.5

package/src/stories/DropDown.stories.tsx

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

package/src/stories/IconButton.stories.tsx

@@ -0,0 +1,114 @@
+import React from "react";
+import { IconButton, Icons } from "../components";
+import type { Meta, StoryObj } from "@storybook/react";
+import { ButtonVariant, SizeVariant, ColorVariant } from "../types";
+
+const sizes: SizeVariant[] = ["small", "medium", "large"];
+const variants: ButtonVariant[] = ["text", "outlined", "contained"];
+const colors: ColorVariant[] = [
+  "inherit",
+  "primary",
+  "secondary",
+  "success",
+  "error",
+  "info",
+  "warning",
+];
+
+const meta = {
+  title: "Layout/IconButton",
+  component: IconButton,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+} satisfies Meta<typeof IconButton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const defaultArgs = {
+  color: "primary",
+};
+
+export const Playground: Story = {
+  args: {
+    children: <Icons icon="checkCircle" color="primary" />,
+    size: "medium",
+    color: "primary",
+    variant: "text",
+  },
+};
+
+export const IconButtonSizes = () => (
+  <>
+    {sizes.map((size, key) => (
+      <IconButton
+        key={key}
+        size={size}
+        variant="text"
+        color="primary"
+        sx={{ marginRight: "5px" }}
+      >
+        <Icons icon="checkCircle" color="primary" scale={size} />
+      </IconButton>
+    ))}
+  </>
+);
+
+IconButtonSizes.storyName = "IconButton Sizes";
+
+export const IconButtonVariants = () => (
+  <>
+    {variants.map((variant, key) => (
+      <IconButton
+        key={key}
+        size="medium"
+        variant={variant}
+        color="primary"
+        sx={{ marginRight: "5px" }}
+      >
+        <Icons
+          icon="faceHappy"
+          color={variant === "contained" ? "white" : "primary"}
+          scale="medium"
+        />
+      </IconButton>
+    ))}
+  </>
+);
+
+IconButtonVariants.storyName = "IconButton Variants";
+
+export const IconButtonColors = () => (
+  <>
+    {colors.map((color, key) => (
+      <IconButton
+        key={key}
+        size="medium"
+        variant="outlined"
+        color={color}
+        sx={{ margin: "5px" }}
+      >
+        <Icons icon="starOutlined" color={color} scale="medium" />
+      </IconButton>
+    ))}
+    <div>
+      {colors.map((color, key) => (
+        <IconButton
+          key={key}
+          size="medium"
+          variant="contained"
+          color={color}
+          sx={{ margin: "5px" }}
+        >
+          <Icons icon="user" color="white" scale="medium" />
+        </IconButton>
+      ))}
+    </div>
+  </>
+);
+
+IconButtonColors.storyName = "IconButton Colors";

package/src/stories/Icons.stories.mdx

@@ -0,0 +1,27 @@
+import { Meta, ColorPalette, ColorItem } from "@storybook/blocks";
+import { Box, Card, Grid, Typography, Paper } from "@mui/material";
+import { palette } from "../helpers";
+import { iconsSVG } from "../components/Svgs";
+import { Icons } from "../components/Icons";
+
+<Meta title="Display/Icons" />
+
+<Grid container spacing={2}>
+  <Grid item xs={12}>
+    <Typography variant="h5">Norma DS Icons</Typography>
+  </Grid>
+  {Object.keys(iconsSVG).map((key) => (
+    <Grid item xs={3} key={key}>
+      <Paper sx={{ padding: 2 }}>
+        <Typography variant={"body1"}> {key} </Typography>
+        <Icons icon={key} scale="xsmall" />
+        <Icons icon={key} scale="small" color="secondary" />
+        <Icons icon={key} scale="medium" color="error" />
+        <Icons icon={key} scale="large" color="warning" />
+        <Icons icon={key} scale="xlarge" color="success" />
+        <Icons icon={key} scale="2xlarge" color="black" />
+        <Icons icon={key} scale="3xlarge" color="primary" />
+      </Paper>
+    </Grid>
+  ))}
+</Grid>

package/src/stories/Modal.stories.tsx

@@ -0,0 +1,190 @@
+import React from "react";
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button, Modal } from "../components";
+import { Box, Typography } from "@mui/material";
+
+const meta = {
+  title: "Layout/Modal",
+  component: Modal,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+} satisfies Meta<typeof Modal>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const ModalBasic = () => {
+  const [open, setOpen] = React.useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  return (
+    <>
+      <Button onClick={handleOpen} color="primary" variant="outlined">
+        Open modal
+      </Button>
+
+      {open && (
+        <Modal
+          open={open}
+          onClose={handleClose}
+          aria-labelledby="modal-modal-title"
+          aria-describedby="modal-modal-description"
+        >
+          <>
+            <Typography id="modal-modal-title" variant="h6" component="h2">
+              Text in a modal
+            </Typography>
+            <Typography id="modal-modal-description" sx={{ mt: 2 }}>
+              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
+            </Typography>
+          </>
+        </Modal>
+      )}
+    </>
+  );
+};
+
+ModalBasic.storyName = "Modal Basic";
+
+export const ModalTitle = () => {
+  const [open, setOpen] = React.useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+  return (
+    <>
+      <Button onClick={handleOpen} color="primary" variant="outlined">
+        Open modal
+      </Button>
+
+      {open && (
+        <Modal
+          open={open}
+          onClose={handleClose}
+          aria-labelledby="modal-modal-title"
+          aria-describedby="modal-modal-description"
+          title="Title Modal"
+        >
+          <>
+            <Typography id="modal-modal-title" variant="h6" component="h2">
+              Text in a modal
+            </Typography>
+            <Typography id="modal-modal-description" sx={{ mt: 2 }}>
+              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
+            </Typography>
+          </>
+        </Modal>
+      )}
+    </>
+  );
+};
+
+ModalTitle.storyName = "Modal Title";
+
+export const ModalAction = () => {
+  const [open, setOpen] = React.useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  const defaultAction = [
+    {
+      label: "Cancelar",
+      action: handleClose,
+      color: "error",
+      size: "medium",
+      variant: "outlined",
+    },
+    {
+      label: "Confirmar",
+      action: handleClose,
+      color: "primary",
+      size: "medium",
+      variant: "contained",
+    },
+  ];
+  return (
+    <>
+      <Button onClick={handleOpen} color="primary" variant="outlined">
+        Open modal
+      </Button>
+
+      {open && (
+        <Modal
+          open={open}
+          onClose={handleClose}
+          aria-labelledby="modal-modal-title"
+          aria-describedby="modal-modal-description"
+          action={defaultAction}
+        >
+          <>
+            <Typography id="modal-modal-title" variant="h6" component="h2">
+              Text in a modal
+            </Typography>
+            <Typography id="modal-modal-description" sx={{ mt: 2 }}>
+              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
+            </Typography>
+          </>
+        </Modal>
+      )}
+    </>
+  );
+};
+
+ModalAction.storyName = "Modal Action";
+
+export const ModalProps = () => {
+  const [open, setOpen] = React.useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  const defaultAction = [
+    {
+      label: "Cancelar",
+      action: handleClose,
+      color: "error",
+      size: "medium",
+      variant: "outlined",
+    },
+    {
+      label: "Confirmar",
+      action: handleClose,
+      color: "primary",
+      size: "medium",
+      variant: "contained",
+    },
+  ];
+  return (
+    <>
+      <Button onClick={handleOpen} color="primary" variant="outlined">
+        Open modal
+      </Button>
+
+      {open && (
+        <Modal
+          open={open}
+          onClose={handleClose}
+          aria-labelledby="modal-modal-title"
+          aria-describedby="modal-modal-description"
+          action={defaultAction}
+          title="Select a company"
+        >
+          <>
+            <Typography id="modal-modal-title" variant="h6" component="h2">
+              Text in a modal
+            </Typography>
+            <Typography id="modal-modal-description" sx={{ mt: 2 }}>
+              Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
+            </Typography>
+          </>
+        </Modal>
+      )}
+    </>
+  );
+};
+
+ModalProps.storyName = "Modal Title and Action";

package/src/stories/Paper.stories.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { Paper } from "../components";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Grid from "@mui/material/Grid";
+import Box from "@mui/material/Box";
+import { ThemeProvider, styled } from "@mui/material/styles";
+import { themes } from "../helpers";
+
+const Item = styled(Paper)(({ theme }) => ({
+  ...theme.typography.body2,
+  textAlign: "center",
+  height: 60,
+  lineHeight: "60px",
+}));
+
+const meta = {
+  title: "Layout/Paper",
+  component: Paper,
+  parameters: {
+    // layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+} satisfies Meta<typeof Paper>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const defaultArgs = {};
+
+export const PaperElevations = () => (
+  <Grid container spacing={2}>
+    <Grid item xs={12}>
+      <Box
+        sx={{
+          p: 2,
+          bgcolor: "background.default",
+          display: "grid",
+          gridTemplateColumns: { md: "1fr 1fr" },
+          gap: 2,
+        }}
+      >
+        {[0, 1, 2, 3, 4, 6, 8, 12, 16, 24].map((elevation) => (
+          <Item key={elevation} elevation={elevation}>
+            {`elevation=${elevation}`}
+          </Item>
+        ))}
+      </Box>
+    </Grid>
+  </Grid>
+);

package/src/stories/ProgressBar.stories.tsx

@@ -0,0 +1,139 @@
+import React from "react";
+
+import type { Meta, StoryObj } from "@storybook/react";
+import { ProgressBar } 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/ProgressBar",
+  component: ProgressBar,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+} satisfies Meta<typeof ProgressBar>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const defaultArgs = {
+  disabled: false,
+};
+
+export const Playground: Story = {
+  args: {
+    label: "Progress",
+    total: 100,
+    color: "primary",
+    value: 10,
+  },
+};
+
+export const ProgressBarBasic = () => (
+  <div style={{ display: "flex", gap: "1rem", width: "320px" }}>
+    <div style={{ position: "relative", width: "100%" }}>
+      <ProgressBar value={40} total={100} color="primary" />
+    </div>
+  </div>
+);
+
+ProgressBarBasic.storyName = "ProgressBar Basic";
+
+export const ProgressBarTitle: Story = () => (
+  <div style={{ display: "flex", gap: "1rem", width: "320px" }}>
+    <div style={{ position: "relative", width: "100%" }}>
+      <ProgressBar value={10} label="Progress" total={100} />
+    </div>
+  </div>
+);
+
+ProgressBarTitle.storyName = "ProgressBar With Title";
+
+export const ProgressBarColors: Story = () => (
+  <>
+    <div
+      style={{ display: "flex", gap: "1rem", width: "480px", marginBottom: 30 }}
+    >
+      <>
+        <div style={{ position: "relative", flex: 1, width: "230px" }}>
+          <ProgressBar
+            value={18}
+            total={100}
+            color="inherit"
+            label="Progress Inherit"
+          />
+        </div>
+        <div style={{ position: "relative", flex: 1, width: "230px" }}>
+          <ProgressBar
+            value={77}
+            total={100}
+            color="secondary"
+            label="Progress secondary"
+          />
+        </div>
+      </>
+    </div>
+    <div
+      style={{ display: "flex", gap: "1rem", width: "480px", marginBottom: 30 }}
+    >
+      <>
+        <div style={{ position: "relative", flex: 1, width: "230px" }}>
+          <ProgressBar
+            value={22}
+            total={100}
+            color="error"
+            label="Progress error"
+          />
+        </div>
+        <div style={{ position: "relative", flex: 1, width: "230px" }}>
+          <ProgressBar
+            value={24}
+            total={100}
+            color="info"
+            label="Progress info"
+          />
+        </div>
+      </>
+    </div>
+    <div
+      style={{ display: "flex", gap: "1rem", width: "480px", marginBottom: 30 }}
+    >
+      <>
+        <div style={{ display: "flex", gap: "1rem", marginBottom: 15 }}>
+          <div style={{ position: "relative", flex: 1, width: "230px" }}>
+            <ProgressBar
+              value={45}
+              total={100}
+              color="success"
+              label="Progress success"
+            />
+          </div>
+          <div style={{ position: "relative", flex: 1, width: "230px" }}>
+            <ProgressBar
+              value={86}
+              total={100}
+              color="warning"
+              label="Progress warning"
+            />
+          </div>
+        </div>
+      </>
+    </div>
+  </>
+);
+
+ProgressBarColors.storyName = "ProgressBar Colors";

package/src/stories/RadioGroup.stories.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+import { RadioGroup } from "../components/RadioGroup";
+import type { Meta, StoryObj } from "@storybook/react";
+import { SizeVariant } from "../types";
+
+const meta = {
+  title: "Form/RadioGroup",
+  component: RadioGroup,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+} satisfies Meta<typeof RadioGroup>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const defaultArgs = {
+  disabled: false,
+};
+
+const sizeOptions = [
+  { label: "Small", value: "S", size: "small" },
+  { label: "Medium", value: "M", size: "medium" },
+  { label: "Large", value: "L", size: "large" },
+];
+
+const genderOptions = [
+  { label: "Male", value: "M" },
+  { label: "Female", value: "F" },
+  { label: "Other", value: "O" },
+];
+
+export const Playground: Story = {
+  args: {
+    color: "primary",
+    options: genderOptions,
+    name: "gender",
+    label: "Gender",
+    checked: "F",
+  },
+};
+
+export const RadioboxVertical = () => {
+  return (
+    <>
+      <RadioGroup
+        name="gender"
+        options={genderOptions}
+        label="Gender"
+        color="primary"
+        checked="M"
+        id="gender"
+      />
+    </>
+  );
+};
+RadioboxVertical.storyName = "RadioGroup Vertical";
+
+export const RadioHorizontal = () => {
+  return (
+    <>
+      <RadioGroup
+        name="gender"
+        options={genderOptions}
+        label="Gender"
+        color="primary"
+        checked="M"
+        id="gender"
+        direction="horizontal"
+      />
+    </>
+  );
+};
+RadioHorizontal.storyName = "RadioGroup Horizontal";
+
+export const RadioSizes = () => {
+  return (
+    <>
+      <RadioGroup
+        name="size"
+        options={sizeOptions}
+        label="Sizes"
+        color="primary"
+        checked="M"
+        id="size"
+        direction="horizontal"
+      />
+    </>
+  );
+};
+RadioSizes.storyName = "RadioGroup Sizes";