- Added options menu toggle button

- Edited e2e tests to account for options toggle menu - New Button Component
DiggidyDev · Mar 19, 2024 · 75169ec · 75169ec
1 parent 828fb12
commit 75169ec
Show file tree

Hide file tree

Showing 6 changed files with 90 additions and 33 deletions.
diff --git a/.env b/.env
@@ -0,0 +1 @@
+NEXT_PUBLIC_SAMPLE_GITHUB_REPO=https://github.com/DiggidyDev/dockerignore-validator/tree/main
diff --git a/cypress/e2e/validate.cy.ts b/cypress/e2e/validate.cy.ts
@@ -19,9 +19,11 @@ describe("Homepage", () => {
             .should("exist")
             .and("have.text", "Files");
 
-        cy.get("[data-cy=options] > input[name=showIgnored]")
-            .should("exist")
-            .and("be.checked");
+        cy.get("[data-cy=options] > input[name=showIgnored]").should(
+            "not.exist"
+        );
+
+        cy.get("[data-cy=toggle-options]").should("exist").and("be.enabled");
 
         cy.get("[data-cy=validate-button]").should("exist").and("be.enabled");
 
@@ -86,6 +88,9 @@ describe("Homepage", () => {
             expectedIgnoredOutput
         );
 
+        cy.get("[data-cy=toggle-options]").click();
+        cy.get("[data-cy=toggle-options]").should("have.text", "Hide Options");
+
         cy.get("[data-cy=options] > input[name=showIgnored]").uncheck();
         cy.get("[data-cy=result-output] > label").should(
             "have.text",

diff --git a/src/app/components/Button/Button.cy.tsx b/src/app/components/Button/Button.cy.tsx
diff --git a/src/app/components/Button/Button.tsx b/src/app/components/Button/Button.tsx
@@ -0,0 +1,14 @@
+import { ButtonHTMLAttributes } from "react";
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {}
+
+export function Button({ children, className, ...props }: ButtonProps) {
+    return (
+        <button
+            className={`bg-blue-500 text-white p-4 rounded-md disabled:cursor-not-allowed enabled:hover:bg-blue-600 transition-colors ${className}`}
+            {...props}
+        >
+            {children}
+        </button>
+    );
+}
diff --git a/src/app/components/TextArea/TextArea.tsx b/src/app/components/TextArea/TextArea.tsx
@@ -67,7 +67,7 @@ function StyledTextArea({ className = "", ...props }: StyledTextAreaProps) {
     return (
         <textarea
             {...props}
-            className={`w-full h-full p-2 disabled:bg-gray-300 dark:disabled:bg-slate-800 disabled:cursor-not-allowed dark:bg-slate-700 rounded-md drop-shadow-lg dark:shadow-2xl resize-none ${className}`}
+            className={`w-full h-full break-normal p-2 disabled:bg-gray-300 dark:disabled:bg-slate-800 disabled:cursor-not-allowed dark:bg-slate-700 rounded-md drop-shadow-lg dark:shadow-2xl resize-none ${className}`}
         />
     );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,8 +1,9 @@
 "use client";
 
 import { useState } from "react";
-import { TextArea } from "./components/TextArea/TextArea";
+import { Button } from "./components/Button/Button";
 import { Label } from "./components/Label/Label";
+import { TextArea } from "./components/TextArea/TextArea";
 
 const processFiles = (
     files: string,
@@ -18,14 +19,21 @@ const processFiles = (
 };
 
 export default function Home() {
+    // MAIN STATE
     const [dockerignore, setDockerignore] = useState("");
     const [files, setFiles] = useState("");
-
     const [result, setResult] = useState<boolean[]>([]);
-    const [showIgnored, setShowIgnored] = useState(true);
 
+    // CONTROL STATE
+    const [repoUrl, setRepoUrl] = useState(
+        process.env.NEXT_PUBLIC_SAMPLE_GITHUB_REPO!
+    );
+    const [showOptions, setShowOptions] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
 
+    // OPTIONS
+    const [showIgnored, setShowIgnored] = useState(true);
+
     const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();
         setIsLoading(true);
@@ -79,36 +87,65 @@ export default function Home() {
                         />
                     )}
                 </div>
-                <button
-                    data-cy="validate-button"
-                    className="bg-blue-500 text-white p-4 rounded-md disabled:cursor-not-allowed enabled:hover:bg-blue-600 transition-colors"
-                    disabled={isLoading}
-                    type="submit"
-                >
-                    Validate
-                </button>
+                <div className="flex gap-8 w-fill items-center">
+                    <div className="bg-slate-700 rounded-lg">
+                        <input
+                            className="w-fill w-[20vw] p-4 bg-transparent"
+                            onChange={(e) => setRepoUrl(e.target.value)}
+                            type="url"
+                            value={process.env.NEXT_PUBLIC_SAMPLE_GITHUB_REPO}
+                        />
+                        <Button
+                            className="!bg-[#333] !p-3 mr-1 enabled:hover:!bg-[#2b2b2b]"
+                            data-cy="import-button"
+                            disabled={isLoading}
+                            onClick={() => {}}
+                            type="button"
+                        >
+                            Import from GitHub
+                        </Button>
+                    </div>
+                    <Button
+                        data-cy="toggle-options"
+                        className="bg-yellow-500 enabled:hover:bg-yellow-600"
+                        onClick={() => setShowOptions(!showOptions)}
+                        type="button"
+                    >
+                        {showOptions ? "Hide" : "Show"} Options
+                    </Button>
+                    <Button
+                        data-cy="validate-button"
+                        disabled={isLoading}
+                        type="submit"
+                    >
+                        Validate
+                    </Button>
+                </div>
             </div>
-            <div
-                data-cy="options-container"
-                className="flex flex-row-reverse items-center gap-2"
-            >
+            {showOptions && (
                 <div
-                    data-cy="options"
-                    className="flex flex-row-reverse items-center gap-2"
+                    data-cy="options-container"
+                    className="flex h-[80vh] flex-col items-center gap-2"
                 >
-                    <Label
-                        text="Show ignored files?"
-                        htmlFor="showIgnored"
-                        className="text-sm flex min-w-fit text-nowrap !mb-0"
-                    />
-                    <input
-                        checked={showIgnored}
-                        name="showIgnored"
-                        onChange={() => setShowIgnored(!showIgnored)}
-                        type="checkbox"
-                    />
+                    <h2 className="font-bold text-2xl">Options</h2>
+                    <div
+                        data-cy="options"
+                        className="flex h-full flex-row-reverse items-center gap-2"
+                    >
+                        <Label
+                            text="Show ignored files?"
+                            htmlFor="showIgnored"
+                            className="text-sm flex min-w-fit text-nowrap !mb-0"
+                        />
+                        <input
+                            checked={showIgnored}
+                            name="showIgnored"
+                            onChange={() => setShowIgnored(!showIgnored)}
+                            type="checkbox"
+                        />
+                    </div>
                 </div>
-            </div>
+            )}
         </form>
     );
 }