norma-library 0.4.9 → 0.5.1

package/src/components/DataGrid/styles/dropdown.module.css

@@ -1,86 +1,86 @@
-.dropdown {
-  position: absolute;
-  min-height: 330px;
-  top: 55px;
-  left: 0;
-  width: 220px;
-  display: flex;
-  background: #fff;
-  z-index: 9;
-  border: 0;
-  box-shadow: 0 0 10px #ccc;
-  padding: 5px 10px;
-  flex-direction: column;
-  text-align: left;
-  justify-content: flex-start;
-}
-
-.dropdown ul ol {
-  margin: 0;
-  padding: 0;
-}
-
-.dropdown li {
-  list-style: none;
-}
-
-.dropdown li button {
-  width: 100%;
-  margin: 4px 0;
-  position: relative;
-  font-weight: 400;
-  font-family: "Source Sans Pro";
-}
-.dropdown li button span {
-  position: absolute;
-  right: 0;
-}
-.dropdown li.search {
-  position: relative;
-  padding: 10px 0;
-}
-
-.dropdown li.search button {
-  position: absolute;
-  top: 13px;
-  right: 5px;
-  width: 18px;
-  height: 18px;
-}
-
-.dropdown li.search button svg {
-  width: 16px;
-  height: 16px;
-}
-
-.boxListDataColumn {
-  background: #f2f2f2;
-  padding: 5px;
-  overflow: auto;
-  width: 100%;
-  height: 120px;
-}
-.boxListDataColumn li {
-  padding: 5px 0;
-
-  height: 20px;
-  line-height: 20px;
-  font: normal normal normal 16px/22px "Source Sans Pro";
-}
-
-.dropdown button.submit {
-  width: 80px;
-  border: 1px solid;
-  border-radius: 3px;
-  margin: 5px 0 0;
-  position: absolute;
-  bottom: 10px;
-  right: 10px;
-  text-align: center !important;
-  padding: 5px 10px;
-  clear: both;
-}
-
-.dropdown .dropDown_numbers {
-  position: relative;
-}
+.dropdown {
+  position: absolute;
+  min-height: 330px;
+  top: 55px;
+  left: 0;
+  width: 220px;
+  display: flex;
+  background: #fff;
+  z-index: 9;
+  border: 0;
+  box-shadow: 0 0 10px #ccc;
+  padding: 5px 10px;
+  flex-direction: column;
+  text-align: left;
+  justify-content: flex-start;
+}
+
+.dropdown ul ol {
+  margin: 0;
+  padding: 0;
+}
+
+.dropdown li {
+  list-style: none;
+}
+
+.dropdown li button {
+  width: 100%;
+  margin: 4px 0;
+  position: relative;
+  font-weight: 400;
+  font-family: "Source Sans Pro";
+}
+.dropdown li button span {
+  position: absolute;
+  right: 0;
+}
+.dropdown li.search {
+  position: relative;
+  padding: 10px 0;
+}
+
+.dropdown li.search button {
+  position: absolute;
+  top: 13px;
+  right: 5px;
+  width: 18px;
+  height: 18px;
+}
+
+.dropdown li.search button svg {
+  width: 16px;
+  height: 16px;
+}
+
+.boxListDataColumn {
+  background: #f2f2f2;
+  padding: 5px;
+  overflow: auto;
+  width: 100%;
+  height: 120px;
+}
+.boxListDataColumn li {
+  padding: 5px 0;
+
+  height: 20px;
+  line-height: 20px;
+  font: normal normal normal 16px/22px "Source Sans Pro";
+}
+
+.dropdown button.submit {
+  width: 80px;
+  border: 1px solid;
+  border-radius: 3px;
+  margin: 5px 0 0;
+  position: absolute;
+  bottom: 10px;
+  right: 10px;
+  text-align: center !important;
+  padding: 5px 10px;
+  clear: both;
+}
+
+.dropdown .dropDown_numbers {
+  position: relative;
+}

package/src/components/DataGrid/styles/number-filter.module.css

@@ -1,16 +1,16 @@
-.boxNumberFilter {
-  position: absolute;
-  height: 190px;
-  top: 0;
-  left: 220px;
-  width: 240px;
-  display: flex;
-  background: #fff;
-  z-index: 9;
-  border: 0;
-  box-shadow: 0 0 10px #ccc;
-  padding: 5px 10px;
-  flex-direction: column;
-  text-align: left;
-  justify-content: flex-start;
-}
+.boxNumberFilter {
+  position: absolute;
+  height: 190px;
+  top: 0;
+  left: 220px;
+  width: 240px;
+  display: flex;
+  background: #fff;
+  z-index: 9;
+  border: 0;
+  box-shadow: 0 0 10px #ccc;
+  padding: 5px 10px;
+  flex-direction: column;
+  text-align: left;
+  justify-content: flex-start;
+}

package/src/components/DataGrid/styles/styles.module.css

@@ -1,107 +1,107 @@
-@import '../../../../styles/global.css';
-
-.tableHeader {
-  display: flex;
-  position: relative;
-}
-
-.tableHeader h3 {
-  padding-top: 24px;
-  padding-bottom: 24px;
-  padding-left: 15px;
-  font: normal normal normal 18px/24px 'Source Sans Pro';
-}
-
-.button {
-  position: absolute;
-  top: 24px;
-  right: 30px;
-  border: 0;
-  background: none;
-  width: 16px;
-  height: 16px;
-  cursor: pointer;
-}
-
-.table {
-  display: table;
-  width: 100%;
-  margin-bottom: 1rem;
-  color: var(--table-color);
-  vertical-align: top;
-  border-color: var(--table-border-color);
-  caption-side: bottom;
-  border-collapse: collapse;
-  text-indent: initial;
-  border-spacing: 2px;
-  text-indent: initial;
-  border-spacing: 2px;
-}
-
-.table > :not(caption) > * > * {
-  padding: 0.5rem 0.5rem;
-  background-color: var(--table-bg);
-  box-shadow: inset 0 0 0 9999px var(--table-accent-bg);
-}
-
-.table > thead {
-  vertical-align: bottom;
-}
-
-.table thead {
-  display: table-header-group;
-}
-
-.table tr {
-  display: table-row;
-  vertical-align: inherit;
-  height: 20px;
-}
-
-.standard tr:nth-child(even),
-.standard-divider tr:nth-child(even) {
-  background: var(--table-striped-bg) 0% 0% no-repeat padding-box;
-}
-
-.standard-divider tr td {
-  border-right: 1px solid --table-bg;
-}
-
-.table th {
-  display: table-cell;
-  vertical-align: inherit;
-  font-weight: bold;
-  border-bottom-width: 1px;
-  position: relative;
-}
-
-.table th button {
-  background: none;
-  border: 0;
-  cursor: pointer;
-  font: normal normal 600 16px/22px 'Source Sans Pro';
-  text-align: left;
-}
-
-.table th img {
-  position: absolute;
-  top: 22px;
-  right: 15px;
-}
-
-.table th,
-.table td {
-  text-align: inherit;
-  text-align: -webkit-match-parent;
-  position: relative;
-}
-
-.table td {
-  font: normal normal normal 16px/22px 'Source Sans Pro';
-}
-
-.table tbody {
-  display: table-row-group;
-  vertical-align: middle;
-  border-color: inherit;
-}
+@import '../../../../styles/global.css';
+
+.tableHeader {
+  display: flex;
+  position: relative;
+}
+
+.tableHeader h3 {
+  padding-top: 24px;
+  padding-bottom: 24px;
+  padding-left: 15px;
+  font: normal normal normal 18px/24px 'Source Sans Pro';
+}
+
+.button {
+  position: absolute;
+  top: 24px;
+  right: 30px;
+  border: 0;
+  background: none;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+
+.table {
+  display: table;
+  width: 100%;
+  margin-bottom: 1rem;
+  color: var(--table-color);
+  vertical-align: top;
+  border-color: var(--table-border-color);
+  caption-side: bottom;
+  border-collapse: collapse;
+  text-indent: initial;
+  border-spacing: 2px;
+  text-indent: initial;
+  border-spacing: 2px;
+}
+
+.table > :not(caption) > * > * {
+  padding: 0.5rem 0.5rem;
+  background-color: var(--table-bg);
+  box-shadow: inset 0 0 0 9999px var(--table-accent-bg);
+}
+
+.table > thead {
+  vertical-align: bottom;
+}
+
+.table thead {
+  display: table-header-group;
+}
+
+.table tr {
+  display: table-row;
+  vertical-align: inherit;
+  height: 20px;
+}
+
+.standard tr:nth-child(even),
+.standard-divider tr:nth-child(even) {
+  background: var(--table-striped-bg) 0% 0% no-repeat padding-box;
+}
+
+.standard-divider tr td {
+  border-right: 1px solid --table-bg;
+}
+
+.table th {
+  display: table-cell;
+  vertical-align: inherit;
+  font-weight: bold;
+  border-bottom-width: 1px;
+  position: relative;
+}
+
+.table th button {
+  background: none;
+  border: 0;
+  cursor: pointer;
+  font: normal normal 600 16px/22px 'Source Sans Pro';
+  text-align: left;
+}
+
+.table th img {
+  position: absolute;
+  top: 22px;
+  right: 15px;
+}
+
+.table th,
+.table td {
+  text-align: inherit;
+  text-align: -webkit-match-parent;
+  position: relative;
+}
+
+.table td {
+  font: normal normal normal 16px/22px 'Source Sans Pro';
+}
+
+.table tbody {
+  display: table-row-group;
+  vertical-align: middle;
+  border-color: inherit;
+}

package/src/components/DatePicker.tsx

@@ -1,84 +1,73 @@
-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 { DatePicker as MuiDatePicker } from "@mui/x-date-pickers/DatePicker";
-import { MobileDatePicker as MuiMobileDatePicker } from "@mui/x-date-pickers/MobileDatePicker";
-import { DesktopDatePicker as MuiDesktopDatePicker } from "@mui/x-date-pickers/DesktopDatePicker";
-import { DatePickerBaseProps } from "../interfaces";
-import { themes } from "../helpers";
-import { styled } from "@mui/material/styles";
-
-import "dayjs/locale/pt-br";
-import "dayjs/locale/en";
-import "dayjs/locale/es";
-
-const MuiDatePickerStyled = styled(MuiDatePicker)({
-  "& .MuiOutlinedInput-notchedOutline": {
-    border: "none",
-    borderRadius: 0,
-    borderBottom: "1px solid #666666",
-  },
-  "& .MuiFormLabel-root": {
-    backgroundColor: "#fff",
-    padding: "0 5px",
-  },
-});
-
-const MuiMobileDatePickerStyled = styled(MuiMobileDatePicker)({
-  "& .MuiOutlinedInput-notchedOutline": {
-    border: "none",
-    borderRadius: 0,
-    borderBottom: "1px solid #666666",
-  },
-  "& .MuiFormLabel-root": {
-    backgroundColor: "#fff",
-    padding: "0 5px",
-  },
-});
-
-const MuiDesktopDatePickerStyled = styled(MuiDesktopDatePicker)({
-  "& .MuiOutlinedInput-notchedOutline": {
-    border: "none",
-    borderRadius: 0,
-    borderBottom: "1px solid #666666",
-  },
-  "& .MuiFormLabel-root": {
-    backgroundColor: "#fff",
-    padding: "0 5px",
-  },
-});
-
-export const DatePicker = ({
-  label,
-  format = "DD/MM/YYYY",
-  language = "pt-br",
-  variant = "desktop",
-}: DatePickerBaseProps) => {
-  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" && (
-            <MuiDatePickerStyled label={label} format={format} />
-          )}
-          {variant === "mobile" && (
-            <MuiMobileDatePickerStyled label={label} format={format} />
-          )}
-          {variant === "desktop" && (
-            <MuiDesktopDatePickerStyled label={label} format={format} />
-          )}
-        </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 { DatePicker as MuiDatePicker } from '@mui/x-date-pickers/DatePicker';
+import { MobileDatePicker as MuiMobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';
+import { DesktopDatePicker as MuiDesktopDatePicker } from '@mui/x-date-pickers/DesktopDatePicker';
+import { DatePickerBaseProps } from '../interfaces';
+import { themes } from '../helpers';
+import { styled } from '@mui/material/styles';
+
+import 'dayjs/locale/pt-br';
+import 'dayjs/locale/en';
+import 'dayjs/locale/es';
+
+const MuiDatePickerStyled = styled(MuiDatePicker)({
+  '& .MuiOutlinedInput-notchedOutline': {
+    border: 'none',
+    borderRadius: 0,
+    borderBottom: '1px solid #666666',
+  },
+  '& .MuiFormLabel-root': {
+    backgroundColor: '#fff',
+    padding: '0 5px',
+  },
+});
+
+const MuiMobileDatePickerStyled = styled(MuiMobileDatePicker)({
+  '& .MuiOutlinedInput-notchedOutline': {
+    border: 'none',
+    borderRadius: 0,
+    borderBottom: '1px solid #666666',
+  },
+  '& .MuiFormLabel-root': {
+    backgroundColor: '#fff',
+    padding: '0 5px',
+  },
+});
+
+const MuiDesktopDatePickerStyled = styled(MuiDesktopDatePicker)({
+  '& .MuiOutlinedInput-notchedOutline': {
+    border: 'none',
+    borderRadius: 0,
+    borderBottom: '1px solid #666666',
+  },
+  '& .MuiFormLabel-root': {
+    backgroundColor: '#fff',
+    padding: '0 5px',
+  },
+});
+
+export const DatePicker = ({
+  label,
+  format = 'DD/MM/YYYY',
+  language = 'pt-br',
+  variant = 'desktop',
+}: DatePickerBaseProps) => {
+  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' && <MuiDatePickerStyled label={label} format={format} />}
+          {variant === 'mobile' && <MuiMobileDatePickerStyled label={label} format={format} />}
+          {variant === 'desktop' && <MuiDesktopDatePickerStyled label={label} format={format} />}
+        </DemoContainer>
+      </LocalizationProvider>
+    </ThemeProvider>
+  );
+};

package/src/components/DropDown.tsx

@@ -1,38 +1,31 @@
-import React, { useMemo } from "react";
-import {
-  Menu as MuiDropDown,
-  ThemeProvider,
-  useMediaQuery,
-} from "@mui/material";
-import { DropDownBaseProps } from "../interfaces";
-import { themes } from "../helpers";
-import { styled } from "@mui/material/styles";
-
-const DropDownStyled = styled(MuiDropDown)({});
-
-export const DropDown = ({ open, children, ...props }: DropDownBaseProps) => {
-  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
-  const theme = useMemo(
-    () => (prefersDarkMode ? themes.light : themes.dark),
-    [prefersDarkMode]
-  );
-
-  return (
-    <ThemeProvider theme={theme}>
-      <>
-        <DropDownStyled
-          open
-          id="basic-menu"
-          anchorEl={props.anchorEl}
-          onClose={props.onClose}
-          MenuListProps={{
-            "aria-labelledby": "basic-button",
-          }}
-          {...props}
-        >
-          {children}
-        </DropDownStyled>
-      </>
-    </ThemeProvider>
-  );
-};
+import React, { useMemo } from 'react';
+import { Menu as MuiDropDown, ThemeProvider, useMediaQuery } from '@mui/material';
+import { DropDownBaseProps } from '../interfaces';
+import { themes } from '../helpers';
+import { styled } from '@mui/material/styles';
+
+const DropDownStyled = styled(MuiDropDown)({});
+
+export const DropDown = ({ open, children, ...props }: DropDownBaseProps) => {
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+  const theme = useMemo(() => (prefersDarkMode ? themes.light : themes.dark), [prefersDarkMode]);
+
+  return (
+    <ThemeProvider theme={theme}>
+      <>
+        <DropDownStyled
+          open
+          id="basic-menu"
+          anchorEl={props.anchorEl}
+          onClose={props.onClose}
+          MenuListProps={{
+            'aria-labelledby': 'basic-button',
+          }}
+          {...props}
+        >
+          {children}
+        </DropDownStyled>
+      </>
+    </ThemeProvider>
+  );
+};