fix: react 17 warnings and single tab page

ccontrols · Oct 21, 2020 · bcd2d01 · bcd2d01
1 parent 9abb655
commit bcd2d01
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 41 deletions.
diff --git a/core/store/src/index.ts b/core/store/src/index.ts
@@ -1,5 +1,4 @@
 export * from './types';
 export * from './state';
 export * from './create-pages';
-export * from './serialization/load-store';
-export * from './serialization/sitemap';
+export * from './serialization';
diff --git a/core/store/src/serialization/index.ts b/core/store/src/serialization/index.ts
@@ -0,0 +1,2 @@
+export * from './load-store';
+export * from './sitemap';
diff --git a/core/store/src/serialization/transform-controls.ts b/core/store/src/serialization/transform-controls.ts
@@ -45,9 +45,11 @@ const controlShortcuts = (
           ),
         };
       }
+      return control;
     }
+    default:
+      return control;
   }
-  return control;
 };
 export const transformControls = (
   story: Story,

diff --git a/core/store/src/state/context/document.tsx b/core/store/src/state/context/document.tsx
@@ -188,9 +188,9 @@ interface NavigationResult {
   prevPage?: DocumentPage;
 }
 
-const useNavigationLinks = (doc: Document): NavigationResult => {
-  const docId = doc.title;
-  const type = doc.type || defDocType;
+const useNavigationLinks = (doc?: Document): NavigationResult => {
+  const docId = doc?.title;
+  const type = doc?.type || defDocType;
   const docs = useDocByType(type);
   const store = useStore();
   const activeTab = useActiveTab();
@@ -233,10 +233,7 @@ const useNavigationLinks = (doc: Document): NavigationResult => {
  */
 export const useNavigationInfo = (): NavigationResult => {
   const doc = useCurrentDocument();
-  if (doc) {
-    return useNavigationLinks(doc);
-  }
-  return {};
+  return useNavigationLinks(doc);
 };
 
 type UseGetDocumentPath = (

diff --git a/ui/app/src/AppContext/AppContext.tsx b/ui/app/src/AppContext/AppContext.tsx
@@ -29,8 +29,8 @@ export const AppContext: FC<AppContextProps> = ({
   activeTab,
 }) => {
   const query =
-    typeof location !== 'undefined'
-      ? queryString.parse(location.search)
+    typeof window !== 'undefined'
+      ? queryString.parse(window.location.search)
       : undefined;
   const dynStoryId =
     query &&

diff --git a/ui/app/src/AppContext/mdxComponents.tsx b/ui/app/src/AppContext/mdxComponents.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable react/display-name */
 import React from 'react';
+import { LinkProps } from 'theme-ui';
 import { getRoutePath } from '@component-controls/core';
 import {
   MarkdownComponentType,
@@ -8,12 +9,13 @@ import {
 } from '@component-controls/components';
 import { useStore } from '@component-controls/store';
 
+const AnchorElement = (props: LinkProps) => {
+  const { href, ...rest } = props;
+  const isLocal = useIsLocalLink(href);
+  const store = useStore();
+  const link = isLocal ? getRoutePath(store, href) : href;
+  return <Link href={link} {...rest} />;
+};
 export const mdxComponents: MarkdownComponentType = {
-  a: props => {
-    const { href, ...rest } = props;
-    const isLocal = useIsLocalLink(href);
-    const store = useStore();
-    const link = isLocal ? getRoutePath(store, href) : href;
-    return <Link href={link} {...rest} />;
-  },
+  a: AnchorElement,
 };
diff --git a/ui/app/src/Header/Header.tsx b/ui/app/src/Header/Header.tsx
@@ -36,20 +36,20 @@ export const Header: FC<HeaderProps> = ({ toolbar = {} }) => {
   const config = useConfig();
   const doc = useCurrentDocument();
   const { pages, siteTitle, logo, siteDescription } = config || {};
-  const LogoLink: FC = ({ children }) => (
-    <Link
-      variant="appheader.title"
-      href={homePath}
-      aria-label={siteTitle}
-      sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}
-    >
-      {children}
-    </Link>
-  );
-  const LogoImage: FC<{ src: string }> = ({ src }) => (
-    <Image alt={siteDescription} variant="appheader.logo" src={src} />
-  );
   const leftActions: ActionItems = useMemo(() => {
+    const LogoLink: FC = ({ children }) => (
+      <Link
+        variant="appheader.title"
+        href={homePath}
+        aria-label={siteTitle}
+        sx={{ display: 'flex', flexDirection: 'row', alignItems: 'center' }}
+      >
+        {children}
+      </Link>
+    );
+    const LogoImage: FC<{ src: string }> = ({ src }) => (
+      <Image alt={siteDescription} variant="appheader.logo" src={src} />
+    );
     const actions: ActionItems = [
       {
         node: logo ? (
@@ -117,6 +117,7 @@ export const Header: FC<HeaderProps> = ({ toolbar = {} }) => {
     store,
     homePage,
     siteTitle,
+    siteDescription,
   ]);
 
   const rightActions: ActionItems = useMemo(() => {

diff --git a/ui/app/src/SidebarsPage/SidebarsStoryPage.tsx b/ui/app/src/SidebarsPage/SidebarsStoryPage.tsx
@@ -113,15 +113,17 @@ export const SidebarsStoryPage: FC<DocPageProps> = ({ type, doc }) => {
             ref={pageRef}
           >
             {tabs &&
-              tabs.map((tab, index) => {
-                const route =
-                  tab.route || (tab.title ? tab.title.toLowerCase() : '');
-                return (
-                  <TabPanel key={`panel_${route}`}>
-                    {tabIndex === index ? renderTab(tab) : null}
-                  </TabPanel>
-                );
-              })}
+              (tabs.length === 1
+                ? renderTab(tabs[0])
+                : tabs.map((tab, index) => {
+                    const route =
+                      tab.route || (tab.title ? tab.title.toLowerCase() : '');
+                    return (
+                      <TabPanel key={`panel_${route}`}>
+                        {tabIndex === index ? renderTab(tab) : null}
+                      </TabPanel>
+                    );
+                  }))}
           </PageContainer>
         </Tabs>
       </Box>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export * from './load-store';
		export * from './sitemap';