@akinon/projectzero 1.32.0 → 1.33.0

package/app-template/src/assets/icons/pin.svg

@@ -0,0 +1,16 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 34 34" style="enable-background:new 0 0 34 34;" space="preserve">
+<style type="text/css">
+	.st0{fill:#E95151;}
+</style>
+<g>
+	<g>
+		<circle class="st0" cx="17" cy="11.6" r="3.1"></circle>
+		<path class="st0" d="M8.1,19.5L17,31.6l8.9-12.1c3.4-4.3,2.9-11.2-1-14.9c-2.1-2-4.9-3.1-7.9-3.1s-5.8,1.1-7.9,3.1
+			C5.2,8.2,4.8,15.2,8.1,19.5z M17,7.2c2.4,0,4.4,2,4.4,4.4c0,2.4-2,4.4-4.4,4.4s-4.4-2-4.4-4.4C12.6,9.2,14.6,7.2,17,7.2z"></path>
+	</g>
+	<path d="M17,16c2.4,0,4.4-2,4.4-4.4s-2-4.4-4.4-4.4s-4.4,2-4.4,4.4S14.6,16,17,16z M17,8.5c1.7,0,3.1,1.4,3.1,3.1s-1.4,3.1-3.1,3.1
+		s-3.1-1.4-3.1-3.1S15.3,8.5,17,8.5z M17,33.8l9.9-13.6c3.7-4.7,3.2-12.4-1.2-16.5c-2.3-2.2-5.5-3.4-8.8-3.4s-6.4,1.2-8.8,3.4
+		C3.9,7.8,3.4,15.5,7.1,20.2L17,33.8z M9.1,4.5c2.1-2,4.9-3.1,7.9-3.1s5.8,1.1,7.9,3.1c3.9,3.7,4.4,10.7,1,14.9L17,31.6L8.1,19.5
+		C4.8,15.2,5.2,8.2,9.1,4.5z"></path>
+</g>
+</svg>

package/app-template/src/assets/icons/pinterest.svg

@@ -0,0 +1,12 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 15 15" style="enable-background:new 0 0 15 15;" space="preserve">
+<style type="text/css">
+	.st0{enable-background:new    ;}
+</style>
+<g class="st0">
+	<path d="M7.5,14.8c-0.8,0-1.5-0.1-2.2-0.3c0.3-0.5,0.7-1.3,0.9-1.9c0.1-0.3,0.5-1.7,0.5-1.7c0.2,0.5,0.9,0.8,1.7,0.8
+		c2.2,0,3.8-2,3.8-4.5c0-2.4-2-4.2-4.5-4.2C4.5,2.9,2.9,5,2.9,7.3c0,1.1,0.6,2.4,1.5,2.8c0.1,0.1,0.2,0,0.2-0.1
+		c0-0.1,0.1-0.6,0.2-0.8c0-0.1,0-0.1,0-0.2C4.4,8.6,4.2,8,4.2,7.4c0-1.6,1.2-3.2,3.3-3.2c1.8,0,3,1.2,3,3c0,2-1,3.3-2.3,3.3
+		c-0.7,0-1.2-0.6-1.1-1.3c0.2-0.9,0.6-1.8,0.6-2.4c0-0.6-0.3-1-0.9-1c-0.7,0-1.3,0.8-1.3,1.8c0,0.6,0.2,1.1,0.2,1.1s-0.7,3-0.8,3.6
+		c-0.1,0.6-0.1,1.5,0,2.1c-2.7-1.1-4.6-3.7-4.6-6.8c0-4,3.3-7.3,7.3-7.3s7.3,3.3,7.3,7.3S11.5,14.8,7.5,14.8z"></path>
+</g>
+</svg>

package/app-template/src/assets/icons/plus.svg

@@ -0,0 +1,5 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 18 18" style="enable-background:new 0 0 18 18;" space="preserve">
+<title>Group 3</title>
+<path d="M17.2,8H10V0.8C10,0.4,9.6,0,9.2,0H8.8C8.4,0,8,0.4,8,0.8V8H0.8C0.4,8,0,8.4,0,8.8v0.4C0,9.6,0.4,10,0.8,10H8v7.2
+	C8,17.6,8.4,18,8.8,18h0.4c0.4,0,0.8-0.4,0.8-0.8V10h7.2c0.4,0,0.8-0.4,0.8-0.8V8.8C18,8.4,17.6,8,17.2,8z"></path>
+</svg>

package/app-template/src/assets/icons/search.svg

@@ -0,0 +1,13 @@
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
+    <title>Group 3</title>
+    
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="header/mobile" transform="translate(-262.000000, -16.000000)">
+            <g id="Group-3" transform="translate(262.000000, 16.000000)">
+                
+                <g id="Clip-2"></g>
+                <path d="M1.01537308,6.41537308 C1.01537308,3.43779231 3.43779231,1.01537308 6.41537308,1.01537308 C9.39295385,1.01537308 11.8153731,3.43779231 11.8153731,6.41537308 C11.8153731,9.39295385 9.39295385,11.8153731 6.41537308,11.8153731 C3.43779231,11.8153731 1.01537308,9.39295385 1.01537308,6.41537308 M17.8508769,17.13375 L11.2938577,10.5766962 C12.2515615,9.45560769 12.8307462,8.00193462 12.8307462,6.41537308 C12.8307462,2.87792308 9.95282308,0 6.41537308,0 C2.87792308,0 0,2.87792308 0,6.41537308 C0,9.95282308 2.87792308,12.8307462 6.41537308,12.8307462 C8.00158846,12.8307462 9.45491538,12.2518038 10.5759,11.2945154 L17.1334731,17.8521577 C17.2298769,17.9474885 17.3572962,18 17.4922962,18 C17.6278846,18 17.7552346,17.9473154 17.8508769,17.8516038 C18.0488077,17.6536731 18.0488077,17.3316462 17.8508769,17.13375" id="Fill-1" fill="#000000" mask="url(#mask-2)"></path>
+            </g>
+        </g>
+    </g>
+</svg>

package/app-template/src/assets/icons/share.svg

@@ -0,0 +1,10 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 31 31" style="enable-background:new 0 0 31 31;" space="preserve">
+<path d="M24.1,19.9c-1.4,0-2.7,0.5-3.6,1.5c-0.2,0.2-0.4,0.4-0.6,0.7l-8.1-4.9c0.2-0.6,0.3-1.1,0.3-1.7c0-0.6-0.1-1.2-0.3-1.7
+	l8.1-4.9c1,1.4,2.5,2.2,4.2,2.2c2.8,0,5.2-2.3,5.2-5.2c0-2.8-2.3-5.2-5.2-5.2s-5.2,2.3-5.2,5.2c0,0.6,0.1,1.1,0.3,1.6l-8.1,4.9
+	c-1-1.3-2.5-2.1-4.2-2.1c-2.8,0-5.2,2.3-5.2,5.2c0,2.8,2.3,5.2,5.2,5.2c1.7,0,3.2-0.8,4.2-2.1l8.1,4.9c-0.2,0.5-0.3,1.1-0.3,1.6
+	c0,1.4,0.5,2.7,1.5,3.7c1,1,2.3,1.5,3.6,1.5c1.4,0,2.7-0.5,3.6-1.5c1-1,1.5-2.3,1.5-3.7c0-1.4-0.5-2.7-1.5-3.7
+	C26.8,20.5,25.5,19.9,24.1,19.9z M27.8,25.1c0,1-0.4,1.9-1.1,2.6c-0.7,0.7-1.6,1.1-2.6,1.1c0,0,0,0,0,0c-1,0-1.9-0.4-2.6-1.1
+	c-0.7-0.7-1.1-1.6-1.1-2.6s0.4-1.9,1.1-2.6c0.7-0.7,1.6-1.1,2.6-1.1c1,0,1.9,0.4,2.6,1.1C27.4,23.2,27.8,24.1,27.8,25.1z M20.4,5.9
+	c0-2,1.6-3.7,3.7-3.7c2,0,3.7,1.7,3.7,3.7c0,2-1.6,3.7-3.7,3.7C22.1,9.6,20.4,7.9,20.4,5.9z M10.6,15.5c0,2-1.6,3.7-3.7,3.7
+	s-3.7-1.7-3.7-3.7c0-2,1.6-3.7,3.7-3.7S10.6,13.4,10.6,15.5z"></path>
+</svg>

package/app-template/src/assets/icons/spinner.svg

@@ -0,0 +1,6 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 18 18" style="enable-background:new 0 0 18 18;" space="preserve">
+<title>Group 3</title>
+<path d="M14.9,3.1l-0.6,0.6c-0.2,0.2-0.2,0.6,0,0.8c2.4,2.8,2.2,7-0.5,9.6c-2.7,2.6-7.1,2.6-9.8,0c-2.7-2.6-2.8-6.8-0.5-9.6
+	c0.2-0.2,0.2-0.6,0-0.8L3.1,3.1c-0.2-0.2-0.6-0.2-0.9,0c-3.1,3.6-2.9,9.1,0.6,12.5c3.4,3.2,8.9,3.2,12.4,0c3.5-3.4,3.7-8.9,0.6-12.5
+	C15.6,2.8,15.2,2.8,14.9,3.1z"></path>
+</svg>

package/app-template/src/assets/icons/store-pin.svg

@@ -0,0 +1,14 @@
+<svg width="17px" height="17px" viewBox="0 0 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
+    <title>placeholder (1)</title>
+    <g id="03-urun-detay" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="03_urundetay" transform="translate(-1186.000000, -628.000000)" fill="#000000" fill-rule="nonzero">
+            <g id="Group-5" transform="translate(906.000000, 624.000000)">
+                <g id="placeholder-(1)" transform="translate(280.000000, 4.000000)">
+                    <path d="M8.5,7.36666667 C9.59366667,7.36666667 10.4833333,6.47671667 10.4833333,5.38333333 C10.4833333,4.28995 9.59366667,3.4 8.5,3.4 C7.40633333,3.4 6.51666667,4.28995 6.51666667,5.38333333 C6.51666667,6.47671667 7.40633333,7.36666667 8.5,7.36666667 Z M8.5,3.96666667 C9.28115,3.96666667 9.91666667,4.60218333 9.91666667,5.38333333 C9.91666667,6.16448333 9.28115,6.8 8.5,6.8 C7.71885,6.8 7.08333333,6.16448333 7.08333333,5.38333333 C7.08333333,4.60218333 7.71885,3.96666667 8.5,3.96666667 Z" id="Shape"></path>
+                    <path d="M8.44985,15.5144833 L12.7964667,9.23666667 C14.4267667,7.06321667 14.1910333,3.49066667 12.29185,1.59176667 C11.2656167,0.56525 9.90108333,0 8.44985,0 C6.99861667,0 5.63408333,0.56525 4.60785,1.59148333 C2.70866667,3.49038333 2.47293333,7.06293333 4.09671667,9.22788333 L8.44985,15.5144833 Z M5.00848333,1.99211667 C5.9279,1.07298333 7.14991667,0.566666667 8.44985,0.566666667 C9.74978333,0.566666667 10.9718,1.07298333 11.8912167,1.99211667 C13.6053833,3.706 13.8164667,6.9326 12.3369,8.90516667 L8.44985,14.51885 L4.55656667,8.89666667 C3.08323333,6.9326 3.2946,3.706 5.00848333,1.99211667 Z" id="Shape"></path>
+                    <path d="M11.93315,12.1853167 C11.7773167,12.1663333 11.6367833,12.2779667 11.61865,12.4335167 C11.6005167,12.5890667 11.7115833,12.7298833 11.86685,12.7480167 C14.8463833,13.0987833 16.4333333,14.0439833 16.4333333,14.5916667 C16.4333333,15.3606333 13.4152667,16.4333333 8.5,16.4333333 C3.58473333,16.4333333 0.566666667,15.3606333 0.566666667,14.5916667 C0.566666667,14.0439833 2.15361667,13.0987833 5.13315,12.7480167 C5.28841667,12.7298833 5.39948333,12.5887833 5.38135,12.4335167 C5.36293333,12.2779667 5.2224,12.1657667 5.06685,12.1853167 C2.08363333,12.53665 0,13.52605 0,14.5916667 C0,15.7884667 2.91975,17 8.5,17 C14.08025,17 17,15.7884667 17,14.5916667 C17,13.52605 14.9163667,12.53665 11.93315,12.1853167 Z" id="Path"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/app-template/src/assets/icons/track-order.svg

@@ -0,0 +1 @@
+<svg height="480pt" viewBox="0 -72 480 480" width="480pt" xmlns="http://www.w3.org/2000/svg"><path d="m120 224c-30.929688 0-56 25.070312-56 56s25.070312 56 56 56 56-25.070312 56-56-25.070312-56-56-56zm0 96c-22.089844 0-40-17.910156-40-40s17.910156-40 40-40 40 17.910156 40 40-17.910156 40-40 40zm0 0"></path><path d="m120 256c-13.253906 0-24 10.746094-24 24s10.746094 24 24 24 24-10.746094 24-24-10.746094-24-24-24zm0 32c-4.417969 0-8-3.582031-8-8s3.582031-8 8-8 8 3.582031 8 8-3.582031 8-8 8zm0 0"></path><path d="m376 224c-30.929688 0-56 25.070312-56 56s25.070312 56 56 56 56-25.070312 56-56-25.070312-56-56-56zm0 96c-22.089844 0-40-17.910156-40-40s17.910156-40 40-40 40 17.910156 40 40-17.910156 40-40 40zm0 0"></path><path d="m376 256c-13.253906 0-24 10.746094-24 24s10.746094 24 24 24 24-10.746094 24-24-10.746094-24-24-24zm0 32c-4.417969 0-8-3.582031-8-8s3.582031-8 8-8 8 3.582031 8 8-3.582031 8-8 8zm0 0"></path><path d="m384 160h-16v-32c0-4.417969-3.582031-8-8-8s-8 3.582031-8 8v32c0 8.835938 7.164062 16 16 16h16c4.417969 0 8-3.582031 8-8s-3.582031-8-8-8zm0 0"></path><path d="m144 48c-30.929688 0-56 25.070312-56 56 0 27.679688 22.320312 96 56 96s56-68.320312 56-96c0-30.929688-25.070312-56-56-56zm0 136c-18.398438 0-40-52.878906-40-80 0-22.089844 17.910156-40 40-40s40 17.910156 40 40c0 27.121094-21.601562 80-40 80zm0 0"></path><path d="m144 80c-13.253906 0-24 10.746094-24 24s10.746094 24 24 24 24-10.746094 24-24-10.746094-24-24-24zm0 32c-4.417969 0-8-3.582031-8-8s3.582031-8 8-8 8 3.582031 8 8-3.582031 8-8 8zm0 0"></path><path d="m192 184c0 4.417969 3.582031 8 8 8h32c4.417969 0 8-3.582031 8-8s-3.582031-8-8-8h-32c-4.417969 0-8 3.582031-8 8zm0 0"></path><path d="m96 184c0-4.417969-3.582031-8-8-8h-32c-4.417969 0-8 3.582031-8 8s3.582031 8 8 8h32c4.417969 0 8-3.582031 8-8zm0 0"></path><path d="m440 192h-10l-26.960938-94.640625c-2.964843-10.300781-12.402343-17.382813-23.117187-17.359375h-91.921875v-40c0-22.089844-17.910156-40-40-40h-216c-17.671875 0-32 14.328125-32 32v224c0 17.671875 14.328125 32 32 32h8c4.417969 0 8-3.582031 8-8s-3.582031-8-8-8h-8c-8.835938 0-16-7.164062-16-16v-224c0-8.835938 7.164062-16 16-16h216c13.253906 0 24 10.746094 24 24v232h-72c-4.417969 0-8 3.582031-8 8s3.582031 8 8 8h96c4.417969 0 8-3.582031 8-8s-3.582031-8-8-8h-8v-64h152c13.253906 0 24 10.746094 24 24v40h-8c-4.417969 0-8 3.582031-8 8s3.582031 8 8 8h16c4.417969 0 8-3.582031 8-8v-48c0-22.089844-17.910156-40-40-40zm-152-96h32v72c0 4.417969 3.582031 8 8 8s8-3.582031 8-8v-72h43.921875c3.671875-.144531 6.972656 2.230469 8 5.761719l25.4375 90.238281h-125.359375zm0 0"></path></svg>

package/app-template/src/assets/icons/twitter.svg

@@ -0,0 +1,11 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 15 15" style="enable-background:new 0 0 15 15;" space="preserve">
+<style type="text/css">
+	.st0{enable-background:new    ;}
+</style>
+<g class="st0">
+	<path d="M13.5,4.8c0,4.1-3.1,8.7-8.7,8.7c-1.7,0-3.4-0.5-4.7-1.4c0.2,0,0.5,0,0.7,0c1.4,0,2.8-0.5,3.8-1.3c-1.4,0-2.5-0.9-2.9-2.1
+		c0.2,0,0.4,0,0.6,0c0.3,0,0.6,0,0.8-0.1c-1.4-0.3-2.5-1.5-2.5-3v0C1,5.9,1.5,6.1,2,6.1C1.2,5.5,0.6,4.6,0.6,3.5C0.6,3,0.8,2.4,1,2
+		c1.5,1.9,3.8,3.1,6.3,3.2c0-0.2-0.1-0.5-0.1-0.7c0-1.7,1.4-3.1,3.1-3.1c0.9,0,1.7,0.4,2.2,1c0.7-0.1,1.4-0.4,2-0.7
+		c-0.2,0.7-0.7,1.3-1.4,1.7c0.6-0.1,1.2-0.2,1.8-0.5c-0.4,0.6-0.9,1.2-1.5,1.6C13.5,4.6,13.5,4.7,13.5,4.8z"></path>
+</g>
+</svg>

package/app-template/src/assets/icons/user.svg

@@ -0,0 +1,14 @@
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" space="preserve">
+<g id="_x30_7-hesabim">
+	<g id="_x30_6_x5F_hesabim_x5F_03_x5F_mobil" transform="translate(-58.000000, -95.000000)">
+		<g id="Group" transform="translate(39.000000, 95.000000)">
+			<g id="Group-2" transform="translate(19.000000, 0.000000)">
+				<path id="Path" d="M21.6,24h-1.2v-5.4c0-1.7-1.3-3-3-3H6.6c-1.7,0-3,1.3-3,3V24H2.4v-5.4c0-2.3,1.9-4.2,4.2-4.2h10.8
+					c2.3,0,4.2,1.9,4.2,4.2V24z"></path>
+				<path id="Shape" d="M12,13.2c-3.6,0-6.6-3-6.6-6.6S8.4,0,12,0s6.6,3,6.6,6.6c0,1.7-0.7,3.4-1.9,4.7S13.7,13.2,12,13.2z M12,1.2
+					c-3,0-5.4,2.4-5.4,5.4S9,12,12,12s5.4-2.4,5.4-5.4S15,1.2,12,1.2z"></path>
+			</g>
+		</g>
+	</g>
+</g>
+</svg>

package/app-template/src/assets/icons/whatsapp.svg

@@ -0,0 +1,45 @@
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" space="preserve">
+<g>
+	<g>
+		<path d="M256.064,0h-0.128C114.784,0,0,114.816,0,256c0,56,18.048,107.904,48.736,150.048l-31.904,95.104l98.4-31.456
+			C155.712,496.512,204,512,256.064,512C397.216,512,512,397.152,512,256S397.216,0,256.064,0z M405.024,361.504
+			c-6.176,17.44-30.688,31.904-50.24,36.128c-13.376,2.848-30.848,5.12-89.664-19.264C189.888,347.2,141.44,270.752,137.664,265.792
+			c-3.616-4.96-30.4-40.48-30.4-77.216s18.656-54.624,26.176-62.304c6.176-6.304,16.384-9.184,26.176-9.184
+			c3.168,0,6.016,0.16,8.576,0.288c7.52,0.32,11.296,0.768,16.256,12.64c6.176,14.88,21.216,51.616,23.008,55.392
+			c1.824,3.776,3.648,8.896,1.088,13.856c-2.4,5.12-4.512,7.392-8.288,11.744c-3.776,4.352-7.36,7.68-11.136,12.352
+			c-3.456,4.064-7.36,8.416-3.008,15.936c4.352,7.36,19.392,31.904,41.536,51.616c28.576,25.44,51.744,33.568,60.032,37.024
+			c6.176,2.56,13.536,1.952,18.048-2.848c5.728-6.176,12.8-16.416,20-26.496c5.12-7.232,11.584-8.128,18.368-5.568
+			c6.912,2.4,43.488,20.48,51.008,24.224c7.52,3.776,12.48,5.568,14.304,8.736C411.2,329.152,411.2,344.032,405.024,361.504z"></path>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

package/app-template/src/components/__tests__/Modal.test.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Modal } from '../modal';
+
+describe('Modal Component', () => {
+  it('should render as expected when modal is true', () => {
+    const closeFn = jest.fn();
+
+    const { getByText } = render(
+      <Modal portalId="example-modal" open={true} setOpen={closeFn}>
+        This modal is so cool!
+      </Modal>
+    );
+
+    expect(getByText('This modal is so cool!')).toBeTruthy();
+  });
+
+  it('should render as expected when modal is false', () => {
+    const closeFn = jest.fn();
+
+    render(
+      <Modal portalId="example-modal" open={false} setOpen={closeFn}>
+        This modal is so cool!
+      </Modal>
+    );
+
+    const text = screen.queryByText('This modal is so cool!');
+    expect(text).not.toBeInTheDocument();
+  });
+
+  it('should have portalId', () => {
+    const portalId = 'example-modal';
+
+    const closeFn = jest.fn();
+
+    render(
+      <Modal portalId={portalId} open={true} setOpen={closeFn}>
+        This modal is so cool!
+      </Modal>
+    );
+
+    const element = document.getElementById(portalId);
+
+    expect(element.getAttribute('id')).toBe(portalId);
+  });
+
+  it('has given class names', () => {
+    const closeFn = jest.fn();
+
+    render(
+      <Modal
+        portalId="example-modal"
+        open={true}
+        setOpen={closeFn}
+        className="accent-primary"
+      >
+        This modal is so cool!
+      </Modal>
+    );
+
+    const section = document.querySelector('section');
+
+    expect(section).toHaveClass('accent-primary');
+  });
+
+  it('should have title', () => {
+    const closeFn = jest.fn();
+
+    render(
+      <Modal
+        portalId="example-modal"
+        open={true}
+        setOpen={closeFn}
+        title="Example Title"
+      >
+        This modal is so cool!
+      </Modal>
+    );
+
+    const title = document.querySelector('h3');
+
+    expect(title).toHaveTextContent('Example Title');
+  });
+
+  it('should have close button', () => {
+    const closeFn = jest.fn();
+
+    render(
+      <Modal
+        portalId="example-modal"
+        open={true}
+        setOpen={closeFn}
+        showCloseButton
+      >
+        This modal is so cool!
+      </Modal>
+    );
+
+    const button = document.querySelector('use');
+
+    expect(button.getAttribute('xlink:href')).toBe('/icon-sprite.svg#close');
+  });
+});

package/app-template/src/components/__tests__/accordion.test.tsx

@@ -0,0 +1,65 @@
+import { render, screen } from '@testing-library/react';
+import { Accordion } from '../accordion';
+
+const accordionContent = {
+  title: 'test-title',
+  subTitle: 'test-subtitle',
+  content: 'Test-content',
+  className: 'test-class',
+  icons: ['globe'],
+  iconColor: '#D02B2F'
+};
+
+describe('Accordion Component', () => {
+  it('should give class names correctly', () => {
+    const { container } = render(
+      <Accordion className={accordionContent.className}></Accordion>
+    );
+
+    expect(container.firstChild).toHaveClass(accordionContent.className);
+  });
+
+  it('should be icon and icon color', () => {
+    const { container } = render(
+      <Accordion
+        isCollapse={true}
+        icons={accordionContent.icons}
+        iconColor={accordionContent.iconColor}
+      ></Accordion>
+    );
+    const svg = container.querySelector('svg');
+
+    expect(svg).toHaveClass(`fill-[${accordionContent.iconColor}]}`);
+    expect(svg).toBeInTheDocument();
+  });
+
+  it('should render a accordion content correctly', () => {
+    render(
+      <Accordion isCollapse={true}>
+        <div>{accordionContent.content}</div>
+      </Accordion>
+    );
+    const accordion = screen.getByText(accordionContent.content);
+
+    expect(accordion).toBeInTheDocument();
+  });
+
+  it('should render a accordion title and title class correctly', () => {
+    render(
+      <Accordion
+        titleClassName={accordionContent.className}
+        title={accordionContent.title}
+      ></Accordion>
+    );
+    const accordion = screen.getByText(accordionContent.title);
+
+    expect(accordion).toHaveClass(accordionContent.className);
+  });
+
+  it('should render a accordion sub title correctly', () => {
+    render(<Accordion subTitle={accordionContent.subTitle}></Accordion>);
+    const accordion = screen.getByText(accordionContent.subTitle);
+
+    expect(accordion).toBeTruthy();
+  });
+});

package/app-template/src/components/__tests__/badge.test.tsx

@@ -0,0 +1,20 @@
+import { render, screen } from '@testing-library/react';
+import { Badge } from '../badge';
+
+describe('Badge Component', () => {
+  let badge;
+
+  beforeEach(() => {
+    render(<Badge className="text-md rounded-sm">%90 off</Badge>);
+
+    badge = screen.getByText('%90 off');
+  });
+
+  it('should render without throwing an error', () => {
+    expect(badge).toBeInTheDocument();
+  });
+
+  it('should be classname checked', () => {
+    expect(badge).toHaveClass('text-md rounded-sm');
+  });
+});

package/app-template/src/components/__tests__/button.test.tsx

@@ -0,0 +1,59 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { Button } from '../button';
+
+describe('Button Component', () => {
+  it('should render without throwing an error', () => {
+    render(<Button>Button</Button>);
+
+    const button = screen.getByRole('button', {
+      name: /button/i
+    });
+
+    expect(button).toBeTruthy();
+  });
+
+  it('should work outlined appearance without error', () => {
+    render(<Button appearance="outlined">Outlined Button</Button>);
+
+    const button = screen.getByRole('button', {
+      name: /outlined/i
+    });
+
+    expect(button).toHaveAttribute('appearance', 'outlined');
+    expect(button).toHaveClass(
+      'bg-transparent text-primary hover:bg-primary hover:text-primary-foreground'
+    );
+  });
+
+  it('should render a disabled button', () => {
+    render(<Button disabled />);
+
+    const button = screen.getByRole('button');
+
+    expect(button).toHaveAttribute('disabled');
+    expect(button).toBeDisabled();
+  });
+
+  it('should invoke an onClick handler when passed', () => {
+    const handleClick = jest.fn();
+
+    render(<Button onClick={handleClick}>Click Me</Button>);
+
+    fireEvent.click(screen.getByText(/click me/i));
+
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('should work ghost appearance without error', () => {
+    render(<Button appearance="ghost">Ghost Button</Button>);
+
+    const button = screen.getByRole('button', {
+      name: /ghost button/i
+    });
+
+    expect(button).toHaveAttribute('appearance', 'ghost');
+    expect(button).toHaveClass(
+      'bg-transparent border-transparent text-primary hover:bg-primary hover:text-primary-foreground'
+    );
+  });
+});

package/app-template/src/components/__tests__/checkbox.test.tsx

@@ -0,0 +1,57 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Checkbox } from '../checkbox';
+
+describe('Checkbox input', () => {
+  it('should render without throwing an error', () => {
+    render(<Checkbox />);
+
+    const checkbox = screen.getByRole('checkbox');
+
+    expect(checkbox).toBeTruthy();
+  });
+
+  it('should be checked when clicked', () => {
+    render(<Checkbox />);
+
+    const checkbox = screen.getByRole('checkbox');
+
+    expect(checkbox).not.toBeChecked();
+
+    fireEvent.click(checkbox);
+
+    expect(checkbox).toBeChecked();
+  });
+
+  it('should be label checked', () => {
+    render(<Checkbox>Checkbox</Checkbox>);
+
+    const checkbox = screen.getByRole('checkbox', {
+      name: /checkbox/i
+    });
+
+    expect(checkbox).toBeTruthy();
+  });
+
+  it('should be label classname checked', () => {
+    const { container } = render(
+      <Checkbox className="accent-primary">Checkbox</Checkbox>
+    );
+
+    const label = container.querySelector('label');
+
+    expect(label).toHaveClass('accent-primary');
+  });
+
+  it('should be error message checked', () => {
+    const error = {
+      type: '',
+      message: 'Error message'
+    };
+
+    render(<Checkbox error={error} />);
+
+    const errorMessage = screen.getByText(error.message);
+
+    expect(errorMessage).toBeTruthy();
+  });
+});

package/app-template/src/components/__tests__/file-input.test.tsx

@@ -0,0 +1,42 @@
+import { render, screen, fireEvent, waitFor} from '@testing-library/react';
+import { FileInput} from '../file-input';
+
+describe('File Input Component', () => {
+  let input;
+
+  beforeEach(() => {
+    render(
+      <>
+        <label htmlFor="fileUpload">Upload file</label>
+        <FileInput className="bg-primary" id="fileUpload" />
+      </>
+    );
+    input = screen.getByLabelText('Upload file');
+  });
+
+  it('should be file selected without getting an error', async () => {
+    const file = new File(["logo"], "logo.png", { type: "image/png" });
+
+    expect(input.files.length).toBe(0);
+
+    await waitFor(() =>
+      fireEvent.change(input, {
+        target: { files: [file] },
+      })
+    );
+
+    expect(input.files[0].name).toBe("logo.png");
+    expect(input.files.length).toBe(1);
+  });
+
+  it('should be classname checked', () => {
+    expect(input).toHaveClass('bg-primary');
+  });
+
+  it('should render a disabled', () => {
+    input.setAttribute('disabled', 'true');
+
+    expect(input).toHaveAttribute('disabled');
+    expect(input).toBeDisabled();
+  });
+});

package/app-template/src/components/__tests__/icon.test.tsx

@@ -0,0 +1,39 @@
+import { render, screen } from '@testing-library/react';
+import { Icon } from '../icon';
+
+describe('Icon Component', () => {
+  it('Should successfully render icon component', () => {
+    render(<Icon name="cart" data-testid="icon" />);
+
+    const icon = screen.getByTestId('icon');
+
+    expect(icon).toHaveAttribute('height', '18');
+    expect(icon).toHaveAttribute('viewBox', '0 0 18 18');
+    expect(icon.querySelector('use')).toHaveAttribute(
+      'xlink:href',
+      '/icon-sprite.svg#cart'
+    );
+  });
+
+  it('Can change the size', () => {
+    const size = 33;
+
+    render(<Icon name="cart" size={size} data-testid="icon" />);
+
+    const icon = screen.getByTestId('icon');
+
+    expect(icon).toHaveAttribute('height', String(size));
+    expect(icon).toHaveAttribute('viewBox', `0 0 ${size} ${size}`);
+  });
+
+  it('Can change the color', async () => {
+    render(<Icon name="cart" className="fill-[#ff0000]" data-testid="icon" />);
+
+    const icon = screen.getByTestId('icon');
+    const fillColor = getComputedStyle(icon).getPropertyValue('fill');
+
+    setTimeout(() => {
+      expect(fillColor).toBe('rgb(255, 0, 0)');
+    }, 0);
+  });
+});

package/app-template/src/components/__tests__/input.test.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { render, fireEvent, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { Input } from '../input';
+
+describe('Input Component', () => {
+  it('rendered input', () => {
+    render(<Input />);
+    const input = screen.getByRole('textbox');
+
+    expect(input).toBeTruthy();
+  });
+
+  it('should render a placeholder input correctly', () => {
+    render(<Input placeholder="Test placeholder" />);
+    const input = screen.getByPlaceholderText('Test placeholder');
+
+    expect(input).toBeInTheDocument();
+  });
+
+  it('has given class names', () => {
+    render(<Input className="test-class" />);
+    const input = screen.getByRole('textbox');
+
+    expect(input).toHaveClass('test-class');
+  });
+
+  it('should render a disabled input correctly', () => {
+    render(<Input disabled />);
+    const input = screen.getByRole('textbox');
+
+    expect(input).toHaveAttribute('disabled');
+    expect(input).toBeDisabled();
+  });
+
+  it('should be focus correctly', () => {
+    render(<Input />);
+    const input = screen.getByRole('textbox');
+
+    setTimeout(() => expect(input.focus).toHaveBeenCalled(), 250);
+  });
+
+  it('should be label', () => {
+    const { getByText } = render(<Input label="Example Label" />);
+    expect(getByText('Example Label')).toBeTruthy();
+  });
+
+  it('should be error message', () => {
+    const error = {
+      type: '',
+      message: 'Error message'
+    };
+    render(<Input error={error} />);
+    const errorMessage = screen.getByText(error.message);
+    expect(errorMessage).toBeTruthy();
+  });
+
+  it('should change the value without error', () => {
+    render(<Input />);
+    const input = screen.getByRole('textbox');
+    fireEvent.change(input, {
+      target: {
+        value: 'test'
+      }
+    });
+
+    expect(input).toHaveValue('test');
+  });
+});