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

@@ -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';

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';

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 = '';

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';

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 */
 

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"

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];
 }
 

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}"

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 };