Skip to content

Commit 6f7c55d

Browse files
owjs3901owjs3901
committed
Support object params in css
Implement group selector Support Conditional typography
1 parent 73b556b commit 6f7c55d

File tree

56 files changed

+897
-322
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

56 files changed

+897
-322
lines changed

‎.changeset/popular-bags-itch.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@devup-ui/react": patch
3+
---
4+
5+
Add group selector

‎.changeset/strong-parents-change.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@devup-ui/wasm": patch
3+
---
4+
5+
Add group selector, Support conditional expression for typography

‎apps/landing/src/app/(detail)/docs/LeftMenu.tsx‎

Lines changed: 82 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -1,109 +1,90 @@
1-
import { Box, Flex, Image, Text, VStack } from '@devup-ui/react'
1+
import { VStack } from '@devup-ui/react'
2+
3+
import { URL_PREFIX } from '../../../constants'
4+
import { MenuItem } from './MenuItem'
25

36
export function LeftMenu() {
47
return (
58
<VStack gap="6px" h="1008px" p="20px 16px" w="220px">
6-
<Flex alignItems="center" borderRadius="6px" p="6px 10px">
7-
<Text flex="1" opacity="0.8" typography="buttonSmid">
8-
개요
9-
</Text>
10-
</Flex>
11-
<Flex
12-
alignItems="center"
13-
bg="$menuActive"
14-
borderRadius="6px"
15-
gap="10px"
16-
p="6px 10px"
9+
<MenuItem to={URL_PREFIX + '/docs/overview'}>Overview</MenuItem>
10+
<MenuItem to={URL_PREFIX + '/docs/installation'}>Installation</MenuItem>
11+
<MenuItem to={URL_PREFIX + '/docs/features'}>Features</MenuItem>
12+
<MenuItem
13+
subMenu={[
14+
{
15+
to: URL_PREFIX + '/docs/api/box',
16+
children: 'Box',
17+
},
18+
{
19+
to: URL_PREFIX + '/docs/api/button',
20+
children: 'Button',
21+
},
22+
{
23+
to: URL_PREFIX + '/docs/api/input',
24+
children: 'Input',
25+
},
26+
{
27+
to: URL_PREFIX + '/docs/api/input',
28+
children: 'Text',
29+
},
30+
{
31+
to: URL_PREFIX + '/docs/api/image',
32+
children: 'Image',
33+
},
34+
{
35+
to: URL_PREFIX + '/docs/api/flex',
36+
children: 'Flex',
37+
},
38+
{
39+
to: URL_PREFIX + '/docs/api/v-stack',
40+
children: 'VStack',
41+
},
42+
{
43+
to: URL_PREFIX + '/docs/api/center',
44+
children: 'Center',
45+
},
46+
{
47+
to: URL_PREFIX + '/docs/api/css',
48+
children: 'css',
49+
},
50+
{
51+
to: URL_PREFIX + '/docs/api/style-props',
52+
children: 'Style Props',
53+
},
54+
{
55+
to: URL_PREFIX + '/docs/api/selector',
56+
children: 'Selector',
57+
},
58+
{
59+
to: URL_PREFIX + '/docs/api/group-selector',
60+
children: 'Group Selector',
61+
},
62+
]}
63+
>
64+
API
65+
</MenuItem>
66+
<MenuItem
67+
subMenu={[
68+
{
69+
to: URL_PREFIX + '/docs/devup/devup-json',
70+
children: 'What is devup?',
71+
},
72+
{
73+
to: URL_PREFIX + '/docs/devup/colors',
74+
children: 'Colors',
75+
},
76+
{
77+
to: URL_PREFIX + '/docs/devup/typography',
78+
children: 'Typography',
79+
},
80+
{
81+
to: URL_PREFIX + '/docs/devup/breakpoints',
82+
children: 'Breakpoints',
83+
},
84+
]}
1785
>
18-
<Box bg="$primary" boxSize="8px" />
19-
<Text flex="1" typography="buttonS">
20-
설치
21-
</Text>
22-
</Flex>
23-
<Flex alignItems="center" borderRadius="6px" gap="10px" p="6px 10px">
24-
<Text flex="1" opacity="0.8" typography="buttonSmid">
25-
개념
26-
</Text>
27-
<Image boxSize="16px" src="/menu-arrow.svg" />
28-
</Flex>
29-
<Flex gap="8px">
30-
<Box borderColor="$border" w="10px" />
31-
<VStack flex="1" gap="6px">
32-
<Flex alignItems="center" borderRadius="6px" p="6px 10px">
33-
<Text flex="1" opacity="0.8" typography="buttonSmid">
34-
유틸리티 퍼스트
35-
</Text>
36-
</Flex>
37-
<Flex alignItems="center" borderRadius="6px" p="6px 10px">
38-
<Text flex="1" opacity="0.8" typography="buttonSmid">
39-
하이브리드 접근 방식
40-
</Text>
41-
</Flex>
42-
<Flex alignItems="center" borderRadius="6px" p="6px 10px">
43-
<Text flex="1" opacity="0.8" typography="buttonSmid">
44-
헤드리스 컴포넌트
45-
</Text>
46-
</Flex>
47-
</VStack>
48-
</Flex>
49-
<Flex alignItems="center" borderRadius="6px" gap="10px" p="6px 10px">
50-
<Text flex="1" opacity="0.8" typography="buttonSmid">
51-
구성 요소
52-
</Text>
53-
<Image boxSize="16px" src="/menu-arrow.svg" />
54-
</Flex>
55-
<Flex alignItems="center" borderRadius="6px" gap="10px" p="6px 10px">
56-
<Text flex="1" opacity="0.8" typography="buttonSmid">
57-
API
58-
</Text>
59-
<Image boxSize="16px" src="/menu-arrow.svg" />
60-
</Flex>
61-
<Flex gap="8px">
62-
<Box borderColor="$border" w="10px" />
63-
<VStack flex="1" gap="6px">
64-
<Flex alignItems="center" borderRadius="6px" p="6px 10px">
65-
<Text flex="1" opacity="0.8" typography="buttonSmid">
66-
스타일이 지정됨
67-
</Text>
68-
</Flex>
69-
<Flex alignItems="center" borderRadius="6px" p="6px 10px">
70-
<Text flex="1" opacity="0.8" typography="buttonSmid">
71-
CSS
72-
</Text>
73-
</Flex>
74-
</VStack>
75-
</Flex>
76-
<Flex alignItems="center" borderRadius="6px" gap="10px" p="6px 10px">
77-
<Text flex="1" opacity="0.8" typography="buttonSmid">
78-
테마
79-
</Text>
80-
<Image boxSize="16px" src="/menu-arrow.svg" />
81-
</Flex>
82-
<Flex gap="8px">
83-
<Box borderColor="$border" w="10px" />
84-
<VStack flex="1" gap="6px">
85-
<Flex alignItems="center" borderRadius="6px" p="6px 10px">
86-
<Text flex="1" opacity="0.8" typography="buttonSmid">
87-
테마 사용자 정의
88-
</Text>
89-
</Flex>
90-
<Flex alignItems="center" borderRadius="6px" p="6px 10px">
91-
<Text flex="1" opacity="0.8" typography="buttonSmid">
92-
테마 토큰
93-
</Text>
94-
</Flex>
95-
<Flex alignItems="center" borderRadius="6px" p="6px 10px">
96-
<Text flex="1" opacity="0.8" typography="buttonSmid">
97-
중단점
98-
</Text>
99-
</Flex>
100-
<Flex alignItems="center" borderRadius="6px" p="6px 10px">
101-
<Text flex="1" opacity="0.8" typography="buttonSmid">
102-
구성 요소 테마
103-
</Text>
104-
</Flex>
105-
</VStack>
106-
</Flex>
86+
Devup
87+
</MenuItem>
10788
</VStack>
10889
)
10990
}

‎apps/landing/src/app/(detail)/docs/MenuItem.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { Box, css, Flex, Image, Text } from '@devup-ui/react'
2+
import Link from 'next/link'
3+
4+
import { OpenMenuItem } from './OpenMenuItem'
5+
6+
export interface MenuItemProps {
7+
selected?: boolean
8+
children?: React.ReactNode
9+
to?: string
10+
subMenu?: {
11+
selected?: boolean
12+
children?: React.ReactNode
13+
to?: string
14+
}[]
15+
}
16+
17+
export function MenuItem(props: MenuItemProps) {
18+
const { selected, children, to, subMenu } = props
19+
if (subMenu) return <OpenMenuItem {...props} subMenu={subMenu} />
20+
const inner = (
21+
<Flex
22+
alignItems="center"
23+
bg={selected ? '$menuActive' : undefined}
24+
borderRadius="6px"
25+
gap="10px"
26+
p="6px 10px"
27+
>
28+
{selected && <Box bg="$primary" borderRadius="100%" boxSize="8px" />}
29+
<Text
30+
color={selected ? '$title' : '$text'}
31+
flex="1"
32+
opacity={selected ? '1' : '0.8'}
33+
typography={selected ? 'buttonS' : 'buttonSmid'}
34+
>
35+
{children}
36+
</Text>
37+
{subMenu && <Image boxSize="16px" src="/menu-arrow.svg" />}
38+
</Flex>
39+
)
40+
return to ? (
41+
<Link
42+
className={css({
43+
textDecoration: 'none',
44+
})}
45+
href={to}
46+
>
47+
{inner}
48+
</Link>
49+
) : (
50+
inner
51+
)
52+
}

‎apps/landing/src/app/(detail)/docs/OpenMenuItem.tsx‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
'use client'
2+
import { Box, css, Flex, Image, Text, VStack } from '@devup-ui/react'
3+
import Link from 'next/link'
4+
import { Fragment, useReducer } from 'react'
5+
6+
import { MenuItemProps } from './MenuItem'
7+
8+
export function OpenMenuItem({
9+
selected,
10+
children,
11+
subMenu,
12+
}: Omit<MenuItemProps, 'subMenu' | 'to'> &
13+
Required<Pick<MenuItemProps, 'subMenu'>>) {
14+
const [open, handleOpen] = useReducer((state) => !state, false)
15+
return (
16+
<>
17+
<Flex
18+
alignItems="center"
19+
bg={selected ? '$menuActive' : undefined}
20+
borderRadius="6px"
21+
cursor="pointer"
22+
gap="10px"
23+
onClick={handleOpen}
24+
p="6px 10px"
25+
>
26+
{selected && <Box bg="$primary" borderRadius="100%" boxSize="8px" />}
27+
<Text
28+
color={selected ? '$title' : '$text'}
29+
flex="1"
30+
opacity={selected ? '1' : '0.8'}
31+
typography={selected ? 'buttonS' : 'buttonSmid'}
32+
>
33+
{children}
34+
</Text>
35+
{subMenu && (
36+
<Image
37+
boxSize="16px"
38+
src="/menu-arrow.svg"
39+
transform={open ? 'rotate(0deg)' : 'rotate(-90deg)'}
40+
transition="transform 0.2s"
41+
/>
42+
)}
43+
</Flex>
44+
{open && (
45+
<Flex gap="8px">
46+
<Box borderRight="1px solid var(--border, #E0E0E0)" w="10px" />
47+
<VStack flex="1" gap="4px">
48+
{subMenu.map(({ children, to }, idx) => {
49+
const inner = (
50+
<Flex
51+
alignItems="center"
52+
bg="$menuActive"
53+
borderRadius="6px"
54+
gap="10px"
55+
p="10px"
56+
>
57+
<Box bg="$primary" borderRadius="100%" boxSize="8px" />
58+
<Text color="$text" flex="1" typography="buttonS">
59+
{children}
60+
</Text>
61+
</Flex>
62+
)
63+
64+
return to ? (
65+
<Link
66+
key={idx}
67+
className={css({
68+
textDecoration: 'none',
69+
})}
70+
href={to}
71+
>
72+
{inner}
73+
</Link>
74+
) : (
75+
<Fragment key={idx}>{inner}</Fragment>
76+
)
77+
})}
78+
</VStack>
79+
</Flex>
80+
)}
81+
</>
82+
)
83+
}

‎apps/landing/src/app/(detail)/docs/api/box/page.mdx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# Box

‎apps/landing/src/app/(detail)/docs/api/button/page.mdx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# Button

‎apps/landing/src/app/(detail)/docs/api/center/page.mdx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# Center

‎apps/landing/src/app/(detail)/docs/api/css/page.mdx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# css

‎apps/landing/src/app/(detail)/docs/api/flex/page.mdx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# Flex

0 commit comments

Comments
 (0)