app now PWA capable

Seb-GRAF · Sep 21, 2022 · 371d3fd · 371d3fd · vercel · Sep 21, 2022
1 parent bb43183
commit 371d3fd
Show file tree

Hide file tree

Showing 54 changed files with 280 additions and 35 deletions.
diff --git a/components/FontHelper/FontSizeHelper.tsx b/components/FontHelper/FontSizeHelper.tsx
@@ -63,7 +63,7 @@ const FontSizeHelper = ({ setFontSize }: Props): JSX.Element => {
             step={unit === 'px' ? 1 : unit === 'rem' ? 0.125 : 0.1}
             min={unit === 'px' ? 12 : unit === 'rem' ? 0.75 : 0}
             max={unit === 'px' ? 128 : unit === 'rem' ? 8 : 0}
-            value={value || 0}
+            value={value}
             setValue={setValue}
             hasUnit={true}
           />

diff --git a/components/FontHelper/FontWeightHelper.tsx b/components/FontHelper/FontWeightHelper.tsx
@@ -58,7 +58,7 @@ const FontWeightHelper = ({ setFontWeight }: Props): JSX.Element => {
           step={100}
           min={100}
           max={900}
-          value={value || 400}
+          value={value}
           setValue={setValue}
           hasUnit={false}
         />
@@ -67,7 +67,7 @@ const FontWeightHelper = ({ setFontWeight }: Props): JSX.Element => {
           step={100}
           min={100}
           max={900}
-          value={value || 400}
+          value={value}
           setValue={setValue}
         />
       </WidgetConverter>

diff --git a/components/FontHelper/LetterSpacingHelper.tsx b/components/FontHelper/LetterSpacingHelper.tsx
@@ -53,12 +53,11 @@ const LetterSpacingHelper = ({ setLetterSpacing }: Props): JSX.Element => {
       <WidgetConverter helperName='Letter Spacing'>
         <div className='relative w-full'>
           <StyledInput
-            type='number'
             step={0.025}
             name='Letter spacing'
             min={-0.05}
             max={0.1}
-            value={value || 0}
+            value={value}
             setValue={setValue}
             hasUnit={true}
           />
@@ -70,7 +69,7 @@ const LetterSpacingHelper = ({ setLetterSpacing }: Props): JSX.Element => {
           step={0.025}
           min={-0.05}
           max={0.1}
-          value={value || 0}
+          value={value}
           setValue={setValue}
         />
       </WidgetConverter>

diff --git a/components/GridHelper/GapHelper.tsx b/components/GridHelper/GapHelper.tsx
@@ -45,7 +45,7 @@ const GapHelper = ({ setGap }: Props): JSX.Element => {
             step={unit === 'px' ? 1 : unit === 'rem' ? 0.125 : 0.1}
             min={0}
             max={unit === 'px' ? 384 : unit === 'rem' ? 24 : 0}
-            value={value || 0}
+            value={value}
             setValue={setValue}
             hasUnit={true}
           />
@@ -57,7 +57,7 @@ const GapHelper = ({ setGap }: Props): JSX.Element => {
           step={unit === 'px' ? 1 : unit === 'rem' ? 0.125 : 0.1}
           min={0}
           max={unit === 'px' ? 384 : unit === 'rem' ? 24 : 0}
-          value={value || 0}
+          value={value}
           setValue={setValue}
         />
 

diff --git a/components/LayoutHelper/BorderRadiusHelper.tsx b/components/LayoutHelper/BorderRadiusHelper.tsx
@@ -163,7 +163,7 @@ const BorderRadiusHelper = ({ setBorderRadius }: Props): JSX.Element => {
             step={unit === 'px' ? 1 : unit === 'rem' ? 0.125 : 0.1}
             min={0}
             max={unit === 'px' ? 32 : unit === 'rem' ? 2 : 0}
-            value={value || 0}
+            value={value}
             setValue={setValue}
             hasUnit={true}
           />
@@ -175,7 +175,7 @@ const BorderRadiusHelper = ({ setBorderRadius }: Props): JSX.Element => {
           step={unit === 'px' ? 1 : unit === 'rem' ? 0.125 : 0.1}
           min={0}
           max={unit === 'px' ? 32 : unit === 'rem' ? 2 : 0}
-          value={value || 0}
+          value={value}
           setValue={setValue}
         />
 

diff --git a/components/LayoutHelper/LayoutExample.tsx b/components/LayoutHelper/LayoutExample.tsx
@@ -46,8 +46,7 @@ const LayoutExample = ({
       />
 
       {/* EXAMPLE */}
-      <div
-        className={`mb-2 flex items-center justify-center w-full min-h-96 overflow-xs-hidden`}>
+      <div className={`mb-2 flex items-center justify-center w-full min-h-96`}>
         <div
           className={`padding overflow-x-hidden ${borderRadius} ${margin} ${padding} ${shadow} flex justify-center item-center bg-indigo-300 dark:bg-indigo-700 w-full h-auto`}>
           <div

diff --git a/components/LayoutHelper/MarginHelper.tsx b/components/LayoutHelper/MarginHelper.tsx
@@ -166,7 +166,7 @@ const MarginHelper = ({ setMargin }: Props): JSX.Element => {
             step={unit === 'px' ? 1 : unit === 'rem' ? 0.125 : 0.1}
             min={0}
             max={unit === 'px' ? 384 : unit === 'rem' ? 24 : 0}
-            value={value || 0}
+            value={value}
             setValue={setValue}
             hasUnit={true}
           />
@@ -178,7 +178,7 @@ const MarginHelper = ({ setMargin }: Props): JSX.Element => {
           step={unit === 'px' ? 1 : unit === 'rem' ? 0.125 : 0.1}
           min={0}
           max={unit === 'px' ? 384 : unit === 'rem' ? 24 : 0}
-          value={value || 0}
+          value={value}
           setValue={setValue}
         />
 

diff --git a/components/LayoutHelper/PaddingHelper.tsx b/components/LayoutHelper/PaddingHelper.tsx
@@ -168,7 +168,7 @@ const PaddingHelper = ({ setPadding }: Props): JSX.Element => {
             step={unit === 'px' ? 1 : unit === 'rem' ? 0.125 : 0.1}
             min={0}
             max={unit === 'px' ? 384 : unit === 'rem' ? 24 : 0}
-            value={value || 0}
+            value={value}
             setValue={setValue}
             hasUnit={true}
           />
@@ -180,7 +180,7 @@ const PaddingHelper = ({ setPadding }: Props): JSX.Element => {
           step={unit === 'px' ? 1 : unit === 'rem' ? 0.125 : 0.1}
           min={0}
           max={unit === 'px' ? 384 : unit === 'rem' ? 24 : 0}
-          value={value || 0}
+          value={value}
           setValue={setValue}
         />
 

diff --git a/components/PositionHelper/PlacementHelper.tsx b/components/PositionHelper/PlacementHelper.tsx
@@ -247,7 +247,7 @@ const PlacementHelper = ({ setPlacement }: Props): JSX.Element => {
                     step={unit === 'px' ? 1 : unit === 'rem' ? 0.125 : 0.1}
                     min={0}
                     max={unit === 'px' ? 384 : unit === 'rem' ? 24 : 0}
-                    value={value || 0}
+                    value={value}
                     onChange={(e) => setValue(parseInt(e.target.value))}
                     className='w-full p-4 pr-24 text-indigo-700 bg-gray-100 rounded-md appearance-none placement-input dark:bg-slate-700 dark:text-indigo-300 ring-1 ring-gray-600/10 dark:ring-gray-100/10 overflow-ellipsis'
                   />
@@ -262,7 +262,7 @@ const PlacementHelper = ({ setPlacement }: Props): JSX.Element => {
                 step={unit === 'px' ? 1 : unit === 'rem' ? 0.125 : 0.1}
                 min={0}
                 max={unit === 'px' ? 384 : unit === 'rem' ? 24 : 0}
-                value={value || 0}
+                value={value}
                 setValue={setValue}
               />
             </>
@@ -293,7 +293,7 @@ const PlacementHelper = ({ setPlacement }: Props): JSX.Element => {
                     placements.filter((item) => item.type === 'fraction')
                       .length - 1
                   }
-                  value={placements[value].percent || 0}
+                  value={placements[value].percent}
                 />
                 <span className='absolute top-0 flex items-center w-10 h-full text-indigo-700 pointer-events-none right-10 dark:text-indigo-300'>
                   %

diff --git a/components/PositionHelper/TranslateXHelper.tsx b/components/PositionHelper/TranslateXHelper.tsx
@@ -84,7 +84,7 @@ const TranslateXHelper = ({ setTranslateX }: Props): JSX.Element => {
                     step={unit === 'px' ? 1 : unit === 'rem' ? 0.125 : 0.1}
                     min={0}
                     max={unit === 'px' ? 384 : unit === 'rem' ? 24 : 0}
-                    value={value || 0}
+                    value={value}
                     onChange={(e) => setValue(parseInt(e.target.value))}
                     className='w-full p-4 pr-24 text-indigo-700 bg-gray-100 rounded-md appearance-none placement-input dark:bg-slate-700 dark:text-indigo-300 ring-1 ring-gray-600/10 dark:ring-gray-100/10 overflow-ellipsis'
                   />
@@ -98,7 +98,7 @@ const TranslateXHelper = ({ setTranslateX }: Props): JSX.Element => {
                 step={unit === 'px' ? 1 : unit === 'rem' ? 0.125 : 0.1}
                 min={0}
                 max={unit === 'px' ? 384 : unit === 'rem' ? 24 : 0}
-                value={value || 0}
+                value={value}
                 setValue={setValue}
               />
             </>
@@ -130,7 +130,7 @@ const TranslateXHelper = ({ setTranslateX }: Props): JSX.Element => {
                       translates.filter((item) => item.type === 'fraction')
                         .length - 1
                     }
-                    value={translates[value].percent || 0}
+                    value={translates[value].percent}
                   />
                   <span className='sr-only'>Translate X value</span>
                 </label>

diff --git a/components/PositionHelper/TranslateYHelper.tsx b/components/PositionHelper/TranslateYHelper.tsx
@@ -84,7 +84,7 @@ const TranslateYHelper = ({ setTranslateY }: Props): JSX.Element => {
                     step={unit === 'px' ? 1 : unit === 'rem' ? 0.125 : 0.1}
                     min={0}
                     max={unit === 'px' ? 384 : unit === 'rem' ? 24 : 0}
-                    value={value || 0}
+                    value={value}
                     onChange={(e) => setValue(parseInt(e.target.value))}
                     className='w-full p-4 pr-24 text-indigo-700 bg-gray-100 rounded-md appearance-none placement-input dark:bg-slate-700 dark:text-indigo-300 ring-1 ring-gray-600/10 dark:ring-gray-100/10 overflow-ellipsis'
                   />
@@ -99,7 +99,7 @@ const TranslateYHelper = ({ setTranslateY }: Props): JSX.Element => {
                 step={unit === 'px' ? 1 : unit === 'rem' ? 0.125 : 0.1}
                 min={0}
                 max={unit === 'px' ? 384 : unit === 'rem' ? 24 : 0}
-                value={value || 0}
+                value={value}
                 setValue={setValue}
               />
             </>
@@ -130,7 +130,7 @@ const TranslateYHelper = ({ setTranslateY }: Props): JSX.Element => {
                     translates.filter((item) => item.type === 'fraction')
                       .length - 1
                   }
-                  value={translates[value].percent || 0}
+                  value={translates[value].percent}
                 />
                 <span className='absolute top-0 flex items-center w-10 h-full text-indigo-700 pointer-events-none right-10 dark:text-indigo-300'>
                   %

diff --git a/components/StyledInput.tsx b/components/StyledInput.tsx
@@ -1,11 +1,11 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 
 interface Props {
   step: number
   min: number
   max: number
   value: number
-  type: string
+  type?: string
   name: string
   hasUnit: boolean
   setValue: (value: number) => void
@@ -17,7 +17,7 @@ const StyledInput = ({
   max,
   value,
   setValue,
-  type,
+  type = 'number',
   name,
   hasUnit = true,
 }: Props): JSX.Element => {
@@ -33,9 +33,14 @@ const StyledInput = ({
         min={min}
         max={max}
         value={value}
-        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-          setValue(parseFloat(e.target.value))
-        }
+        onBlur={() => {
+          if (!value) setValue(0)
+        }}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+          if (e.target.value) setValue(parseFloat(e.target.value))
+          else setValue(null)
+        }}
+        inputMode='decimal'
       />
       <span className='sr-only'>{name}</span>
     </label>