norma-library 0.4.8 → 0.5.0

package/src/components/TimePicker.tsx

@@ -1,95 +1,84 @@
-import React, { useMemo } from "react";
-import { ThemeProvider, useMediaQuery } from "@mui/material";
-import { DemoContainer } from "@mui/x-date-pickers/internals/demo";
-import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
-import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
-import { TimePicker as MuiTimePicker } from "@mui/x-date-pickers/TimePicker";
-import { MobileTimePicker as MuiMobileTimePicker } from "@mui/x-date-pickers/MobileTimePicker";
-import { DesktopTimePicker as MuiDesktopTimePicker } from "@mui/x-date-pickers/DesktopTimePicker";
-import { themes } from "../helpers";
-import { styled } from "@mui/material/styles";
-
-import "dayjs/locale/pt-br";
-import "dayjs/locale/en";
-import "dayjs/locale/es";
-
-import dayjs from "dayjs";
-import utc from "dayjs/plugin/utc";
-import timezone from "dayjs/plugin/timezone";
-
-import "dayjs/locale/pt-br";
-import "dayjs/locale/en";
-import "dayjs/locale/es";
-import { TimePickerBaseProps } from "@/interfaces/TimePicker";
-
-dayjs.extend(utc);
-dayjs.extend(timezone);
-
-const MuiTimePickerStyled = styled(MuiTimePicker)({
-  "& .MuiOutlinedInput-notchedOutline": {
-    border: "none",
-    borderRadius: 0,
-    borderBottom: "1px solid #666666",
-  },
-  "& .MuiFormLabel-root": {
-    backgroundColor: "#fff",
-    padding: "0 5px",
-  },
-});
-
-const MuiMobileTimePickerStyled = styled(MuiMobileTimePicker)({
-  "& .MuiOutlinedInput-notchedOutline": {
-    border: "none",
-    borderRadius: 0,
-    borderBottom: "1px solid #666666",
-  },
-  "& .MuiFormLabel-root": {
-    backgroundColor: "#fff",
-    padding: "0 5px",
-  },
-});
-
-const MuiDesktopTimePickerStyled = styled(MuiDesktopTimePicker)({
-  "& .MuiOutlinedInput-notchedOutline": {
-    border: "none",
-    borderRadius: 0,
-    borderBottom: "1px solid #666666",
-  },
-  "& .MuiFormLabel-root": {
-    backgroundColor: "#fff",
-    padding: "0 5px",
-  },
-});
-
-export const TimePicker = ({
-  label,
-  timezone = "America/Sao_Paulo",
-  language = "pt-br",
-  variant = "desktop",
-}: TimePickerBaseProps) => {
-  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
-  const theme = useMemo(
-    () => (prefersDarkMode ? themes.light : themes.dark),
-    [prefersDarkMode]
-  );
-
-  return (
-    <ThemeProvider theme={theme}>
-      <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={language}>
-        <DemoContainer
-          components={["TimePicker", "MobileTimePicker", "DesktopTimePicker"]}
-        >
-          {variant === "responsive" && (
-            <MuiTimePickerStyled label={label} timezone={timezone} />
-          )}
-          {variant === "mobile" && (
-            <MuiMobileTimePickerStyled label={label} timezone={timezone} />
-          )}
-          {variant === "desktop" && (
-            <MuiDesktopTimePickerStyled label={label} timezone={timezone} />
-          )}
-        </DemoContainer>
-      </LocalizationProvider>
-    </ThemeProvider>
-  );
-};
+import React, { useMemo } from 'react';
+import { ThemeProvider, useMediaQuery } from '@mui/material';
+import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { TimePicker as MuiTimePicker } from '@mui/x-date-pickers/TimePicker';
+import { MobileTimePicker as MuiMobileTimePicker } from '@mui/x-date-pickers/MobileTimePicker';
+import { DesktopTimePicker as MuiDesktopTimePicker } from '@mui/x-date-pickers/DesktopTimePicker';
+import { themes } from '../helpers';
+import { styled } from '@mui/material/styles';
+
+import 'dayjs/locale/pt-br';
+import 'dayjs/locale/en';
+import 'dayjs/locale/es';
+
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+
+import 'dayjs/locale/pt-br';
+import 'dayjs/locale/en';
+import 'dayjs/locale/es';
+import { TimePickerBaseProps } from '@/interfaces/TimePicker';
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+const MuiTimePickerStyled = styled(MuiTimePicker)({
+  '& .MuiOutlinedInput-notchedOutline': {
+    border: 'none',
+    borderRadius: 0,
+    borderBottom: '1px solid #666666',
+  },
+  '& .MuiFormLabel-root': {
+    backgroundColor: '#fff',
+    padding: '0 5px',
+  },
+});
+
+const MuiMobileTimePickerStyled = styled(MuiMobileTimePicker)({
+  '& .MuiOutlinedInput-notchedOutline': {
+    border: 'none',
+    borderRadius: 0,
+    borderBottom: '1px solid #666666',
+  },
+  '& .MuiFormLabel-root': {
+    backgroundColor: '#fff',
+    padding: '0 5px',
+  },
+});
+
+const MuiDesktopTimePickerStyled = styled(MuiDesktopTimePicker)({
+  '& .MuiOutlinedInput-notchedOutline': {
+    border: 'none',
+    borderRadius: 0,
+    borderBottom: '1px solid #666666',
+  },
+  '& .MuiFormLabel-root': {
+    backgroundColor: '#fff',
+    padding: '0 5px',
+  },
+});
+
+export const TimePicker = ({
+  label,
+  timezone = 'America/Sao_Paulo',
+  language = 'pt-br',
+  variant = 'desktop',
+}: TimePickerBaseProps) => {
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+  const theme = useMemo(() => (prefersDarkMode ? themes.light : themes.dark), [prefersDarkMode]);
+
+  return (
+    <ThemeProvider theme={theme}>
+      <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={language}>
+        <DemoContainer components={['TimePicker', 'MobileTimePicker', 'DesktopTimePicker']}>
+          {variant === 'responsive' && <MuiTimePickerStyled label={label} timezone={timezone} />}
+          {variant === 'mobile' && <MuiMobileTimePickerStyled label={label} timezone={timezone} />}
+          {variant === 'desktop' && <MuiDesktopTimePickerStyled label={label} timezone={timezone} />}
+        </DemoContainer>
+      </LocalizationProvider>
+    </ThemeProvider>
+  );
+};

package/src/components/index.ts

@@ -1,22 +1,23 @@
-export * from "./Accordion";
-export * from "./Avatar";
-export * from "./Badge";
-export * from "./Button";
-export * from "./Card";
-export * from "./CheckBox";
-export * from "./DatePicker";
-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";
-export * from "./TimeLine";
-export * from "./TimePicker";
-export * from "./ChatMessage";
+export * from './Accordion';
+export * from './Avatar';
+export * from './Badge';
+export * from './Button';
+export * from './Card';
+export * from './ChatMessage';
+export * from './CheckBox';
+export * from './DataGrid';
+export * from './DatePicker';
+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';
+export * from './TimeLine';
+export * from './TimePicker';

package/src/helpers/alignments.ts

@@ -1,13 +1,13 @@
 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";
+    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";
+      return 'text-center inline-flex';
   }
 }
 

package/src/helpers/borders.ts

@@ -1,17 +1,17 @@
 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";
+    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";
+      return 'border border-2';
   }
 }
 

package/src/helpers/colors.ts

@@ -1,42 +1,42 @@
-import { createTheme } from "@mui/material/styles";
+import { createTheme } from '@mui/material/styles';
 
 export const getPalette = () => {
   return {
-    primary: "rgb(219, 102, 25)",
-    primaryLight: "#FFDB9F",
-    primaryMedium: "#FFA84C",
-    primaryDark: "#B74608",
-
-    inherit: "rgb(102, 102, 102)",
-    secondary: "rgb(67, 187, 242)",
-    error: "rgb(214, 54, 67)",
-    warning: "rgb(255, 195, 0)",
-    info: "rgb(113, 213, 247)",
-    success: "rgb(107, 194, 53)",
-    white: "#ffffff",
-    black: "rgb(0, 0, 0)",
-    helper: "rgb(90, 42, 121)",
-    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",
+    primary: 'rgb(219, 102, 25)',
+    primaryLight: '#FFDB9F',
+    primaryMedium: '#FFA84C',
+    primaryDark: '#B74608',
+
+    inherit: 'rgb(102, 102, 102)',
+    secondary: 'rgb(67, 187, 242)',
+    error: 'rgb(214, 54, 67)',
+    warning: 'rgb(255, 195, 0)',
+    info: 'rgb(113, 213, 247)',
+    success: 'rgb(107, 194, 53)',
+    white: '#ffffff',
+    black: 'rgb(0, 0, 0)',
+    helper: 'rgb(90, 42, 121)',
+    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',
   };
 };
 
@@ -138,14 +138,14 @@ export const olosPalette = {
 
 export const lightTheme = createTheme({
   palette: {
-    mode: "light",
+    mode: 'light',
     ...olosPalette,
   },
 });
 
 export const darkTheme = createTheme({
   palette: {
-    mode: "dark",
+    mode: 'dark',
     ...olosPalette,
     background: {
       default: palette.inheritLight,
@@ -166,12 +166,12 @@ const getColor = (key: PaletteKey) => {
   if (palette.hasOwnProperty(key)) {
     return palette[key];
   } else {
-    return "#CCC";
+    return '#CCC';
   }
 };
 
 const extractRGB = (rgbString: string) => {
-  if (typeof rgbString === "string") {
+  if (typeof rgbString === 'string') {
     const match = rgbString.match(/\((\d+), (\d+), (\d+)\)/);
 
     if (match) {
@@ -185,8 +185,8 @@ const extractRGB = (rgbString: string) => {
 };
 
 const lightenRGB = (rgbString: string, amount = 20) => {
-  console.log("RGB ==> ", rgbString);
-  if (typeof rgbString === "string") {
+  console.log('RGB ==> ', rgbString);
+  if (typeof rgbString === 'string') {
     const match = rgbString.match(/\((\d+), (\d+), (\d+)\)/);
 
     if (match) {

package/src/helpers/index.ts

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

package/src/helpers/sizes.ts

@@ -1,79 +1,72 @@
 function getSize(size: string) {
   switch (size) {
-    case "small":
-      return "text-sm";
-    case "medium":
-      return "text-lg";
-    case "large":
-      return "text-xl";
+    case 'small':
+      return 'text-sm';
+    case 'medium':
+      return 'text-lg';
+    case 'large':
+      return 'text-xl';
     default:
-      return "text-base";
+      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";
+    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";
+      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";
+    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";
+      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";
+    case 'small':
+      return 'h-6';
+    case 'medium':
+      return 'h-10';
+    case 'large':
+      return '10';
     default:
-      return "h-12";
+      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";
+    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";
+      return 'px-1.5 py-0 h-8 w-8';
   }
 }
 
 const sizes = {
-  small: "small",
-  medium: "medium",
-  large: "large",
+  small: 'small',
+  medium: 'medium',
+  large: 'large',
 };
 
-export {
-  sizes,
-  getBtnSize,
-  getSize,
-  getPaddingSize,
-  getHeightSize,
-  getIconSize,
-};
+export { sizes, getBtnSize, getSize, getPaddingSize, getHeightSize, getIconSize };

package/src/index.ts

@@ -1,20 +1,20 @@
-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 { DatePicker } from "./components/DatePicker";
-import { themes, getPalette } from "./helpers";
+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 { DatePicker } from './components/DatePicker';
+import { themes, getPalette } from './helpers';
 
 export {
   Accordion,

package/src/interfaces/Accordion.ts

@@ -1,12 +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[];
-}
+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/Avatar.tsx

@@ -1,18 +1,15 @@
-import { ReactNode } from "react";
-import { Theme } from "@emotion/react";
-
-import { AvatarPropsVariantOverrides, SxProps } from "@mui/material";
-
-import { MuiAvatarBaseProps } from "../types";
-import { OverridableStringUnion } from "@mui/types";
-
-export interface AvatarBaseProps extends MuiAvatarBaseProps {
-  sx?: SxProps<Theme>;
-  src?: string;
-  children?: ReactNode;
-  variant?: OverridableStringUnion<
-    "circular" | "rounded" | "square",
-    AvatarPropsVariantOverrides
-  >;
-  sizes?: string;
-}
+import { ReactNode } from 'react';
+import { Theme } from '@emotion/react';
+
+import { AvatarPropsVariantOverrides, SxProps } from '@mui/material';
+
+import { MuiAvatarBaseProps } from '../types';
+import { OverridableStringUnion } from '@mui/types';
+
+export interface AvatarBaseProps extends MuiAvatarBaseProps {
+  sx?: SxProps<Theme>;
+  src?: string;
+  children?: ReactNode;
+  variant?: OverridableStringUnion<'circular' | 'rounded' | 'square', AvatarPropsVariantOverrides>;
+  sizes?: string;
+}