Merge pull request #13 from line/dev

V3

Author: thebestluck

.github/workflows/deploy.yml

@@ -10,7 +10,7 @@ on:
   workflow_dispatch:
 
 permissions:
-  contents: read
+  contents: write
   pages: write
   id-token: write
 
@@ -45,3 +45,31 @@ jobs:
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v2
+
+  # Tagging job
+  tag:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: "0"
+      - name: Read packages.json
+        run: |
+          echo "PACKAGE_JSON=$(jq -c . < package.json)" >> $GITHUB_ENV
+      - name: Generate tag version (headver)
+        run: |
+          VERSION_PREFIX="v"
+          VERSION_HEAD=$(cut -d '.' -f 1 <<< ${{ fromJson(env.PACKAGE_JSON).version }})
+          VERSION_YEAR=$(date +%g)
+          VERSION_WEEK=$(date +%V)
+          VERSION_BUILD=${{github.run_number}}
+          NEW_TAG="${VERSION_PREFIX}${VERSION_HEAD}.${VERSION_YEAR}${VERSION_WEEK}.${VERSION_BUILD}"
+          echo "Generated new tag: $NEW_TAG"
+          echo "NEW_TAG=$NEW_TAG" >> $GITHUB_ENV
+      - name: Push Git Tag
+        run: |
+          git config user.name "GitHub Actions"
+          git config user.email "github-actions@users.noreply.github.com"
+          git tag $NEW_TAG
+          git push origin $NEW_TAG

README.md

@@ -129,6 +129,7 @@ The `app.config.json` should be as below;
 | backgrounds            | Array of images. (Detailed explanation about `Image` is below) |         |
 | inputFields (optional) | Set up an input field group just for this theme                |         |
 | isNew (optional)       | If it's true, new icon shows up next to this theme             | `false` |
+| isHidden (optional)    | If it's true, this theme will be hidden                        | `false` |
 
 ### 🌆 Background Images
 
@@ -171,6 +172,7 @@ The `app.config.json` should be as below;
   | offset                | Adjusting detail position from origin point. (Detailed explanation is below) |         |
   | isRequired (optional) |                                                                              | `false` |
   | text (optional)       | Default value of input                                                       | `""`    |
+  | tooltip (optional)    | Allows you to add a description of the input.                                | `""`    |
 
 - Offset
 
@@ -282,7 +284,7 @@ With above structure, let say you want to override `themes` node for `office` th
           "fields": [
             {
               "label": "name",
-              "fontSize": "medium",
+              "fontSize": "Large",
               "fontStyle": "LINE Seed",
               "offset": {
                 "x": "0%",
@@ -297,7 +299,7 @@ With above structure, let say you want to override `themes` node for `office` th
           "fields": [
             {
               "label": "Team Name",
-              "fontSize": "medium",
+              "fontSize": "Large",
               "fontStyle": "LINE Seed",
               "offset": {
                 "x": "0%",

app.config.json

@@ -11,13 +11,14 @@
     "type": "filesystem",
     "path": "backgrounds"
   },
+  "contributeGuide": "./CONTRIBUTING.md",
   "fonts": {
     "sizes": {
-      "large": "6rem",
-      "medium": "4.5rem",
-      "regular": "3.5rem",
-      "small": "3rem",
-      "caption": "1.5rem"
+      "XLarge": "6rem",
+      "Large": "4.5rem",
+      "Base": "3.5rem",
+      "Small": "3rem",
+      "XSmall": "1.5rem"
     },
     "styles": ["LINE Seed"]
   },
@@ -28,17 +29,18 @@
       "fields": [
         {
           "label": "name",
-          "fontSize": "medium",
+          "fontSize": "Large",
           "fontStyle": "LINE Seed",
           "offset": {
             "x": "0%",
             "y": "0%"
           },
-          "isRequired": true
+          "isRequired": true,
+          "tooltip": "Please enter your name."
         },
         {
           "label": "team",
-          "fontSize": "small",
+          "fontSize": "Small",
           "fontStyle": "LINE Seed",
           "offset": {
             "x": "0%",
@@ -47,7 +49,7 @@
         },
         {
           "label": "role",
-          "fontSize": "small",
+          "fontSize": "Small",
           "fontStyle": "LINE Seed",
           "offset": {
             "x": "0%",
@@ -70,7 +72,7 @@
           "fields": [
             {
               "label": "name",
-              "fontSize": "medium",
+              "fontSize": "Large",
               "fontStyle": "LINE Seed",
               "offset": {
                 "x": "0%",
@@ -80,7 +82,7 @@
             },
             {
               "label": "team",
-              "fontSize": "small",
+              "fontSize": "Small",
               "fontStyle": "LINE Seed",
               "offset": {
                 "x": "0%",
@@ -89,7 +91,7 @@
             },
             {
               "label": "role",
-              "fontSize": "small",
+              "fontSize": "Small",
               "fontStyle": "LINE Seed",
               "offset": {
                 "x": "0%",
@@ -103,7 +105,7 @@
           "fields": [
             {
               "label": "Company",
-              "fontSize": "medium",
+              "fontSize": "Large",
               "fontStyle": "LINE Seed",
               "offset": {
                 "x": "0%",
@@ -124,7 +126,7 @@
           "fields": [
             {
               "label": "name",
-              "fontSize": "medium",
+              "fontSize": "Large",
               "fontStyle": "LINE Seed",
               "offset": {
                 "x": "0%",
@@ -134,7 +136,7 @@
             },
             {
               "label": "role",
-              "fontSize": "small",
+              "fontSize": "Small",
               "fontStyle": "LINE Seed",
               "offset": {
                 "x": "0%",
@@ -148,7 +150,7 @@
           "fields": [
             {
               "label": "Company",
-              "fontSize": "medium",
+              "fontSize": "Large",
               "fontStyle": "LINE Seed",
               "offset": {
                 "x": "0%",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "abc-virtual-background-maker",
   "private": true,
-  "version": "2.1.0",
+  "version": "3.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/App.tsx

@@ -14,7 +14,7 @@
  * under the License.
  */
 import { CSSProperties, useEffect, useRef } from "react";
-import { keyColor, title } from "~/output.config.json";
+import config from "~/output.config.json";
 
 import {
   DownloadButton,
@@ -23,10 +23,13 @@ import {
   SyncButton,
   ThemeMenu,
 } from "@/components";
+import { Config } from "@/constants/config";
 import { AppProvider, useMediaQuery, useSnapshot, useTitle } from "@/hooks";
+import locales from "@/locales/en-US.json";
 import styles from "./App.module.scss";
 
 function App() {
+  const { keyColor, title } = config as unknown as Config;
   const imageAreaRef = useRef<HTMLDivElement>(null);
   const { saveImage, loading } = useSnapshot(imageAreaRef);
   const { logo, text } = title;
@@ -62,7 +65,7 @@ function App() {
         <div className={styles.content}>
           <nav className={styles.navigation}>
             <h2>
-              Select Theme <SyncButton />
+              {locales["title"]["theme"]} <SyncButton />
             </h2>
             <div>
               <ThemeMenu />

src/components/Alert/Alert.module.scss

@@ -0,0 +1,103 @@
+/**
+ * Copyright 2023 LINE Corporation
+ *
+ * LINE Corporation licenses this file to you under the Apache License,
+ * version 2.0 (the "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at:
+ *
+ *   https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+
+.dim {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background-color: var(--background-dim);
+  animation: fade-in 0.3s cubic-bezier(0.17, 0.55, 0.55, 1);
+}
+
+.modal {
+  padding: 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  max-width: min(45rem, calc(100vw - 3rem));
+  background-color: var(--background-tertiary);
+  white-space: pre-line;
+  text-align: center;
+  border-radius: 0.5rem;
+  animation:
+    fade-in 0.3s cubic-bezier(0.17, 0.55, 0.55, 1),
+    scale-up 0.3s cubic-bezier(0.17, 0.55, 0.55, 1);
+
+  :global {
+    .material-symbols-outlined {
+      margin-bottom: 0.5rem;
+      color: var(--red-primary);
+      font-size: 2rem;
+      font-variation-settings:
+        "FILL" 1,
+        "wght" 400,
+        "GRAD" 0,
+        "opsz" 24;
+    }
+  }
+
+  strong {
+    @include font("16", "label-primary");
+
+    font-weight: bold;
+  }
+
+  p {
+    @include font("14", "label-secondary");
+
+    margin-top: 0.5rem;
+  }
+}
+
+.button {
+  @include font("16", "label-above-primary");
+
+  margin-top: 1rem;
+  width: 100%;
+  height: 3rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--red-primary);
+  border-radius: 0.5rem;
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes scale-up {
+  from {
+    transform: scale(0.85);
+  }
+
+  to {
+    transform: scale(1);
+  }
+}

src/components/Alert/Alert.tsx

@@ -0,0 +1,87 @@
+/**
+ * Copyright 2023 LINE Corporation
+ *
+ * LINE Corporation licenses this file to you under the Apache License,
+ * version 2.0 (the "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at:
+ *
+ *   https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+
+import type {
+  ButtonHTMLAttributes,
+  KeyboardEvent,
+  PropsWithChildren,
+} from "react";
+import { useCallback, useEffect, useRef } from "react";
+import ReactDOM from "react-dom";
+
+import styles from "./Alert.module.scss";
+
+interface Props extends PropsWithChildren {
+  onClose: VoidFunction;
+}
+
+const Alert = (props: Props) => {
+  const { onClose, children } = props;
+
+  const dialogRoot = document.getElementsByTagName("body")[0];
+  const dialogRef = useRef<HTMLDivElement>(document.createElement("div"));
+  const dialogRefCurrent = dialogRef.current;
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === "Escape") {
+        onClose();
+      }
+    },
+    [onClose],
+  );
+
+  useEffect(() => {
+    if (dialogRefCurrent && dialogRoot) {
+      dialogRoot.appendChild(dialogRefCurrent);
+
+      return () => {
+        dialogRoot.removeChild(dialogRefCurrent);
+      };
+    }
+  }, [dialogRefCurrent, dialogRoot]);
+
+  return ReactDOM.createPortal(
+    <div
+      className={styles.dim}
+      onClick={onClose}
+      onKeyDown={handleKeyDown}
+      role="presentation"
+    >
+      <div
+        className={styles.modal}
+        role="dialog"
+        onClick={(e) => e.stopPropagation()}
+        onKeyDown={handleKeyDown}
+      >
+        <span className="material-symbols-outlined">error</span>
+        {children}
+      </div>
+    </div>,
+    dialogRefCurrent,
+  );
+};
+
+export default Alert;
+
+export const AlertButton = ({
+  onClick,
+  children,
+}: ButtonHTMLAttributes<HTMLButtonElement>) => (
+  <button className={styles.button} onClick={onClick}>
+    {children}
+  </button>
+);

src/components/Alert/index.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright 2023 LINE Corporation
+ *
+ * LINE Corporation licenses this file to you under the Apache License,
+ * version 2.0 (the "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at:
+ *
+ *   https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+
+export { default as Alert, AlertButton } from "./Alert";

src/components/DownloadButton/DownloadButton.tsx

@@ -16,6 +16,7 @@
 import { ButtonHTMLAttributes } from "react";
 
 import { Loading } from "@/components";
+import locales from "@/locales/en-US.json";
 import styles from "./DownloadButton.module.scss";
 
 interface Props
@@ -43,7 +44,7 @@ const DownloadButton = (props: Props) => {
           <span className="material-symbols-outlined">download</span>
         )}
       </span>
-      <span className={styles.text}>Download</span>
+      <span className={styles.text}>{locales["button"]["download"]}</span>
     </button>
   );
 };

src/components/DragAndDropFile/DragAndDropFile.module.scss

@@ -29,6 +29,9 @@
   align-items: center;
   justify-content: center;
   cursor: pointer;
+  overflow: hidden;
+  border-radius: 0.5rem;
+  box-shadow: 0 0 0.5px 0.5px var(--fill-tertiary);
 
   .dragging {
     z-index: 2;
@@ -44,18 +47,6 @@
     animation: scale 0.3s;
   }
 
-  @keyframes scale {
-    from {
-      opacity: 0;
-      transform: scale(0.8);
-    }
-
-    to {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-
   .icon {
     font-size: 3rem;
   }
@@ -69,3 +60,15 @@
     opacity: 0;
   }
 }
+
+@keyframes scale {
+  from {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

src/components/DragAndDropFile/DragAndDropFile.tsx

@@ -14,72 +14,26 @@
  * under the License.
  */
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 
-import { useAppConfiguration } from "@/hooks";
+import { Alert, AlertButton } from "@/components";
+import { useAppConfiguration, useDragAndDrop } from "@/hooks";
+import locales from "@/locales/en-US.json";
 import styles from "./DragAndDropFile.module.scss";
 
 const DragAndDropFile = () => {
   const { handleChangeCustomImages, handleDropCustomImages } =
     useAppConfiguration();
   const dragRef = useRef<HTMLInputElement>(null);
-  const [isDragging, setIsDragging] = useState(false);
-
-  const handleDragIn = useCallback((e: DragEvent): void => {
-    e.preventDefault();
-    e.stopPropagation();
-  }, []);
-
-  const handleDragOut = useCallback((e: DragEvent): void => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    setIsDragging(false);
-  }, []);
-
-  const handleDragOver = useCallback((e: DragEvent): void => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    if (e.dataTransfer!.files) {
-      setIsDragging(true);
-    }
-  }, []);
-
-  const handleDrop = useCallback(
-    (e: DragEvent) => {
-      e.preventDefault();
-      e.stopPropagation();
-
+  const [showAlert, setShowAlert] = useState(false);
+  const handleDrop = (e: DragEvent) => {
+    try {
       handleDropCustomImages(e);
-      setIsDragging(false);
-    },
-    [handleDropCustomImages],
-  );
-
-  const initDragEvents = useCallback(() => {
-    if (dragRef.current !== null) {
-      dragRef.current.addEventListener("dragenter", handleDragIn);
-      dragRef.current.addEventListener("dragleave", handleDragOut);
-      dragRef.current.addEventListener("dragover", handleDragOver);
-      dragRef.current.addEventListener("drop", handleDrop);
+    } catch (e) {
+      setShowAlert(true);
     }
-  }, [handleDragIn, handleDragOut, handleDragOver, handleDrop]);
-
-  const resetDragEvents = useCallback(() => {
-    if (dragRef.current !== null) {
-      dragRef.current.removeEventListener("dragenter", handleDragIn);
-      dragRef.current.removeEventListener("dragleave", handleDragOut);
-      dragRef.current.removeEventListener("dragover", handleDragOver);
-      dragRef.current.removeEventListener("drop", handleDrop);
-    }
-  }, [handleDragIn, handleDragOut, handleDragOver, handleDrop]);
-
-  useEffect(() => {
-    initDragEvents();
-
-    return () => resetDragEvents();
-  }, [initDragEvents, resetDragEvents]);
+  };
+  const { isDragging } = useDragAndDrop(dragRef, handleDrop);
 
   return (
     <label className={styles.file}>
@@ -94,6 +48,15 @@ const DragAndDropFile = () => {
         accept="image/*"
         ref={dragRef}
       />
+      {showAlert && (
+        <Alert onClose={() => setShowAlert(false)}>
+          <strong>{locales["alert"]["uploadOnlyImages"]}</strong>
+          <p>{locales["alert"]["makeSureImageExtensions"]}</p>
+          <AlertButton onClick={() => setShowAlert(false)}>
+            {locales["button"]["confirm"]}
+          </AlertButton>
+        </Alert>
+      )}
     </label>
   );
 };

src/components/EditableImage/EditableImage.module.scss

@@ -22,7 +22,29 @@
     transform: scaleX(-1);
   }
 
-  > img {
+  .drop {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+
+    .dragging {
+      z-index: 2;
+      position: absolute;
+      top: 0.5rem;
+      left: 0.5rem;
+      width: calc(100% - 1rem);
+      height: calc(100% - 1rem);
+      border: 1px dashed var(--red-primary);
+      border-radius: 0.5rem;
+      background-color: rgb(0 0 0 / 10%);
+      pointer-events: none;
+      animation: scale 0.3s;
+    }
+  }
+
+  img {
     position: absolute;
     top: 0;
     left: 0;
@@ -31,6 +53,9 @@
     height: 100%;
     object-fit: cover;
     -webkit-user-drag: none;
+    overflow: hidden;
+    border-radius: 0.5rem;
+    box-shadow: 0 0 0.5px 0.5px var(--fill-tertiary);
   }
 
   .inputs {
@@ -101,10 +126,23 @@
 
     > li {
       margin: 0 0.5rem;
+      position: relative;
 
       &:first-of-type {
         margin: 0 0.5rem 0.5rem;
       }
     }
   }
 }
+
+@keyframes scale {
+  from {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

src/components/EditableImage/EditableImage.tsx

@@ -19,30 +19,37 @@ import {
   forwardRef,
   MutableRefObject,
   useEffect,
+  useRef,
   useState,
 } from "react";
 
-import { DragAndDropFile, TextInput } from "@/components";
+import { Alert, AlertButton, DragAndDropFile, TextInput } from "@/components";
 import {
   Alignment,
   Font,
   FontSize,
   InputField,
   InputFieldGroup,
 } from "@/constants";
-import { useAppConfiguration, useElementSize, useImageColor } from "@/hooks";
+import {
+  useAppConfiguration,
+  useDragAndDrop,
+  useElementSize,
+  useImageColor,
+} from "@/hooks";
+import locales from "@/locales/en-US.json";
 import { convertHexToRgb } from "@/utils";
 import styles from "./EditableImage.module.scss";
 
 interface Props {
   dragKey?: string;
-  selectedTheme?: string;
   src: string;
   fontColor?: string;
   inputRefs?: MutableRefObject<Record<string, HTMLInputElement>>;
   inputFields: Array<InputFieldGroup>;
   inputOptions: Record<string, InputField>;
   isEditable?: boolean;
+  isImageDroppable?: boolean;
   isImageFlip?: boolean;
   focusedInput?: string;
   handleFocusInput?: (event: FocusEvent<HTMLDivElement>) => void;
@@ -59,14 +66,25 @@ const EditableImage = forwardRef<HTMLDivElement, Props>((props, ref) => {
     inputOptions,
     isEditable,
     isImageFlip,
+    isImageDroppable,
     focusedInput,
     handleFocusInput,
     handleBlurInput,
   } = props;
   const { isDarkImage } = useImageColor(src);
   const [imageRef, { width: imageWidth }] = useElementSize();
   const [initialColor, setInitialColor] = useState("");
-  const { defaultInputFields } = useAppConfiguration();
+  const { defaultInputFields, handleDropCustomImages } = useAppConfiguration();
+  const [showAlert, setShowAlert] = useState(false);
+  const dragRef = useRef<HTMLDivElement>(null);
+  const handleDrop = (e: DragEvent) => {
+    try {
+      handleDropCustomImages(e);
+    } catch (e) {
+      setShowAlert(true);
+    }
+  };
+  const { isDragging } = useDragAndDrop(dragRef, handleDrop);
 
   useEffect(() => {
     setInitialColor(
@@ -113,7 +131,14 @@ const EditableImage = forwardRef<HTMLDivElement, Props>((props, ref) => {
       }
     >
       {src ? (
-        <img src={src} alt="" ref={imageRef} width={1152} height={648} />
+        isImageDroppable ? (
+          <div ref={dragRef} className={styles.drop}>
+            {isDragging && <span className={styles.dragging}></span>}
+            <img src={src} alt="" ref={imageRef} width={1152} height={648} />
+          </div>
+        ) : (
+          <img src={src} alt="" ref={imageRef} width={1152} height={648} />
+        )
       ) : (
         <DragAndDropFile />
       )}
@@ -179,6 +204,7 @@ const EditableImage = forwardRef<HTMLDivElement, Props>((props, ref) => {
                         alignment={inputOptions[label].alignment as Alignment}
                         label={label}
                         defaultValue={text ?? ""}
+                        tooltip={inputOptions[label]?.tooltip}
                         isFocused={focusedInput === label}
                         onFocus={handleFocusInput}
                         onBlur={handleBlurInput}
@@ -191,6 +217,15 @@ const EditableImage = forwardRef<HTMLDivElement, Props>((props, ref) => {
           </ul>
         );
       })}
+      {showAlert && (
+        <Alert onClose={() => setShowAlert(false)}>
+          <strong>{locales["alert"]["uploadOnlyImages"]}</strong>
+          <p>{locales["alert"]["makeSureImageExtensions"]}</p>
+          <AlertButton onClick={() => setShowAlert(false)}>
+            {locales["button"]["confirm"]}
+          </AlertButton>
+        </Alert>
+      )}
     </div>
   );
 });

src/components/Editor/Editor.module.scss

@@ -23,9 +23,7 @@
 }
 
 .inner {
-  overflow: hidden;
-  border-radius: 0.5rem;
-  box-shadow: 0 0 0.5px 0.5px var(--fill-tertiary);
+  overflow: visible;
 }
 
 .buttons {
@@ -49,108 +47,13 @@
   }
 }
 
-.image {
-  position: relative;
-  padding-top: 56.25%;
-
-  &.flip {
-    transform: scaleX(-1);
-  }
-
-  > img {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 1;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    -webkit-user-drag: none;
-  }
-
-  .inputs {
-    position: absolute;
-    z-index: 2;
-    display: flex;
-    padding: 2.5rem 2.3rem;
-    transform: scale(var(--text-scale));
-
-    &.top-left {
-      top: 0;
-      left: 0;
-      transform-origin: top left;
-    }
-
-    &.top-center {
-      top: 0;
-      left: 50%;
-      transform: scale(var(--text-scale)) translateX(-50%);
-      transform-origin: top left;
-    }
-
-    &.top-right {
-      top: 0;
-      right: 0;
-      transform-origin: top right;
-    }
-
-    &.center-left {
-      top: 50%;
-      left: 0;
-      transform: scale(var(--text-scale)) translateY(-50%);
-      transform-origin: top left;
-    }
-
-    &.center {
-      top: 50%;
-      left: 50%;
-      transform: scale(var(--text-scale)) translate(-50%, -50%);
-      transform-origin: top left;
-    }
-
-    &.center-right {
-      top: 50%;
-      right: 0;
-      transform: scale(var(--text-scale)) translateY(-50%);
-      transform-origin: top right;
-    }
-
-    &.bottom-left {
-      bottom: 0;
-      left: 0;
-      transform-origin: bottom left;
-    }
-
-    &.bottom-center {
-      bottom: 0;
-      left: 50%;
-      transform: scale(var(--text-scale)) translateX(-50%);
-      transform-origin: bottom left;
-    }
-
-    &.bottom-right {
-      bottom: 0;
-      right: 0;
-      transform-origin: bottom right;
-    }
-
-    > li {
-      margin: 0 0.5rem;
-
-      &:first-of-type {
-        margin: 0 0.5rem 0.5rem;
-      }
-    }
-  }
-}
-
 .side {
   width: 22.5rem;
-  padding: 1.5rem;
+  padding: 1.5rem 1.5rem 1.5rem 0.5rem;
 
   @include mobile {
     width: 100%;
-    padding-top: 0;
+    padding: 0 1.5rem 1.5rem;
   }
 
   h3 {

src/components/Editor/Editor.tsx

@@ -45,6 +45,7 @@ import {
 } from "@/constants";
 import { useAppConfiguration, useImageColor } from "@/hooks";
 import { IconGithub } from "@/icons";
+import locales from "@/locales/en-US.json";
 import { convertRgbToHex } from "@/utils";
 import styles from "./Editor.module.scss";
 
@@ -115,12 +116,16 @@ const Editor = forwardRef<HTMLDivElement>((_, ref) => {
     const initialOptions: Record<string, InputField> = {};
     inputFields.map(({ fields }) => {
       fields.map(
-        ({ label, fontSize, fontStyle = DEFAULT_FONT_STYLE, text }, index) => {
+        (
+          { label, fontSize, fontStyle = DEFAULT_FONT_STYLE, text, tooltip },
+          index,
+        ) => {
           initialOptions[label] = {
             label,
             fontStyle,
             fontSize,
             text,
+            tooltip,
             isVisible: true,
             opacity: index === 0 ? 100 : 60,
           };
@@ -222,6 +227,7 @@ const Editor = forwardRef<HTMLDivElement>((_, ref) => {
             dragKey={dragKey}
             ref={ref}
             isEditable
+            isImageDroppable={selectedTheme === "custom"}
             isImageFlip={isImageFlip}
             src={src}
             fontColor={fontColor}
@@ -238,10 +244,10 @@ const Editor = forwardRef<HTMLDivElement>((_, ref) => {
             icon={<span className="material-symbols-outlined">help</span>}
             onClick={() => setGuideVisible(true)}
           >
-            How To Contribute
+            {locales["button"]["contribute"]}
           </TextButton>
           <TextButton icon={<IconGithub />} onClick={handleClickGithub}>
-            Github
+            {locales["button"]["github"]}
           </TextButton>
         </div>
       </div>
@@ -255,7 +261,7 @@ const Editor = forwardRef<HTMLDivElement>((_, ref) => {
               tabIndex={0}
             >
               <li className={styles.custom}>
-                <strong>Font</strong>
+                <strong>{locales["option"]["font"]}</strong>
                 <Select
                   defaultValue={inputOptions?.[focusedInput]?.fontStyle}
                   value={inputOptions?.[focusedInput]?.fontStyle}
@@ -267,7 +273,7 @@ const Editor = forwardRef<HTMLDivElement>((_, ref) => {
                 />
               </li>
               <li className={styles.custom}>
-                <strong>Size</strong>
+                <strong>{locales["option"]["size"]}</strong>
                 <Select
                   defaultValue={inputOptions?.[focusedInput]?.fontSize}
                   value={inputOptions?.[focusedInput]?.fontSize}
@@ -281,7 +287,7 @@ const Editor = forwardRef<HTMLDivElement>((_, ref) => {
                 />
               </li>
               <li className={styles.custom}>
-                <strong>Color</strong>
+                <strong>{locales["option"]["color"]}</strong>
                 <ColorPicker
                   defaultValue={
                     inputOptions?.[focusedInput]?.fontColor ??
@@ -291,14 +297,14 @@ const Editor = forwardRef<HTMLDivElement>((_, ref) => {
                 />
               </li>
               <li className={styles.custom}>
-                <strong>Opacity</strong>
+                <strong>{locales["option"]["opacity"]}</strong>
                 <OpacityRange
                   defaultValue={inputOptions?.[focusedInput]?.opacity}
                   onChange={(e) => handleChangeOpacity(Number(e.target.value))}
                 />
               </li>
               <li className={styles.custom}>
-                <strong>Alignment</strong>
+                <strong>{locales["option"]["alignment"]}</strong>
                 <AlignSelect
                   defaultValue={
                     inputOptions?.[focusedInput]?.alignment ?? "left"
@@ -319,7 +325,7 @@ const Editor = forwardRef<HTMLDivElement>((_, ref) => {
           </>
         ) : (
           <>
-            <h3>Text Option</h3>
+            <h3>{locales["option"]["text"]}</h3>
             {inputFields.map(({ fields }, index) => (
               <ul key={index}>
                 {fields.map(({ label, isRequired }, index) => (
@@ -334,14 +340,14 @@ const Editor = forwardRef<HTMLDivElement>((_, ref) => {
                 ))}
               </ul>
             ))}
-            <h3>Image Option</h3>
+            <h3>{locales["option"]["image"]}</h3>
             <ul>
               <li>
                 <ToggleOption
                   label={
                     <>
                       <span className="material-symbols-outlined">flip</span>
-                      Horizontal Flip
+                      {locales["option"]["flip"]}
                     </>
                   }
                   isSelected={isImageFlip}
@@ -358,7 +364,7 @@ const Editor = forwardRef<HTMLDivElement>((_, ref) => {
                   onClick={handleReset}
                   className={styles.reset}
                 >
-                  Reset Image
+                  {locales["option"]["reset"]}
                 </TextButton>
               </li>
             </ul>

src/components/GuideDialog/GuideDialog.module.scss

@@ -29,6 +29,7 @@
 
 .guide {
   position: relative;
+  text-align: center;
   width: min(45rem, 90%);
   padding: 2.5rem;
   font-weight: normal;
@@ -65,6 +66,7 @@
     overflow-y: auto;
     padding-right: 1.5rem;
     margin-right: -1.5rem;
+    text-align: left;
 
     @include mobile {
       padding-right: 1rem;

src/components/GuideDialog/GuideDialog.tsx

@@ -13,10 +13,9 @@
  * License for the specific language governing permissions and limitations
  * under the License.
  */
-import { useEffect, useState } from "react";
-import readmeFile from "~/CONTRIBUTING.md";
-import Markdown from "react-markdown";
+import React, { Suspense } from "react";
 
+import { Loading } from "@/components";
 import styles from "./GuideDialog.module.scss";
 
 interface Props {
@@ -26,13 +25,7 @@ interface Props {
 
 const GuideDialog = (props: Props) => {
   const { isVisible, onClose } = props;
-  const [markdown, setMarkdown] = useState("");
-
-  useEffect(() => {
-    fetch(readmeFile)
-      .then((response) => response.text())
-      .then(setMarkdown);
-  }, []);
+  const GuideMarkDown = React.lazy(() => import("./GuideMarkdown"));
 
   if (!isVisible) {
     return <></>;
@@ -41,9 +34,9 @@ const GuideDialog = (props: Props) => {
   return (
     <div className={styles.dim} onClick={onClose}>
       <div className={styles.guide} onClick={(e) => e.stopPropagation()}>
-        <div className={styles.markdown}>
-          <Markdown disallowedElements={["img"]}>{`${markdown}`}</Markdown>
-        </div>
+        <Suspense fallback={<Loading />}>
+          <GuideMarkDown />
+        </Suspense>
         <button type="button" aria-label="Close guide modal" onClick={onClose}>
           <span className="material-symbols-outlined">cancel</span>
         </button>

src/components/GuideDialog/GuideMarkdown.tsx

@@ -0,0 +1,40 @@
+/**
+ * Copyright 2023 LINE Corporation
+ *
+ * LINE Corporation licenses this file to you under the Apache License,
+ * version 2.0 (the "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at:
+ *
+ *   https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+import { useEffect, useState } from "react";
+import config from "~/app.config.json";
+import Markdown from "react-markdown";
+
+import { Config } from "@/constants/config";
+import styles from "./GuideDialog.module.scss";
+
+const GuideMarkdown = () => {
+  const { contributeGuide } = config as unknown as Config;
+  const [markdown, setMarkdown] = useState("");
+
+  useEffect(() => {
+    fetch(contributeGuide)
+      .then((response) => response.text())
+      .then(setMarkdown);
+  }, [contributeGuide]);
+
+  return (
+    <div className={styles.markdown}>
+      <Markdown disallowedElements={["img"]}>{`${markdown}`}</Markdown>
+    </div>
+  );
+};
+
+export default GuideMarkdown;

src/components/ImageButton/ImageButton.tsx

@@ -80,7 +80,6 @@ const ImageButton = (props: Props) => {
       <button type="button" onClick={onClick} className={styles.button}>
         <EditableImage
           src={src}
-          selectedTheme={theme}
           fontColor={textColor}
           inputFields={inputFields}
           inputOptions={inputOptions}

src/components/ImageList/ImageList.module.scss

@@ -66,5 +66,31 @@
         opacity: 0;
       }
     }
+
+    .dragging {
+      z-index: 2;
+      position: absolute;
+      top: 0.25rem;
+      left: 0.25rem;
+      width: calc(100% - 0.5rem);
+      height: calc(100% - 0.5rem);
+      border: 1px dashed var(--red-primary);
+      border-radius: 0.5rem;
+      background-color: rgb(0 0 0 / 10%);
+      pointer-events: none;
+      animation: scale 0.3s;
+    }
+  }
+}
+
+@keyframes scale {
+  from {
+    opacity: 0;
+    transform: scale(0.8);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale(1);
   }
 }

src/components/ImageList/ImageList.tsx

@@ -13,11 +13,16 @@
  * License for the specific language governing permissions and limitations
  * under the License.
  */
-import { MutableRefObject, useEffect, useRef } from "react";
+import { MutableRefObject, useEffect, useRef, useState } from "react";
 
-import { ImageButton } from "@/components";
+import { Alert, AlertButton, ImageButton } from "@/components";
 import { Image } from "@/constants";
-import { useAppConfiguration, useDraggableScroll } from "@/hooks";
+import {
+  useAppConfiguration,
+  useDragAndDrop,
+  useDraggableScroll,
+} from "@/hooks";
+import locales from "@/locales/en-US.json";
 import styles from "./ImageList.module.scss";
 
 const ImageList = () => {
@@ -28,13 +33,25 @@ const ImageList = () => {
     handleChangeImage,
     customImages,
     handleChangeCustomImages,
+    handleDropCustomImages,
     handleDeleteCustomImage,
   } = useAppConfiguration();
   const draggableElementRef = useRef<HTMLUListElement>(null);
   const { events } = useDraggableScroll(
     draggableElementRef as MutableRefObject<HTMLUListElement>,
   );
 
+  const dragRef = useRef<HTMLLabelElement>(null);
+  const [showAlert, setShowAlert] = useState(false);
+  const handleDrop = (e: DragEvent) => {
+    try {
+      handleDropCustomImages(e);
+    } catch (e) {
+      setShowAlert(true);
+    }
+  };
+  const { isDragging } = useDragAndDrop(dragRef, handleDrop);
+
   useEffect(() => {
     draggableElementRef?.current?.scrollTo(0, 0);
   }, [selectedTheme]);
@@ -73,7 +90,8 @@ const ImageList = () => {
             </li>
           ))}
           <li>
-            <label className={styles.file}>
+            {isDragging && <span className={styles.dragging}></span>}
+            <label className={styles.file} ref={dragRef}>
               <span className="material-symbols-outlined">add</span>
               <input
                 type="file"
@@ -84,6 +102,15 @@ const ImageList = () => {
           </li>
         </>
       )}
+      {showAlert && (
+        <Alert onClose={() => setShowAlert(false)}>
+          <strong>{locales["alert"]["uploadOnlyImages"]}</strong>
+          <p>{locales["alert"]["makeSureImageExtensions"]}</p>
+          <AlertButton onClick={() => setShowAlert(false)}>
+            {locales["button"]["confirm"]}
+          </AlertButton>
+        </Alert>
+      )}
     </ul>
   );
 };

src/components/TextInput/TextInput.tsx

@@ -23,6 +23,7 @@ import {
 } from "react";
 import Draggable, { DraggableData, DraggableEvent } from "react-draggable";
 
+import { Tooltip } from "@/components";
 import { Alignment, Font, FontSize, FontSizes } from "@/constants";
 import { useElementSize } from "@/hooks";
 import styles from "./TextInput.module.scss";
@@ -36,6 +37,7 @@ interface Props {
   style?: Font;
   alignment?: Alignment;
   label: string;
+  tooltip?: string;
   defaultValue?: string;
   isFocused?: boolean;
   onFocus?: (event: FocusEvent<HTMLDivElement>) => void;
@@ -51,6 +53,7 @@ const TextInput = forwardRef<HTMLInputElement, Props>((props, ref) => {
     alignment = "left",
     label,
     defaultValue,
+    tooltip,
     isFocused,
     onFocus,
     onBlur,
@@ -59,6 +62,7 @@ const TextInput = forwardRef<HTMLInputElement, Props>((props, ref) => {
   const dragRef = useRef<HTMLDivElement>(null);
   const [value, setValue] = useState("");
   const [dragPosition, setDragPosition] = useState(defaultPosition);
+  const [isDragging, setIsDragging] = useState(false);
 
   const placeholder = label.charAt(0).toUpperCase() + label.slice(1);
 
@@ -67,8 +71,13 @@ const TextInput = forwardRef<HTMLInputElement, Props>((props, ref) => {
     setDragPosition(defaultPosition);
   };
 
+  const handleStart = () => {
+    setIsDragging(true);
+  };
+
   const handleStop = (_: DraggableEvent, data: DraggableData) => {
     setDragPosition({ x: data.x, y: data.y });
+    setIsDragging(false);
   };
 
   const handleBlur = (event: FocusEvent<HTMLDivElement>) => {
@@ -105,6 +114,7 @@ const TextInput = forwardRef<HTMLInputElement, Props>((props, ref) => {
         disabled={window?.innerWidth < 768}
         defaultPosition={defaultPosition}
         position={dragPosition}
+        onStart={handleStart}
         onStop={handleStop}
       >
         <div
@@ -126,6 +136,9 @@ const TextInput = forwardRef<HTMLInputElement, Props>((props, ref) => {
               style={{
                 fontFamily: `'${style}', 'LINE Seed', 'LINE Seed KR', serif`,
               }}
+              autoComplete={"new-password"}
+              aria-autocomplete={"none"}
+              list={"autocomplete-off"}
             />
           </label>
           <span className={styles.tag}>{label}</span>
@@ -144,6 +157,12 @@ const TextInput = forwardRef<HTMLInputElement, Props>((props, ref) => {
       >
         {value?.length === 0 ? placeholder : value}
       </span>
+      <Tooltip
+        visible={Boolean(isFocused && tooltip) && !isDragging}
+        style={{ transform: `${dragRef?.current?.style.transform}` }}
+      >
+        {tooltip}
+      </Tooltip>
     </div>
   );
 });

src/components/Tooltip/Tooltip.module.scss

@@ -0,0 +1,36 @@
+.tooltip {
+  @include font("16");
+
+  z-index: 9;
+  position: absolute;
+  top: -4.5rem;
+  left: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem 0.75rem 0.5rem 0.5rem;
+  border-radius: 0.5rem;
+  background-color: #3f0;
+  color: #000;
+  white-space: nowrap;
+
+  :global {
+    .material-symbols-outlined {
+      font-size: 1.25rem;
+      margin-right: 0.25rem;
+    }
+  }
+
+  &::before {
+    content: "";
+    height: 0;
+    width: 0;
+    position: absolute;
+    bottom: 0;
+    left: 0.5rem;
+    transform: translate(0, 100%);
+    border-right: solid 0.3rem transparent;
+    border-left: solid 0.3rem transparent;
+    border-top: solid 0.3rem #3f0;
+  }
+}

src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,22 @@
+import { HTMLAttributes, PropsWithChildren } from "react";
+
+import styles from "./Tooltip.module.scss";
+
+interface Props extends PropsWithChildren, HTMLAttributes<HTMLElement> {
+  visible: boolean;
+}
+
+const Tooltip = (props: Props) => {
+  const { children, visible, style } = props;
+  if (!visible) {
+    return <></>;
+  }
+  return (
+    <strong className={styles.tooltip} style={style}>
+      <span className="material-symbols-outlined">lightbulb</span>
+      {children}
+    </strong>
+  );
+};
+
+export default Tooltip;

src/components/Tooltip/index.ts

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

src/components/index.ts

@@ -30,3 +30,5 @@ export { TextInput } from "./TextInput";
 export { EditableImage } from "./EditableImage";
 export { DragAndDropFile } from "./DragAndDropFile";
 export { SyncButton } from "./SyncButton";
+export { Alert, AlertButton } from "./Alert";
+export { Tooltip } from "./Tooltip";

src/constants/config.ts

@@ -0,0 +1,39 @@
+/**
+ * Copyright 2023 LINE Corporation
+ *
+ * LINE Corporation licenses this file to you under the Apache License,
+ * version 2.0 (the "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at:
+ *
+ *   https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+import { InputFieldGroup } from "@/constants/input";
+import { Theme } from "@/constants/theme";
+
+export interface Config {
+  title: {
+    text: string;
+    logo: string;
+  };
+  keyColor: {
+    light: string;
+    dark: string;
+  };
+  backgroundsUri: {
+    type: string;
+    path: string;
+  };
+  contributeGuide: string;
+  fonts: {
+    sizes: Record<string, string>;
+    styles: Array<string>;
+  };
+  defaultInputFields: Array<InputFieldGroup>;
+  themes: Array<Theme>;
+}

src/constants/font.ts

@@ -15,16 +15,18 @@
  */
 import config from "~/output.config.json";
 
+import { Config } from "@/constants/config";
+
+const { fonts } = config as unknown as Config;
+
 export const FontSizes: Record<string, string> = {} as const;
-Object.keys(config.fonts.sizes).forEach(
-  (size) =>
-    (FontSizes[size] =
-      config.fonts.sizes[size as keyof typeof config.fonts.sizes]),
+Object.keys(fonts.sizes).forEach(
+  (size) => (FontSizes[size] = fonts.sizes[size as keyof typeof fonts.sizes]),
 );
 export type FontSize = keyof typeof FontSizes;
 
 export const Fonts: Record<string, string> = {} as const;
-config.fonts.styles.forEach((font) => (Fonts[font] = font));
+fonts.styles.forEach((font) => (Fonts[font] = font));
 export type Font = keyof typeof Fonts;
 
 export const Alignments = {

src/constants/input.ts

@@ -24,4 +24,5 @@ export interface InputField {
   isRequired?: boolean;
   isVisible?: boolean;
   text?: string;
+  tooltip?: string;
 }

src/constants/theme.ts

@@ -5,4 +5,5 @@ export interface Theme {
   backgrounds: Array<Image>;
   inputFields?: Array<InputFieldGroup>;
   isNew?: boolean;
+  isHidden?: boolean;
 }

src/hooks/index.ts

@@ -14,6 +14,7 @@
  * under the License.
  */
 export { default as useDraggableScroll } from "./useDraggableScroll";
+export { default as useDragAndDrop } from "./useDragAndDrop";
 export { default as useElementSize } from "./useElementSize";
 export { default as useEventListener } from "./useEventListener";
 export { default as useImageColor } from "./useImageColor";

src/hooks/useAppConfiguration/AppContext.tsx

@@ -26,6 +26,7 @@ import config from "~/output.config.json";
 import axios, { AxiosError } from "axios";
 
 import { Image, InputFieldGroup, Theme } from "@/constants";
+import { Config } from "@/constants/config";
 import { readConfigurationFromGithub } from "@/utils";
 
 // Create a custom axios instance with default headers
@@ -69,8 +70,11 @@ export const AppContext = createContext<ContextProps>({
 
 export const AppProvider = (props: PropsWithChildren) => {
   const { children } = props;
-  const { backgroundsUri } = config;
-  const { defaultInputFields } = config;
+  const {
+    backgroundsUri,
+    defaultInputFields,
+    themes: configThemes,
+  } = config as unknown as Config;
   const [themes, setThemes] = useState<Array<Theme>>([]);
   const [selectedImage, setSelectedImage] = useState<Image>({
     src: "",
@@ -79,39 +83,49 @@ export const AppProvider = (props: PropsWithChildren) => {
   const [customImages, setCustomImages] = useState<Array<Image>>([]);
   const [isSyncing, setIsSyncing] = useState(false);
 
-  const resetThemes = async (path: string, type: string) => {
-    const lowerCasedType = type.trim().toLowerCase();
-    switch (lowerCasedType) {
-      case "filesystem":
-      case "cdn":
-        setThemes(config.themes as Array<Theme>);
-        setSelectedImage((config.themes[0] as Theme)?.backgrounds[0] ?? []);
-        break;
-      case "github":
-        try {
-          const themes = await readConfigurationFromGithub(githubAxios, path);
-          if (themes) {
-            setThemes(themes);
-            setSelectedImage(themes[0].backgrounds[0]);
-          }
-        } catch (error) {
-          console.error(
-            `Error reading configuration from github:`,
-            (error as AxiosError).message,
+  const resetThemes = useCallback(
+    async (path: string, type: string) => {
+      const lowerCasedType = type.trim().toLowerCase();
+      switch (lowerCasedType) {
+        case "filesystem":
+        case "cdn":
+          setThemes(
+            configThemes.filter(
+              ({ isHidden = false }) => !isHidden,
+            ) as Array<Theme>,
           );
-        }
-        break;
-      default:
-        console.warn("Unknown type:", type);
-    }
-  };
+          setSelectedImage((configThemes[0] as Theme)?.backgrounds[0] ?? []);
+          break;
+        case "github":
+          try {
+            const themes = await readConfigurationFromGithub(githubAxios, path);
+            if (themes) {
+              setThemes(themes.filter(({ isHidden = false }) => !isHidden));
+              setSelectedImage(themes[0].backgrounds[0]);
+            }
+          } catch (error) {
+            console.error(
+              `Error reading configuration from github:`,
+              (error as AxiosError).message,
+            );
+          }
+          break;
+        default:
+          console.warn("Unknown type:", type);
+      }
+    },
+    [configThemes],
+  );
 
   const handleDropCustomImages = (event: DragEvent) => {
-    const src = URL.createObjectURL(
-      ((event.dataTransfer as DataTransfer).files as FileList)[0],
-    );
-    setCustomImages([...customImages, { src, theme: "custom" }]);
+    const file = ((event.dataTransfer as DataTransfer).files as FileList)[0];
+    const src = URL.createObjectURL(file);
 
+    if (file.type.includes("image")) {
+      setCustomImages([...customImages, { src, theme: "custom" }]);
+    } else {
+      throw new Error("FileNotAcceptable");
+    }
     return () => URL.revokeObjectURL(src);
   };
 
@@ -144,11 +158,11 @@ export const AppProvider = (props: PropsWithChildren) => {
     }, 2000);
 
     return () => clearTimeout(timer);
-  }, [backgroundsUri]);
+  }, [backgroundsUri, resetThemes]);
 
   useEffect(() => {
     backgroundsUri && resetThemes(backgroundsUri.path, backgroundsUri.type);
-  }, [backgroundsUri]);
+  }, [backgroundsUri, resetThemes]);
 
   useEffect(() => {
     if (selectedTheme === "custom") {

src/hooks/useDragAndDrop.ts

@@ -0,0 +1,84 @@
+/**
+ * Copyright 2023 LINE Corporation
+ *
+ * LINE Corporation licenses this file to you under the Apache License,
+ * version 2.0 (the "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at:
+ *
+ *   https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+import { MutableRefObject, useCallback, useEffect, useState } from "react";
+
+function useDragAndDrop(
+  ref: MutableRefObject<HTMLElement | null>,
+  onDrop: (e: DragEvent) => void,
+) {
+  const [isDragging, setIsDragging] = useState(false);
+
+  const handleDragIn = useCallback((e: DragEvent): void => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+
+  const handleDragOut = useCallback((e: DragEvent): void => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    setIsDragging(false);
+  }, []);
+
+  const handleDragOver = useCallback((e: DragEvent): void => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (e.dataTransfer!.files) {
+      setIsDragging(true);
+    }
+  }, []);
+
+  const handleDrop = useCallback(
+    (e: DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      onDrop(e);
+      setIsDragging(false);
+    },
+    [onDrop],
+  );
+
+  const initDragEvents = useCallback(() => {
+    if (ref.current !== null) {
+      ref.current.addEventListener("dragenter", handleDragIn);
+      ref.current.addEventListener("dragleave", handleDragOut);
+      ref.current.addEventListener("dragover", handleDragOver);
+      ref.current.addEventListener("drop", handleDrop);
+    }
+  }, [handleDragIn, handleDragOut, handleDragOver, handleDrop, ref]);
+
+  const resetDragEvents = useCallback(() => {
+    if (ref.current !== null) {
+      ref.current.removeEventListener("dragenter", handleDragIn);
+      ref.current.removeEventListener("dragleave", handleDragOut);
+      ref.current.removeEventListener("dragover", handleDragOver);
+      ref.current.removeEventListener("drop", handleDrop);
+    }
+  }, [handleDragIn, handleDragOut, handleDragOver, handleDrop, ref]);
+
+  useEffect(() => {
+    initDragEvents();
+
+    return () => resetDragEvents();
+  }, [initDragEvents, resetDragEvents]);
+
+  return {
+    isDragging,
+  };
+}
+
+export default useDragAndDrop;

src/hooks/useSnapshot.ts

@@ -13,18 +13,35 @@
  * License for the specific language governing permissions and limitations
  * under the License.
  */
-import { useCallback, useState } from "react";
+import React, { useCallback, useState } from "react";
 import html2Canvas from "html2canvas";
 
+const size = {
+  width: 1152,
+  height: 648,
+};
+
 const useSnapshot = (dom: React.RefObject<HTMLElement>) => {
   const [loading, setLoading] = useState<boolean>(false);
 
   const saveImage = useCallback(
     async (fileName: string = "image.png") => {
       if (!loading && dom.current) {
         setLoading(true);
-
-        html2Canvas(dom.current)
+        html2Canvas(dom.current, {
+          width: size.width,
+          height: size.height,
+          scale: 1,
+          onclone: (_, element) => {
+            element
+              .getElementsByTagName("img")[0]
+              .setAttribute("style", "border-radius: 0; box-shadow: none;");
+            element.setAttribute(
+              "style",
+              `--text-scale: 1; width: ${size.width}px; height: ${size.height}px`,
+            );
+          },
+        })
           .then((blob) => {
             const base64Image = blob.toDataURL("image/png");
             const link = document.createElement("a");
@@ -35,7 +52,7 @@ const useSnapshot = (dom: React.RefObject<HTMLElement>) => {
             setLoading(false);
           })
           .catch((err) => {
-            console.log(err);
+            console.error(err);
             setLoading(false);
           });
       }

src/locales/en-US.json

@@ -0,0 +1,26 @@
+{
+  "title": {
+    "theme": "Select Theme"
+  },
+  "option": {
+    "text": "Text Option",
+    "image": "Image Option",
+    "flip": "Horizontal Flip",
+    "reset": "Reset Style",
+    "font": "Font",
+    "size": "Size",
+    "color": "Color",
+    "opacity": "Opacity",
+    "alignment": "Alignment"
+  },
+  "button": {
+    "download": "Download",
+    "contribute": "How To Contribute",
+    "github": "Github",
+    "confirm": "Confirm"
+  },
+  "alert": {
+    "uploadOnlyImages": "Only images can be uploaded.",
+    "makeSureImageExtensions": "Please make sure that the file you want to upload\nhas the following extensions: .jpg, .jpeg, .png, .gif, .bmp and .webp."
+  }
+}

tsconfig.json

@@ -28,6 +28,5 @@
 
     "types": ["vite-plugin-svgr/client", "node"]
   },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "include": ["src", "vite.config.ts", "app.config.json"]
 }

tsconfig.node.json

@@ -7,6 +7,8 @@ import stylelint from "vite-plugin-stylelint";
 import svgr from "vite-plugin-svgr";
 import tsconfigPaths from "vite-tsconfig-paths";
 
+import type { Config } from "@/constants/config.ts";
+import type { Image } from "@/constants/image.ts";
 import config from "./app.config.json";
 
 // https://vitejs.dev/config/
@@ -19,6 +21,7 @@ export default defineConfig({
     stylelint({
       fix: true,
     }),
+    copyContributeGuide(),
     copyBackgroundsForFileSystem(),
   ],
   css: {
@@ -31,36 +34,64 @@ export default defineConfig({
   assetsInclude: ["**/*.md"],
 });
 
+function copyContributeGuide() {
+  const { contributeGuide } = config as unknown as Config;
+  const targetDirectory = "dist";
+
+  return copy({
+    targets: [
+      {
+        src: contributeGuide,
+        dest: targetDirectory,
+      },
+    ],
+    hook: "writeBundle",
+  });
+}
+
 /**
  * If config has `filesystem` type for `backgroundsUri`, copy local backgrounds path to dist folder
  */
 function copyBackgroundsForFileSystem() {
+  const { backgroundsUri, themes } = config as unknown as Config;
+
   if (
-    config.backgroundsUri &&
-    config.backgroundsUri.type === "filesystem" &&
-    config.backgroundsUri.path
+    backgroundsUri &&
+    backgroundsUri.type === "filesystem" &&
+    backgroundsUri.path
   ) {
     const dir = path.resolve();
-    const sourceDirectory = config.backgroundsUri.path;
+    const sourceDirectory = backgroundsUri.path;
     const targetDirectory = "dist";
-    const order = config.themes.map(({ name }) => name);
+    const order = themes.map(({ name }) => name);
+    const filteredOrder = themes
+      .filter(({ isHidden }) => !isHidden)
+      .map(({ name }) => name);
 
     const fileContentsArray = readFilesRecursively(sourceDirectory);
 
     order.map((theme, index) => {
+      const isThemeHidden =
+        themes.filter(({ name }) => name === theme)[0]?.isHidden ?? false;
       const filteredFileContentsArray = fileContentsArray.filter(
         ({ theme: fileTheme }) => fileTheme === theme,
       );
-      config.themes[index]["backgrounds"] = filteredFileContentsArray.map(
-        ({ src, fontColor }) => (fontColor ? { src, fontColor } : { src }),
-      );
+
+      themes[index]["backgrounds"] = isThemeHidden
+        ? []
+        : filteredFileContentsArray.map(({ src, fontColor }) =>
+            fontColor ? { src, fontColor } : { src },
+          );
     });
 
     const configJsonPath = path.join(dir, "output.config.json");
     fs.writeFileSync(configJsonPath, JSON.stringify(config, null, 2));
 
     return copy({
-      targets: [{ src: sourceDirectory, dest: targetDirectory }],
+      targets: filteredOrder.map((theme) => ({
+        src: path.join(sourceDirectory, theme),
+        dest: path.join(targetDirectory, backgroundsUri.path),
+      })),
       hook: "writeBundle",
     });
   } else {
@@ -70,22 +101,22 @@ function copyBackgroundsForFileSystem() {
   }
 }
 
-function readFilesRecursively(dir) {
-  const fileContentsArray = [];
+function readFilesRecursively(dir: string) {
+  const { backgroundsUri, themes } = config as unknown as Config;
+  const fileContentsArray: Image[] = [];
 
-  const readFiles = (dir) => {
+  const readFiles = (dir: string) => {
     const files = fs.readdirSync(dir);
-    const order = config.themes.map(({ name }) => name);
+    const order = themes
+      .filter(({ isHidden = false }) => !isHidden)
+      .map(({ name }) => name);
     const sortedFiles = files.sort(
       (a, b) => order.indexOf(a) - order.indexOf(b),
     );
 
     sortedFiles.forEach((file) => {
       const filePath = path.join(dir, file);
-      const theme = dir.replace(
-        path.join(config.backgroundsUri.path, path.sep),
-        "",
-      );
+      const theme = dir.replace(path.join(backgroundsUri.path, path.sep), "");
 
       if (fs.statSync(filePath).isDirectory()) {
         readFiles(filePath);
@@ -110,7 +141,7 @@ function readFilesRecursively(dir) {
   return fileContentsArray;
 }
 
-function isImageFile(filePath) {
+function isImageFile(filePath: string) {
   const allowedExtensions = [".jpg", ".jpeg", ".png", ".gif", ".bmp", ".webp"];
   const extension = path.extname(filePath).toLowerCase();
   return allowedExtensions.includes(extension);