docs: refactor code

coreui · Nov 30, 2024 · 6f0e81e · 6f0e81e
1 parent d7750f6
commit 6f0e81e
Show file tree

Hide file tree

Showing 7 changed files with 180 additions and 107 deletions.
diff --git a/packages/docs/src/components/Callout.tsx b/packages/docs/src/components/Callout.tsx
@@ -1,5 +1,5 @@
 import React, { FC, ReactNode } from 'react'
-interface CalloutProps {
+export interface CalloutProps {
   children: ReactNode
   color: string
   title?: string

diff --git a/packages/docs/src/components/ClassNamesDocs.tsx b/packages/docs/src/components/ClassNamesDocs.tsx
@@ -72,7 +72,7 @@ const extractCLassNames = (code: string) => {
   return classNamesArray
 }
 
-const ClassNamesDocs = ({ files }) => {
+const ClassNamesDocs = ({ files }: { files: string | string[] }) => {
   const _files = Array.isArray(files) ? files : [files]
 
   const classNames = _files.flatMap((file) => {

diff --git a/packages/docs/src/components/CodeBlock.tsx b/packages/docs/src/components/CodeBlock.tsx
@@ -1,12 +1,12 @@
 import React, { FC } from 'react'
 import { Highlight, Prism } from 'prism-react-renderer'
 
-interface CodeBlockProps {
+export interface CodeBlockProps {
   children: any // eslint-disable-line @typescript-eslint/no-explicit-any
 }
 
 const CodeBlock: FC<CodeBlockProps> = ({ children }) => {
-  ;(typeof global === 'undefined' ? window : global).Prism = Prism
+  ;(typeof globalThis === 'undefined' ? globalThis : globalThis).Prism = Prism
   // eslint-disable-next-line unicorn/prefer-module
   require('prismjs/components/prism-bash')
   require('prismjs/components/prism-scss')

diff --git a/packages/docs/src/components/Example.tsx b/packages/docs/src/components/Example.tsx
@@ -1,5 +1,5 @@
 import React, { FC, ReactNode } from 'react'
-interface ExampleProps {
+export interface ExampleProps {
   children: ReactNode
   className: string
 }

diff --git a/packages/docs/src/components/ExampleSnippet.tsx b/packages/docs/src/components/ExampleSnippet.tsx
@@ -13,7 +13,7 @@ interface CodeSnippets {
   ts?: string
 }
 
-interface ExampleSnippetProps {
+export interface ExampleSnippetProps {
   children: ReactNode
   className?: string
   code: string | CodeSnippets

diff --git a/packages/docs/src/templates/DocsLayout.tsx b/packages/docs/src/templates/DocsLayout.tsx
@@ -1,85 +1,145 @@
-import React, { FC } from 'react'
+import React, { FC, ReactNode, useMemo } from 'react'
 import { Ads, Banner, Seo, Toc } from '../components'
-import { CContainer, CNav, CNavItem, CNavLink } from '@coreui/react/src/'
+import { CContainer, CNav, CNavItem, CNavLink } from '@coreui/react'
+// @ts-expect-error json file
+import jsonData from './../data/other_frameworks.json'
+
+import type { TocItem } from '../components/Toc'
 
 interface DocsLayoutProps {
-  children: any // eslint-disable-line @typescript-eslint/no-explicit-any
-  data: any // eslint-disable-line @typescript-eslint/no-explicit-any
-  location: any // eslint-disable-line @typescript-eslint/no-explicit-any
-  pageContext: any // eslint-disable-line @typescript-eslint/no-explicit-any
+  children: ReactNode
+  data: DocsData
+  location: Location
+  pageContext: PageContext
 }
 
-// @ts-expect-error json file
-import jsonData from './../data/other_frameworks.json'
+interface DocsData {
+  allMdx: {
+    edges: Array<{
+      node: {
+        fields: {
+          slug: string
+        }
+      }
+    }>
+  }
+  mdx?: {
+    tableOfContents: {
+      items: TocItem[]
+    }
+  }
+}
+
+interface PageContext {
+  frontmatter?: Frontmatter
+}
 
-const humanize = (text: string) => {
-  const string = text
+interface Frontmatter {
+  title?: string
+  description?: string
+  name?: string
+  other_frameworks?: string
+  pro_component?: boolean
+  route?: string
+}
+
+interface OtherFrameworks {
+  [key: string]: {
+    [key: string]: string
+  }
+}
+
+const humanize = (text: string): string => {
+  return text
     .split('-')
-    .reduce(
-      (accumulator, currentValue) =>
-        accumulator + ' ' + currentValue[0].toUpperCase() + currentValue.slice(1),
-    )
-  return string[0].toUpperCase() + string.slice(1)
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ')
 }
 
+const DocsNav: FC<{
+  route: string
+  locationPathname: string
+  hasNavAPI: boolean
+  hasNavStyling: boolean
+  hasNavAccessibility: boolean
+}> = ({ route, locationPathname, hasNavAPI, hasNavStyling, hasNavAccessibility }) => (
+  <CNav className="ms-lg-4 docs-nav bg-body" variant="underline-border">
+    <CNavItem>
+      <CNavLink href={route} active={route === locationPathname}>
+        Features
+      </CNavLink>
+    </CNavItem>
+    {hasNavAPI && (
+      <CNavItem>
+        <CNavLink href={`${route}api/`} active={`${route}api/` === locationPathname}>
+          API
+        </CNavLink>
+      </CNavItem>
+    )}
+    {hasNavStyling && (
+      <CNavItem>
+        <CNavLink href={`${route}styling/`} active={`${route}styling/` === locationPathname}>
+          Styling
+        </CNavLink>
+      </CNavItem>
+    )}
+    {hasNavAccessibility && (
+      <CNavItem>
+        <CNavLink
+          href={`${route}accessibility/`}
+          active={`${route}accessibility/` === locationPathname}
+        >
+          Accessibility
+        </CNavLink>
+      </CNavItem>
+    )}
+  </CNav>
+)
+
 const DocsLayout: FC<DocsLayoutProps> = ({ children, data, location, pageContext }) => {
-  const title = pageContext.frontmatter ? pageContext.frontmatter.title : ''
-  const description = pageContext.frontmatter ? pageContext.frontmatter.description : ''
-  const name = pageContext.frontmatter ? pageContext.frontmatter.name : ''
-  const other_frameworks = pageContext.frontmatter ? pageContext.frontmatter.other_frameworks : ''
-  const pro_component = pageContext.frontmatter ? pageContext.frontmatter.pro_component : ''
-  const route = pageContext.frontmatter ? pageContext.frontmatter.route : ''
-  const frameworks = other_frameworks ? other_frameworks.split(', ') : false
-  const otherFrameworks = JSON.parse(JSON.stringify(jsonData))
+  const frontmatter = pageContext.frontmatter || {}
 
-  const hasNav = data?.allMdx?.edges.length > 1
-  const hasNavAccesibility =
-    hasNav && data.allMdx.edges.some((edge: any) => edge.node.fields.slug.includes('accesibility'))
-  const hasNavAPI =
-    hasNav && data.allMdx.edges.some((edge: any) => edge.node.fields.slug.includes('api'))
-  const hasNavCustomizing =
-    hasNav && data.allMdx.edges.some((edge: any) => edge.node.fields.slug.includes('customizing'))
+  const {
+    title = '',
+    description = '',
+    name = '',
+    other_frameworks: otherFrameworksStr = '',
+    pro_component: proComponent = false,
+    route = '',
+  } = frontmatter
+  const frameworks = useMemo(
+    () => otherFrameworksStr.split(', ').filter(Boolean),
+    [otherFrameworksStr],
+  )
+  const otherFrameworks: OtherFrameworks = useMemo(() => ({ ...jsonData }), [])
+  const hasNav = useMemo(() => data?.allMdx?.edges.length > 1, [data])
+  const hasNavAccessibility = useMemo(
+    () =>
+      hasNav && data.allMdx.edges.some((edge) => edge.node.fields.slug.includes('accessibility')),
+    [hasNav, data],
+  )
+  const hasNavAPI = useMemo(
+    () => hasNav && data.allMdx.edges.some((edge) => edge.node.fields.slug.includes('api')),
+    [hasNav, data],
+  )
+  const hasNavStyling = useMemo(
+    () => hasNav && data.allMdx.edges.some((edge) => edge.node.fields.slug.includes('styling')),
+    [hasNav, data],
+  )
 
   return (
     <>
       <Seo title={title} description={description} name={name} />
       <CContainer lg className="my-md-4 flex-grow-1">
         <main className="docs-main order-1">
           {hasNav && (
-            <CNav className="ms-lg-4 docs-nav bg-body" variant="underline-border">
-              <CNavItem>
-                <CNavLink href={`${route}`} active={route === location.pathname}>
-                  Features
-                </CNavLink>
-              </CNavItem>
-              {hasNavAPI && (
-                <CNavItem>
-                  <CNavLink href={`${route}api/`} active={`${route}api/` === location.pathname}>
-                    API
-                  </CNavLink>
-                </CNavItem>
-              )}
-              {hasNavCustomizing && (
-                <CNavItem>
-                  <CNavLink
-                    href={`${route}customizing/`}
-                    active={`${route}customizing/` === location.pathname}
-                  >
-                    Customizing
-                  </CNavLink>
-                </CNavItem>
-              )}
-              {hasNavAccesibility && (
-                <CNavItem>
-                  <CNavLink
-                    href={`${route}accesibility/`}
-                    active={`${route}accesibility/` === location.pathname}
-                  >
-                    Accesibility
-                  </CNavLink>
-                </CNavItem>
-              )}
-            </CNav>
+            <DocsNav
+              route={route}
+              locationPathname={location.pathname}
+              hasNavAPI={hasNavAPI}
+              hasNavStyling={hasNavStyling}
+              hasNavAccessibility={hasNavAccessibility}
+            />
           )}
           <div className="docs-intro ps-lg-4">
             {name && name !== title ? (
@@ -94,38 +154,36 @@ const DocsLayout: FC<DocsLayoutProps> = ({ children, data, location, pageContext
                 {title}
               </h1>
             )}
-            <Banner pro={pro_component} />
+            <Banner pro={proComponent} />
             <p className="docs-lead">{description}</p>
             <Ads code="CEAICKJY" location={route} placement="coreuiio" />
-            {frameworks && (
+            {frameworks.length > 0 && (
               <>
-                <h2>Other frameworks</h2>
+                <h2>Other Frameworks</h2>
                 <p>
                   CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and Vue
                   components. To learn more please visit the following pages.
                 </p>
                 <ul>
-                  {frameworks.map((item: string, index: number) => (
-                    <React.Fragment key={index}>
-                      {Object.keys(otherFrameworks[item]).map(
-                        (el, index) =>
-                          el !== 'react' && (
-                            <li key={index}>
-                              <a href={otherFrameworks[item][el]}>
-                                <>
-                                  {el[0].toUpperCase() + el.slice(1)} {humanize(item)}
-                                </>
-                              </a>
-                            </li>
-                          ),
-                      )}
+                  {frameworks.map((item) => (
+                    <React.Fragment key={item}>
+                      {Object.entries(otherFrameworks[item] || {})
+                        .filter(([key]) => key !== 'react')
+                        .map(([framework, url]) => (
+                          <li key={framework}>
+                            <a href={url}>
+                              {framework.charAt(0).toUpperCase() + framework.slice(1)}{' '}
+                              {humanize(item)}
+                            </a>
+                          </li>
+                        ))}
                     </React.Fragment>
                   ))}
                 </ul>
               </>
             )}
           </div>
-          {data && data.mdx && <Toc items={data.mdx.tableOfContents.items} />}
+          {data.mdx && <Toc items={data.mdx.tableOfContents.items} />}
           <div className="docs-content ps-lg-4">{children}</div>
         </main>
       </CContainer>

diff --git a/packages/docs/src/templates/MdxLayout.tsx b/packages/docs/src/templates/MdxLayout.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react'
-import { graphql } from 'gatsby'
+import { graphql, PageProps } from 'gatsby'
 import { MDXProvider } from '@mdx-js/react'
 import {
   Callout,
@@ -11,16 +11,38 @@ import {
   ScssDocs,
 } from '../components'
 
-interface MdxLayoutProps {
-  data: any // eslint-disable-line @typescript-eslint/no-explicit-any
-  children: any // eslint-disable-line @typescript-eslint/no-explicit-any
+import { CalloutProps } from '../components/Callout'
+import { CodeBlockProps } from '../components/CodeBlock'
+import { ExampleProps } from '../components/Example'
+import { ExampleSnippetProps } from '../components/ExampleSnippet'
+import { ScssDocsProps } from '../components/ScssDocs'
+import type { TocItem } from '../components/Toc'
+
+interface DataProps {
+  mdx: {
+    tableOfContents: Toc
+  }
+  allMdx: {
+    edges: Array<{
+      node: {
+        id: string
+        fields: {
+          slug: string
+        }
+      }
+    }>
+  }
+}
+
+interface Toc {
+  items: TocItem[]
 }
 
-const MdxLayout: FC<MdxLayoutProps> = ({ children }) => {
+const MdxLayout: FC<PageProps<DataProps>> = ({ children }) => {
   return (
     <MDXProvider
       components={{
-        Callout: (props: any) => {
+        Callout: (props: CalloutProps) => {
           const { children, title, ...rest } = props
           return (
             <Callout {...rest}>
@@ -29,10 +51,8 @@ const MdxLayout: FC<MdxLayoutProps> = ({ children }) => {
             </Callout>
           )
         },
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        ClassNamesDocs: (props: any) => <ClassNamesDocs {...props} />,
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        Example: (props: any) => {
+        ClassNamesDocs: (props: { files: string | string[] }) => <ClassNamesDocs {...props} />,
+        Example: (props: ExampleProps) => {
           const { children, ...rest } = props
           return (
             <Example {...rest}>
@@ -45,15 +65,10 @@ const MdxLayout: FC<MdxLayoutProps> = ({ children }) => {
             </Example>
           )
         },
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        ExampleSnippet: (props: any) => <ExampleSnippet {...props} />,
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        JSXDocs: (props: any) => <JSXDocs {...props} />,
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        ScssDocs: (props: any) => <ScssDocs {...props} />,
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        pre: (props: any) => <CodeBlock {...props} />,
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ExampleSnippet: (props: ExampleSnippetProps) => <ExampleSnippet {...props} />,
+        JSXDocs: (props: { code: string }) => <JSXDocs {...props} />,
+        ScssDocs: (props: ScssDocsProps) => <ScssDocs {...props} />,
+        pre: (props: CodeBlockProps) => <CodeBlock {...props} />,
       }}
     >
       {children}