refactor: add types for configs

README.md

@@ -2,7 +2,7 @@
 
 My portfolio website simulating macOS's GUI: https://portfolio.zxh.io
 
-Powered by [React](https://reactjs.org/) + [React Redux](https://react-redux.js.org/) + [tailwindcss](https://tailwindcss.com/) + [TypeScript](https://www.typescriptlang.org/).
+Powered by [React](https://reactjs.org/) + [React Redux](https://react-redux.js.org/) + [Tailwind CSS](https://tailwindcss.com/) + [TypeScript](https://www.typescriptlang.org/).
 
 ![day](./public/screenshots/day.png)
 ![night](./public/screenshots/night.png)

src/components/Spotlight.tsx

@@ -3,8 +3,9 @@ import format from "date-fns/format";
 import { BiSearch } from "react-icons/bi";
 import apps from "../configs/apps";
 import launchpad from "../configs/launchpad";
+import { LaunchpadData, AppsData } from "../types";
 
-const allApps: { [key: string]: any } = {
+const allApps: { [key: string]: (LaunchpadData | AppsData)[] } = {
   app: apps,
   portfolio: launchpad
 };
@@ -65,7 +66,7 @@ export default class Spotlight extends Component<
   search = (type: string) => {
     if (this.state.searchText === "") return [];
     const text = this.state.searchText.toLowerCase();
-    const list = allApps[type].filter((item: any) => {
+    const list = allApps[type].filter((item: LaunchpadData | AppsData) => {
       return (
         item.title.toLowerCase().includes(text) ||
         item.id.toLowerCase().includes(text)
@@ -197,7 +198,7 @@ export default class Spotlight extends Component<
     const elem = document.querySelector(`#spotlight-${appId}`) as HTMLElement;
     const id = appId;
     const type = elem.dataset.appType as string;
-    const app = allApps[type].find((item: any) => {
+    const app = allApps[type].find((item: LaunchpadData | AppsData) => {
       return item.id === id;
     });
     this.setCurDetails(app, type);

src/components/apps/Bear.tsx

@@ -5,20 +5,21 @@ import gfm from "remark-gfm";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { dracula, prism } from "react-syntax-highlighter/dist/esm/styles/prism";
 import bear from "../../configs/bear";
+import { BearMdData } from "../../types";
 import { IoCloudOfflineOutline } from "react-icons/io5";
 import { GiSettingsKnobs } from "react-icons/gi";
 import { AiOutlineLink } from "react-icons/ai";
 
 interface BearRedux {
-  dark: boolean;
+  dark?: boolean;
 }
 
 interface BearState {
   curSidebar: number;
   curMidbar: number;
   contentID: string;
   contentURL: string;
-  midbarList: any;
+  midbarList: BearMdData[];
 }
 
 interface ContentProps extends BearRedux {
@@ -33,14 +34,14 @@ interface ContentState {
 }
 
 interface MiddlebarProps {
-  items: any;
+  items: BearMdData[];
   cur: number;
   setContent: (id: string, url: string, index: number) => void;
 }
 
 interface SidebarProps {
   cur: number;
-  setMidBar: (items: any, index: number) => void;
+  setMidBar: (items: BearMdData[], index: number) => void;
 }
 
 const Highlighter = (dark: boolean): any => {
@@ -101,7 +102,7 @@ class Middlebar extends Component<MiddlebarProps> {
     return (
       <div className="midbar w-full h-full bg-gray-50 border-r border-gray-300 overflow-y-scroll">
         <ul>
-          {this.props.items.map((item: any, index: number) => (
+          {this.props.items.map((item: BearMdData, index: number) => (
             <li
               key={`bear-midbar-${item.id}`}
               className={`h-24 flex flex-col cursor-default border-l-2 ${
@@ -179,7 +180,7 @@ class Content extends Component<ContentProps, ContentState> {
             children={this.state.storeMd[this.props.id]}
             linkTarget="_blank"
             remarkPlugins={[gfm]}
-            components={Highlighter(this.props.dark)}
+            components={Highlighter(this.props.dark as boolean)}
           />
         </div>
       </div>
@@ -199,7 +200,7 @@ class Bear extends Component<BearRedux, BearState> {
     };
   }
 
-  setMidBar = (items: any, index: number) => {
+  setMidBar = (items: BearMdData[], index: number) => {
     this.setState({
       midbarList: items,
       curSidebar: index,

src/components/apps/Safari.tsx

@@ -7,14 +7,15 @@ import { FiChevronLeft, FiChevronRight } from "react-icons/fi";
 import { BsLayoutSidebar } from "react-icons/bs";
 import { IoShareOutline, IoCopyOutline } from "react-icons/io5";
 import { checkURL } from "../../utils/url";
+import { SiteSectionData, SiteData } from "../../types";
 
 interface SafariRedux {
-  dark: boolean;
-  wifi: boolean;
+  dark?: boolean;
+  wifi?: boolean;
 }
 
 interface SafariProps extends SafariRedux {
-  width: number;
+  width?: number;
 }
 
 interface SafariState {
@@ -32,7 +33,7 @@ interface Nav {
 }
 
 interface NavSectionProps extends Nav {
-  section: any;
+  section: SiteSectionData;
 }
 
 interface NavProps extends Nav {
@@ -48,7 +49,7 @@ class NavSection extends Component<NavSectionProps> {
           {this.props.section.title}
         </div>
         <div className={`mt-3 grid grid-flow-row ${grid}`}>
-          {this.props.section.sites.map((site: { [key: string]: string }) => (
+          {this.props.section.sites.map((site: SiteData) => (
             <div
               key={`safari-nav-${site.id}`}
               className="h-28 w-full flex justify-center items-center"
@@ -217,8 +218,9 @@ class Safari extends Component<SafariProps, SafariState> {
   render() {
     const buttonColor =
       this.state.goURL === "" ? "text-gray-400" : "text-gray-700";
-    const grid = this.props.width < 640 ? "grid-cols-2" : "grid-cols-3";
-    const hideLast = this.props.width < 640 ? "hidden" : "";
+    const grid =
+      (this.props.width as number) < 640 ? "grid-cols-2" : "grid-cols-3";
+    const hideLast = (this.props.width as number) < 640 ? "hidden" : "";
 
     return (
       <div className="w-full h-full bg-white">
@@ -268,8 +270,8 @@ class Safari extends Component<SafariProps, SafariState> {
           this.state.goURL === "" ? (
             <NavPage
               setGoURL={this.setGoURL}
-              width={this.props.width}
-              dark={this.props.dark}
+              width={this.props.width as number}
+              dark={this.props.dark as boolean}
             />
           ) : (
             <iframe
@@ -280,7 +282,7 @@ class Safari extends Component<SafariProps, SafariState> {
             />
           )
         ) : (
-          <NoInternetPage dark={this.props.dark} />
+          <NoInternetPage dark={this.props.dark as boolean} />
         )}
       </div>
     );

src/components/apps/Terminal.tsx

@@ -1,5 +1,6 @@
 import React, { Component } from "react";
 import terminal from "../../configs/terminal";
+import { TerminalData } from "../../types";
 
 const emojis = [
   "\\(o_o)/",
@@ -151,7 +152,7 @@ export default class Terminal extends Component<{}, TerminalState> {
   getCurChildren = () => {
     let children = terminal as any;
     for (let name of this.curDirPath) {
-      children = children.find((item: any) => {
+      children = children.find((item: TerminalData) => {
         return item.title === name && item.type === "folder";
       }).children;
     }
@@ -174,7 +175,7 @@ export default class Terminal extends Component<{}, TerminalState> {
       this.curChildren = this.getCurChildren();
     } else {
       // move to certain child folder
-      const target = this.curChildren.find((item: any) => {
+      const target = this.curChildren.find((item: TerminalData) => {
         return item.title === args && item.type === "folder";
       });
       if (target === undefined) {
@@ -212,7 +213,7 @@ export default class Terminal extends Component<{}, TerminalState> {
 
   // display content of a specified file
   cat = (args?: string): void => {
-    const file = this.curChildren.find((item: any) => {
+    const file = this.curChildren.find((item: TerminalData) => {
       return item.title === args && item.type === "file";
     });
 
@@ -285,7 +286,7 @@ export default class Terminal extends Component<{}, TerminalState> {
       if (guess !== undefined) result = guess;
     } else if (cmd === "cd" || cmd === "cat") {
       const type = cmd === "cd" ? "folder" : "file";
-      const guess = this.curChildren.find((item: any) => {
+      const guess = this.curChildren.find((item: TerminalData) => {
         return (
           item.type === type && item.title.substring(0, args.length) === args
         );

src/components/menus/ControlCenterMenu.tsx

@@ -24,7 +24,7 @@ import { IoSunny, IoMoon, IoVolumeHigh } from "react-icons/io5";
 import { FaWifi } from "react-icons/fa";
 
 interface SliderProps {
-  icon: any;
+  icon: JSX.Element;
   value: number;
   setValue: (value: number) => void;
 }

src/configs/apps.js → src/configs/apps.tsx

@@ -4,7 +4,9 @@ import Safari from "../components/apps/Safari";
 import Bear from "../components/apps/Bear";
 import VSCode from "../components/apps/VSCode";
 
-const apps = [
+import { AppsData } from "../types";
+
+const apps: AppsData[] = [
   {
     id: "launchpad",
     title: "Launchpad",

src/configs/bear.js → src/configs/bear.tsx

@@ -15,7 +15,9 @@ import { BiCube, BiGame } from "react-icons/bi";
 import { BsFillImageFill } from "react-icons/bs";
 import { AiFillAudio } from "react-icons/ai";
 
-const bear = [
+import { BearData } from "../types";
+
+const bear: BearData[] = [
   {
     id: "profile",
     title: "Profile",

src/configs/launchpad.js → src/configs/launchpad.ts

@@ -1,4 +1,6 @@
-const launchpadApps = [
+import { LaunchpadData } from "../types";
+
+const launchpadApps: LaunchpadData[] = [
   {
     id: "flint",
     title: "Flint",

src/configs/music.js → src/configs/music.ts

@@ -1,4 +1,6 @@
-const music = {
+import { MusicData } from "../types";
+
+const music: MusicData = {
   title: "Sunflower",
   artist: "Post Malone / Swae Lee",
   cover: "//p1.music.126.net/z0IO1vEsowL9mD_5yzUjeA==/109951163936068098.jpg",

src/configs/terminal.js → src/configs/terminal.tsx

@@ -1,4 +1,6 @@
-const terminal = [
+import { TerminalData } from "../types";
+
+const terminal: TerminalData[] = [
   {
     id: "about",
     title: "about",

src/configs/user.js → src/configs/user.ts

@@ -1,4 +1,6 @@
-const user = {
+import { UserData } from "../types";
+
+const user: UserData = {
   name: "Xiaohan Zou",
   avatar: "img/ui/avatar.jpg"
 };

src/configs/wallpapers.js → src/configs/wallpapers.ts

@@ -1,4 +1,6 @@
-const wallpapers = {
+import { WallpaperData } from "../types";
+
+const wallpapers: WallpaperData = {
   day: "img/ui/wallpaper-day.jpg",
   night: "img/ui/wallpaper-night.jpg"
 };

src/configs/websites.js → src/configs/websites.ts

@@ -1,4 +1,6 @@
-const websites = {
+import { WebsitesData } from "../types";
+
+const websites: WebsitesData = {
   favorites: {
     title: "SNS Links",
     sites: [

src/pages/Desktop.tsx

@@ -13,7 +13,7 @@ import wallpapers from "../configs/wallpapers";
 
 type DesktopRedux = {
   dark?: boolean;
-  brightness?: any;
+  brightness?: number;
 };
 
 type DesktopProps = DesktopRedux & macActions;
@@ -244,7 +244,9 @@ class Desktop extends Component<DesktopProps, DesktopState> {
           backgroundImage: `url(${
             this.props.dark ? wallpapers.night : wallpapers.day
           })`,
-          filter: `brightness( ${this.props.brightness * 0.7 + 50}% )`
+          filter: `brightness( ${
+            (this.props.brightness as number) * 0.7 + 50
+          }% )`
         }}
       >
         {/* Dark Model Toggler */}

src/types/configs/apps.d.ts

@@ -0,0 +1,13 @@
+export interface AppsData {
+  id: string;
+  title: string;
+  desktop: boolean;
+  img: string;
+  show?: boolean;
+  width?: number;
+  height?: number;
+  minWidth?: number;
+  minHeight?: number;
+  content?: JSX.Element;
+  link?: string;
+}

src/types/configs/bear.d.ts

@@ -0,0 +1,17 @@
+import { IconType } from "react-icons/lib";
+
+export interface BearMdData {
+  id: string;
+  title: string;
+  file: string;
+  icon: JSX.Element;
+  excerpt: string;
+  link?: string;
+}
+
+export interface BearData {
+  id: string;
+  title: string;
+  icon: JSX.Element;
+  md: BearMdData[];
+}

src/types/configs/index.d.ts

@@ -0,0 +1,8 @@
+export { AppsData } from "./apps";
+export { BearMdData, BearData } from "./bear";
+export { LaunchpadData } from "./launchpad";
+export { MusicData } from "./music";
+export { TerminalData } from "./terminal";
+export { UserData } from "./user";
+export { WallpaperData } from "./wallpaper";
+export { WebsitesData, SiteSectionData, SiteData } from "./websites";

src/types/configs/launchpad.d.ts

@@ -0,0 +1,6 @@
+export interface LaunchpadData {
+  id: string;
+  title: string;
+  img: string;
+  link: string;
+}

src/types/configs/music.d.ts

@@ -0,0 +1,6 @@
+export interface MusicData {
+  title: string;
+  artist: string;
+  cover: string;
+  audio: string;
+}

src/types/configs/terminal.d.ts

@@ -0,0 +1,7 @@
+export interface TerminalData {
+  id: string;
+  title: string;
+  type: string;
+  content?: JSX.Element | string;
+  children?: TerminalData[];
+}

src/types/configs/user.d.ts

@@ -0,0 +1,4 @@
+export interface UserData {
+  name: string;
+  avatar: string;
+}

src/types/configs/wallpaper.d.ts

@@ -0,0 +1,4 @@
+export interface WallpaperData {
+  day: string;
+  night: string;
+}