[Dev] add docs components anatomies (#55)

* [Feat/Example] add manage tax / members section (#46) * add manage-member components * add manage-tax component * add document * [Feat/Example] add Members Example Page (#48) * add dependency @radix-ui/react-form * add blurred carousel example * add recent-activity component * add recent-activity with interval animation * refactor : divide components into smaller components * add members example page change landing page example * add metadata types * [Feat/Example] add manage tax / members section (#46) * add manage-member components * add manage-tax component * [Feat/Example] add Members Example Page (#48) * add dependency @radix-ui/react-form * add blurred carousel example * add recent-activity component * add recent-activity with interval animation * refactor : divide components into smaller components * add members example page change landing page example * add metadata types * [Example] add manage tax / members section / update readme.md (#47) * [Feat/Example] add manage tax / members section (#46) * add manage-member components * add manage-tax component * add document * [Test/Storybook] add Components Stories (#50) * refactor : add example responsive image * add accordion stories * add carousel stories * add vertical carousel story * add dialog story * [Fix/Storybook] fix : responsive design / storybook typeerror (#52) * fix : responsive design / storybook typeerror * delete : delete unused import line * add vercel.json * chagne vercel.json configuration * [Docs/Components] add docs components anatomies (#54) * remove references * add docs components anatomies * add margin to icon
leezer94 · Aug 25, 2023 · db6fe2d · db6fe2d · vercel · Aug 25, 2023
1 parent f6ec21d
commit db6fe2d
Show file tree

Hide file tree

Showing 12 changed files with 125 additions and 56 deletions.
diff --git a/apps/web/components/examples-nav.tsx b/apps/web/components/examples-nav.tsx
@@ -73,8 +73,8 @@ export function ExampleCodeLink({ pathname }: ExampleCodeLinkProps) {
       rel='nofollow'
       className='absolute right-0 top-0 hidden items-center rounded-[0.5rem] text-sm font-semibold hover:underline md:flex'
     >
-      Source Code
-      <Icons.link className='ml-1 h-4 w-4' />
+      source code
+      <Icons.link className='ml-2 h-4 w-4' />
     </Link>
   );
 }
diff --git a/apps/web/components/mdx-components.tsx b/apps/web/components/mdx-components.tsx
@@ -189,7 +189,7 @@ const components = {
       <>
         <pre
           className={cn(
-            'mb-4 mt-6 max-h-[650px] overflow-x-auto rounded-lg border py-4 data-[theme=dark]:bg-background data-[theme=light]:bg-white',
+            'p-5 rounded-xl my-5 bg-inherit overflow-x-auto border-2',
             className
           )}
           {...props}
@@ -218,7 +218,7 @@ const components = {
   code: ({ className, ...props }: React.HTMLAttributes<HTMLElement>) => (
     <code
       className={cn(
-        'relative rounded px-[0.3rem] py-[0.2rem] font-mono text-sm bg-transparent',
+        'relative rounded bg-transparent px-[0.3rem] py-[0.2rem] font-mono text-sm',
         className
       )}
       {...props}

diff --git a/apps/web/config/docs.ts b/apps/web/config/docs.ts
@@ -109,12 +109,6 @@ export const DOCS_CONFIG: DocsConfig = {
     {
       title: '레퍼런스',
       items: [
-        // {
-        //   title: 'Shadcn/ui',
-        //   href: 'https://ui.shadcn.com/',
-        //   external: true,
-        //   items: [],
-        // },
         {
           title: 'Radix/ui',
           href: 'https://www.radix-ui.com/',

diff --git a/apps/web/config/site.ts b/apps/web/config/site.ts
@@ -7,7 +7,6 @@ export const siteConfig = {
     linkedin: 'https://www.linkedin.com/in/keonhee-lee-2964b421a/',
     github: 'https://github.com/leezer94/ui',
     medium: 'https://medium.com/@2kunhee94',
-    reference: 'https://github.com/shadcn/ui',
     npm: 'https://www.npmjs.com/package/leezer-ui',
     storybook: 'https://www.leezer-ui.com',
   },

diff --git a/apps/web/content/docs/components/accordion.mdx b/apps/web/content/docs/components/accordion.mdx
@@ -13,4 +13,34 @@ radix:
   </div>
 </ComponentExample>
 
-### API 레퍼런스
+### 컴포넌트의 구조
+
+```jsx
+<Accordion type='single' collapsible className='w-full'>
+  <AccordionItem value='item-1'>
+    <AccordionTrigger>
+      접근 가능성은 어떤가요 ?
+      <AccordionDescription>
+        접근 가능성에 대해 이야기 합니다.
+      </AccordionDescription>
+    </AccordionTrigger>
+    <AccordionContent>
+      WAI-ARIA 의 디자인 패턴을 차용 했습니다.
+    </AccordionContent>
+  </AccordionItem>
+  <AccordionItem value='item-2'>
+    <AccordionTrigger>스타일링이 되어 있나요?</AccordionTrigger>
+    <AccordionContent>
+      네. 다른 컴포넌트들과 미학적으로 일치하는 기본형 스타일이 적용되어
+      있습니다.
+    </AccordionContent>
+  </AccordionItem>
+  <AccordionItem value='item-3'>
+    <AccordionTrigger>애니메이션이 적용되어 있나요?</AccordionTrigger>
+    <AccordionContent>
+      네. 기본적으로 애니메이션이 적용되어 있지만, 개인적인 선호도에따라
+      비활성화 할 수 있습니다.
+    </AccordionContent>
+  </AccordionItem>
+</Accordion>
+```
diff --git a/apps/web/content/docs/components/alert-dialog.mdx b/apps/web/content/docs/components/alert-dialog.mdx
@@ -12,3 +12,21 @@ radix:
     <AlertDialogDemo />
   </div>
 </ComponentExample>
+
+### 컴포넌트의 구조
+
+```jsx
+<AlertDialog>
+  <AlertDialogTrigger asChild>
+    <Icons.trash2 />
+  </AlertDialogTrigger>
+  <AlertDialogContent>
+    <AlertDialogHeader>
+      <AlertDialogTitle>Title</AlertDialogTitle>
+      <AlertDialogDescription>Description</AlertDialogDescription>
+    </AlertDialogHeader>
+    <AlertDialogCancel>Cancel</AlertDialogCancel>
+    <AlertDialogAction>Succeed Action</AlertDialogAction>
+  </AlertDialogContent>
+</AlertDialog>
+```
diff --git a/apps/web/content/docs/components/avatar.mdx b/apps/web/content/docs/components/avatar.mdx
@@ -12,3 +12,12 @@ radix:
     <AvatarDemo />
   </div>
 </ComponentExample>
+
+### 컴포넌트의 구조
+
+```jsx
+<Avatar>
+  <AvatarImage src={image_src} alt={alt} />
+  <AvatarFallback>{fallbac_image}</AvatarFallback>
+</AvatarFallback>
+```
diff --git a/apps/web/content/docs/components/button.mdx b/apps/web/content/docs/components/button.mdx
@@ -24,47 +24,11 @@ component: true
   <ButtonDemo buttonVariant='disabled' />
   <ButtonDemo buttonVariant='link' />
 </ComponentMultiExamples>
-{/* <ComponentExample category='default' src='/components/examples/button/demo.tsx'>
-  <div className='flex flex-col max-w-[70%] w-full'>
-    <ButtonDemo buttonVariant='default' />
-  </div>
-</ComponentExample>
-<ComponentExample category='outline' src='/components/examples/button/demo.tsx'>
-  <div className='flex flex-col max-w-[70%] w-full'>
-    <ButtonDemo buttonVariant='outline' />
-  </div>
-</ComponentExample>
-<ComponentExample
-  category='destructive'
-  src='/components/examples/button/demo.tsx'
->
-  <div className='flex flex-col max-w-[70%] w-full'>
-    <ButtonDemo buttonVariant='destructive' />
-  </div>
-</ComponentExample>
-<ComponentExample category='ghost' src='/components/examples/button/demo.tsx'>
-  <div className='flex flex-col max-w-[70%] w-full'>
-    <ButtonDemo buttonVariant='ghost' />
-  </div>
-</ComponentExample>
-<ComponentExample
-  category='secondary'
-  src='/components/examples/button/demo.tsx'
->
-  <div className='flex flex-col max-w-[70%] w-full'>
-    <ButtonDemo buttonVariant='secondary' />
-  </div>
-</ComponentExample>
-<ComponentExample
-  category='disabled'
-  src='/components/examples/button/demo.tsx'
->
-  <div className='flex flex-col max-w-[70%] w-full'>
-    <ButtonDemo buttonVariant='disabled' />
-  </div>
-</ComponentExample>
-<ComponentExample category='link' src='/components/examples/button/demo.tsx'>
-  <div className='flex flex-col max-w-[70%] w-full'>
-    <ButtonDemo buttonVariant='link' />
-  </div>
-</ComponentExample> */}
+
+### 컴포넌트의 구조
+
+```jsx
+<Button variant={buttonVariant} size={size}>
+  Text
+</Button>
+```
diff --git a/apps/web/content/docs/components/card.mdx b/apps/web/content/docs/components/card.mdx
@@ -9,3 +9,16 @@ component: true
     <CardDemo />
   </div>
 </ComponentExample>
+
+### 컴포넌트의 구조
+
+```jsx
+<Card>
+  <CardHeader>
+    <CardTitle>Title</CardTitle>
+    <CardDescription>Description</CardDescription>
+    <CardContent>Content</CardContent>
+  </CardHeader>
+  <CardFooter>Footer</CardFooter>
+</Card>
+```
diff --git a/apps/web/content/docs/components/carousel.mdx b/apps/web/content/docs/components/carousel.mdx
@@ -9,3 +9,13 @@ component: true
     <CarouselDemo />
   </div>
 </ComponentExample>
+
+### 컴포넌트의 구조
+
+```jsx
+<Carousel buttonColor='black' orientation='horizontal' autoplay={autoplay}>
+  <CarouselImage1 />
+  <CarouselImage2 />
+  <CarouselImage3 />
+</Carousel>
+```
diff --git a/apps/web/content/docs/components/dialog.mdx b/apps/web/content/docs/components/dialog.mdx
@@ -12,3 +12,19 @@ radix:
     <DialogDemo />
   </div>
 </ComponentExample>
+
+### 컴포넌트의 구조
+
+```jsx
+<Dialog>
+  <DialogTrigger asChild>트리거로 사용될 컴포넌트</DialogTrigger>
+  <DialogContent>
+    <DialogHeader>
+      <DialogTitle>Title</DialogTitle>
+      <DialogDescription>Description</DialogDescription>
+    </DialogHeader>
+    {/** 컨텐츠 역할의 컴포넌트 자리  */}
+    <DialogFooter className='mt-5 flex'>Footer</DialogFooter>
+  </DialogContent>
+</Dialog>
+```
diff --git a/apps/web/content/docs/components/hover-card.mdx b/apps/web/content/docs/components/hover-card.mdx
@@ -12,3 +12,19 @@ radix:
     <HoverCardDemo />
   </div>
 </ComponentExample>
+
+### 컴포넌트 구조
+
+```jsx
+<HoverCard openDelay={300} closeDelay={300}>
+  <HoverCardTrigger>호버카드 트리거가될 컴포넌트</HoverCardTrigger>
+  <HoverCardContent>
+    <HoverCardHeader>
+      <HoverCardTitle>Title</HoverCardTitle>
+      <HoverCardDescription>Description</HoverCardDescription>
+    </HoverCardHeader>
+    Content
+    <HoverCardFooter>Footer</HoverCardFooter>
+  </HoverCardContent>
+</HoverCard>
+```