Add card-upload-document (#95)

blocks/card-upload-document/src/CardUploadDocument.stories.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import storyDialog from "../../../.storybook/decorators/storyDialog";
+import Usage from "../usage.mdx";
+import CardUploadDocument from "./CardUploadDocument";
+
+const meta = {
+  title: "Card/Upload/Document",
+  component: CardUploadDocument,
+  parameters: {
+    layout: "centered",
+    githubUsername: "bazsup", // (optional) Your github username. If provided, your avatar will be displayed in the story toolbar
+  },
+  decorators: [storyDialog(Usage)],
+} satisfies Meta<typeof CardUploadDocument>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Document: Story = {
+  render: () => (
+    <div 
+      style={{
+        width: 340,
+        padding: 20,
+        maxWidth: "100%",
+        resize: "horizontal",
+        overflow: "auto",
+      }}
+    >
+      <CardUploadDocument />
+    </div>
+  ),
+};
+
+

blocks/card-upload-document/src/CardUploadDocument.tsx

@@ -0,0 +1,90 @@
+import React, { useCallback } from "react";
+import { DropzoneRootProps, useDropzone } from "react-dropzone";
+import { Typography } from "@mui/joy";
+import Box from "@mui/joy/Box";
+import Button from "@mui/joy/Button";
+import Card from "@mui/joy/Card";
+import CardContent from "@mui/joy/CardContent";
+import SvgIcon from "@mui/joy/SvgIcon";
+
+export default function CardUploadDocument() {
+  const onDrop = useCallback((acceptedFiles: File[]) => {
+    // Do something with the files
+    alert(`${acceptedFiles.length} files uploaded.`);
+  }, []);
+  const { getRootProps, isDragActive } = useDropzone({
+    onDrop,
+    noClick: true,
+    noKeyboard: true,
+  });
+
+  return (
+    <Card
+      {...(getRootProps() as Omit<DropzoneRootProps, "color">)}
+      variant="plain"
+      sx={{ minWidth: 300, borderRadius: "xl", boxShadow: "lg" }}
+      size="sm"
+    >
+      <CardContent
+        sx={{
+          border: "1px dashed",
+          borderColor: isDragActive
+            ? "var(--variant-outlinedBorder, var(--joy-palette-neutral-outlinedBorder, var(--joy-palette-neutral-300, #CDD7E1)))"
+            : "transparent",
+          padding: "2rem",
+          textAlign: "center",
+          alignItems: "center",
+          borderRadius: "var(--Card-radius)",
+          gap: "1rem",
+        }}
+      >
+        <div>
+          <Typography level="title-md">Drop document here</Typography>
+          <Typography level="body-sm">or upload it manually</Typography>
+        </div>
+        <Button
+          component="label"
+          role={undefined}
+          tabIndex={-1}
+          sx={{ borderRadius: "xl" }}
+          color="primary"
+          endDecorator={
+            <SvgIcon>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path d="M5 12h14" />
+                <path d="M12 5v14" />
+              </svg>
+            </SvgIcon>
+          }
+        >
+          Upload manually
+          <Box
+            component="input"
+            type="file"
+            sx={{
+              clip: "rect(0 0 0 0)",
+              clipPath: "inset(50%)",
+              height: "1px",
+              overflow: "hidden",
+              position: "absolute",
+              bottom: 0,
+              left: 0,
+              whiteSpace: "nowrap",
+              width: "1px",
+            }}
+          />
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}

blocks/card-upload-document/src/index.ts

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

blocks/card-upload-document/usage.mdx

@@ -0,0 +1,20 @@
+import { Meta, Source } from "@storybook/blocks";
+import raw from "./src/CardUploadDocument?raw";
+
+<Meta title="Card/Upload/Document" />
+
+## Dependencies
+
+This block uses [react-dropzone](https://react-dropzone.js.org/) to implement the drag-and-drop experience.
+
+Make sure to install it in your project in order to use this block:
+
+## CLI
+
+```sh
+npx joy-treasury@latest clone card-upload-document
+```
+
+## CardUploadDocument
+
+<Source code={raw} language="tsx" />

package.json

@@ -41,6 +41,7 @@
     "cosmiconfig": "8.2.0",
     "cpy": "8.1.1",
     "got": "11.8.2",
+    "react-dropzone": "^14.2.3",
     "react-ga4": "2.1.0",
     "rimraf": "3.0.2",
     "tar": "6.1.0",