chore: use unplugin-auto-import

.eslintrc.js → .eslintrc

@@ -1,11 +1,12 @@
-module.exports = {
-  extends: "@renovamen/eslint-config-react",
-  ignorePatterns: ["node_modules/", "dist/"],
-  rules: {
+{
+  "extends": "@renovamen/eslint-config-react",
+  "ignorePatterns": ["node_modules/", "dist/"],
+  "rules": {
     "@typescript-eslint/ban-types": "off",
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/no-empty-function": "off",
     "@typescript-eslint/no-non-null-assertion": "off",
-    "@typescript-eslint/no-unused-vars": "off"
+    "@typescript-eslint/no-unused-vars": "off",
+    "react/jsx-no-undef": "off"
   }
-};
+}

package.json

@@ -1,6 +1,7 @@
 {
   "name": "playground-macos",
   "private": true,
+  "type": "module",
   "scripts": {
     "build": "vite build",
     "dev": "vite --host",
@@ -58,6 +59,7 @@
     "taze": "^0.13.3",
     "typescript": "^5.4.2",
     "unocss": "^0.58.5",
+    "unplugin-auto-import": "^0.17.5",
     "vite": "^5.1.6"
   },
   "packageManager": "[email protected]"

src/auto-imports.d.ts

@@ -0,0 +1,53 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+export {}
+declare global {
+  const AppWindow: typeof import('./components/AppWindow')['default']
+  const AppleMenu: typeof import('./components/menus/AppleMenu')['default']
+  const Battery: typeof import('./components/menus/Battery')['default']
+  const Bear: typeof import('./components/apps/Bear')['default']
+  const ControlCenterMenu: typeof import('./components/menus/ControlCenterMenu')['default']
+  const Dock: typeof import('./components/dock/Dock')['default']
+  const DockItem: typeof import('./components/dock/DockItem')['default']
+  const FaceTime: typeof import('./components/apps/FaceTime')['default']
+  const Launchpad: typeof import('./components/Launchpad')['default']
+  const MenuItem: typeof import('./components/menus/base')['MenuItem']
+  const MenuItemGroup: typeof import('./components/menus/base')['MenuItemGroup']
+  const Safari: typeof import('./components/apps/Safari')['default']
+  const Spotlight: typeof import('./components/Spotlight')['default']
+  const Terminal: typeof import('./components/apps/Terminal')['default']
+  const TopBar: typeof import('./components/menus/TopBar')['default']
+  const Typora: typeof import('./components/apps/Typora')['default']
+  const VSCode: typeof import('./components/apps/VSCode')['default']
+  const WifiMenu: typeof import('./components/menus/WifiMenu')['default']
+  const Window: typeof import('./components/Window')['default']
+  const createRef: typeof import('react')['createRef']
+  const forwardRef: typeof import('react')['forwardRef']
+  const lazy: typeof import('react')['lazy']
+  const memo: typeof import('react')['memo']
+  const startTransition: typeof import('react')['startTransition']
+  const useAudio: typeof import('./hooks/useAudio')['useAudio']
+  const useBattery: typeof import('./hooks/useBattery')['useBattery']
+  const useCallback: typeof import('react')['useCallback']
+  const useClickOutside: typeof import('./hooks/useClickOutside')['useClickOutside']
+  const useContext: typeof import('react')['useContext']
+  const useDebugValue: typeof import('react')['useDebugValue']
+  const useDeferredValue: typeof import('react')['useDeferredValue']
+  const useEffect: typeof import('react')['useEffect']
+  const useId: typeof import('react')['useId']
+  const useImperativeHandle: typeof import('react')['useImperativeHandle']
+  const useInsertionEffect: typeof import('react')['useInsertionEffect']
+  const useInterval: typeof import('./hooks/useInterval')['useInterval']
+  const useLayoutEffect: typeof import('react')['useLayoutEffect']
+  const useMemo: typeof import('react')['useMemo']
+  const useReducer: typeof import('react')['useReducer']
+  const useRef: typeof import('react')['useRef']
+  const useState: typeof import('react')['useState']
+  const useStore: typeof import('./stores/index')['useStore']
+  const useSyncExternalStore: typeof import('react')['useSyncExternalStore']
+  const useTransition: typeof import('react')['useTransition']
+  const useWindowSize: typeof import('./hooks/useWindowSize')['useWindowSize']
+}

src/components/Window.tsx → src/components/AppWindow.tsx

@@ -1,7 +1,5 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
 import { Rnd } from "react-rnd";
-import { useWindowSize } from "~/hooks";
-import { useStore } from "~/stores";
 import { minMarginX, minMarginY, appBarHeight } from "~/utils";
 
 const FullIcon = ({ size }: { size: number }) => {
@@ -142,7 +140,7 @@ const Window = (props: WindowProps) => {
   const height = props.max ? winHeight : state.height;
   const disableMax = props.aspectRatio !== undefined;
 
-  const children = React.cloneElement(props.children as React.ReactElement<any>, {
+  const children = React.cloneElement(props.children as React.ReactElement, {
     width: width
   });
 

src/components/Launchpad.tsx

@@ -1,6 +1,4 @@
-import { useState } from "react";
 import { wallpapers, launchpadApps } from "~/configs";
-import { useStore } from "~/stores";
 
 interface LaunchpadProps {
   show: boolean;

src/components/Spotlight.tsx

@@ -1,8 +1,6 @@
-import React, { useRef, useState, useEffect } from "react";
-import type { RefObject } from "react";
+import React from "react";
 import format from "date-fns/format";
 import { apps, launchpadApps } from "~/configs";
-import { useClickOutside } from "~/hooks";
 import type { LaunchpadData, AppsData } from "~/types";
 
 const allApps: { [key: string]: (LaunchpadData | AppsData)[] } = {
@@ -27,7 +25,7 @@ interface SpotlightProps {
   toggleSpotlight: () => void;
   openApp: (id: string) => void;
   toggleLaunchpad: (target: boolean) => void;
-  btnRef: RefObject<HTMLDivElement>;
+  btnRef: React.RefObject<HTMLDivElement>;
 }
 
 export default function Spotlight({

src/components/apps/Bear.tsx

@@ -1,12 +1,10 @@
-import { useState, useEffect, useCallback } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import remarkMath from "remark-math";
 import rehypeKatex from "rehype-katex";
 import rehypeExternalLinks from "rehype-external-links";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { dracula, prism } from "react-syntax-highlighter/dist/esm/styles/prism";
-import { useStore } from "~/stores";
 import bear from "~/configs/bear";
 import type { BearMdData } from "~/types";
 

src/components/apps/FaceTime.tsx

@@ -1,7 +1,5 @@
-import { useRef, useState } from "react";
 import Webcam from "react-webcam";
 import format from "date-fns/format";
-import { useStore } from "~/stores";
 
 interface SidebarProps {
   state: FaceTimeState;

src/components/apps/Safari.tsx

@@ -1,7 +1,6 @@
-import React, { useState } from "react";
+import React from "react";
 import { websites, wallpapers } from "~/configs";
 import { checkURL } from "~/utils";
-import { useStore } from "~/stores";
 import type { SiteSectionData, SiteData } from "~/types";
 
 interface SafariState {

src/components/apps/Terminal.tsx

@@ -1,4 +1,4 @@
-import React, { Component } from "react";
+import React from "react";
 import { terminal } from "~/configs";
 import type { TerminalData } from "~/types";
 
@@ -21,7 +21,7 @@ interface TerminalState {
 }
 
 // rain animation is adopted from: https://codepen.io/P3R0/pen/MwgoKv
-class HowDare extends Component<HowDareProps> {
+class HowDare extends React.Component<HowDareProps> {
   private canvas = null as HTMLCanvasElement | null;
   private ctx = null as CanvasRenderingContext2D | null;
   private intervalId = null as any;
@@ -92,7 +92,7 @@ class HowDare extends Component<HowDareProps> {
   }
 }
 
-export default class Terminal extends Component<{}, TerminalState> {
+export default class Terminal extends React.Component<{}, TerminalState> {
   private history = [] as string[];
   private curHistory = 0;
   private curInputTimes = 0;

src/components/apps/Typora.tsx

@@ -4,7 +4,6 @@ import { commonmark } from "@milkdown/preset-commonmark";
 import { gfm } from "@milkdown/preset-gfm";
 import { history } from "@milkdown/plugin-history";
 import { listener, listenerCtx } from "@milkdown/plugin-listener";
-import { useStore } from "~/stores";
 
 const MilkdownEditor = () => {
   const { typoraMd, setTyporaMd } = useStore((state) => ({

src/components/dock/Dock.tsx

@@ -1,7 +1,5 @@
 import { useMotionValue } from "framer-motion";
 import { apps } from "~/configs";
-import { useStore } from "~/stores";
-import DockItem from "./DockItem";
 
 interface DockProps {
   open: (id: string) => void;

src/components/dock/DockItem.tsx

@@ -1,15 +1,18 @@
-import { useRef } from "react";
-import type { RefObject } from "react";
+import React from "react";
 import useRaf from "@rooks/use-raf";
-import { motion, useMotionValue, useSpring, useTransform } from "framer-motion";
-import type { MotionValue } from "framer-motion";
-import { useWindowSize } from "~/hooks";
+import {
+  motion,
+  useMotionValue,
+  useSpring,
+  useTransform,
+  type MotionValue
+} from "framer-motion";
 
 // Hover effect is adopted from https://github.com/PuruVJ/macos-web/blob/main/src/components/dock/DockItem.tsx
 
 const useDockHoverAnimation = (
   mouseX: MotionValue,
-  ref: RefObject<HTMLImageElement>,
+  ref: React.RefObject<HTMLImageElement>,
   dockSize: number,
   dockMag: number
 ) => {

src/components/menus/AppleMenu.tsx

@@ -1,15 +1,12 @@
-import React, { useRef } from "react";
-import type { RefObject } from "react";
-import { useClickOutside } from "~/hooks";
-import { MenuItem, MenuItemGroup } from "./base";
+import React from "react";
 
 interface AppleMenuProps {
   logout: () => void;
   shut: (e: React.MouseEvent<HTMLLIElement>) => void;
   restart: (e: React.MouseEvent<HTMLLIElement>) => void;
   sleep: (e: React.MouseEvent<HTMLLIElement>) => void;
   toggleAppleMenu: () => void;
-  btnRef: RefObject<HTMLDivElement>;
+  btnRef: React.RefObject<HTMLDivElement>;
 }
 
 export default function AppleMenu({

src/components/menus/Battery.tsx

@@ -1,5 +1,3 @@
-import { useBattery } from "~/hooks";
-
 export default function Battery() {
   const batteryState = useBattery();