norma-library 0.4.2 → 0.4.5

package/src/components/Paper.tsx

@@ -0,0 +1,22 @@
+import React, { useMemo } from "react";
+import { Paper as MuiPaper, ThemeProvider, useMediaQuery } from "@mui/material";
+import { PaperBaseProps } from "../interfaces";
+import { themes } from "../helpers";
+import { styled } from "@mui/material/styles";
+
+const PaperStyled = styled(MuiPaper)({});
+
+export const Paper = ({ children, ...props }: PaperBaseProps & {}) => {
+  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+
+  const theme = useMemo(
+    () => (prefersDarkMode ? themes.light : themes.dark),
+    [prefersDarkMode]
+  );
+
+  return (
+    <ThemeProvider theme={theme}>
+      <PaperStyled {...props}>{children}</PaperStyled>
+    </ThemeProvider>
+  );
+};

package/src/components/ProgressBar.tsx

@@ -0,0 +1,62 @@
+import React, { useMemo } from "react";
+import {
+  LinearProgress as MuiProgressBar,
+  linearProgressClasses,
+  ThemeProvider,
+  useMediaQuery,
+  Typography,
+} from "@mui/material";
+import { ProgressBarBaseProps } from "../interfaces";
+import { themes } from "../helpers";
+import { styled } from "@mui/material/styles";
+
+const ProgressBarStyled = styled(MuiProgressBar)({
+  width: "100%",
+  height: "10px",
+  borderRadius: "10px",
+  position: "relative",
+  backgroundColor: `&.${linearProgressClasses.determinate} {
+    background-color: #e0e0e0,
+  }`,
+});
+
+export const ProgressBarLabelStyled = styled(Typography)`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+  position: relative;
+  text-align: left;
+  font: normal normal normal 16px/20px Source Sans Pro;
+`;
+
+export const ProgressBar = ({
+  value = 0,
+  label,
+  variant = "determinate",
+  total,
+  ...props
+}: ProgressBarBaseProps) => {
+  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+  const percentage = value && total ? (value / total) * 100 : 0;
+  const theme = useMemo(
+    () => (prefersDarkMode ? themes.light : themes.dark),
+    [prefersDarkMode]
+  );
+
+  return (
+    <ThemeProvider theme={theme}>
+      <div style={{ minWidth: "100px" }}>
+        {label && (
+          <ProgressBarLabelStyled>
+            {label}
+            <span style={{ right: 0 }}>
+              {total} ({percentage.toFixed(2)}%)
+            </span>
+          </ProgressBarLabelStyled>
+        )}
+        <ProgressBarStyled value={value} variant={variant} {...props} />
+      </div>
+    </ThemeProvider>
+  );
+};

package/src/components/RadioGroup.tsx

@@ -0,0 +1,55 @@
+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

@@ -0,0 +1,81 @@
+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

@@ -0,0 +1,98 @@
+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>
+  );
+};