From ec188b7977d8ed4b37275673d78f2460b29fbfad Mon Sep 17 00:00:00 2001
From: Philippe Martin <phmartin@redhat.com>
Date: Tue, 7 May 2024 11:45:46 +0200
Subject: [PATCH] refactor: move Checkbox component to ui package (#7075)

* refactor: move Checkbox component to ui package
Signed-off-by: Philippe Martin <phmartin@redhat.com>

* refactor: add checkbox to package.json

Signed-off-by: Philippe Martin <phmartin@redhat.com>

---------

Signed-off-by: Philippe Martin <phmartin@redhat.com>
---
 packages/renderer/src/lib/container/ContainerList.svelte | 2 +-
 packages/renderer/src/lib/dialogs/QuickPickInput.svelte  | 2 +-
 .../src/lib/image/BuildImageFromContainerfileCard.svelte | 3 +--
 packages/renderer/src/lib/pod/DeployPodToKube.svelte     | 3 +--
 packages/renderer/src/lib/table/Table.svelte             | 2 +-
 packages/ui/package.json                                 | 4 ++++
 .../src/lib/ui => ui/src/lib/checkbox}/Checkbox.spec.ts  | 2 +-
 .../src/lib/ui => ui/src/lib/checkbox}/Checkbox.svelte   | 9 +++++++--
 packages/ui/src/lib/index.ts                             | 4 +++-
 9 files changed, 20 insertions(+), 11 deletions(-)
 rename packages/{renderer/src/lib/ui => ui/src/lib/checkbox}/Checkbox.spec.ts (97%)
 rename packages/{renderer/src/lib/ui => ui/src/lib/checkbox}/Checkbox.svelte (88%)

diff --git a/packages/renderer/src/lib/container/ContainerList.svelte b/packages/renderer/src/lib/container/ContainerList.svelte
index 6e4df91f7ce..16c142fcf90 100644
--- a/packages/renderer/src/lib/container/ContainerList.svelte
+++ b/packages/renderer/src/lib/container/ContainerList.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 import { faChevronDown, faChevronRight, faPlusCircle, faTrash } from '@fortawesome/free-solid-svg-icons';
+import { Checkbox } from '@podman-desktop/ui-svelte';
 import moment from 'moment';
 import { onDestroy, onMount } from 'svelte';
 import { get, type Unsubscriber } from 'svelte/store';
@@ -30,7 +31,6 @@ import StatusIcon from '../images/StatusIcon.svelte';
 import { PodUtils } from '../pod/pod-utils';
 import PodActions from '../pod/PodActions.svelte';
 import Button from '../ui/Button.svelte';
-import Checkbox from '../ui/Checkbox.svelte';
 import ErrorMessage from '../ui/ErrorMessage.svelte';
 import FilteredEmptyScreen from '../ui/FilteredEmptyScreen.svelte';
 import NavPage from '../ui/NavPage.svelte';
diff --git a/packages/renderer/src/lib/dialogs/QuickPickInput.svelte b/packages/renderer/src/lib/dialogs/QuickPickInput.svelte
index abd7b6da568..4e7befd69b5 100644
--- a/packages/renderer/src/lib/dialogs/QuickPickInput.svelte
+++ b/packages/renderer/src/lib/dialogs/QuickPickInput.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
+import { Checkbox } from '@podman-desktop/ui-svelte';
 import { onDestroy, onMount, tick } from 'svelte';
 
 import Markdown from '/@/lib/markdown/Markdown.svelte';
 import Button from '/@/lib/ui/Button.svelte';
-import Checkbox from '/@/lib/ui/Checkbox.svelte';
 
 import { tabWithinParent } from './dialog-utils';
 import type { InputBoxOptions, QuickPickOptions } from './quickpick-input';
diff --git a/packages/renderer/src/lib/image/BuildImageFromContainerfileCard.svelte b/packages/renderer/src/lib/image/BuildImageFromContainerfileCard.svelte
index d4d11ab8400..e05e0901fdf 100644
--- a/packages/renderer/src/lib/image/BuildImageFromContainerfileCard.svelte
+++ b/packages/renderer/src/lib/image/BuildImageFromContainerfileCard.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
 import { faCircle, faPlusCircle } from '@fortawesome/free-solid-svg-icons';
-import { isFontAwesomeIcon } from '@podman-desktop/ui-svelte';
+import { Checkbox, isFontAwesomeIcon } from '@podman-desktop/ui-svelte';
 import { createEventDispatcher, onMount, tick } from 'svelte';
 import Fa from 'svelte-fa';
 
-import Checkbox from '../ui/Checkbox.svelte';
 import Tooltip from '../ui/Tooltip.svelte';
 
 export let title: string = '';
diff --git a/packages/renderer/src/lib/pod/DeployPodToKube.svelte b/packages/renderer/src/lib/pod/DeployPodToKube.svelte
index 99d0c31dcd9..b533087be9c 100644
--- a/packages/renderer/src/lib/pod/DeployPodToKube.svelte
+++ b/packages/renderer/src/lib/pod/DeployPodToKube.svelte
@@ -1,13 +1,12 @@
 <script lang="ts">
 import { faExternalLink, faRocket } from '@fortawesome/free-solid-svg-icons';
 import type { V1NamespaceList, V1Pod } from '@kubernetes/client-node/dist/api';
-import { Input } from '@podman-desktop/ui-svelte';
+import { Checkbox, Input } from '@podman-desktop/ui-svelte';
 import * as jsYaml from 'js-yaml';
 import { onDestroy, onMount } from 'svelte';
 import { router } from 'tinro';
 
 import { ensureRestrictedSecurityContext } from '/@/lib/pod/pod-utils';
-import Checkbox from '/@/lib/ui/Checkbox.svelte';
 
 import type { V1Route } from '../../../../main/src/plugin/api/openshift-types';
 import MonacoEditor from '../editor/MonacoEditor.svelte';
diff --git a/packages/renderer/src/lib/table/Table.svelte b/packages/renderer/src/lib/table/Table.svelte
index f6cb274e9c2..56970ec6513 100644
--- a/packages/renderer/src/lib/table/Table.svelte
+++ b/packages/renderer/src/lib/table/Table.svelte
@@ -7,10 +7,10 @@
 <script lang="ts">
 /* eslint-disable import/no-duplicates */
 // https://github.com/import-js/eslint-plugin-import/issues/1479
+import { Checkbox } from '@podman-desktop/ui-svelte';
 import { afterUpdate, onMount, tick } from 'svelte';
 import { flip } from 'svelte/animate';
 
-import Checkbox from '../ui/Checkbox.svelte';
 import type { Column, Row } from './table';
 /* eslint-enable import/no-duplicates */
 
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 8f0fc95bb37..9e952d5fc57 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -20,6 +20,10 @@
       "types": "./dist/index.d.ts",
       "svelte": "./dist/index.js"
     },
+    "./Checkbox": {
+      "types": "./dist/checkbox/Checkbox.svelte.d.ts",
+      "svelte": "./dist/checkbox/Checkbox.svelte"
+    },
     "./Input": {
       "types": "./dist/input/input.svelte.d.ts",
       "svelte": "./dist/input/input.svelte"
diff --git a/packages/renderer/src/lib/ui/Checkbox.spec.ts b/packages/ui/src/lib/checkbox/Checkbox.spec.ts
similarity index 97%
rename from packages/renderer/src/lib/ui/Checkbox.spec.ts
rename to packages/ui/src/lib/checkbox/Checkbox.spec.ts
index c22ac094f12..86b73fa3ce5 100644
--- a/packages/renderer/src/lib/ui/Checkbox.spec.ts
+++ b/packages/ui/src/lib/checkbox/Checkbox.spec.ts
@@ -25,7 +25,7 @@ import { expect, test } from 'vitest';
 
 import Checkbox from './Checkbox.svelte';
 
-function getPeer(checkbox: HTMLElement) {
+function getPeer(checkbox: HTMLElement): Element | undefined {
   return checkbox.parentElement?.children[1];
 }
 
diff --git a/packages/renderer/src/lib/ui/Checkbox.svelte b/packages/ui/src/lib/checkbox/Checkbox.svelte
similarity index 88%
rename from packages/renderer/src/lib/ui/Checkbox.svelte
rename to packages/ui/src/lib/checkbox/Checkbox.svelte
index fc81143f53e..800be2b85cb 100644
--- a/packages/renderer/src/lib/ui/Checkbox.svelte
+++ b/packages/ui/src/lib/checkbox/Checkbox.svelte
@@ -15,7 +15,12 @@ export let required = false;
 
 const dispatch = createEventDispatcher<{ click: boolean }>();
 
-function onClick(checked: boolean) {
+function onClick(
+  event: MouseEvent & {
+    currentTarget: EventTarget & HTMLInputElement;
+  },
+): void {
+  const checked = event.currentTarget.checked;
   dispatch('click', checked);
 }
 </script>
@@ -30,7 +35,7 @@ function onClick(checked: boolean) {
     disabled="{disabled}"
     required="{required}"
     class="sr-only"
-    on:click="{event => onClick(event.currentTarget.checked)}" />
+    on:click="{onClick}" />
   <div
     class="grid place-content-center"
     title="{disabled ? disabledTooltip : title}"
diff --git a/packages/ui/src/lib/index.ts b/packages/ui/src/lib/index.ts
index c9688b8820b..0916084c950 100644
--- a/packages/ui/src/lib/index.ts
+++ b/packages/ui/src/lib/index.ts
@@ -15,8 +15,10 @@
  *
  * SPDX-License-Identifier: Apache-2.0
  ***********************************************************************/
+
+import Checkbox from './checkbox/Checkbox.svelte';
 import Input from './input/Input.svelte';
 import Spinner from './spinner/Spinner.svelte';
 import { isFontAwesomeIcon } from './utils/icon-utils';
 
-export { Input, isFontAwesomeIcon, Spinner };
+export { Checkbox, Input, isFontAwesomeIcon, Spinner };