norma-library 0.4.3 → 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>
+  );
+};

package/src/components/{icon/norma.tsx → Svgs.tsx}

@@ -1,13 +1,14 @@
-import React from 'react';
+import React from "react";
+
 // Icon paths
-export const normaIcons = {
+export const iconsSVG = {
   menuBar: (
     <>
       <path
         id="menu-bar"
         d="M57.286,7c0,2.209-1.4,4-3.127,4H4.127C2.4,11,1,9.209,1,7S2.4,3,4.127,3H54.159C55.886,3,57.286,4.791,57.286,7Zm0,24c0,2.209-1.4,4-3.127,4H4.127C2.4,35,1,33.209,1,31s1.4-4,3.127-4H54.159C55.886,27,57.286,28.791,57.286,31ZM54.159,59c1.727,0,3.127-1.791,3.127-4s-1.4-4-3.127-4H4.127C2.4,51,1,52.791,1,55s1.4,4,3.127,4Z"
         transform="translate(-1 -3)"
-        fillRule="evenodd"
+        fill-rule="evenodd"
       />
     </>
   ),
@@ -53,9 +54,9 @@ export const normaIcons = {
           transform="translate(1.75 1.75)"
           fill="none"
           stroke="#000"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="5"
         />
         <path
           id="FaceNeutral_1"
@@ -64,9 +65,9 @@ export const normaIcons = {
           transform="translate(12.427 12.427)"
           fill="none"
           stroke="#000"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth="5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="5"
         />
       </g>
     </>
@@ -108,7 +109,7 @@ export const normaIcons = {
           data-name="PieChart 1"
           d="M20.68,1.549a7.725,7.725,0,0,0-7.428,1.81,9.575,9.575,0,0,0-3,7.035V27.831a5.977,5.977,0,0,0,5.977,5.977H33.664a9.575,9.575,0,0,0,7.035-3,7.725,7.725,0,0,0,1.81-7.428A31.52,31.52,0,0,0,20.68,1.549Zm-6.523,8.846A5.671,5.671,0,0,1,15.9,6.236a3.821,3.821,0,0,1,3.734-.924A27.613,27.613,0,0,1,38.746,24.429a3.82,3.82,0,0,1-.924,3.734A5.671,5.671,0,0,1,33.664,29.9H16.227a2.07,2.07,0,0,1-2.07-2.07Z"
           transform="translate(14.442)"
-          fillRule="evenodd"
+          fill-rule="evenodd"
         />
         <path
           id="PieChart_2"
@@ -129,8 +130,8 @@ export const normaIcons = {
           d="M49,7H2"
           fill="none"
           stroke="#000"
-          strokeLinecap="round"
-          strokeWidth="7"
+          stroke-linecap="round"
+          stroke-width="7"
         />
         <path
           id="Sort_2"
@@ -139,8 +140,8 @@ export const normaIcons = {
           transform="translate(4.05 12.588)"
           fill="none"
           stroke="#000"
-          strokeLinecap="round"
-          strokeWidth="7"
+          stroke-linecap="round"
+          stroke-width="7"
         />
         <path
           id="Sort_3"
@@ -149,8 +150,8 @@ export const normaIcons = {
           transform="translate(8.1 25.176)"
           fill="none"
           stroke="#000"
-          strokeLinecap="round"
-          strokeWidth="7"
+          stroke-linecap="round"
+          stroke-width="7"
         />
       </g>
     </>
@@ -231,9 +232,9 @@ export const normaIcons = {
             d="M27.959,6H8.546A5.546,5.546,0,0,0,3,11.546V50.371a5.546,5.546,0,0,0,5.546,5.546H47.371a5.546,5.546,0,0,0,5.546-5.546V30.959"
             transform="translate(-3 -0.117)"
             fill="none"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth="5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="5"
           />
           <path
             id="Edit_1947"
@@ -241,9 +242,9 @@ export const normaIcons = {
             d="M41.118,4.541a5.883,5.883,0,0,1,8.32,8.32L23.093,39.206,12,41.979l2.773-11.093Z"
             transform="translate(4.639 -2.818)"
             fill="none"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth="5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="5"
           />
         </g>
       </g>
@@ -328,9 +329,9 @@ export const normaIcons = {
         d="M6.157,6H48.067a4.657,4.657,0,0,1,4.657,4.657V38.6a4.657,4.657,0,0,1-4.657,4.657H6.157A4.657,4.657,0,0,1,1.5,38.6V10.657A4.657,4.657,0,0,1,6.157,6Z"
         transform="translate(1 -3.5)"
         fill="none"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="5"
       />
       <path
         id="Card_1938"
@@ -338,9 +339,9 @@ export const normaIcons = {
         d="M1.5,15H52.724"
         transform="translate(1 1.47)"
         fill="none"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="5"
       />
     </>
   ),
@@ -354,9 +355,9 @@ export const normaIcons = {
             d="M8.148,10.5H49.332a4.943,4.943,0,0,1,5.148,4.707V38.744a4.943,4.943,0,0,1-5.148,4.707H8.148A4.943,4.943,0,0,1,3,38.744V15.207A4.943,4.943,0,0,1,8.148,10.5Z"
             transform="translate(-3 -1.085)"
             fill="none"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth="5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="5"
           />
           <path
             id="Briefcase_1940"
@@ -364,9 +365,9 @@ export const normaIcons = {
             d="M31.122,46.867V9.207A4.744,4.744,0,0,0,26.341,4.5H16.78A4.744,4.744,0,0,0,12,9.207V46.867"
             transform="translate(4.179 -4.5)"
             fill="none"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth="5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="5"
           />
         </g>
       </g>
@@ -383,9 +384,9 @@ export const normaIcons = {
               d="M53.347,25.863v2.316A25.174,25.174,0,1,1,38.419,5.171"
               transform="translate(-3 -2.991)"
               fill="none"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="5"
             />
             <path
               id="CheckCircle_1936"
@@ -393,9 +394,9 @@ export const normaIcons = {
               d="M49.688,6,21.851,33.865,13.5,25.514"
               transform="translate(0.66 -0.415)"
               fill="none"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth="5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="5"
             />
           </g>
         </g>
@@ -425,9 +426,9 @@ export const normaIcons = {
             d="M13.222,49.667H31.889M22.556,34.111V59m0-24.889A15.556,15.556,0,1,0,7,18.556,15.556,15.556,0,0,0,22.556,34.111Z"
             transform="translate(-7 -3)"
             fill="none"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth="5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="5"
           />
         </g>
       </g>
@@ -446,9 +447,9 @@ export const normaIcons = {
             d="M22.556,27.889A15.556,15.556,0,1,0,38.111,43.444,15.556,15.556,0,0,0,22.556,27.889Zm0,0V3m0,0L35,15.444M22.556,3,10.111,15.444"
             transform="translate(-7 -3)"
             fill="none"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth="5"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="5"
           />
         </g>
       </g>
@@ -470,9 +471,9 @@ export const normaIcons = {
                 d="M4.5,38.111V24.666C4.5,13.529,16.886,4.5,32.165,4.5S59.83,13.529,59.83,24.666V38.111"
                 transform="translate(-4.5 -4.5)"
                 fill="none"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="5"
               />
               <path
                 id="HeadPhone_1880_1931"
@@ -480,9 +481,9 @@ export const normaIcons = {
                 d="M59.83,36.513a6.177,6.177,0,0,1-6.148,6.205H50.608a6.177,6.177,0,0,1-6.148-6.205V27.205A6.177,6.177,0,0,1,50.608,21H59.83Zm-55.33,0a6.177,6.177,0,0,0,6.148,6.205h3.074a6.177,6.177,0,0,0,6.148-6.205V27.205A6.177,6.177,0,0,0,13.722,21H4.5Z"
                 transform="translate(-4.5 12.611)"
                 fill="none"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="5"
               />
             </g>
           </g>
@@ -514,10 +515,8 @@ export const normaIcons = {
         id="olos-cloud"
         d="M35.977,44.991q.308.009.618.009a20.5,20.5,0,0,0,0-41,20.305,20.305,0,0,0-15.914,7.688h-3.1a16.657,16.657,0,0,0,0,33.313H35.42Q35.7,45,35.977,44.991Zm4.977-5.831c5.989-1.97,10.93-7.789,10.93-14.66a15.289,15.289,0,1,0-30.578,0h-5.1a20.543,20.543,0,0,1,1.482-7.687h-.109a11.531,11.531,0,0,0,0,23.063H35.42A27.108,27.108,0,0,0,40.954,39.16Z"
         transform="translate(-1.019 -4)"
-        fillRule="evenodd"
+        fill-rule="evenodd"
       />
     </>
   ),
 } as const;
-
-export type IconKey = keyof typeof normaIcons;