From c121a4b0adab82dcebdb2b07dc5d09c1935dc5e6 Mon Sep 17 00:00:00 2001
From: Sara Vieira <hey@iamsaravieira.com>
Date: Wed, 17 Aug 2022 15:56:56 +0200
Subject: [PATCH] clean up folders

---
 .../panels/asset-manager/asset-info.tsx       | 108 ++++++++++++++++++
 .../panels/asset-manager/thumbnail.tsx        | 108 ++----------------
 packages/prisma-client/src/prisma.ts          |   4 +-
 3 files changed, 121 insertions(+), 99 deletions(-)
 create mode 100644 apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-info.tsx

diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-info.tsx b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-info.tsx
new file mode 100644
index 0000000000..dc89d2ad37
--- /dev/null
+++ b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/asset-info.tsx
@@ -0,0 +1,108 @@
+import {
+  Box,
+  Flex,
+  Grid,
+  IconButton,
+  Text,
+  Separator,
+  Button,
+} from "@webstudio-is/design-system";
+import { Asset } from "@webstudio-is/prisma-client";
+import {
+  getAspectRatio,
+  getHumanReadableFileSize,
+  getStartAndEndOfString,
+} from "./utils";
+import {
+  CloudIcon,
+  AspectRatioIcon,
+  Cross1Icon,
+  SizeIcon,
+  TrashIcon,
+} from "@webstudio-is/icons";
+import { useSubmit } from "@remix-run/react";
+
+type AssetInfoProps = Asset & {
+  closeInfo: () => void;
+  setIsDeleting: (a: boolean) => void;
+};
+
+export const AssetInfo = ({
+  size,
+  width,
+  height,
+  id,
+  name,
+  closeInfo,
+  setIsDeleting,
+}: AssetInfoProps) => {
+  const submit = useSubmit();
+  const deleteAsset = () => {
+    const formData = new FormData();
+    formData.append("assetId", id);
+    formData.append("assetName", name);
+    closeInfo();
+    setIsDeleting(true);
+    submit(formData, { method: "delete" });
+  };
+
+  return (
+    <>
+      <Flex
+        css={{ height: 40, paddingLeft: "$3" }}
+        align="center"
+        justify="between"
+      >
+        <Text size="1" css={{ fontWeight: "bold" }}>
+          Asset Details
+        </Text>
+
+        <IconButton
+          onClick={closeInfo}
+          size="1"
+          css={{ marginRight: "$2" }}
+          aria-label="Close"
+        >
+          <Cross1Icon />
+        </IconButton>
+      </Flex>
+      <Separator />
+      <Box css={{ p: "$2 $3" }}>
+        <Grid columns={2}>
+          <Text size="1">{getStartAndEndOfString(name)}</Text>
+          <Flex align="center" css={{ gap: "$1" }}>
+            <CloudIcon />
+            <Text size="1">{getHumanReadableFileSize(size)}</Text>
+          </Flex>
+        </Grid>
+      </Box>
+      <Box css={{ p: "$2 $3" }}>
+        <Grid columns={2}>
+          <Flex align="center" css={{ gap: "$1" }}>
+            <SizeIcon />
+            <Text size="1">
+              {width} x {height}
+            </Text>
+          </Flex>{" "}
+          <Flex align="center" css={{ gap: "$1" }}>
+            <AspectRatioIcon />
+            <Text size="1">
+              {getAspectRatio(
+                width as unknown as number,
+                height as unknown as number
+              )}
+            </Text>
+          </Flex>
+        </Grid>
+      </Box>
+      <Box css={{ p: "$2 $3" }}>
+        <Button variant="red" size="2" onClick={deleteAsset}>
+          <Flex align="center" css={{ gap: "$1" }}>
+            <TrashIcon />
+            Delete
+          </Flex>
+        </Button>
+      </Box>
+    </>
+  );
+};
diff --git a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/thumbnail.tsx b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/thumbnail.tsx
index df80168c78..4ff7a97a36 100644
--- a/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/thumbnail.tsx
+++ b/apps/designer/app/designer/features/sidebar-left/panels/asset-manager/thumbnail.tsx
@@ -1,32 +1,11 @@
 import { useEffect, useState } from "react";
-import {
-  Box,
-  Button,
-  Flex,
-  IconButton,
-  Text,
-  Tooltip,
-  Separator,
-  Grid,
-} from "@webstudio-is/design-system";
+import { Box, Button, Tooltip } from "@webstudio-is/design-system";
 import placeholderImage from "~/shared/images/image-placeholder.svg";
 import brokenImage from "~/shared/images/broken-image-placeholder.svg";
-import { useSubmit } from "@remix-run/react";
-import { Asset } from "~/designer/features/sidebar-left/types";
 import { UploadingAnimation } from "./uploading-animation";
-import {
-  CloudIcon,
-  AspectRatioIcon,
-  Cross1Icon,
-  GearIcon,
-  SizeIcon,
-  TrashIcon,
-} from "@webstudio-is/icons";
-import {
-  getAspectRatio,
-  getStartAndEndOfString,
-  getHumanReadableFileSize,
-} from "./utils";
+import { GearIcon } from "@webstudio-is/icons";
+import { AssetInfo } from "./asset-info";
+import { Asset } from "@webstudio-is/prisma-client";
 
 const useImageWithFallback = ({ path }: { path: string }) => {
   const [src, setSrc] = useState(placeholderImage);
@@ -41,17 +20,8 @@ const useImageWithFallback = ({ path }: { path: string }) => {
   return src;
 };
 
-export const AssetManagerThumbnail = ({
-  path,
-  alt,
-  status,
-  size,
-  width,
-  height,
-  name,
-  id,
-}: Asset) => {
-  const submit = useSubmit();
+export const AssetManagerThumbnail = (asset: Asset) => {
+  const { path, alt, status, name } = asset;
   const [isDeleting, setIsDeleting] = useState(false);
   const isUploading = status === "uploading";
   const src = useImageWithFallback({ path });
@@ -59,15 +29,6 @@ export const AssetManagerThumbnail = ({
 
   const closeTooltip = () => setTolltipOpen(false);
 
-  const deleteAsset = () => {
-    const formData = new FormData();
-    formData.append("assetId", id);
-    formData.append("assetName", name);
-    closeTooltip();
-    setIsDeleting(true);
-    submit(formData, { method: "delete" });
-  };
-
   return (
     <Box
       title={alt || name}
@@ -102,58 +63,11 @@ export const AssetManagerThumbnail = ({
           onPointerDownOutside={closeTooltip}
           css={{ width: 240, maxWidth: 240 }}
           content={
-            <>
-              <Flex
-                css={{ height: 40, paddingLeft: "$3" }}
-                align="center"
-                justify="between"
-              >
-                <Text size="1" css={{ fontWeight: "bold" }}>
-                  Asset Details
-                </Text>
-
-                <IconButton
-                  onClick={() => setTolltipOpen(false)}
-                  size="1"
-                  css={{ marginRight: "$2" }}
-                  aria-label="Close"
-                >
-                  <Cross1Icon />
-                </IconButton>
-              </Flex>
-              <Separator />
-              <Box css={{ p: "$2 $3" }}>
-                <Grid columns={2}>
-                  <Text size="1">{getStartAndEndOfString(name)}</Text>
-                  <Flex align="center" css={{ gap: "$1" }}>
-                    <CloudIcon />
-                    <Text size="1">{getHumanReadableFileSize(size)}</Text>
-                  </Flex>
-                </Grid>
-              </Box>
-              <Box css={{ p: "$2 $3" }}>
-                <Grid columns={2}>
-                  <Flex align="center" css={{ gap: "$1" }}>
-                    <SizeIcon />
-                    <Text size="1">
-                      {width} x {height}
-                    </Text>
-                  </Flex>{" "}
-                  <Flex align="center" css={{ gap: "$1" }}>
-                    <AspectRatioIcon />
-                    <Text size="1">{getAspectRatio(width, height)}</Text>
-                  </Flex>
-                </Grid>
-              </Box>
-              <Box css={{ p: "$2 $3" }}>
-                <Button variant="red" size="2" onClick={deleteAsset}>
-                  <Flex align="center" css={{ gap: "$1" }}>
-                    <TrashIcon />
-                    Delete
-                  </Flex>
-                </Button>
-              </Box>
-            </>
+            <AssetInfo
+              setIsDeleting={setIsDeleting}
+              closeInfo={() => setTolltipOpen(false)}
+              {...asset}
+            />
           }
         >
           <Button
diff --git a/packages/prisma-client/src/prisma.ts b/packages/prisma-client/src/prisma.ts
index e56bcdb8cf..4d65342615 100644
--- a/packages/prisma-client/src/prisma.ts
+++ b/packages/prisma-client/src/prisma.ts
@@ -1,5 +1,5 @@
 import { PrismaClient, Prisma } from "@prisma/client";
-import { PrismaClientKnownRequestError } from "@prisma/client/runtime";
+import { PrismaClientKnownRequestError, Decimal } from "@prisma/client/runtime";
 
 declare global {
   // allow global `var` declarations
@@ -14,4 +14,4 @@ export const prisma = global.prisma || new PrismaClient();
 
 if (process.env.NODE_ENV !== "production") global.prisma = prisma;
 
-export { Prisma, PrismaClientKnownRequestError };
+export { Prisma, PrismaClientKnownRequestError, Decimal };