norma-library 0.4.9 → 0.5.1

package/src/components/Tabs.tsx

@@ -1,140 +1,111 @@
-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>
-  );
-};
+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

@@ -1,45 +1,37 @@
-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>
-  );
-};
+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

@@ -1,33 +1,22 @@
-import React, { useMemo } from "react";
+import React, { useMemo } from 'react';
 
-import {
-  FormControl,
-  ThemeProvider,
-  useMediaQuery,
-  TextField as MuiTextField,
-} from "@mui/material";
+import { FormControl, ThemeProvider, useMediaQuery, TextField as MuiTextField } from '@mui/material';
 
-import { TextFieldBaseProps } from "../interfaces";
-import { styled } from "@mui/material/styles";
-import { themes } from "../helpers";
+import { TextFieldBaseProps } from '../interfaces';
+import { styled } from '@mui/material/styles';
+import { themes } from '../helpers';
 
 const TextFieldStyled = styled(MuiTextField)({
-  textTransform: "none",
-  color: "currentcolor",
+  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]
-  );
+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%" }}>
+      <FormControl sx={{ width: '100%' }}>
         <TextFieldStyled {...props} label={label} />
       </FormControl>
     </ThemeProvider>

package/src/components/TimeLine.tsx

@@ -1,103 +1,93 @@
-import React, { useMemo } from "react";
-import { ThemeProvider, useMediaQuery, Typography } from "@mui/material";
-
-import {
-  Timeline as MuiTimeLine,
-  TimelineItem,
-  timelineItemClasses,
-  TimelineSeparator,
-  TimelineConnector,
-  TimelineContent,
-  TimelineDot,
-} from "@mui/lab";
-
-import { TimeLineBaseProps } from "@/interfaces/TimeLine";
-
-import { styled } from "@mui/material/styles";
-import { palette, lightenRGB, themes } from "../helpers";
-import { ColorVariant, DataTimeLine } 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 sampleData: Array<DataTimeLine> = [
-  {
-    title: "imported register",
-    data: "01/04/2023 at 07h00",
-    by: "By IEM",
-  },
-  {
-    title: "80% score applied on register",
-    data: "01/04/2023 at 07h05",
-    by: "By IEM",
-  },
-  {
-    title: "Registers transfered to campaign ID 10",
-    data: "",
-    by: "",
-  },
-];
-
-const TimeLineStyled = styled(MuiTimeLine)({
-  [`& .${timelineItemClasses.root}:before`]: {
-    flex: 0,
-    padding: 0,
-  },
-});
-
-export const TimeLine: React.FC<TimeLineBaseProps> = ({
-  data = sampleData,
-  color = "primary",
-  position = "left",
-  ...props
-}) => {
-  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
-  const theme = useMemo(
-    () => (prefersDarkMode ? themes.light : themes.light),
-    [prefersDarkMode]
-  );
-
-  const renderList = data.map((item, key) => (
-    <TimelineItem key={key}>
-      <TimelineSeparator>
-        <TimelineDot
-          sx={{
-            bgcolor: colorMap[color],
-            p: "6px",
-            border: `4px solid ${lightenRGB(colorMap[color], 50)}`,
-          }}
-        />
-        {key !== data.length - 1 && (
-          <TimelineConnector
-            sx={{ bgcolor: colorMap[color], pt: "55px", pl: "3px" }}
-          />
-        )}
-      </TimelineSeparator>
-      <TimelineContent>
-        {item.title}
-        <Typography sx={{ m: "auto 0" }} variant="body2" color="text.secondary">
-          {item.data}
-        </Typography>
-        <Typography
-          sx={{ m: "auto 0", color: colorMap[color] }}
-          variant="body2"
-        >
-          {item.by}
-        </Typography>
-      </TimelineContent>
-    </TimelineItem>
-  ));
-
-  return (
-    <ThemeProvider theme={theme}>
-      <TimeLineStyled {...props}>{renderList}</TimeLineStyled>
-    </ThemeProvider>
-  );
-};
+import React, { useMemo } from 'react';
+import { ThemeProvider, useMediaQuery, Typography } from '@mui/material';
+
+import {
+  Timeline as MuiTimeLine,
+  TimelineItem,
+  timelineItemClasses,
+  TimelineSeparator,
+  TimelineConnector,
+  TimelineContent,
+  TimelineDot,
+} from '@mui/lab';
+
+import { TimeLineBaseProps } from '@/interfaces/TimeLine';
+
+import { styled } from '@mui/material/styles';
+import { palette, lightenRGB, themes } from '../helpers';
+import { ColorVariant, DataTimeLine } 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 sampleData: Array<DataTimeLine> = [
+  {
+    title: 'imported register',
+    data: '01/04/2023 at 07h00',
+    by: 'By IEM',
+  },
+  {
+    title: '80% score applied on register',
+    data: '01/04/2023 at 07h05',
+    by: 'By IEM',
+  },
+  {
+    title: 'Registers transfered to campaign ID 10',
+    data: '',
+    by: '',
+  },
+];
+
+const TimeLineStyled = styled(MuiTimeLine)({
+  [`& .${timelineItemClasses.root}:before`]: {
+    flex: 0,
+    padding: 0,
+  },
+});
+
+export const TimeLine: React.FC<TimeLineBaseProps> = ({
+  data = sampleData,
+  color = 'primary',
+  position = 'left',
+  ...props
+}) => {
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+  const theme = useMemo(() => (prefersDarkMode ? themes.light : themes.light), [prefersDarkMode]);
+
+  const renderList = data.map((item, key) => (
+    <TimelineItem key={key}>
+      <TimelineSeparator>
+        <TimelineDot
+          sx={{
+            bgcolor: colorMap[color],
+            p: '6px',
+            border: `4px solid ${lightenRGB(colorMap[color], 50)}`,
+          }}
+        />
+        {key !== data.length - 1 && <TimelineConnector sx={{ bgcolor: colorMap[color], pt: '55px', pl: '3px' }} />}
+      </TimelineSeparator>
+      <TimelineContent>
+        {item.title}
+        <Typography sx={{ m: 'auto 0' }} variant="body2" color="text.secondary">
+          {item.data}
+        </Typography>
+        <Typography sx={{ m: 'auto 0', color: colorMap[color] }} variant="body2">
+          {item.by}
+        </Typography>
+      </TimelineContent>
+    </TimelineItem>
+  ));
+
+  return (
+    <ThemeProvider theme={theme}>
+      <TimeLineStyled {...props}>{renderList}</TimeLineStyled>
+    </ThemeProvider>
+  );
+};