feat: use preact types

.vscode/settings.json

@@ -1,10 +1,7 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
-  "typescript.enablePromptUseWorkspaceTsdk": true,
-  "css.validate": false,
-  "less.validate": false,
+  "typescript.preferences.importModuleSpecifier": "relative",
   "npm.scriptExplorerExclude": ["^((?!watch|generate:watch).)*$"],
-  "scss.validate": false,
   "eslint.workingDirectories": [
     {
       "pattern": "./{packages,apps}/*"
@@ -28,8 +25,5 @@
     // const class = 'value'
     // const selectedClass = 'value'
     ["const [a-zA-Z]+s = ['\"`]([^\"`'`]*)"]
-  ],
-  "yaml.schemas": {
-    "https://json.schemastore.org/github-workflow.json": "file:///home/ryan/projects/micro/.github/workflows/build.yaml"
-  }
+  ]
 }

packages/web/package.json

@@ -27,11 +27,9 @@
     "@preact/preset-vite": "^2.8.1",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@tailwindcss/typography": "^0.5.10",
-    "@types/node": "^20.10.6",
-    "@types/react": "^18.2.47",
-    "@types/react-dom": "^18.2.18",
     "@urql/devtools": "^2.0.3",
     "@urql/exchange-graphcache": "^6.4.1",
+    "@urql/preact": "^4.0.4",
     "autoprefixer": "^10.4.16",
     "clsx": "^2.1.0",
     "concurrently": "^8.2.2",
@@ -42,7 +40,6 @@
     "generate-avatar": "1.4.10",
     "graphql": "^16.8.1",
     "http-status-codes": "^2.3.0",
-    "mime": "^4.0.1",
     "nanoid": "^5.0.4",
     "path-to-regexp": "^6.2.1",
     "postcss": "^8.4.33",
@@ -56,12 +53,10 @@
     "react-helmet-async": "^2.0.4",
     "react-icons": "^5.0.1",
     "react-markdown": "^9.0.1",
-    "readdirp": "^3.6.0",
     "remark-gfm": "^4.0.0",
     "tailwindcss": "^3.4.1",
     "tsup": "^8.0.1",
     "typescript": "^5.3.3",
-    "urql": "^4.0.6",
     "vavite": "^4.0.1",
     "vike": "^0.4.156",
     "vite": "^5.0.11",

packages/web/src/app.tsx

@@ -9,6 +9,10 @@ interface AppProps {
   children: React.ReactNode;
 }
 
+declare module 'react' {
+  export type SVGAttributes<T extends EventTarget> = import('preact').JSX.SVGAttributes<T>;
+}
+
 export const App: FC<AppProps> = ({ children }) => (
   <Fragment>
     <Title>Home</Title>

packages/web/src/components/button.tsx

@@ -4,7 +4,12 @@ import type { FC, HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
 import { Spinner } from './spinner';
 
-export interface ButtonProps extends Omit<HTMLAttributes<HTMLButtonElement | HTMLAnchorElement>, 'prefix' | 'style'> {
+type ButtonBaseProps = Omit<
+  HTMLAttributes<HTMLButtonElement | HTMLAnchorElement>,
+  'prefix' | 'style' | 'as' | 'loading'
+>;
+
+export interface ButtonProps extends ButtonBaseProps {
   href?: string;
   disabled?: boolean;
   style?: ButtonStyle;

packages/web/src/components/card.tsx

@@ -1,7 +1,7 @@
 import clsx from 'clsx';
-import type { FC, HTMLAttributes } from 'react';
+import type { ComponentProps, FC } from 'react';
 
-export const Card: FC<HTMLAttributes<HTMLDivElement>> = ({ className, children, ...rest }) => {
+export const Card: FC<ComponentProps<'div'>> = ({ className, children, ...rest }) => {
   const classes = clsx(className, 'p-4 bg-dark-200 rounded');
   return (
     <div className={classes} {...rest}>

packages/web/src/components/header/header.tsx

@@ -13,7 +13,7 @@ import { Link } from '../link';
 import { useToasts } from '../toast';
 import { HeaderUser } from './header-user';
 import { graphql } from '../../@generated';
-import { useMutation } from 'urql';
+import { useMutation } from '@urql/preact';
 
 const ResendVerificationEmail = graphql(`
   mutation ResendVerificationEmail($data: ResendVerificationEmailDto) {
@@ -97,7 +97,7 @@ export const Header = memo(() => {
                   <div className="mt-3 flex gap-2 items-center">
                     <Input
                       value={email}
-                      onChange={(event) => setEmail(event.target.value)}
+                      onChange={(event) => setEmail(event.currentTarget.value)}
                       className="flex-grow"
                       placeholder="Email"
                       disabled={sendingVerification}

packages/web/src/components/input/checkbox.tsx

@@ -1,10 +1,14 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import type { InputHTMLAttributes } from 'react';
+import type { ComponentProps } from 'react';
 import React from 'react';
 import type { InputChildProps } from './container';
 import { InputContainer } from './container';
 
-export interface CheckboxProps extends InputChildProps<InputHTMLAttributes<HTMLInputElement>> {}
+type CheckboxBaseProps = InputChildProps<ComponentProps<'input'>>;
+
+export interface CheckboxProps extends CheckboxBaseProps {
+  className?: string;
+}
 
 export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(({ className, ...delegated }, ref) => {
   return (

packages/web/src/components/input/input.tsx

@@ -1,10 +1,10 @@
-import type { InputHTMLAttributes } from 'react';
-import React from 'react';
+import React, { ComponentProps } from 'react';
 import type { InputChildProps } from './container';
 import { InputContainer } from './container';
 
-export interface InputProps extends InputChildProps<InputHTMLAttributes<HTMLInputElement>> {
+export interface InputProps extends InputChildProps<ComponentProps<'input'>> {
   isError?: boolean;
+  className?: string;
 }
 
 export const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, isError, ...delegated }, ref) => {

packages/web/src/components/input/otp.tsx

@@ -19,12 +19,12 @@ export const OtpInput: FC<OtpInputProps> = ({ loading, invalid, onCode }) => {
         isError={invalid}
         placeholder="123456"
         onChange={(event) => {
-          if (loading || !event.target.value) return;
+          if (loading || !event.currentTarget.value) return;
           if (
-            (event.target.value.length === TOTP_CODE_LENGTH && NUMBER_REGEX.test(event.target.value)) ||
-            event.target.value.length === RECOVERY_CODE_LENGTH
+            (event.currentTarget.value.length === TOTP_CODE_LENGTH && NUMBER_REGEX.test(event.currentTarget.value)) ||
+            event.currentTarget.value.length === RECOVERY_CODE_LENGTH
           ) {
-            onCode(event.target.value);
+            onCode(event.currentTarget.value);
           }
         }}
         onKeyDown={(event) => {

packages/web/src/components/input/select.tsx

@@ -1,11 +1,13 @@
 import clsx from 'clsx';
-import type { SelectHTMLAttributes } from 'react';
+import type { ComponentProps } from 'react';
 import React from 'react';
+import { FiChevronDown } from 'react-icons/fi';
 import type { InputChildProps } from './container';
 import { InputContainer } from './container';
-import { FiChevronDown } from 'react-icons/fi';
 
-export interface SelectProps extends InputChildProps<SelectHTMLAttributes<HTMLSelectElement>> {}
+export interface SelectProps extends InputChildProps<ComponentProps<'select'>> {
+  className?: string;
+}
 
 export const Select = React.forwardRef<HTMLSelectElement, SelectProps>(({ className, children, ...delegated }, ref) => {
   return (

packages/web/src/components/input/textarea.tsx

@@ -1,10 +1,14 @@
 import clsx from 'clsx';
-import type { TextareaHTMLAttributes } from 'react';
+import type { ComponentProps } from 'react';
 import React from 'react';
 import type { InputChildProps } from './container';
 import { InputContainer } from './container';
 
-export interface TextAreaProps extends InputChildProps<TextareaHTMLAttributes<HTMLTextAreaElement>> {}
+type TextAreaBaseProps = InputChildProps<ComponentProps<'textarea'>>;
+
+export interface TextAreaProps extends TextAreaBaseProps {
+  className?: string;
+}
 
 export const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(({ className, ...delegated }, ref) => {
   return (

packages/web/src/components/link.tsx

@@ -1,6 +1,6 @@
-import { forwardRef, type HTMLAttributes } from 'react';
+import { ComponentProps, forwardRef } from 'react';
 
-export interface LinkProps extends HTMLAttributes<HTMLAnchorElement> {
+export interface LinkProps extends ComponentProps<'a'> {
   href: string;
 }
 

packages/web/src/components/skeleton.tsx

@@ -48,7 +48,7 @@ export const SkeletonWrap = memo<{
   show: boolean;
   children: ReactNode;
 }>(({ show, children }) => {
-  if (!show) return children;
+  if (!show) return <Fragment>{children}</Fragment>;
 
   return (
     <span className="relative">

packages/web/src/components/spinner.tsx

@@ -1,7 +1,9 @@
 import clsx from 'clsx';
-import type { FC, HTMLAttributes } from 'react';
+import type { ComponentProps, FC } from 'react';
 
-export interface SpinnerProps extends HTMLAttributes<SVGElement> {
+type SpinnerBaseProps = Omit<ComponentProps<'svg'>, 'size'>;
+
+export interface SpinnerProps extends SpinnerBaseProps {
   size?: 'small' | 'medium' | 'large';
 }
 

packages/web/src/components/syntax-highlighter/syntax-highlighter.tsx

@@ -1,12 +1,12 @@
 import clsx from 'clsx';
 import type { Language } from 'prism-react-renderer';
 import { Highlight } from 'prism-react-renderer';
-import type { HTMLProps } from 'react';
+import type { ComponentProps } from 'react';
 import { memo, useState } from 'react';
 import { theme } from './prism-theme';
 import { SyntaxHighlighterControls } from './syntax-highlighter-controls';
 
-export interface SyntaxHighlighterProps extends HTMLProps<HTMLPreElement> {
+export interface SyntaxHighlighterProps extends ComponentProps<'pre'> {
   children: string;
   language: Language;
   className?: string;

packages/web/src/components/toast/toast-provider.tsx

@@ -1,6 +1,7 @@
 import { nanoid } from 'nanoid';
 import type { FC, ReactNode } from 'react';
-import { useCallback, useState } from 'react';
+import { useCallback, useState } from 'preact/hooks';
+import { Fragment } from 'preact';
 import { ToastContext } from './context';
 import type { ToastProps } from './toast';
 import { TRANSITION_DURATION, Toast } from './toast';
@@ -47,7 +48,7 @@ export const ToastProvider: FC<{ children: ReactNode }> = (props) => {
 
   return (
     <ToastContext.Provider value={createToast}>
-      {props.children}
+      <Fragment>{props.children}</Fragment>
       <div className="fixed flex justify-end bottom-5 right-5 left-5">
         {toasts.map((toast) => (
           <Toast key={toast.id} removing={toast.removing} {...toast} />

packages/web/src/components/user-pill.tsx

@@ -1,9 +1,9 @@
 import clsx from 'clsx';
-import type { HTMLAttributes } from 'react';
+import type { ComponentProps } from 'react';
 import { forwardRef } from 'react';
 import { Avatar } from './avatar';
 
-export interface UserPillProps extends HTMLAttributes<HTMLDivElement> {
+export interface UserPillProps extends ComponentProps<'div'> {
   userId: string;
   username: string;
 }

packages/web/src/containers/file-list/file-list.tsx

@@ -1,15 +1,15 @@
+import { useQuery } from '@urql/preact';
 import type { FC } from 'react';
 import { Fragment } from 'react';
-import { useQuery } from 'urql';
 import { graphql } from '../../@generated';
 import { Breadcrumbs } from '../../components/breadcrumbs';
 import { Card } from '../../components/card';
 import { Error } from '../../components/error';
-import { SkeletonList } from '../../components/skeleton';
 import { Toggle } from '../../components/toggle';
 import { useQueryState } from '../../hooks/useQueryState';
-import { FileCard, FileCardSkeleton } from './cards/file-card';
+import { FileCard } from './cards/file-card';
 import { PasteCard } from './cards/paste-card';
+import { PageLoader } from '../../components/page-loader';
 
 const GetFilesQuery = graphql(`
   query GetFiles($after: String) {
@@ -88,11 +88,7 @@ export const FileList: FC = () => {
         </div>
       </div>
       <div className="pb-5">
-        {!source.data && (
-          <SkeletonList count={12} className="grid grid-cols-2 gap-4 md:grid-cols-4 lg:grid-cols-6">
-            <FileCardSkeleton />
-          </SkeletonList>
-        )}
+        {!source.data && <PageLoader />}
         {filter === 'files' && (
           <div className="grid grid-cols-2 gap-4 md:grid-cols-4 lg:grid-cols-6">
             {files.data?.user.files.edges.map(({ node }) => <FileCard key={node.id} file={node} />)}

packages/web/src/hooks/useConfig.tsx

@@ -1,4 +1,4 @@
-import { CombinedError, useQuery } from 'urql';
+import { CombinedError, useQuery } from '@urql/preact';
 import { graphql } from '../@generated';
 
 const ConfigQuery = graphql(`

packages/web/src/hooks/useUser.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { CombinedError, TypedDocumentNode, useMutation, useQuery } from 'urql';
+import { CombinedError, TypedDocumentNode, useMutation, useQuery } from '@urql/preact';
 import { graphql } from '../@generated';
 import type { GetUserQuery, LoginMutationVariables, RegularUserFragment } from '../@generated/graphql';
 import { navigate, reload } from '../helpers/routing';

packages/web/src/pages/dashboard/mfa/+Page.tsx

@@ -1,4 +1,4 @@
-import { useMutation, useQuery } from 'urql';
+import { useMutation, useQuery } from '@urql/preact';
 import clsx from 'clsx';
 import { QRCodeSVG } from 'qrcode.react';
 import { FC, Fragment, useCallback, useMemo } from 'react';

packages/web/src/pages/dashboard/preferences/+Page.tsx

@@ -1,5 +1,5 @@
 import { FC, Fragment } from 'react';
-import { useMutation, useQuery } from 'urql';
+import { useMutation, useQuery } from '@urql/preact';
 import { graphql } from '../../../@generated';
 import { Breadcrumbs } from '../../../components/breadcrumbs';
 import { Button } from '../../../components/button';
@@ -91,7 +91,7 @@ export const Page: FC = () => {
               readOnly
               value={user.data.user.token}
               onFocus={(event) => {
-                event.target.select();
+                event.currentTarget.select();
               }}
             />
           )}

packages/web/src/pages/file/@fileId/+Page.tsx

@@ -3,7 +3,7 @@ import copyToClipboard from 'copy-to-clipboard';
 import type { FC, ReactNode } from 'react';
 import { Fragment, useState } from 'react';
 import { FiDownload, FiShare, FiTrash } from 'react-icons/fi';
-import { useMutation, useQuery } from 'urql';
+import { useMutation, useQuery } from '@urql/preact';
 import { graphql } from '../../../@generated';
 import { Container } from '../../../components/container';
 import { Embed } from '../../../components/embed/embed';

packages/web/src/pages/invite/@inviteToken/+Page.tsx

@@ -13,7 +13,7 @@ import { navigate, prefetch } from '../../../helpers/routing';
 import { useAsync } from '../../../hooks/useAsync';
 import { useConfig } from '../../../hooks/useConfig';
 import { PageProps } from '../../../renderer/types';
-import { useQuery, useMutation } from 'urql';
+import { useQuery, useMutation } from '@urql/preact';
 
 const GetInvite = graphql(`
   query GetInvite($inviteId: ID!) {

packages/web/src/pages/paste/+Page.tsx

@@ -14,7 +14,7 @@ import { Title } from '../../components/title';
 import { encryptContent } from '../../helpers/encrypt.helper';
 import { useConfig } from '../../hooks/useConfig';
 import { useUser } from '../../hooks/useUser';
-import { useMutation } from 'urql';
+import { useMutation } from '@urql/preact';
 
 const EXPIRY_OPTIONS = [
   { name: '15 minutes', value: 15 },
@@ -164,7 +164,7 @@ export const Page: FC = () => {
               id="content"
               autoComplete="off"
               autoCorrect="off"
-              spellCheck="false"
+              spellCheck={false}
               placeholder="Markdown, code or plain text"
             />
             <div className="flex gap-2 justify-end flex-wrap">

packages/web/src/pages/paste/@pasteId/+Page.tsx

@@ -13,7 +13,7 @@ import { hashToObject } from '../../../helpers/hash-to-object';
 import { navigate } from '../../../helpers/routing';
 import { useUser } from '../../../hooks/useUser';
 import { PageProps } from '../../../renderer/types';
-import { useQuery } from 'urql';
+import { useQuery } from '@urql/preact';
 
 const PasteQuery = graphql(`
   query GetPaste($pasteId: ID!) {