From 1a5a98c64bf1a07aa104bbed6266724fba41739f Mon Sep 17 00:00:00 2001 From: tylerapfledderer Date: Fri, 5 Jul 2024 15:52:30 -0400 Subject: [PATCH 01/27] feat: initialize shadCN setup --- .prettierrc | 7 +- components.json | 17 + package.json | 41 +- postcss.config.js | 6 + src/components/ui/accordion.tsx | 58 ++ src/components/ui/alert-dialog.tsx | 142 +++++ src/components/ui/alert.tsx | 59 ++ src/components/ui/avatar.tsx | 50 ++ src/components/ui/badge.tsx | 36 ++ src/components/ui/breadcrumb.tsx | 115 ++++ src/components/ui/button.tsx | 56 ++ src/components/ui/card.tsx | 79 +++ src/components/ui/carousel.tsx | 263 ++++++++ src/components/ui/checkbox.tsx | 30 + src/components/ui/dialog.tsx | 122 ++++ src/components/ui/form.tsx | 177 ++++++ src/components/ui/hover-card.tsx | 29 + src/components/ui/input.tsx | 25 + src/components/ui/label.tsx | 26 + src/components/ui/navigation-menu.tsx | 128 ++++ src/components/ui/pagination.tsx | 118 ++++ src/components/ui/popover.tsx | 31 + src/components/ui/progress.tsx | 28 + src/components/ui/radio-group.tsx | 44 ++ src/components/ui/scroll-area.tsx | 48 ++ src/components/ui/select.tsx | 160 +++++ src/components/ui/separator.tsx | 31 + src/components/ui/slider.tsx | 28 + src/components/ui/switch.tsx | 29 + src/components/ui/table.tsx | 117 ++++ src/components/ui/tabs.tsx | 55 ++ src/components/ui/textarea.tsx | 24 + src/components/ui/tooltip.tsx | 30 + src/lib/utils/cn.ts | 6 + src/styles/global.css | 79 ++- tailwind.config.js | 77 +++ yarn.lock | 871 ++++++++++++++++++++++++-- 37 files changed, 3165 insertions(+), 77 deletions(-) create mode 100644 components.json create mode 100644 postcss.config.js create mode 100644 src/components/ui/accordion.tsx create mode 100644 src/components/ui/alert-dialog.tsx create mode 100644 src/components/ui/alert.tsx create mode 100644 src/components/ui/avatar.tsx create mode 100644 src/components/ui/badge.tsx create mode 100644 src/components/ui/breadcrumb.tsx create mode 100644 src/components/ui/button.tsx create mode 100644 src/components/ui/card.tsx create mode 100644 src/components/ui/carousel.tsx create mode 100644 src/components/ui/checkbox.tsx create mode 100644 src/components/ui/dialog.tsx create mode 100644 src/components/ui/form.tsx create mode 100644 src/components/ui/hover-card.tsx create mode 100644 src/components/ui/input.tsx create mode 100644 src/components/ui/label.tsx create mode 100644 src/components/ui/navigation-menu.tsx create mode 100644 src/components/ui/pagination.tsx create mode 100644 src/components/ui/popover.tsx create mode 100644 src/components/ui/progress.tsx create mode 100644 src/components/ui/radio-group.tsx create mode 100644 src/components/ui/scroll-area.tsx create mode 100644 src/components/ui/select.tsx create mode 100644 src/components/ui/separator.tsx create mode 100644 src/components/ui/slider.tsx create mode 100644 src/components/ui/switch.tsx create mode 100644 src/components/ui/table.tsx create mode 100644 src/components/ui/tabs.tsx create mode 100644 src/components/ui/textarea.tsx create mode 100644 src/components/ui/tooltip.tsx create mode 100644 src/lib/utils/cn.ts create mode 100644 tailwind.config.js diff --git a/.prettierrc b/.prettierrc index 48e90e8d402..dd48c13bb21 100644 --- a/.prettierrc +++ b/.prettierrc @@ -3,5 +3,8 @@ "semi": false, "singleQuote": false, "tabWidth": 2, - "trailingComma": "es5" -} + "trailingComma": "es5", + "plugins": [ + "prettier-plugin-tailwindcss" + ] +} \ No newline at end of file diff --git a/components.json b/components.json new file mode 100644 index 00000000000..e73e548f301 --- /dev/null +++ b/components.json @@ -0,0 +1,17 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "default", + "rsc": true, + "tsx": true, + "tailwind": { + "config": "tailwind.config.js", + "css": "./src/styles/global.css", + "baseColor": "neutral", + "cssVariables": true, + "prefix": "eth-" + }, + "aliases": { + "components": "@/components", + "utils": "@/lib/utils" + } +} \ No newline at end of file diff --git a/package.json b/package.json index 77c7b54bd3e..e9bf3fdf743 100644 --- a/package.json +++ b/package.json @@ -32,11 +32,33 @@ "@docsearch/react": "^3.5.2", "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", - "@radix-ui/react-navigation-menu": "^1.1.4", + "@hookform/resolvers": "^3.8.0", + "@radix-ui/react-accordion": "^1.2.0", + "@radix-ui/react-alert-dialog": "^1.1.1", + "@radix-ui/react-avatar": "^1.1.0", + "@radix-ui/react-checkbox": "^1.1.1", + "@radix-ui/react-dialog": "^1.1.1", + "@radix-ui/react-hover-card": "^1.1.1", + "@radix-ui/react-icons": "^1.3.0", + "@radix-ui/react-label": "^2.1.0", + "@radix-ui/react-navigation-menu": "^1.2.0", + "@radix-ui/react-popover": "^1.1.1", + "@radix-ui/react-progress": "^1.1.0", + "@radix-ui/react-radio-group": "^1.2.0", + "@radix-ui/react-scroll-area": "^1.1.0", + "@radix-ui/react-select": "^2.1.1", + "@radix-ui/react-separator": "^1.1.0", + "@radix-ui/react-slider": "^1.2.0", + "@radix-ui/react-slot": "^1.1.0", + "@radix-ui/react-switch": "^1.1.0", + "@radix-ui/react-tabs": "^1.1.0", + "@radix-ui/react-tooltip": "^1.1.2", "@socialgouv/matomo-next": "^1.8.0", "chart.js": "^4.4.2", "chartjs-plugin-datalabels": "^2.2.0", - "embla-carousel-react": "^7.0.0", + "class-variance-authority": "^0.7.0", + "clsx": "^2.1.1", + "embla-carousel-react": "^8.1.6", "ethereum-blockies-base64": "^1.0.2", "framer-motion": "^10.13.0", "gray-matter": "^4.0.3", @@ -45,6 +67,7 @@ "lodash.merge": "^4.6.2", "lodash.shuffle": "^4.2.0", "lodash.union": "^4.6.0", + "lucide-react": "^0.400.0", "next": "^14.2.3", "next-i18next": "^14.0.3", "next-mdx-remote": "^3.0.8", @@ -55,13 +78,17 @@ "react-chartjs-2": "^5.2.0", "react-dom": "^18.2.0", "react-emoji-render": "^2.0.1", + "react-hook-form": "^7.52.1", "react-i18next": "^13.3.1", "react-icons": "^4.10.1", "react-lite-youtube-embed": "^2.4.0", "react-select": "5.8.0", "reading-time": "^1.5.0", "remark-gfm": "^3.0.1", - "yaml-loader": "^0.8.0" + "tailwind-merge": "^2.3.0", + "tailwindcss-animate": "^1.0.7", + "yaml-loader": "^0.8.0", + "zod": "^3.23.8" }, "devDependencies": { "@chakra-ui/cli": "^2.4.1", @@ -81,24 +108,28 @@ "@types/react-dom": "18.2.19", "@typescript-eslint/eslint-plugin": "^6.19.0", "@typescript-eslint/parser": "^6.19.0", + "autoprefixer": "^10.4.19", "chromatic": "10.9.6", "decompress": "^4.2.1", "eslint": "^8.45.0", "eslint-config-next": "^14.2.2", "eslint-config-prettier": "^9.0.0", "eslint-plugin-simple-import-sort": "^10.0.0", + "eslint-plugin-storybook": "0.8.0", "eslint-plugin-unused-imports": "^3.0.0", "husky": "^9.0.11", - "eslint-plugin-storybook": "0.8.0", "image-size": "^1.0.2", "lint-staged": "^15.2.5", "mdast-util-toc": "^7.0.0", "minimist": "^1.2.8", "plaiceholder": "^3.0.0", "polished": "^4.2.2", + "postcss": "^8.4.39", + "prettier-plugin-tailwindcss": "^0.6.5", "raw-loader": "^4.0.2", "storybook": "8.1.10", "storybook-react-i18next": "3.1.1", + "tailwindcss": "^3.4.4", "ts-node": "^10.9.1", "tsconfig-paths-webpack-plugin": "4.1.0", "typescript": "^5.5.2", @@ -109,4 +140,4 @@ "jackspeak": "2.1.1", "sharp": "0.32.6" } -} \ No newline at end of file +} diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 00000000000..33ad091d26d --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx new file mode 100644 index 00000000000..40d7fcac563 --- /dev/null +++ b/src/components/ui/accordion.tsx @@ -0,0 +1,58 @@ +"use client" + +import * as React from "react" +import { ChevronDown } from "lucide-react" +import * as AccordionPrimitive from "@radix-ui/react-accordion" + +import { cn } from "@/lib/utils/cn" + +const Accordion = AccordionPrimitive.Root + +const AccordionItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AccordionItem.displayName = "AccordionItem" + +const AccordionTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + svg]:eth-rotate-180", + className + )} + {...props} + > + {children} + + + +)) +AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName + +const AccordionContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + +
{children}
+ +)) + +AccordionContent.displayName = AccordionPrimitive.Content.displayName + +export { Accordion, AccordionContent,AccordionItem, AccordionTrigger } diff --git a/src/components/ui/alert-dialog.tsx b/src/components/ui/alert-dialog.tsx new file mode 100644 index 00000000000..47d39a28cd1 --- /dev/null +++ b/src/components/ui/alert-dialog.tsx @@ -0,0 +1,142 @@ +"use client" + +import * as React from "react" +import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog" + +import { buttonVariants } from "@/components/ui/button" + +import { cn } from "@/lib/utils/cn" + +const AlertDialog = AlertDialogPrimitive.Root + +const AlertDialogTrigger = AlertDialogPrimitive.Trigger + +const AlertDialogPortal = AlertDialogPrimitive.Portal + +const AlertDialogOverlay = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName + +const AlertDialogContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + + +)) +AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName + +const AlertDialogHeader = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +AlertDialogHeader.displayName = "AlertDialogHeader" + +const AlertDialogFooter = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +AlertDialogFooter.displayName = "AlertDialogFooter" + +const AlertDialogTitle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName + +const AlertDialogDescription = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogDescription.displayName = + AlertDialogPrimitive.Description.displayName + +const AlertDialogAction = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName + +const AlertDialogCancel = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName + +export { + AlertDialog, + AlertDialogAction, + AlertDialogCancel, + AlertDialogContent, + AlertDialogDescription, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogOverlay, + AlertDialogPortal, + AlertDialogTitle, + AlertDialogTrigger, +} diff --git a/src/components/ui/alert.tsx b/src/components/ui/alert.tsx new file mode 100644 index 00000000000..d1e38586607 --- /dev/null +++ b/src/components/ui/alert.tsx @@ -0,0 +1,59 @@ +import * as React from "react" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils/cn" + +const alertVariants = cva( + "eth-relative eth-w-full eth-rounded-lg eth-border eth-p-4 [&>svg~*]:eth-pl-7 [&>svg+div]:eth-translate-y-[-3px] [&>svg]:eth-absolute [&>svg]:eth-left-4 [&>svg]:eth-top-4 [&>svg]:eth-text-foreground", + { + variants: { + variant: { + default: "eth-bg-background eth-text-foreground", + destructive: + "eth-border-destructive/50 eth-text-destructive dark:eth-border-destructive [&>svg]:eth-text-destructive", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) + +const Alert = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes & VariantProps +>(({ className, variant, ...props }, ref) => ( +
+)) +Alert.displayName = "Alert" + +const AlertTitle = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +AlertTitle.displayName = "AlertTitle" + +const AlertDescription = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +AlertDescription.displayName = "AlertDescription" + +export { Alert, AlertDescription,AlertTitle } diff --git a/src/components/ui/avatar.tsx b/src/components/ui/avatar.tsx new file mode 100644 index 00000000000..51f6351b450 --- /dev/null +++ b/src/components/ui/avatar.tsx @@ -0,0 +1,50 @@ +"use client" + +import * as React from "react" +import * as AvatarPrimitive from "@radix-ui/react-avatar" + +import { cn } from "@/lib/utils/cn" + +const Avatar = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +Avatar.displayName = AvatarPrimitive.Root.displayName + +const AvatarImage = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AvatarImage.displayName = AvatarPrimitive.Image.displayName + +const AvatarFallback = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName + +export { Avatar, AvatarFallback,AvatarImage } diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx new file mode 100644 index 00000000000..3aaba233942 --- /dev/null +++ b/src/components/ui/badge.tsx @@ -0,0 +1,36 @@ +import * as React from "react" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils/cn" + +const badgeVariants = cva( + "eth-inline-flex eth-items-center eth-rounded-full eth-border eth-px-2.5 eth-py-0.5 eth-text-xs eth-font-semibold eth-transition-colors focus:eth-outline-none focus:eth-ring-2 focus:eth-ring-ring focus:eth-ring-offset-2", + { + variants: { + variant: { + default: + "eth-border-transparent eth-bg-primary eth-text-primary-foreground hover:eth-bg-primary/80", + secondary: + "eth-border-transparent eth-bg-secondary eth-text-secondary-foreground hover:eth-bg-secondary/80", + destructive: + "eth-border-transparent eth-bg-destructive eth-text-destructive-foreground hover:eth-bg-destructive/80", + outline: "eth-text-foreground", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) + +export interface BadgeProps + extends React.HTMLAttributes, + VariantProps {} + +function Badge({ className, variant, ...props }: BadgeProps) { + return ( +
+ ) +} + +export { Badge, badgeVariants } diff --git a/src/components/ui/breadcrumb.tsx b/src/components/ui/breadcrumb.tsx new file mode 100644 index 00000000000..0d680a1db8a --- /dev/null +++ b/src/components/ui/breadcrumb.tsx @@ -0,0 +1,115 @@ +import * as React from "react" +import { ChevronRight, MoreHorizontal } from "lucide-react" +import { Slot } from "@radix-ui/react-slot" + +import { cn } from "@/lib/utils/cn" + +const Breadcrumb = React.forwardRef< + HTMLElement, + React.ComponentPropsWithoutRef<"nav"> & { + separator?: React.ReactNode + } +>(({ ...props }, ref) =>