Issue #394 Rewrite landing docs api

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

@@ -15,15 +15,79 @@ It is just a `div` with some styles.
 ## How to use
 
 ```tsx
-const before = <Box bg="red" />
+import { Box } from '@devup-ui/react'
 
-const after = <div className="d0" />
+function App() {
+  return <Box bg="red" flex={1} height="100px" width={100} />
+}
 ```
 
+The Box component defined above will render like this:
+
+```tsx
+function App() {
+  return <div className="a b c d" />
+}
+```
+
+```css
+.a {
+  background: red;
+}
+.b {
+  flex: 1;
+}
+.c {
+  height: 100px;
+}
+.d {
+  width: 400px;
+}
+```
+
+If you pass a number without a unit to a style property, it will be automatically scaled by 4.
+This means 1 equals 4px, 2 equals 8px, and so on.
+
+However, the following properties are exceptions and **are not multiplied by 4**:
+
+- `opacity`
+- `flex`
+- `z-index`
+- `line-clamp`
+- `font-weight`
+- `line-height`
+- `scale`
+- `aspect-ratio`
+- `flex-grow`
+- `flex-shrink`
+- `order`
+- `grid-column`, `grid-column-start`, `grid-column-end`
+- `grid-row`, `grid-row-start`, `grid-row-end`
+- `animation-iteration-count`
+- `tab-size`, `moz-tab-size`, `-webkit-line-clamp`
+
+### Rendering as Another Element
+
 You can use the `as` prop to change the element type.
 
 ```tsx
-const before = <Box as="span" />
+import { Box } from '@devup-ui/react'
+
+function App() {
+  return <Box as="span" bg="red" />
+}
+```
+
+By using the as prop, you can render it as another element as shown below:
+
+```tsx
+function App() {
+  return <span className="a" />
+}
+```
 
-const after = <span className="d0" />
+```css
+.a {
+  background: red;
+}
 ```

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

@@ -13,7 +13,58 @@ The `Button` component is a simple button component that can be used to trigger
 ## How to use
 
 ```tsx
-const before = <Button bg="red" />
+import { Button } from '@devup-ui/react'
 
-const after = <button className="d0" />
+function App() {
+  return (
+    <Button bg="red" h={25} onClick={() => alert('clicked!!')} w={25}>
+      click me
+    </Button>
+  )
+}
+```
+
+The Button component defined above will render like this:
+
+```tsx
+function App() {
+  return (
+    <button className="a b c" onClick="alert('clicked!!')">
+      click me
+    </button>
+  )
+}
+```
+
+```css
+.a {
+  background: red;
+}
+.b {
+  width: 100px;
+}
+.c {
+  height: 100px;
+}
 ```
+
+If you pass a number without a unit to a style property, it will be automatically scaled by 4.
+This means 1 equals 4px, 2 equals 8px, and so on.
+
+However, the following properties are exceptions and **are not multiplied by 4**:
+
+- `opacity`
+- `flex`
+- `z-index`
+- `line-clamp`
+- `font-weight`
+- `line-height`
+- `scale`
+- `aspect-ratio`
+- `flex-grow`
+- `flex-shrink`
+- `order`
+- `grid-column`, `grid-column-start`, `grid-column-end`
+- `grid-row`, `grid-row-start`, `grid-row-end`
+- `animation-iteration-count`
+- `tab-size`, `moz-tab-size`, `-webkit-line-clamp`

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

@@ -14,19 +14,90 @@ It has a `display: flex` style with `justify-content: center` and `align-items:
 ## How to use
 
 ```tsx
-const before = (
-  <Center>
-    <Box bg="blue" h={25} w={25} />
-    <Box bg="blue" h={25} w={25} />
-    <Box bg="blue" h={25} w={25} />
-  </Center>
-)
-
-const after = (
-  <div className="d3 d4 d5">
-    <div className="d0 d1 d2"></div>
-    <div className="d0 d1 d2"></div>
-    <div className="d0 d1 d2"></div>
-  </div>
-)
+import { Box, Center } from '@devup-ui/react'
+
+function App() {
+  return (
+    <Center>
+      <Box bg="blue" h={25} w={25} />
+      <Box bg="blue" display="flex" h={25} w={25} />
+      <Box bg="blue" h={25} w={25} />
+    </Center>
+  )
+}
+```
+
+The Center component defined above will render like this:
+
+```tsx
+function App() {
+  return (
+    <div className="e f g">
+      <div className="a b c"></div>
+      <div className="a b c d"></div>
+      <div className="a b c"></div>
+    </div>
+  )
+}
 ```
+
+```css
+.a {
+  background: blue;
+}
+.b {
+  height: 100px;
+}
+.c {
+  width: 100px;
+}
+.d {
+  display: flex;
+}
+.e {
+  display: flex;
+}
+.f {
+  justify-content: center;
+}
+.g {
+  align-items: center;
+}
+```
+
+If you pass a number without a unit to a style property, it will be automatically scaled by 4.
+This means 1 equals 4px, 2 equals 8px, and so on.
+
+However, the following properties are exceptions and **are not multiplied by 4**:
+
+- `opacity`
+- `flex`
+- `z-index`
+- `line-clamp`
+- `font-weight`
+- `line-height`
+- `scale`
+- `aspect-ratio`
+- `flex-grow`
+- `flex-shrink`
+- `order`
+- `grid-column`, `grid-column-start`, `grid-column-end`
+- `grid-row`, `grid-row-start`, `grid-row-end`
+- `animation-iteration-count`
+- `tab-size`, `moz-tab-size`, `-webkit-line-clamp`
+
+<br />
+
+Class names and style properties are resolved in the following order:
+
+1. Generate class names for child components.
+   - Compute class names and style properties coming from each child (including component defaults, utility classes, and props).
+
+2. Remove duplicate component properties.
+   - Deduplicate only when both the `key:value` pair and the `style-order` match.
+
+3. If the key:value matches but the `style-order` differs, the property is not removed — the later/higher-priority style will take precedence.
+   - 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.
+
+4. Generate the parent component’s className based on the merged result.
+   - 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

@@ -18,29 +18,77 @@ You can use `css` as a tag function to create a css string. Pass in a string of
 into a class list.
 
 ```tsx
-const before = (
-  <div
-    className={css`
-      color: red;
-    `}
-  />
-)
-
-const after = <any className="d0" />
+import { css } from '@devup-ui/react'
+
+function App() {
+  return (
+    <div
+      className={css`
+        background: red;
+        width: 100px;
+        height: 100px;
+      `}
+    />
+  )
+}
+```
+
+The content above is rendered/transformed as shown below:
+
+```tsx
+function App() {
+  return <div className="a b c" />
+}
+```
+
+```css
+.a {
+  background: red;
+}
+.b {
+  width: 100px;
+}
+.c {
+  height: 100px;
+}
 ```
 
 ### CSS Object
 
 You can also use the css function by passing in a css object as an argument.
 
 ```tsx
-const before = (
-  <any
-    className={css({
-      color: 'red',
-    })}
-  />
-)
-
-const after = <any className="d0" />
+import { css } from '@devup-ui/react'
+
+function App() {
+  return (
+    <div
+      className={css({
+        background: 'red',
+        width: '100px',
+        height: '100px',
+      })}
+    />
+  )
+}
+```
+
+The content above is rendered/transformed as shown below:
+
+```tsx
+function App() {
+  return <div className="a b c" />
+}
+```
+
+```css
+.a {
+  background: red;
+}
+.b {
+  width: 100px;
+}
+.c {
+  height: 100px;
+}
 ```

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

@@ -15,7 +15,23 @@ It has a `display: flex` style by default.
 ## How to use
 
 ```tsx
-const before = <Flex />
+import { Flex } from '@devup-ui/react'
 
-const after = <div className="d0" />
+function App() {
+  return <Flex />
+}
+```
+
+The Flex component defined above will render like this:
+
+```tsx
+function App() {
+  return <div className="a" />
+}
+```
+
+```css
+.a {
+  display: flex;
+}
 ```