Skip to content

Commit 8600665

Browse files
kossnocorpkossnocorp
committed
Constants doc
1 parent badd90b commit 8600665

File tree

32 files changed

+603
-288
lines changed

32 files changed

+603
-288
lines changed

‎src/ui/components/Debug/index.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { Fragment, FunctionComponent, h } from 'preact'
2+
import { Code } from '../Code'
3+
4+
interface DebugProps {
5+
data: unknown
6+
}
7+
8+
export const Debug: FunctionComponent<DebugProps> = ({ data }) => (
9+
<Code
10+
value={typeof data === 'string' ? data : JSON.stringify(data, null, 2)}
11+
/>
12+
)

‎src/ui/components/DocDescription/index.tsx‎

Lines changed: 10 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,20 @@
1-
import { ComponentChildren, FunctionComponent, h, Fragment } from 'preact'
2-
import { DocHeaderAnchor } from '~/ui/components/DocHeaderAnchor'
1+
import { Fragment, FunctionComponent, h } from 'preact'
32
import { Markdown } from '~/ui/components/Markdown'
3+
import { SectionHeader } from '../SectionHeader'
44

55
interface DocDescriptionProps {
66
description: string
7+
scope?: string
78
header?: 'h2' | 'h3'
89
}
910

1011
export const DocDescription: FunctionComponent<DocDescriptionProps> = ({
1112
description,
1213
header,
13-
}) => {
14-
const headerContent = (
15-
<>
16-
Description
17-
<DocHeaderAnchor anchor="description" />
18-
</>
19-
)
20-
21-
return (
22-
<section>
23-
{header === 'h2' ? (
24-
<h2 id="description">{headerContent}</h2>
25-
) : (
26-
<h3 id="description">{headerContent}</h3>
27-
)}
28-
29-
<Markdown value={description} />
30-
</section>
31-
)
32-
}
14+
scope,
15+
}) => (
16+
<section>
17+
<SectionHeader header="Description" scope={scope} tag={header} />
18+
<Markdown value={description} />
19+
</section>
20+
)

‎src/ui/components/DocExamples/index.tsx‎

Lines changed: 22 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,32 @@
1-
import { h, Fragment, FunctionComponent } from 'preact'
2-
import { Code } from '~/ui/components/Code'
3-
import { DocHeaderAnchor } from '~/ui/components/DocHeaderAnchor'
41
import isArray from 'lodash/isArray'
2+
import { Fragment, FunctionComponent, h } from 'preact'
3+
import { Code } from '~/ui/components/Code'
54
import { Markdown } from '~/ui/components/Markdown'
5+
import { SectionHeader } from '../SectionHeader'
66
import * as styles from './styles.css'
77

88
interface Props {
99
examples: string[] | string
10+
scope?: string
1011
header?: 'h2' | 'h3'
1112
}
1213

13-
export const DocExamples: FunctionComponent<Props> = ({ examples, header }) => {
14-
const headerContent = (
15-
<>
16-
Examples
17-
<DocHeaderAnchor anchor="examples" />
18-
</>
19-
)
14+
export const DocExamples: FunctionComponent<Props> = ({
15+
examples,
16+
scope,
17+
header,
18+
}) => (
19+
<section>
20+
<SectionHeader header="Examples" scope={scope} tag={header} />
2021

21-
return (
22-
<section>
23-
{header === 'h2' ? (
24-
<h2 id="examples">{headerContent}</h2>
25-
) : (
26-
<h3 id="description">{headerContent}</h3>
27-
)}
28-
29-
{isArray(examples) ? (
30-
examples.map((example, index) => (
31-
<div class={styles.codeContainer} key={index}>
32-
<Code value={example} />
33-
</div>
34-
))
35-
) : (
36-
<Markdown value={examples} />
37-
)}
38-
</section>
39-
)
40-
}
22+
{isArray(examples) ? (
23+
examples.map((example, index) => (
24+
<div class={styles.codeContainer} key={index}>
25+
<Code value={example} />
26+
</div>
27+
))
28+
) : (
29+
<Markdown value={examples} />
30+
)}
31+
</section>
32+
)

‎src/ui/components/DocHeader/index.tsx‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,18 @@
11
import { ComponentChildren, FunctionComponent, h } from 'preact'
2+
import { SourceLink } from '../SourceLink'
23
import * as styles from './styles.css'
34

4-
interface Props {
5+
interface DocHeaderProps {
56
children: ComponentChildren
7+
source?: string
68
}
79

8-
export const DocHeader: FunctionComponent<Props> = ({ children }) => (
9-
<h1 class={styles.header}>{children}</h1>
10+
export const DocHeader: FunctionComponent<DocHeaderProps> = ({
11+
children,
12+
source,
13+
}) => (
14+
<h1 class={styles.header}>
15+
<span>{children}</span>
16+
<SourceLink source={source} />
17+
</h1>
1018
)

‎src/ui/components/DocReturns/index.tsx‎

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,26 @@
1-
import { ComponentChildren, FunctionComponent, h, Fragment } from 'preact'
2-
import { DocHeaderAnchor } from '~/ui/components/DocHeaderAnchor'
1+
import { ComponentChildren, Fragment, FunctionComponent, h } from 'preact'
32
import { Markdown } from '~/ui/components/Markdown'
3+
import { SectionHeader } from '../SectionHeader'
44

55
interface ReturnType {
66
description: string
77
type: ComponentChildren
88
}
99

10-
interface Props {
10+
interface DocReturnsProps {
1111
returns: ReturnType[]
12+
scope?: string
1213
header?: 'h2' | 'h3'
1314
}
1415

15-
export const DocReturns: FunctionComponent<Props> = ({ returns, header }) => {
16-
const headerContent = (
17-
<>
18-
Returns
19-
<DocHeaderAnchor anchor="returns" />
20-
</>
21-
)
22-
16+
export const DocReturns: FunctionComponent<DocReturnsProps> = ({
17+
returns,
18+
scope,
19+
header,
20+
}) => {
2321
return (
2422
<section>
25-
{header === 'h2' ? (
26-
<h2 id="returns">{headerContent}</h2>
27-
) : (
28-
<h3 id="returns">{headerContent}</h3>
29-
)}
23+
<SectionHeader header="Returns" scope={scope} tag={header} />
3024

3125
<table>
3226
<thead>

‎src/ui/components/DocUsage/index.tsx‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,28 @@
1-
import { h, FunctionComponent } from 'preact'
1+
import { h, Fragment, FunctionComponent } from 'preact'
22
import { useEffect, useState } from 'preact/hooks'
33
import type { DateFnsDocs } from '@date-fns/docs/types'
44
import { Content } from './Content'
55
import { DocHeaderAnchor } from '~/ui/components/DocHeaderAnchor'
66
import * as styles from './styles.css'
77
import classNames from 'classnames'
8+
import { SectionHeader } from '../SectionHeader'
89

910
const LOCALSTORAGE_KEY = 'usageSource'
1011
const DEFAULT_SOURCE = 'commonjs'
1112

1213
interface Props {
1314
usage: DateFnsDocs.FnUsage
1415
usageTabs: string[]
16+
scope?: string
17+
header?: 'h2' | 'h3'
1518
}
1619

17-
type FIXME = any
18-
19-
export const DocUsage: FunctionComponent<Props> = ({ usageTabs, usage }) => {
20+
export const DocUsage: FunctionComponent<Props> = ({
21+
usageTabs,
22+
usage,
23+
scope,
24+
header,
25+
}) => {
2026
const [source, setSource] = useState(DEFAULT_SOURCE)
2127

2228
useEffect(() => {
@@ -34,10 +40,7 @@ export const DocUsage: FunctionComponent<Props> = ({ usageTabs, usage }) => {
3440

3541
return (
3642
<section>
37-
<h2 id="usage">
38-
Usage
39-
<DocHeaderAnchor anchor="usage" />
40-
</h2>
43+
<SectionHeader header="Usage" scope={scope} tag={header} />
4144

4245
<ul class={styles.options}>
4346
{usageTabs.map((usageTab) => {
@@ -55,7 +58,7 @@ export const DocUsage: FunctionComponent<Props> = ({ usageTabs, usage }) => {
5558
selectedTab === usageTab && styles.optionLinkIsCurrent
5659
)}
5760
href="#"
58-
onClick={(e: FIXME) => {
61+
onClick={(e) => {
5962
// FIXME:
6063
// trackAction('Changed Usage Source', { source })
6164
e.preventDefault()

‎src/ui/components/Entities/index.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import classNames from 'classnames'
2+
import { ComponentChildren, Fragment, FunctionComponent, h } from 'preact'
3+
import * as styles from './styles.css'
4+
5+
interface EntitiesProps {
6+
children: ComponentChildren
7+
alwaysMulti?: boolean
8+
}
9+
10+
export const Entities: FunctionComponent<EntitiesProps> = ({
11+
children,
12+
alwaysMulti,
13+
}) => {
14+
const solo = !Array.isArray(children) || children.length === 1
15+
const childrenArr = Array.isArray(children) ? children : [children]
16+
17+
return (
18+
<div>
19+
{childrenArr.map((child, index) => (
20+
<div
21+
class={classNames(
22+
styles.entity,
23+
(!solo || alwaysMulti) && styles.miltiEntity
24+
)}
25+
key={index}
26+
>
27+
{child}
28+
</div>
29+
))}
30+
</div>
31+
)
32+
}

‎src/ui/screens/Docs/Doc/TypeDoc/Function/Signatures/styles.css.ts‎ renamed to ‎src/ui/components/Entities/styles.css.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
import { style, globalStyle } from '@vanilla-extract/css'
22

3-
export const signature = style({
3+
export const entity = style({
44
selectors: {
55
'&:not(:last-child)': {
66
marginBottom: '1rem',
77
},
88
},
99
})
1010

11-
export const multiSignature = style({
11+
export const miltiEntity = style({
1212
border: '1px solid #5844521a',
1313
padding: '1rem',
1414
background: '#fffefd',
1515
})
1616

17-
globalStyle(`${multiSignature} > :first-child > :first-child`, {
17+
globalStyle(`${miltiEntity} > :first-child > :first-child`, {
1818
marginTop: '0',
1919
})

‎src/ui/components/HighlightQuery/index.tsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import classNames from 'classnames'
2+
import { Fragment, FunctionComponent, h } from 'preact'
3+
import { useMemo } from 'preact/hooks'
4+
import * as styles from './styles.css'
5+
6+
interface HighlightQueryProps {
7+
text: string
8+
query: string
9+
}
10+
11+
export const HighlightQuery: FunctionComponent<HighlightQueryProps> = ({
12+
text,
13+
query,
14+
}) => {
15+
const chunks = useMemo(() => highlightText(text, query), [text, query])
16+
17+
return (
18+
<>
19+
{chunks.map((chunk, index) => (
20+
<span
21+
class={classNames(chunk.type === 'query' && styles.highlight)}
22+
key={index}
23+
>
24+
{chunk.text}
25+
</span>
26+
))}
27+
</>
28+
)
29+
}
30+
31+
interface Chunk {
32+
text: string
33+
type: 'chunk' | 'query'
34+
}
35+
36+
function highlightText(text: string, query: string): Chunk[] {
37+
if (!text || !query) return [{ text, type: 'chunk' }]
38+
39+
const chunks: Chunk[] = []
40+
const textLower = text.toLowerCase()
41+
const queryLower = query.toLowerCase()
42+
let lastIndex = 0
43+
let index = textLower.indexOf(queryLower)
44+
45+
while (index !== -1) {
46+
const start = lastIndex
47+
const end = index
48+
49+
chunks.push({ text: text.slice(start, end), type: 'chunk' })
50+
chunks.push({ text: text.slice(end, end + query.length), type: 'query' })
51+
52+
lastIndex = end + query.length
53+
index = textLower.indexOf(queryLower, lastIndex)
54+
55+
if (lastIndex >= text.length) break
56+
}
57+
58+
chunks.push({ text: text.slice(lastIndex), type: 'chunk' })
59+
60+
return chunks
61+
}

‎src/ui/components/HighlightQuery/styles.css.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { style } from '@vanilla-extract/css'
2+
3+
export const highlight = style({
4+
backgroundColor: '#fffe25',
5+
})

0 commit comments

Comments
 (0)