Skip to content

Commit 5f81615

Browse files
hyu-devhyu-dev
committed
Rewrite landing docs api
1 parent 686e9ca commit 5f81615

File tree

12 files changed

+455
-77
lines changed

12 files changed

+455
-77
lines changed

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

Lines changed: 50 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,15 +15,61 @@ 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+
}
23+
```
24+
25+
The Box component defined above will render like this:
26+
27+
```tsx
28+
function App() {
29+
return <div className="aa ab ac a-d" />
30+
}
31+
```
32+
33+
```css
34+
.aa {
35+
background: red;
36+
}
37+
.ab {
38+
flex: 1;
39+
}
40+
.ac {
41+
height: 100px;
42+
}
43+
.a-d {
44+
width: 400px;
45+
}
2146
```
2247

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+
### Rendering as Another Element
52+
2353
You can use the `as` prop to change the element type.
2454

2555
```tsx
26-
const before = <Box as="span" />
56+
import { Box } from '@devup-ui/react'
57+
58+
function App() {
59+
return <Box as="span" bg="red" />
60+
}
61+
```
62+
63+
By using the as prop, you can render it as another element as shown below:
2764

28-
const after = <span className="d0" />
65+
```tsx
66+
function App() {
67+
return <span className="aa" />
68+
}
69+
```
70+
71+
```css
72+
.aa {
73+
background: red;
74+
}
2975
```

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

Lines changed: 35 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,40 @@ 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="aa ab ac" onClick="alert('clicked!!')">
33+
click me
34+
</button>
35+
)
36+
}
1937
```
38+
39+
```css
40+
.aa {
41+
background: red;
42+
}
43+
.ab {
44+
width: 100px;
45+
}
46+
.ac {
47+
height: 100px;
48+
}
49+
```
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.

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

Lines changed: 68 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -14,19 +14,72 @@ 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="ae af ag">
36+
<div className="aa ab ac"></div>
37+
<div className="aa ab ac a-d"></div>
38+
<div className="aa ab ac"></div>
39+
</div>
40+
)
41+
}
3242
```
43+
44+
```css
45+
.aa {
46+
background: blue;
47+
}
48+
.ab {
49+
height: 100px;
50+
}
51+
.ac {
52+
width: 100px;
53+
}
54+
.a-d {
55+
display: flex;
56+
}
57+
.ae {
58+
display: flex;
59+
}
60+
.af {
61+
justify-content: center;
62+
}
63+
.ag {
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+
<br />
72+
73+
Class names and style properties are resolved in the following order:
74+
75+
1. Generate class names for child components.
76+
- Compute class names and style properties coming from each child (including component defaults, utility classes, and props).
77+
78+
2. Remove duplicate component properties.
79+
- Deduplicate only when both the `key:value` pair and the `style-order` match.
80+
81+
3. If the key:value matches but the `style-order` differs, the property is not removed — the later/higher-priority style will take precedence.
82+
- 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.
83+
84+
4. Generate the parent component’s className based on the merged result.
85+
- 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="aa ab ac" />
41+
}
42+
```
43+
44+
```css
45+
.aa {
46+
background: red;
47+
}
48+
.ab {
49+
width: 100px;
50+
}
51+
.ac {
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="aa ab ac" />
81+
}
82+
```
83+
84+
```css
85+
.aa {
86+
background: red;
87+
}
88+
.ab {
89+
width: 100px;
90+
}
91+
.ac {
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="aa" />
30+
}
31+
```
32+
33+
```css
34+
.aa {
35+
display: flex;
36+
}
2137
```

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

Lines changed: 59 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -15,19 +15,63 @@ It has a `display: grid` style by default.
1515
## How to use
1616

1717
```tsx
18-
const before = (
19-
<Grid>
20-
<Box bg="blue" h={25} w={25} />
21-
<Box bg="blue" h={25} w={25} />
22-
<Box bg="blue" h={25} w={25} />
23-
</Grid>
24-
)
25-
26-
const after = (
27-
<div className="d3">
28-
<div className="d0 d1 d2"></div>
29-
<div className="d0 d1 d2"></div>
30-
<div className="d0 d1 d2"></div>
31-
</div>
32-
)
18+
import { Box, Grid } from '@devup-ui/react'
19+
20+
function App() {
21+
return (
22+
<Grid>
23+
<Box bg="blue" h={25} w={25} />
24+
<Box bg="blue" h={25} w={25} />
25+
<Box bg="blue" h={25} w={25} />
26+
</Grid>
27+
)
28+
}
29+
```
30+
31+
The Grid component defined above will render like this:
32+
33+
```tsx
34+
function App() {
35+
return (
36+
<div className="a-d">
37+
<div className="aa ab ac"></div>
38+
<div className="aa ab ac"></div>
39+
<div className="aa ab ac"></div>
40+
</div>
41+
)
42+
}
43+
```
44+
45+
```css
46+
.aa {
47+
background: blue;
48+
}
49+
.ab {
50+
height: 100px;
51+
}
52+
.ac {
53+
width: 100px;
54+
}
55+
.a-d {
56+
display: grid;
57+
}
3358
```
59+
60+
If you pass a number without a unit to a style property, it will be automatically scaled by 4.
61+
This means 1 equals 4px, 2 equals 8px, and so on.
62+
63+
<br />
64+
65+
Class names and style properties are resolved in the following order:
66+
67+
1. Generate class names for child components.
68+
- Compute class names and style properties coming from each child (including component defaults, utility classes, and props).
69+
70+
2. Remove duplicate component properties.
71+
- Deduplicate only when both the `key:value` pair and the `style-order` match.
72+
73+
3. If the key:value matches but the `style-order` differs, the property is not removed — the later/higher-priority style will take precedence.
74+
- 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.
75+
76+
4. Generate the parent component’s className based on the merged result.
77+
- After child classNames are generated and duplicates (per rules above) removed, compute/merge the parent className and final style output.

0 commit comments

Comments
 (0)