add ThemeOption type

index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    <title>fzf Theme Playground</title>
+    <title>fzf Theme Generator</title>
 
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

package.json

@@ -15,6 +15,7 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^3.0.1",
     "@tsconfig/svelte": "^5.0.2",
+    "@types/yargs-parser": "^21",
     "@typescript-eslint/eslint-plugin": "^6.17.0",
     "@typescript-eslint/parser": "^6.17.0",
     "eslint": "^8.56.0",
@@ -39,6 +40,7 @@
     "@popperjs/core": "^2.11.8",
     "svelte-awesome-color-picker": "^3.0.0-beta.11",
     "svelte-select": "^5.8.3",
+    "yargs-parser": "^21.1.1",
     "zod": "^3.22.4"
   },
   "engines": {

src/components/AboutPanel.svelte

@@ -9,7 +9,7 @@
       <div class="fzf-logo">
         <span class="gt">&gt;</span><span class="highlight">fz</span>f
       </div>
-      <div style="font-size: 1.5rem; font-weight: bold;">Theme Playground</div>
+      <div style="font-size: 1.5rem; font-weight: bold;">Theme Generator</div>
     </a>
   </Box>
 

src/data/export/exportToEnvVariable.ts

@@ -1,17 +1,17 @@
 import { isValidColor, type ColorValues } from '~/data/colors.store';
-import { isValidOption, type ThemeOptions } from '~/data/options.store';
+import { isValidOption, type ThemeOption, type ThemeOptions } from '~/data/options.store';
 import { colorDefinitions } from '~/fzf/fzfColorDefinitions';
 import { arrayChunk } from '~/utils/arrayChunk';
 import { toFzfColorName } from '~/utils/colors/toFzfColorName';
 
-type ExportItemDefinition<T extends keyof ThemeOptions> = {
+type ExportItemDefinition<T extends ThemeOption> = {
   exportVariable: string;
   exportIf?: (val: string, allOptions: ThemeOptions) => boolean;
   format?: (val: ThemeOptions[T], allOptions: ThemeOptions) => string;
 };
 
 export type ExportDefinitions = {
-  [K in keyof ThemeOptions]: ExportItemDefinition<K>;
+  [K in ThemeOption]: ExportItemDefinition<K>;
 };
 
 const envExportConfiguration: ExportDefinitions = {

src/data/export/exportToUrlHash.ts

@@ -1,5 +1,5 @@
 import { isValidColor, type ColorValues } from '~/data/colors.store';
-import { type ThemeOptions } from '~/data/options.store';
+import { type ThemeOption, type ThemeOptions } from '~/data/options.store';
 import { toFzfColorName } from '~/utils/colors/toFzfColorName';
 import { base64Encode } from '~/utils/strings/base64';
 
@@ -32,7 +32,7 @@ export const exportToUrlHash = (
 
   const optionsForEnv = Object.fromEntries(
     Object.keys(themeOptions).map((option) => {
-      return [option, themeOptions[option as keyof ThemeOptions]];
+      return [option, themeOptions[option as ThemeOption]];
     }),
   );
 

src/data/import/importFromUrlHash.test.ts

@@ -2,24 +2,7 @@ import { expect, it, describe } from 'vitest';
 import { initialColors } from '~/data/colors.store';
 import { encodeObjForUrlHash } from '~/data/export/exportToUrlHash';
 import { importFromUrlHash } from '~/data/import/importFromUrlHash';
-
-import { initialOptions, type ThemeOptions } from '~/data/options.store';
-
-const sampleThemeOptions: ThemeOptions = {
-  borderStyle: 'block',
-  borderLabel: ' Geralt of Rivia ',
-  borderLabelPosition: 10,
-  previewBorderStyle: 'double',
-  padding: '2',
-  margin: '3',
-  prompt: 'Here: ',
-  marker: '->',
-  pointer: '*',
-  separator: 'LALA',
-  scrollbar: '++',
-  layout: 'reverse',
-  info: 'right',
-};
+import { initialOptions } from '~/data/options.store';
 
 const allWrongColors = {
   'fg': undefined,

src/data/import/validateAndParseThemeOptions.test.ts

@@ -1,7 +1,7 @@
 import { expect, it, describe } from 'vitest';
 import { validateAndParseThemeOptions } from '~/data/import/validateAndParseThemeOptions';
 
-import { initialOptions, type ThemeOptions } from '~/data/options.store';
+import { initialOptions, type ThemeOption, type ThemeOptions } from '~/data/options.store';
 
 const sampleThemeOptions: ThemeOptions = {
   borderStyle: 'block',
@@ -47,7 +47,7 @@ describe('validateAndParseThemeOptions()', () => {
   });
 
   it('should recover from bad obj values', () => {
-    const allBrokenObj: Record<keyof ThemeOptions, any> = {
+    const allBrokenObj: Record<ThemeOption, any> = {
       borderStyle: 'invalid-border-style',
       borderLabel: undefined,
       borderLabelPosition: new Error(),

src/data/import/validateAndParseThemeOptions.ts

@@ -1,5 +1,10 @@
 import { themeOptionsSchema } from '~/data/options.schema';
-import { initialOptions, isValidOption, type ThemeOptions } from '~/data/options.store';
+import {
+  initialOptions,
+  isValidOption,
+  type ThemeOption,
+  type ThemeOptions,
+} from '~/data/options.store';
 
 export const validateAndParseThemeOptions = (rawObj: Record<string, any>) => {
   if (!rawObj) return initialOptions;
@@ -12,7 +17,7 @@ export const validateAndParseThemeOptions = (rawObj: Record<string, any>) => {
     const defaultValue = initialOptions[key];
     const receivedValue = rawObj[key] ?? defaultValue;
 
-    const parsed = themeOptionsSchema.shape[key as keyof ThemeOptions].safeParse(receivedValue);
+    const parsed = themeOptionsSchema.shape[key as ThemeOption].safeParse(receivedValue);
 
     normalizedObj[key] = parsed.success ? receivedValue : defaultValue;
   }

src/data/options.store.ts

@@ -4,6 +4,7 @@ import { themeOptionsSchema } from '~/data/options.schema';
 import type { BorderStyle } from '~/fzf/fzfBorders';
 
 export type ThemeOptions = z.infer<typeof themeOptionsSchema>;
+export type ThemeOption = keyof ThemeOptions;
 
 export const initialOptions: ThemeOptions = {
   borderStyle: 'rounded',
@@ -25,7 +26,7 @@ const _optionsStore = writable<ThemeOptions>(initialOptions);
 
 export const optionsStore = {
   subscribe: _optionsStore.subscribe,
-  set: <TKey extends keyof ThemeOptions>(key: TKey, value: ThemeOptions[TKey]) => {
+  set: <TKey extends ThemeOption>(key: TKey, value: ThemeOptions[TKey]) => {
     _optionsStore.update((settings) => ({
       ...settings,
       [key]: value,
@@ -44,6 +45,6 @@ export const optionsStore = {
   },
 };
 
-export const isValidOption = (keyName: string): keyName is keyof ThemeOptions => {
+export const isValidOption = (keyName: string): keyName is ThemeOption => {
   return keyName in initialOptions;
 };

yarn.lock

@@ -795,6 +795,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/yargs-parser@npm:^21":
+  version: 21.0.3
+  resolution: "@types/yargs-parser@npm:21.0.3"
+  checksum: e71c3bd9d0b73ca82e10bee2064c384ab70f61034bbfb78e74f5206283fc16a6d85267b606b5c22cb2a3338373586786fed595b2009825d6a9115afba36560a0
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/eslint-plugin@npm:^6.17.0":
   version: 6.17.0
   resolution: "@typescript-eslint/eslint-plugin@npm:6.17.0"
@@ -2665,6 +2672,7 @@ __metadata:
     "@popperjs/core": "npm:^2.11.8"
     "@sveltejs/vite-plugin-svelte": "npm:^3.0.1"
     "@tsconfig/svelte": "npm:^5.0.2"
+    "@types/yargs-parser": "npm:^21"
     "@typescript-eslint/eslint-plugin": "npm:^6.17.0"
     "@typescript-eslint/parser": "npm:^6.17.0"
     eslint: "npm:^8.56.0"
@@ -2686,6 +2694,7 @@ __metadata:
     vite-plugin-markdown: "npm:^2.1.0"
     vitest: "npm:^1.2.1"
     vitest-fail-on-console: "npm:^0.5.1"
+    yargs-parser: "npm:^21.1.1"
     zod: "npm:^3.22.4"
   languageName: unknown
   linkType: soft
@@ -5971,6 +5980,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"yargs-parser@npm:^21.1.1":
+  version: 21.1.1
+  resolution: "yargs-parser@npm:21.1.1"
+  checksum: f84b5e48169479d2f402239c59f084cfd1c3acc197a05c59b98bab067452e6b3ea46d4dd8ba2985ba7b3d32a343d77df0debd6b343e5dae3da2aab2cdf5886b2
+  languageName: node
+  linkType: hard
+
 "yocto-queue@npm:^0.1.0":
   version: 0.1.0
   resolution: "yocto-queue@npm:0.1.0"