feat(admin,admin-ui,medusa): Add Medusa Admin plugin (#3334)

2023-03-03 10:09:16 +01:00
parent d6b1ad1ccd
commit 40de54b010
928 changed files with 85441 additions and 384 deletions
--- a/packages/admin-ui/ui/src/components/molecules/indeterminate-checkbox/index.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/indeterminate-checkbox/index.tsx
@@ -0,0 +1,82 @@
+import clsx from "clsx"
+import React, { useImperativeHandle } from "react"
+
+import CheckIcon from "../../fundamentals/icons/check-icon"
+
+type IndeterminateCheckboxProps = {
+  type?: "checkbox" | "radio"
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
+  checked?: boolean
+  title?: string
+  indeterminate?: boolean
+  className?: React.HTMLAttributes<HTMLInputElement>["className"]
+  name?: string
+  disabled?: boolean // NOTE: only visual, still have to filter disabled ids out
+}
+
+const IndeterminateCheckbox = React.forwardRef<
+  HTMLInputElement,
+  IndeterminateCheckboxProps
+>(({ indeterminate = false, className, checked, ...rest }, ref) => {
+  const type = rest.type || "checkbox"
+  const innerRef = React.useRef<HTMLInputElement | null>(null)
+
+  useImperativeHandle<HTMLInputElement | null, HTMLInputElement | null>(
+    ref,
+    () => innerRef.current
+  )
+
+  React.useEffect(() => {
+    if (innerRef.current) {
+      innerRef.current.indeterminate = indeterminate
+    }
+  }, [innerRef, indeterminate])
+
+  const handleClick = () => {
+    if (!rest.disabled && innerRef.current) {
+      innerRef.current.click()
+    }
+  }
+
+  if (type === "radio") {
+    return (
+      <div className="flex h-full items-center">
+        <input
+          className={clsx({ "accent-violet-60": checked })}
+          type="radio"
+          checked={checked}
+          ref={innerRef}
+          {...rest}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex h-full items-center">
+      <div
+        onClick={handleClick}
+        className={`flex h-5 w-5 cursor-pointer justify-center rounded-base border border-grey-30 text-grey-0 ${
+          rest.disabled
+            ? checked
+              ? "bg-gray-300"
+              : ""
+            : checked && "bg-violet-60"
+        }`}
+      >
+        <span className="self-center">
+          {checked && <CheckIcon size={16} />}
+        </span>
+      </div>
+      <input
+        type="checkbox"
+        className={clsx("hidden", className)}
+        defaultChecked={checked}
+        ref={innerRef}
+        {...rest}
+      />
+    </div>
+  )
+})
+
+export default IndeterminateCheckbox