Skip to content

Commit 9f071db

Browse files
owjs3901owjs3901
authored
Merge pull request #408 from hyu-dev/main
Issue #394 Rewrite landing docs api
2 parents 12afe3a + 37c4dc4 commit 9f071db

File tree

12 files changed

+545
-77
lines changed

12 files changed

+545
-77
lines changed

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

Lines changed: 68 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,79 @@ It is just a `div` with some styles.
1515
## How to use
1616

1717
```tsx
18-
const before = <Box bg="red" />
18+
import { Box } from '@devup-ui/react'
1919

20-
const after = <div className="d0" />
20+
function App() {
21+
return <Box bg="red" flex={1} height="100px" width={100} />
22+
}
2123
```
2224

25+
The Box component defined above will render like this:
26+
27+
```tsx
28+
function App() {
29+
return <div className="a b c d" />
30+
}
31+
```
32+
33+
```css
34+
.a {
35+
background: red;
36+
}
37+
.b {
38+
flex: 1;
39+
}
40+
.c {
41+
height: 100px;
42+
}
43+
.d {
44+
width: 400px;
45+
}
46+
```
47+
48+
If you pass a number without a unit to a style property, it will be automatically scaled by 4.
49+
This means 1 equals 4px, 2 equals 8px, and so on.
50+
51+
However, the following properties are exceptions and **are not multiplied by 4**:
52+
53+
- `opacity`
54+
- `flex`
55+
- `z-index`
56+
- `line-clamp`
57+
- `font-weight`
58+
- `line-height`
59+
- `scale`
60+
- `aspect-ratio`
61+
- `flex-grow`
62+
- `flex-shrink`
63+
- `order`
64+
- `grid-column`, `grid-column-start`, `grid-column-end`
65+
- `grid-row`, `grid-row-start`, `grid-row-end`
66+
- `animation-iteration-count`
67+
- `tab-size`, `moz-tab-size`, `-webkit-line-clamp`
68+
69+
### Rendering as Another Element
70+
2371
You can use the `as` prop to change the element type.
2472

2573
```tsx
26-
const before = <Box as="span" />
74+
import { Box } from '@devup-ui/react'
75+
76+
function App() {
77+
return <Box as="span" bg="red" />
78+
}
79+
```
80+
81+
By using the as prop, you can render it as another element as shown below:
82+
83+
```tsx
84+
function App() {
85+
return <span className="a" />
86+
}
87+
```
2788

28-
const after = <span className="d0" />
89+
```css
90+
.a {
91+
background: red;
92+
}
2993
```

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

Lines changed: 53 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,58 @@ The `Button` component is a simple button component that can be used to trigger
1313
## How to use
1414

1515
```tsx
16-
const before = <Button bg="red" />
16+
import { Button } from '@devup-ui/react'
1717

18-
const after = <button className="d0" />
18+
function App() {
19+
return (
20+
<Button bg="red" h={25} onClick={() => alert('clicked!!')} w={25}>
21+
click me
22+
</Button>
23+
)
24+
}
25+
```
26+
27+
The Button component defined above will render like this:
28+
29+
```tsx
30+
function App() {
31+
return (
32+
<button className="a b c" onClick="alert('clicked!!')">
33+
click me
34+
</button>
35+
)
36+
}
37+
```
38+
39+
```css
40+
.a {
41+
background: red;
42+
}
43+
.b {
44+
width: 100px;
45+
}
46+
.c {
47+
height: 100px;
48+
}
1949
```
50+
51+
If you pass a number without a unit to a style property, it will be automatically scaled by 4.
52+
This means 1 equals 4px, 2 equals 8px, and so on.
53+
54+
However, the following properties are exceptions and **are not multiplied by 4**:
55+
56+
- `opacity`
57+
- `flex`
58+
- `z-index`
59+
- `line-clamp`
60+
- `font-weight`
61+
- `line-height`
62+
- `scale`
63+
- `aspect-ratio`
64+
- `flex-grow`
65+
- `flex-shrink`
66+
- `order`
67+
- `grid-column`, `grid-column-start`, `grid-column-end`
68+
- `grid-row`, `grid-row-start`, `grid-row-end`
69+
- `animation-iteration-count`
70+
- `tab-size`, `moz-tab-size`, `-webkit-line-clamp`

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

Lines changed: 86 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -14,19 +14,90 @@ It has a `display: flex` style with `justify-content: center` and `align-items:
1414
## How to use
1515

1616
```tsx
17-
const before = (
18-
<Center>
19-
<Box bg="blue" h={25} w={25} />
20-
<Box bg="blue" h={25} w={25} />
21-
<Box bg="blue" h={25} w={25} />
22-
</Center>
23-
)
24-
25-
const after = (
26-
<div className="d3 d4 d5">
27-
<div className="d0 d1 d2"></div>
28-
<div className="d0 d1 d2"></div>
29-
<div className="d0 d1 d2"></div>
30-
</div>
31-
)
17+
import { Box, Center } from '@devup-ui/react'
18+
19+
function App() {
20+
return (
21+
<Center>
22+
<Box bg="blue" h={25} w={25} />
23+
<Box bg="blue" display="flex" h={25} w={25} />
24+
<Box bg="blue" h={25} w={25} />
25+
</Center>
26+
)
27+
}
28+
```
29+
30+
The Center component defined above will render like this:
31+
32+
```tsx
33+
function App() {
34+
return (
35+
<div className="e f g">
36+
<div className="a b c"></div>
37+
<div className="a b c d"></div>
38+
<div className="a b c"></div>
39+
</div>
40+
)
41+
}
3242
```
43+
44+
```css
45+
.a {
46+
background: blue;
47+
}
48+
.b {
49+
height: 100px;
50+
}
51+
.c {
52+
width: 100px;
53+
}
54+
.d {
55+
display: flex;
56+
}
57+
.e {
58+
display: flex;
59+
}
60+
.f {
61+
justify-content: center;
62+
}
63+
.g {
64+
align-items: center;
65+
}
66+
```
67+
68+
If you pass a number without a unit to a style property, it will be automatically scaled by 4.
69+
This means 1 equals 4px, 2 equals 8px, and so on.
70+
71+
However, the following properties are exceptions and **are not multiplied by 4**:
72+
73+
- `opacity`
74+
- `flex`
75+
- `z-index`
76+
- `line-clamp`
77+
- `font-weight`
78+
- `line-height`
79+
- `scale`
80+
- `aspect-ratio`
81+
- `flex-grow`
82+
- `flex-shrink`
83+
- `order`
84+
- `grid-column`, `grid-column-start`, `grid-column-end`
85+
- `grid-row`, `grid-row-start`, `grid-row-end`
86+
- `animation-iteration-count`
87+
- `tab-size`, `moz-tab-size`, `-webkit-line-clamp`
88+
89+
<br />
90+
91+
Class names and style properties are resolved in the following order:
92+
93+
1. Generate class names for child components.
94+
- Compute class names and style properties coming from each child (including component defaults, utility classes, and props).
95+
96+
2. Remove duplicate component properties.
97+
- Deduplicate only when both the `key:value` pair and the `style-order` match.
98+
99+
3. If the key:value matches but the `style-order` differs, the property is not removed — the later/higher-priority style will take precedence.
100+
- Example: In other words, the `display: flex` implemented internally by `Center` and the `display: flex` provided directly by the user have different style-orders, so they are not removed, and the final style is applied according to priority.
101+
102+
4. Generate the parent component’s className based on the merged result.
103+
- After child classNames are generated and duplicates (per rules above) removed, compute/merge the parent className and final style output.

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

Lines changed: 66 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -18,29 +18,77 @@ You can use `css` as a tag function to create a css string. Pass in a string of
1818
into a class list.
1919

2020
```tsx
21-
const before = (
22-
<div
23-
className={css`
24-
color: red;
25-
`}
26-
/>
27-
)
28-
29-
const after = <any className="d0" />
21+
import { css } from '@devup-ui/react'
22+
23+
function App() {
24+
return (
25+
<div
26+
className={css`
27+
background: red;
28+
width: 100px;
29+
height: 100px;
30+
`}
31+
/>
32+
)
33+
}
34+
```
35+
36+
The content above is rendered/transformed as shown below:
37+
38+
```tsx
39+
function App() {
40+
return <div className="a b c" />
41+
}
42+
```
43+
44+
```css
45+
.a {
46+
background: red;
47+
}
48+
.b {
49+
width: 100px;
50+
}
51+
.c {
52+
height: 100px;
53+
}
3054
```
3155

3256
### CSS Object
3357

3458
You can also use the css function by passing in a css object as an argument.
3559

3660
```tsx
37-
const before = (
38-
<any
39-
className={css({
40-
color: 'red',
41-
})}
42-
/>
43-
)
44-
45-
const after = <any className="d0" />
61+
import { css } from '@devup-ui/react'
62+
63+
function App() {
64+
return (
65+
<div
66+
className={css({
67+
background: 'red',
68+
width: '100px',
69+
height: '100px',
70+
})}
71+
/>
72+
)
73+
}
74+
```
75+
76+
The content above is rendered/transformed as shown below:
77+
78+
```tsx
79+
function App() {
80+
return <div className="a b c" />
81+
}
82+
```
83+
84+
```css
85+
.a {
86+
background: red;
87+
}
88+
.b {
89+
width: 100px;
90+
}
91+
.c {
92+
height: 100px;
93+
}
4694
```

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

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,23 @@ It has a `display: flex` style by default.
1515
## How to use
1616

1717
```tsx
18-
const before = <Flex />
18+
import { Flex } from '@devup-ui/react'
1919

20-
const after = <div className="d0" />
20+
function App() {
21+
return <Flex />
22+
}
23+
```
24+
25+
The Flex component defined above will render like this:
26+
27+
```tsx
28+
function App() {
29+
return <div className="a" />
30+
}
31+
```
32+
33+
```css
34+
.a {
35+
display: flex;
36+
}
2137
```

0 commit comments

Comments
 (0)