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/generating-input/index.tsx
+++ b/packages/admin-ui/ui/src/components/molecules/generating-input/index.tsx
@@ -0,0 +1,93 @@
+import React, {
+  InputHTMLAttributes,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react"
+import { generatePromotionCode } from "../../../utils/generate-promotion-code"
+import RefreshIcon from "../../fundamentals/icons/refresh-icon"
+import InputContainer from "../../fundamentals/input-container"
+import InputHeader from "../../fundamentals/input-header"
+import { InputProps } from "../input"
+
+const GeneratingInput = React.forwardRef(
+  (
+    {
+      placeholder,
+      label,
+      name,
+      required,
+      deletable,
+      onDelete,
+      onChange,
+      onFocus,
+      tooltipContent,
+      tooltip,
+      props,
+      className,
+      value: valueProp,
+      ...fieldProps
+    }: Omit<InputProps, "prefix" | "key">,
+    ref
+  ) => {
+    const [value, setValue] = useState<
+      InputHTMLAttributes<HTMLInputElement>["value"]
+    >(valueProp || "")
+    const inputRef = useRef<HTMLInputElement>(null)
+
+    useImperativeHandle(ref, () => inputRef.current)
+
+    const generateCode = () => {
+      setValue(generatePromotionCode())
+    }
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      setValue(e.target.value)
+      if (onChange) {
+        onChange(e)
+      }
+    }
+
+    return (
+      <InputContainer
+        className={className}
+        key={name}
+        onClick={() => !fieldProps.disabled && inputRef?.current?.focus()}
+        {...props}
+      >
+        <div className="flex">
+          <InputHeader {...{ label, required, tooltipContent, tooltip }} />
+          {!value && (
+            <button
+              onClick={generateCode}
+              className="inter-small-semibold text-violet-50"
+            >
+              Generate
+            </button>
+          )}
+        </div>
+        <div className="flex">
+          <input
+            ref={inputRef}
+            value={value}
+            onChange={handleChange}
+            className="bg-inherit outline-none outline-0 w-full remove-number-spinner leading-base text-grey-90 font-normal caret-violet-60 placeholder-grey-40"
+            placeholder={placeholder}
+            autoComplete="off"
+            name={name}
+            onFocus={onFocus}
+            required={required}
+            {...fieldProps}
+          />
+          {value && (
+            <button onClick={generateCode}>
+              <RefreshIcon size={16} className="text-grey-50" />
+            </button>
+          )}
+        </div>
+      </InputContainer>
+    )
+  }
+)
+
+export default GeneratingInput