Merge pull request #15 from thomasKn/prettier

Prettier format

.prettierignore

@@ -0,0 +1 @@
+pnpm-lock.yaml

app/components/QuantitySelector.tsx

@@ -2,7 +2,7 @@ import {cx} from 'class-variance-authority';
 
 export function QuantitySelector(props: {children: React.ReactNode}) {
   return (
-    <div className="border-border flex items-center rounded border">
+    <div className="flex items-center rounded border border-border">
       {props.children}
     </div>
   );

app/components/collection/SortFilter.tsx

@@ -70,7 +70,7 @@ export function SortFilter({
       <div className="flex w-full items-center justify-between">
         <button
           className={
-            'focus:ring-primary/5 relative flex size-8 items-center justify-center'
+            'relative flex size-8 items-center justify-center focus:ring-primary/5'
           }
           onClick={() => setIsOpen(!isOpen)}
         >

app/components/layout/CartCount.tsx

@@ -89,8 +89,8 @@ function Badge(props: {cart?: CartType | null; count: number}) {
   return isHydrated ? (
     <Sheet onOpenChange={setCartOpen} open={cartOpen}>
       <SheetTrigger className={buttonClass}>{BadgeCounter}</SheetTrigger>
-      <SheetContent className="bg-background text-foreground flex max-h-screen min-h-full w-screen flex-col gap-0 p-0 sm:max-w-lg">
-        <SheetHeader className="shadow-foreground/10 px-6 py-5 shadow-sm">
+      <SheetContent className="flex max-h-screen min-h-full w-screen flex-col gap-0 bg-background p-0 text-foreground sm:max-w-lg">
+        <SheetHeader className="px-6 py-5 shadow-sm shadow-foreground/10">
           <SheetTitle className="flex items-center gap-4">
             <span>{themeContent?.cart.heading}</span>
             {cartIsLoading && <IconLoader className="animate-spin" />}

app/components/sanity/link/SanityExternalLink.tsx

@@ -20,7 +20,7 @@ export function SanityExternalLink(props: {
   return link ? (
     <a
       className={cn([
-        'focus-visible:ring-ring focus-visible:rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2',
+        'focus-visible:rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
         className,
       ])}
       href={link}

app/components/sanity/richtext/RichTextLayout.tsx

@@ -35,7 +35,7 @@ export function RichtextLayout(props: {
           required: cleanContentPosition,
         }),
         'max-w-[var(--maxWidth)] space-y-2 overflow-hidden',
-        '[&_blockquote]:border-border [&_blockquote]:border-l-2 [&_blockquote]:pl-6 [&_blockquote]:italic',
+        '[&_blockquote]:border-l-2 [&_blockquote]:border-border [&_blockquote]:pl-6 [&_blockquote]:italic',
         '[&_ul>li]:mt-2 [&_ul]:list-inside [&_ul]:list-disc',
         '[&_ol>li]:mt-2 [&_ol]:list-inside [&_ol]:list-decimal',
       ])}

app/components/ui/Card.tsx

@@ -5,7 +5,7 @@ const Card = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({className, ...props}, ref) => (
     <div
       className={cn(
-        'bg-card text-card-foreground rounded-lg border shadow-sm',
+        'rounded-lg border bg-card text-card-foreground shadow-sm',
         className,
       )}
       data-type="card"
@@ -48,7 +48,7 @@ const CardDescription = forwardRef<
   React.HTMLAttributes<HTMLParagraphElement>
 >(({className, ...props}, ref) => (
   <p
-    className={cn('text-muted-foreground text-sm', className)}
+    className={cn('text-sm text-muted-foreground', className)}
     ref={ref}
     {...props}
   />

app/components/ui/DropdownMenu.tsx

@@ -27,7 +27,7 @@ const DropdownMenuSubTrigger = forwardRef<
 >(({children, className, inset, ...props}, ref) => (
   <DropdownMenuPrimitive.SubTrigger
     className={cn(
-      'focus:bg-accent data-[state=open]:bg-accent flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none',
+      'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
       inset && 'pl-8',
       className,
     )}
@@ -47,7 +47,7 @@ const DropdownMenuSubContent = forwardRef<
 >(({className, ...props}, ref) => (
   <DropdownMenuPrimitive.SubContent
     className={cn(
-      'bg-popover text-popover-foreground z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
       className,
     )}
     ref={ref}
@@ -64,7 +64,7 @@ const DropdownMenuContent = forwardRef<
   <DropdownMenuPrimitive.Portal>
     <DropdownMenuPrimitive.Content
       className={cn(
-        'bg-popover text-popover-foreground z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         className,
       )}
       ref={ref}
@@ -83,7 +83,7 @@ const DropdownMenuItem = forwardRef<
 >(({className, inset, ...props}, ref) => (
   <DropdownMenuPrimitive.Item
     className={cn(
-      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       inset && 'pl-8',
       className,
     )}
@@ -100,7 +100,7 @@ const DropdownMenuCheckboxItem = forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     checked={checked}
     className={cn(
-      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className,
     )}
     ref={ref}
@@ -123,7 +123,7 @@ const DropdownMenuRadioItem = forwardRef<
 >(({children, className, ...props}, ref) => (
   <DropdownMenuPrimitive.RadioItem
     className={cn(
-      'focus:bg-accent focus:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className,
     )}
     ref={ref}
@@ -162,7 +162,7 @@ const DropdownMenuSeparator = forwardRef<
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
 >(({className, ...props}, ref) => (
   <DropdownMenuPrimitive.Separator
-    className={cn('bg-muted -mx-1 my-1 h-px', className)}
+    className={cn('-mx-1 my-1 h-px bg-muted', className)}
     ref={ref}
     {...props}
   />

app/components/ui/Input.tsx

@@ -10,7 +10,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
     return (
       <input
         className={cn(
-          'border-input bg-background ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+          'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
           className,
         )}
         ref={ref}

app/components/ui/Sheet.tsx

@@ -66,7 +66,7 @@ const SheetContent = forwardRef<
       {...props}
     >
       {children}
-      <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
         <IconClose />
         <span className="sr-only">Close</span>
       </SheetPrimitive.Close>
@@ -108,7 +108,7 @@ const SheetTitle = forwardRef<
   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
 >(({className, ...props}, ref) => (
   <SheetPrimitive.Title
-    className={cn('text-foreground text-lg font-semibold', className)}
+    className={cn('text-lg font-semibold text-foreground', className)}
     ref={ref}
     {...props}
   />
@@ -120,7 +120,7 @@ const SheetDescription = forwardRef<
   React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
 >(({className, ...props}, ref) => (
   <SheetPrimitive.Description
-    className={cn('text-muted-foreground text-sm', className)}
+    className={cn('text-sm text-muted-foreground', className)}
     ref={ref}
     {...props}
   />

studio/components/ColorScheme.tsx

@@ -1,11 +1,11 @@
-import {Flex, Text} from '@sanity/ui'
+import {Flex, Text} from '@sanity/ui';
 
 export function ColorSchemeMedia({
   foreground,
   background,
 }: {
-  foreground?: {hex: string}
-  background?: {hex: string}
+  foreground?: {hex: string};
+  background?: {hex: string};
 }) {
   return background?.hex && foreground?.hex ? (
     <Flex
@@ -33,7 +33,7 @@ export function ColorSchemeMedia({
         </Flex>
       </Flex>
     </Flex>
-  ) : null
+  ) : null;
 }
 
 function Pill({full, hex}: {full?: boolean; hex: string}) {
@@ -48,5 +48,5 @@ function Pill({full, hex}: {full?: boolean; hex: string}) {
         borderColor: hex,
       }}
     ></div>
-  )
+  );
 }

studio/components/SectionsListInput.tsx

@@ -1,4 +1,4 @@
-import type {MouseEventHandler} from 'react'
+import type {MouseEventHandler} from 'react';
 import {
   ArrayOfPrimitivesFunctions,
   type ArrayOfObjectsInputProps,
@@ -8,34 +8,34 @@ import {
   type ObjectSchemaType,
   type ReferenceSchemaType,
   type StringSchemaType,
-} from 'sanity'
+} from 'sanity';
 
-import {useCallback, useState} from 'react'
-import {Grid, Stack, Button, Dialog, Box, Card, Heading} from '@sanity/ui'
-import {AddIcon} from '@sanity/icons'
-import {randomKey} from '@sanity/util/content'
+import {useCallback, useState} from 'react';
+import {Grid, Stack, Button, Dialog, Box, Card, Heading} from '@sanity/ui';
+import {AddIcon} from '@sanity/icons';
+import {randomKey} from '@sanity/util/content';
 
 type Schema =
   | BooleanSchemaType
   | FileSchemaType
   | NumberSchemaType
   | ObjectSchemaType
   | StringSchemaType
-  | ReferenceSchemaType
+  | ReferenceSchemaType;
 
 const SectionsListInput = (
   props: ArrayOfObjectsInputProps & {
-    type?: 'section' | 'footer'
-  }
+    type?: 'section' | 'footer';
+  },
 ) => {
-  const {onInsert} = props
-  const [open, setOpen] = useState(false)
-  const onClose = useCallback(() => setOpen(false), [])
-  const onOpen = useCallback(() => setOpen(true), [])
-  const type = props.type || 'section'
+  const {onInsert} = props;
+  const [open, setOpen] = useState(false);
+  const onClose = useCallback(() => setOpen(false), []);
+  const onOpen = useCallback(() => setOpen(true), []);
+  const type = props.type || 'section';
 
   const onSelectItem = useCallback((schema: Schema) => {
-    const key = randomKey(12)
+    const key = randomKey(12);
     onInsert({
       items: [
         {
@@ -46,17 +46,17 @@ const SectionsListInput = (
       position: 'after',
       referenceItem: -1,
       open: true,
-    })
-    onClose()
-  }, [])
+    });
+    onClose();
+  }, []);
 
   return (
     <>
       <Stack space={3}>
         {props.renderDefault({
           ...props,
           arrayFunctions: (props: any) => {
-            return <ArrayFunctions type={type} onOpen={onOpen} {...props} />
+            return <ArrayFunctions type={type} onOpen={onOpen} {...props} />;
           },
         })}
       </Stack>
@@ -79,39 +79,56 @@ const SectionsListInput = (
             >
               {props.schemaType.of.map((schema, index) => {
                 return (
-                  <PreviewCard key={index} schema={schema} onClick={() => onSelectItem(schema)} />
-                )
+                  <PreviewCard
+                    key={index}
+                    schema={schema}
+                    onClick={() => onSelectItem(schema)}
+                  />
+                );
               })}
             </Grid>
           </Box>
         </Dialog>
       )}
     </>
-  )
-}
+  );
+};
 
 function ArrayFunctions(props: any) {
-  const valRules = props?.schemaType?.validation?.[0]?._rules || []
-  const max = valRules.find((r: any) => r.flag === 'max')?.constraint
-  const total = props?.value?.length || 0
+  const valRules = props?.schemaType?.validation?.[0]?._rules || [];
+  const max = valRules.find((r: any) => r.flag === 'max')?.constraint;
+  const total = props?.value?.length || 0;
 
   if (!isNaN(max) && total >= max) {
-    return null
+    return null;
   }
 
-  return <Button onClick={props.onOpen} icon={AddIcon} mode="ghost" text={`Add ${props.type}`} />
+  return (
+    <Button
+      onClick={props.onOpen}
+      icon={AddIcon}
+      mode="ghost"
+      text={`Add ${props.type}`}
+    />
+  );
 }
 
 type PreviewProps = {
-  onClick: MouseEventHandler<HTMLDivElement> | undefined
-  schema: Schema
-}
+  onClick: MouseEventHandler<HTMLDivElement> | undefined;
+  schema: Schema;
+};
 
 function PreviewCard(props: PreviewProps) {
-  const {onClick, schema} = props
+  const {onClick, schema} = props;
 
   return (
-    <Card role="button" shadow={1} padding={3} onClick={onClick} style={{cursor: 'pointer'}}>
+    <Card
+      role="button"
+      shadow={1}
+      padding={3}
+      onClick={onClick}
+      style={{cursor: 'pointer'}}
+    >
       <Stack padding={2} space={[3]}>
         <Heading as="h5" size={1}>
           {schema.title}
@@ -134,7 +151,7 @@ function PreviewCard(props: PreviewProps) {
         </div>
       </Stack>
     </Card>
-  )
+  );
 }
 
-export default SectionsListInput
+export default SectionsListInput;

studio/components/SeoField.tsx

@@ -1,10 +1,10 @@
-import {Badge, Card, Flex, Text} from '@sanity/ui'
+import {Badge, Card, Flex, Text} from '@sanity/ui';
 
-import {StringFieldProps} from 'sanity'
+import {StringFieldProps} from 'sanity';
 
 export const SeoTitle = (props: StringFieldProps) => {
-  const {children, title, description, value = ''} = props
-  const maxLength = 70
+  const {children, title, description, value = ''} = props;
+  const maxLength = 70;
 
   return (
     <Card>
@@ -20,10 +20,14 @@ export const SeoTitle = (props: StringFieldProps) => {
       </Card>
       <Card>{children}</Card>
       <Flex paddingTop={1} justify={'flex-end'}>
-        <Badge mode="outline" tone={value.length > maxLength ? 'critical' : 'primary'} size={1}>
+        <Badge
+          mode="outline"
+          tone={value.length > maxLength ? 'critical' : 'primary'}
+          size={1}
+        >
           {value?.length} / {maxLength}
         </Badge>
       </Flex>
     </Card>
-  )
-}
+  );
+};

studio/components/icons/Blog.tsx

@@ -1,5 +1,5 @@
-import {Newspaper} from 'lucide-react'
+import {Newspaper} from 'lucide-react';
 
 export function IconBlog() {
-  return <Newspaper strokeWidth={1} width="20px" height="20px" />
+  return <Newspaper strokeWidth={1} width="20px" height="20px" />;
 }