feat: add templates page with edit, add, delete methods

feat: add blocks page with edit, add, delete blocks

Author: kriss145

package.json

@@ -57,6 +57,7 @@
     "@lexical/html": "^0.39.0",
     "@lexical/react": "^0.39.0",
     "@lexical/rich-text": "^0.39.0",
+    "@dnd-kit/core": "^6.3.1",
     "@react-email/components": "^0.5.7",
     "@react-email/preview-server": "^4.3.1",
     "@react-email/render": "^1.4.0",

src/admin/components/manager-fields/components/checkbox-field.tsx

@@ -0,0 +1,37 @@
+import { Checkbox, Label } from "@medusajs/ui"
+
+interface CheckboxFieldProps {
+  label: string
+  checked: boolean
+  onChange: (checked: boolean) => void
+  required?: boolean
+  disabled?: boolean
+}
+
+export const CheckboxField = ({
+  label,
+  checked,
+  onChange,
+  required = false,
+  disabled = false,
+}: CheckboxFieldProps) => {
+  return (
+    <div className="flex items-center space-x-2">
+      <Checkbox
+        checked={checked}
+        onCheckedChange={onChange}
+        disabled={disabled}
+        id={`checkbox-${label}`}
+      />
+      <Label
+        htmlFor={`checkbox-${label}`}
+        className="text-sm font-medium cursor-pointer"
+      >
+        {label}
+        {required && (
+          <span className="text-red-500 ml-1">*</span>
+        )}
+      </Label>
+    </div>
+  )
+}

src/admin/components/manager-fields/components/form-field.tsx

@@ -0,0 +1,27 @@
+import { Input, Label } from "@medusajs/ui"
+
+interface FormFieldProps {
+  label: string
+  required?: boolean
+  children: React.ReactNode
+}
+
+export const FormField = ({
+  label,
+  required,
+  children,
+}: FormFieldProps) => {
+  return (
+    <div>
+      <div className="mb-2">
+        <Label className="block text-sm font-medium">
+          {label}
+          {required && (
+            <span className="text-red-500 ml-1">*</span>
+          )}
+        </Label>
+      </div>
+      {children}
+    </div>
+  )
+}

src/admin/components/manager-fields/components/index.ts

@@ -0,0 +1,6 @@
+export { TextField } from "./text-field"
+export { TextAreaField } from "./text-area-field"
+export { NumberField } from "./number-field"
+export { SelectField } from "./select-field"
+export { CheckboxField } from "./checkbox-field"
+export { FormField } from "./form-field"

src/admin/components/manager-fields/components/number-field.tsx

@@ -0,0 +1,38 @@
+import { Input, Label } from "@medusajs/ui"
+
+interface NumberFieldProps {
+  label: string
+  value: number
+  onChange: (value: number) => void
+  placeholder?: string
+  required?: boolean
+  disabled?: boolean
+  min?: number | null
+  max?: number | null
+  step?: number | null
+}
+
+export const NumberField = ({
+  label,
+  value,
+  onChange,
+  placeholder = "",
+  required = false,
+  disabled = false,
+  min,
+  max,
+  step = null,
+}: NumberFieldProps) => {
+  return (
+    <Input
+      type="number"
+      value={value}
+      onChange={(e) => onChange(Number(e.target.value))}
+      placeholder={placeholder}
+      disabled={disabled}
+      min={min || undefined}
+      max={max || undefined}
+      step={step || undefined}
+    />
+  )
+}

src/admin/components/manager-fields/components/select-field.tsx

@@ -0,0 +1,41 @@
+import { Select, Label } from "@medusajs/ui"
+
+interface SelectFieldProps {
+  label: string
+  value: string
+  onChange: (value: string) => void
+  options: Array<{ value: string; name: string }>
+  required?: boolean
+  disabled?: boolean
+}
+
+export const SelectField = ({
+  label,
+  value,
+  onChange,
+  options,
+  required = false,
+  disabled = false,
+}: SelectFieldProps) => {
+  return (
+    <Select
+      value={value}
+      onValueChange={onChange}
+      disabled={disabled}
+    >
+      <Select.Trigger>
+        <Select.Value placeholder="Select an option" />
+      </Select.Trigger>
+      <Select.Content>
+        {options.map((option) => (
+          <Select.Item
+            key={option.value}
+            value={option.value}
+          >
+            {option.name}
+          </Select.Item>
+        ))}
+      </Select.Content>
+    </Select>
+  )
+}

src/admin/components/manager-fields/components/text-area-field.tsx

@@ -0,0 +1,31 @@
+import { Textarea, Label } from "@medusajs/ui"
+
+interface TextAreaFieldProps {
+  label: string
+  value: string
+  onChange: (value: string) => void
+  placeholder?: string
+  required?: boolean
+  disabled?: boolean
+  rows?: number
+}
+
+export const TextAreaField = ({
+  label,
+  value,
+  onChange,
+  placeholder = "",
+  required = false,
+  disabled = false,
+  rows = 3,
+}: TextAreaFieldProps) => {
+  return (
+    <Textarea
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      placeholder={placeholder}
+      disabled={disabled}
+      rows={rows}
+    />
+  )
+}

src/admin/components/manager-fields/components/text-field.tsx

@@ -0,0 +1,29 @@
+import { Input, Label } from "@medusajs/ui"
+
+interface TextFieldProps {
+  label: string
+  value: string
+  onChange: (value: string) => void
+  placeholder?: string
+  required?: boolean
+  disabled?: boolean
+}
+
+export const TextField = ({
+  label,
+  value,
+  onChange,
+  placeholder = "",
+  required = false,
+  disabled = false,
+}: TextFieldProps) => {
+  return (
+    <Input
+      type="text"
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      placeholder={placeholder}
+      disabled={disabled}
+    />
+  )
+}

src/admin/components/manager-fields/index.ts

@@ -0,0 +1 @@
+export { ManagerFields } from "./manager-fields"