Skip to content

Commit

Permalink
feat: add shadcn UI (#7)
Browse files Browse the repository at this point in the history
* feat: add shadcn ui

* fix: conflict

* fix: conflict
  • Loading branch information
choipureum authored May 31, 2024
1 parent 869d04b commit 76154a1
Show file tree
Hide file tree
Showing 60 changed files with 4,768 additions and 127 deletions.
108 changes: 54 additions & 54 deletions app/globals.css
Original file line number Diff line number Diff line change
@@ -1,76 +1,76 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind components;
@tailwind utilities;

@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 222.2 84% 4.9%;

--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;
--card: 0 0% 100%;
--card-foreground: 222.2 84% 4.9%;

--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;
--popover: 0 0% 100%;
--popover-foreground: 222.2 84% 4.9%;

--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;
--primary: 222.2 47.4% 11.2%;
--primary-foreground: 210 40% 98%;

--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;
--secondary: 210 40% 96.1%;
--secondary-foreground: 222.2 47.4% 11.2%;

--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;
--muted: 210 40% 96.1%;
--muted-foreground: 215.4 16.3% 46.9%;

--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;
--accent: 210 40% 96.1%;
--accent-foreground: 222.2 47.4% 11.2%;

--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 210 40% 98%;

--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;
--border: 214.3 31.8% 91.4%;
--input: 214.3 31.8% 91.4%;
--ring: 222.2 84% 4.9%;

--radius: 0.5rem;
}
--radius: 0.5rem;
}

.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;
.dark {
--background: 222.2 84% 4.9%;
--foreground: 210 40% 98%;

--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;
--card: 222.2 84% 4.9%;
--card-foreground: 210 40% 98%;

--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;
--popover: 222.2 84% 4.9%;
--popover-foreground: 210 40% 98%;

--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;
--primary: 210 40% 98%;
--primary-foreground: 222.2 47.4% 11.2%;

--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;
--secondary: 217.2 32.6% 17.5%;
--secondary-foreground: 210 40% 98%;

--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;
--muted: 217.2 32.6% 17.5%;
--muted-foreground: 215 20.2% 65.1%;

--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;
--accent: 217.2 32.6% 17.5%;
--accent-foreground: 210 40% 98%;

--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 210 40% 98%;

--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 212.7 26.8% 83.9%;
}
--border: 217.2 32.6% 17.5%;
--input: 217.2 32.6% 17.5%;
--ring: 212.7 26.8% 83.9%;
}
}

@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
}
4 changes: 2 additions & 2 deletions components.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "default",
"rsc": true,
"rsc": false,
"tsx": true,
"tailwind": {
"config": "tailwind.config.js",
Expand All @@ -14,4 +14,4 @@
"components": "@/components",
"utils": "@/lib/utils"
}
}
}
1 change: 1 addition & 0 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
<!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
<link rel="icon" type="image/png" href="./public/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
<title>Vite + React + TS</title>
</head>
<body>
Expand Down
41 changes: 40 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,18 +12,56 @@
"prepare": "husky"
},
"dependencies": {
"@hookform/resolvers": "3.4.2",
"@radix-ui/react-accordion": "1.1.2",
"@radix-ui/react-alert-dialog": "1.0.5",
"@radix-ui/react-aspect-ratio": "1.0.3",
"@radix-ui/react-avatar": "1.0.4",
"@radix-ui/react-checkbox": "1.0.4",
"@radix-ui/react-collapsible": "1.0.3",
"@radix-ui/react-context-menu": "2.1.5",
"@radix-ui/react-dialog": "1.0.5",
"@radix-ui/react-dropdown-menu": "2.0.6",
"@radix-ui/react-hover-card": "1.0.7",
"@radix-ui/react-label": "2.0.2",
"@radix-ui/react-menubar": "1.0.4",
"@radix-ui/react-navigation-menu": "1.1.4",
"@radix-ui/react-popover": "1.0.7",
"@radix-ui/react-progress": "1.0.3",
"@radix-ui/react-radio-group": "1.1.3",
"@radix-ui/react-scroll-area": "1.0.5",
"@radix-ui/react-select": "2.0.0",
"@radix-ui/react-separator": "1.0.3",
"@radix-ui/react-slider": "1.1.2",
"@radix-ui/react-slot": "1.0.2",
"@radix-ui/react-switch": "1.0.3",
"@radix-ui/react-tabs": "1.0.4",
"@radix-ui/react-toast": "1.1.5",
"@radix-ui/react-toggle": "1.0.3",
"@radix-ui/react-toggle-group": "1.0.4",
"@radix-ui/react-tooltip": "1.0.7",
"autoprefixer": "10.4.19",
"class-variance-authority": "0.7.0",
"clsx": "2.1.1",
"cmdk": "1.0.0",
"date-fns": "3.6.0",
"embla-carousel-react": "8.1.3",
"husky": "9.0.11",
"input-otp": "1.2.4",
"lucide-react": "0.381.0",
"next-themes": "0.3.0",
"prettier": "3.2.5",
"react": "^18.2.0",
"react-day-picker": "8.10.1",
"react-dom": "^18.2.0",
"react-hook-form": "7.51.5",
"react-resizable-panels": "2.0.19",
"sonner": "1.4.41",
"tailwind-merge": "2.3.0",
"tailwindcss": "3.4.3",
"tailwindcss-animate": "1.0.7"
"tailwindcss-animate": "1.0.7",
"vaul": "0.9.1",
"zod": "3.23.8"
},
"devDependencies": {
"@commitlint/cli": "19.3.0",
Expand All @@ -37,6 +75,7 @@
"eslint": "^8.57.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.6",
"postcss": "8.4.38",
"typescript": "^5.2.2",
"vite": "^5.2.0"
}
Expand Down
4 changes: 2 additions & 2 deletions src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { Button } from "@/components/ui/button";
import { Home } from "@/pages/Home";
import "./App.css";

function App() {
return (
<>
<div>
<Button>Button</Button>
<Home />
</div>
</>
);
Expand Down
20 changes: 20 additions & 0 deletions src/components/atoms/InputWithButton.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";

import { TEXT } from "@/constants";
import "./index.css";

export function InputWithButton() {
return (
<div className="flex w-full max-w-sm items-center space-x-2">
<Input
type="text"
placeholder={TEXT.INPUT_PLACEHOLDER}
className="fact-input"
/>
<Button type="submit" className="fact-button">
검사
</Button>
</div>
);
}
5 changes: 5 additions & 0 deletions src/components/atoms/index.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.fact-input {
width: 1000px;
}
.fact-button {
}
58 changes: 58 additions & 0 deletions src/components/ui/accordion.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
"use client";

import * as React from "react";
import * as AccordionPrimitive from "@radix-ui/react-accordion";
import { ChevronDown } from "lucide-react";

import { cn } from "@/lib/utils";

const Accordion = AccordionPrimitive.Root;

const AccordionItem = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
>(({ className, ...props }, ref) => (
<AccordionPrimitive.Item
ref={ref}
className={cn("border-b", className)}
{...props}
/>
));
AccordionItem.displayName = "AccordionItem";

const AccordionTrigger = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Trigger>,
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
<AccordionPrimitive.Header className="flex">
<AccordionPrimitive.Trigger
ref={ref}
className={cn(
"flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
className,
)}
{...props}
>
{children}
<ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
</AccordionPrimitive.Trigger>
</AccordionPrimitive.Header>
));
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;

const AccordionContent = React.forwardRef<
React.ElementRef<typeof AccordionPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
>(({ className, children, ...props }, ref) => (
<AccordionPrimitive.Content
ref={ref}
className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
{...props}
>
<div className={cn("pb-4 pt-0", className)}>{children}</div>
</AccordionPrimitive.Content>
));

AccordionContent.displayName = AccordionPrimitive.Content.displayName;

export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
Loading

0 comments on commit 76154a1

Please sign in to comment.