Merge pull request #432 from bento-platform/refact/trivial-typing

refact: add typing in some straightforward places

src/components/OverviewContent.js → src/components/OverviewContent.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { type CSSProperties, useEffect } from "react";
 
 import { Layout, Divider } from "antd";
 
@@ -9,7 +9,7 @@ import VariantsSummary from "./overview/VariantsSummary";
 import ExperimentsSummary from "./overview/ExperimentsSummary";
 import { useOverviewSummary } from "@/modules/metadata/hooks";
 
-const styles = {
+const styles: Record<string, CSSProperties> = {
   pageHeaderContainer: {
     display: "flex",
     justifyContent: "space-between",

src/components/SitePageHeader.js → src/components/SitePageHeader.tsx

@@ -1,9 +1,8 @@
-import { memo } from "react";
-import PropTypes from "prop-types";
+import { type CSSProperties, memo } from "react";
 
-import { PageHeader } from "@ant-design/pro-components";
+import { PageHeader, type PageHeaderProps } from "@ant-design/pro-components";
 
-const styles = {
+const styles: Record<string, CSSProperties> = {
   pageHeader: {
     borderBottom: "1px solid rgb(232, 232, 232)",
     background: "white",
@@ -23,7 +22,13 @@ const styles = {
   },
 };
 
-const SitePageHeader = memo(({ title, subTitle, withTabBar, style, ...props }) => (
+type SitePageHeaderProps = PageHeaderProps & {
+  title?: string;
+  subTitle?: string;
+  withTabBar?: boolean;
+};
+
+const SitePageHeader = memo(({ title, subTitle, withTabBar, style, ...props }: SitePageHeaderProps) => (
   <PageHeader
     {...props}
     title={<div style={styles.pageHeaderTitle}>{title || ""}</div>}
@@ -36,11 +41,4 @@ const SitePageHeader = memo(({ title, subTitle, withTabBar, style, ...props }) =
   />
 ));
 
-SitePageHeader.propTypes = {
-  title: PropTypes.string,
-  subTitle: PropTypes.string,
-  withTabBar: PropTypes.bool,
-  style: PropTypes.object,
-};
-
 export default SitePageHeader;

src/components/SitePageLoading.js → src/components/SitePageLoading.tsx

@@ -1,7 +1,7 @@
-import SitePageHeader from "./SitePageHeader";
-
 import { Skeleton } from "antd";
 
+import SitePageHeader from "./SitePageHeader";
+
 const SitePageLoading = () => (
   <>
     <SitePageHeader title="&nbsp;" />

src/components/UserProfileContent.js → src/components/UserProfileContent.tsx

@@ -20,7 +20,7 @@ const UserProfileContent = () => {
           {idTokenContents ? (
             <Descriptions bordered={true} style={DESCRIPTIONS_STYLE}>
               <Descriptions.Item label="Username" span={3}>
-                {username}
+                {username as string | undefined}
               </Descriptions.Item>
               <Descriptions.Item label="Issuer" span={3}>
                 {iss}

src/components/charts/ChartContainer.jsx → src/components/charts/ChartContainer.tsx

@@ -1,3 +1,4 @@
+import type { ReactNode } from "react";
 import { Empty } from "antd";
 import PropTypes from "prop-types";
 
@@ -7,19 +8,24 @@ const TITLE_STYLE = {
   margin: "0 0 10px 0",
 };
 
-const ChartContainer = ({ title, children, empty }) => (
+type ChartContainerProps = {
+  title: string;
+  children: ReactNode;
+  empty?: boolean;
+};
+
+const ChartContainer = ({ title, children, empty }: ChartContainerProps) => (
   <div style={{ marginBottom: "20px", width: "100%" }}>
     <h2 style={TITLE_STYLE}>{title}</h2>
     {empty ? <NoDataComponent height={300} /> : children}
   </div>
 );
 
-ChartContainer.propTypes = {
-  title: PropTypes.string.isRequired,
-  children: PropTypes.node.isRequired,
-  empty: PropTypes.bool,
+type NoDataComponentProps = {
+  height: number;
 };
-const NoDataComponent = ({ height }) => (
+
+const NoDataComponent = ({ height }: NoDataComponentProps) => (
   <div
     style={{
       height: height,

src/components/explorer/styles.ts

@@ -0,0 +1,7 @@
+import type { CSSProperties } from "react";
+
+export const STYLE_FIX_NESTED_TABLE_MARGIN: CSSProperties = {
+  // compensate for bad inner nested table styling:
+  marginLeft: "-44px",
+  padding: "16px 0",
+};

src/custom.d.ts

@@ -0,0 +1,5 @@
+declare module "*.svg" {
+  // allow any type for SVG content
+  const content: any;  // eslint-disable-line
+  export default content;
+}

tsconfig.json

@@ -24,5 +24,5 @@
       "mammoth/mammoth.browser": ["./node_modules/mammoth/lib/index.d.ts"],
     }
   },
-  "include": ["./src/"]
+  "include": ["./src/", "./src/custom.d.ts"]
 }