From 1ab9d839ecf65b62d8aa2fefb9c48752b57f25e7 Mon Sep 17 00:00:00 2001 From: Moon Dahyun Date: Sun, 28 Sep 2025 17:07:43 +0900 Subject: [PATCH 1/9] ui components docs --- ui-components.md | 61 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 ui-components.md diff --git a/ui-components.md b/ui-components.md new file mode 100644 index 00000000..810f1360 --- /dev/null +++ b/ui-components.md @@ -0,0 +1,61 @@ +# Devup UI Components + +If you want to use Devup UI Components, you need to install it. + +``` +npm install @devup-ui/components +// or +yarn add @devup-ui/components +// or +pnpm add @devup-ui/components +``` + +You need to configure the include option for each bundler environment to properly load the `@devup-ui/components` package. + +## using Vite + +``` +//vite.config.js +import { defineConfig } from "vite"; +import react from "@vitejs/plugin-react"; +import { DevupUI } from "@devup-ui/vite-plugin"; + +export default defineConfig({ + plugins: [ + DevupUI({ + include: ["@devup-ui/components"], + }), + react(), + ], +}); +``` + +## using Next.js + +``` +// next.config.js +import { DevupUI } from '@devup-ui/next-plugin' + +export default DevupUI({ include: ["@devup-ui/components"]}) +``` + +## using Rsbuild + +``` +// rsbuild.config.mjs +import { defineConfig } from '@rsbuild/core'; +import { pluginReact } from '@rsbuild/plugin-react'; +import { DevupUIRsbuildPlugin } from '@devup-ui/rsbuild-plugin'; + +export default defineConfig({ +plugins: [pluginReact(), DevupUIRsbuildPlugin({ + include: ["@devup-ui/components"], + })], +}); +``` + +Note: If you encounter "Cannot run on the runtime" error, make sure the include option is properly configured for your bundler. + +## Examples + +// Form,Layout,theme etc. From fe2bdca9d9c203219c4c53c140501597c99fc633 Mon Sep 17 00:00:00 2001 From: Moon Dahyun Date: Sun, 28 Sep 2025 17:11:49 +0900 Subject: [PATCH 2/9] rewrite responsive docs --- responsive.md | 100 +++++++++++++++++++++++++++++++++++++++++++++++ ui-components.md | 61 ----------------------------- 2 files changed, 100 insertions(+), 61 deletions(-) create mode 100644 responsive.md delete mode 100644 ui-components.md diff --git a/responsive.md b/responsive.md new file mode 100644 index 00000000..85865346 --- /dev/null +++ b/responsive.md @@ -0,0 +1,100 @@ +# Responsive + +Devup UI supports responsive design. + +# Breakpoints + +Devup UI provides flexible responsive design capabilities through breakpoints. You can use either the default breakpoint system or customize your own breakpoints to match your design requirements. + +## Default Breakpoints + +By default, Devup UI uses a 5-breakpoint system with the following viewport ranges: + +| Index | Viewport Range | Description | +| ----- | -------------- | --------------- | +| 1st | ~ 479px | Mobile (small) | +| 2nd | 480px ~ 767px | Mobile (large) | +| 3rd | 768px ~ 991px | Tablet | +| 4th | 992px ~ 1279px | Desktop (small) | +| 5th | 1280px ~ | Desktop (large) | + +## Using Responsive Arrays + +You can add responsive design by using an array of maximum 5 elements for any style property: + +```jsx +const box = ( + + Hello + +); +``` + +### Null Values + +If any of the five elements are set to `null`, Devup UI uses the previous value for responsive design: + +```jsx +// Background will be: +// - red from 0px to 767px (1st and 2nd breakpoints) +// - green from 768px to 1279px (3rd and 4th breakpoints) +// - purple from 1280px and above (5th breakpoint) + +``` + +### Partial Arrays + +If the length of the array is less than 5, Devup UI makes responsive design according to the index of the element: + +```jsx +// Only specify mobile and desktop values + // red for mobile, blue for larger screens + +// Specify mobile, tablet, and desktop + +``` + +## Custom Breakpoints + +You can customize breakpoints by adding a `breakpoints` configuration to your `devup.json` file: + +### Configuration + +```json +{ + "theme": { + "breakpoints": [0, 460, 768, 1024] + } +} +``` + +### How Custom Breakpoints Work + +When you define custom breakpoints, the array values correspond to minimum viewport widths: + +- **1st element**: From 0px to the first breakpoint value +- **2nd element**: From first breakpoint to second breakpoint +- **3rd element**: From second breakpoint to third breakpoint +- **And so on...** + +### Example with Custom Breakpoints + +```json +// create devup.json +{ + "theme": { + "breakpoints": [0, 460, 1024] + } +} +``` + +```jsx +// With the custom breakpoints above: + +``` + +This would create the following responsive behavior: + +- `red` background from 0px to 459px +- `blue` background from 460px to 1023px +- `green` background from 1024px and above diff --git a/ui-components.md b/ui-components.md deleted file mode 100644 index 810f1360..00000000 --- a/ui-components.md +++ /dev/null @@ -1,61 +0,0 @@ -# Devup UI Components - -If you want to use Devup UI Components, you need to install it. - -``` -npm install @devup-ui/components -// or -yarn add @devup-ui/components -// or -pnpm add @devup-ui/components -``` - -You need to configure the include option for each bundler environment to properly load the `@devup-ui/components` package. - -## using Vite - -``` -//vite.config.js -import { defineConfig } from "vite"; -import react from "@vitejs/plugin-react"; -import { DevupUI } from "@devup-ui/vite-plugin"; - -export default defineConfig({ - plugins: [ - DevupUI({ - include: ["@devup-ui/components"], - }), - react(), - ], -}); -``` - -## using Next.js - -``` -// next.config.js -import { DevupUI } from '@devup-ui/next-plugin' - -export default DevupUI({ include: ["@devup-ui/components"]}) -``` - -## using Rsbuild - -``` -// rsbuild.config.mjs -import { defineConfig } from '@rsbuild/core'; -import { pluginReact } from '@rsbuild/plugin-react'; -import { DevupUIRsbuildPlugin } from '@devup-ui/rsbuild-plugin'; - -export default defineConfig({ -plugins: [pluginReact(), DevupUIRsbuildPlugin({ - include: ["@devup-ui/components"], - })], -}); -``` - -Note: If you encounter "Cannot run on the runtime" error, make sure the include option is properly configured for your bundler. - -## Examples - -// Form,Layout,theme etc. From cdbeae3e28388f5dc19ae36f4fe43b0636312981 Mon Sep 17 00:00:00 2001 From: Moon Dahyun Date: Sun, 28 Sep 2025 17:15:25 +0900 Subject: [PATCH 3/9] rewrite ui-components --- responsive.md | 100 ----------------------------------------------- ui-components.md | 58 +++++++++++++++++++++++++++ 2 files changed, 58 insertions(+), 100 deletions(-) delete mode 100644 responsive.md create mode 100644 ui-components.md diff --git a/responsive.md b/responsive.md deleted file mode 100644 index 85865346..00000000 --- a/responsive.md +++ /dev/null @@ -1,100 +0,0 @@ -# Responsive - -Devup UI supports responsive design. - -# Breakpoints - -Devup UI provides flexible responsive design capabilities through breakpoints. You can use either the default breakpoint system or customize your own breakpoints to match your design requirements. - -## Default Breakpoints - -By default, Devup UI uses a 5-breakpoint system with the following viewport ranges: - -| Index | Viewport Range | Description | -| ----- | -------------- | --------------- | -| 1st | ~ 479px | Mobile (small) | -| 2nd | 480px ~ 767px | Mobile (large) | -| 3rd | 768px ~ 991px | Tablet | -| 4th | 992px ~ 1279px | Desktop (small) | -| 5th | 1280px ~ | Desktop (large) | - -## Using Responsive Arrays - -You can add responsive design by using an array of maximum 5 elements for any style property: - -```jsx -const box = ( - - Hello - -); -``` - -### Null Values - -If any of the five elements are set to `null`, Devup UI uses the previous value for responsive design: - -```jsx -// Background will be: -// - red from 0px to 767px (1st and 2nd breakpoints) -// - green from 768px to 1279px (3rd and 4th breakpoints) -// - purple from 1280px and above (5th breakpoint) - -``` - -### Partial Arrays - -If the length of the array is less than 5, Devup UI makes responsive design according to the index of the element: - -```jsx -// Only specify mobile and desktop values - // red for mobile, blue for larger screens - -// Specify mobile, tablet, and desktop - -``` - -## Custom Breakpoints - -You can customize breakpoints by adding a `breakpoints` configuration to your `devup.json` file: - -### Configuration - -```json -{ - "theme": { - "breakpoints": [0, 460, 768, 1024] - } -} -``` - -### How Custom Breakpoints Work - -When you define custom breakpoints, the array values correspond to minimum viewport widths: - -- **1st element**: From 0px to the first breakpoint value -- **2nd element**: From first breakpoint to second breakpoint -- **3rd element**: From second breakpoint to third breakpoint -- **And so on...** - -### Example with Custom Breakpoints - -```json -// create devup.json -{ - "theme": { - "breakpoints": [0, 460, 1024] - } -} -``` - -```jsx -// With the custom breakpoints above: - -``` - -This would create the following responsive behavior: - -- `red` background from 0px to 459px -- `blue` background from 460px to 1023px -- `green` background from 1024px and above diff --git a/ui-components.md b/ui-components.md new file mode 100644 index 00000000..510228db --- /dev/null +++ b/ui-components.md @@ -0,0 +1,58 @@ +# Devup UI Components + +If you want to use Devup UI Components, you need to install it. + +``` +npm install @devup-ui/components +// or +yarn add @devup-ui/components +// or +pnpm add @devup-ui/components +``` + +You need to configure the include option for each bundler environment to properly load the `@devup-ui/components` package. + +## using Vite + +``` +//vite.config.js +import { defineConfig } from "vite"; +import react from "@vitejs/plugin-react"; +import { DevupUI } from "@devup-ui/vite-plugin"; +export default defineConfig({ + plugins: [ + DevupUI({ + include: ["@devup-ui/components"], + }), + react(), + ], +}); +``` + +## using Next.js + +``` +// next.config.js +import { DevupUI } from '@devup-ui/next-plugin' +export default DevupUI({ include: ["@devup-ui/components"]}) +``` + +## using Rsbuild + +``` +// rsbuild.config.mjs +import { defineConfig } from '@rsbuild/core'; +import { pluginReact } from '@rsbuild/plugin-react'; +import { DevupUIRsbuildPlugin } from '@devup-ui/rsbuild-plugin'; +export default defineConfig({ +plugins: [pluginReact(), DevupUIRsbuildPlugin({ + include: ["@devup-ui/components"], + })], +}); +``` + +Note: If you encounter "Cannot run on the runtime" error, make sure the include option is properly configured for your bundler. + +## Examples + +// Form,Layout,theme etc. From 5ccc3bb3f5b1c829a5786b26780af436def26778 Mon Sep 17 00:00:00 2001 From: Moon Dahyun Date: Sun, 28 Sep 2025 17:28:15 +0900 Subject: [PATCH 4/9] move to overview --- .../components/overview/Description.mdx | 57 ++++++++++ .../app/(detail)/components/overview/page.tsx | 104 +++++++++--------- 2 files changed, 107 insertions(+), 54 deletions(-) create mode 100644 apps/landing/src/app/(detail)/components/overview/Description.mdx diff --git a/apps/landing/src/app/(detail)/components/overview/Description.mdx b/apps/landing/src/app/(detail)/components/overview/Description.mdx new file mode 100644 index 00000000..4c9ab469 --- /dev/null +++ b/apps/landing/src/app/(detail)/components/overview/Description.mdx @@ -0,0 +1,57 @@ +If you want to use Devup UI Components, you need to install it. + +``` +npm install @devup-ui/components +// or +yarn add @devup-ui/components +// or +pnpm add @devup-ui/components +``` + +You need to configure the include option for each bundler environment to properly load the `@devup-ui/components` package. + +### using Vite + +```typescript +//vite.config.js +import { defineConfig } from "vite"; +import react from "@vitejs/plugin-react"; +import { DevupUI } from "@devup-ui/vite-plugin"; +export default defineConfig({ + plugins: [ + DevupUI({ + include: ["@devup-ui/components"], + }), + react(), + ], +}); +``` + +### using Next.js + +```typescript +// next.config.js +import { DevupUI } from "@devup-ui/next-plugin"; +export default DevupUI({ include: ["@devup-ui/components"] }); +``` + +### using Rsbuild + +```typescript +// rsbuild.config.mjs +import { defineConfig } from "@rsbuild/core"; +import { pluginReact } from "@rsbuild/plugin-react"; +import { DevupUIRsbuildPlugin } from "@devup-ui/rsbuild-plugin"; +export default defineConfig({ + plugins: [ + pluginReact(), + DevupUIRsbuildPlugin({ + include: ["@devup-ui/components"], + }), + ], +}); +``` + +Note: If you encounter "Cannot run on the runtime" error, make sure the include option is properly configured for your bundler. + +### Examples diff --git a/apps/landing/src/app/(detail)/components/overview/page.tsx b/apps/landing/src/app/(detail)/components/overview/page.tsx index 4925b571..b3df18aa 100644 --- a/apps/landing/src/app/(detail)/components/overview/page.tsx +++ b/apps/landing/src/app/(detail)/components/overview/page.tsx @@ -1,10 +1,11 @@ -import { Center, css, Flex, Grid, Text, VStack } from '@devup-ui/react' -import Link from 'next/link' +import { Center, css, Flex, Grid, Text, VStack } from "@devup-ui/react"; +import Link from "next/link"; +import Description from "./Description.mdx"; -import { Icons } from '@/components/icons/components' -import { COMPONENT_GROUPS } from '@/constants' +import { Icons } from "@/components/icons/components"; +import { COMPONENT_GROUPS } from "@/constants"; -import Card from '../Card' +import Card from "../Card"; export default function Page() { return ( @@ -16,41 +17,39 @@ export default function Page() { Devup UI Components - Devup UI is a library of components that can be used to build web - applications. It is built with React and TypeScript and is designed to - be used with the Devup framework. + Form {COMPONENT_GROUPS.Form.map((component) => { const Icon = Icons[ `Icon${component - .split('-') + .split("-") .map((item) => item.charAt(0).toUpperCase() + item.slice(1)) - .join('')}Comp` - ] + .join("")}Comp` + ]; return (
- +
{component - .split('-') + .split("-") .map( - (item) => - item.charAt(0).toUpperCase() + item.slice(1), + (item) => item.charAt(0).toUpperCase() + item.slice(1) ) - .join(' ')} + .join(" ")} - ) + ); })} @@ -84,13 +82,13 @@ export default function Page() { Layout @@ -98,19 +96,19 @@ export default function Page() { const Icon = Icons[ `Icon${component - .split('-') + .split("-") .map((item) => item.charAt(0).toUpperCase() + item.slice(1)) - .join('')}Comp` - ] + .join("")}Comp` + ]; return (
- +
{component - .split('-') + .split("-") .map( - (item) => - item.charAt(0).toUpperCase() + item.slice(1), + (item) => item.charAt(0).toUpperCase() + item.slice(1) ) - .join(' ')} + .join(" ")} - ) + ); })} @@ -144,13 +141,13 @@ export default function Page() { Theme @@ -158,19 +155,19 @@ export default function Page() { const Icon = Icons[ `Icon${component - .split('-') + .split("-") .map((item) => item.charAt(0).toUpperCase() + item.slice(1)) - .join('')}Comp` - ] + .join("")}Comp` + ]; return (
- +
{component - .split('-') + .split("-") .map( - (item) => - item.charAt(0).toUpperCase() + item.slice(1), + (item) => item.charAt(0).toUpperCase() + item.slice(1) ) - .join(' ')} + .join(" ")} - ) + ); })} - ) + ); } From 1c5498b2c837f814ba99145a2680a3280ac76661 Mon Sep 17 00:00:00 2001 From: Moon Dahyun Date: Wed, 1 Oct 2025 10:49:53 +0900 Subject: [PATCH 5/9] improve styling --- .../components/overview/Description.mdx | 14 ++--- .../app/(detail)/components/overview/page.tsx | 5 +- ui-components.md | 58 ------------------- 3 files changed, 10 insertions(+), 67 deletions(-) delete mode 100644 ui-components.md diff --git a/apps/landing/src/app/(detail)/components/overview/Description.mdx b/apps/landing/src/app/(detail)/components/overview/Description.mdx index 4c9ab469..d4c996d7 100644 --- a/apps/landing/src/app/(detail)/components/overview/Description.mdx +++ b/apps/landing/src/app/(detail)/components/overview/Description.mdx @@ -1,6 +1,6 @@ -If you want to use Devup UI Components, you need to install it. +If you want to use Devup UI Components, you need to **install** it. -``` +```typescript npm install @devup-ui/components // or yarn add @devup-ui/components @@ -10,7 +10,7 @@ pnpm add @devup-ui/components You need to configure the include option for each bundler environment to properly load the `@devup-ui/components` package. -### using Vite +# using Vite ```typescript //vite.config.js @@ -27,7 +27,7 @@ export default defineConfig({ }); ``` -### using Next.js +# using Next.js ```typescript // next.config.js @@ -35,7 +35,7 @@ import { DevupUI } from "@devup-ui/next-plugin"; export default DevupUI({ include: ["@devup-ui/components"] }); ``` -### using Rsbuild +# using Rsbuild ```typescript // rsbuild.config.mjs @@ -52,6 +52,4 @@ export default defineConfig({ }); ``` -Note: If you encounter "Cannot run on the runtime" error, make sure the include option is properly configured for your bundler. - -### Examples +Note: If you encounter `Cannot run on the runtime` error, make sure the include option is properly configured for your bundler. diff --git a/apps/landing/src/app/(detail)/components/overview/page.tsx b/apps/landing/src/app/(detail)/components/overview/page.tsx index b3df18aa..f9133e1b 100644 --- a/apps/landing/src/app/(detail)/components/overview/page.tsx +++ b/apps/landing/src/app/(detail)/components/overview/page.tsx @@ -19,7 +19,10 @@ export default function Page() { - + + Examples + + Form diff --git a/ui-components.md b/ui-components.md deleted file mode 100644 index 510228db..00000000 --- a/ui-components.md +++ /dev/null @@ -1,58 +0,0 @@ -# Devup UI Components - -If you want to use Devup UI Components, you need to install it. - -``` -npm install @devup-ui/components -// or -yarn add @devup-ui/components -// or -pnpm add @devup-ui/components -``` - -You need to configure the include option for each bundler environment to properly load the `@devup-ui/components` package. - -## using Vite - -``` -//vite.config.js -import { defineConfig } from "vite"; -import react from "@vitejs/plugin-react"; -import { DevupUI } from "@devup-ui/vite-plugin"; -export default defineConfig({ - plugins: [ - DevupUI({ - include: ["@devup-ui/components"], - }), - react(), - ], -}); -``` - -## using Next.js - -``` -// next.config.js -import { DevupUI } from '@devup-ui/next-plugin' -export default DevupUI({ include: ["@devup-ui/components"]}) -``` - -## using Rsbuild - -``` -// rsbuild.config.mjs -import { defineConfig } from '@rsbuild/core'; -import { pluginReact } from '@rsbuild/plugin-react'; -import { DevupUIRsbuildPlugin } from '@devup-ui/rsbuild-plugin'; -export default defineConfig({ -plugins: [pluginReact(), DevupUIRsbuildPlugin({ - include: ["@devup-ui/components"], - })], -}); -``` - -Note: If you encounter "Cannot run on the runtime" error, make sure the include option is properly configured for your bundler. - -## Examples - -// Form,Layout,theme etc. From 3c4fd78acd849307ae94d4db498c1a1d859b5db5 Mon Sep 17 00:00:00 2001 From: Moon Dahyun Date: Wed, 1 Oct 2025 11:07:03 +0900 Subject: [PATCH 6/9] eslint single quote --- .../app/(detail)/components/overview/page.tsx | 158 +++++++++--------- 1 file changed, 79 insertions(+), 79 deletions(-) diff --git a/apps/landing/src/app/(detail)/components/overview/page.tsx b/apps/landing/src/app/(detail)/components/overview/page.tsx index f9133e1b..fc9f39e9 100644 --- a/apps/landing/src/app/(detail)/components/overview/page.tsx +++ b/apps/landing/src/app/(detail)/components/overview/page.tsx @@ -1,77 +1,77 @@ -import { Center, css, Flex, Grid, Text, VStack } from "@devup-ui/react"; -import Link from "next/link"; -import Description from "./Description.mdx"; +import { Center, css, Flex, Grid, Text, VStack } from '@devup-ui/react'; +import Link from 'next/link'; +import Description from './Description.mdx'; -import { Icons } from "@/components/icons/components"; -import { COMPONENT_GROUPS } from "@/constants"; +import { Icons } from '@/components/icons/components'; +import { COMPONENT_GROUPS } from '@/constants'; -import Card from "../Card"; +import Card from '../Card'; export default function Page() { return ( - - + + Overview - + Devup UI Components - + - + Examples - - + + Form {COMPONENT_GROUPS.Form.map((component) => { const Icon = Icons[ `Icon${component - .split("-") + .split('-') .map((item) => item.charAt(0).toUpperCase() + item.slice(1)) - .join("")}Comp` + .join('')}Comp` ]; return ( -
- +
+
{component - .split("-") + .split('-') .map( (item) => item.charAt(0).toUpperCase() + item.slice(1) ) - .join(" ")} + .join(' ')} @@ -80,57 +80,57 @@ export default function Page() { })} - - + + Layout {COMPONENT_GROUPS.Layout.map((component) => { const Icon = Icons[ `Icon${component - .split("-") + .split('-') .map((item) => item.charAt(0).toUpperCase() + item.slice(1)) - .join("")}Comp` + .join('')}Comp` ]; return ( -
- +
+
{component - .split("-") + .split('-') .map( (item) => item.charAt(0).toUpperCase() + item.slice(1) ) - .join(" ")} + .join(' ')} @@ -139,57 +139,57 @@ export default function Page() { })} - - + + Theme {COMPONENT_GROUPS.Theme.map((component) => { const Icon = Icons[ `Icon${component - .split("-") + .split('-') .map((item) => item.charAt(0).toUpperCase() + item.slice(1)) - .join("")}Comp` + .join('')}Comp` ]; return ( -
- +
+
{component - .split("-") + .split('-') .map( (item) => item.charAt(0).toUpperCase() + item.slice(1) ) - .join(" ")} + .join(' ')} From 1577e35bfe3c31a416be8ad9d5b0b51405d5f5d2 Mon Sep 17 00:00:00 2001 From: Moon Dahyun Date: Sun, 26 Oct 2025 16:17:39 +0900 Subject: [PATCH 7/9] fix : delete include option --- .../components/overview/Description.mdx | 44 ------------------- 1 file changed, 44 deletions(-) diff --git a/apps/landing/src/app/(detail)/components/overview/Description.mdx b/apps/landing/src/app/(detail)/components/overview/Description.mdx index d4c996d7..0bfe8d57 100644 --- a/apps/landing/src/app/(detail)/components/overview/Description.mdx +++ b/apps/landing/src/app/(detail)/components/overview/Description.mdx @@ -8,48 +8,4 @@ yarn add @devup-ui/components pnpm add @devup-ui/components ``` -You need to configure the include option for each bundler environment to properly load the `@devup-ui/components` package. - -# using Vite - -```typescript -//vite.config.js -import { defineConfig } from "vite"; -import react from "@vitejs/plugin-react"; -import { DevupUI } from "@devup-ui/vite-plugin"; -export default defineConfig({ - plugins: [ - DevupUI({ - include: ["@devup-ui/components"], - }), - react(), - ], -}); -``` - -# using Next.js - -```typescript -// next.config.js -import { DevupUI } from "@devup-ui/next-plugin"; -export default DevupUI({ include: ["@devup-ui/components"] }); -``` - -# using Rsbuild - -```typescript -// rsbuild.config.mjs -import { defineConfig } from "@rsbuild/core"; -import { pluginReact } from "@rsbuild/plugin-react"; -import { DevupUIRsbuildPlugin } from "@devup-ui/rsbuild-plugin"; -export default defineConfig({ - plugins: [ - pluginReact(), - DevupUIRsbuildPlugin({ - include: ["@devup-ui/components"], - }), - ], -}); -``` - Note: If you encounter `Cannot run on the runtime` error, make sure the include option is properly configured for your bundler. From a3190fdec1598a822e4a196f2c0e31d39a3d934a Mon Sep 17 00:00:00 2001 From: Moon Dahyun Date: Sun, 26 Oct 2025 16:33:33 +0900 Subject: [PATCH 8/9] fix : single -> double quote --- .../app/(detail)/components/overview/page.tsx | 158 +++++++++--------- 1 file changed, 79 insertions(+), 79 deletions(-) diff --git a/apps/landing/src/app/(detail)/components/overview/page.tsx b/apps/landing/src/app/(detail)/components/overview/page.tsx index fc9f39e9..f9133e1b 100644 --- a/apps/landing/src/app/(detail)/components/overview/page.tsx +++ b/apps/landing/src/app/(detail)/components/overview/page.tsx @@ -1,77 +1,77 @@ -import { Center, css, Flex, Grid, Text, VStack } from '@devup-ui/react'; -import Link from 'next/link'; -import Description from './Description.mdx'; +import { Center, css, Flex, Grid, Text, VStack } from "@devup-ui/react"; +import Link from "next/link"; +import Description from "./Description.mdx"; -import { Icons } from '@/components/icons/components'; -import { COMPONENT_GROUPS } from '@/constants'; +import { Icons } from "@/components/icons/components"; +import { COMPONENT_GROUPS } from "@/constants"; -import Card from '../Card'; +import Card from "../Card"; export default function Page() { return ( - - + + Overview - + Devup UI Components - + - + Examples - - + + Form {COMPONENT_GROUPS.Form.map((component) => { const Icon = Icons[ `Icon${component - .split('-') + .split("-") .map((item) => item.charAt(0).toUpperCase() + item.slice(1)) - .join('')}Comp` + .join("")}Comp` ]; return ( -
- +
+
{component - .split('-') + .split("-") .map( (item) => item.charAt(0).toUpperCase() + item.slice(1) ) - .join(' ')} + .join(" ")} @@ -80,57 +80,57 @@ export default function Page() { })} - - + + Layout {COMPONENT_GROUPS.Layout.map((component) => { const Icon = Icons[ `Icon${component - .split('-') + .split("-") .map((item) => item.charAt(0).toUpperCase() + item.slice(1)) - .join('')}Comp` + .join("")}Comp` ]; return ( -
- +
+
{component - .split('-') + .split("-") .map( (item) => item.charAt(0).toUpperCase() + item.slice(1) ) - .join(' ')} + .join(" ")} @@ -139,57 +139,57 @@ export default function Page() { })} - - + + Theme {COMPONENT_GROUPS.Theme.map((component) => { const Icon = Icons[ `Icon${component - .split('-') + .split("-") .map((item) => item.charAt(0).toUpperCase() + item.slice(1)) - .join('')}Comp` + .join("")}Comp` ]; return ( -
- +
+
{component - .split('-') + .split("-") .map( (item) => item.charAt(0).toUpperCase() + item.slice(1) ) - .join(' ')} + .join(" ")} From b4bb82bbc5302e8f569b6296c89229f1985ef450 Mon Sep 17 00:00:00 2001 From: Moon Dahyun Date: Sun, 26 Oct 2025 16:58:08 +0900 Subject: [PATCH 9/9] fix : lint error --- .../components/overview/Description.mdx | 2 +- .../app/(detail)/components/overview/page.tsx | 103 +++++++++--------- 2 files changed, 54 insertions(+), 51 deletions(-) diff --git a/apps/landing/src/app/(detail)/components/overview/Description.mdx b/apps/landing/src/app/(detail)/components/overview/Description.mdx index 0bfe8d57..20330ecb 100644 --- a/apps/landing/src/app/(detail)/components/overview/Description.mdx +++ b/apps/landing/src/app/(detail)/components/overview/Description.mdx @@ -1,6 +1,6 @@ If you want to use Devup UI Components, you need to **install** it. -```typescript +```bash npm install @devup-ui/components // or yarn add @devup-ui/components diff --git a/apps/landing/src/app/(detail)/components/overview/page.tsx b/apps/landing/src/app/(detail)/components/overview/page.tsx index f9133e1b..7d06db1f 100644 --- a/apps/landing/src/app/(detail)/components/overview/page.tsx +++ b/apps/landing/src/app/(detail)/components/overview/page.tsx @@ -1,11 +1,11 @@ -import { Center, css, Flex, Grid, Text, VStack } from "@devup-ui/react"; -import Link from "next/link"; -import Description from "./Description.mdx"; +import { Center, css, Flex, Grid, Text, VStack } from '@devup-ui/react' +import Link from 'next/link' -import { Icons } from "@/components/icons/components"; -import { COMPONENT_GROUPS } from "@/constants"; +import { Icons } from '@/components/icons/components' +import { COMPONENT_GROUPS } from '@/constants' -import Card from "../Card"; +import Card from '../Card' +import Description from './Description.mdx' export default function Page() { return ( @@ -19,7 +19,7 @@ export default function Page() { - + Examples @@ -27,32 +27,32 @@ export default function Page() { Form {COMPONENT_GROUPS.Form.map((component) => { const Icon = Icons[ `Icon${component - .split("-") + .split('-') .map((item) => item.charAt(0).toUpperCase() + item.slice(1)) - .join("")}Comp` - ]; + .join('')}Comp` + ] return (
- +
{component - .split("-") + .split('-') .map( - (item) => item.charAt(0).toUpperCase() + item.slice(1) + (item) => + item.charAt(0).toUpperCase() + item.slice(1), ) - .join(" ")} + .join(' ')} - ); + ) })} @@ -85,13 +86,13 @@ export default function Page() { Layout @@ -99,19 +100,19 @@ export default function Page() { const Icon = Icons[ `Icon${component - .split("-") + .split('-') .map((item) => item.charAt(0).toUpperCase() + item.slice(1)) - .join("")}Comp` - ]; + .join('')}Comp` + ] return (
- +
{component - .split("-") + .split('-') .map( - (item) => item.charAt(0).toUpperCase() + item.slice(1) + (item) => + item.charAt(0).toUpperCase() + item.slice(1), ) - .join(" ")} + .join(' ')} - ); + ) })} @@ -144,13 +146,13 @@ export default function Page() { Theme @@ -158,19 +160,19 @@ export default function Page() { const Icon = Icons[ `Icon${component - .split("-") + .split('-') .map((item) => item.charAt(0).toUpperCase() + item.slice(1)) - .join("")}Comp` - ]; + .join('')}Comp` + ] return (
- +
{component - .split("-") + .split('-') .map( - (item) => item.charAt(0).toUpperCase() + item.slice(1) + (item) => + item.charAt(0).toUpperCase() + item.slice(1), ) - .join(" ")} + .join(' ')} - ); + ) })} - ); + ) }