Version 3.6 (#98)

* refactor * small refactor of radio options * improve session data logic * refactor * add react functionality * refactor * refactor dropzone * prettier adds 6mb to build size * update version and readme
rossmoody · Jul 24, 2021 · 7525bb9 · 7525bb9
1 parent 40ee615
commit 7525bb9
Show file tree

Hide file tree

Showing 26 changed files with 229 additions and 113 deletions.
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -4,14 +4,14 @@ about: Create a report to help us improve
 title: ''
 labels: ''
 assignees: ''
-
 ---
 
 **Describe the bug**
 A clear and concise description of what the bug is.
 
 **To Reproduce**
 Steps to reproduce the behavior:
+
 1. Go to '...'
 2. Click on '....'
 3. Scroll down to '....'
@@ -24,15 +24,17 @@ A clear and concise description of what you expected to happen.
 If applicable, add screenshots to help explain your problem.
 
 **Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
+
+- OS: [e.g. iOS]
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]
 
 **Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
+
+- Device: [e.g. iPhone6]
+- OS: [e.g. iOS8.1]
+- Browser [e.g. stock browser, safari]
+- Version [e.g. 22]
 
 **Additional context**
 Add any other context about the problem here.
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -4,7 +4,6 @@ about: Suggest an idea for this project
 title: ''
 labels: ''
 assignees: ''
-
 ---
 
 **Is your feature request related to a problem? Please describe.**

diff --git a/README.md b/README.md
@@ -78,8 +78,17 @@ Unique attributes for each SVG element will be shown within the card. The attrib
 
 Feel free to submit a pull request if you've made an improvement of some kind. This is an open source project and any help is very appreciated.
 
+### Friends
+
+This project leverages code and value from some incredibly talented folks. Most notably and predominantly are:
+
+- Design System Toolkit: [Chakra UI](https://chakra-ui.com/)
+- React Component SVG Transformation: [SVGR](https://react-svgr.com/)
+- SVG Optimization: [SVGO](https://github.com/svg/svgo)
+- Feedback widget: [Feedback Fish](https://feedback.fish/)
+
 ### About
 
 This started as a pet project to improve the [SVG Crowbar](http://nytimes.github.com/svg-crowbar/) tool that is no longer being maintained by NY Times.
 
-The codebase has been completely rewritten 4 times and the latest iteration leverages [Chakra UI](https://chakra-ui.com/) and React.
+The codebase has been completely rewritten 4 times.
diff --git a/extension/manifest.json b/extension/manifest.json
@@ -1,8 +1,8 @@
 {
   "manifest_version": 2,
   "name": "SVG Gobbler",
-  "version": "3.5",
-  "description": "Download and optimize icons, logos, and vector SVGs from websites.",
+  "version": "3.6",
+  "description": "Download and optimize icons, logos, and vector SVGs.",
   "homepage_url": "https://github.com/rossmoody/svg-gobbler",
   "icons": {
     "16": "icons/icon16.png",
@@ -22,8 +22,8 @@
     "scripts": ["background.js"],
     "persistent": false
   },
-  "permissions": ["tabs"],
-  "content_security_policy": "script-src 'self' https://feedback.fish/ff.js; object-src 'self'",
+  "permissions": ["tabs", "https://www.svggobbler.com/.netlify/functions/svgr"],
+  "content_security_policy": "script-src 'self' https://feedback.fish/ff.js; object-src",
   "content_scripts": [
     {
       "matches": ["https://*/*"],

diff --git a/package.json b/package.json
@@ -1,16 +1,16 @@
 {
   "name": "svg-gobbler",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "author": "rossmoody <[email protected]>",
-  "description": "SVG Gobbler is a simple browser extension that highlights any available SVG content in your current window and lets you download it.",
+  "description": "Download and optimize icons, logos, and vector SVGs.",
   "license": "apache-2.0",
   "scripts": {
     "start": "rm -rf ./extension/dist && webpack --mode 'development' --watch --devtool 'cheap-module-source-map'",
-    "build": "rm -rf ./extension/dist && webpack --mode 'production' && yarn package && yarn zip",
+    "build": "rm -rf ./extension/dist && webpack --mode 'production' && yarn package",
     "lint": "npx eslint . --ext .tsx,.ts --fix",
-    "zip": "zip -vr firefox.zip ./ -x 'node_modules/*' 'web-ext-artifacts/*'",
     "package": "web-ext build --source-dir ./extension --overwrite-dest",
-    "firefox": "web-ext run --source-dir ./extension"
+    "firefox": "web-ext run --source-dir ./extension",
+    "pretty": "prettier --write ./src"
   },
   "prettier": "prettier-config-rossmoody",
   "eslintConfig": {
@@ -32,6 +32,7 @@
     "@feedback-fish/react": "^1.2.1",
     "@types/chrome": "^0.0.145",
     "@types/file-saver": "^2.0.2",
+    "@types/prettier": "^2.3.2",
     "@types/react": "^17.0.11",
     "@types/react-dom": "^17.0.8",
     "@types/react-syntax-highlighter": "^13.5.2",

diff --git a/src/build/components/card/card-action-cors.tsx b/src/build/components/card/card-action-cors.tsx
@@ -1,7 +1,9 @@
 import React from 'react'
-import { Button, Grid, useColorModeValue, Tooltip } from '@chakra-ui/react'
+import { Button, Grid, useColorModeValue } from '@chakra-ui/react'
 import { FaExternalLinkAlt } from 'react-icons/fa'
 
+import { Tooltip } from '..'
+
 function openSvgInNewTab(url: string) {
   chrome.tabs.create({ url })
 }
@@ -64,12 +66,7 @@ const CardActionCors = ({ forwardingUrl }: { forwardingUrl: string }) => {
       right={0}
       bg={useColorModeValue('white', 'gray.700')}
     >
-      <Tooltip
-        hasArrow
-        borderRadius="md"
-        padding={4}
-        label="This SVG is protected by cross-origin requests and must be opened in a new tab to download."
-      >
+      <Tooltip label="This SVG is protected by cross-origin requests and must be opened in a new tab to download.">
         <Button
           onClick={() => handleCorsTab(forwardingUrl)}
           rightIcon={<FaExternalLinkAlt />}

diff --git a/src/build/components/card/card-actions.tsx b/src/build/components/card/card-actions.tsx
@@ -10,14 +10,16 @@ interface CardActions {
 }
 
 const CardActions = ({ data }: CardActions) => {
-  if (data.cors && data.imgSrcHref) {
-    return <CardActionCors forwardingUrl={data.imgSrcHref} />
+  const { cors, imgSrcHref, svgString, height, width } = data
+
+  if (cors && imgSrcHref) {
+    return <CardActionCors forwardingUrl={imgSrcHref} />
   } else {
     return (
       <CardActionFooter
-        svgString={data.svgString!}
-        height={data.height || 24}
-        width={data.width || 24}
+        svgString={svgString!}
+        height={height || 24}
+        width={width || 24}
       />
     )
   }

diff --git a/src/build/components/drawer/code-view-header.tsx b/src/build/components/drawer/code-view-header.tsx
@@ -1,5 +1,12 @@
 import React from 'react'
-import { Button, Box, Flex, Text } from '@chakra-ui/react'
+import {
+  Button,
+  Box,
+  Flex,
+  Text,
+  ButtonGroup,
+  DarkMode,
+} from '@chakra-ui/react'
 import prettyBytes from 'pretty-bytes'
 
 const getStringSize = (string: string) => {
@@ -10,20 +17,48 @@ const getStringSize = (string: string) => {
 interface CodeViewHeaderProps {
   originalString: string
   newString: string
+  isReact: boolean
+  setIsReact: React.Dispatch<React.SetStateAction<boolean>>
 }
 
-function CodeViewHeader({ originalString, newString }: CodeViewHeaderProps) {
+function CodeViewHeader({
+  originalString,
+  newString,
+  isReact,
+  setIsReact,
+}: CodeViewHeaderProps) {
   const originalSize = getStringSize(originalString)
   const newSize = getStringSize(newString)
 
   const sizeString =
     originalSize === newSize ? originalSize : `${originalSize} -> ${newSize}`
 
   return (
-    <Flex justifyContent="space-between" p={3} alignItems="center">
-      <Box w="32px" />
+    <Flex justifyContent="space-between" py="4" px="6" alignItems="center">
+      <DarkMode>
+        <Box>
+          <ButtonGroup isAttached>
+            <Button
+              size="xs"
+              isActive={!isReact}
+              onClick={() => setIsReact(false)}
+              variant="outline"
+            >
+              SVG
+            </Button>
+            <Button
+              size="xs"
+              isActive={isReact}
+              onClick={() => setIsReact(true)}
+              variant="outline"
+            >
+              React
+            </Button>
+          </ButtonGroup>
+        </Box>
+      </DarkMode>
       <Text color="gray.400" fontSize="12px">
-        {sizeString}
+        {!isReact && sizeString}
       </Text>
       <Button
         size="xs"

diff --git a/src/build/components/drawer/drawer-content.tsx b/src/build/components/drawer/drawer-content.tsx
@@ -4,12 +4,13 @@ import { Box, Center, Flex, Stack, Divider } from '@chakra-ui/react'
 import { SVGOConfig } from '../../types'
 
 import { SVGHighlighter } from './syntax-highlighter'
-import { runSvgo, defaultConfig } from './process-strings'
-import { Option } from './option'
-import { optionsData } from './options-data'
+import { runSvgo, defaultConfig } from './svgo/svgo-configs'
+import { Option } from './svgo/option'
+import { optionsData } from './svgo/svgo-plugins'
 import { CodeViewHeader } from './code-view-header'
-import { Subhead } from './form-category-subhead'
-import { QuickConfiguration } from './quick-configurations'
+import { Subhead } from './svgo/form-category-subhead'
+import { QuickConfiguration } from './svgo/quick-configurations'
+import { reactify } from './react/reactify'
 
 interface DrawerContent {
   svgString: string
@@ -21,21 +22,32 @@ function DrawerContent({ svgString }: DrawerContent) {
     []
   )
 
-  const [originalString] = React.useState(svgString)
   const [string, setString] = React.useState(svgString)
   const [config, setConfig] = React.useState<SVGOConfig>(svgoDefault)
   const [radioGroup, setRadioGroup] = React.useState('default')
+  const [isReact, setIsReact] = React.useState(false)
 
   React.useEffect(() => {
-    const newString = runSvgo(originalString, config)
-    setString(newString)
-  }, [originalString, config])
+    const newString = runSvgo(svgString, config)
+    if (isReact) {
+      reactify(newString)
+        .then(setString)
+        .catch(() => {})
+    } else {
+      setString(newString)
+    }
+  }, [svgString, config, isReact])
 
   return (
     <Box display="block" height="100%" width="100%">
       <Flex height="100%">
-        <Flex flex={8} flexDir="column" maxW="65%" bg="rgb(40, 42, 54)">
-          <CodeViewHeader originalString={originalString} newString={string} />
+        <Flex flex={8} flexDir="column" maxW="60%" bg="rgb(40, 42, 54)">
+          <CodeViewHeader
+            originalString={svgString}
+            newString={string}
+            isReact={isReact}
+            setIsReact={setIsReact}
+          />
           <Box minHeight="100%" height="50px" overflow="auto">
             <SVGHighlighter>{string}</SVGHighlighter>
           </Box>
@@ -45,7 +57,7 @@ function DrawerContent({ svgString }: DrawerContent) {
             minHeight="140px"
             maxHeight="140px"
             p={4}
-            dangerouslySetInnerHTML={{ __html: string }}
+            dangerouslySetInnerHTML={{ __html: svgString }}
             overflow="hidden"
             sx={{
               '& > svg': {

diff --git a/src/build/components/drawer/react/reactify.ts b/src/build/components/drawer/react/reactify.ts
@@ -0,0 +1,15 @@
+export async function reactify(svgString: string) {
+  const res = await fetch(
+    'https://www.svggobbler.com/.netlify/functions/svgr',
+    {
+      headers: {
+        'content-type': 'application/json',
+      },
+      method: 'post',
+      body: svgString,
+    }
+  )
+
+  const json = await res.json()
+  return json
+}
diff --git a/...mponents/drawer/form-category-subhead.tsx → ...nts/drawer/svgo/form-category-subhead.tsx b/...mponents/drawer/form-category-subhead.tsx → ...nts/drawer/svgo/form-category-subhead.tsx
diff --git a/src/build/components/drawer/option.tsx → src/build/components/drawer/svgo/option.tsx b/src/build/components/drawer/option.tsx → src/build/components/drawer/svgo/option.tsx
@@ -8,9 +8,9 @@ import {
   useColorModeValue,
 } from '@chakra-ui/react'
 
-import { PluginNames, SVGOConfig } from '../../types'
+import { PluginNames, SVGOConfig } from '../../../types'
 
-import { svgoConfig } from './process-strings'
+import { svgoConfig } from './svgo-configs'
 
 interface OptionProps {
   title: string
@@ -45,7 +45,7 @@ const Option = (props: OptionProps) => {
 
   return (
     <Flex align="center" justify="space-between">
-      <FormLabel htmlFor={pluginName}>
+      <FormLabel htmlFor={pluginName} _hover={{ cursor: 'pointer' }}>
         <Box flex="1">
           <Text as="h4" fontWeight="medium" fontSize="md">
             {title}

diff --git a/...omponents/drawer/quick-configurations.tsx → ...ents/drawer/svgo/quick-configurations.tsx b/...omponents/drawer/quick-configurations.tsx → ...ents/drawer/svgo/quick-configurations.tsx
@@ -1,9 +1,10 @@
 import React from 'react'
-import { RadioGroup, Radio, Stack } from '@chakra-ui/react'
+import { RadioGroup, Radio, Stack, FormLabel } from '@chakra-ui/react'
 
-import { SVGOConfig } from '../../types'
+import { SVGOConfig } from '../../../types'
 
-import { defaultConfig, allFalseConfig } from './process-strings'
+import { defaultConfig, allFalseConfig } from './svgo-configs'
+import { RadioOption } from './radio-option'
 
 interface QuickConfigurationProps {
   setConfig: React.Dispatch<React.SetStateAction<SVGOConfig>>
@@ -42,9 +43,9 @@ export function QuickConfiguration({
       colorScheme="red"
     >
       <Stack direction="row" spacing={4}>
-        <Radio value="none">None</Radio>
-        <Radio value="default">SVGO Default</Radio>
-        <Radio value="custom">Custom</Radio>
+        <RadioOption label="None" value="none" />
+        <RadioOption label="SVGO Default" value="default" />
+        <RadioOption label="Custom" value="custom" />
       </Stack>
     </RadioGroup>
   )

diff --git a/src/build/components/drawer/svgo/radio-option.tsx b/src/build/components/drawer/svgo/radio-option.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { Radio } from '@chakra-ui/react'
+
+interface RadioOption {
+  label: string
+  value: string
+}
+
+export const RadioOption = ({ label, value }: RadioOption) => (
+  <Radio _hover={{ cursor: 'pointer' }} value={value} id={label}>
+    {label}
+  </Radio>
+)
diff --git a/...uild/components/drawer/process-strings.ts → ...ld/components/drawer/svgo/svgo-configs.ts b/...uild/components/drawer/process-strings.ts → ...ld/components/drawer/svgo/svgo-configs.ts
@@ -1,6 +1,6 @@
 import { optimize, extendDefaultPlugins } from 'svgo/dist/svgo.browser'
 
-import { PluginObject, PluginEventObject, SVGOConfig } from '../../types'
+import { PluginObject, PluginEventObject, SVGOConfig } from '../../../types'
 
 const pluginsList: PluginObject[] = [
   { name: 'removeDimensions', active: false },

diff --git a/src/build/components/drawer/options-data.ts → ...ld/components/drawer/svgo/svgo-plugins.ts b/src/build/components/drawer/options-data.ts → ...ld/components/drawer/svgo/svgo-plugins.ts
@@ -1,4 +1,4 @@
-import { Option } from '../../types'
+import { Option } from '../../../types'
 
 const optionsData: Option[] = [
   {