Update prettier (#3343)

radix-ui · Jan 22, 2025 · 4611077 · 4611077
1 parent 21c6651
commit 4611077
Show file tree

Hide file tree

Showing 14 changed files with 105 additions and 130 deletions.
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -2,7 +2,7 @@
   body {
     margin: 0 !important;
     padding: 0 !important;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
-      'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
+      sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   }
 </style>
diff --git a/.yarn/versions/89caea12.yml b/.yarn/versions/89caea12.yml
@@ -0,0 +1,6 @@
+declined:
+  - primitives
+  - "@radix-ui/react-dialog"
+  - "@radix-ui/react-navigation-menu"
+  - "@radix-ui/react-presence"
+  - "@radix-ui/react-toast"
diff --git a/package.json b/package.json
@@ -26,7 +26,8 @@
     "reset": "yarn clean && rm -rf node_modules .yarn/cache",
     "bump:stable": "yarn version apply --all",
     "bump:next": "yarn version apply --all --prerelease",
-    "bump:check": "yarn version check"
+    "bump:check": "yarn version check",
+    "format": "prettier --write ."
   },
   "devDependencies": {
     "@chance/eslint": "^1.0.0-beta.7",
@@ -61,8 +62,8 @@
     "husky": "^4.3.6",
     "jsdom": "^26.0.0",
     "lint-staged": "^10.5.3",
-    "prettier": "^2.0.5",
-    "pretty-quick": "^2.0.1",
+    "prettier": "^3.4.2",
+    "pretty-quick": "^4.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-test-renderer": "^19.0.0",
@@ -84,6 +85,7 @@
     "yarn": ">=2"
   },
   "prettier": {
+    "trailingComma": "es5",
     "printWidth": 100,
     "singleQuote": true
   },

diff --git a/packages/react/announce/src/Announce.stories.tsx b/packages/react/announce/src/Announce.stories.tsx
@@ -26,9 +26,12 @@ export function StatusChange() {
   const interval = React.useRef<number | null>(null);
 
   React.useEffect(() => {
-    interval.current = window.setInterval(() => {
-      setFriendIsOnline((s) => !s);
-    }, getRandomInt(6000, 10000));
+    interval.current = window.setInterval(
+      () => {
+        setFriendIsOnline((s) => !s);
+      },
+      getRandomInt(6000, 10000)
+    );
     return () => window.clearInterval(interval.current!);
   }, []);
 

diff --git a/packages/react/dialog/src/Dialog.stories.module.css b/packages/react/dialog/src/Dialog.stories.module.css
@@ -97,7 +97,9 @@
 
 .animatedContent {
   &[data-state='open'] {
-    animation: dialog-fadeIn 150ms ease-out, dialog-scaleIn 200ms ease-out;
+    animation:
+      dialog-fadeIn 150ms ease-out,
+      dialog-scaleIn 200ms ease-out;
   }
   &[data-state='closed'] {
     animation: dialog-fadeOut 300ms ease-in;

diff --git a/packages/react/dropdown-menu/src/DropdownMenu.stories.tsx b/packages/react/dropdown-menu/src/DropdownMenu.stories.tsx
@@ -689,8 +689,8 @@ export const CheckboxItems = () => {
                   selection.length === options.length
                     ? true
                     : selection.length
-                    ? 'indeterminate'
-                    : false
+                      ? 'indeterminate'
+                      : false
                 }
                 onSelect={(e) => e.preventDefault()}
                 onCheckedChange={handleSelectAll}
@@ -1383,14 +1383,14 @@ export const Chromatic = () => {
                   (align === 'start'
                     ? { bottom: 10 }
                     : align === 'center'
-                    ? { top: 'calc(50% - 15px)' }
-                    : { top: 10 })),
+                      ? { top: 'calc(50% - 15px)' }
+                      : { top: 10 })),
                 ...((side === 'top' || side === 'bottom') &&
                   (align === 'start'
                     ? { right: 10 }
                     : align === 'center'
-                    ? { left: 'calc(50% - 15px)' }
-                    : { left: 10 })),
+                      ? { left: 'calc(50% - 15px)' }
+                      : { left: 10 })),
               }}
             />
             <DropdownMenu.Portal>

diff --git a/packages/react/hover-card/src/HoverCard.stories.tsx b/packages/react/hover-card/src/HoverCard.stories.tsx
@@ -687,14 +687,14 @@ export const Chromatic = () => (
                 (align === 'start'
                   ? { bottom: 10 }
                   : align === 'center'
-                  ? { top: 'calc(50% - 15px)' }
-                  : { top: 10 })),
+                    ? { top: 'calc(50% - 15px)' }
+                    : { top: 10 })),
               ...((side === 'top' || side === 'bottom') &&
                 (align === 'start'
                   ? { right: 10 }
                   : align === 'center'
-                  ? { left: 'calc(50% - 15px)' }
-                  : { left: 10 })),
+                    ? { left: 'calc(50% - 15px)' }
+                    : { left: 10 })),
             }}
           />
           <HoverCard.Portal>

diff --git a/packages/react/navigation-menu/src/NavigationMenu.stories.module.css b/packages/react/navigation-menu/src/NavigationMenu.stories.module.css
@@ -159,7 +159,9 @@
   background-color: white;
   padding: 20px;
   transform-origin: top left;
-  box-shadow: 0 10px 100px -20px rgba(50, 50, 93, 0.25), 0 30px 60px -30px rgba(0, 0, 0, 0.3);
+  box-shadow:
+    0 10px 100px -20px rgba(50, 50, 93, 0.25),
+    0 30px 60px -30px rgba(0, 0, 0, 0.3);
   z-index: 1;
 
   [dir='rtl'] & {
@@ -184,7 +186,10 @@
   height: 10px;
   bottom: -30px;
   z-index: 1;
-  transition: transform, width, 250ms ease;
+  transition:
+    transform,
+    width,
+    250ms ease;
   overflow: hidden;
 
   &[data-state='visible'] {
@@ -208,14 +213,19 @@
 .viewportViewport {
   position: relative;
   background-color: white;
-  transition: width, height, 300ms ease;
+  transition:
+    width,
+    height,
+    300ms ease;
   width: var(--radix-navigation-menu-viewport-width);
   height: var(--radix-navigation-menu-viewport-height);
   transform-origin: top center;
   overflow: hidden;
   margin-top: 15px;
   border-radius: 8px;
-  box-shadow: 0 50px 100px -20px rgba(50, 50, 93, 0.25), 0 30px 60px -30px rgba(0, 0, 0, 0.3);
+  box-shadow:
+    0 50px 100px -20px rgba(50, 50, 93, 0.25),
+    0 30px 60px -30px rgba(0, 0, 0, 0.3);
   &[data-state='open'] {
     animation: navigationMenu-scaleIn 300ms ease;
   }
@@ -275,7 +285,9 @@
   height: var(--radix-navigation-menu-viewport-height);
   transition: height 300ms ease;
   overflow: hidden;
-  box-shadow: 0 50px 100px -20px rgba(50, 50, 93, 0.1), 0 30px 60px -30px rgba(0, 0, 0, 0.2);
+  box-shadow:
+    0 50px 100px -20px rgba(50, 50, 93, 0.1),
+    0 30px 60px -30px rgba(0, 0, 0, 0.2);
 
   &[data-state='open'] {
     animation: navigationMenu-fadeIn 250ms ease;
@@ -338,7 +350,10 @@
 
   &[data-orientation='vertical'] {
     width: 3px;
-    transition: transform, height, 250ms ease;
+    transition:
+      transform,
+      height,
+      250ms ease;
     [dir='ltr'] & {
       right: 0;
     }
@@ -350,6 +365,9 @@
   &[data-orientation='horizontal'] {
     height: 3px;
     bottom: 0;
-    transition: transform, width, 250ms ease;
+    transition:
+      transform,
+      width,
+      250ms ease;
   }
 }
diff --git a/packages/react/popover/src/Popover.stories.tsx b/packages/react/popover/src/Popover.stories.tsx
@@ -553,14 +553,14 @@ export const Chromatic = () => (
                 (align === 'start'
                   ? { bottom: 10 }
                   : align === 'center'
-                  ? { top: 'calc(50% - 15px)' }
-                  : { top: 10 })),
+                    ? { top: 'calc(50% - 15px)' }
+                    : { top: 10 })),
               ...((side === 'top' || side === 'bottom') &&
                 (align === 'start'
                   ? { right: 10 }
                   : align === 'center'
-                  ? { left: 'calc(50% - 15px)' }
-                  : { left: 10 })),
+                    ? { left: 'calc(50% - 15px)' }
+                    : { left: 10 })),
             }}
           />
           <Popover.Portal>

diff --git a/packages/react/presence/src/Presence.stories.module.css b/packages/react/presence/src/Presence.stories.module.css
@@ -45,7 +45,8 @@
 }
 
 .multipleMountAnimations {
-  animation: presence-fadeIn 6s cubic-bezier(0.22, 1, 0.36, 1),
+  animation:
+    presence-fadeIn 6s cubic-bezier(0.22, 1, 0.36, 1),
     presence-slideUp 6s cubic-bezier(0.22, 1, 0.36, 1);
 }
 
@@ -60,11 +61,13 @@
 
 .multipleOpenAndCloseAnimations {
   &[data-state='open'] {
-    animation: presence-fadeIn 3s cubic-bezier(0.22, 1, 0.36, 1),
+    animation:
+      presence-fadeIn 3s cubic-bezier(0.22, 1, 0.36, 1),
       presence-slideUp 1s cubic-bezier(0.22, 1, 0.36, 1);
   }
   &[data-state='closed'] {
-    animation: presence-fadeOut 3s cubic-bezier(0.22, 1, 0.36, 1),
+    animation:
+      presence-fadeOut 3s cubic-bezier(0.22, 1, 0.36, 1),
       presence-slideDown 1s cubic-bezier(0.22, 1, 0.36, 1);
   }
 }
diff --git a/packages/react/select/src/Select.stories.tsx b/packages/react/select/src/Select.stories.tsx
@@ -73,10 +73,10 @@ export const Controlled = () => {
                   value === 'fr'
                     ? 'France'
                     : value === 'uk'
-                    ? 'United Kingdom'
-                    : value === 'es'
-                    ? 'Spain'
-                    : undefined
+                      ? 'United Kingdom'
+                      : value === 'es'
+                        ? 'Spain'
+                        : undefined
                 }
               >
                 {value === 'fr' ? '🇫🇷' : value === 'uk' ? '🇬🇧' : value === 'es' ? '🇪🇸' : null}

diff --git a/packages/react/toast/src/Toast.tsx b/packages/react/toast/src/Toast.tsx
@@ -861,7 +861,7 @@ function getAnnounceTextContent(container: HTMLElement) {
 
 function handleAndDispatchCustomEvent<
   E extends CustomEvent,
-  ReactEvent extends React.SyntheticEvent
+  ReactEvent extends React.SyntheticEvent,
 >(
   name: string,
   handler: ((event: E) => void) | undefined,

diff --git a/packages/react/tooltip/src/Tooltip.stories.tsx b/packages/react/tooltip/src/Tooltip.stories.tsx
@@ -1012,14 +1012,14 @@ export const Chromatic = () => (
                   (align === 'start'
                     ? { bottom: 10 }
                     : align === 'center'
-                    ? { top: 'calc(50% - 15px)' }
-                    : { top: 10 })),
+                      ? { top: 'calc(50% - 15px)' }
+                      : { top: 10 })),
                 ...((side === 'top' || side === 'bottom') &&
                   (align === 'start'
                     ? { right: 10 }
                     : align === 'center'
-                    ? { left: 'calc(50% - 15px)' }
-                    : { left: 10 })),
+                      ? { left: 'calc(50% - 15px)' }
+                      : { left: 10 })),
               }}
             />
             <Tooltip.Portal>