Skip to content

Commit 5ccc3bb

Browse files
moonddamoondda
committed
move to overview
1 parent cdbeae3 commit 5ccc3bb

File tree

2 files changed

+107
-54
lines changed

2 files changed

+107
-54
lines changed

‎apps/landing/src/app/(detail)/components/overview/Description.mdx‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
If you want to use Devup UI Components, you need to install it.
2+
3+
```
4+
npm install @devup-ui/components
5+
// or
6+
yarn add @devup-ui/components
7+
// or
8+
pnpm add @devup-ui/components
9+
```
10+
11+
You need to configure the include option for each bundler environment to properly load the `@devup-ui/components` package.
12+
13+
### using Vite
14+
15+
```typescript
16+
//vite.config.js
17+
import { defineConfig } from "vite";
18+
import react from "@vitejs/plugin-react";
19+
import { DevupUI } from "@devup-ui/vite-plugin";
20+
export default defineConfig({
21+
plugins: [
22+
DevupUI({
23+
include: ["@devup-ui/components"],
24+
}),
25+
react(),
26+
],
27+
});
28+
```
29+
30+
### using Next.js
31+
32+
```typescript
33+
// next.config.js
34+
import { DevupUI } from "@devup-ui/next-plugin";
35+
export default DevupUI({ include: ["@devup-ui/components"] });
36+
```
37+
38+
### using Rsbuild
39+
40+
```typescript
41+
// rsbuild.config.mjs
42+
import { defineConfig } from "@rsbuild/core";
43+
import { pluginReact } from "@rsbuild/plugin-react";
44+
import { DevupUIRsbuildPlugin } from "@devup-ui/rsbuild-plugin";
45+
export default defineConfig({
46+
plugins: [
47+
pluginReact(),
48+
DevupUIRsbuildPlugin({
49+
include: ["@devup-ui/components"],
50+
}),
51+
],
52+
});
53+
```
54+
55+
Note: If you encounter "Cannot run on the runtime" error, make sure the include option is properly configured for your bundler.
56+
57+
### Examples

‎apps/landing/src/app/(detail)/components/overview/page.tsx‎

Lines changed: 50 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
import { Center, css, Flex, Grid, Text, VStack } from '@devup-ui/react'
2-
import Link from 'next/link'
1+
import { Center, css, Flex, Grid, Text, VStack } from "@devup-ui/react";
2+
import Link from "next/link";
3+
import Description from "./Description.mdx";
34

4-
import { Icons } from '@/components/icons/components'
5-
import { COMPONENT_GROUPS } from '@/constants'
5+
import { Icons } from "@/components/icons/components";
6+
import { COMPONENT_GROUPS } from "@/constants";
67

7-
import Card from '../Card'
8+
import Card from "../Card";
89

910
export default function Page() {
1011
return (
@@ -16,41 +17,39 @@ export default function Page() {
1617
Devup UI Components
1718
</Text>
1819
<Text color="$text" typography="bodyReg">
19-
Devup UI is a library of components that can be used to build web
20-
applications. It is built with React and TypeScript and is designed to
21-
be used with the Devup framework.
20+
<Description />
2221
</Text>
2322
<VStack gap="16px" overflow="visible" py="30px">
2423
<Text color="$title" typography="h6">
2524
Form
2625
</Text>
2726
<Grid
28-
gap={['10px', null, null, null, '20px']}
27+
gap={["10px", null, null, null, "20px"]}
2928
gridTemplateColumns={[
30-
'repeat(1, 1fr)',
31-
'repeat(3, 1fr)',
29+
"repeat(1, 1fr)",
30+
"repeat(3, 1fr)",
3231
null,
33-
'repeat(4, 1fr)',
34-
'repeat(5, 1fr)',
32+
"repeat(4, 1fr)",
33+
"repeat(5, 1fr)",
3534
]}
3635
>
3736
{COMPONENT_GROUPS.Form.map((component) => {
3837
const Icon =
3938
Icons[
4039
`Icon${component
41-
.split('-')
40+
.split("-")
4241
.map((item) => item.charAt(0).toUpperCase() + item.slice(1))
43-
.join('')}Comp`
44-
]
42+
.join("")}Comp`
43+
];
4544
return (
4645
<Link
4746
key={component}
48-
className={css({ textDecoration: 'none' })}
47+
className={css({ textDecoration: "none" })}
4948
href={`/components/${component}`}
5049
>
5150
<Card>
5251
<Center h="140px">
53-
<Icon className={css({ w: '100%' })} />
52+
<Icon className={css({ w: "100%" })} />
5453
</Center>
5554
<Flex
5655
alignItems="center"
@@ -65,17 +64,16 @@ export default function Page() {
6564
typography="buttonSmid"
6665
>
6766
{component
68-
.split('-')
67+
.split("-")
6968
.map(
70-
(item) =>
71-
item.charAt(0).toUpperCase() + item.slice(1),
69+
(item) => item.charAt(0).toUpperCase() + item.slice(1)
7270
)
73-
.join(' ')}
71+
.join(" ")}
7472
</Text>
7573
</Flex>
7674
</Card>
7775
</Link>
78-
)
76+
);
7977
})}
8078
</Grid>
8179
</VStack>
@@ -84,33 +82,33 @@ export default function Page() {
8482
Layout
8583
</Text>
8684
<Grid
87-
gap={['10px', null, null, null, '20px']}
85+
gap={["10px", null, null, null, "20px"]}
8886
gridTemplateColumns={[
89-
'repeat(1, 1fr)',
90-
'repeat(3, 1fr)',
87+
"repeat(1, 1fr)",
88+
"repeat(3, 1fr)",
9189
null,
92-
'repeat(4, 1fr)',
93-
'repeat(5, 1fr)',
90+
"repeat(4, 1fr)",
91+
"repeat(5, 1fr)",
9492
]}
9593
overflow="visible"
9694
>
9795
{COMPONENT_GROUPS.Layout.map((component) => {
9896
const Icon =
9997
Icons[
10098
`Icon${component
101-
.split('-')
99+
.split("-")
102100
.map((item) => item.charAt(0).toUpperCase() + item.slice(1))
103-
.join('')}Comp`
104-
]
101+
.join("")}Comp`
102+
];
105103
return (
106104
<Link
107105
key={component}
108-
className={css({ textDecoration: 'none' })}
106+
className={css({ textDecoration: "none" })}
109107
href={`/components/${component}`}
110108
>
111109
<Card>
112110
<Center h="140px">
113-
<Icon className={css({ w: '100%' })} />
111+
<Icon className={css({ w: "100%" })} />
114112
</Center>
115113
<Flex
116114
alignItems="center"
@@ -125,17 +123,16 @@ export default function Page() {
125123
typography="buttonSmid"
126124
>
127125
{component
128-
.split('-')
126+
.split("-")
129127
.map(
130-
(item) =>
131-
item.charAt(0).toUpperCase() + item.slice(1),
128+
(item) => item.charAt(0).toUpperCase() + item.slice(1)
132129
)
133-
.join(' ')}
130+
.join(" ")}
134131
</Text>
135132
</Flex>
136133
</Card>
137134
</Link>
138-
)
135+
);
139136
})}
140137
</Grid>
141138
</VStack>
@@ -144,33 +141,33 @@ export default function Page() {
144141
Theme
145142
</Text>
146143
<Grid
147-
gap={['10px', null, null, null, '20px']}
144+
gap={["10px", null, null, null, "20px"]}
148145
gridTemplateColumns={[
149-
'repeat(1, 1fr)',
150-
'repeat(3, 1fr)',
146+
"repeat(1, 1fr)",
147+
"repeat(3, 1fr)",
151148
null,
152-
'repeat(4, 1fr)',
153-
'repeat(5, 1fr)',
149+
"repeat(4, 1fr)",
150+
"repeat(5, 1fr)",
154151
]}
155152
overflow="visible"
156153
>
157154
{COMPONENT_GROUPS.Theme.map((component) => {
158155
const Icon =
159156
Icons[
160157
`Icon${component
161-
.split('-')
158+
.split("-")
162159
.map((item) => item.charAt(0).toUpperCase() + item.slice(1))
163-
.join('')}Comp`
164-
]
160+
.join("")}Comp`
161+
];
165162
return (
166163
<Link
167164
key={component}
168-
className={css({ textDecoration: 'none' })}
165+
className={css({ textDecoration: "none" })}
169166
href={`/components/${component}`}
170167
>
171168
<Card>
172169
<Center h="140px">
173-
<Icon className={css({ w: '100%' })} />
170+
<Icon className={css({ w: "100%" })} />
174171
</Center>
175172
<Flex
176173
alignItems="center"
@@ -185,20 +182,19 @@ export default function Page() {
185182
typography="buttonSmid"
186183
>
187184
{component
188-
.split('-')
185+
.split("-")
189186
.map(
190-
(item) =>
191-
item.charAt(0).toUpperCase() + item.slice(1),
187+
(item) => item.charAt(0).toUpperCase() + item.slice(1)
192188
)
193-
.join(' ')}
189+
.join(" ")}
194190
</Text>
195191
</Flex>
196192
</Card>
197193
</Link>
198-
)
194+
);
199195
})}
200196
</Grid>
201197
</VStack>
202198
</VStack>
203-
)
199+
);
204200
}

0 commit comments

Comments
 (0)