Skip to content

Commit 6f0e81e

Browse files
mrholekmrholek
committed
docs: refactor code
1 parent d7750f6 commit 6f0e81e

File tree

7 files changed

+180
-107
lines changed

7 files changed

+180
-107
lines changed

‎packages/docs/src/components/Callout.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { FC, ReactNode } from 'react'
2-
interface CalloutProps {
2+
export interface CalloutProps {
33
children: ReactNode
44
color: string
55
title?: string

‎packages/docs/src/components/ClassNamesDocs.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ const extractCLassNames = (code: string) => {
7272
return classNamesArray
7373
}
7474

75-
const ClassNamesDocs = ({ files }) => {
75+
const ClassNamesDocs = ({ files }: { files: string | string[] }) => {
7676
const _files = Array.isArray(files) ? files : [files]
7777

7878
const classNames = _files.flatMap((file) => {

‎packages/docs/src/components/CodeBlock.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import React, { FC } from 'react'
22
import { Highlight, Prism } from 'prism-react-renderer'
33

4-
interface CodeBlockProps {
4+
export interface CodeBlockProps {
55
children: any // eslint-disable-line @typescript-eslint/no-explicit-any
66
}
77

88
const CodeBlock: FC<CodeBlockProps> = ({ children }) => {
9-
;(typeof global === 'undefined' ? window : global).Prism = Prism
9+
;(typeof globalThis === 'undefined' ? globalThis : globalThis).Prism = Prism
1010
// eslint-disable-next-line unicorn/prefer-module
1111
require('prismjs/components/prism-bash')
1212
require('prismjs/components/prism-scss')

‎packages/docs/src/components/Example.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { FC, ReactNode } from 'react'
2-
interface ExampleProps {
2+
export interface ExampleProps {
33
children: ReactNode
44
className: string
55
}

‎packages/docs/src/components/ExampleSnippet.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ interface CodeSnippets {
1313
ts?: string
1414
}
1515

16-
interface ExampleSnippetProps {
16+
export interface ExampleSnippetProps {
1717
children: ReactNode
1818
className?: string
1919
code: string | CodeSnippets

‎packages/docs/src/templates/DocsLayout.tsx

+140-82
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,145 @@
1-
import React, { FC } from 'react'
1+
import React, { FC, ReactNode, useMemo } from 'react'
22
import { Ads, Banner, Seo, Toc } from '../components'
3-
import { CContainer, CNav, CNavItem, CNavLink } from '@coreui/react/src/'
3+
import { CContainer, CNav, CNavItem, CNavLink } from '@coreui/react'
4+
// @ts-expect-error json file
5+
import jsonData from './../data/other_frameworks.json'
6+
7+
import type { TocItem } from '../components/Toc'
48

59
interface DocsLayoutProps {
6-
children: any // eslint-disable-line @typescript-eslint/no-explicit-any
7-
data: any // eslint-disable-line @typescript-eslint/no-explicit-any
8-
location: any // eslint-disable-line @typescript-eslint/no-explicit-any
9-
pageContext: any // eslint-disable-line @typescript-eslint/no-explicit-any
10+
children: ReactNode
11+
data: DocsData
12+
location: Location
13+
pageContext: PageContext
1014
}
1115

12-
// @ts-expect-error json file
13-
import jsonData from './../data/other_frameworks.json'
16+
interface DocsData {
17+
allMdx: {
18+
edges: Array<{
19+
node: {
20+
fields: {
21+
slug: string
22+
}
23+
}
24+
}>
25+
}
26+
mdx?: {
27+
tableOfContents: {
28+
items: TocItem[]
29+
}
30+
}
31+
}
32+
33+
interface PageContext {
34+
frontmatter?: Frontmatter
35+
}
1436

15-
const humanize = (text: string) => {
16-
const string = text
37+
interface Frontmatter {
38+
title?: string
39+
description?: string
40+
name?: string
41+
other_frameworks?: string
42+
pro_component?: boolean
43+
route?: string
44+
}
45+
46+
interface OtherFrameworks {
47+
[key: string]: {
48+
[key: string]: string
49+
}
50+
}
51+
52+
const humanize = (text: string): string => {
53+
return text
1754
.split('-')
18-
.reduce(
19-
(accumulator, currentValue) =>
20-
accumulator + ' ' + currentValue[0].toUpperCase() + currentValue.slice(1),
21-
)
22-
return string[0].toUpperCase() + string.slice(1)
55+
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
56+
.join(' ')
2357
}
2458

59+
const DocsNav: FC<{
60+
route: string
61+
locationPathname: string
62+
hasNavAPI: boolean
63+
hasNavStyling: boolean
64+
hasNavAccessibility: boolean
65+
}> = ({ route, locationPathname, hasNavAPI, hasNavStyling, hasNavAccessibility }) => (
66+
<CNav className="ms-lg-4 docs-nav bg-body" variant="underline-border">
67+
<CNavItem>
68+
<CNavLink href={route} active={route === locationPathname}>
69+
Features
70+
</CNavLink>
71+
</CNavItem>
72+
{hasNavAPI && (
73+
<CNavItem>
74+
<CNavLink href={`${route}api/`} active={`${route}api/` === locationPathname}>
75+
API
76+
</CNavLink>
77+
</CNavItem>
78+
)}
79+
{hasNavStyling && (
80+
<CNavItem>
81+
<CNavLink href={`${route}styling/`} active={`${route}styling/` === locationPathname}>
82+
Styling
83+
</CNavLink>
84+
</CNavItem>
85+
)}
86+
{hasNavAccessibility && (
87+
<CNavItem>
88+
<CNavLink
89+
href={`${route}accessibility/`}
90+
active={`${route}accessibility/` === locationPathname}
91+
>
92+
Accessibility
93+
</CNavLink>
94+
</CNavItem>
95+
)}
96+
</CNav>
97+
)
98+
2599
const DocsLayout: FC<DocsLayoutProps> = ({ children, data, location, pageContext }) => {
26-
const title = pageContext.frontmatter ? pageContext.frontmatter.title : ''
27-
const description = pageContext.frontmatter ? pageContext.frontmatter.description : ''
28-
const name = pageContext.frontmatter ? pageContext.frontmatter.name : ''
29-
const other_frameworks = pageContext.frontmatter ? pageContext.frontmatter.other_frameworks : ''
30-
const pro_component = pageContext.frontmatter ? pageContext.frontmatter.pro_component : ''
31-
const route = pageContext.frontmatter ? pageContext.frontmatter.route : ''
32-
const frameworks = other_frameworks ? other_frameworks.split(', ') : false
33-
const otherFrameworks = JSON.parse(JSON.stringify(jsonData))
100+
const frontmatter = pageContext.frontmatter || {}
34101

35-
const hasNav = data?.allMdx?.edges.length > 1
36-
const hasNavAccesibility =
37-
hasNav && data.allMdx.edges.some((edge: any) => edge.node.fields.slug.includes('accesibility'))
38-
const hasNavAPI =
39-
hasNav && data.allMdx.edges.some((edge: any) => edge.node.fields.slug.includes('api'))
40-
const hasNavCustomizing =
41-
hasNav && data.allMdx.edges.some((edge: any) => edge.node.fields.slug.includes('customizing'))
102+
const {
103+
title = '',
104+
description = '',
105+
name = '',
106+
other_frameworks: otherFrameworksStr = '',
107+
pro_component: proComponent = false,
108+
route = '',
109+
} = frontmatter
110+
const frameworks = useMemo(
111+
() => otherFrameworksStr.split(', ').filter(Boolean),
112+
[otherFrameworksStr],
113+
)
114+
const otherFrameworks: OtherFrameworks = useMemo(() => ({ ...jsonData }), [])
115+
const hasNav = useMemo(() => data?.allMdx?.edges.length > 1, [data])
116+
const hasNavAccessibility = useMemo(
117+
() =>
118+
hasNav && data.allMdx.edges.some((edge) => edge.node.fields.slug.includes('accessibility')),
119+
[hasNav, data],
120+
)
121+
const hasNavAPI = useMemo(
122+
() => hasNav && data.allMdx.edges.some((edge) => edge.node.fields.slug.includes('api')),
123+
[hasNav, data],
124+
)
125+
const hasNavStyling = useMemo(
126+
() => hasNav && data.allMdx.edges.some((edge) => edge.node.fields.slug.includes('styling')),
127+
[hasNav, data],
128+
)
42129

43130
return (
44131
<>
45132
<Seo title={title} description={description} name={name} />
46133
<CContainer lg className="my-md-4 flex-grow-1">
47134
<main className="docs-main order-1">
48135
{hasNav && (
49-
<CNav className="ms-lg-4 docs-nav bg-body" variant="underline-border">
50-
<CNavItem>
51-
<CNavLink href={`${route}`} active={route === location.pathname}>
52-
Features
53-
</CNavLink>
54-
</CNavItem>
55-
{hasNavAPI && (
56-
<CNavItem>
57-
<CNavLink href={`${route}api/`} active={`${route}api/` === location.pathname}>
58-
API
59-
</CNavLink>
60-
</CNavItem>
61-
)}
62-
{hasNavCustomizing && (
63-
<CNavItem>
64-
<CNavLink
65-
href={`${route}customizing/`}
66-
active={`${route}customizing/` === location.pathname}
67-
>
68-
Customizing
69-
</CNavLink>
70-
</CNavItem>
71-
)}
72-
{hasNavAccesibility && (
73-
<CNavItem>
74-
<CNavLink
75-
href={`${route}accesibility/`}
76-
active={`${route}accesibility/` === location.pathname}
77-
>
78-
Accesibility
79-
</CNavLink>
80-
</CNavItem>
81-
)}
82-
</CNav>
136+
<DocsNav
137+
route={route}
138+
locationPathname={location.pathname}
139+
hasNavAPI={hasNavAPI}
140+
hasNavStyling={hasNavStyling}
141+
hasNavAccessibility={hasNavAccessibility}
142+
/>
83143
)}
84144
<div className="docs-intro ps-lg-4">
85145
{name && name !== title ? (
@@ -94,38 +154,36 @@ const DocsLayout: FC<DocsLayoutProps> = ({ children, data, location, pageContext
94154
{title}
95155
</h1>
96156
)}
97-
<Banner pro={pro_component} />
157+
<Banner pro={proComponent} />
98158
<p className="docs-lead">{description}</p>
99159
<Ads code="CEAICKJY" location={route} placement="coreuiio" />
100-
{frameworks && (
160+
{frameworks.length > 0 && (
101161
<>
102-
<h2>Other frameworks</h2>
162+
<h2>Other Frameworks</h2>
103163
<p>
104164
CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and Vue
105165
components. To learn more please visit the following pages.
106166
</p>
107167
<ul>
108-
{frameworks.map((item: string, index: number) => (
109-
<React.Fragment key={index}>
110-
{Object.keys(otherFrameworks[item]).map(
111-
(el, index) =>
112-
el !== 'react' && (
113-
<li key={index}>
114-
<a href={otherFrameworks[item][el]}>
115-
<>
116-
{el[0].toUpperCase() + el.slice(1)} {humanize(item)}
117-
</>
118-
</a>
119-
</li>
120-
),
121-
)}
168+
{frameworks.map((item) => (
169+
<React.Fragment key={item}>
170+
{Object.entries(otherFrameworks[item] || {})
171+
.filter(([key]) => key !== 'react')
172+
.map(([framework, url]) => (
173+
<li key={framework}>
174+
<a href={url}>
175+
{framework.charAt(0).toUpperCase() + framework.slice(1)}{' '}
176+
{humanize(item)}
177+
</a>
178+
</li>
179+
))}
122180
</React.Fragment>
123181
))}
124182
</ul>
125183
</>
126184
)}
127185
</div>
128-
{data && data.mdx && <Toc items={data.mdx.tableOfContents.items} />}
186+
{data.mdx && <Toc items={data.mdx.tableOfContents.items} />}
129187
<div className="docs-content ps-lg-4">{children}</div>
130188
</main>
131189
</CContainer>

‎packages/docs/src/templates/MdxLayout.tsx

+34-19
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { FC } from 'react'
2-
import { graphql } from 'gatsby'
2+
import { graphql, PageProps } from 'gatsby'
33
import { MDXProvider } from '@mdx-js/react'
44
import {
55
Callout,
@@ -11,16 +11,38 @@ import {
1111
ScssDocs,
1212
} from '../components'
1313

14-
interface MdxLayoutProps {
15-
data: any // eslint-disable-line @typescript-eslint/no-explicit-any
16-
children: any // eslint-disable-line @typescript-eslint/no-explicit-any
14+
import { CalloutProps } from '../components/Callout'
15+
import { CodeBlockProps } from '../components/CodeBlock'
16+
import { ExampleProps } from '../components/Example'
17+
import { ExampleSnippetProps } from '../components/ExampleSnippet'
18+
import { ScssDocsProps } from '../components/ScssDocs'
19+
import type { TocItem } from '../components/Toc'
20+
21+
interface DataProps {
22+
mdx: {
23+
tableOfContents: Toc
24+
}
25+
allMdx: {
26+
edges: Array<{
27+
node: {
28+
id: string
29+
fields: {
30+
slug: string
31+
}
32+
}
33+
}>
34+
}
35+
}
36+
37+
interface Toc {
38+
items: TocItem[]
1739
}
1840

19-
const MdxLayout: FC<MdxLayoutProps> = ({ children }) => {
41+
const MdxLayout: FC<PageProps<DataProps>> = ({ children }) => {
2042
return (
2143
<MDXProvider
2244
components={{
23-
Callout: (props: any) => {
45+
Callout: (props: CalloutProps) => {
2446
const { children, title, ...rest } = props
2547
return (
2648
<Callout {...rest}>
@@ -29,10 +51,8 @@ const MdxLayout: FC<MdxLayoutProps> = ({ children }) => {
2951
</Callout>
3052
)
3153
},
32-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
33-
ClassNamesDocs: (props: any) => <ClassNamesDocs {...props} />,
34-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
35-
Example: (props: any) => {
54+
ClassNamesDocs: (props: { files: string | string[] }) => <ClassNamesDocs {...props} />,
55+
Example: (props: ExampleProps) => {
3656
const { children, ...rest } = props
3757
return (
3858
<Example {...rest}>
@@ -45,15 +65,10 @@ const MdxLayout: FC<MdxLayoutProps> = ({ children }) => {
4565
</Example>
4666
)
4767
},
48-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
49-
ExampleSnippet: (props: any) => <ExampleSnippet {...props} />,
50-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
51-
JSXDocs: (props: any) => <JSXDocs {...props} />,
52-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
53-
ScssDocs: (props: any) => <ScssDocs {...props} />,
54-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
55-
pre: (props: any) => <CodeBlock {...props} />,
56-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
68+
ExampleSnippet: (props: ExampleSnippetProps) => <ExampleSnippet {...props} />,
69+
JSXDocs: (props: { code: string }) => <JSXDocs {...props} />,
70+
ScssDocs: (props: ScssDocsProps) => <ScssDocs {...props} />,
71+
pre: (props: CodeBlockProps) => <CodeBlock {...props} />,
5772
}}
5873
>
5974
{children}

0 commit comments

Comments
 (0)