Skip to content

Commit 21377d4

Browse files
kossnocorpkossnocorp
committed
Advance types rendering, a lot of changes
1 parent 24edcfc commit 21377d4

File tree

37 files changed

+925
-429
lines changed

37 files changed

+925
-429
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
"start": "env NODE_ENV=development ts-node -r tsconfig-paths/register devServer.ts"
1515
},
1616
"dependencies": {
17-
"@date-fns/docs": "0.14.0",
17+
"@date-fns/docs": "0.18.0",
1818
"@sentry/browser": "^5.30.0",
1919
"@sentry/tracing": "^5.30.0",
2020
"@switcher/preact": "2.3.0",

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

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,34 @@ import './global.css?global'
55
import * as styles from './styles.css'
66

77
interface CodeProps {
8+
value: string | JSX.Element
9+
}
10+
export const Code: FunctionComponent<CodeProps> = ({ value }) =>
11+
typeof value === 'string' ? (
12+
<CodeHighlight value={value} />
13+
) : (
14+
<CodeComponent value={value} />
15+
)
16+
17+
interface CodeComponentProps {
18+
value: JSX.Element
19+
}
20+
21+
export const CodeComponent: FunctionComponent<CodeComponentProps> = ({
22+
value,
23+
}) => {
24+
return (
25+
<pre class={styles.pre}>
26+
<code class={styles.code}>{value}</code>
27+
</pre>
28+
)
29+
}
30+
31+
interface CodeHighlightProps {
832
value: string
933
}
10-
export const Code: FunctionComponent<CodeProps> = ({ value }) => {
34+
35+
function CodeHighlight({ value }: CodeHighlightProps) {
1136
const html = Prism.highlight(value, Prism.languages.javascript, 'javascript')
1237

1338
return (

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,11 @@ export const code = style({
55
color: '#5d583b',
66
backgroundColor: '#fffffe',
77
font: "13px Consolas, 'Liberation Mono', Menlo, Courier, monospace",
8+
89
'::after': {
910
display: 'none',
1011
},
12+
1113
'::before': {
1214
display: 'none',
1315
},
@@ -17,5 +19,5 @@ export const pre = style({
1719
overflowX: 'auto',
1820
border: '1px solid #b9a2b2',
1921
backgroundColor: '#fffffe',
20-
padding: '4px 8px',
22+
padding: '.25rem .5rem',
2123
})

‎src/ui/screens/Docs/Finder/img/icon.svg‎ renamed to ‎src/ui/components/Item/img/icon.svg‎

File renamed without changes.

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import classNames from 'classnames'
2+
import { Fragment, FunctionComponent, h } from 'preact'
3+
import * as styles from './styles.css'
4+
5+
interface Props {
6+
title: string
7+
summary: string | undefined
8+
selected: boolean
9+
code: boolean
10+
}
11+
12+
export const Item: FunctionComponent<Props> = ({
13+
title,
14+
summary,
15+
selected,
16+
code,
17+
}) => (
18+
<div class={classNames(styles.item, selected && styles.selected)}>
19+
<div>
20+
<h4 class={classNames(styles.title, code && styles.codeTitle)}>
21+
{title}
22+
</h4>
23+
24+
{styles.summary && <p class={styles.summary}>{summary}</p>}
25+
</div>
26+
27+
<div class={styles.icon} />
28+
</div>
29+
)

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

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { style } from '@vanilla-extract/css'
2+
import iconURL from './img/icon.svg'
3+
4+
export const item = style({
5+
display: 'flex',
6+
justifyContent: 'space-between',
7+
alignItems: 'center',
8+
backgroundColor: 'rgba(255,255,255,0.65)',
9+
padding: '0.5rem 1rem',
10+
borderBottom: '1px solid #e6e0e6',
11+
textDecoration: 'none',
12+
13+
':hover': {
14+
background: '#fdf6f9',
15+
},
16+
})
17+
18+
export const icon = style({
19+
backgroundImage: `url('${iconURL}')`,
20+
backgroundSize: '16px',
21+
width: '16px',
22+
height: '16px',
23+
flexShrink: '0',
24+
marginLeft: '10px',
25+
})
26+
27+
export const selected = style({
28+
backgroundColor: '#fff0f3',
29+
30+
':hover': {
31+
backgroundColor: '#fff0f3',
32+
},
33+
})
34+
35+
export const title = style({
36+
fontSize: '1rem',
37+
marginBottom: '0.4px',
38+
wordBreak: 'break-all',
39+
color: '#4c193c',
40+
})
41+
42+
export const codeTitle = style({
43+
fontFamily: 'monospace',
44+
})
45+
46+
export const summary = style({
47+
fontWeight: '400',
48+
fontSize: '0.9rem',
49+
color: '#7b6d77',
50+
display: '-webkit-box',
51+
WebkitBoxOrient: 'vertical',
52+
WebkitLineClamp: 2,
53+
overflow: 'hidden',
54+
wordBreak: 'break-all',
55+
})

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ export const windowBase = style({
3434
color: '#4a3142',
3535
width: '100%',
3636
margin: '0 auto',
37+
overflow: 'hidden',
3738
})
3839

3940
export const window = styleVariants({
@@ -50,6 +51,20 @@ export const window = styleVariants({
5051
maxWidth: '50rem',
5152
},
5253
],
54+
55+
large: [
56+
windowBase,
57+
{
58+
maxWidth: '60rem',
59+
},
60+
],
61+
62+
xlarge: [
63+
windowBase,
64+
{
65+
maxWidth: '70rem',
66+
},
67+
],
5368
})
5469

5570
export const close = style({
@@ -73,6 +88,14 @@ export const close = style({
7388
[`${window.medium} &`]: {
7489
marginLeft: '51rem',
7590
},
91+
92+
[`${window.large} &`]: {
93+
marginLeft: '61rem',
94+
},
95+
96+
[`${window.xlarge} &`]: {
97+
marginLeft: '71rem',
98+
},
7699
},
77100
})
78101

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { ComponentChildren, FunctionComponent, h } from 'preact'
2+
import * as styles from './styles.css'
3+
4+
interface Props {
5+
children: ComponentChildren
6+
}
7+
8+
export const RichText: FunctionComponent<Props> = ({ children }) => (
9+
<div class={styles.content}>{children}</div>
10+
)

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

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
import { style, globalStyle } from '@vanilla-extract/css'
2+
3+
export const content = style({
4+
fontSize: '1rem',
5+
lineHeight: '1.6em',
6+
})
7+
8+
globalStyle(`${content} a`, {
9+
color: '#5d3861',
10+
})
11+
12+
globalStyle(`${content} h1`, {
13+
color: '#770c56',
14+
fontSize: '2.3rem',
15+
marginBottom: '30px',
16+
paddingBottom: '23px',
17+
borderBottom: '1px solid rgba(88,68,82,0.1)',
18+
})
19+
20+
globalStyle(`${content} h2`, {
21+
color: '#4a3142',
22+
fontSize: '1.3rem',
23+
marginBottom: '15px',
24+
paddingBottom: '10px',
25+
marginTop: '30px',
26+
borderBottom: '1px solid rgba(88,68,82,0.1)',
27+
})
28+
29+
globalStyle(`${content} h3`, {
30+
color: '#4a3142',
31+
fontWeight: '500',
32+
fontSize: '1.2rem',
33+
marginBottom: '20px',
34+
marginTop: '20px',
35+
})
36+
37+
globalStyle(`${content} ol`, {
38+
listStyle: 'decimal',
39+
maxWidth: '700px',
40+
marginLeft: '25px',
41+
marginBottom: '10px',
42+
})
43+
44+
globalStyle(`${content} ol ol`, {
45+
marginBottom: '0',
46+
})
47+
48+
globalStyle(`${content} ol p + ul`, {
49+
marginTop: '-10px',
50+
})
51+
52+
globalStyle(`${content} ol pre:last-child`, {
53+
marginBottom: '10px',
54+
})
55+
56+
globalStyle(`${content} ol ul`, {
57+
marginBottom: '0',
58+
})
59+
60+
globalStyle(`${content} ol:last-child`, {
61+
marginBottom: '0',
62+
})
63+
64+
globalStyle(`${content} p`, {
65+
marginBottom: '10px',
66+
maxWidth: '700px',
67+
})
68+
69+
globalStyle(`${content} p:empty`, {
70+
display: 'none',
71+
})
72+
73+
globalStyle(`${content} p:last-child`, {
74+
marginBottom: '0',
75+
})
76+
77+
globalStyle(`${content} pre`, {
78+
marginBottom: '10px',
79+
})
80+
81+
globalStyle(`${content} pre:last-child`, {
82+
marginBottom: '0',
83+
})
84+
85+
globalStyle(`${content} table`, {
86+
backgroundColor: '#fffffe',
87+
borderRadius: '2px',
88+
marginBottom: '10px',
89+
})
90+
91+
globalStyle(`${content} table table`, {
92+
fontSize: '14px',
93+
})
94+
95+
globalStyle(`${content} table table td`, {
96+
border: '1px solid #d6cdd3',
97+
padding: '3px 6px',
98+
})
99+
100+
globalStyle(`${content} table table th`, {
101+
backgroundColor: '#fdfdfd',
102+
border: '1px solid #d6cdd3',
103+
padding: '3px 6px',
104+
})
105+
106+
globalStyle(`${content} table td`, {
107+
border: '1px solid #b9a2b2',
108+
padding: '5px 10px',
109+
})
110+
111+
globalStyle(`${content} table th`, {
112+
border: '1px solid #b9a2b2',
113+
padding: '5px 10px',
114+
fontWeight: '600',
115+
textAlign: 'left',
116+
backgroundColor: '#faf6f0',
117+
})
118+
119+
globalStyle(`${content} table:last-child`, {
120+
marginBottom: '0',
121+
})
122+
123+
globalStyle(`${content} ul`, {
124+
listStyle: 'disc',
125+
maxWidth: '700px',
126+
marginLeft: '25px',
127+
marginBottom: '10px',
128+
})
129+
130+
globalStyle(`${content} ul ol`, {
131+
marginBottom: '0',
132+
})
133+
134+
globalStyle(`${content} ul p + ul`, {
135+
marginTop: '-10px',
136+
})
137+
138+
globalStyle(`${content} ul pre:last-child`, {
139+
marginBottom: '10px',
140+
})
141+
142+
globalStyle(`${content} ul ul`, {
143+
marginBottom: '0',
144+
})
145+
146+
globalStyle(`${content} ul:last-child`, {
147+
marginBottom: '0',
148+
})

0 commit comments

Comments
 (0)