norma-library 0.4.3 → 0.4.6

package/src/components/Tabs.tsx

@@ -0,0 +1,140 @@
+import React, { useMemo } from "react";
+import {
+  Box,
+  Tabs as MuiTabs,
+  Tab,
+  ThemeProvider,
+  Typography,
+  useMediaQuery,
+} from "@mui/material";
+import { TabPanelProps, TabsBaseProps } 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 TabsStyled = styled(MuiTabs)<{
+  color: ColorVariant;
+}>(({ color }) => ({
+  borderBottom: "1px solid #e8e8e8",
+  "& .Mui-selected": {
+    color: colorMap[color],
+  },
+  "& .MuiTabs-indicator": {
+    backgroundColor: colorMap[color],
+  },
+  "& .MuiButtonBase-root": {
+    textTransform: "none",
+  },
+}));
+
+interface StyledTabProps {
+  label: string;
+  color: ColorVariant;
+}
+
+const TabStyled = styled((props: StyledTabProps) => (
+  <Tab disableRipple {...props} />
+))(({ theme, color }) => ({
+  textTransform: "none",
+  fontWeight: theme.typography.fontWeightRegular,
+  fontSize: theme.typography.pxToRem(15),
+  marginRight: theme.spacing(1),
+  font: "normal normal normal 15px/25px Source Sans Pro",
+  color: "#666666",
+  padding: "5px 15px",
+  top: "5px",
+  minWidth: "60px",
+  "&.Mui-selected": {
+    color: colorMap[color],
+  },
+  "&.Mui-focusVisible": {
+    backgroundColor: "rgba(100, 95, 228, 0.32)",
+  },
+}));
+
+function CustomTabPanel(props: TabPanelProps) {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
+      {value === index && (
+        <Box sx={{ p: 3 }}>
+          <Typography>{children}</Typography>
+        </Box>
+      )}
+    </div>
+  );
+}
+
+function a11yProps(index: number) {
+  return {
+    id: `simple-tab-${index}`,
+    "aria-controls": `simple-tabpanel-${index}`,
+  };
+}
+
+export const Tabs = ({
+  data = [],
+  color = "primary",
+  ...props
+}: TabsBaseProps) => {
+  const [value, setValue] = React.useState(0);
+
+  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+    setValue(newValue);
+    console.log(event);
+  };
+
+  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+  const theme = useMemo(
+    () => (prefersDarkMode ? themes.light : themes.dark),
+    [prefersDarkMode]
+  );
+
+  return (
+    <ThemeProvider theme={theme}>
+      <Box sx={{ width: "100%" }}>
+        <Box sx={{ borderBottom: 1, borderColor: "divider" }}>
+          <TabsStyled
+            value={value}
+            color={color}
+            onChange={handleChange}
+            aria-label="basic tabs example"
+            {...props}
+          >
+            {data &&
+              data.map((item, key) => (
+                <TabStyled
+                  label={item.label}
+                  color={color}
+                  {...a11yProps(key)}
+                />
+              ))}
+          </TabsStyled>
+        </Box>
+        {data &&
+          data.map((item, key) => (
+            <CustomTabPanel value={value} index={key}>
+              {item.children}
+            </CustomTabPanel>
+          ))}
+      </Box>
+    </ThemeProvider>
+  );
+};

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

@@ -1,8 +1,16 @@
-export * from './button';
-export * from './card';
-export * from './checkbox';
-export * from './icon';
-export * from './modal';
-export * from './progress-bar';
-export * from './tag';
-export * from './textfield';
+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

@@ -1,209 +1,173 @@
-import { createTheme } from '@mui/material/styles';
-
-export type IconsColors =
-  | 'inherit'
-  | 'primary'
-  | 'secondary'
-  | 'error'
-  | 'info'
-  | 'success'
-  | 'warning'
-  | 'white'
-  | 'black';
-
-export type BtnColors =
-  | 'inherit'
-  | 'primary'
-  | 'secondary'
-  | 'success'
-  | 'error'
-  | 'info'
-  | 'warning';
-
-export const getPalette = () => {
-  // const storedColor = localStorage.getItem('primaryColor') || '#FF7F11';
-  // const primaryColors = storedColor ? JSON.parse(storedColor) : false;
-
-  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 colors: Record<IconsColors, string> = {
-  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,
-};
-
-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,
-};
-
-export function getIconsColorsArray(): IconsColors[] {
-  return Object.keys(colors) as IconsColors[];
-}
-
-export const getBtnColorsArray: BtnColors[] = [
-  'inherit',
-  'primary',
-  'secondary',
-  'success',
-  'error',
-  'info',
-  'warning',
-];
+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

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