feat(admin-ui): adds category ui for tree/list, edit, create, delete (#3399)

* chore: adds category ui for tree/list, edit, create, delete

* fix: address feedback

---------

Co-authored-by: Oliver Windall Juhl <59018053+olivermrbl@users.noreply.github.com>
Co-authored-by: fPolic <frane@medusajs.com>

packages/admin-ui/ui/src/components/molecules/modal/side-modal.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from "react"
+import { PropsWithChildren } from "react"
 import { AnimatePresence, motion } from "framer-motion"
 
 const MODAL_WIDTH = 560
@@ -43,9 +43,9 @@ function SideModal(props: SideModalProps) {
               background: "white",
               right: 0,
               top: 0,
-              zIndex: 9999,
+              zIndex: 200,
             }}
-            className="rounded border overflow-hidden"
+            className="overflow-hidden rounded border"
             animate={{ right: 0 }}
             exit={{ right: -MODAL_WIDTH }}
           >

packages/admin-ui/ui/src/components/molecules/select/index.tsx

@@ -1,5 +1,6 @@
 import clsx from "clsx"
 import React, {
+  CSSProperties,
   useContext,
   useEffect,
   useImperativeHandle,
@@ -31,6 +32,7 @@ type MultiSelectProps = InputHeaderProps & {
   placeholder?: string
   isMultiSelect?: boolean
   labelledBy?: string
+  menuPortalStyles?: CSSProperties
   options: { label: string; value: string | null; disabled?: boolean }[]
   value:
     | { label: string; value: string }[]
@@ -69,6 +71,7 @@ const SSelect = React.forwardRef(
       placeholder = "Search...",
       options,
       onCreateOption,
+      menuPortalStyles = {},
     }: MultiSelectProps,
     ref
   ) => {
@@ -135,10 +138,10 @@ const SSelect = React.forwardRef(
         <div
           key={name}
           className={clsx(className, {
-            "bg-white rounded-t-rounded": isFocussed,
+            "rounded-t-rounded bg-white": isFocussed,
           })}
         >
-          <div className="w-full flex text-grey-50 pr-0.5 justify-between pointer-events-none cursor-pointer mb-2">
+          <div className="text-grey-50 pointer-events-none mb-2 flex w-full cursor-pointer justify-between pr-0.5">
             <InputHeader {...{ label, required, tooltip, tooltipContent }} />
           </div>
 
@@ -176,7 +179,9 @@ const SSelect = React.forwardRef(
               }}
               closeMenuOnSelect={!isMultiSelect}
               blurInputOnSelect={!isMultiSelect}
-              styles={{ menuPortal: (base) => ({ ...base, zIndex: 60 }) }}
+              styles={{
+                menuPortal: (base) => ({ ...base, ...menuPortalStyles }),
+              }}
               hideSelectedOptions={false}
               menuPortalTarget={portalRef?.current?.lastChild || document.body}
               menuPlacement="auto"
@@ -188,7 +193,7 @@ const SSelect = React.forwardRef(
               components={SelectComponents}
             />
           }
-          {isFocussed && enableSearch && <div className="w-full h-5" />}
+          {isFocussed && enableSearch && <div className="h-5 w-full" />}
         </div>
       </div>
     )