#837 - Adopt vscrui components

src/dashboardWebView/components/Common/ItemSelection.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import useSelectedItems from '../../hooks/useSelectedItems';
-import { VSCodeCheckbox } from '@vscode/webview-ui-toolkit/react';
+import { Checkbox as VSCodeCheckbox } from 'vscrui';
 import { useMemo } from 'react';
 
 export interface IItemSelectionProps {
@@ -24,11 +24,8 @@ export const ItemSelection: React.FunctionComponent<IItemSelectionProps> = ({
   return (
     <div className={`${cssNames} group-hover:block`}>
       <VSCodeCheckbox
-        style={{
-          boxShadow: show ? "" : "0 0 3px var(--frontmatter-border-preserve)"
-        }}
-        onClick={(e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-          e.stopPropagation();
+        className={show ? "" : " shadow-[0_0_3px_var(--frontmatter-border-preserve)]"}
+        onChange={() => {
           onMultiSelect(filePath);
         }}
         checked={selectedFiles.includes(filePath)} />

src/dashboardWebView/components/Header/Startup.tsx

@@ -5,8 +5,7 @@ import { DashboardMessage } from '../../DashboardMessage';
 import { SETTING_DASHBOARD_OPENONSTART } from '../../../constants';
 import * as l10n from "@vscode/l10n"
 import { LocalizationKey } from '../../../localization';
-import { VSCodeCheckbox } from '@vscode/webview-ui-toolkit/react';
-
+import { Checkbox as VSCodeCheckbox } from 'vscrui';
 
 export interface IStartupProps {
   settings: Settings | null;
@@ -31,7 +30,7 @@ export const Startup: React.FunctionComponent<IStartupProps> = ({
 
   return (
     <VSCodeCheckbox
-      onChange={(e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.checked)}
+      onChange={onChange}
       checked={isChecked}>
       {l10n.t(LocalizationKey.dashboardHeaderStartupLabel)}
     </VSCodeCheckbox>

src/dashboardWebView/components/SettingsView/CommonSettings.tsx

@@ -5,7 +5,7 @@ import { Startup } from '../Header/Startup';
 import { useRecoilValue } from 'recoil';
 import { SettingsSelector } from '../../state';
 import { SettingsInput } from './SettingsInput';
-import { VSCodeButton } from '@vscode/webview-ui-toolkit/react';
+import { Button as VSCodeButton } from 'vscrui';
 import { DOCS_SUBMODULES, FrameworkDetectors, GIT_CONFIG, SETTING_FRAMEWORK_START, SETTING_GIT_COMMIT_MSG, SETTING_GIT_ENABLED, SETTING_PREVIEW_HOST, SETTING_WEBSITE_URL } from '../../../constants';
 import { messageHandler } from '@estruyf/vscode/dist/client';
 import { DashboardMessage } from '../../DashboardMessage';

src/dashboardWebView/components/SettingsView/IntegrationsView.tsx

@@ -4,7 +4,7 @@ import { messageHandler } from '@estruyf/vscode/dist/client';
 import { LocalizationKey } from '../../../localization';
 import { GeneralCommands, ExtensionState } from '../../../constants';
 import { SettingsInput } from './SettingsInput';
-import { VSCodeButton } from '@vscode/webview-ui-toolkit/react';
+import { Button as VSCodeButton } from 'vscrui';
 
 export interface IIntegrationsViewProps { }
 

src/dashboardWebView/components/SettingsView/SettingsCheckbox.tsx

@@ -1,5 +1,5 @@
-import { VSCodeCheckbox } from '@vscode/webview-ui-toolkit/react';
 import * as React from 'react';
+import { Checkbox as VSCodeCheckbox } from 'vscrui';
 
 export interface ISettingsCheckboxProps {
   label: string;
@@ -27,7 +27,7 @@ export const SettingsCheckbox: React.FunctionComponent<ISettingsCheckboxProps> =
 
   return (
     <VSCodeCheckbox
-      onChange={(e: React.ChangeEvent<HTMLInputElement>) => updateValue(e.target.checked)}
+      onChange={updateValue}
       checked={isEnabled}>
       {label}
     </VSCodeCheckbox>

src/dashboardWebView/components/SettingsView/SettingsInput.tsx

@@ -1,5 +1,5 @@
-import { VSCodeTextField } from '@vscode/webview-ui-toolkit/react';
 import * as React from 'react';
+import { TextField as VSCodeTextField } from 'vscrui';
 
 export interface ISettingsInputProps {
   label: string;
@@ -21,13 +21,10 @@ export const SettingsInput: React.FunctionComponent<ISettingsInputProps> = ({
 
   return (
     <VSCodeTextField
-      className='w-full p-0 m-0 bg-inherit border-0 focus:border-0 outline-none focus:outline-none shadow-none'
-      style={{
-        boxShadow: 'none'
-      }}
+      className='w-full p-0 m-0 bg-inherit'
       value={value || fallback || ""}
       placeholder={placeholder}
-      onInput={(e: React.ChangeEvent<HTMLInputElement>) => onChange(name, e.target.value)}>
+      onChange={(value: string) => onChange(name, value)}>
       {label}
     </VSCodeTextField>
   );

src/dashboardWebView/components/Steps/StepsToGetStarted.tsx

@@ -17,7 +17,7 @@ import { TemplateItem } from './TemplateItem';
 import { Spinner } from '../Common/Spinner';
 import { AstroContentTypes } from '../Configuration/Astro/AstroContentTypes';
 import { ContentFolders } from '../Configuration/Common/ContentFolders';
-import { VSCodeCheckbox } from '@vscode/webview-ui-toolkit/react';
+import { Checkbox as VSCodeCheckbox } from 'vscrui';
 import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuSeparator } from '../../../components/shadcn/Dropdown';
 
 export interface IStepsToGetStartedProps {
@@ -239,7 +239,7 @@ export const StepsToGetStarted: React.FunctionComponent<IStepsToGetStartedProps>
         description: (
           <div className='mt-1'>
             <VSCodeCheckbox
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) => updateSetting(SETTING_GIT_ENABLED, e.target.checked)}
+              onChange={(value) => updateSetting(SETTING_GIT_ENABLED, value)}
               checked={isGitEnabled}>
               {l10n.t(LocalizationKey.dashboardStepsStepsToGetStartedGitDescription)}
             </VSCodeCheckbox>

src/dashboardWebView/components/TaxonomyView/TaxonomyTagging.tsx

@@ -6,17 +6,17 @@ import { getTaxonomyField } from '../../../helpers/getTaxonomyField';
 import { Sorting } from '../../../helpers/Sorting';
 import { ArrowLeftIcon, EyeIcon } from '@heroicons/react/24/outline';
 import { Button } from '../Common/Button';
-import { VSCodeCheckbox } from '@vscode/webview-ui-toolkit/react';
 import { FilterInput } from './FilterInput';
 import { useDebounce } from '../../../hooks/useDebounce';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 import { sortPages } from '../../../utils/sortPages';
-import { Messenger, messageHandler } from '@estruyf/vscode/dist/client';
+import { messageHandler } from '@estruyf/vscode/dist/client';
 import { DashboardMessage } from '../../DashboardMessage';
 import { ExtensionState } from '../../../constants';
 import { LinkButton } from '../Common/LinkButton';
 import { openFile } from '../../utils';
+import { Checkbox as VSCodeCheckbox } from 'vscrui';
 
 export interface ITaxonomyTaggingProps {
   taxonomy: string | null;
@@ -122,8 +122,12 @@ export const TaxonomyTagging: React.FunctionComponent<ITaxonomyTaggingProps> = (
   }, [pageMappings, untaggedPages]);
 
   const checkIfChecked = React.useCallback((page: Page) => {
-    return (!untaggedPages.find((p: Page) => p.fmFilePath === page.fmFilePath) && !pageMappings.untagged.find((p: Page) => p.fmFilePath === page.fmFilePath)) || pageMappings.tagged.find((p: Page) => p.fmFilePath === page.fmFilePath);
-  }, [untaggedPages, pageMappings.tagged]);
+    const isUntagged = untaggedPages.some((p) => p.fmFilePath === page.fmFilePath);
+    const isTagged = pageMappings.tagged.some((p) => p.fmFilePath === page.fmFilePath);
+    const isInUntagged = pageMappings.untagged.some((p) => p.fmFilePath === page.fmFilePath);
+
+    return (!isUntagged && !isInUntagged) || isTagged;
+  }, [untaggedPages, pageMappings.tagged, pageMappings.untagged]);
 
   const onFileView = (filePath: string) => {
     openFile(filePath);
@@ -193,7 +197,7 @@ export const TaxonomyTagging: React.FunctionComponent<ITaxonomyTaggingProps> = (
                 <td className={`pl-6 py-2 w-[25px]`}>
                   <VSCodeCheckbox
                     title={l10n.t(LocalizationKey.dashboardTaxonomyViewTaxonomyTaggingCheckbox, value)}
-                    onClick={() => onCheckboxClick(page)}
+                    onChange={() => onCheckboxClick(page)}
                     checked={checkIfChecked(page)}>
                     <span className='sr-only'>
                       {l10n.t(LocalizationKey.dashboardTaxonomyViewTaxonomyTaggingCheckbox, value)}