Skip to content

Commit c00e1d8

Browse files
committed
Fix typing
2 parents 3c8e1e8 + afca11c commit c00e1d8

File tree

6 files changed

+151
-72
lines changed

6 files changed

+151
-72
lines changed
Lines changed: 56 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
'use client'
22

3-
import { Box, Center, Flex, Image, Text, VStack } from '@devup-ui/react'
3+
import { Box, Center, Flex, Grid, Image, Text, VStack } from '@devup-ui/react'
44
import { useState } from 'react'
55

66
import IconCode from '@/components/icons/IconCode'
@@ -28,7 +28,7 @@ export default function MdxCardFooter({
2828
}
2929

3030
return (
31-
<VStack justifyContent="flex-end" maxH="600px" maxW="100%">
31+
<VStack justifyContent="flex-end" maxW="100%">
3232
<Flex
3333
borderTop="1px solid $border"
3434
justifyContent="flex-end"
@@ -56,52 +56,60 @@ export default function MdxCardFooter({
5656
<Text>Show Code</Text>
5757
</Center>
5858
</Flex>
59-
{isOpen && (
60-
<>
61-
<Box h="0" pos="relative" w="100%">
62-
<Center
63-
_active={{
64-
borderColor: '$primary',
65-
bg: '$menuActive',
66-
}}
67-
_hover={{
68-
borderColor: '$primary',
69-
bg: '$menuHover',
70-
}}
71-
bg="$containerBackground"
72-
border="1px solid transparent"
73-
borderRadius="4px"
74-
boxShadow="0 2px 6px 0 $shadow"
75-
cursor="pointer"
76-
gap="8px"
77-
onClick={handleCopy}
78-
p="8px"
79-
pos="absolute"
80-
right="16px"
81-
top="16px"
82-
transition="all 0.125s ease-in-out"
83-
>
84-
<Image
85-
aspectRatio="1"
86-
boxSize="20px"
87-
src={copied ? '/icons/copied.svg' : '/icons/copy-code.svg'}
88-
/>
89-
<Text color="$captionBold" typography="caption">
90-
Copy
91-
</Text>
92-
</Center>
93-
</Box>
94-
<Box
95-
borderTop="1px solid $border"
96-
h="100%"
97-
overflow="auto"
98-
px="24px"
99-
py="16px"
100-
>
101-
{children}
102-
</Box>
103-
</>
104-
)}
59+
<Grid
60+
gridTemplateRows={isOpen ? '1fr' : '0fr'}
61+
maxH="600px"
62+
pos="relative"
63+
transition="grid-template-rows 0.3s ease-in-out"
64+
>
65+
{isOpen && (
66+
<>
67+
<Box pos="absolute" w="100%">
68+
<Center
69+
_active={{
70+
borderColor: '$primary',
71+
bg: '$menuActive',
72+
}}
73+
_hover={{
74+
borderColor: '$primary',
75+
bg: '$menuHover',
76+
}}
77+
bg="$containerBackground"
78+
border="1px solid transparent"
79+
borderRadius="4px"
80+
boxShadow="0 2px 6px 0 $shadow"
81+
cursor="pointer"
82+
gap="8px"
83+
onClick={handleCopy}
84+
p="8px"
85+
pos="absolute"
86+
right="16px"
87+
top="16px"
88+
transition="all 0.125s ease-in-out"
89+
>
90+
<Image
91+
aspectRatio="1"
92+
boxSize="20px"
93+
src={copied ? '/icons/copied.svg' : '/icons/copy-code.svg'}
94+
/>
95+
<Text color="$captionBold" typography="caption">
96+
Copy
97+
</Text>
98+
</Center>
99+
</Box>
100+
</>
101+
)}
102+
<Box
103+
borderTop={isOpen ? '1px solid $border' : 'none'}
104+
h="100%"
105+
onWheel={(e) => e.stopPropagation()}
106+
overflow="auto"
107+
p={isOpen ? ['12px', null, '24px'] : '0'}
108+
transition="padding 0.2s ease-in-out"
109+
>
110+
{children}
111+
</Box>
112+
</Grid>
105113
</VStack>
106114
)
107115
}

apps/landing/src/app/layout.tsx

Lines changed: 58 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,56 @@ globalCss({
3030
pre: {
3131
borderRadius: '10px',
3232
},
33+
fontFaces: [
34+
{
35+
fontFamily: 'Pretendard',
36+
src: 'url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-ExtraBold.woff2) format("woff2")',
37+
fontWeight: 800,
38+
fontStyle: 'normal',
39+
},
40+
{
41+
fontFamily: 'Pretendard',
42+
src: 'url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-Bold.woff2) format("woff2")',
43+
fontWeight: 700,
44+
fontStyle: 'normal',
45+
},
46+
{
47+
fontFamily: 'Pretendard',
48+
src: 'url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-SemiBold.woff2) format("woff2")',
49+
fontWeight: 600,
50+
fontStyle: 'normal',
51+
},
52+
{
53+
fontFamily: 'Pretendard',
54+
src: 'url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-Medium.woff2) format("woff2")',
55+
fontWeight: 500,
56+
fontStyle: 'normal',
57+
},
58+
{
59+
fontFamily: 'Pretendard',
60+
src: 'url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-Regular.woff2) format("woff2")',
61+
fontWeight: 400,
62+
fontStyle: 'normal',
63+
},
64+
{
65+
fontFamily: 'Pretendard',
66+
src: 'url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-Light.woff2) format("woff2")',
67+
fontWeight: 300,
68+
fontStyle: 'normal',
69+
},
70+
{
71+
fontFamily: 'Pretendard',
72+
src: 'url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/packages/pretendard/dist/web/static/woff2/Pretendard-Thin.woff2) format("woff2")',
73+
fontWeight: 100,
74+
fontStyle: 'normal',
75+
},
76+
{
77+
fontFamily: 'D2Coding',
78+
src: 'url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_three@1.0/D2Coding.woff) format("woff")',
79+
fontWeight: 400,
80+
fontDisplay: 'swap',
81+
},
82+
],
3383
code: {
3484
fontFamily: 'D2Coding',
3585
fontSize: ['13px', '15px'],
@@ -57,12 +107,12 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
57107
})(window,document,'script','dataLayer','GTM-PSRKC4QZ')`,
58108
}}
59109
/>
60-
<ThemeScript auto />
61-
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
62-
<link href="/favicon.ico" rel="shortcut icon" />
63110
<link
64-
href="https://cdn.jsdelivr.net/gh/joungkyun/font-d2coding/d2coding.css"
65-
rel="stylesheet"
111+
as="font"
112+
crossOrigin="anonymous"
113+
href="https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_three@1.0/D2Coding.woff"
114+
rel="preload"
115+
type="font/woff"
66116
/>
67117
{[
68118
'ExtraBold',
@@ -82,10 +132,9 @@ j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
82132
type="font/woff2"
83133
/>
84134
))}
85-
<link
86-
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"
87-
rel="stylesheet"
88-
/>
135+
<ThemeScript auto />
136+
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
137+
<link href="/favicon.ico" rel="shortcut icon" />
89138
</head>
90139
<body
91140
className={css({

apps/landing/src/components/Code.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,12 @@ export const Code = ({
1717
display: 'none',
1818
}}
1919
>
20-
<SyntaxHighlighter language={language} showLineNumbers style={Light}>
20+
<SyntaxHighlighter
21+
customStyle={{ margin: 0 }}
22+
language={language}
23+
showLineNumbers
24+
style={Light}
25+
>
2126
{value}
2227
</SyntaxHighlighter>
2328
</Box>

apps/landing/tsconfig.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
"moduleResolution": "bundler",
1212
"resolveJsonModule": true,
1313
"isolatedModules": true,
14-
"jsx": "react-jsx",
14+
"jsx": "preserve",
1515
"incremental": true,
1616
"plugins": [
1717
{

packages/react/src/utils/global-css.ts

Lines changed: 28 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@ import type { DevupCommonProps } from '../types/props'
22
import type {
33
AdvancedSelector,
44
CamelCase,
5+
DevupSelectorProps,
56
DevupThemeSelectorProps,
67
ExtractSelector,
78
SimpleSelector,
89
} from '../types/props/selector'
9-
import type { DevupSelectorProps } from '../types/props/selector'
1010

1111
type GlobalCssKeys<T extends string> =
1212
| `*${T}`
@@ -22,16 +22,21 @@ type GlobalCssProps = {
2222
}
2323
} & {
2424
[K in GlobalCssKeys<
25-
Exclude<AdvancedSelector, SimpleSelector>
25+
Extract<AdvancedSelector, SimpleSelector>
2626
>]?: DevupCommonProps &
2727
DevupSelectorProps &
2828
DevupThemeSelectorProps & {
2929
params?: string[]
3030
}
3131
} & {
32-
[K in GlobalCssKeys<SimpleSelector> | (string & {})]?: DevupCommonProps &
32+
[K in GlobalCssKeys<SimpleSelector>]?: DevupCommonProps &
3333
DevupSelectorProps &
3434
DevupThemeSelectorProps
35+
} & {
36+
[K in
37+
| keyof HTMLElementTagNameMap
38+
| keyof SVGElementTagNameMap
39+
| '*']?: DevupCommonProps & DevupSelectorProps & DevupThemeSelectorProps
3540
}
3641

3742
interface FontFaceProps {
@@ -52,24 +57,35 @@ interface FontFaceProps {
5257
}
5358

5459
type Import = { url: string; query?: string } | string
60+
interface AdditionalGlobalCssProps {
61+
imports?: Import[]
62+
fontFaces?: FontFaceProps[]
63+
}
64+
5565
export function globalCss(
56-
strings?:
57-
| TemplateStringsArray
58-
| (Omit<GlobalCssProps, 'imports'> & {
59-
imports?: Import[]
60-
fontFaces?: FontFaceProps[]
61-
}),
66+
strings: AdditionalGlobalCssProps & GlobalCssProps,
6267
): void
6368

69+
export function globalCss(
70+
strings: Record<
71+
string,
72+
DevupCommonProps & DevupSelectorProps & DevupThemeSelectorProps
73+
>,
74+
): void
75+
76+
export function globalCss(strings?: TemplateStringsArray): void
77+
6478
export function globalCss(): void
6579

6680
export function globalCss(
6781
// eslint-disable-next-line @typescript-eslint/no-unused-vars
6882
strings?:
6983
| TemplateStringsArray
70-
| (Omit<GlobalCssProps, 'imports'> & {
71-
imports?: Import[]
72-
}),
84+
| (GlobalCssProps & AdditionalGlobalCssProps)
85+
| Record<
86+
string,
87+
DevupCommonProps & DevupSelectorProps & DevupThemeSelectorProps
88+
>,
7389
): void {
7490
throw new Error('Cannot run on the runtime')
7591
}

packages/react/tsconfig.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44
"vite/client",
55
"vitest/importMeta",
66
"vitest/globals",
7-
"@testing-library/jest-dom"
7+
"@testing-library/jest-dom",
8+
"node"
89
],
910
"strict": true,
1011
"target": "ESNext",

0 commit comments

Comments
 (0)