Add shadcn library (#77)

* move old components to index folder

* add baseurl and new alias

* update import paths

* add shadcn library

* add shadcn components

* revert to initial library state

* next time refactor your own mistakes on your own

* delete library provided colors and style configs

* return shadcn library configs

* test shadcn button

* remove bugged in vs code alias ui

* remove commented button

* Fix folder naming

---------

Co-authored-by: Demian Parkhomenko <[email protected]>

components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

package.json

@@ -16,10 +16,16 @@
     "cspell": "cspell --show-suggestions --show-context --gitignore ."
   },
   "dependencies": {
+    "@radix-ui/react-slot": "^1.0.2",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "lucide-react": "^0.312.0",
     "next": "14.0.3",
     "next-themes": "^0.2.1",
     "react": "^18",
-    "react-dom": "^18"
+    "react-dom": "^18",
+    "tailwind-merge": "^2.2.0",
+    "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@types/node": "^20",

project-words.txt

@@ -5,3 +5,5 @@ tsbuildinfo
 vercel
 Roboto
 subheadline
+linecap
+linejoin

src/app/auth/page.tsx

@@ -1,8 +1,8 @@
-import FormAuth from '@/components/Pages/Auth/FormAuth'
-import ImageCard from '@/components/Pages/Auth/ImageCard'
-import ButtonThemeToggle from '@/components/UI/ButtonThemeToggle'
-import IconGolub from '@/components/UI/Icons/IconGolub'
-import Layout from '@/components/UI/Layout'
+import FormAuth from '@/components/pages/auth/FormAuth'
+import ImageCard from '@/components/pages/auth/ImageCard'
+import IconGolub from '@/components/ui/icons/IconGolub'
+import ButtonThemeToggle from '@/components/ui/index/ButtonThemeToggle'
+import Layout from '@/components/ui/index/Layout'
 
 export default function Auth() {
   return (

src/app/globals.css

@@ -2,46 +2,112 @@
 @tailwind components;
 @tailwind utilities;
 
-body {
-  @apply font-text text-[1.0625rem] leading-tight tracking-[0.0063em] text-base-black dark:text-base-white;
-}
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
 
-.title-lg {
-  @apply font-title text-[1.75rem] font-medium leading-[2.125rem] tracking-[0.0225em];
-}
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
 
-.title-md {
-  @apply font-title text-xl font-medium tracking-[0.0225em];
-}
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
 
-.title-sm {
-  @apply font-title font-medium leading-[1.375rem] tracking-[0.0063em];
-}
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
 
-.subheadline {
-  @apply text-[0.9375rem] leading-5 tracking-[0.0063em];
-}
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
 
-.footnote {
-  @apply font-title text-[0.8125rem] font-medium leading-[1.125rem];
-}
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
 
-.caption {
-  @apply text-xs uppercase;
-}
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
 
-.card {
-  @apply rounded-3xl;
-}
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
 
-.input-placeholder {
-  @apply peer-[:not(:placeholder-shown)]:translate-y-0 peer-[:not(:placeholder-shown)]:top-[0.375rem] peer-[:not(:placeholder-shown)]:text-[0.6875rem] peer-[:not(:placeholder-shown)]:leading-[0.8125rem];
-}
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
 
-.label-checkbox span {
-  @apply peer-checked:border-bright-indigo peer-checked:bg-bright-indigo;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+  }
 }
 
-.label-checkbox span svg {
-  @apply peer-checked:opacity-100;
+@layer base {
+  body {
+    @apply font-text text-[1.0625rem] leading-tight tracking-[0.0063em] text-base-black dark:text-base-white;
+  }
+
+  .title-lg {
+    @apply font-title text-[1.75rem] font-medium leading-[2.125rem] tracking-[0.0225em];
+  }
+
+  .title-md {
+    @apply font-title text-xl font-medium tracking-[0.0225em];
+  }
+
+  .title-sm {
+    @apply font-title font-medium leading-[1.375rem] tracking-[0.0063em];
+  }
+
+  .subheadline {
+    @apply text-[0.9375rem] leading-5 tracking-[0.0063em];
+  }
+
+  .footnote {
+    @apply font-title text-[0.8125rem] font-medium leading-[1.125rem];
+  }
+
+  .caption {
+    @apply text-xs uppercase;
+  }
+
+  .card {
+    @apply rounded-3xl;
+  }
+
+  .input-placeholder {
+    @apply peer-[:not(:placeholder-shown)]:translate-y-0 peer-[:not(:placeholder-shown)]:top-[0.375rem] peer-[:not(:placeholder-shown)]:text-[0.6875rem] peer-[:not(:placeholder-shown)]:leading-[0.8125rem];
+  }
+
+  .label-checkbox span {
+    @apply peer-checked:border-bright-indigo peer-checked:bg-bright-indigo;
+  }
+
+  .label-checkbox span svg {
+    @apply peer-checked:opacity-100;
+  }
 }

src/app/layout.tsx

@@ -1,10 +1,9 @@
 import type { Metadata } from 'next'
 
+import { text, title } from '@/app/fonts'
+import '@/app/globals.css'
 import Providers from '@/store/Providers'
 
-import { text, title } from './fonts'
-import './globals.css'
-
 export const metadata: Metadata = {
   description: 'Generated by create next app',
   title: 'Create Next App',

src/app/page.tsx

@@ -1,4 +1,4 @@
-import IconChange from '@/components/UI/Icons/IconChange'
+import IconChange from '@/components/ui/icons/IconChange'
 import Image from 'next/image'
 
 export default function Home() {

src/components/Pages/Auth/FormAuth.tsx → src/components/pages/auth/FormAuth.tsx

@@ -1,11 +1,11 @@
 'use client'
 
-import Button from '@/components/UI/Button'
-import Form from '@/components/UI/Form/Form'
-import FormCheckbox from '@/components/UI/Form/FormCheckbox'
-import FormControl from '@/components/UI/Form/FormControl'
-import FormInput from '@/components/UI/Form/FormInput'
-import FormLabel from '@/components/UI/Form/FormLabel'
+import { Button } from '@/components/ui/button'
+import Form from '@/components/ui/form/Form'
+import FormCheckbox from '@/components/ui/form/FormCheckbox'
+import FormControl from '@/components/ui/form/FormControl'
+import FormInput from '@/components/ui/form/FormInput'
+import FormLabel from '@/components/ui/form/FormLabel'
 import { FC, FormEvent } from 'react'
 
 const AuthForm: FC = () => {

src/components/ui/button.tsx

@@ -0,0 +1,55 @@
+import { cn } from '@/lib/utils'
+import { Slot } from '@radix-ui/react-slot'
+import { type VariantProps, cva } from 'class-variance-authority'
+import * as React from 'react'
+
+const buttonVariants = cva(
+  'inline-block text-center text-base-white rounded-2xl bg-gradient-purple-blue',
+  {
+    defaultVariants: {
+      size: 'default',
+      variant: 'default',
+    },
+    variants: {
+      size: {
+        default: 'py-3.5 px-5',
+        icon: 'h-10 w-10',
+        lg: 'h-11 rounded-md px-8',
+        sm: 'h-9 rounded-md px-3',
+      },
+      variant: {
+        default: 'bg-gradient-purple-blue',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+      },
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ asChild = false, className, size, variant, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button'
+    return (
+      <Comp
+        className={cn(buttonVariants({ className, size, variant }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = 'Button'
+
+export { Button, buttonVariants }

src/components/UI/Form/FormCheckbox.tsx → src/components/ui/form/FormCheckbox.tsx

@@ -1,9 +1,8 @@
+import FormLabel from '@/components/ui/form/FormLabel'
+import IconCheck from '@/components/ui/icons/IconCheck'
 import { classnames } from '@/utils'
 import { FC, InputHTMLAttributes, ReactNode } from 'react'
 
-import IconCheck from '../Icons/IconCheck'
-import FormLabel from './FormLabel'
-
 interface FormCheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
   children: ReactNode
   className?: string

src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}