File input UI (#111)

.github/workflows/deploy.yml

@@ -47,7 +47,7 @@ jobs:
         id: metadata
         run: echo "::set-output name=commit::$(git rev-parse HEAD)"
       - name: Find Release Comment
-        uses: peter-evans/find-comment@v1
+        uses: peter-evans/find-comment@v3
         id: find_comment
         if: ${{ github.ref != 'refs/heads/main' }}
         with:
@@ -57,7 +57,7 @@ jobs:
           body-includes: "Pre-release"
       - name: Create or update comment
         id: initial-comment
-        uses: peter-evans/create-or-update-comment@v1
+        uses: peter-evans/create-or-update-comment@v4
         if: ${{ github.ref != 'refs/heads/main' }}
         with:
           token: ${{ secrets.BOT_TOKEN }}
@@ -100,7 +100,7 @@ jobs:
           git commit -m "🔨 Publish Styleguide v$new_version [skip ci]"
           git push
       - name: Create or update comment
-        uses: peter-evans/create-or-update-comment@v1
+        uses: peter-evans/create-or-update-comment@v3
         if: ${{ github.ref != 'refs/heads/main' }}
         with:
           token: ${{ secrets.BOT_TOKEN }}

src/file-input/file-input.stories.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { FileInput } from "./file-input";
+
+export default {
+  title: "File Input",
+  argTypes: {
+    error: {
+      defaultValue: "",
+      control: {
+        type: "text",
+      },
+    },
+  },
+};
+
+export const Primary = ({ error }) => {
+  const [selectedFile, setSelectedFile] = React.useState<File | null>(null);
+  return (
+    <FileInput
+      onChange={(file) => setSelectedFile(file)}
+      placeholder="Upload your image"
+      errors={[error]}
+      value={selectedFile}
+    />
+  );
+};

src/file-input/file-input.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import { FileUploadIcon } from "../icons";
+import { Spacer } from "../spacer";
+import { Text } from "../text";
+
+type Props = {
+  placeholder?: string;
+  accept?: string;
+  name?: string;
+  errors?: string[];
+  onChange?: (file: File | null) => void;
+  value?: File | null;
+};
+
+export const FileInput = React.forwardRef<HTMLInputElement, Props>(
+  ({ placeholder, accept, name, errors, onChange, value }: Props, ref) => {
+    const allErrors = errors ?? [];
+    const hasErrors = allErrors.length > 0;
+
+    const inputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (!e.target.files) {
+        onChange?.(null);
+        return;
+      }
+
+      onChange?.(e.target.files[0]);
+    };
+
+    const visibleName = value?.name ?? placeholder;
+
+    return (
+      <div>
+        <label>
+          <div className="border-b border-black pb-2 flex justify-between">
+            <Text color={value?.name ? "black" : "grey-250"} size={2}>
+              {visibleName}
+            </Text>
+            <FileUploadIcon />
+          </div>
+
+          {hasErrors && (
+            <>
+              <Spacer size="thin" />
+              <Text as="p" size="label4" color="error" uppercase>
+                {allErrors.join(", ")}
+              </Text>
+            </>
+          )}
+
+          <input
+            ref={ref}
+            type="file"
+            className="hidden"
+            accept={accept}
+            name={name}
+            onChange={inputChange}
+          />
+        </label>
+      </div>
+    );
+  },
+);

src/file-input/index.tsx

@@ -0,0 +1 @@
+export { FileInput } from "./file-input";

src/icons/file-upload.tsx

@@ -0,0 +1,43 @@
+import React from "react";
+
+export const FileUploadIcon = (props) => (
+  <svg
+    width="32"
+    height="32"
+    viewBox="0 0 32 32"
+    fill="none"
+    role="presentation"
+    {...props}
+  >
+    <line
+      x1="4"
+      y1="29.3018"
+      x2="27.6165"
+      y2="29.3018"
+      stroke="#0E1116"
+      strokeWidth="2"
+    />
+    <line
+      x1="5"
+      y1="30.3018"
+      x2="5"
+      y2="21.3018"
+      stroke="#0E1116"
+      strokeWidth="2"
+    />
+    <line
+      x1="26.6172"
+      y1="30.3018"
+      x2="26.6172"
+      y2="21.305"
+      stroke="#0E1116"
+      strokeWidth="2"
+    />
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M14.7476 6.13585L10.0964 11.3685L8.60156 10.0398L15.0002 2.84129L15.7476 2.00046L16.4951 2.84129L22.8937 10.0398L21.3989 11.3685L16.7476 6.13585L16.7476 22.3018L14.7476 22.3018L14.7476 6.13585Z"
+      fill="#0E1116"
+    />
+  </svg>
+);

src/icons/icons.ts

@@ -1,31 +1,32 @@
 import { ArrowIcon } from "./arrow";
 import { ArrowDownIcon } from "./arrow-down";
+import { CircleIcon } from "./circle";
 import { CloseIcon } from "./close";
+import { DrinkIcon } from "./drink";
+import { EmailIcon } from "./email";
 import { FacebookIcon } from "./facebook";
+import { FileUploadIcon } from "./file-upload";
+import { ForksIcon } from "./forks";
+import { GearIcon } from "./gear";
 import { GithubIcon } from "./github";
 import { HeartIcon } from "./heart";
 import { HotelIcon } from "./hotel";
 import { InstagramIcon } from "./instagram";
 import { LinkedinIcon } from "./linkedin";
 import { LiveIcon } from "./live";
+import { LiveCircleIcon } from "./live-circle";
 import { MastodonIcon } from "./mastodon";
 import { MenuIcon } from "./menu";
 import { MinusIcon } from "./minus";
 import { PlusIcon } from "./plus";
+import { SignOutIcon } from "./signout";
 import { StarIcon } from "./star";
 import { TicketsIcon } from "./tickets";
 import { TShirtIcon } from "./tshirt";
 import { TwitterIcon } from "./twitter";
-import { Icon } from "./types";
+import type { Icon } from "./types";
 import { UserIcon } from "./user";
-import { SignOutIcon } from "./signout";
-import { GearIcon } from "./gear";
-import { EmailIcon } from "./email";
-import { CircleIcon } from "./circle";
 import { WebIcon } from "./web";
-import { DrinkIcon } from "./drink";
-import { ForksIcon } from "./forks";
-import { LiveCircleIcon } from "./live-circle";
 
 export const getIcon = (name: Icon) => {
   switch (name) {
@@ -83,5 +84,7 @@ export const getIcon = (name: Icon) => {
       return ForksIcon;
     case "live-circle":
       return LiveCircleIcon;
+    case "file-upload":
+      return FileUploadIcon;
   }
 };

src/icons/index.ts

@@ -24,3 +24,6 @@ export { WebIcon } from "./web";
 export { ForksIcon } from "./forks";
 export { DrinkIcon } from "./drink";
 export { LiveCircleIcon } from "./live-circle";
+export { FileUploadIcon } from "./file-upload";
+
+export { getIcon } from "./icons";

src/icons/types.ts

@@ -25,4 +25,5 @@ export type Icon =
   | "web"
   | "drink"
   | "forks"
-  | "live-circle";
+  | "live-circle"
+  | "file-upload";

src/index.ts

@@ -63,7 +63,9 @@ export { Checkbox } from "./checkbox";
 export { StyledHTMLText, StyledText } from "./styled-text";
 export { FilterBar } from "./filter-bar";
 export { HeroIllustration } from "./hero-illustration";
+export { FileInput } from "./file-input";
 
 // tailwind config
 export { default as tailwindConfig } from "../tailwind.config";
-export { colors } from './config-parts'
+export { colors } from "./config-parts";
+export { getIcon } from "./icons";