norma-library 0.4.9 → 0.5.0

package/src/components/RadioGroup.tsx

@@ -1,55 +1,47 @@
-import React, { useMemo } from "react";
-import {
-  FormControl,
-  FormControlLabel,
-  FormLabel,
-  Radio as MuiRadio,
-  RadioGroup as MuiRadioGroup,
-  ThemeProvider,
-  useMediaQuery,
-} from "@mui/material";
-
-import { themes } from "../helpers";
-import { styled } from "@mui/material/styles";
-import { RadioBaseProps } from "../interfaces/RadioGroup";
-import { TextFieldSizeVariant } from "../types";
-
-const RadioStyled = styled(MuiRadio)({});
-const sizes: TextFieldSizeVariant[] = ["small", "medium"];
-
-export const RadioGroup = ({ ...props }: RadioBaseProps) => {
-  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
-  const theme = useMemo(
-    () => (prefersDarkMode ? themes.light : themes.dark),
-    [prefersDarkMode]
-  );
-
-  return (
-    <ThemeProvider theme={theme}>
-      <FormControl>
-        <FormLabel id={props.id}>{props.label}</FormLabel>
-        <MuiRadioGroup
-          aria-labelledby={props.id}
-          defaultValue={props.checked}
-          name="radio-buttons-group"
-          row={props.direction === "horizontal" ? true : false}
-        >
-          {props.options &&
-            props.options.map((item, key) => (
-              <FormControlLabel
-                value={item.value}
-                control={
-                  <RadioStyled
-                    color={props.color}
-                    size={item.size ? item.size : sizes[1]}
-                  />
-                }
-                label={item.label}
-                key={key}
-              />
-            ))}
-        </MuiRadioGroup>
-      </FormControl>
-    </ThemeProvider>
-  );
-};
+import React, { useMemo } from 'react';
+import {
+  FormControl,
+  FormControlLabel,
+  FormLabel,
+  Radio as MuiRadio,
+  RadioGroup as MuiRadioGroup,
+  ThemeProvider,
+  useMediaQuery,
+} from '@mui/material';
+
+import { themes } from '../helpers';
+import { styled } from '@mui/material/styles';
+import { RadioBaseProps } from '../interfaces/RadioGroup';
+import { TextFieldSizeVariant } from '../types';
+
+const RadioStyled = styled(MuiRadio)({});
+const sizes: TextFieldSizeVariant[] = ['small', 'medium'];
+
+export const RadioGroup = ({ ...props }: RadioBaseProps) => {
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+  const theme = useMemo(() => (prefersDarkMode ? themes.light : themes.dark), [prefersDarkMode]);
+
+  return (
+    <ThemeProvider theme={theme}>
+      <FormControl>
+        <FormLabel id={props.id}>{props.label}</FormLabel>
+        <MuiRadioGroup
+          aria-labelledby={props.id}
+          defaultValue={props.checked}
+          name="radio-buttons-group"
+          row={props.direction === 'horizontal' ? true : false}
+        >
+          {props.options &&
+            props.options.map((item, key) => (
+              <FormControlLabel
+                value={item.value}
+                control={<RadioStyled color={props.color} size={item.size ? item.size : sizes[1]} />}
+                label={item.label}
+                key={key}
+              />
+            ))}
+        </MuiRadioGroup>
+      </FormControl>
+    </ThemeProvider>
+  );
+};

package/src/components/RangerSlider.tsx

@@ -1,81 +1,70 @@
-import React, { useMemo } from "react";
-import {
-  Slider as MuiSlider,
-  ThemeProvider,
-  useMediaQuery,
-} from "@mui/material";
-import { palette, themes } from "../helpers";
-import { styled } from "@mui/material/styles";
-import { ColorVariant } from "@/types";
-import { RangerSliderBaseProps } from "@/interfaces/RangerSlider";
-
-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 RangerSliderStyled = styled(MuiSlider)(() => ({
-  height: 8,
-  "& .MuiSlider-track": {
-    border: "none",
-  },
-  "& .MuiSlider-thumb": {
-    height: 18,
-    width: 18,
-    backgroundColor: "#FFF",
-    border: `2px solid ${colorMap["primary"]}`,
-    "&:focus, &:hover, &.Mui-active, &.Mui-focusVisible": {
-      boxShadow: "inherit",
-    },
-    "&:before": {
-      width: "8px",
-      height: "8px",
-      position: "absolute",
-      display: "block",
-      background: colorMap["primary"],
-    },
-  },
-  "& .MuiSlider-valueLabel": {
-    fontSize: 12,
-    fontWeight: "normal",
-    top: 40,
-    position: "absolute",
-    backgroundColor: "unset",
-    color: colorMap["primary"],
-    "&:before": {
-      display: "none",
-    },
-    "& *": {
-      background: "transparent",
-      color: "#000",
-    },
-  },
-  "& .MuiSlider-rail": {
-    color: "#F0F2F8 ",
-    opacity: 1,
-    height: 10,
-  },
-}));
-
-export const RangerSlider = ({
-  defaultValue = 50,
-  color = "primary",
-  ...props
-}: RangerSliderBaseProps) => {
-  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
-  const theme = useMemo(
-    () => (prefersDarkMode ? themes.light : themes.dark),
-    [prefersDarkMode]
-  );
-
-  return (
-    <ThemeProvider theme={theme}>
-      <RangerSliderStyled aria-label="Default" color={color} {...props} />
-    </ThemeProvider>
-  );
-};
+import React, { useMemo } from 'react';
+import { Slider as MuiSlider, ThemeProvider, useMediaQuery } from '@mui/material';
+import { palette, themes } from '../helpers';
+import { styled } from '@mui/material/styles';
+import { ColorVariant } from '@/types';
+import { RangerSliderBaseProps } from '@/interfaces/RangerSlider';
+
+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 RangerSliderStyled = styled(MuiSlider)(() => ({
+  height: 8,
+  '& .MuiSlider-track': {
+    border: 'none',
+  },
+  '& .MuiSlider-thumb': {
+    height: 18,
+    width: 18,
+    backgroundColor: '#FFF',
+    border: `2px solid ${colorMap['primary']}`,
+    '&:focus, &:hover, &.Mui-active, &.Mui-focusVisible': {
+      boxShadow: 'inherit',
+    },
+    '&:before': {
+      width: '8px',
+      height: '8px',
+      position: 'absolute',
+      display: 'block',
+      background: colorMap['primary'],
+    },
+  },
+  '& .MuiSlider-valueLabel': {
+    fontSize: 12,
+    fontWeight: 'normal',
+    top: 40,
+    position: 'absolute',
+    backgroundColor: 'unset',
+    color: colorMap['primary'],
+    '&:before': {
+      display: 'none',
+    },
+    '& *': {
+      background: 'transparent',
+      color: '#000',
+    },
+  },
+  '& .MuiSlider-rail': {
+    color: '#F0F2F8 ',
+    opacity: 1,
+    height: 10,
+  },
+}));
+
+export const RangerSlider = ({ defaultValue = 50, color = 'primary', ...props }: RangerSliderBaseProps) => {
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+  const theme = useMemo(() => (prefersDarkMode ? themes.light : themes.dark), [prefersDarkMode]);
+
+  return (
+    <ThemeProvider theme={theme}>
+      <RangerSliderStyled aria-label="Default" color={color} {...props} />
+    </ThemeProvider>
+  );
+};

package/src/components/Select.tsx

@@ -1,98 +1,82 @@
-import React, { useMemo } from "react";
-import {
-  FormControl,
-  InputLabel,
-  ListItemText,
-  MenuItem,
-  Select as MuiSelect,
-  OutlinedInput,
-  ThemeProvider,
-  useMediaQuery,
-} from "@mui/material";
-import { SelectBaseProps } from "../interfaces";
-import { themes } from "../helpers";
-import { styled } from "@mui/material/styles";
-import { CheckBox } from "./CheckBox";
-
-const ITEM_HEIGHT = 48;
-const ITEM_PADDING_TOP = 8;
-const MenuProps = {
-  PaperProps: {
-    style: {
-      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
-      width: 250,
-    },
-  },
-};
-
-const SelectStyled = styled(MuiSelect)(({ multiple, variant }) => ({
-  "& .MuiOutlinedInput-notchedOutline": {
-    border: multiple === true ? "none" : "1px solid #666666 ",
-    borderRadius: multiple === true ? 0 : 4,
-    borderBottom: "1px solid #666666",
-  },
-  "& .MuiFormLabel-root": {
-    backgroundColor: variant === "standard" ? "#fff" : "inherit",
-    padding: variant === "standard" ? "0 5px" : 0,
-  },
-}));
-
-export const Select = ({
-  label,
-  onChange,
-  data = [],
-  value = "",
-  multiple = false,
-  ...props
-}: SelectBaseProps) => {
-  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
-  const theme = useMemo(
-    () => (prefersDarkMode ? themes.light : themes.dark),
-    [prefersDarkMode]
-  );
-
-  return (
-    <ThemeProvider theme={theme}>
-      <FormControl fullWidth>
-        <InputLabel id={props.id}>{label}</InputLabel>
-
-        {multiple ? (
-          <SelectStyled
-            labelId={props.id}
-            id="demo-simple-select"
-            value={value}
-            MenuProps={MenuProps}
-            input={<OutlinedInput label="Tag" />}
-            renderValue={(selected: any) => selected.join(", ")}
-            onChange={onChange}
-            multiple
-            {...props}
-          >
-            {data &&
-              data.map((item, key) => (
-                <MenuItem value={item.value} key={key}>
-                  <CheckBox checked={value.includes(String(item.value))} />
-                  <ListItemText primary={String(item.label)} />
-                </MenuItem>
-              ))}
-          </SelectStyled>
-        ) : (
-          <SelectStyled
-            labelId={props.id}
-            id="demo-simple-select"
-            value={value}
-            onChange={onChange}
-            {...props}
-          >
-            {data &&
-              data.map((item, key) => (
-                <MenuItem value={item.value} key={key}>
-                  <ListItemText primary={String(item.label)} />
-                </MenuItem>
-              ))}
-          </SelectStyled>
-        )}
-      </FormControl>
-    </ThemeProvider>
-  );
-};
+import React, { useMemo } from 'react';
+import {
+  FormControl,
+  InputLabel,
+  ListItemText,
+  MenuItem,
+  Select as MuiSelect,
+  OutlinedInput,
+  ThemeProvider,
+  useMediaQuery,
+} from '@mui/material';
+import { SelectBaseProps } from '../interfaces';
+import { themes } from '../helpers';
+import { styled } from '@mui/material/styles';
+import { CheckBox } from './CheckBox';
+
+const ITEM_HEIGHT = 48;
+const ITEM_PADDING_TOP = 8;
+const MenuProps = {
+  PaperProps: {
+    style: {
+      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+      width: 250,
+    },
+  },
+};
+
+const SelectStyled = styled(MuiSelect)(({ multiple, variant }) => ({
+  '& .MuiOutlinedInput-notchedOutline': {
+    border: multiple === true ? 'none' : '1px solid #666666 ',
+    borderRadius: multiple === true ? 0 : 4,
+    borderBottom: '1px solid #666666',
+  },
+  '& .MuiFormLabel-root': {
+    backgroundColor: variant === 'standard' ? '#fff' : 'inherit',
+    padding: variant === 'standard' ? '0 5px' : 0,
+  },
+}));
+
+export const Select = ({ label, onChange, data = [], value = '', multiple = false, ...props }: SelectBaseProps) => {
+  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
+  const theme = useMemo(() => (prefersDarkMode ? themes.light : themes.dark), [prefersDarkMode]);
+
+  return (
+    <ThemeProvider theme={theme}>
+      <FormControl fullWidth>
+        <InputLabel id={props.id}>{label}</InputLabel>
+
+        {multiple ? (
+          <SelectStyled
+            labelId={props.id}
+            id="demo-simple-select"
+            value={value}
+            MenuProps={MenuProps}
+            input={<OutlinedInput label="Tag" />}
+            renderValue={(selected: any) => selected.join(', ')}
+            onChange={onChange}
+            multiple
+            {...props}
+          >
+            {data &&
+              data.map((item, key) => (
+                <MenuItem value={item.value} key={key}>
+                  <CheckBox checked={value.includes(String(item.value))} />
+                  <ListItemText primary={String(item.label)} />
+                </MenuItem>
+              ))}
+          </SelectStyled>
+        ) : (
+          <SelectStyled labelId={props.id} id="demo-simple-select" value={value} onChange={onChange} {...props}>
+            {data &&
+              data.map((item, key) => (
+                <MenuItem value={item.value} key={key}>
+                  <ListItemText primary={String(item.label)} />
+                </MenuItem>
+              ))}
+          </SelectStyled>
+        )}
+      </FormControl>
+    </ThemeProvider>
+  );
+};