[filigran-ui/filigran-website] launch prettier

packages/filigran-ui/package.json

@@ -15,13 +15,16 @@
     "dist"
   ],
   "scripts": {
-    "build": "rimraf dist && tsup"
+    "build": "rimraf dist && tsup",
+    "prettier": "prettier . --write"
   },
   "devDependencies": {
     "@types/react": "18.2.69",
     "@types/react-dom": "^18.2.22",
     "autoprefixer": "10.4.19",
     "postcss": "8.4.38",
+    "prettier": "^3.3.2",
+    "prettier-plugin-tailwindcss": "^0.6.5",
     "tailwindcss": "3.4.1",
     "tsup": "8.0.2",
     "typescript": "5.4.3"
@@ -78,5 +81,19 @@
       "types": "./dist/components/servers/index.d.ts"
     },
     "./theme.css": "./dist/index.css"
+  },
+  "prettier": {
+    "printWidth": 80,
+    "semi": false,
+    "bracketSameLine": true,
+    "trailingComma": "es5",
+    "tabWidth": 2,
+    "singleQuote": true,
+    "bracketSpacing": false,
+    "arrowParens": "always",
+    "singleAttributePerLine": true,
+    "plugins": [
+      "prettier-plugin-tailwindcss"
+    ]
   }
 }

packages/filigran-ui/src/components/clients/accordion.tsx

@@ -5,7 +5,6 @@ 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<

packages/filigran-ui/src/components/clients/alert-dialog.tsx

@@ -1,11 +1,10 @@
-"use client"
+'use client'
 
-import * as React from "react"
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+import * as React from 'react'
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'
 import {cn} from '../../lib/utils'
 import {buttonVariants} from '../servers'
 
-
 const AlertDialog = AlertDialogPrimitive.Root
 
 const AlertDialogTrigger = AlertDialogPrimitive.Trigger
@@ -15,10 +14,10 @@ const AlertDialogPortal = AlertDialogPrimitive.Portal
 const AlertDialogOverlay = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
+>(({className, ...props}, ref) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      'fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
       className
     )}
     {...props}
@@ -30,13 +29,13 @@ AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
 const AlertDialogContent = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
->(({ className, ...props }, ref) => (
+>(({className, ...props}, ref) => (
   <AlertDialogPortal>
     <AlertDialogOverlay />
     <AlertDialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
         className
       )}
       {...props}
@@ -51,35 +50,35 @@ const AlertDialogHeader = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
+      'flex flex-col space-y-2 text-center sm:text-left',
       className
     )}
     {...props}
   />
 )
-AlertDialogHeader.displayName = "AlertDialogHeader"
+AlertDialogHeader.displayName = 'AlertDialogHeader'
 
 const AlertDialogFooter = ({
   className,
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
     className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
       className
     )}
     {...props}
   />
 )
-AlertDialogFooter.displayName = "AlertDialogFooter"
+AlertDialogFooter.displayName = 'AlertDialogFooter'
 
 const AlertDialogTitle = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Title>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
->(({ className, ...props }, ref) => (
+>(({className, ...props}, ref) => (
   <AlertDialogPrimitive.Title
     ref={ref}
-    className={cn("text-lg font-semibold", className)}
+    className={cn('text-lg font-semibold', className)}
     {...props}
   />
 ))
@@ -88,10 +87,10 @@ AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
 const AlertDialogDescription = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Description>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
->(({ className, ...props }, ref) => (
+>(({className, ...props}, ref) => (
   <AlertDialogPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn('text-sm text-muted-foreground', className)}
     {...props}
   />
 ))
@@ -101,7 +100,7 @@ AlertDialogDescription.displayName =
 const AlertDialogAction = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Action>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
->(({ className, ...props }, ref) => (
+>(({className, ...props}, ref) => (
   <AlertDialogPrimitive.Action
     ref={ref}
     className={cn(buttonVariants(), className)}
@@ -113,12 +112,12 @@ AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
 const AlertDialogCancel = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
   React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
->(({ className, ...props }, ref) => (
+>(({className, ...props}, ref) => (
   <AlertDialogPrimitive.Cancel
     ref={ref}
     className={cn(
-      buttonVariants({ variant: "outline" }),
-      "mt-2 sm:mt-0",
+      buttonVariants({variant: 'outline'}),
+      'mt-2 sm:mt-0',
       className
     )}
     {...props}

packages/filigran-ui/src/components/clients/checkbox.tsx

@@ -1,30 +1,28 @@
-"use client"
+'use client'
 
-import * as React from "react"
-import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
-import { Check } from "lucide-react"
+import * as React from 'react'
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
+import {Check} from 'lucide-react'
 
 import {cn} from '../../lib/utils'
 
 const Checkbox = React.forwardRef<
   React.ElementRef<typeof CheckboxPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
+>(({className, ...props}, ref) => (
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
       className
     )}
-    {...props}
-  >
+    {...props}>
     <CheckboxPrimitive.Indicator
-      className={cn("flex items-center justify-center text-current")}
-    >
+      className={cn('flex items-center justify-center text-current')}>
       <Check className="h-4 w-4" />
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ))
 Checkbox.displayName = CheckboxPrimitive.Root.displayName
 
-export { Checkbox }
+export {Checkbox}

packages/filigran-ui/src/components/clients/combobox.tsx

@@ -1,28 +1,28 @@
-"use client";
+'use client'
 
-import * as React from "react";
-import { Check, ChevronDown } from "lucide-react";
+import * as React from 'react'
+import {Check, ChevronDown} from 'lucide-react'
 
-import { cn } from "../../lib/utils";
+import {cn} from '../../lib/utils'
 
-import { Popover, PopoverContent, PopoverTrigger } from "./popover";
-import { Button } from "../servers";
+import {Popover, PopoverContent, PopoverTrigger} from './popover'
+import {Button} from '../servers'
 import {
   Command,
   CommandEmpty,
   CommandGroup,
   CommandInput,
   CommandItem,
   CommandList,
-} from "./command";
+} from './command'
 
 interface ComboboxProps {
-  dataTab: { value: string; label: string }[];
-  order: string;
-  placeholder: string;
-  emptyCommand: string;
-  onValueChange: (value: string) => void;
-  value?: string;
+  dataTab: {value: string; label: string}[]
+  order: string
+  placeholder: string
+  emptyCommand: string
+  onValueChange: (value: string) => void
+  value?: string
 }
 
 function Combobox({
@@ -31,26 +31,27 @@ function Combobox({
   placeholder,
   emptyCommand,
   onValueChange,
-  value = "",
+  value = '',
 }: ComboboxProps) {
-  const [open, setOpen] = React.useState(false);
+  const [open, setOpen] = React.useState(false)
 
   const handleSelect = (currentValue: string) => {
-    const newValue = currentValue === value ? "" : currentValue;
-    setOpen(false);
-    onValueChange(newValue);
-  };
+    const newValue = currentValue === value ? '' : currentValue
+    setOpen(false)
+    onValueChange(newValue)
+  }
 
   return (
-    <Popover open={open} onOpenChange={setOpen}>
+    <Popover
+      open={open}
+      onOpenChange={setOpen}>
       <PopoverTrigger asChild>
         <Button
           variant="outline"
           role="combobox"
           aria-expanded={open}
           className="w-[200px] justify-between"
-          onClick={() => setOpen(!open)}
-        >
+          onClick={() => setOpen(!open)}>
           {value ? dataTab.find((data) => data.value === value)?.label : order}
           <ChevronDown className="h-4 cursor-pointer text-muted-foreground" />
         </Button>
@@ -65,15 +66,14 @@ function Combobox({
                 <CommandItem
                   key={data.value}
                   value={data.value}
-                  onSelect={() => handleSelect(data.value)}
-                >
+                  onSelect={() => handleSelect(data.value)}>
                   <Check
                     className={cn(
-                      "mr-2 h-4 w-4",
-                      value === data.value ? "opacity-100" : "opacity-0",
+                      'mr-2 h-4 w-4',
+                      value === data.value ? 'opacity-100' : 'opacity-0'
                     )}
                   />
-                  <span className="text-sm text-muted-foreground mx-3">
+                  <span className="mx-3 text-sm text-muted-foreground">
                     {data.label}
                   </span>
                 </CommandItem>
@@ -83,7 +83,7 @@ function Combobox({
         </Command>
       </PopoverContent>
     </Popover>
-  );
+  )
 }
 
-export { Combobox };
+export {Combobox}