chore: run lint

Author: gciotola

packages/app-elements/src/ui/composite/Dropdown/DropdownDivider.tsx

@@ -1,7 +1,8 @@
-import type { FC } from "react";
+import type { FC } from "react"
 
-export interface DropdownDividerProps extends React.HTMLAttributes<HTMLElement> {
-  children?: React.ReactNode;
+export interface DropdownDividerProps
+  extends React.HTMLAttributes<HTMLElement> {
+  children?: React.ReactNode
 }
 
 export const DropdownDivider: FC<DropdownDividerProps> = ({
@@ -12,7 +13,7 @@ export const DropdownDivider: FC<DropdownDividerProps> = ({
     <div {...rest} className="h-px my-2">
       <hr className="border-gray-200" />
     </div>
-  );
-};
+  )
+}
 
-DropdownDivider.displayName = "DropdownDivider";
+DropdownDivider.displayName = "DropdownDivider"

packages/app-elements/src/ui/composite/Dropdown/DropdownItem.tsx

@@ -1,26 +1,26 @@
-import cn from "classnames";
-import { type FC, useMemo } from "react";
-import { Icon, type IconProps } from "#ui/atoms/Icon/Icon";
-import { withSkeletonTemplate } from "#ui/atoms/SkeletonTemplate";
-import { enforceAllowedTags } from "#utils/htmltags";
+import cn from "classnames"
+import { type FC, useMemo } from "react"
+import { Icon, type IconProps } from "#ui/atoms/Icon/Icon"
+import { withSkeletonTemplate } from "#ui/atoms/SkeletonTemplate"
+import { enforceAllowedTags } from "#utils/htmltags"
 
 export type DropdownItemProps = React.HTMLAttributes<HTMLElement> & {
-  label: string;
-  info?: string;
-  icon?: IconProps["name"] | "keep-space";
+  label: string
+  info?: string
+  icon?: IconProps["name"] | "keep-space"
 } & (
     | {
         /**
          * render the component as anchor tag
          */
-        href: string;
-        target?: string;
+        href: string
+        target?: string
       }
     | {
-        href?: never;
-        disabled?: boolean;
+        href?: never
+        disabled?: boolean
       }
-  );
+  )
 
 /**
  * Render a dropdown item to be used inside a `Dropdown` component.
@@ -47,16 +47,16 @@ export const DropdownItem = withSkeletonTemplate<DropdownItemProps>(
           defaultTag: "button",
         }),
       [href, onClick],
-    );
+    )
 
-    const isDisabled = Boolean("disabled" in rest && rest.disabled);
+    const isDisabled = Boolean("disabled" in rest && rest.disabled)
 
     return (
       <JsxTag
         {...rest}
         onClick={(e) => {
           if (!isDisabled) {
-            onClick?.(e);
+            onClick?.(e)
           }
         }}
         href={href}
@@ -98,11 +98,11 @@ export const DropdownItem = withSkeletonTemplate<DropdownItemProps>(
           </span>
         )}
       </JsxTag>
-    );
+    )
   },
-);
-DropdownItem.displayName = "DropdownItem";
+)
+DropdownItem.displayName = "DropdownItem"
 
 const FakeIcon: FC = () => {
-  return <div className="w-[16px]" />;
-};
+  return <div className="w-[16px]" />
+}

packages/app-elements/src/ui/composite/Dropdown/DropdownMenu.tsx

@@ -1,29 +1,29 @@
-import cn from "classnames";
-import { type FC, useEffect, useState } from "react";
-import { DropdownDivider } from "./DropdownDivider";
+import cn from "classnames"
+import { type FC, useEffect, useState } from "react"
+import { DropdownDivider } from "./DropdownDivider"
 
 export interface DropdownMenuProps extends React.HTMLAttributes<HTMLElement> {
   /** Menu content */
-  children?: React.ReactNode;
+  children?: React.ReactNode
   /** Set to `none` to hide the top arrow */
-  arrow?: "none";
+  arrow?: "none"
   /** Optional header for the dropdown menu */
-  menuHeader?: string;
+  menuHeader?: string
   /**
    * Opening position of the dropdown menu
    * @default bottom-right
    */
-  menuPosition?: "bottom-left" | "bottom-right" | "top-left" | "top-right";
+  menuPosition?: "bottom-left" | "bottom-right" | "top-left" | "top-right"
   /**
    * If set, the arrow will be centered when trigger button is smaller than 50px
    * Otherwise it will fallback to a default centering based on 32px trigger button
    */
-  parentElementRef?: React.RefObject<HTMLDivElement>;
+  parentElementRef?: React.RefObject<HTMLDivElement>
   /**
    * Set a wider menu, fixed to 280px.
    * By default, when no width is set, the menu adjusts its width dynamically to accommodate content, within a range of 150px to 250px.
    **/
-  menuWidth?: "wide";
+  menuWidth?: "wide"
 }
 
 export const DropdownMenu: FC<DropdownMenuProps> = ({
@@ -35,10 +35,10 @@ export const DropdownMenu: FC<DropdownMenuProps> = ({
   menuWidth,
   ...rest
 }) => {
-  const [centerToWidth, setCenterToWidth] = useState<number>();
+  const [centerToWidth, setCenterToWidth] = useState<number>()
   useEffect(() => {
-    setCenterToWidth(parentElementRef?.current?.clientWidth);
-  }, [parentElementRef]);
+    setCenterToWidth(parentElementRef?.current?.clientWidth)
+  }, [parentElementRef])
 
   return (
     <div
@@ -76,28 +76,28 @@ export const DropdownMenu: FC<DropdownMenuProps> = ({
         {children}
       </div>
     </div>
-  );
-};
+  )
+}
 
-DropdownMenu.displayName = "DropdownMenu";
+DropdownMenu.displayName = "DropdownMenu"
 
 const Arrow: FC<{
-  menuPosition: DropdownMenuProps["menuPosition"];
-  centerToWidth?: number;
+  menuPosition: DropdownMenuProps["menuPosition"]
+  centerToWidth?: number
 }> = ({ menuPosition = "bottom-right", centerToWidth }) => {
-  const arrowHeight = 5;
-  const arrowWidth = 12;
+  const arrowHeight = 5
+  const arrowWidth = 12
 
   const centeringOffset = calculateArrowCenteringOffset({
     arrowWidth,
     centerToWidth,
-  });
+  })
 
-  const alignProp = menuPosition.includes("right") ? "right" : "left";
+  const alignProp = menuPosition.includes("right") ? "right" : "left"
   const arrowDirection =
     menuPosition === "bottom-right" || menuPosition === "bottom-left"
       ? "top"
-      : "bottom";
+      : "bottom"
   const cssForPointingDirection =
     arrowDirection === "top"
       ? {
@@ -107,7 +107,7 @@ const Arrow: FC<{
       : {
           borderTopWidth: arrowHeight,
           borderBottomColor: "transparent",
-        };
+        }
 
   return (
     <span
@@ -121,8 +121,8 @@ const Arrow: FC<{
         [alignProp]: centeringOffset,
       }}
     />
-  );
-};
+  )
+}
 
 // Calculate the offset for centering the arrow on the dropdown button when this does not excide 50px
 // This means that for smaller buttons (up to 50px) the arrow will be centered on the button
@@ -131,13 +131,13 @@ function calculateArrowCenteringOffset({
   arrowWidth,
   centerToWidth,
 }: {
-  arrowWidth: number;
-  centerToWidth?: number;
+  arrowWidth: number
+  centerToWidth?: number
 }): number {
   if (centerToWidth == null || centerToWidth > 50) {
-    return 10; // default offset calculated on a base of 32px button width
+    return 10 // default offset calculated on a base of 32px button width
   }
 
-  const centeringOffset = centerToWidth / 2 - arrowWidth / 2;
-  return centeringOffset;
+  const centeringOffset = centerToWidth / 2 - arrowWidth / 2
+  return centeringOffset
 }

packages/app-elements/src/ui/composite/Dropdown/__snapshots__/Dropdown.test.tsx.snap

@@ -31,11 +31,11 @@ exports[`Dropdown > Should be rendering bottom-left 1`] = `
         class="flex flex-col items-start"
       >
         <span
-          class="relative border-black border-l-transparent border-r-transparent"
+          class="relative border-gray-200 border-l-transparent border-r-transparent"
           style="border-left-width: 6px; border-right-width: 6px; border-bottom-width: 5px; border-top-color: transparent; left: 10px;"
         />
         <div
-          class="bg-black text-white rounded overflow-x-hidden overflow-y-auto max-h-[450px] py-2 min-w-[150px] md:max-w-[250px]"
+          class="bg-white rounded overflow-x-hidden overflow-y-auto max-h-[450px] py-2 border shadow-lg min-w-[150px] md:max-w-[250px]"
         >
           <div />
         </div>
@@ -76,11 +76,11 @@ exports[`Dropdown > Should be rendering top-left 1`] = `
         class="flex flex-col-reverse items-start"
       >
         <span
-          class="relative border-black border-l-transparent border-r-transparent"
+          class="relative border-gray-200 border-l-transparent border-r-transparent"
           style="border-left-width: 6px; border-right-width: 6px; border-top-width: 5px; border-bottom-color: transparent; left: 10px;"
         />
         <div
-          class="bg-black text-white rounded overflow-x-hidden overflow-y-auto max-h-[450px] py-2 min-w-[150px] md:max-w-[250px]"
+          class="bg-white rounded overflow-x-hidden overflow-y-auto max-h-[450px] py-2 border shadow-lg min-w-[150px] md:max-w-[250px]"
         >
           <div />
         </div>
@@ -121,11 +121,11 @@ exports[`Dropdown > Should be rendering top-right 1`] = `
         class="flex flex-col-reverse items-end"
       >
         <span
-          class="relative border-black border-l-transparent border-r-transparent"
+          class="relative border-gray-200 border-l-transparent border-r-transparent"
           style="border-left-width: 6px; border-right-width: 6px; border-top-width: 5px; border-bottom-color: transparent; right: 10px;"
         />
         <div
-          class="bg-black text-white rounded overflow-x-hidden overflow-y-auto max-h-[450px] py-2 min-w-[150px] md:max-w-[250px]"
+          class="bg-white rounded overflow-x-hidden overflow-y-auto max-h-[450px] py-2 border shadow-lg min-w-[150px] md:max-w-[250px]"
         >
           <div />
         </div>
@@ -166,15 +166,15 @@ exports[`Dropdown > Should be rendering with default bottom-right position 1`] =
         class="flex flex-col items-end"
       >
         <span
-          class="relative border-black border-l-transparent border-r-transparent"
+          class="relative border-gray-200 border-l-transparent border-r-transparent"
           style="border-left-width: 6px; border-right-width: 6px; border-bottom-width: 5px; border-top-color: transparent; right: 10px;"
         />
         <div
-          class="bg-black text-white rounded overflow-x-hidden overflow-y-auto max-h-[450px] py-2 min-w-[150px] md:max-w-[250px]"
+          class="bg-white rounded overflow-x-hidden overflow-y-auto max-h-[450px] py-2 border shadow-lg min-w-[150px] md:max-w-[250px]"
         >
           <button
             aria-label="Payments"
-            class="w-full bg-black text-white! py-1.5 pl-4 text-sm font-medium flex items-center focus:outline-hidden! pr-8 hover:bg-gray-600 cursor-pointer focus:bg-gray-600 group"
+            class="w-[calc(100%-1rem)]  bg-white text-black! py-1.5 pl-4 mx-2 text-sm font-regular flex items-center focus:outline-hidden! pr-8 hover:bg-gray-100 hover:rounded cursor-pointer focus:bg-gray-100 group"
           >
             <div
               class="mr-2"
@@ -200,7 +200,7 @@ exports[`Dropdown > Should be rendering with default bottom-right position 1`] =
           </button>
           <button
             aria-label="Items"
-            class="w-full bg-black text-white! py-1.5 pl-4 text-sm font-medium flex items-center focus:outline-hidden! pr-8 hover:bg-gray-600 cursor-pointer focus:bg-gray-600 group"
+            class="w-[calc(100%-1rem)]  bg-white text-black! py-1.5 pl-4 mx-2 text-sm font-regular flex items-center focus:outline-hidden! pr-8 hover:bg-gray-100 hover:rounded cursor-pointer focus:bg-gray-100 group"
           >
             <div
               class="mr-2"
@@ -220,12 +220,12 @@ exports[`Dropdown > Should be rendering with default bottom-right position 1`] =
             class="h-px my-2"
           >
             <hr
-              class="border-gray-600"
+              class="border-gray-200"
             />
           </div>
           <button
             aria-label="Delete"
-            class="w-full bg-black text-white! py-1.5 pl-4 text-sm font-medium flex items-center focus:outline-hidden! pr-8 hover:bg-gray-600 cursor-pointer focus:bg-gray-600 group"
+            class="w-[calc(100%-1rem)]  bg-white text-black! py-1.5 pl-4 mx-2 text-sm font-regular flex items-center focus:outline-hidden! pr-8 hover:bg-gray-100 hover:rounded cursor-pointer focus:bg-gray-100 group"
           >
             <div
               class="mr-2"