@ebubekirylmaz/link-test 1.0.0

package/src/lib/FormProvider/FormProvider.jsx

@@ -0,0 +1,16 @@
+import { FormProvider as Form } from "react-hook-form";
+import PropTypes from "prop-types";
+
+export default function FormProvider({ children, onSubmit, methods }) {
+  return (
+    <Form {...methods}>
+      <form onSubmit={onSubmit}>{children}</form>
+    </Form>
+  );
+}
+
+FormProvider.propTypes = {
+  children: PropTypes.node,
+  methods: PropTypes.object,
+  onSubmit: PropTypes.func,
+};

package/src/lib/FormProvider/index.js

@@ -0,0 +1 @@
+export { default } from "./FormProvider";

package/src/lib/IconSelector/IconSelector.jsx

@@ -0,0 +1,89 @@
+import { Dialog, Stack } from "@mui/material";
+
+import Avatar from "@mui/material/Avatar";
+import IconButton from "@mui/material/IconButton";
+import Iconify from "../Iconify";
+import Icons from "../lib/Icons";
+import Picker from "@emoji-mart/react";
+import React from "react";
+import SvgColor from "../SvgColor";
+
+export default function IconSelector({
+  handleEmojiSelect,
+  avatar,
+  iconCategories,
+}) {
+  const [emojiDialogOpen, setEmojiDialogOpen] = React.useState(false);
+  const handleEmojiButtonClick = () => {
+    setEmojiDialogOpen(true);
+  };
+  return (
+    <Stack alignContent={"center"} justifyContent={"center"}>
+      <Stack>
+        <IconButton
+          data-cy="avatar-select-button"
+          onClick={handleEmojiButtonClick}
+          sx={{
+            borderStyle: `dashed`,
+            borderColor: "gray",
+            borderWidth: "2px",
+            mx: "auto",
+            width: { xs: 77, md: 140 },
+            height: { xs: 77, md: 140 },
+          }}
+        >
+          <Avatar
+            sx={{
+              display: "flex",
+              alignSelf: "center",
+              mx: "auto",
+              width: { xs: 64, md: 128 },
+              height: { xs: 64, md: 128 },
+              border: `solid 2px ${(theme) => theme.palette.common.white}`,
+            }}
+          >
+            <Stack
+              sx={{
+                "& .svg-color": {
+                  background: (theme) =>
+                    `linear-gradient(135deg, ${theme.palette.primary.light} 0%, ${theme.palette.primary.main} 100%)`,
+                },
+              }}
+            >
+              {avatar ? (
+                <SvgColor
+                  src={`https://api.iconify.design/${avatar}.svg`}
+                  variant="square"
+                  sx={{ width: 82, height: 82 }}
+                />
+              ) : (
+                <Iconify icon={"ic:baseline-plus"} width={82} height={82} />
+              )}
+            </Stack>
+          </Avatar>
+        </IconButton>
+      </Stack>
+      <Dialog
+        data-cy="avatar-selection"
+        open={emojiDialogOpen}
+        onClose={() => setEmojiDialogOpen(false)}
+      >
+        <Picker
+          onEmojiSelect={(emoji) => {
+            handleEmojiSelect(emoji), setEmojiDialogOpen(false);
+          }}
+          custom={Icons}
+          categories={iconCategories}
+          searchPosition={"none"}
+          navPosition="none"
+          emojiButtonSize={90}
+          emojiSize={75}
+          perLine={4}
+          autoFocus="true"
+          previewPosition={"none"}
+          theme={"dark"}
+        />
+      </Dialog>
+    </Stack>
+  );
+}

package/src/lib/Iconify/Iconify.jsx

@@ -0,0 +1,17 @@
+import Box from "@mui/material/Box";
+import { Icon } from "@iconify/react";
+import React from "react";
+import { forwardRef } from "react";
+
+const Iconify = forwardRef(({ icon, width = 20, sx, ...other }, ref) => (
+  <Box
+    ref={ref}
+    component={Icon}
+    className="component-iconify"
+    icon={icon}
+    sx={{ width, height: width, ...sx }}
+    {...other}
+  />
+));
+
+export default Iconify;

package/src/lib/Iconify/index.js

@@ -0,0 +1 @@
+export { default } from "./Iconify";

package/src/lib/Image/Image.jsx

@@ -0,0 +1,116 @@
+import { alpha, useTheme } from "@mui/material/styles";
+
+import Box from "@mui/material/Box";
+import { LazyLoadImage } from "react-lazy-load-image-component";
+import React from "react";
+import { forwardRef } from "react";
+import { getRatio } from "./utils";
+
+const Image = forwardRef(
+  (
+    {
+      ratio,
+      overlay,
+      disabledEffect = false,
+      alt,
+      src,
+      afterLoad,
+      delayTime,
+      threshold,
+      beforeLoad,
+      delayMethod,
+      placeholder,
+      wrapperProps,
+      scrollPosition,
+      effect = "blur",
+      visibleByDefault,
+      wrapperClassName,
+      useIntersectionObserver,
+      sx,
+      ...other
+    },
+    ref
+  ) => {
+    const theme = useTheme();
+
+    const overlayStyles = !!overlay && {
+      "&:before": {
+        content: "''",
+        top: 0,
+        left: 0,
+        width: 1,
+        height: 1,
+        zIndex: 1,
+        position: "absolute",
+        background: overlay || alpha(theme.palette.grey[900], 0.48),
+      },
+    };
+
+    const content = (
+      <Box
+        component={LazyLoadImage}
+        alt={alt}
+        src={src}
+        afterLoad={afterLoad}
+        delayTime={delayTime}
+        threshold={threshold}
+        beforeLoad={beforeLoad}
+        delayMethod={delayMethod}
+        placeholder={placeholder}
+        wrapperProps={wrapperProps}
+        scrollPosition={scrollPosition}
+        visibleByDefault={visibleByDefault}
+        effect={disabledEffect ? undefined : effect}
+        useIntersectionObserver={useIntersectionObserver}
+        wrapperClassName={wrapperClassName || "component-image-wrapper"}
+        placeholderSrc={
+          disabledEffect ? "/assets/transparent.png" : "/assets/placeholder.svg"
+        }
+        sx={{
+          width: 1,
+          height: 1,
+          objectFit: "cover",
+          verticalAlign: "bottom",
+          ...(!!ratio && {
+            top: 0,
+            left: 0,
+            position: "absolute",
+          }),
+        }}
+      />
+    );
+
+    return (
+      <Box
+        ref={ref}
+        component="span"
+        className="component-image"
+        sx={{
+          overflow: "hidden",
+          position: "relative",
+          verticalAlign: "bottom",
+          display: "inline-block",
+          ...(!!ratio && {
+            width: 1,
+          }),
+          "& span.component-image-wrapper": {
+            width: 1,
+            height: 1,
+            verticalAlign: "bottom",
+            backgroundSize: "cover !important",
+            ...(!!ratio && {
+              pt: getRatio(ratio),
+            }),
+          },
+          ...overlayStyles,
+          ...sx,
+        }}
+        {...other}
+      >
+        {content}
+      </Box>
+    );
+  }
+);
+
+export default Image;

package/src/lib/Image/index.js

@@ -0,0 +1 @@
+export { default } from "./Image";

package/src/lib/Image/utils.js

@@ -0,0 +1,15 @@
+// ----------------------------------------------------------------------
+
+export function getRatio(ratio = "1/1") {
+  return {
+    "4/3": "calc(100% / 4 * 3)",
+    "3/4": "calc(100% / 3 * 4)",
+    "6/4": "calc(100% / 6 * 4)",
+    "4/6": "calc(100% / 4 * 6)",
+    "16/9": "calc(100% / 16 * 9)",
+    "9/16": "calc(100% / 9 * 16)",
+    "21/9": "calc(100% / 21 * 9)",
+    "9/21": "calc(100% / 9 * 21)",
+    "1/1": "100%",
+  }[ratio];
+}

package/src/lib/ItemSummary/ItemSummary.jsx

@@ -0,0 +1,77 @@
+import DialogContentText from "@mui/material/DialogContentText";
+import Grid from "@mui/material/Grid";
+import SvgColor from "../SvgColor";
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  Stack,
+  Typography,
+} from "@mui/material";
+
+export default function ItemSummary({ newItem }) {
+  return (
+    <>
+      <DialogContentText sx={{ textAlign: "center", mb: 2 }}>
+        Summary
+      </DialogContentText>
+      <Grid container spacing={1} mb={4}>
+        <Grid
+          item
+          xs={newItem.description ? 4 : 12}
+          sx={{
+            justifyContent: "center",
+            display: "flex",
+          }}
+        >
+          <Card
+            sx={{
+              bgcolor: (theme) => theme.palette.background.paper,
+              boxShadow: (theme) => theme.customShadows.card,
+              alignContent: "center",
+              justifyContent: "center",
+            }}
+          >
+            <CardContent
+              children={
+                <>
+                  <Typography variant="h6" textAlign={"center"} mb={2}>
+                    {newItem.name}
+                  </Typography>
+                  <Stack
+                    sx={{
+                      "& .svg-color": {
+                        background: (theme) =>
+                          `linear-gradient(135deg, ${theme.palette.primary.light} 0%, ${theme.palette.primary.main} 100%)`,
+                      },
+                    }}
+                  >
+                    <SvgColor
+                      src={`https://api.iconify.design/${newItem.icon?.slice(
+                        1,
+                        -1
+                      )}.svg`}
+                      variant="square"
+                      sx={{ width: 82, height: 82 }}
+                    />
+                  </Stack>
+                </>
+              }
+            />
+          </Card>
+        </Grid>
+        {newItem.description && (
+          <Grid item xs={8}>
+            <Card sx={{ minHeight: "100%" }}>
+              <CardHeader title="Description" />
+              <CardContent>
+                <Typography>{newItem.description}</Typography>
+              </CardContent>
+            </Card>
+          </Grid>
+        )}
+      </Grid>
+    </>
+  );
+}

package/src/lib/ItemSummary/ItemsSummary.jsx

@@ -0,0 +1,163 @@
+import SvgColor from "../SvgColor";
+
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  DialogContentText,
+  Divider,
+  Grid,
+  Stack,
+  TextField,
+  Typography,
+} from "@mui/material";
+
+export default function ItemsSummary({ newItems }) {
+  return (
+    <>
+      <DialogContentText sx={{ textAlign: "center", mb: 2 }}>
+        Summary
+      </DialogContentText>
+      <Grid container mb={4}>
+        <Grid
+          item
+          xs={5}
+          sx={{
+            justifyContent: "center",
+            display: "flex",
+          }}
+        >
+          <Stack
+            sx={{
+              height: "100%",
+              justifyContent: "center",
+              alignContent: "center",
+            }}
+          >
+            <Card
+              sx={{
+                bgcolor: (theme) => theme.palette.background.paper,
+                boxShadow: (theme) => theme.customShadows.card,
+                alignContent: "center",
+                justifyContent: "center",
+              }}
+            >
+              <CardHeader
+                title={"Project Summary"}
+                titleTypographyProps={{
+                  variant: "subtitle1",
+                  textAlign: "center",
+                  color: "text.secondary",
+                }}
+              />
+              <CardContent
+                children={
+                  <>
+                    <Typography variant="h6" textAlign={"center"} mb={2}>
+                      {newItems[0].details.name}
+                    </Typography>
+                    <Stack
+                      padding={1}
+                      sx={{
+                        "& .svg-color": {
+                          background: (theme) =>
+                            `linear-gradient(135deg, ${theme.palette.primary.light} 0%, ${theme.palette.primary.main} 100%)`,
+                        },
+                      }}
+                    >
+                      <SvgColor
+                        src={`https://api.iconify.design/${newItems[0].details.icon?.slice(
+                          1,
+                          -1
+                        )}.svg`}
+                        variant="square"
+                        sx={{
+                          width: 82,
+                          height: 82,
+                          alignSelf: "center",
+                          justifySelf: "center",
+                        }}
+                      />
+                    </Stack>
+                  </>
+                }
+              />
+            </Card>
+          </Stack>
+        </Grid>
+        <Grid
+          item
+          xs={2}
+          sx={{
+            display: "flex",
+            alignContent: "center",
+            justifyContent: "center",
+          }}
+        >
+          <Divider orientation="vertical" sx={{ borderStyle: "dashed" }} />
+        </Grid>
+        <Grid item xs={5}>
+          <Stack
+            sx={{
+              height: "100%",
+              justifyContent: "center",
+              alignContent: "center",
+            }}
+          >
+            <Card>
+              <CardHeader
+                title={"Service Summary"}
+                titleTypographyProps={{
+                  variant: "subtitle1",
+                  textAlign: "center",
+                  color: "text.secondary",
+                }}
+              />
+              <CardContent
+                children={
+                  <>
+                    <Typography variant="h6" textAlign={"center"} mb={2}>
+                      {newItems[1].details.name}
+                    </Typography>
+                    <Stack
+                      padding={1}
+                      sx={{
+                        "& .svg-color": {
+                          background: (theme) =>
+                            `linear-gradient(135deg, ${theme.palette.primary.light} 0%, ${theme.palette.primary.main} 100%)`,
+                        },
+                      }}
+                    >
+                      <SvgColor
+                        src={`https://api.iconify.design/${newItems[1].details.icon?.slice(
+                          1,
+                          -1
+                        )}.svg`}
+                        variant="square"
+                        sx={{
+                          width: 82,
+                          height: 82,
+                          alignSelf: "center",
+                          justifySelf: "center",
+                          mb: 2,
+                        }}
+                      />
+                      <TextField
+                        value={newItems[1].details.description}
+                        variant="outlined"
+                        label="Description"
+                        fullWidth={true}
+                        multiline
+                        rows={3}
+                      />
+                    </Stack>
+                  </>
+                }
+              />
+            </Card>
+          </Stack>
+        </Grid>
+      </Grid>
+    </>
+  );
+}

package/src/lib/Label/Label.jsx

@@ -0,0 +1,51 @@
+import Box from "@mui/material/Box";
+import React from "react";
+import { StyledLabel } from "./styles";
+import { forwardRef } from "react";
+import { useTheme } from "@mui/material/styles";
+
+const Label = forwardRef(
+  (
+    {
+      children,
+      color = "default",
+      variant = "soft",
+      startIcon,
+      endIcon,
+      sx,
+      ...other
+    },
+    ref
+  ) => {
+    const theme = useTheme();
+
+    const iconStyles = {
+      width: 16,
+      height: 16,
+      "& svg, img": { width: 1, height: 1, objectFit: "cover" },
+    };
+
+    return (
+      <StyledLabel
+        ref={ref}
+        component="span"
+        ownerState={{ color, variant }}
+        sx={{
+          ...(startIcon && { pl: 0.75 }),
+          ...(endIcon && { pr: 0.75 }),
+          ...sx,
+        }}
+        theme={theme}
+        {...other}
+      >
+        {startIcon && <Box sx={{ mr: 0.75, ...iconStyles }}> {startIcon} </Box>}
+
+        {children}
+
+        {endIcon && <Box sx={{ ml: 0.75, ...iconStyles }}> {endIcon} </Box>}
+      </StyledLabel>
+    );
+  }
+);
+
+export default Label;

package/src/lib/Label/index.js

@@ -0,0 +1 @@
+export { default } from "./label";

package/src/lib/Label/styles.js

@@ -0,0 +1,76 @@
+import { alpha, styled } from "@mui/material/styles";
+
+import Box from "@mui/material/Box";
+
+export const StyledLabel = styled(Box)(({ theme, ownerState }) => {
+  const lightMode = theme.palette.mode === "light";
+
+  const filledVariant = ownerState.variant === "filled";
+
+  const outlinedVariant = ownerState.variant === "outlined";
+
+  const softVariant = ownerState.variant === "soft";
+
+  const defaultStyle = {
+    ...(ownerState.color === "default" && {
+      // FILLED
+      ...(filledVariant && {
+        color: lightMode ? theme.palette.common.white : theme.palette.grey[800],
+        backgroundColor: theme.palette.text.primary,
+      }),
+      // OUTLINED
+      ...(outlinedVariant && {
+        backgroundColor: "transparent",
+        color: theme.palette.text.primary,
+        border: `2px solid ${theme.palette.text.primary}`,
+      }),
+      // SOFT
+      ...(softVariant && {
+        color: theme.palette.text.secondary,
+        backgroundColor: alpha(theme.palette.grey[500], 0.16),
+      }),
+    }),
+  };
+
+  const colorStyle = {
+    ...(ownerState.color !== "default" && {
+      // FILLED
+      ...(filledVariant && {
+        color: theme.palette[ownerState.color].contrastText,
+        backgroundColor: theme.palette[ownerState.color].main,
+      }),
+      // OUTLINED
+      ...(outlinedVariant && {
+        backgroundColor: "transparent",
+        color: theme.palette[ownerState.color].main,
+        border: `2px solid ${theme.palette[ownerState.color].main}`,
+      }),
+      // SOFT
+      ...(softVariant && {
+        color: theme.palette[ownerState.color][lightMode ? "dark" : "light"],
+        backgroundColor: alpha(theme.palette[ownerState.color].main, 0.16),
+      }),
+    }),
+  };
+
+  return {
+    height: 24,
+    minWidth: 24,
+    lineHeight: 0,
+    borderRadius: 6,
+    cursor: "default",
+    alignItems: "center",
+    whiteSpace: "nowrap",
+    display: "inline-flex",
+    justifyContent: "center",
+    textTransform: "capitalize",
+    padding: theme.spacing(0, 0.75),
+    fontSize: theme.typography.pxToRem(12),
+    fontWeight: theme.typography.fontWeightBold,
+    transition: theme.transitions.create("all", {
+      duration: theme.transitions.duration.shorter,
+    }),
+    ...defaultStyle,
+    ...colorStyle,
+  };
+});