Merge pull request #309 from AykutSarac/dogukanuhn/main

Dogukanuhn/main

jest.config.ts

@@ -1,17 +0,0 @@
-import nextJest from "next/jest";
-
-const createJestConfig = nextJest({
-  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
-  dir: "./",
-});
-
-// Add any custom config to be passed to Jest
-const customJestConfig = {
-  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
-  testEnvironment: "jsdom",
-  moduleDirectories: ["node_modules", "src"],
-  modulePaths: ["<rootDir>"],
-};
-
-// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
-module.exports = createJestConfig(customJestConfig);

jest.setup.ts

@@ -1,5 +0,0 @@
-// Optional: configure or set up a testing framework before each test.
-// If you delete this file, remove `setupFilesAfterEnv` from `jest.config.js`
-// Used for __tests__/testing-library.js
-// Learn more: https://github.com/testing-library/jest-dom
-import "@testing-library/jest-dom/extend-expect";

package.json

@@ -8,7 +8,7 @@
     "dev": "next dev",
     "build": "next build && next export",
     "start": "next start",
-    "lint": "next lint",
+    "lint": "tsc && next lint",
     "lint:fix": "prettier --write \"./**/*.{ts,tsx,json}\"",
     "deploy": "gh-pages -d out -t true"
   },

src/components/FileInput/index.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import styled from "styled-components";
+
+const StyledInputWrapper = styled.div`
+  background: ${({ theme }) => theme.BACKGROUND_TERTIARY};
+  width: 100%;
+  border-radius: 4px;
+`;
+
+const StyledForm = styled.div`
+  display: flex;
+
+  flex: 1;
+`;
+
+const StyledInput = styled.input`
+  background: ${({ theme }) => theme.BACKGROUND_TERTIARY};
+  color: ${({ theme }) => theme.INTERACTIVE_NORMAL};
+  outline: none;
+  border: none;
+  border-radius: 4px;
+  line-height: 32px;
+  padding: 10px;
+  width: 100%;
+  height: 40px;
+`;
+
+const StyledButton = styled.button`
+  display: flex;
+  align-items: center;
+  background: none;
+  color: ${({ theme }) => theme.INTERACTIVE_NORMAL};
+  padding: 0 10px;
+  min-height: unset;
+  text-transform: uppercase;
+
+  &:hover {
+    box-shadow: none;
+  }
+
+  &.active {
+    background: ${({ theme }) => theme.PRIMARY};
+    color: white;
+    outline: 3px solid ${({ theme }) => theme.BACKGROUND_TERTIARY};
+    border-radius: 10px;
+  }
+`;
+
+export interface InputProps {
+  value: string | number | string[];
+  extensions: string[];
+  activeExtension: number;
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+  setExtension: (value: number) => void;
+}
+export const FileInput: React.FC<InputProps> = ({ setExtension, activeExtension, onChange, extensions, value }) => {
+  return (
+    <StyledInputWrapper>
+      <StyledForm>
+        <StyledInput type="text" onChange={onChange} value={value} placeholder="File Name" />
+        {extensions.map((ext, key) => (
+          <StyledButton
+            className={`${activeExtension === key && "active"}`}
+            key={key}
+            aria-label="search"
+            onClick={() => setExtension(key)}
+          >
+            {ext}
+          </StyledButton>
+        ))}
+      </StyledForm>
+    </StyledInputWrapper>
+  );
+};

src/components/__tests__/Button.test.tsx

@@ -1,10 +0,0 @@
-import React from "react";
-import { screen, render } from "@testing-library/react";
-import { Button } from "src/components/Button";
-
-describe("Button", () => {
-  it("should render Button component", () => {
-    render(<Button>Click Me!</Button>);
-    expect(screen.getByRole("button", { name: /Click Me/ })).toBeInTheDocument();
-  });
-});

src/containers/Modals/DownloadModal/index.tsx

@@ -1,11 +1,11 @@
 import React from "react";
-import { toBlob, toPng } from "html-to-image";
+import { toBlob, toPng, toSvg } from "html-to-image";
 import { TwitterPicker } from "react-color";
 import { TwitterPickerStylesProps } from "react-color/lib/components/twitter/Twitter";
 import toast from "react-hot-toast";
 import { FiCopy, FiDownload } from "react-icons/fi";
 import { Button } from "src/components/Button";
-import { Input } from "src/components/Input";
+import { FileInput } from "src/components/FileInput";
 import { Modal, ModalProps } from "src/components/Modal";
 import styled from "styled-components";
 
@@ -91,7 +91,12 @@ const StyledColorIndicator = styled.div<{ color: string }>`
   border-color: rgba(0, 0, 0, 0.1);
 `;
 
+enum Extensions {
+  svg,
+  png,
+}
 export const DownloadModal: React.FC<ModalProps> = ({ visible, setVisible }) => {
+  const [extension, setExtension] = React.useState(Extensions.svg);
   const [fileDetails, setFileDetails] = React.useState({
     filename: "jsoncrack.com",
     backgroundColor: "transparent",
@@ -132,12 +137,14 @@ export const DownloadModal: React.FC<ModalProps> = ({ visible, setVisible }) =>
 
       const imageElement = document.querySelector("svg[id*='ref']") as HTMLElement;
 
-      const dataURI = await toPng(imageElement, {
+      let exportImage = extension === Extensions.svg ? toSvg : toPng;
+
+      const dataURI = await exportImage(imageElement, {
         quality: fileDetails.quality,
         backgroundColor: fileDetails.backgroundColor,
       });
 
-      downloadURI(dataURI, `${fileDetails.filename}.png`);
+      downloadURI(dataURI, `${fileDetails.filename}.${Extensions[extension]}`);
     } catch (error) {
       toast.error("Failed to download image!");
     } finally {
@@ -156,10 +163,12 @@ export const DownloadModal: React.FC<ModalProps> = ({ visible, setVisible }) =>
         <StyledContainer>
           File Name
           <StyledColorWrapper>
-            <Input
-              placeholder="File Name"
+            <FileInput
               value={fileDetails.filename}
               onChange={e => updateDetails("filename", e.target.value)}
+              setExtension={setExtension}
+              activeExtension={extension}
+              extensions={Object.keys(Extensions).filter(v => isNaN(Number(v)))}
             />
           </StyledColorWrapper>
         </StyledContainer>

src/pages/_app.tsx

@@ -22,7 +22,7 @@ if (process.env.NODE_ENV !== "development") {
   init({
     dsn: "https://[email protected]/6495191",
     tracesSampleRate: 0.25,
-    release: 'production'
+    release: "production",
   });
 }