norma-library 0.4.3 → 0.4.6

package/src/helpers/radios.ts

@@ -0,0 +1,24 @@
+function getRadioSize(radio: string) {
+  switch (radio) {
+    case 'none':
+      return 'rounded-none';
+    case 'xs':
+      return 'rounded-xs';
+    case 'sm':
+      return 'rounded-sm';
+    case 'md':
+      return 'rounded-md';
+    case 'lg':
+      return 'rounded-lg';
+    case 'xl':
+      return 'rounded-xl';
+    case 'xll':
+      return 'rounded-2xl';
+    case 'full':
+      return 'rounded-full';
+    default:
+      return 'rounded-none';
+  }
+}
+
+export { getRadioSize };

package/src/helpers/sizes.ts

@@ -1,26 +1,79 @@
-export type IconsSizes = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge' | '3xlarge'
-export type BtnSizes = 'small' | 'medium' | 'large'
-
-export const iconsSizes: Record<IconsSizes, number> = {
-  xsmall: 14,
-  small: 20,
-  medium: 24,
-  large: 28,
-  xlarge: 32,
-  '2xlarge': 36,
-  '3xlarge': 40,
-}
-
-export const btnSizes: Record<BtnSizes, string> = {
-  small: 'small',
-  medium: 'medium',
-  large: 'large',
-}
-
-export function getIconsSizesArray(): IconsSizes[] {
-  return Object.keys(iconsSizes) as IconsSizes[]
-}
-
-export function getBtnSizesArray(): BtnSizes[] {
-  return Object.keys(btnSizes) as BtnSizes[]
-}
+function getSize(size: string) {
+  switch (size) {
+    case "small":
+      return "text-sm";
+    case "medium":
+      return "text-lg";
+    case "large":
+      return "text-xl";
+    default:
+      return "text-base";
+  }
+}
+
+function getBtnSize(size: string) {
+  switch (size) {
+    case "small":
+      return "px-3 py-2 text-xs font-medium";
+    case "medium":
+      return "px-5 py-2.5 text-sm font-medium ";
+    case "large":
+      return "px-6 py-3.5 text-base font-medium font-semibold";
+    default:
+      return "h-10 py-2 px-4 text-lg";
+  }
+}
+
+function getPaddingSize(size: string) {
+  switch (size) {
+    case "small":
+      return "px-4 py-2.5";
+    case "medium":
+      return "px-5 py-2.5";
+    case "large":
+      return "px-6 py-3";
+    default:
+      return "px-5 py-2.5";
+  }
+}
+
+function getHeightSize(size: string) {
+  switch (size) {
+    case "small":
+      return "h-6";
+    case "medium":
+      return "h-10";
+    case "large":
+      return "10";
+    default:
+      return "h-12";
+  }
+}
+
+function getIconSize(size: string) {
+  switch (size) {
+    case "small":
+      return "px-1.5 py-0 h-6 w-6";
+    case "medium":
+      return "px-1.5 py-0 h-8 w-8";
+    case "large":
+      return "px-1.5 py-0 h-10 w-10";
+    default:
+      return "px-1.5 py-0 h-8 w-8";
+  }
+}
+
+const sizes = {
+  small: "small",
+  medium: "medium",
+  large: "large",
+};
+
+export {
+  sizes,
+  getBtnSize,
+  getSize,
+  getPaddingSize,
+  getHeightSize,
+  getIconSize,
+};

package/src/index.css

@@ -0,0 +1,2 @@
+@import "styles/globals.css";
+@import "styles/custom.css";

package/src/index.ts

@@ -0,0 +1,36 @@
+import { Accordion } from "./components/Accordion";
+import { Button } from "./components/Button";
+import { Card } from "./components/Card";
+import { CheckBox } from "./components/CheckBox";
+import { IconButton } from "./components/IconButton";
+import { Icons } from "./components/Icons";
+import { Modal } from "./components/Modal";
+import { Paper } from "./components/Paper";
+import { ProgressBar } from "./components/ProgressBar";
+import { RadioGroup } from "./components/RadioGroup";
+import { RangerSlider } from "./components/RangerSlider";
+import { Select } from "./components/Select";
+import { Tabs } from "./components/Tabs";
+import { Tag } from "./components/Tag";
+import { TextField } from "./components/TextField";
+import { themes, getPalette } from "./helpers";
+
+export {
+  Accordion,
+  Button,
+  Card,
+  CheckBox,
+  getPalette,
+  IconButton,
+  Icons,
+  Modal,
+  Paper,
+  ProgressBar,
+  RadioGroup,
+  RangerSlider,
+  Select,
+  Tabs,
+  Tag,
+  TextField,
+  themes,
+};

package/src/interfaces/Accordion.ts

@@ -0,0 +1,12 @@
+import { SxProps } from "@mui/material";
+import { Theme } from "@emotion/react";
+import { DataAccordion, MuiAccordionBaseProps } from "../types";
+
+export interface AccordionBaseProps extends MuiAccordionBaseProps {
+  label?: React.ReactNode | String;
+  sx?: SxProps<Theme>;
+  onChange?: (event: React.SyntheticEvent, expanded: boolean) => void;
+  defaultExpanded?: boolean | string;
+  expanded?: boolean;
+  data?: DataAccordion[];
+}

package/src/interfaces/Button.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from "react";
+import { Theme } from "@emotion/react";
+
+import {
+  ButtonPropsColorOverrides,
+  ButtonPropsSizeOverrides,
+  ButtonPropsVariantOverrides,
+  SxProps,
+} from "@mui/material";
+
+import { OverridableStringUnion } from "@mui/types";
+import {
+  ColorVariant,
+  ButtonVariant,
+  SizeVariant,
+  MuiButtonBaseProps,
+} from "../types";
+
+export interface ButtonBaseProps extends MuiButtonBaseProps {
+  label?: string;
+  sx?: SxProps<Theme>;
+  children?: ReactNode;
+  fullWidth?: boolean;
+  color?: OverridableStringUnion<ColorVariant, ButtonPropsColorOverrides>;
+  size?: OverridableStringUnion<SizeVariant, ButtonPropsSizeOverrides>;
+  variant?: OverridableStringUnion<ButtonVariant, ButtonPropsVariantOverrides>;
+}

package/src/interfaces/Card.ts

@@ -0,0 +1,11 @@
+import { SxProps } from "@mui/material";
+import { Theme } from "@emotion/react";
+import { ColorVariant, MuiCardBaseProps } from "../types";
+
+export interface CardBaseProps extends MuiCardBaseProps {
+  sx?: SxProps<Theme>;
+  raised?: boolean;
+  border?: boolean;
+  color?: ColorVariant;
+  children?: React.ReactNode;
+}

package/src/interfaces/CheckBox.ts

@@ -0,0 +1,33 @@
+import { OverridableStringUnion } from "@mui/types";
+import { Checkbox, SxProps, Theme } from "@mui/material";
+import { SwitchBaseProps } from "@mui/material/internal/SwitchBase";
+import {
+  CheckBoxColorVariant,
+  CheckboxPropsColorOverrides,
+  CheckboxPropsSizeOverrides,
+  MuiCheckBoxBaseProps,
+  TextFieldSizeVariant,
+} from "../types";
+
+export interface CheckBoxBaseProps extends MuiCheckBoxBaseProps {
+  sx?: SxProps<Theme>;
+  name?: string;
+  label?: string;
+  checked?: SwitchBaseProps["checked"];
+  color?: OverridableStringUnion<
+    CheckBoxColorVariant,
+    CheckboxPropsColorOverrides
+  >;
+  disabled?: SwitchBaseProps["disabled"];
+  id?: SwitchBaseProps["id"];
+  onChange?: SwitchBaseProps["onChange"];
+  required?: SwitchBaseProps["required"];
+  size?: OverridableStringUnion<
+    TextFieldSizeVariant,
+    CheckboxPropsSizeOverrides
+  >;
+  value?: SwitchBaseProps["value"];
+  defaultChecked?: boolean;
+}
+
+export type CheckboxType = keyof typeof Checkbox;

package/src/interfaces/DropDown.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+import { Theme } from "@emotion/react";
+
+import { SxProps } from "@mui/material";
+
+import { DropVariant, MuiDropDownBaseProps } from "../types";
+
+export interface DropDownBaseProps extends MuiDropDownBaseProps {
+  sx?: SxProps<Theme>;
+  open: boolean;
+  onClose?: React.ReactEventHandler<{}>;
+  children?: ReactNode;
+  variant?: DropVariant;
+}

package/src/interfaces/IconButton.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from "react";
+import { Theme } from "@emotion/react";
+
+import {
+  ButtonPropsColorOverrides,
+  ButtonPropsSizeOverrides,
+  ButtonPropsVariantOverrides,
+  SxProps,
+} from "@mui/material";
+
+import { OverridableStringUnion } from "@mui/types";
+import {
+  ColorVariant,
+  ButtonVariant,
+  SizeVariant,
+  MuiIconButtonBaseProps,
+} from "../types";
+
+export interface IconButtonBaseProps extends MuiIconButtonBaseProps {
+  sx?: SxProps<Theme>;
+  children?: ReactNode;
+  circle?: boolean;
+  cursor?: string;
+  color?: OverridableStringUnion<ColorVariant, ButtonPropsColorOverrides>;
+  size?: OverridableStringUnion<SizeVariant, ButtonPropsSizeOverrides>;
+  variant?: OverridableStringUnion<ButtonVariant, ButtonPropsVariantOverrides>;
+}

package/src/interfaces/Icons.ts

@@ -0,0 +1,17 @@
+import { ComponentProps } from "react";
+import { IconScale, IconColors, IconType } from "../types";
+import { Svg } from "../components/Icons";
+
+export interface IconsProps extends ComponentProps<typeof Svg> {
+  useSymbol?: boolean;
+  scale?: IconScale;
+  color?: IconColors;
+  width?: number;
+  height?: number;
+  fill?: string;
+  icon: IconType;
+}
+
+export interface SvgProps {
+  inline?: boolean;
+}

package/src/interfaces/Modal.ts

@@ -0,0 +1,15 @@
+import { SxProps } from "@mui/material";
+import { Theme } from "@emotion/react";
+import { MuiModalBaseProps, OnAction } from "@/types";
+
+export interface ModalBaseProps extends MuiModalBaseProps {
+  sx?: SxProps<Theme>;
+  children: React.ReactElement;
+  open: boolean;
+  onClose?: React.ReactEventHandler<{}>;
+  action?: OnAction[];
+  className?: string;
+  full?: boolean;
+  title?: string;
+  id?: string;
+}

package/src/interfaces/Paper.ts

@@ -0,0 +1,12 @@
+import { PaperPropsVariantOverrides, SxProps } from "@mui/material";
+import { Theme } from "@emotion/react";
+import { MuiPaperBaseProps, PaperVariant } from "../types";
+import { OverridableStringUnion } from "@mui/types";
+
+export interface PaperBaseProps extends MuiPaperBaseProps {
+  sx?: SxProps<Theme>;
+  elevation?: number;
+  square?: boolean;
+  children?: React.ReactNode;
+  variant?: OverridableStringUnion<PaperVariant, PaperPropsVariantOverrides>;
+}

package/src/interfaces/ProgressBar.ts

@@ -0,0 +1,25 @@
+import { SxProps } from "@mui/material";
+import { Theme } from "@emotion/react";
+import { OverridableStringUnion } from "@mui/types";
+import {
+  ColorVariant,
+  MuiProgressBarBaseProps,
+  ProgressVariant,
+} from "../types";
+import { ProgressBar } from "..";
+export interface LinearProgressPropsColorOverrides {}
+
+export interface ProgressBarBaseProps extends MuiProgressBarBaseProps {
+  sx?: SxProps<Theme>;
+  value?: number;
+  total?: number;
+  label?: string;
+  colorCustom?: string;
+  variant?: ProgressVariant;
+  color?: OverridableStringUnion<
+    ColorVariant,
+    LinearProgressPropsColorOverrides
+  >;
+}
+
+export type ProgressBarType = keyof typeof ProgressBar;

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";