Merge pull request #5 from Intosoft/feat/web

feat: image upload
Intosoft · Mar 1, 2024 · d119652 · d119652
2 parents 1c6da2b + 39c28dd
commit d119652
Show file tree

Hide file tree

Showing 13 changed files with 426 additions and 131 deletions.
diff --git a/src/config.ts b/src/config.ts
@@ -4,6 +4,12 @@ export type BodyShape = "square" | "circle";
 
 export interface Config {
   length: number;
+  value: string;
+  logo?: {
+    url: string;
+    height: number;
+    width: number;
+  };
   shapes: {
     eyeFrame: EyeFrameShape;
     body: BodyShape;
@@ -26,24 +32,36 @@ export interface Config {
 }
 
 export const defaultConfig: Config = {
-  length: 400,
+  length: 200,
+  value: "https://intosoft.com",
+  logo: {
+    url: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjIuMSAxOTQuNyI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiM0MmM5ODU7fS5jbHMtMntmaWxsOiM2NmJmODM7fTwvc3R5bGU+PC9kZWZzPjxnIGlkPSJMYXllcl8yIiBkYXRhLW5hbWU9IkxheWVyIDIiPjxnIGlkPSJMYXllcl8xLTIiIGRhdGEtbmFtZT0iTGF5ZXIgMSI+PHBhdGggY2xhc3M9ImNscy0xIiBkPSJNOTQuMzYsNzUuNTljMTguMzksMTkuNzUsMTguNzYsNDkuMjguODIsNjZsLTUuMjQsNC44Ny03LjQ5LDctMy4xNSwzLjEyTDQwLjQ3LDE5Mi44N2E2Ljc3LDYuNzcsMCwwLDEtOS41Ny0uMzFMMCwxNTkuNTVsMTguNi0xNy40MWEyMi43OCwyMi43OCwwLDAsMSwxLjU5LTEuNjhsLjE1LS4xNCw4LjE3LTcuNjIsOS4wOS04LjQ3LjkyLS44NywxMS4yNy0xMC41MWExOSwxOSwwLDAsMCwxMi40NSwzLjYzLDE5LjE2LDE5LjE2LDAsMSwwLTE3LjQ0LTlMMzEuMTQsMTIwLjI1QTEuODEsMS44MSwwLDAsMSwyOC42LDEyMGwtLjg2LS45MkM5LjM1LDk5LjM3LDksNjkuODQsMjYuOTIsNTMuMTZMMzkuNjUsNDEuMzFsMzgtMzUuNzZMNzIsMTAuODhsOS42NC05LjA2YTYuNzMsNi43MywwLDAsMSw5LjUyLjMxbDMwLjkyLDMzTDEwMy41LDUyLjU3YTIwLjg1LDIwLjg1LDAsMCwxLTEuNTksMS42OGwtLjE1LjE0TDkzLjYsNjIsODcuMDcsNjguMWw2LjE1LDYuMzJaIi8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNOTQuMzYsNzUuNTlsLTEuMTQtMS4xN2EyLjI2LDIuMjYsMCwwLDEsLjI5LjI1WiIvPjwvZz48L2c+PC9zdmc+",
+    height: 70,
+    width: 105,
+  },
   shapes: {
     eyeFrame: "circle",
-    body: "square",
+    body: "circle",
     eyeball: "circle",
   },
   colors: {
     background: "white",
-    body: "black",
+    body: "linear-gradient(90deg, rgba(255,31,234,1) 4%, RGBA(225,147,129,1) 35%, rgba(0,212,255,1) 100%)",
     eyeFrame: {
-      topLeft: "black",
-      topRight: "black",
-      bottomLeft: "black",
+      topLeft:
+        "linear-gradient(90deg, RGBA(66, 58, 187, 1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%)",
+      topRight:
+        "linear-gradient(90deg, RGBA(66, 58, 187, 1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%)",
+      bottomLeft:
+        "linear-gradient(90deg, RGBA(66, 58, 187, 1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%)",
     },
     eyeball: {
-      topLeft: "black",
-      topRight: "black",
-      bottomLeft: "black",
+      topLeft:
+        "linear-gradient(90deg, rgba(244,209,74,1) 0%, RGB(5, 5, 5) 35%, rgba(0,212,255,1) 100%)",
+      topRight:
+        "linear-gradient(90deg, rgba(244,209,74,1) 0%, RGB(5, 5, 5) 35%, rgba(0,212,255,1) 100%)",
+      bottomLeft:
+        "linear-gradient(90deg, rgba(244,209,74,1) 0%, RGB(5, 5, 5) 35%, rgba(0,212,255,1) 100%)",
     },
   },
 };
diff --git a/src/index.ts b/src/index.ts
@@ -15,7 +15,7 @@ import {
   squareEyeFrame,
 } from "./eyeframes";
 import { generatePath } from "./path";
-import { generateMatrix } from "./utils";
+import { generateMatrix, renderLogoFromConfig } from "./utils";
 
 const quietZone = 0;
 
@@ -35,7 +35,7 @@ const eyeballFunction: {
 };
 
 export const generateSVGString = (config: Config) => {
-  const matrix = generateMatrix("https://intosoft.com", "L");
+  const matrix = generateMatrix(config.value || "https://intosoft.com", "L");
 
   const path = generatePath({ matrix, size: config.length, config });
 
@@ -48,16 +48,16 @@ export const generateSVGString = (config: Config) => {
     config.length
   }" xmlns="http://www.w3.org/2000/svg">
     <defs>
-      ${generateLinearGradientByConfig(config)}
+    ${generateLinearGradientByConfig(config)}
     </defs>
-    <g>
-      <rect x="${-quietZone}" y="${-quietZone}" width="${
+<g>
+<rect x="${-quietZone}" y="${-quietZone}" width="${
     config.length + quietZone * 2
   }" height="${config.length + quietZone * 2}" fill="${
     config.colors.background
   }" />
-    </g>
-    <g>
+  </g>
+  ${renderLogoFromConfig(config)}
   <path d="${path}" 
      stroke-linecap="butt" 
      stroke-width="${0}"  fill="${
@@ -67,8 +67,8 @@ export const generateSVGString = (config: Config) => {
   }" /> 
   ${generateEyeFrameSVGFromConfig(config, matrix.length)}      
    ${generateEyeballSVGFromConfig(config, matrix.length)} 
-    </g>
     
+   <use xlink:href="#logo"/>
   </svg>`;
 
   return svg;

diff --git a/src/utils.ts b/src/utils.ts
@@ -1,3 +1,4 @@
+import { Config } from "./config";
 import QRCode, { QRCodeErrorCorrectionLevel } from "qrcode";
 
 export const generateMatrix = (
@@ -135,3 +136,14 @@ export const getPositionForEyes = ({
     },
   };
 };
+
+export const renderLogoFromConfig = (config: Config) => {
+  if (config.logo?.url) {
+    const centerX = (config.length - config.logo.width) / 2;
+    const centerY = (config.length - config.logo.height) / 2;
+    return `<image id="logo" xlink:href="${config.logo.url}"  height="${config.logo.height}"
+    width="${config.logo.width}" x="${centerX}" y="${centerY}" />`;
+  }
+
+  return "";
+};
diff --git a/web/package.json b/web/package.json
@@ -11,6 +11,7 @@
     "@types/react": "^18.2.58",
     "@types/react-dom": "^18.2.19",
     "copy-to-clipboard": "^3.3.3",
+    "lodash": "^4.17.21",
     "rc-slider": "^10.5.0",
     "react": "^18.2.0",
     "react-best-gradient-color-picker": "^3.0.7",
@@ -49,6 +50,7 @@
   },
   "devDependencies": {
     "@craco/craco": "^7.1.0",
+    "@types/lodash": "^4.14.202",
     "@types/react-color": "^3.0.12",
     "@types/react-syntax-highlighter": "^15.5.11",
     "customize-cra": "^1.0.0",

diff --git a/web/src/pages/Home/Code.tsx b/web/src/pages/Home/Code.tsx
@@ -21,28 +21,29 @@ type Platform =
   | "vanilla";
 
 const CODES: { [key in Platform]: string } = {
-  react: `
-import QRCode from "@intosoft/qrcode/react";
+  react: `import { generateSVGString } from  '@intosoft/qrcode';
 
-export const QRCodeRenderer = () => {
-    return <QRCode config={config} size={400} />
-}
+  const svgString = generateSVGString(config);
   
+  export  const  RenderQR = () => {
+    return (<div dangerouslySetInnerHTML={{__html: svgString}}/>);
+  };
   `,
-  "react-native": `
-// Prerequisite
+  "react-native": `// Prerequisite
 // npm i react-native-svg | yarn add react-native-svg
-import QRCode from  '@intosoft/qrcode/native';
+import { SvgFromXml } from  "react-native-svg";
+import { generateSVGString } from  '@intosoft/qrcode';
 
-export const QRCodeRenderer = () => {
-    return <QRCode config={config} size={400} />
-}
+const svgString = generateSVGString(config);
+
+export  const  RenderQR = () => {
+	return (<SvgFromXml  xml={svgString}  />);
+};
 `,
   node: ``,
   angular: ``,
   vue: ``,
-  vanilla: `
-<!DOCTYPE html>
+  vanilla: `<!DOCTYPE html>
 <html>
   <body>
     <div id="svg-container"></div>
@@ -83,6 +84,8 @@ const PlatformCode = ({ id }: { id: Platform }) => {
         style={materialDark}
         customStyle={{
           width: "100%",
+          fontSize: 14,
+          borderRadius: 4,
         }}
       >
         {CODES[id]}
@@ -146,6 +149,8 @@ export const CodeBlock = ({ config }: CodeBlockProps) => {
         style={materialDark}
         customStyle={{
           width: "100%",
+          fontSize: 14,
+          borderRadius: 4,
         }}
       >
         {codeString}

diff --git a/web/src/pages/Home/customization/Colors.tsx b/web/src/pages/Home/customization/Colors.tsx
@@ -72,60 +72,60 @@ export const Colors = ({
       label: "Background",
       value: qrConfig.colors.background,
       onChange: (value: string) => {
-        setQrConfig((prev) => ({
-          ...prev,
+        setQrConfig({
+          ...qrConfig,
           colors: {
-            ...prev.colors,
+            ...qrConfig.colors,
             background: value,
           },
-        }));
+        });
       },
     },
     {
       label: "Body",
       value: qrConfig.colors.body,
       onChange: (value: string) => {
-        setQrConfig((prev) => ({
-          ...prev,
+        setQrConfig({
+          ...qrConfig,
           colors: {
-            ...prev.colors,
+            ...qrConfig.colors,
             body: value,
           },
-        }));
+        });
       },
     },
     {
       label: "EyeFrame",
       value: qrConfig.colors.eyeFrame.topLeft,
       onChange: (value: string) => {
-        setQrConfig((prev) => ({
-          ...prev,
+        setQrConfig({
+          ...qrConfig,
           colors: {
-            ...prev.colors,
+            ...qrConfig.colors,
             eyeFrame: {
               topLeft: value,
               topRight: value,
               bottomLeft: value,
             },
           },
-        }));
+        });
       },
     },
     {
       label: "Eyeball",
       value: qrConfig.colors.eyeball.topLeft,
       onChange: (value: string) => {
-        setQrConfig((prev) => ({
-          ...prev,
+        setQrConfig({
+          ...qrConfig,
           colors: {
-            ...prev.colors,
+            ...qrConfig.colors,
             eyeball: {
               topLeft: value,
               topRight: value,
               bottomLeft: value,
             },
           },
-        }));
+        });
       },
     },
   ];

diff --git a/web/src/pages/Home/customization/Content.tsx b/web/src/pages/Home/customization/Content.tsx
@@ -0,0 +1,40 @@
+import styled from "styled-components";
+
+import { CustomizationSectionProps } from "./type";
+
+const Input = styled.input`
+  height: 40px;
+  width: 100%;
+  border: 1px solid #d0d7df;
+  border-radius: 4px;
+  padding: 4px 10px;
+  outline: none;
+
+  &:focus {
+    border: 1px solid #a2e344;
+  }
+`;
+
+const Label = styled.p`
+  margin: 4px 2px;
+`;
+
+export const Content = ({
+  setQrConfig,
+  qrConfig,
+}: CustomizationSectionProps) => {
+  return (
+    <>
+      <Label>Enter your URL</Label>
+      <Input
+        value={qrConfig.value}
+        onChange={({ target: { value } }) =>
+          setQrConfig({
+            ...qrConfig,
+            value,
+          })
+        }
+      />
+    </>
+  );
+};