Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 6f0e81e

Browse filesBrowse files
mrholekmrholek
committed
docs: refactor code
1 parent d7750f6 commit 6f0e81e
Copy full SHA for 6f0e81e

File tree

7 files changed

+180
-107
lines changed
Filter options

7 files changed

+180
-107
lines changed

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

Copy file name to clipboardExpand all lines: packages/docs/src/components/Callout.tsx
+1-1Lines changed: 1 addition & 1 deletion
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

Copy file name to clipboardExpand all lines: packages/docs/src/components/ClassNamesDocs.tsx
+1-1Lines changed: 1 addition & 1 deletion
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

Copy file name to clipboardExpand all lines: packages/docs/src/components/CodeBlock.tsx
+2-2Lines changed: 2 additions & 2 deletions
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

Copy file name to clipboardExpand all lines: packages/docs/src/components/Example.tsx
+1-1Lines changed: 1 addition & 1 deletion
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

Copy file name to clipboardExpand all lines: packages/docs/src/components/ExampleSnippet.tsx
+1-1Lines changed: 1 addition & 1 deletion
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

Copy file name to clipboardExpand all lines: packages/docs/src/templates/DocsLayout.tsx
+140-82Lines changed: 140 additions & 82 deletions
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

Copy file name to clipboardExpand all lines: packages/docs/src/templates/MdxLayout.tsx
+34-19Lines changed: 34 additions & 19 deletions
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 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.