norma-library 0.4.2 → 0.4.5

package/src/interfaces/RadioGroup.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from "react";
+import {
+  CheckBoxColorVariant,
+  DirectionVariant,
+  MuiRadioBaseProps,
+  OptionsRadios,
+  TextFieldSizeVariant,
+} from "../types";
+import {
+  CheckboxPropsColorOverrides,
+  RadioPropsSizeOverrides,
+} from "@mui/material";
+import { OverridableStringUnion } from "@mui/types";
+
+export interface RadioBaseProps extends MuiRadioBaseProps {
+  id?: string;
+  name?: string;
+  options?: OptionsRadios[];
+  required?: boolean;
+  direction?: DirectionVariant;
+  label?: ReactNode;
+  size?: OverridableStringUnion<TextFieldSizeVariant, RadioPropsSizeOverrides>;
+  color?: OverridableStringUnion<
+    CheckBoxColorVariant,
+    CheckboxPropsColorOverrides
+  >;
+  checked?: string;
+}

package/src/interfaces/RangerSlider.ts

@@ -0,0 +1,32 @@
+import { Theme } from "@emotion/react";
+
+import {
+  SliderPropsColorOverrides,
+  SliderPropsSizeOverrides,
+  SxProps,
+} from "@mui/material";
+import { OverridableStringUnion } from "@mui/types";
+
+import { MuiRangerSliderBaseProps } from "../types";
+
+export interface RangerSliderBaseProps extends MuiRangerSliderBaseProps {
+  sx?: SxProps<Theme>;
+  max?: number;
+  min?: number;
+  name?: string;
+  mode?: Boolean;
+  onChange?: (
+    event: Event,
+    value: number | number[],
+    activeThumb: number
+  ) => void;
+  orientation?: "horizontal" | "vertical";
+  size?: OverridableStringUnion<"small" | "medium", SliderPropsSizeOverrides>;
+  step?: number | null;
+  defaultValue?: number | number[];
+  valueLabelDisplay?: "on" | "auto" | "off";
+  color?: OverridableStringUnion<
+    "primary" | "secondary",
+    SliderPropsColorOverrides
+  >;
+}

package/src/interfaces/Select.ts

@@ -0,0 +1,17 @@
+import { SxProps } from "@mui/material";
+import { Theme } from "@emotion/react";
+import { DataSelect, MuiSelectBaseProps, TextFieldVariant } from "../types";
+
+export interface SelectBaseProps extends MuiSelectBaseProps {
+  sx?: SxProps<Theme>;
+  id?: string;
+  label?: React.ReactNode;
+  input?: React.ReactElement<any, any>;
+  variant?: TextFieldVariant;
+  value?: string;
+  open?: boolean;
+  onOpen?: (event: React.SyntheticEvent) => void;
+  onClose?: (event: React.SyntheticEvent) => void;
+  multiple?: boolean;
+  data?: DataSelect[];
+}

package/src/interfaces/Tabs.ts

@@ -0,0 +1,24 @@
+import { SxProps } from "@mui/material";
+import { Theme } from "@emotion/react";
+import {
+  ColorVariant,
+  DataTabs,
+  MuiTabsBaseProps,
+  TabsVariant,
+} from "../types";
+
+export interface TabsBaseProps extends MuiTabsBaseProps {
+  sx?: SxProps<Theme>;
+  children?: React.ReactNode;
+  onChange?: (event: React.SyntheticEvent, value: any) => void;
+  color?: ColorVariant;
+  variant?: TabsVariant;
+  value?: any;
+  data?: DataTabs[];
+}
+
+export interface TabPanelProps {
+  children?: React.ReactNode;
+  index: number;
+  value: number;
+}

package/src/interfaces/Tag.ts

@@ -0,0 +1,17 @@
+import { SxProps } from "@mui/material";
+import { Theme } from "@emotion/react";
+import { ColorVariant, MuiTagBaseProps } from "../types";
+import { OverridableStringUnion } from "@mui/types";
+
+export interface ChipPropsColorOverrides {}
+export interface ChipPropsSizeOverrides {}
+
+export interface TagBaseProps extends MuiTagBaseProps {
+  label?: React.ReactNode | String;
+  sx?: SxProps<Theme>;
+  avatar?: React.ReactElement;
+  outlined?: Boolean;
+  size?: OverridableStringUnion<"small" | "medium", ChipPropsSizeOverrides>;
+  color?: OverridableStringUnion<ColorVariant, ChipPropsColorOverrides>;
+  onClose?: React.ReactEventHandler<{}>;
+}

package/src/interfaces/TextField.ts

@@ -0,0 +1,63 @@
+import React, { ReactNode } from "react";
+
+import {
+  TextFieldPropsColorOverrides,
+  TextFieldPropsSizeOverrides,
+} from "@mui/material/TextField";
+import {
+  FormHelperTextProps,
+  InputBaseProps,
+  InputLabelProps,
+  OutlinedInputProps,
+  SelectProps,
+} from "@mui/material";
+import { InputProps as StandardInputProps } from "@mui/material/Input";
+import { OverridableStringUnion } from "@mui/types";
+import { TextField } from "@mui/material";
+import {
+  TextFieldColorVariant,
+  MuiTextFieldBaseProps,
+  TextFieldSizeVariant,
+  TextFieldVariant,
+} from "../types";
+
+export interface TextFieldBaseProps extends MuiTextFieldBaseProps {
+  id?: string;
+  name?: string;
+  defaultValue?: string;
+  disabled?: boolean;
+  required?: boolean;
+  type?: React.InputHTMLAttributes<unknown>["type"];
+  hasError?: boolean;
+  label?: ReactNode;
+  children?: ReactNode;
+  error?: boolean;
+  variant?: TextFieldVariant;
+  helperText?: React.ReactNode;
+  InputLabelProps?: Partial<InputLabelProps>;
+  InputProps?: Partial<OutlinedInputProps>;
+  autoComplete?: string;
+  placeholder?: string;
+  multiline?: boolean;
+  rows?: string | number;
+  maxRows?: string | number;
+  minRows?: string | number;
+  select?: boolean;
+  SelectProps?: Partial<SelectProps>;
+  onChange?: OutlinedInputProps["onChange"];
+  onClick?: InputBaseProps["onClick"];
+  onBlur?: InputBaseProps["onBlur"];
+  onFocus?: StandardInputProps["onFocus"];
+  size?: OverridableStringUnion<
+    TextFieldSizeVariant,
+    TextFieldPropsSizeOverrides
+  >;
+  FormHelperTextProps?: Partial<FormHelperTextProps>;
+  color?: OverridableStringUnion<
+    TextFieldColorVariant,
+    TextFieldPropsColorOverrides
+  >;
+  value?: unknown;
+}
+
+export type TextFieldType = keyof typeof TextField;

package/src/interfaces/index.ts

@@ -0,0 +1,17 @@
+export * from "./Accordion";
+export * from "./Button";
+export * from "./Card";
+export * from "./CheckBox";
+export * from "./DropDown";
+export * from "./IconButton";
+export * from "./Icons";
+export * from "./Modal";
+export * from "./Paper";
+export * from "./ProgressBar";
+export * from "./RadioGroup";
+export * from "./RadioGroup";
+export * from "./RangerSlider";
+export * from "./Select";
+export * from "./Tabs";
+export * from "./Tag";
+export * from "./TextField";

package/src/stories/Accordion.stories.tsx

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

package/src/stories/Button.stories.tsx

@@ -0,0 +1,99 @@
+import React from "react";
+import { Button } from "../components/Button";
+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/Button",
+  component: Button,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const defaultArgs = {
+  disabled: false,
+};
+
+export const Playground: Story = {
+  args: {
+    label: "My Button",
+    size: "medium",
+    color: "primary",
+    variant: "contained",
+  },
+};
+
+export const ButtonSizes = () => (
+  <>
+    {sizes.map((size, key) => (
+      <Button
+        key={key}
+        label={`Size ${size}`}
+        size={size}
+        variant="contained"
+        style={{ marginRight: "5px" }}
+        {...defaultArgs}
+      />
+    ))}
+  </>
+);
+
+export const ButtonVariants = () => (
+  <>
+    {variants.map((variant, key) => (
+      <Button
+        key={key}
+        variant={variant}
+        label={`Variant ${variant}`}
+        style={{ marginRight: "5px" }}
+        {...defaultArgs}
+      />
+    ))}
+  </>
+);
+
+export const ButtonColorsDefault = () => (
+  <>
+    {colors.map((color, key) => (
+      <Button
+        key={key}
+        variant="outlined"
+        label={`Color ${color}`}
+        color={color}
+        style={{ margin: "2px" }}
+        {...defaultArgs}
+      />
+    ))}
+    <div>
+      {colors.map((color, key) => (
+        <Button
+          key={key}
+          label={`Color ${color}`}
+          color={color}
+          variant="contained"
+          style={{ margin: "2px" }}
+          {...defaultArgs}
+        />
+      ))}
+    </div>
+  </>
+);

package/src/stories/Card.stories.tsx

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

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

package/src/stories/Colors.stories.mdx

@@ -0,0 +1,127 @@
+import { Meta, ColorPalette, ColorItem } from "@storybook/blocks";
+
+import { palette } from "../helpers";
+
+<Meta title="Theme/Colors" />
+
+      <ColorPalette>
+        <ColorItem
+          title="Primary"
+          subtitle="Color primary default to project"
+          colors={{ Primary: palette.primary }}
+        />
+        <ColorItem
+          title="Primary variant colors"
+          subtitle="Variants colors primary"
+          colors={{
+            PrimaryLight: palette.primaryLight,
+            PrimaryMedium: palette.primaryMedium,
+            PrimaryDark: palette.primaryDark,
+          }}
+        />
+
+        <ColorItem
+          title="Secondary"
+          subtitle="Color secondary"
+          colors={{ Secondary: palette.secondary }}
+        />
+        <ColorItem
+          title="Secondary variant colors"
+          subtitle="Variants colors secondary"
+          colors={{
+            SecondaryLight: palette.secondaryLight,
+            SecondaryMedium: palette.secondaryMedium,
+            SecondaryDark: palette.secondaryDark,
+          }}
+        />
+
+        <ColorItem
+          title="Inherit"
+          subtitle="Color inherit"
+          colors={{ Inherit: palette.inherit }}
+        />
+        <ColorItem
+          title="Inherit variant colors"
+          subtitle="Variants colors inherit"
+          colors={{
+            InheritLight: palette.inheritLight,
+            InheritMedium: palette.inheritMedium,
+            InheritDark: palette.inheritDark,
+          }}
+        />
+
+        <ColorItem
+          title="White"
+          subtitle="Color white"
+          colors={{ White: palette.white }}
+        />
+        <ColorItem
+          title="White variant colors"
+          subtitle="Variants colors white"
+          colors={{
+            WhiteLight: palette.whiteLight,
+            WhiteMedium: palette.whiteMedium,
+            WhiteDark: palette.whiteDark,
+          }}
+        />
+
+        <ColorItem
+          title="Success"
+          subtitle="Color success"
+          colors={{ Success: palette.success }}
+        />
+        <ColorItem
+          title="Success variant colors"
+          subtitle="Variants colors success"
+          colors={{
+            SuccessLight: palette.successLight,
+            SuccessMedium: palette.successMedium,
+            SuccessDark: palette.successDark,
+          }}
+        />
+
+        <ColorItem
+          title="Error"
+          subtitle="Color error"
+          colors={{ Error: palette.error }}
+        />
+        <ColorItem
+          title="Error variant colors"
+          subtitle="Variants colors error"
+          colors={{
+            ErrorLight: palette.errorLight,
+            ErrorMedium: palette.errorMedium,
+            ErrorDark: palette.errorDark,
+          }}
+        />
+
+        <ColorItem
+          title="Warning"
+          subtitle="Color warning"
+          colors={{ Warning: palette.warning }}
+        />
+        <ColorItem
+          title="Warning variant colors"
+          subtitle="Variants colors warning"
+          colors={{
+            WarningLight: palette.warningLight,
+            WarningMedium: palette.warningMedium,
+            WarningDark: palette.warningDark,
+          }}
+        />
+
+        <ColorItem
+          title="Helper"
+          subtitle="Color helper"
+          colors={{ Helper: palette.helper }}
+        />
+        <ColorItem
+          title="Helper variant colors"
+          subtitle="Variants colors helper"
+          colors={{
+            HelperLight: palette.helperLight,
+            HelperMedium: palette.helperMedium,
+            HelperDark: palette.helperDark,
+          }}
+        />
+      </ColorPalette>