Merge pull request #2 from vitormv/add-cli-args-import

Add import for CLI arguments

package.json

@@ -15,9 +15,10 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^3.0.1",
     "@tsconfig/svelte": "^5.0.2",
-    "@types/yargs-parser": "^21",
+    "@types/yargs-parser": "^21.0.3",
     "@typescript-eslint/eslint-plugin": "^6.17.0",
     "@typescript-eslint/parser": "^6.17.0",
+    "@zerodevx/svelte-toast": "^0.9.5",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-svelte": "^2.35.1",

src/components/ExportOptions.svelte

@@ -2,16 +2,18 @@
   import Modal from '~/components/common/Modal.svelte';
   import { colorsStore, initialColors } from '~/data/colors.store';
   import { optionsStore } from '~/data/options.store';
-  import { ChevronForwardOutline, ClipboardOutline } from 'svelte-ionicons';
+  import { ClipboardOutline } from 'svelte-ionicons';
   import { exportToEnvVariable } from '~/data/export/exportToEnvVariable';
   import { exportToUrlHash } from '~/data/export/exportToUrlHash';
   import Checkbox from '~/components/common/Checkbox.svelte';
+  import { SvelteToast, toast } from '@zerodevx/svelte-toast';
+
+  export let isModalOpen = false;
 
   let exportEnvString = '';
   let exportPermalink = '';
 
   let permalinkInputEl: HTMLInputElement;
-  let isModalOpen = false;
 
   let exportColorsOnly = false;
 
@@ -25,6 +27,9 @@
 
     permalinkInputEl.select();
     navigator.clipboard.writeText(permalinkInputEl.value);
+
+    toast.pop();
+    toast.push('Copied!', { target: 'modalToast', duration: 2000 });
   }
 
   function onToggleColorsOnly(e: Event) {
@@ -42,10 +47,6 @@
   }
 </script>
 
-<button class="export btn btn-primary" on:click={() => (isModalOpen = true)}>
-  Export <ChevronForwardOutline size="16" />
-</button>
-
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="wrapper" on:mousemove|stopPropagation>
   <Modal bind:showModal={isModalOpen}>
@@ -76,26 +77,34 @@
             value={exportPermalink}
           />
         </div>
-        <button type="button" class="copy-url btn btn-primary" on:click={onCopyUrl}>
+        <button type="button" class="copy-url btn btn-secondary" on:click={onCopyUrl}>
           <ClipboardOutline size="16" />
         </button>
       </div>
 
       <h3>Variable Export</h3>
       <textarea readonly>{exportEnvString}</textarea>
     </div>
+
+    <SvelteToast
+      target="modalToast"
+      options={{
+        intro: { y: -64 },
+        theme: {
+          '--toastColor': 'mintcream',
+          '--toastBackground': 'rgba(72,187,120,0.9)',
+          '--toastBarBackground': '#2F855A',
+          '--toastBarHeight': 0,
+        },
+      }}
+    />
   </Modal>
 </div>
 
 <style lang="scss">
   h3 {
     margin: 0;
   }
-  .export {
-    position: absolute;
-    top: 15px;
-    right: 15px;
-  }
 
   .content {
     display: flex;

src/components/Home.svelte

@@ -11,6 +11,8 @@
   import { colorsStore } from '~/data/colors.store';
   import { optionsStore } from '~/data/options.store';
 
+  import { SvelteToast } from '@zerodevx/svelte-toast';
+
   let terminalContentEl: HTMLDivElement;
 
   function updateStoreFromHash() {
@@ -20,8 +22,8 @@
 
     const imported = importFromUrlHash(hash.substring(1));
 
-    colorsStore.updateAllColors(imported.colors as any);
     optionsStore.updateAll(imported.themeOptions);
+    colorsStore.updateAllColors(imported.colors as any);
   }
 
   // allow Preview Panel to be scrolled by dragging. Useful when very big
@@ -67,12 +69,23 @@
   </div>
 
   <div class="panel-terminal">
-    <Box title="Preview" bind:contentEl={terminalContentEl}>
-      <TerminalWindow />
-    </Box>
+    <TerminalWindow bind:wrapperEl={terminalContentEl} />
   </div>
 </main>
 
+<SvelteToast
+  options={{
+    reversed: true,
+    intro: { y: 192 },
+    theme: {
+      '--toastColor': 'mintcream',
+      '--toastBackground': 'rgba(72,187,120,0.9)',
+      '--toastBarBackground': '#2F855A',
+      '--toastBarHeight': 0,
+    },
+  }}
+/>
+
 <style lang="scss">
   .layout {
     display: flex;

src/components/ImportOptions.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+  import Modal from '~/components/common/Modal.svelte';
+  import { toast } from '@zerodevx/svelte-toast';
+
+  import { ArrowForwardOutline } from 'svelte-ionicons';
+  import { importFromEnvArgs } from '~/data/import/importFromEnvArgs';
+
+  export let isModalOpen = false;
+
+  let textareaEl: HTMLTextAreaElement;
+
+  let errorMessage = '';
+
+  function validateInput(textareaValue: string) {
+    if (textareaValue.startsWith('export ') || textareaValue.includes('FZF_DEFAULT_OPTS')) {
+      errorMessage =
+        'Invalid input. Text should not start with "export" and should not contain "FZF_DEFAULT_OPTS".';
+      return false;
+    }
+    errorMessage = '';
+    return true;
+  }
+
+  function onClickImport() {
+    if (!textareaEl) return;
+
+    const value = textareaEl.value;
+
+    if (validateInput(value)) {
+      importFromEnvArgs(value);
+      isModalOpen = false;
+
+      textareaEl.value = '';
+      toast.push('Imported theme and colors!', {});
+    }
+  }
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div class="wrapper" on:mousemove|stopPropagation>
+  <Modal bind:showModal={isModalOpen}>
+    <h2 slot="header">Import Options</h2>
+
+    <div class="content">
+      <p style="flex: 1;">
+        Paste the <strong>contents</strong> of your <code>FZF_DEFAULT_OPTS</code> variable.
+      </p>
+
+      <textarea
+        bind:this={textareaEl}
+        on:input={() => validateInput(textareaEl.value)}
+        placeholder="Paste only the variable contents (inside the quotes)..."
+      ></textarea>
+
+      <div class="footer">
+        <div class="error" style="word-wrap: break-word; overflow-wrap: break-word;">
+          {errorMessage}
+        </div>
+        <button
+          class="export btn btn-secondary"
+          on:click={onClickImport}
+          disabled={!textareaEl?.value.trim() || !!errorMessage}
+        >
+          Import <ArrowForwardOutline size="16" />
+        </button>
+      </div>
+    </div>
+  </Modal>
+</div>
+
+<style lang="scss">
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    height: 100%;
+  }
+
+  textarea {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  .footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 20px;
+  }
+</style>

src/components/TerminalWindow.svelte

@@ -6,15 +6,21 @@
   import { renderLines } from '~/utils/tui/renderLines';
   import { addDelegateEventListener } from '~/utils/addDelegateEventListener';
   import { toFzfColorName } from '~/utils/colors/toFzfColorName';
+  import Box from '~/components/common/Box.svelte';
+  import { ArrowDownOutline, ChevronForwardOutline } from 'svelte-ionicons';
+  import ImportOptions from '~/components/ImportOptions.svelte';
   import ExportOptions from '~/components/ExportOptions.svelte';
 
   // take all known color tokens and set them as css variables
   $: allTokenVariables = orderedColorTokens
     .map((token) => `--fzf-${token}: ${getColorOrFallback(token, $colorsStore.colors).value}`)
     .join(';');
 
+  let isImportModalOpen = false;
+  let isExportModalOpen = false;
+
   let terminalWindowEl: HTMLDivElement;
-  let wrapperEl: HTMLDivElement;
+  export let wrapperEl: HTMLDivElement;
   let charWidthEl: HTMLSpanElement;
 
   let currentBg: string | undefined = 'bg';
@@ -114,29 +120,42 @@
   });
 </script>
 
-<ExportOptions />
-
-<div bind:this={wrapperEl} class="wrapper" style={allTokenVariables}>
-  <div class="window-title" style:max-width={maxTerminalWidth}>
-    <div class="dot red"></div>
-    <div class="dot amber"></div>
-    <div class="dot green"></div>
-  </div>
-
-  <div bind:this={terminalWindowEl} class="terminal-window"></div>
-
-  <div class="hint" style:max-width={maxTerminalWidth}>
-    <span class="hint-label">background:</span>
-    <strong>{toFzfColorName(currentBg || '').toUpperCase() || '---'}</strong>
-    {#if currentFg}&nbsp;&nbsp;&nbsp;<span class="hint-label">foreground:</span><strong
-        >&nbsp;{toFzfColorName(currentFg || '').toUpperCase() || '---'}</strong
-      >{/if}
+<Box title="Preview">
+  <svelte:fragment slot="buttons">
+    <button class="export btn btn-primary" on:click={() => (isImportModalOpen = true)}>
+      Import Options <ArrowDownOutline size="16" />
+    </button>
+
+    <button class="export btn btn-primary" on:click={() => (isExportModalOpen = true)}>
+      Export <ChevronForwardOutline size="16" />
+    </button>
+  </svelte:fragment>
+
+  <div bind:this={wrapperEl} class="wrapper" style={allTokenVariables}>
+    <div class="window-title" style:max-width={maxTerminalWidth}>
+      <div class="dot red"></div>
+      <div class="dot amber"></div>
+      <div class="dot green"></div>
+    </div>
+
+    <div bind:this={terminalWindowEl} class="terminal-window"></div>
+
+    <div class="hint" style:max-width={maxTerminalWidth}>
+      <span class="hint-label">background:</span>
+      <strong>{toFzfColorName(currentBg || '').toUpperCase() || '---'}</strong>
+      {#if currentFg}&nbsp;&nbsp;&nbsp;<span class="hint-label">foreground:</span><strong
+          >&nbsp;{toFzfColorName(currentFg || '').toUpperCase() || '---'}</strong
+        >{/if}
+    </div>
+
+    <!-- This element is used to calculate the current width of chars according
+  to users browser window, resolution, zoom amount, etc. -->
+    <span bind:this={charWidthEl} class="sample-char-width">▀</span>
   </div>
 
-  <!-- This element is used to calculate the current width of chars according
-  to users browser window, resolution, zoom amount, etc. -->
-  <span bind:this={charWidthEl} class="sample-char-width">▀</span>
-</div>
+  <ImportOptions bind:isModalOpen={isImportModalOpen} />
+  <ExportOptions bind:isModalOpen={isExportModalOpen} />
+</Box>
 
 <style lang="scss">
   :root {

src/components/common/Box.svelte

@@ -5,17 +5,29 @@
   export let contentStyle: string = '';
 
   export let contentEl: HTMLDivElement | undefined = undefined;
+
+  const hasButtons = !!$$slots.buttons;
 </script>
 
 <div class="box" style={style}>
-  {#if title}
-    <h2 class="title">{title}</h2>
+  {#if hasButtons || title}
+    <div class="header">
+      {#if title}
+        <h2 class="title">{title}</h2>
+      {/if}
+
+      {#if hasButtons}
+        <div class="buttons">
+          <slot name="buttons" />
+        </div>
+      {/if}
+    </div>
   {/if}
 
   <div bind:this={contentEl} class="content" style={contentStyle}><slot /></div>
 </div>
 
-<style>
+<style lang="scss">
   .box {
     background-color: var(--box-bg-color);
     padding: 15px;
@@ -24,12 +36,24 @@
     flex-direction: column;
   }
 
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 15px;
+    gap: 15px;
+
+    .buttons {
+      display: flex;
+      gap: 20px;
+    }
+  }
+
   .title {
-    margin-bottom: 1rem;
     font-size: 1.2rem;
     font-weight: bold;
-    margin-bottom: 15px;
     margin-top: 0;
+    margin-bottom: 0;
   }
 
   .content {

src/components/common/Modal.svelte

@@ -5,6 +5,8 @@
   let dialog: HTMLDialogElement;
 
   $: if (dialog && showModal) dialog.showModal();
+
+  $: if (dialog && !showModal) dialog.close();
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
@@ -50,7 +52,7 @@
   }
 
   .wrapper {
-    min-width: 700px;
+    width: 700px;
     min-height: 500px;
     background-color: var(--bg-color);
     color: var(--text-color);