add compression setting for json file (#96)

* add compression setting * resize height of dialog
lukasoppermann · Jun 8, 2021 · f820118 · f820118
1 parent 2078e98
commit f820118
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 24 deletions.
diff --git a/src/index.ts b/src/index.ts
@@ -33,6 +33,9 @@ if (figma.command === 'export') {
 if (figma.command === 'urlExport') {
   // needed for getAccessToken async
   const urlExport = async () => {
+    // always set compression true for url export
+    userSettings.compression = true
+    //
     figma.ui.postMessage({
       command: 'urlExport',
       data: {

diff --git a/src/ui/components/SettingsForm.tsx b/src/ui/components/SettingsForm.tsx
@@ -45,28 +45,41 @@ const SettingsForm = () => {
         <div className='label inside-label-behind--sm'>.json</div>
       </div>
       <div className='flex-horizontal'>
-        <div className='label' data-style='width: 130px !important'>Name conversion:</div>
-        <Select
-          defaultValue={settings.nameConversion}
-          onChange={({ value }) => {
-            dispatchSettings({ type: 'update', fieldName: 'nameConversion', payload: value })
-          }}
-          placeholder='Name conversion'
-          options={[
-            {
-              label: 'Default',
-              value: 'default'
-            },
-            {
-              label: 'camelCase',
-              value: 'camelCase'
-            },
-            {
-              label: 'kebab-case',
-              value: 'kebabCase'
-            }
-          ]}
-        />
+        <div className='flex-half'>
+          <div className='label' data-style='width: 130px !important'>Name conversion</div>
+          <Select
+            defaultValue={settings.nameConversion}
+            onChange={({ value }) => {
+              dispatchSettings({ type: 'update', fieldName: 'nameConversion', payload: value })
+            }}
+            placeholder='Name conversion'
+            options={[
+              {
+                label: 'Default',
+                value: 'default'
+              },
+              {
+                label: 'camelCase',
+                value: 'camelCase'
+              },
+              {
+                label: 'kebab-case',
+                value: 'kebabCase'
+              }
+            ]}
+          />
+        </div>
+        <div className='flex-half'>
+          <div className='label' data-style='width: 130px !important'>Compression</div>
+          <Checkbox
+            label='Compress JSON output file'
+            type='switch'
+            checked={settings.compression}
+            onChange={(value) => {
+              dispatchSettings({ type: 'update', fieldName: 'compression', payload: value })
+            }}
+          />
+        </div>
       </div>
       <div className='section-title'>Prefix</div>
       <div className='message-box'>

diff --git a/src/ui/context/SettingsContext.tsx b/src/ui/context/SettingsContext.tsx
@@ -6,6 +6,7 @@ export const SettingsContext = React.createContext(null)
 export const initialState: Settings = {
   filename: 'design-tokens',
   nameConversion: 'default',
+  compression: false,
   prefix: '_',
   excludePrefix: true,
   serverUrl: undefined,

diff --git a/src/ui/css/ui.css b/src/ui/css/ui.css
@@ -21,6 +21,10 @@ h3 {
 .flex-horizontal {
   display: flex;
 }
+.flex-half {
+  flex: 0;
+  flex-basis: 50%;
+}
 .flex-horizontal ~ .flex-horizontal {
   margin-top: var(--size-xxsmall);
 }

diff --git a/src/utilities/config.ts b/src/utilities/config.ts
@@ -2,7 +2,7 @@
 export default {
   settingsDialog: {
     width: 550,
-    height: 565
+    height: 595
   },
   key: {
     lastVersionSettingsOpened: 'lastVersionSettingsOpened',

diff --git a/src/utilities/getJson.ts b/src/utilities/getJson.ts
@@ -16,7 +16,11 @@ const getJson = (figma: PluginAPI, userSettings: UserSettings, stringify: boolea
     return getTokenJson(figmaData, 'styleDictionary', userSettings.nameConversion)
   }
   // get tokens as stringified json
-  return JSON.stringify(getTokenJson(figmaData, 'styleDictionary', userSettings.nameConversion))
+  if (userSettings.compression === true) {
+    return JSON.stringify(getTokenJson(figmaData, 'styleDictionary', userSettings.nameConversion))
+  }
+  // return uncompressed
+  return JSON.stringify(getTokenJson(figmaData, 'styleDictionary', userSettings.nameConversion), null, 2)
 }
 
 export default getJson
diff --git a/src/utilities/settingsDefault.ts b/src/utilities/settingsDefault.ts
@@ -9,6 +9,10 @@ export default {
     default: 'default',
     empty: false
   },
+  compression: {
+    default: false,
+    empty: false
+  },
   excludePrefix: {
     default: true,
     empty: false

diff --git a/types/settings.d.ts b/types/settings.d.ts
@@ -6,6 +6,7 @@ export type nameConversionType =
 export type Settings = {
   filename: string,
   nameConversion: nameConversionType,
+  compression: boolean,
   excludePrefix: boolean,
   prefix: string,
   serverUrl?: string,