Implementing design system

app/components/index.ts

@@ -1,3 +1,41 @@
+export {
+	Button,
+	buttonVariants,
+	type ButtonProps,
+	Checkbox,
+	type CheckboxProps,
+	DropdownMenu,
+	DropdownMenuTrigger,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuCheckboxItem,
+	DropdownMenuRadioItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuShortcut,
+	DropdownMenuGroup,
+	DropdownMenuPortal,
+	DropdownMenuSub,
+	DropdownMenuSubContent,
+	DropdownMenuSubTrigger,
+	DropdownMenuRadioGroup,
+	Input,
+	type InputProps,
+	Label,
+	Textarea,
+	type TextareaProps,
+	Tooltip,
+	TooltipTrigger,
+	TooltipContent,
+	TooltipProvider,
+	CheckboxField,
+	Errors,
+	ErrorList,
+	type ListOfErrors,
+	Field,
+	TextareaField,
+} from '@pppaaattt/goodui'
+
 export * from './ui/index.ts'
 export * from './layout/index.ts'
 export * from './templates/index.ts'

app/components/ui/custom/index.ts

@@ -1,6 +1,6 @@
-export * from './checkbox-field.tsx'
-export * from './errors.tsx'
-export * from './field.tsx'
+// export * from './checkbox-field.tsx'
+// export * from './errors.tsx'
+// export * from './field.tsx'
 export * from './icon.tsx'
 export * from './status-button.tsx'
-export * from './textarea-field.tsx'
+// export * from './textarea-field.tsx'

app/components/ui/index.ts

@@ -1,2 +1,2 @@
+// export * from './primitives/index.ts'
 export * from './custom/index.ts'
-export * from './primitives/index.ts'

app/components/ui/primitives/button.tsx

@@ -1,58 +1,60 @@
-import { Slot } from '@radix-ui/react-slot'
-import { cva, type VariantProps } from 'class-variance-authority'
-import * as React from 'react'
+// if I delete this file the buttons won't work, commenting out works fine ',:|
 
-import { cn } from '#app/utils/misc.tsx'
+// import { Slot } from '@radix-ui/react-slot'
+// import { cva, type VariantProps } from 'class-variance-authority'
+// import * as React from 'react'
 
-const buttonVariants = cva(
-	'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors outline-none focus-visible:ring-4 focus-within:ring-4 ring-ring ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
-	{
-		variants: {
-			variant: {
-				default: 'bg-primary text-primary-foreground hover:bg-primary/80',
-				destructive:
-					'bg-destructive text-destructive-foreground hover:bg-destructive/80',
-				outline:
-					'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-				secondary:
-					'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-				ghost: 'hover:bg-accent hover:text-accent-foreground',
-				link: 'text-primary underline-offset-4 hover:underline',
-			},
-			size: {
-				default: 'h-10 px-4 py-2',
-				wide: 'px-24 py-5',
-				sm: 'h-9 rounded-md px-3',
-				lg: 'h-11 rounded-md px-8',
-				pill: 'px-12 py-3 leading-3',
-				icon: 'h-10 w-10',
-			},
-		},
-		defaultVariants: {
-			variant: 'default',
-			size: 'default',
-		},
-	},
-)
+// import { cn } from '#app/utils/misc.tsx'
 
-export interface ButtonProps
-	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-		VariantProps<typeof buttonVariants> {
-	asChild?: boolean
-}
+// const buttonVariants = cva(
+// 	'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors outline-none focus-visible:ring-4 focus-within:ring-4 ring-ring ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+// 	{
+// 		variants: {
+// 			variant: {
+// 				default: 'bg-primary text-primary-foreground hover:bg-primary/80',
+// 				destructive:
+// 					'bg-destructive text-destructive-foreground hover:bg-destructive/80',
+// 				outline:
+// 					'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+// 				secondary:
+// 					'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+// 				ghost: 'hover:bg-accent hover:text-accent-foreground',
+// 				link: 'text-primary underline-offset-4 hover:underline',
+// 			},
+// 			size: {
+// 				default: 'h-10 px-4 py-2',
+// 				wide: 'px-24 py-5',
+// 				sm: 'h-9 rounded-md px-3',
+// 				lg: 'h-11 rounded-md px-8',
+// 				pill: 'px-12 py-3 leading-3',
+// 				icon: 'h-10 w-10',
+// 			},
+// 		},
+// 		defaultVariants: {
+// 			variant: 'default',
+// 			size: 'default',
+// 		},
+// 	},
+// )
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-	({ className, variant, size, asChild = false, ...props }, ref) => {
-		const Comp = asChild ? Slot : 'button'
-		return (
-			<Comp
-				className={cn(buttonVariants({ variant, size, className }))}
-				ref={ref}
-				{...props}
-			/>
-		)
-	},
-)
-Button.displayName = 'Button'
+// export interface ButtonProps
+// 	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+// 		VariantProps<typeof buttonVariants> {
+// 	asChild?: boolean
+// }
 
-export { Button, buttonVariants }
+// const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+// 	({ className, variant, size, asChild = false, ...props }, ref) => {
+// 		const Comp = asChild ? Slot : 'button'
+// 		return (
+// 			<Comp
+// 				className={cn(buttonVariants({ variant, size, className }))}
+// 				ref={ref}
+// 				{...props}
+// 			/>
+// 		)
+// 	},
+// )
+// Button.displayName = 'Button'
+
+// export { Button, buttonVariants }

app/components/ui/primitives/index.ts

@@ -1,7 +1,7 @@
-export * from './button.tsx'
-export * from './checkbox.tsx'
-export * from './dropdown-menu.tsx'
-export * from './input.tsx'
-export * from './label.tsx'
-export * from './textarea.tsx'
-export * from './tooltip.tsx'
+// export * from './button.tsx'
+// export * from './checkbox.tsx'
+// export * from './dropdown-menu.tsx'
+// export * from './input.tsx'
+// export * from './label.tsx'
+// export * from './textarea.tsx'
+// export * from './tooltip.tsx'

package.json

@@ -48,6 +48,7 @@
     "@epic-web/totp": "^1.1.1",
     "@nasa-gcn/remix-seo": "^2.0.0",
     "@paralleldrive/cuid2": "^2.2.2",
+    "@pppaaattt/goodui": "^0.0.16",
     "@prisma/client": "^5.3.1",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
@@ -164,4 +165,4 @@
   "prisma": {
     "seed": "tsx prisma/seed.ts"
   }
-}
+}