chore(docs): refactor PageTabLayout and PropsTableTab, fix some conso…

…le warnings (#4848)
aws-amplify · Dec 14, 2023 · 1d66865 · 1d66865
1 parent b6c69bd
commit 1d66865
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 59 deletions.
diff --git a/docs/scripts/generate-props-tables-data.ts b/docs/scripts/generate-props-tables-data.ts
@@ -6,7 +6,7 @@ import type {
   Category,
   ComponentName,
   Properties,
-  PropsTableSubComponentData,
+  ComponentPropsData,
   SortedPropertiesByCategory,
 } from './types/catalog';
 import { TypeFileName } from './types/allTypesData';
@@ -23,9 +23,9 @@ createAllPropsTablesData().then((allPropsTablesData) => {
 });
 
 async function createAllPropsTablesData(): Promise<
-  Map<string, PropsTableSubComponentData>
+  Map<string, ComponentPropsData>
 > {
-  const data: Map<string, PropsTableSubComponentData> = new Map();
+  const data: Map<string, ComponentPropsData> = new Map();
   for await (const componentFilepath of globbyStream(
     path.join(
       __dirname,
@@ -48,7 +48,7 @@ async function createAllPropsTablesData(): Promise<
     );
     data.set(componentName, {
       [componentName]: propsSortedByCategory,
-    } as PropsTableSubComponentData);
+    } as ComponentPropsData);
 
     if (componentName in componentsWithChildren) {
       const subComponentProps = {};

diff --git a/docs/scripts/types/catalog.d.ts b/docs/scripts/types/catalog.d.ts
diff --git a/docs/src/components/Layout/PageTabLayout.tsx b/docs/src/components/Layout/PageTabLayout.tsx
@@ -6,47 +6,22 @@ import { Tabs, View } from '@aws-amplify/ui-react';
 export const PageTabLayout = ({
   tabComponents,
 }: {
-  tabComponents: [{ title: string; children: React.ReactNode }];
+  tabComponents: { title: string; children: React.ReactNode }[];
 }) => {
-  const {
-    query: { tab = '', platform },
-    pathname,
-    push,
-  } = useRouter();
-  const tabComponentsMap = tabComponents.map(({ title }) =>
-    title.toLocaleLowerCase()
-  );
+  const { query, pathname, push } = useRouter();
 
-  const getValue = React.useCallback(
-    (tab: string) => (tab === '' ? tabComponentsMap[0] : tab),
-    [tabComponentsMap]
-  );
-  const defaultValue = getValue(tab as string);
+  const defaultValue = tabComponents[0]['title'].toLocaleLowerCase();
 
-  const [currentTab, setCurrentTab] = React.useState(defaultValue);
-  const changeURL = (tab) => {
-    push(
-      {
-        pathname,
-        query: {
-          platform,
-          ...(tab !== tabComponentsMap[0] ? { tab: tab.toLowerCase() } : null),
-        },
-      },
-      undefined,
-      { shallow: true }
-    );
-    setCurrentTab(tab);
+  const handleValueChange = (value: string) => {
+    const { platform } = query;
+    const tab = value !== defaultValue ? value.toLocaleLowerCase() : undefined;
+    push({ pathname, query: { platform, tab } }, undefined, { shallow: true });
   };
 
-  React.useEffect(() => {
-    setCurrentTab(getValue(tab as string));
-  }, [tab, getValue]);
-
   return (
     <Tabs.Container
       defaultValue={defaultValue}
-      onValueChange={changeURL}
+      onValueChange={handleValueChange}
       isLazy
     >
       <Tabs.List>

diff --git a/docs/src/components/propsTable/PropsTableTab.tsx b/docs/src/components/propsTable/PropsTableTab.tsx
@@ -1,17 +1,15 @@
 import { Heading, Link, Text } from '@aws-amplify/ui-react';
-import {
-  PropsTableData,
-  PropsTableSubComponentData,
-} from '../../../scripts/types/catalog';
+import { ComponentPropsData } from '../../../scripts/types/catalog';
 import { PropsTable } from './PropsTable';
 import { PropsTableExpander } from './PropsTableExpander';
+import PROPS_TABLE from '@/data/props-table.json';
 
 function PropsTableSet({
   componentName,
   componentPropsData,
 }: {
   componentName: string;
-  componentPropsData: PropsTableSubComponentData;
+  componentPropsData: ComponentPropsData;
 }) {
   return (
     <>
@@ -32,17 +30,14 @@ function PropsTableSet({
 
 export function PropsTableTab({
   componentName,
-  PropsData,
   htmlElement,
   mdnUrl,
 }: {
   componentName: string;
-  PropsData: PropsTableData;
   htmlElement: string;
   mdnUrl: string;
 }) {
-  const componentPropsData: PropsTableSubComponentData =
-    PropsData[componentName];
+  const componentPropsData: ComponentPropsData = PROPS_TABLE[componentName];
   return (
     <>
       <PropsTableSet

diff --git a/docs/src/pages/[platform]/components/heading/react.mdx b/docs/src/pages/[platform]/components/heading/react.mdx
@@ -84,7 +84,7 @@ The `isTruncated` prop will render an ellipsis when the Heading text exceeds its
 To override styling on all Headings, you can set the Amplify CSS variables or use the built-in `.amplify-heading` class.
 
 <Example>
-  <Heading class="heading-global-styling" level={3}>Hello world</Heading>
+  <Heading className="heading-global-styling" level={3}>Hello world</Heading>
   <ExampleCode>
     ```css
     /* styles.css */

diff --git a/docs/src/pages/_document.page.tsx b/docs/src/pages/_document.page.tsx
@@ -66,24 +66,15 @@ class MyDocument extends Document {
             httpEquiv="Content-Security-Policy"
             content={getCSPContent(this.props)}
           />
-
           <link rel="icon" type="image/svg+xml" href={favicon} />
           <link rel="apple-touch-icon" href={favicon}></link>
-
           <link
             rel="preload"
             href="/fonts/AmazonEmber_W_Rg.woff2"
             as="font"
             type="font/woff2"
             crossOrigin="anonymous"
           />
-          <link
-            rel="preload"
-            href="/fonts/AmazonEmber_W_Lt.woff2"
-            as="font"
-            type="font/woff2"
-            crossOrigin="anonymous"
-          />
           <link
             rel="preload"
             href="/fonts/Inter-Regular.woff2"