diff --git a/README.md b/README.md index 9de75122..fa2f0763 100644 --- a/README.md +++ b/README.md @@ -82,31 +82,28 @@ Devup UI is a CSS in JS preprocessor that does not require runtime. Devup UI eliminates the performance degradation of the browser through the CSS in JS preprocessor. We develop a preprocessor that considers all grammatical cases. -```jsx -// Before - -// After - +```typescript +const before = + +const after =
``` Variables are fully supported. -```jsx -// Before - -// After - + +const after =
``` Various expressions and responsiveness are also fully supported. -```jsx -// Before - b ? "yellow" : variable]}/> -// After - b ? "d2" : "d3"}`} style={{ +```typescript +const before = b ? "yellow" : variable]}/> + +const after =
b ? "d2" : "d3"}`} style={{ "--d2": variable }}/> ``` @@ -130,7 +127,7 @@ Support Theme with Typing } ``` -```jsx +```typescript // Type Safe ``` @@ -139,11 +136,10 @@ Support Responsive And Pseudo Selector You can use responsive and pseudo selector. -```jsx +```typescript // Responsive with Selector - +const box = // Same - - +const box = ``` diff --git a/README_ko.md b/README_ko.md index 6efa50d0..05123067 100644 --- a/README_ko.md +++ b/README_ko.md @@ -82,31 +82,28 @@ Devup UI는 런타임이 필요 없는 CSS in JS 전처리기입니다. Devup UI는 CSS in JS 전처리기를 통하여 브라우저의 성능 저하를 원천적으로 제거합니다. 모든 문법적 경우의 수를 고려하여 전처리기를 개발합니다. -```jsx -// Before - -// After - +```typescript +const before = + +const after =
``` 변수 사용도 완전히 지원합니다. -```jsx -// Before - -// After - + +const after =
``` 다양한 표현식과 반응형도 모두 지원합니다. -```jsx -// Before - b ? "yellow" : variable]}/> -// After - b ? "d2" : "d3"}`} style={{ +```typescript +const before = b ? "yellow" : variable]}/> + +const after =
b ? "d2" : "d3"}`} style={{ "--d2": variable }}/> ``` @@ -130,7 +127,7 @@ Devup UI는 CSS in JS 전처리기를 통하여 브라우저의 성능 저하를 } ``` -```jsx +```typescript // Type Safe ``` @@ -139,11 +136,10 @@ Devup UI는 CSS in JS 전처리기를 통하여 브라우저의 성능 저하를 물론 동시 사용도 가능합니다. -```jsx +```typescript // Responsive with Selector - +const box = // Same - - +const box = ``` diff --git a/apps/landing/devup.json b/apps/landing/devup.json index 9055ce58..3bba0fc7 100644 --- a/apps/landing/devup.json +++ b/apps/landing/devup.json @@ -31,7 +31,7 @@ "footerText": "#51575F", "menuHover": "#F6F4FF", "menuActive": "#EAE8FC", - "captionBold": "#878594", + "captionBold": "#7C7B8E", "search": "#9C50FF", "kakaoButton": "#DE9800", "kakaoButtonHover": "#C98900", @@ -67,7 +67,7 @@ "footerText": "#FFFFFF", "menuHover": "#3C404B", "menuActive": "#283259", - "captionBold": "#878594", + "captionBold": "#9C9BA9", "search": "#6FA4FF", "kakaoButton": "#A3740D", "kakaoButtonHover": "#C98900", @@ -526,6 +526,14 @@ "fontSize": "12px", "lineHeight": 1.4, "letterSpacing": "-0.03em" + }, + "bodyBold": { + "fontFamily": "Pretendard", + "fontStyle": "normal", + "fontWeight": 700, + "fontSize": "16px", + "lineHeight": 1.5, + "letterSpacing": "-0.03em" } } } diff --git a/apps/landing/next.config.ts b/apps/landing/next.config.ts index fa5bd714..fff27523 100644 --- a/apps/landing/next.config.ts +++ b/apps/landing/next.config.ts @@ -1,7 +1,13 @@ import { DevupUI } from '@devup-ui/next-plugin' import createMDX from '@next/mdx' +import remarkGfm from 'remark-gfm' -const withMDX = createMDX({}) +const withMDX = createMDX({ + options: { + remarkPlugins: [remarkGfm], + }, + extension: /\.mdx?$/, +}) export default withMDX( DevupUI( diff --git a/apps/landing/package.json b/apps/landing/package.json index 9e4a4579..44f10319 100644 --- a/apps/landing/package.json +++ b/apps/landing/package.json @@ -11,28 +11,31 @@ "lint": "eslint" }, "dependencies": { - "body-scroll-lock": "3.1.5", - "@devup-ui/react": "workspace:*", "@devup-ui/components": "workspace:*", + "@devup-ui/react": "workspace:*", "@mdx-js/loader": "^3.1.0", "@mdx-js/react": "^3.1.0", "@next/mdx": "^15.3.4", "@types/mdx": "^2.0.13", + "body-scroll-lock": "3.1.5", + "clsx": "^2.1.1", "next": "^15.3.4", "react": "^19.1.0", "react-dom": "^19.1.0", + "react-markdown": "8.0.6", "react-syntax-highlighter": "^15.6.1", + "remark-gfm": "^4.0.1", "sanitize.css": "^13.0.0" }, "devDependencies": { - "@types/body-scroll-lock": "^3.1.2", "@devup-ui/next-plugin": "workspace:*", + "@types/body-scroll-lock": "^3.1.2", "@types/node": "^24", "@types/react": "^19", "@types/react-dom": "^19", "@types/react-syntax-highlighter": "^15.5.13", - "typescript": "^5", "glob": "^11.0.3", - "remark": "^15.0.1" + "remark": "^15.0.1", + "typescript": "^5" } } \ No newline at end of file diff --git a/apps/landing/src/app/(detail)/components/Card.tsx b/apps/landing/src/app/(detail)/components/Card.tsx index f9e1b4f2..b9ad4397 100644 --- a/apps/landing/src/app/(detail)/components/Card.tsx +++ b/apps/landing/src/app/(detail)/components/Card.tsx @@ -1,6 +1,10 @@ import { VStack } from '@devup-ui/react' -export default function Card({ children }: { children: React.ReactNode }) { +export default function Card({ + children, + className, + ...props +}: React.ComponentProps<'div'>) { return ( {children} diff --git a/apps/landing/src/app/(detail)/components/LeftMenu.tsx b/apps/landing/src/app/(detail)/components/LeftMenu.tsx index 8e7613ee..80f58609 100644 --- a/apps/landing/src/app/(detail)/components/LeftMenu.tsx +++ b/apps/landing/src/app/(detail)/components/LeftMenu.tsx @@ -8,45 +8,43 @@ export function LeftMenu() { Overview Form Layout Theme diff --git a/apps/landing/src/app/(detail)/components/MdxCard.tsx b/apps/landing/src/app/(detail)/components/MdxCard.tsx new file mode 100644 index 00000000..88ac244f --- /dev/null +++ b/apps/landing/src/app/(detail)/components/MdxCard.tsx @@ -0,0 +1,72 @@ +import { readFile } from 'node:fs/promises' +import { join } from 'node:path' + +import { Box, css, VStack } from '@devup-ui/react' +import ReactMarkdown from 'react-markdown' + +import { Code } from '@/components/Code' +import { _components } from '@/mdx-components' + +import Card from './Card' +import MdxCardFooter from './MdxCardFooter' + +export default async function MdxCard({ + src, + demo, +}: { + src: string + demo: React.ReactNode +}) { + const content = await readFile( + join( + process.cwd(), + 'src/app/(detail)/components', + src ?? 'button/demo/Variants.tsx', + ), + { + encoding: 'utf-8', + }, + ) + // extract comment + const comment = content.match(/\/\*\*[\s\S]*?\*\//)?.[0] + const code = content.replace('\n' + comment!, '') + const normalizedComment = comment + ?.replace(/\/\*\*|\*\//g, '') + ?.replace(/^\s*\*\s*/gm, '') + + return ( + + + {demo} + + {normalizedComment ?? ''} + + + + + + + ) +} diff --git a/apps/landing/src/app/(detail)/components/MdxCardFooter.tsx b/apps/landing/src/app/(detail)/components/MdxCardFooter.tsx new file mode 100644 index 00000000..1d996336 --- /dev/null +++ b/apps/landing/src/app/(detail)/components/MdxCardFooter.tsx @@ -0,0 +1,50 @@ +'use client' + +import { Box, Center, Flex, Text, VStack } from '@devup-ui/react' +import { useState } from 'react' + +import IconCode from '@/components/icons/IconCode' + +export default function MdxCardFooter({ + children, +}: { + children: React.ReactNode +}) { + const [isOpen, setIsOpen] = useState(false) + return ( + + +
setIsOpen(!isOpen)} + p="8px" + transition="all 0.2s ease-in-out" + w="fit-content" + > + + Show Code +
+ + {isOpen && ( + + {children} + + )} + + ) +} diff --git a/apps/landing/src/app/(detail)/components/button/Api.mdx b/apps/landing/src/app/(detail)/components/button/Api.mdx new file mode 100644 index 00000000..3789d5af --- /dev/null +++ b/apps/landing/src/app/(detail)/components/button/Api.mdx @@ -0,0 +1,13 @@ +###### API +`Button` props extends the button HTML attributes. + +
+| Property | Description | Type | Default | +| --- | --- | --- | --- | +| **variant** | The variant of the button | `'primary' \| 'default'` | `'default'` | +| **colors** | The color variables of the button, i.e. `var(--primary)` | ```{
primary?: string
error?: string
text?: string
border?: string
inputBackground?: string
primaryFocus?: string
}``` | `undefined` | +| **danger** | Signals that it should be used with caution. It is often used in a delete button or to show the error status. | `boolean` | `false` | +| **size** | The size of the button | `'sm' \| 'md' \| 'lg'` | `'md'` | +| **icon** | Icon of the button passed in as a form of ReactNode | `React.ReactNode` | `undefined` | +| **ellipsis** | Whether the button text should be truncated with an ellipsis. The button should have a width to be able to truncate the text. | `boolean` | `false` | +
diff --git a/apps/landing/src/app/(detail)/components/button/Button.mdx b/apps/landing/src/app/(detail)/components/button/Button.mdx new file mode 100644 index 00000000..a466fe85 --- /dev/null +++ b/apps/landing/src/app/(detail)/components/button/Button.mdx @@ -0,0 +1,5 @@ +**Button** + +#### Button + +`Button` component is used to handle user interactions. diff --git a/apps/landing/src/app/(detail)/components/button/IconDelete.tsx b/apps/landing/src/app/(detail)/components/button/IconDelete.tsx new file mode 100644 index 00000000..aef92c6e --- /dev/null +++ b/apps/landing/src/app/(detail)/components/button/IconDelete.tsx @@ -0,0 +1,18 @@ +import { css } from '@devup-ui/react' + +export default function IconDelete() { + return ( + + + + ) +} diff --git a/apps/landing/src/app/(detail)/components/button/demo/Colors.tsx b/apps/landing/src/app/(detail)/components/button/demo/Colors.tsx new file mode 100644 index 00000000..54de42f6 --- /dev/null +++ b/apps/landing/src/app/(detail)/components/button/demo/Colors.tsx @@ -0,0 +1,103 @@ +import { Button } from '@devup-ui/components' +import { Box, css, Flex } from '@devup-ui/react' + +/** + * **Colors** + * Pass in an object containing color tokens into `colors` prop. You can change color of border, background, danger color and more using `primary`, `error`, `text`, and so on. + */ +export function Colors() { + return ( + + + + + + + + + + + + + + + + + + ) +} diff --git a/apps/landing/src/app/(detail)/components/button/demo/Danger.tsx b/apps/landing/src/app/(detail)/components/button/demo/Danger.tsx new file mode 100644 index 00000000..d3dd1cb3 --- /dev/null +++ b/apps/landing/src/app/(detail)/components/button/demo/Danger.tsx @@ -0,0 +1,24 @@ +import { Button } from '@devup-ui/components' +import { Box, css } from '@devup-ui/react' + +/** + * **Danger** + * Use `danger` prop to signal caution. + */ +export function Danger() { + return ( + + + + + + + + ) +} diff --git a/apps/landing/src/app/(detail)/components/button/demo/Disabled.tsx b/apps/landing/src/app/(detail)/components/button/demo/Disabled.tsx new file mode 100644 index 00000000..466cbc20 --- /dev/null +++ b/apps/landing/src/app/(detail)/components/button/demo/Disabled.tsx @@ -0,0 +1,25 @@ +import { Button } from '@devup-ui/components' +import { Box, css, Flex } from '@devup-ui/react' + +/** + * **Disabled** + * Use `disabled` prop to show disabled UI of the button. + */ +export function Disabled() { + return ( + + + + + + + ) +} diff --git a/apps/landing/src/app/(detail)/components/button/demo/Icon.tsx b/apps/landing/src/app/(detail)/components/button/demo/Icon.tsx new file mode 100644 index 00000000..d7ff7dd6 --- /dev/null +++ b/apps/landing/src/app/(detail)/components/button/demo/Icon.tsx @@ -0,0 +1,66 @@ +import { Button } from '@devup-ui/components' +import { Box, css, Flex } from '@devup-ui/react' + +import IconDelete from '../IconDelete' + +/** + * **Icon** + * Pass in an svg icon component into `icon` prop. If props like `stroke` and `fill` have `"currentColor"` value, the svg icon will follow the text color of the button. + */ +export function Icon() { + return ( + + + + + + + + + ) +} diff --git a/apps/landing/src/app/(detail)/components/button/demo/Variants.tsx b/apps/landing/src/app/(detail)/components/button/demo/Variants.tsx new file mode 100644 index 00000000..0a75ac21 --- /dev/null +++ b/apps/landing/src/app/(detail)/components/button/demo/Variants.tsx @@ -0,0 +1,47 @@ +import { Button } from '@devup-ui/components' +import { css, Flex } from '@devup-ui/react' + +/** + * **Variant & Size** + * `Button` components has `default` and `primary` variants. `Size` prop determines the paddings of the button. + */ +export function Variants() { + return ( + <> + + + + + + + + + + + + ) +} diff --git a/apps/landing/src/app/(detail)/components/button/page.mdx b/apps/landing/src/app/(detail)/components/button/page.mdx deleted file mode 100644 index bd8963c0..00000000 --- a/apps/landing/src/app/(detail)/components/button/page.mdx +++ /dev/null @@ -1,6 +0,0 @@ -import { Button } from '@devup-ui/components' - -# Button - - - diff --git a/apps/landing/src/app/(detail)/components/button/page.tsx b/apps/landing/src/app/(detail)/components/button/page.tsx new file mode 100644 index 00000000..b22ac3b5 --- /dev/null +++ b/apps/landing/src/app/(detail)/components/button/page.tsx @@ -0,0 +1,60 @@ +import { Box, Flex, Text, VStack } from '@devup-ui/react' + +import { CustomCode } from '@/components/mdx/components/CustomCode' +import { CustomH4 } from '@/components/mdx/components/CustomH4' +import { CustomH6 } from '@/components/mdx/components/CustomH6' +import { CustomParagraph } from '@/components/mdx/components/CustomParagraph' +import { CustomPre } from '@/components/mdx/components/CustomPre' +import { CustomStrong } from '@/components/mdx/components/CustomStrong' + +import MdxCard from '../MdxCard' +import Api from './Api.mdx' +import Button from './Button.mdx' +import { Colors } from './demo/Colors' +import { Danger } from './demo/Danger' +import { Disabled } from './demo/Disabled' +import { Icon } from './demo/Icon' +import { Variants } from './demo/Variants' + +export default function Page() { + return ( + +