norma-library 0.4.2 → 0.4.5

package/src/components/Tag.tsx

@@ -0,0 +1,45 @@
+import React, { useMemo } from "react";
+import { Chip as MuiTag, ThemeProvider, useMediaQuery } from "@mui/material";
+import { TagBaseProps } from "../interfaces";
+import { palette, themes } from "../helpers";
+import { styled } from "@mui/material/styles";
+import { ColorVariant } from "@/types";
+
+const colorMap: Record<ColorVariant, string> = {
+  inherit: palette.inherit,
+  primary: palette.primary,
+  secondary: palette.secondary,
+  error: palette.error,
+  warning: palette.warning,
+  info: palette.info,
+  success: palette.success,
+};
+
+const TagStyled = styled(MuiTag)({});
+
+export const Tag = ({
+  label,
+  color = "primary",
+  outlined = false,
+  ...props
+}: TagBaseProps) => {
+  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+  const theme = useMemo(
+    () => (prefersDarkMode ? themes.light : themes.dark),
+    [prefersDarkMode]
+  );
+
+  return (
+    <ThemeProvider theme={theme}>
+      <TagStyled
+        label={label}
+        sx={{
+          color: outlined !== true ? "#FFFF" : colorMap[color],
+          backgroundColor: outlined !== true ? colorMap[color] : "inherit",
+          border: `1px solid ${colorMap[color]}`,
+        }}
+        {...props}
+      />
+    </ThemeProvider>
+  );
+};

package/src/components/TextField.tsx

@@ -0,0 +1,35 @@
+import React, { useMemo } from "react";
+
+import {
+  FormControl,
+  ThemeProvider,
+  useMediaQuery,
+  TextField as MuiTextField,
+} from "@mui/material";
+
+import { TextFieldBaseProps } from "../interfaces";
+import { styled } from "@mui/material/styles";
+import { themes } from "../helpers";
+
+const TextFieldStyled = styled(MuiTextField)({
+  textTransform: "none",
+  color: "currentcolor",
+});
+
+export const TextField: React.FC<TextFieldBaseProps> = ({
+  label,
+  ...props
+}) => {
+  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+  const theme = useMemo(
+    () => (prefersDarkMode ? themes.light : themes.dark),
+    [prefersDarkMode]
+  );
+  return (
+    <ThemeProvider theme={theme}>
+      <FormControl sx={{ width: "100%" }}>
+        <TextFieldStyled {...props} label={label} />
+      </FormControl>
+    </ThemeProvider>
+  );
+};

package/src/components/index.ts

@@ -0,0 +1,16 @@
+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 "./RangerSlider";
+export * from "./Select";
+export * from "./Tabs";
+export * from "./Tag";
+export * from "./TextField";

package/src/helpers/alignments.ts

@@ -0,0 +1,14 @@
+function getAlign(border: string) {
+  switch (border) {
+    case "left":
+      return "text-start justify-items-start";
+    case "center":
+      return "justify-items-center";
+    case "right":
+      return "text-end justify-items-end";
+    default:
+      return "text-center inline-flex";
+  }
+}
+
+export { getAlign };

package/src/helpers/borders.ts

@@ -0,0 +1,18 @@
+function getBorderSize(size: number) {
+  switch (size.toString()) {
+    case "0":
+      return "border-0";
+    case "1":
+      return "border border-[0.05rem]";
+    case "2":
+      return "border border-2";
+    case "4":
+      return "border border-4";
+    case "8":
+      return "border border-8";
+    default:
+      return "border border-2";
+  }
+}
+
+export { getBorderSize };

package/src/helpers/colors.ts

@@ -0,0 +1,173 @@
+import { createTheme } from "@mui/material/styles";
+
+export const getPalette = () => {
+  return {
+    primary: "#FF7F11",
+    primaryLight: "#FFDB9F",
+    primaryMedium: "#FFA84C",
+    primaryDark: "#B74608",
+
+    inherit: "#000000",
+    secondary: "#43BBF2",
+    error: "#D63643",
+    warning: "#FFC300",
+    info: "#71D5F7",
+    success: "#6BC235",
+    white: "#ffffff",
+    black: "#666666",
+    helper: "#5A2A79",
+    secondaryLight: "#D9FCFE",
+    secondaryMedium: "#71D5F7",
+    secondaryDark: "#154F8C",
+    inheritLight: "#A3A3A3",
+    inheritMedium: "#666666",
+    inheritDark: "#292929",
+    whiteLight: "#F5F5F5",
+    whiteMedium: "#E0E0E0",
+    whiteDark: "#CCCCCC",
+    successLight: "#D9F8B0",
+    successMedium: "#B9EC85",
+    successDark: "#247010",
+    errorLight: "#FABEAF",
+    errorMedium: "#F29085",
+    errorDark: "#F29085",
+    warningLight: "#FFF7CC",
+    warningMedium: "#FFE266",
+    warningDark: "#936600",
+    helperLight: "#F3D7F8",
+    helperMedium: "#BF82D6",
+    helperDark: "#250D46",
+  };
+};
+
+export const palette = getPalette();
+
+export const textColors = {
+  inherit: palette.inherit,
+  primary: palette.primary,
+  secondary: palette.secondary,
+  error: palette.error,
+  warning: palette.warning,
+  info: palette.info,
+  success: palette.success,
+  white: palette.white,
+  black: palette.black,
+  helper: palette.helper,
+  primaryLight: palette.primaryLight,
+  primaryMedium: palette.primaryMedium,
+  primaryDark: palette.primaryDark,
+  secondaryLight: palette.secondaryLight,
+  secondaryMedium: palette.secondaryMedium,
+  secondaryDark: palette.secondaryDark,
+  inheritLight: palette.inheritLight,
+  inheritMedium: palette.inheritMedium,
+  inheritDark: palette.inheritDark,
+  whiteLight: palette.whiteLight,
+  whiteMedium: palette.whiteMedium,
+  whiteDark: palette.whiteDark,
+  successLight: palette.successLight,
+  successMedium: palette.successMedium,
+  successDark: palette.successDark,
+  errorLight: palette.errorLight,
+  errorMedium: palette.errorMedium,
+  errorDark: palette.errorDark,
+  warningLight: palette.warningLight,
+  warningMedium: palette.warningMedium,
+  warningDark: palette.warningDark,
+  helperLight: palette.helperLight,
+  helperMedium: palette.helperMedium,
+  helperDark: palette.helperDark,
+};
+
+export const backgroundColors = {
+  inherit: palette.inherit,
+  primary: palette.primary,
+  secondary: palette.secondary,
+  error: palette.error,
+  warning: palette.warning,
+  info: palette.info,
+  success: palette.success,
+  white: palette.white,
+  black: palette.black,
+  primaryLight: palette.primaryLight,
+  primaryMedium: palette.primaryMedium,
+  primaryDark: palette.primaryDark,
+  secondaryLight: palette.secondaryLight,
+  secondaryMedium: palette.secondaryMedium,
+  secondaryDark: palette.secondaryDark,
+  inheritLight: palette.inheritLight,
+  inheritMedium: palette.inheritMedium,
+  inheritDark: palette.inheritDark,
+  whiteLight: palette.whiteLight,
+  whiteMedium: palette.whiteMedium,
+  whiteDark: palette.whiteDark,
+  successLight: palette.successLight,
+  successMedium: palette.successMedium,
+  successDark: palette.successDark,
+  errorLight: palette.errorLight,
+  errorMedium: palette.errorMedium,
+  errorDark: palette.errorDark,
+  warningLight: palette.warningLight,
+  warningMedium: palette.warningMedium,
+  warningDark: palette.warningDark,
+  helperLight: palette.helperLight,
+  helperMedium: palette.helperMedium,
+  helperDark: palette.helperDark,
+};
+
+export const olosPalette = {
+  primary: {
+    main: palette.primary,
+  },
+  secondary: {
+    main: palette.secondary,
+  },
+  error: {
+    main: palette.error,
+  },
+  warning: {
+    main: palette.warning,
+  },
+  info: {
+    main: palette.info,
+  },
+  success: {
+    main: palette.success,
+  },
+};
+
+export const lightTheme = createTheme({
+  palette: {
+    mode: "light",
+    ...olosPalette,
+  },
+});
+
+export const darkTheme = createTheme({
+  palette: {
+    mode: "dark",
+    ...olosPalette,
+    background: {
+      default: palette.inheritLight,
+      paper: palette.inheritDark,
+    },
+  },
+});
+
+export const themes = {
+  light: lightTheme,
+  dark: darkTheme,
+};
+
+type PaletteKey = keyof typeof getPalette;
+
+const getColor = (key: PaletteKey) => {
+  const palette = getPalette();
+  if (palette.hasOwnProperty(key)) {
+    return palette[key];
+  } else {
+    return "#CCC";
+  }
+};
+
+export { getColor };

package/src/helpers/index.ts

@@ -0,0 +1,5 @@
+export * from "./borders";
+export * from "./colors";
+export * from "./sizes";
+export * from "./radios";
+export * from "./alignments";

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

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