umwd-components 0.1.716 → 0.1.718

package/src/components/common/AmountUpdater.tsx

@@ -1,241 +0,0 @@
-import React, { useEffect, useState } from "react";
-import Box from "@mui/material/Box";
-import IconButton from "@mui/material/IconButton";
-import Typography from "@mui/material/Typography";
-import Stack from "@mui/material/Stack";
-import Badge from "@mui/material/Badge";
-import RemoveCircleIcon from "@mui/icons-material/RemoveCircle";
-import AddCircleIcon from "@mui/icons-material/AddCircle";
-import { styled, useTheme } from "@mui/material/styles";
-import { AmountUpdaterProps } from "../../types/common/AmountUpdater";
-
-export function AmountUpdater({
-  currentValue,
-  totalValue,
-  minNewValue,
-  maxNewValue,
-  color,
-  handleChange,
-  offsetEnd, // offsetEnd is the offset of the end of the slider
-}: AmountUpdaterProps) {
-  const percentage = (100 / totalValue) * currentValue;
-
-  const [newValue, setNewValue] = useState(currentValue);
-
-  const newPercentage = (100 / totalValue) * newValue;
-
-  // is offsetEnd actually in use?
-  const offSetPercentage = offsetEnd ? (100 / totalValue) * offsetEnd * -1 : 0;
-
-  const theme = useTheme();
-
-  const addOne = () => {
-    if (newValue + 1 <= maxNewValue) {
-      setNewValue(newValue + 1);
-      handleChange(newValue + 1);
-    }
-  };
-
-  const substractOne = () => {
-    if (newValue - 1 >= minNewValue) {
-      setNewValue(newValue - 1);
-      handleChange(newValue - 1);
-    }
-  };
-
-  const addStep = (step: number) => {
-    if (newValue + step <= maxNewValue) {
-      setNewValue(newValue + step);
-      handleChange(newValue + step);
-    }
-  };
-
-  const substractStep = (step: number) => {
-    if (newValue - step >= minNewValue) {
-      setNewValue(newValue - step);
-      handleChange(newValue - step);
-    }
-  };
-
-  useEffect(() => {
-    setNewValue(currentValue);
-  }, [currentValue]);
-
-  const StyledBadge = styled(Badge)(({ theme }) => ({
-    "& .MuiBadge-badge": {
-      backgroundColor: "#fff",
-      fontWeight: "bold",
-      color: "black",
-      mixBlendMode: "lighten",
-      margin: "-1px 0px",
-      padding: "0px 4px",
-    },
-  }));
-
-  const StyledIconButton = styled(IconButton)(({ theme }) => ({
-    "&:hover": {
-      color: theme.palette.primary.main,
-      "& .MuiBadge-badge": {
-        backgroundColor: theme.palette.primary.main,
-      },
-    },
-  }));
-
-  return (
-    <Box
-      sx={[
-        {
-          display: "flex",
-          alignItems: "center",
-          background: `
-          linear-gradient(90deg, ${theme.palette[color].main}55 ${percentage}%, ${theme.palette[color].main}33 ${percentage}%),
-          linear-gradient(90deg, ${theme.palette[color].main}55 ${newPercentage}%, ${theme.palette[color].main}33 ${newPercentage}%)
-          `,
-          width: "100%",
-          borderRadius: "16px",
-          padding: "2px",
-          justifyContent: "space-between",
-        },
-        newValue - totalValue === 1 && {
-          paddingRight: "4px",
-          background: `linear-gradient(-90deg, ${theme.palette[color].main}33 4px, ${theme.palette[color].main}66 4px)`,
-        },
-        newValue - totalValue === 2 && {
-          paddingRight: "8px",
-          background: `linear-gradient(-90deg, ${theme.palette[color].main}33 8px, ${theme.palette[color].main}66 8px)`,
-        },
-        newValue - totalValue === 3 && {
-          paddingRight: "12px",
-          background: `linear-gradient(-90deg, ${theme.palette[color].main}33 12px, ${theme.palette[color].main}66 12px)`,
-        },
-        newValue - totalValue === 4 && {
-          paddingRight: "16px",
-          background: `linear-gradient(-90deg, ${theme.palette[color].main}33 16px, ${theme.palette[color].main}66 16px)`,
-        },
-        newValue - totalValue >= 5 && {
-          paddingRight: "20px",
-          background: `linear-gradient(-90deg, ${theme.palette[color].main}33 20px, ${theme.palette[color].main}66 20px)`,
-        },
-        offsetEnd != undefined &&
-          offsetEnd < 0 && {
-            background: `linear-gradient(-90deg, ${theme.palette.error.main} ${offSetPercentage}%, ${theme.palette[color].main}66 ${offSetPercentage}%)`,
-          },
-      ]}
-    >
-      <Box>
-        {newValue - 100 >= minNewValue && (
-          <StyledIconButton size="small" onClick={(e) => substractStep(100)}>
-            <StyledBadge
-              badgeContent={100}
-              max={100}
-              anchorOrigin={{
-                vertical: "bottom",
-                horizontal: "left",
-              }}
-            >
-              <RemoveCircleIcon />
-            </StyledBadge>
-          </StyledIconButton>
-        )}
-        {newValue - 25 >= minNewValue && (
-          <StyledIconButton size="small" onClick={(e) => substractStep(25)}>
-            <StyledBadge
-              badgeContent={25}
-              anchorOrigin={{
-                vertical: "bottom",
-                horizontal: "left",
-              }}
-            >
-              <RemoveCircleIcon />
-            </StyledBadge>
-          </StyledIconButton>
-        )}
-        {newValue - 10 >= minNewValue && (
-          <StyledIconButton size="small" onClick={(e) => substractStep(10)}>
-            <StyledBadge
-              badgeContent={10}
-              anchorOrigin={{
-                vertical: "bottom",
-                horizontal: "left",
-              }}
-            >
-              <RemoveCircleIcon />
-            </StyledBadge>
-          </StyledIconButton>
-        )}
-        {newValue - 5 >= minNewValue && (
-          <StyledIconButton size="small" onClick={(e) => substractStep(5)}>
-            <StyledBadge
-              badgeContent={5}
-              anchorOrigin={{
-                vertical: "bottom",
-                horizontal: "left",
-              }}
-            >
-              <RemoveCircleIcon />
-            </StyledBadge>
-          </StyledIconButton>
-        )}
-        <StyledIconButton
-          size="small"
-          onClick={() => substractOne()}
-          disabled={newValue - 1 < minNewValue}
-        >
-          <RemoveCircleIcon />
-        </StyledIconButton>
-      </Box>
-      <Stack direction="row" spacing={1}>
-        {currentValue !== totalValue ? (
-          <Typography variant="body2">{`${currentValue} / ${totalValue}`}</Typography>
-        ) : (
-          <Typography variant="body2">{`${currentValue}`}</Typography>
-        )}
-
-        {newValue !== currentValue && (
-          <Typography variant="body2">{`+ (${
-            newValue - currentValue
-          }) = ${newValue}`}</Typography>
-        )}
-      </Stack>
-      <Box>
-        <StyledIconButton
-          size="small"
-          onClick={() => addOne()}
-          disabled={newValue + 1 > maxNewValue}
-        >
-          <AddCircleIcon />
-        </StyledIconButton>
-        {newValue + 5 <= maxNewValue && (
-          <StyledIconButton size="small" onClick={(e) => addStep(5)}>
-            <StyledBadge badgeContent={5}>
-              <AddCircleIcon />
-            </StyledBadge>
-          </StyledIconButton>
-        )}
-        {newValue + 10 <= maxNewValue && (
-          <StyledIconButton size="small" onClick={(e) => addStep(10)}>
-            <StyledBadge badgeContent={10}>
-              <AddCircleIcon />
-            </StyledBadge>
-          </StyledIconButton>
-        )}
-        {newValue + 25 <= maxNewValue && (
-          <StyledIconButton size="small" onClick={(e) => addStep(25)}>
-            <StyledBadge badgeContent={25}>
-              <AddCircleIcon />
-            </StyledBadge>
-          </StyledIconButton>
-        )}
-        {newValue + 100 <= maxNewValue && (
-          <StyledIconButton size="small" onClick={(e) => addStep(100)}>
-            <StyledBadge badgeContent={100} max={100}>
-              <AddCircleIcon />
-            </StyledBadge>
-          </StyledIconButton>
-        )}
-      </Box>
-    </Box>
-  );
-}
-
-export default AmountUpdater;

package/src/components/common/Contacts.tsx

@@ -1,117 +0,0 @@
-import React from "react";
-import Stack from "@mui/material/Stack";
-import TextField from "@mui/material/TextField";
-import Typography from "@mui/material/Typography";
-import Button from "@mui/material/Button";
-import AccountCircleIcon from "@mui/icons-material/AccountCircle";
-import {
-  ContactsDisplayProps,
-  ContactsFieldsProps,
-  ContactType,
-} from "../../types/common/Contact";
-import Autocomplete from "@mui/material/Autocomplete";
-import IconButton from "@mui/material/IconButton";
-import { Delete } from "@mui/icons-material";
-
-export default function Contacts({
-  data,
-}: {
-  readonly data: ContactsDisplayProps;
-}) {
-  const { id, first_name, last_name, email, phone_number, type, onClick } =
-    data;
-
-  return (
-    <Stack>
-      <Stack spacing={2} direction="row">
-        <AccountCircleIcon />
-        <Stack>
-          <Typography>
-            {first_name} {last_name}
-          </Typography>
-          <Typography>{email}</Typography>
-          <Typography>{phone_number}</Typography>
-          <Typography>{type}</Typography>
-          {onClick && (
-            <Button
-              onClick={(e) => {
-                if (id) {
-                  onClick(e, id);
-                }
-              }}
-            >
-              Edit
-            </Button>
-          )}
-        </Stack>
-      </Stack>
-    </Stack>
-  );
-}
-
-export function ContactsFields({
-  data,
-  componentName,
-  componentReference,
-  deleteCallback,
-}: ContactsFieldsProps) {
-  const { id, first_name, last_name, email, phone_number, type } = data || {};
-
-  return (
-    <Stack spacing={1}>
-      <input
-        id={`${componentName}.__component`}
-        type="hidden"
-        name={`${componentName}.__component`}
-        value={componentReference}
-      />
-      {id && (
-        <input
-          id={`${componentName}.id`}
-          type="hidden"
-          name={`${componentName}.id`}
-          value={id}
-        />
-      )}
-      <Stack spacing={1} direction="row">
-        <TextField
-          id="first_name"
-          name={`${componentName}.first_name`}
-          label="First Name"
-          defaultValue={first_name || ""}
-        />
-        {deleteCallback && (
-          <IconButton onClick={deleteCallback}>
-            <Delete />
-          </IconButton>
-        )}
-      </Stack>
-      <TextField
-        id="last_name"
-        name={`${componentName}.last_name`}
-        label="Last Name"
-        defaultValue={last_name || ""}
-      />
-      <TextField
-        id="email"
-        name={`${componentName}.email`}
-        label="E-mail"
-        defaultValue={email || ""}
-      />
-      <TextField
-        id="phone_number"
-        name={`${componentName}.phone_number`}
-        label="Phone Number"
-        defaultValue={phone_number || ""}
-      />
-      <Autocomplete
-        id="type"
-        options={Object.values(ContactType)}
-        defaultValue={type || Object.values(ContactType)[0]}
-        renderInput={(params) => (
-          <TextField {...params} name={`${componentName}.type`} label="Type" />
-        )}
-      />
-    </Stack>
-  );
-}

package/src/components/common/Dimensions.tsx

@@ -1,92 +0,0 @@
-import React from "react";
-import Stack from "@mui/material/Stack";
-import TextField from "@mui/material/TextField";
-import Typography from "@mui/material/Typography";
-import HomeIcon from "@mui/icons-material/Home";
-import {
-  DimensionsProps,
-  DimensionsFieldsProps,
-} from "../../types/common/Dimensions";
-
-export default function Dimensions({
-  data,
-}: {
-  readonly data: DimensionsProps;
-}) {
-  const { id, width_mm, height_mm, depth_mm, weight_gr } = data;
-
-  return (
-    <Stack>
-      <Stack spacing={2} direction="row">
-        <HomeIcon />
-        <Stack>
-          <Typography variant="h6">Dimensions</Typography>
-          <Stack spacing={1} direction="row">
-            <Typography variant="body2">Width (mm): {width_mm}</Typography>
-            <Typography variant="body2">Height (mm): {height_mm}</Typography>
-            <Typography variant="body2">Depth (mm): {depth_mm}</Typography>
-            <Typography variant="body2">Weight (gr): {weight_gr}</Typography>
-          </Stack>
-        </Stack>
-      </Stack>
-    </Stack>
-  );
-}
-
-export function DimensionsFields({
-  data,
-  componentName,
-  componentReference,
-}: DimensionsFieldsProps) {
-  const { id, width_mm, height_mm, depth_mm, weight_gr } = data || {};
-
-  return (
-    <Stack spacing={2} direction="row">
-      <HomeIcon />
-      <Stack spacing={1} sx={{ flex: 1 }}>
-        <input
-          id={``}
-          type="hidden"
-          name={`${componentName}.__component`}
-          value={componentReference}
-        />
-        {id && (
-          <input
-            id={``}
-            type="hidden"
-            name={`${componentName}.id`}
-            value={id}
-          />
-        )}
-        <TextField
-          id="width_mm"
-          type="number"
-          name={`${componentName}.width_mm`}
-          label="Width (mm)"
-          defaultValue={width_mm || ""}
-        ></TextField>
-        <TextField
-          id="height_mm"
-          type="number"
-          name={`${componentName}.height_mm`}
-          label="Height (mm)"
-          defaultValue={height_mm || ""}
-        ></TextField>
-        <TextField
-          id="depth_mm"
-          type="number"
-          name={`${componentName}.depth_mm`}
-          label="Depth (mm)"
-          defaultValue={depth_mm || ""}
-        ></TextField>
-        <TextField
-          id="weight_gr"
-          type="number"
-          name={`${componentName}.weight_gr`}
-          label="Weight (gr)"
-          defaultValue={weight_gr || ""}
-        ></TextField>
-      </Stack>
-    </Stack>
-  );
-}