Merge pull request #13397 from ethereum/prettier-lintstaged

Prettier + lintstaged

Author: minimalsm

.lintstagedrc.js

@@ -5,6 +5,8 @@ const buildEslintCommand = (filenames) =>
     .map((f) => path.relative(process.cwd(), f))
     .join(" --file ")}`
 
+const formatCommand = "prettier --write"
+
 module.exports = {
-  "*.{js,jsx,ts,tsx}": [buildEslintCommand],
+  "*.{js,jsx,ts,tsx}": [buildEslintCommand, formatCommand],
 }

.storybook/main.ts

@@ -25,13 +25,13 @@ const config: StorybookConfig = {
     {
       name: "@storybook/addon-essentials",
       options: {
-        backgrounds: false
-      }
+        backgrounds: false,
+      },
     },
     "@storybook/addon-interactions",
     "storybook-react-i18next",
     "@storybook/addon-themes",
-    "@chromatic-com/storybook"
+    "@chromatic-com/storybook",
   ],
   staticDirs: ["../public"],
   framework: {
@@ -79,7 +79,7 @@ const config: StorybookConfig = {
       },
     },
 
-    reactDocgen: "react-docgen-typescript"
+    reactDocgen: "react-docgen-typescript",
   },
 }
 export default config

.storybook/types.ts

@@ -11,8 +11,8 @@ import type { ArgTypes } from "@storybook/react"
 type KeyOf<T> = [T] extends [never]
   ? never
   : T extends object
-  ? Extract<keyof T, string>
-  : never
+    ? Extract<keyof T, string>
+    : never
 
 export type ThemingArgTypeKey = "variant" | "size"
 
@@ -49,8 +49,10 @@ export type ThemingArgTypeKey = "variant" | "size"
  * @param componentName component name to create the ArgTypes for
  */
 export function getThemingArgTypes<
-  Theme extends Record<string, unknown> & { components?: Record<string, StyleConfig> },
-  ComponentName extends KeyOf<Theme["components"]>
+  Theme extends Record<string, unknown> & {
+    components?: Record<string, StyleConfig>
+  },
+  ComponentName extends KeyOf<Theme["components"]>,
 >(theme: Theme, componentName: ComponentName) {
   const component = theme.components?.[componentName]
   if (!component) {

package.json

@@ -10,7 +10,7 @@
     "start": "next start",
     "lint": "next lint",
     "lint:fix": "next lint --fix",
-    "format": "prettier --write .",
+    "format": "prettier \"**/*.{js,jsx,ts,tsx}\" --write",
     "preversion": "bash ./src/scripts/updatePublishDate.sh",
     "crowdin-contributors": "ts-node -O '{ \"module\": \"commonjs\" }' src/scripts/crowdin/getCrowdinContributors.ts",
     "storybook": "storybook dev -p 6006",
@@ -109,7 +109,7 @@
     "plaiceholder": "^3.0.0",
     "polished": "^4.2.2",
     "postcss": "^8.4.39",
-    "prettier": "3.3.2",
+    "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.5",
     "raw-loader": "^4.0.2",
     "storybook": "8.1.10",

src/@chakra-ui/components/Popover.ts

@@ -35,8 +35,8 @@ const baseStyle = definePartsStyle(
       maxWidth: "xs", // 20rem
       lineHeight: "base",
       w: "auto",
-      _focusVisible: { 
-        boxShadow: 'none',
+      _focusVisible: {
+        boxShadow: "none",
       },
     },
     body: {

src/@chakra-ui/stories/Colors.stories.tsx

@@ -79,8 +79,8 @@ const ColorGroupWrapper = ({
         color === "gray"
           ? `linear-gradient(180deg, #1b1b1b 35%, #fff 35%)`
           : color === "orange"
-          ? "gray.800"
-          : undefined
+            ? "gray.800"
+            : undefined
       }
     >
       {children}
@@ -131,12 +131,12 @@ export const SemanticScheme: StoryObj = {
           const tokenObj = semanticTokenColors[tokenName]
 
           const filteredTokenObj =
-          "base" in tokenObj
-          ? Object.keys(semanticTokens["colors"][tokenName]).filter(
-            (key) => !currentDeprecatedTokens.includes(key)
-          )
+            "base" in tokenObj
+              ? Object.keys(semanticTokens["colors"][tokenName]).filter(
+                  (key) => !currentDeprecatedTokens.includes(key)
+                )
               : undefined
-          
+
           return (
             <Flex key={tokenName} direction="column" gap="4">
               <Heading>{capitalize(tokenName)}</Heading>
@@ -180,6 +180,8 @@ const SemanticColorBlock = ({
       size="20"
       bg={tokenName === nestedKey ? tokenName : `${tokenName}.${nestedKey}`}
     />
-    <Text>{tokenName}.{nestedKey}</Text>
+    <Text>
+      {tokenName}.{nestedKey}
+    </Text>
   </Flex>
 )

src/components/ActionCard.tsx

@@ -7,7 +7,7 @@ import {
   Heading,
   LinkBox,
   type LinkBoxProps,
-  LinkOverlay
+  LinkOverlay,
 } from "@chakra-ui/react"
 
 import { Image } from "@/components/Image"

src/components/Banners/DismissableBanner/index.tsx

@@ -28,9 +28,13 @@ const DismissableBanner = ({
   }
 
   return (
-    <BannerNotification shouldShow={show} gap='8'>
-      <Center marginInlineStart='auto'>{children}</Center>
-      <CloseButton marginInlineStart='auto' onClick={onClose} aria-label="Close Banner" />
+    <BannerNotification shouldShow={show} gap="8">
+      <Center marginInlineStart="auto">{children}</Center>
+      <CloseButton
+        marginInlineStart="auto"
+        onClick={onClose}
+        aria-label="Close Banner"
+      />
     </BannerNotification>
   )
 }

src/components/ButtonDropdown.tsx

@@ -121,4 +121,4 @@ const ButtonDropdown = ({ list, ...rest }: ButtonDropdownProps) => {
   )
 }
 
-export default ButtonDropdown
+export default ButtonDropdown

src/components/DataProductCard.tsx

@@ -1,12 +1,6 @@
 import React from "react"
 import { StaticImageData } from "next/image"
-import {
-  Box,
-  Flex,
-  Heading,
-  LinkBox,
-  LinkOverlay,
-} from "@chakra-ui/react"
+import { Box, Flex, Heading, LinkBox, LinkOverlay } from "@chakra-ui/react"
 
 import { Image } from "@/components/Image"