refactor(docusaurus): refactor to TS - shared/{navcard,card,ga}

#254

Author: azinit

.eslintignore

@@ -4,3 +4,4 @@ build/**
 .github
 public/
 .workflows
+/**/*.d.ts

.eslintrc.js

@@ -26,7 +26,7 @@ module.exports = {
         "import/no-unresolved": [
             2,
             {
-                ignore: ["^@theme-original"],
+                ignore: ["^@theme-original", "./styles.module.scss"],
             },
         ],
     },

declaration.d.ts

@@ -0,0 +1,4 @@
+declare module '*.scss' {
+    const content: Record<string, string>;
+    export default content;
+};

global.d.ts

@@ -0,0 +1,14 @@
+declare global {
+    interface Window {
+        essss: string;
+        ga: (eventType: string, options: {
+            hitType: string,
+            eventCategory: string,
+            eventAction: string,
+            eventLabel: string,
+            eventValue: number,
+        }) => void;
+    }
+}
+
+export {};

src/shared/lib/ga/ga.js src/shared/lib/ga/ga.ts

@@ -1,4 +1,11 @@
-export const sendEvent = ({ category, action, label, value }) => {
+type EventOptions = {
+    category: string;
+    action: string;
+    label: string;
+    value?: number;
+};
+
+export const sendEvent = ({ category, action, label, value }: EventOptions) => {
     if (typeof window === undefined) return;
     if (!window.ga) return;
 

src/shared/lib/ga/index.js src/shared/lib/ga/index.ts

@@ -1,8 +1,16 @@
 import React from "react";
 import clsx from "clsx";
 import styles from "./styles.module.scss";
+import type { AntdIconProps } from "@ant-design/icons/lib/components/AntdIcon";
 
-export function Card({ Icon, title, description, size }) {
+type Props = {
+    Icon: React.FC<AntdIconProps>;
+    title: string;
+    description: React.ReactNode;
+    size: number;
+};
+
+export const Card: React.FC<Props> = ({ Icon, title, description, size }) => {
     return (
         <div className={clsx("col", `col--${size}`)}>
             <div className="text--center">
@@ -14,4 +22,4 @@ export function Card({ Icon, title, description, size }) {
             </div>
         </div>
     );
-}
+};

src/shared/ui/card/index.jsx src/shared/ui/card/index.tsx

@@ -5,12 +5,22 @@ import Link from "@docusaurus/Link";
 import { ga } from "@site/src/shared/lib/ga";
 import styles from "./styles.module.scss";
 
+type Props = {
+    title: React.ReactNode;
+    description: React.ReactNode;
+    to: string;
+    Icon: string | any;
+    tags?: string[];
+    className?: string;
+    disabled?: boolean;
+    theme?: "default" | "mini" | "primary";
+};
+
 /**
  * NavCard for linking
  * @see https://docusaurus.io/docs/next/markdown-features/react#importing-markdown
- * @param {import('./types').Props} props
  */
-export const NavCard = (props) => {
+export const NavCard: React.FC<Props> = (props) => {
     const { title, description, to, Icon, tags, className, disabled, theme = "default" } = props;
     const handleClick = useCallback(() => {
         ga.sendEvent({

src/shared/ui/nav-card/index.jsx src/shared/ui/nav-card/index.tsx

@@ -1,3 +1,3 @@
-import NavCard from "./index.jsx";
+import NavCard from "./index.tsx";
 
 <NavCard {...props} />

src/shared/ui/nav-card/tmpl.mdx

@@ -1,6 +1,7 @@
 {
     "extends": "@tsconfig/docusaurus/tsconfig.json",
     "compilerOptions": {
-      "baseUrl": "."
+      "baseUrl": ".",
+      "typeRoots": ["declaration.d.ts", "global.d.ts", "./node_modules/@types"]
     }
 }