fix: fix prettier issue around root folder and vscode plugin (#1258)

Because - Due to lacking of root level prettier configuration, the VSCode plugin always pick the machine default configuration which further causes confusion among developer - The lint-stage configurations are separated into different stage - We prettier all the `js, ts, jsx, tsx` file on the root level lint-stage - We lint all the `js, ts, jsx, tsx` file on the sub-packages level lint-stage - In this way we can make sure the lint-stage catch the nearest eslint configuration within the packages This commit - fix prettier issue around root folder and vscode plugin
instill-ai · Jun 24, 2024 · d3eac49 · d3eac49
1 parent ed29cd2
commit d3eac49
Show file tree

Hide file tree

Showing 366 changed files with 1,023 additions and 991 deletions.
diff --git a/apps/console/package.json b/apps/console/package.json
@@ -94,5 +94,10 @@
   },
   "engines": {
     "node": ">=14.6.0"
+  },
+  "lint-staged": {
+    "**/*.{js,jsx,ts,tsx}": [
+      "eslint --cache --fix"
+    ]
   }
 }
diff --git a/apps/console/src/components/ModelReadmeMarkdown.tsx b/apps/console/src/components/ModelReadmeMarkdown.tsx
@@ -44,7 +44,7 @@ export const ModelReadmeMarkdown = ({
           <h3 className="text-instillGrey90 text-instill-h3 mx-auto mt-auto">
             There is no Model card
           </h3>
-          <p className="mx-auto mb-auto text-semantic-node-disconnected-default-stroke text-instill-body">
+          <p className="text-semantic-node-disconnected-default-stroke text-instill-body mx-auto mb-auto">
             You can add a README.md to describe the model.
           </p>
         </React.Fragment>

diff --git a/apps/instill-form-playground/package.json b/apps/instill-form-playground/package.json
@@ -31,5 +31,10 @@
     "eslint-config-next": "13.5.6",
     "@instill-ai/eslint-config-cortex": "workspace:*",
     "@instill-ai/prettier-config-cortex": "workspace:*"
+  },
+  "lint-staged": {
+    "**/*.{js,jsx,ts,tsx}": [
+      "eslint --cache --fix"
+    ]
   }
 }
diff --git a/package.json b/package.json
@@ -31,7 +31,6 @@
     "js-yaml": "^4.1.0",
     "lint-staged": ">=10",
     "prettier": "latest",
-    "prettier-plugin-tailwindcss": "latest",
     "@instill-ai/prettier-config-cortex": "workspace:*",
     "turbo": "latest",
     "typescript": "^5.4.2"
@@ -46,12 +45,10 @@
       "express": "4.19.2"
     }
   },
+  "prettier": "@instill-ai/prettier-config-cortex",
   "lint-staged": {
-    "**/*.{ts,tsx}": [
-      "prettier --write"
-    ],
     "**/*.{js,jsx,ts,tsx}": [
-      "eslint --cache --fix"
+      "prettier --write"
     ]
   }
 }
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
@@ -143,5 +143,10 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "lint-staged": {
+    "**/*.{js,jsx,ts,tsx}": [
+      "eslint --cache --fix"
+    ]
   }
 }
diff --git a/packages/design-system/src/new-ui/Button/Button.tsx b/packages/design-system/src/new-ui/Button/Button.tsx
@@ -39,7 +39,7 @@ const buttonVariants = cva(
       variant: "primary",
       size: "md",
     },
-  }
+  },
 );
 
 export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
@@ -57,7 +57,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         {...props}
       />
     );
-  }
+  },
 );
 Button.displayName = "Button";
 

diff --git a/packages/design-system/src/new-ui/Checkbox/Checkbox.tsx b/packages/design-system/src/new-ui/Checkbox/Checkbox.tsx
@@ -10,7 +10,7 @@ const checkboxStyle = cn(
   "hover:border-semantic-accent-hover hover:bg-semantic-accent-bg hover:data-[state=checked]:bg-semantic-accent-hover hover:data-[state=checked]:border-semantic-accent-hover",
   "data-[state=checked]:bg-semantic-accent-default data-[state=checked]:border-semantic-accent-default",
   "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-semantic-accent-default focus-visible:ring-offset-2",
-  "disabled:cursor-not-allowed disabled:!bg-semantic-bg-secondary disabled:!border-semantic-bg-line"
+  "disabled:cursor-not-allowed disabled:!bg-semantic-bg-secondary disabled:!border-semantic-bg-line",
 );
 
 const Checkbox = React.forwardRef<

diff --git a/packages/design-system/src/new-ui/Combobox/Combobox.tsx b/packages/design-system/src/new-ui/Combobox/Combobox.tsx
@@ -45,7 +45,7 @@ export function Combobox({
                 <Icons.Check
                   className={cn(
                     "h-4 w-4 stroke-semantic-fg-secondary",
-                    value === item.value ? "opacity-100" : "opacity-0"
+                    value === item.value ? "opacity-100" : "opacity-0",
                   )}
                 />
 

diff --git a/packages/design-system/src/new-ui/Command/Command.tsx b/packages/design-system/src/new-ui/Command/Command.tsx
@@ -15,7 +15,7 @@ const CommandRoot = React.forwardRef<
     ref={ref}
     className={cn(
       "flex h-full w-full flex-col overflow-hidden rounded-md bg-semantic-bg-primary text-semantic-fg-secondary",
-      className
+      className,
     )}
     {...props}
   />
@@ -39,7 +39,7 @@ const CommandDialog = ({
         <CommandRoot
           className={cn(
             "[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5",
-            commandRootClassName
+            commandRootClassName,
           )}
         >
           {children}
@@ -65,7 +65,7 @@ const CommandInput = React.forwardRef<
       ref={ref}
       className={cn(
         "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-semantic-fg-disabled disabled:cursor-not-allowed disabled:opacity-50",
-        className
+        className,
       )}
       {...props}
     />
@@ -108,7 +108,7 @@ const CommandGroup = React.forwardRef<
     ref={ref}
     className={cn(
       "overflow-hidden p-1 text-semantic-fg-secondary [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-semantic-fg-secondary",
-      className
+      className,
     )}
     {...props}
   />
@@ -136,7 +136,7 @@ const CommandItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-pointer select-none items-center gap-x-2 rounded-sm px-2 py-1.5 text-sm text-semantic-fg-primary outline-none product-body-text-3-medium aria-selected:bg-semantic-accent-bg data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
     )}
     {...props}
   />
@@ -152,7 +152,7 @@ const CommandShortcut = ({
     <span
       className={cn(
         "text-muted-foreground ml-auto text-xs tracking-widest",
-        className
+        className,
       )}
       {...props}
     />

diff --git a/packages/design-system/src/new-ui/DataTable/DataTable.tsx b/packages/design-system/src/new-ui/DataTable/DataTable.tsx
@@ -57,7 +57,7 @@ const DataTable = <TData, TValue>({
   const [rowSelection, setRowSelection] = React.useState({});
   const [sorting, setSorting] = React.useState<SortingState>([]);
   const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
-    []
+    [],
   );
 
   const table = useReactTable({
@@ -167,7 +167,7 @@ const DataTable = <TData, TValue>({
                       ? null
                       : flexRender(
                           header.column.columnDef.header,
-                          header.getContext()
+                          header.getContext(),
                         )}
                   </Table.Head>
                 );
@@ -204,7 +204,7 @@ const DataTable = <TData, TValue>({
                       <Table.Cell key={cell.id}>
                         {flexRender(
                           cell.column.columnDef.cell,
-                          cell.getContext()
+                          cell.getContext(),
                         )}
                       </Table.Cell>
                     ))}

diff --git a/packages/design-system/src/new-ui/DataTable/DataTablePagination.tsx b/packages/design-system/src/new-ui/DataTable/DataTablePagination.tsx
@@ -10,7 +10,7 @@ interface DataTablePaginationProps<TData> {
 export function createPaginationArray(
   currentPage: number,
   totalPages: number,
-  maxVisiblePages = 10
+  maxVisiblePages = 10,
 ): (number | string)[] {
   const paginationArray: (number | string)[] = [];
 
@@ -35,7 +35,7 @@ export function createPaginationArray(
     const startPage: number = Math.max(2, currentPage - numPagesBefore);
     const endPage: number = Math.min(
       totalPages - 2,
-      currentPage + numPagesAfter
+      currentPage + numPagesAfter,
     );
 
     // Add visible pages to the pagination array
@@ -79,12 +79,12 @@ export function DataTablePagination<TData>({
         ? createPaginationArray(
             (table.options.state.pagination?.pageIndex || 0) + 1,
             table.getPageCount(),
-            8
+            8,
           ).map((e, index) => (
             <Button
               className={cn(
                 "!rounded-none border-l-0 !border-semantic-bg-line !py-2.5 px-2.5",
-                table.getPageCount() - 1 === e && "border-r-0"
+                table.getPageCount() - 1 === e && "border-r-0",
               )}
               variant="secondaryGrey"
               size="sm"
@@ -105,7 +105,7 @@ export function DataTablePagination<TData>({
       <Button
         className={cn(
           "gap-x-2 !rounded-l-none rounded-r-sm !border-semantic-bg-line !py-2.5 px-4",
-          !showPageNumbers ? "border-l-0" : null
+          !showPageNumbers ? "border-l-0" : null,
         )}
         variant="secondaryGrey"
         size="sm"

diff --git a/packages/design-system/src/new-ui/Dialog/Dialog.tsx b/packages/design-system/src/new-ui/Dialog/Dialog.tsx
@@ -29,7 +29,7 @@ const DialogOverlay = React.forwardRef<
     ref={ref}
     className={cn(
       "fixed inset-0 z-50 bg-semantic-fg-disabled transition-all duration-100 data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=open]:fade-in",
-      className
+      className,
     )}
     {...props}
   />
@@ -48,7 +48,7 @@ const DialogContent = React.forwardRef<
       ref={ref}
       className={cn(
         "fixed z-50 grid w-full gap-4 rounded bg-semantic-bg-primary p-6 shadow-lg animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:max-w-lg sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0 lg:max-w-4xl",
-        className
+        className,
       )}
       {...props}
     >
@@ -67,7 +67,7 @@ const DialogClose = React.forwardRef<
     ref={ref}
     className={cn(
       "absolute right-4 top-4 rounded opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-semantic-accent-hover focus:ring-offset-2 disabled:pointer-events-none",
-      className
+      className,
     )}
   >
     <Icons.X className="h-5 w-5 stroke-semantic-fg-primary" />
@@ -91,7 +91,7 @@ const DialogFooter = ({
   <div
     className={cn(
       "flex flex-col sm:flex-row sm:justify-end sm:space-x-2",
-      className
+      className,
     )}
     {...props}
   />
@@ -118,7 +118,7 @@ const DialogDescription = React.forwardRef<
     ref={ref}
     className={cn(
       "text-semantic-fg-secondary product-body-text-2-regular",
-      className
+      className,
     )}
     {...props}
   />

diff --git a/packages/design-system/src/new-ui/DropdownMenu/DropdownMenu.tsx b/packages/design-system/src/new-ui/DropdownMenu/DropdownMenu.tsx
@@ -29,7 +29,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
     className={cn(
       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[state=open]:bg-semantic-accent-bg",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   >
@@ -52,7 +52,7 @@ const DropdownMenuSubContent = React.forwardRef<
       "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
       "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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
+      className,
     )}
     {...props}
   />
@@ -74,7 +74,7 @@ const DropdownMenuContent = React.forwardRef<
         "data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
         "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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
+        className,
       )}
       {...props}
     />
@@ -95,7 +95,7 @@ const DropdownMenuItem = React.forwardRef<
       "text-semantic-fg-primary transition-colors focus:bg-semantic-accent-bg focus:text-semantic-accent-default",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   />
@@ -112,7 +112,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
       "text-semantic-fg-primary transition-colors focus:bg-semantic-accent-bg focus:text-semantic-accent-default",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
     )}
     checked={checked}
     {...props}
@@ -138,7 +138,7 @@ const DropdownMenuRadioItem = React.forwardRef<
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
       "focus:text-semantic-accent-defaul text-semantic-fg-primary transition-colors focus:bg-semantic-accent-bg",
       "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
     )}
     {...props}
   >
@@ -163,7 +163,7 @@ const DropdownMenuLabel = React.forwardRef<
     className={cn(
       "px-2 py-1.5 text-sm font-semibold text-semantic-fg-primary",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   />

diff --git a/packages/design-system/src/new-ui/Field.tsx b/packages/design-system/src/new-ui/Field.tsx
@@ -25,7 +25,7 @@ const Description = React.forwardRef<
     <p
       className={cn(
         "flex text-[#1D2433CC] product-body-text-3-regular",
-        className
+        className,
       )}
       ref={ref}
       {...props}
@@ -44,7 +44,7 @@ const Label = React.forwardRef<
     <label
       className={cn(
         "flex text-semantic-fg-primary product-body-text-2-semibold",
-        className
+        className,
       )}
       ref={ref}
       {...props}

diff --git a/packages/design-system/src/new-ui/Form/Form.tsx b/packages/design-system/src/new-ui/Form/Form.tsx
@@ -27,7 +27,7 @@ type FormFieldContextValue<
 };
 
 const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue
+  {} as FormFieldContextValue,
 );
 
 const FormField = <
@@ -71,7 +71,7 @@ type FormItemContextValue = {
 };
 
 const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue
+  {} as FormItemContextValue,
 );
 
 const FormItem = React.forwardRef<
@@ -149,7 +149,7 @@ const FormDescription = React.forwardRef<
       className={cn(
         // We use hex code temporary, until our design-token support opacity
         "text-[#1D243380] product-body-text-3-regular",
-        className
+        className,
       )}
     />
   );
@@ -173,7 +173,7 @@ const FormMessage = React.forwardRef<
       id={formMessageId}
       className={cn(
         "text-semantic-error-default product-body-text-3-regular",
-        className
+        className,
       )}
       {...props}
     >

diff --git a/packages/design-system/src/new-ui/Icons/IconBase/IconBase.tsx b/packages/design-system/src/new-ui/Icons/IconBase/IconBase.tsx
@@ -22,6 +22,6 @@ export const IconBase = React.forwardRef<SVGSVGElement, IconBaseProps>(
         {children}
       </svg>
     );
-  }
+  },
 );
 IconBase.displayName = "IconBase";
-Original file line number
+Diff line change
@@ Expand Up @@
             {children}
           </svg>
         );
-      }
+      },
     );
     IconBase.displayName = "IconBase";