#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)}

src/panelWebView/components/ContentType/ContentTypeValidator.tsx

@@ -1,5 +1,4 @@
 import { Messenger } from '@estruyf/vscode/dist/client';
-import { VSCodeButton, VSCodeDivider } from '@vscode/webview-ui-toolkit/react';
 import * as React from 'react';
 import { useMemo } from 'react';
 import { Field } from '../../../models';
@@ -9,6 +8,7 @@ import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../../localization';
 import { VSCodeLabel } from '../VSCode';
 import { DefaultFields } from '../../../constants';
+import { Button as VSCodeButton, Divider as VSCodeDivider } from 'vscrui';
 
 export interface IContentTypeValidatorProps {
   fields: Field[];
@@ -77,16 +77,16 @@ export const ContentTypeValidator: React.FunctionComponent<IContentTypeValidator
       {l10n.t(LocalizationKey.panelContentTypeContentTypeValidatorHint).split(`\n`).map(s => (<p className="inline_hint" key={s}>{s}</p>))}
 
 
-      <div className="hint__buttons">
-        <VSCodeButton style={{ "--border-width": 0 }} appearance={`secondary`} onClick={generateContentType}>
+      <div className="hint__buttons space-y-2">
+        <VSCodeButton appearance={`secondary`} onClick={generateContentType}>
           {l10n.t(LocalizationKey.panelContentTypeContentTypeValidatorButtonCreate)}
         </VSCodeButton>
 
-        <VSCodeButton style={{ "--border-width": 0 }} appearance={`secondary`} onClick={addMissingFields}>
+        <VSCodeButton appearance={`secondary`} onClick={addMissingFields}>
           {l10n.t(LocalizationKey.panelContentTypeContentTypeValidatorButtonAdd)}
         </VSCodeButton>
 
-        <VSCodeButton style={{ "--border-width": 0 }} appearance={`secondary`} onClick={setContentType}>
+        <VSCodeButton appearance={`secondary`} onClick={setContentType}>
           {l10n.t(LocalizationKey.panelContentTypeContentTypeValidatorButtonChange)}
         </VSCodeButton>
       </div>

src/panelWebView/components/GlobalSettings.tsx

@@ -4,11 +4,11 @@ import { CommandToCode } from '../CommandToCode';
 import { useDebounce } from '../../hooks/useDebounce';
 import { Collapsible } from './Collapsible';
 import useStartCommand from '../hooks/useStartCommand';
-import { VSCodeCheckbox } from '@vscode/webview-ui-toolkit/react';
 import { Messenger } from '@estruyf/vscode/dist/client';
 import * as l10n from '@vscode/l10n';
 import { LocalizationKey } from '../../localization';
 import { VSCodeLabel } from './VSCode';
+import { Checkbox as VSCodeCheckbox } from 'vscrui';
 
 export interface IGlobalSettingsProps {
   settings: PanelSettings | undefined;
@@ -81,15 +81,15 @@ const GlobalSettings: React.FunctionComponent<IGlobalSettingsProps> = ({
           <VSCodeLabel>
             {l10n.t(LocalizationKey.panelGlobalSettingsActionModifiedDateLabel)}
           </VSCodeLabel>
-          <VSCodeCheckbox checked={modifiedDateUpdate} onClick={onDateCheck}>
+          <VSCodeCheckbox className='!flex' checked={modifiedDateUpdate} onChange={onDateCheck}>
             {l10n.t(LocalizationKey.panelGlobalSettingsActionModifiedDateDescription)}
           </VSCodeCheckbox>
         </div>
         <div className={`base__action`}>
           <VSCodeLabel>
             {l10n.t(LocalizationKey.panelGlobalSettingsActionFrontMatterLabel)}
           </VSCodeLabel>
-          <VSCodeCheckbox checked={fmHighlighting} onClick={onHighlightCheck}>
+          <VSCodeCheckbox className='!flex' checked={fmHighlighting} onChange={onHighlightCheck}>
             {l10n.t(LocalizationKey.panelGlobalSettingsActionFrontMatterDescription)}
           </VSCodeCheckbox>
         </div>

src/panelWebView/index.tsx

@@ -8,12 +8,7 @@ import { SentryInit } from '../utils/sentryInit';
 
 import './styles.css';
 
-// require('@vscode/codicons/dist/codicon.css');
 import '@vscode-elements/elements/dist/vscode-collapsible/index.js';
-// import '@bendera/vscode-webview-elements/dist/vscode-label/index.js';
-// import '@bendera/vscode-webview-elements/dist/vscode-checkbox.js';
-
-// import '@vscode/webview-ui-toolkit/dist/esm/checkbox';
 
 declare const acquireVsCodeApi: <T = unknown>() => {
   getState: () => T;

src/panelWebView/styles.css

@@ -478,16 +478,11 @@ button {
   margin-bottom: 1rem;
 }
 
-.hint__buttons vscode-button {
+.hint__buttons button {
   display: block;
-  margin-bottom: 0.5rem;
   text-align: center;
 }
 
-.hint__buttons vscode-button:last-child {
-  margin-bottom: 0;
-}
-
 vscode-divider {
   margin-top: 1rem;
 }

webpack/dashboard.config.js

@@ -21,29 +21,30 @@ const config = [{
     extensions: ['.ts', '.js', '.tsx', '.jsx'],
     fallback: {
       "assert": require.resolve("assert"),
-      "path": require.resolve("path-browserify")
+      "path": require.resolve("path-browserify"),
+      "process/browser": require.resolve("process/browser"),
     }
   },
   module: {
     rules: [{
-        test: /\.(ts|tsx)$/,
-        exclude: /node_modules/,
-        use: [{
-          loader: 'ts-loader'
-        }]
-      },
-      {
-        test: /\.css$/,
-        use: ['style-loader', 'css-loader', 'postcss-loader']
-      },
-      {
-        test: /\.mjs$/,
-        include: /node_modules/,
-        type: 'javascript/auto',
-        resolve: {
-          fullySpecified: false
-        }
+      test: /\.(ts|tsx)$/,
+      exclude: /node_modules/,
+      use: [{
+        loader: 'ts-loader'
+      }]
+    },
+    {
+      test: /\.css$/,
+      use: ['style-loader', 'css-loader', 'postcss-loader']
+    },
+    {
+      test: /\.mjs$/,
+      include: /node_modules/,
+      type: 'javascript/auto',
+      resolve: {
+        fullySpecified: false
       }
+    }
     ]
   },
   performance: {