feat(dashboard,admin-vite-plugin,admin-bundler,admin-sdk): Rework admin extensions and introduce custom fields API (#9338)

packages/admin/admin-shared/src/extensions/custom-fields/constants.ts

@@ -0,0 +1,40 @@
+import {
+  PRODUCT_CUSTOM_FIELD_DISPLAY_PATHS,
+  PRODUCT_CUSTOM_FIELD_DISPLAY_ZONES,
+  PRODUCT_CUSTOM_FIELD_FORM_CONFIG_PATHS,
+  PRODUCT_CUSTOM_FIELD_FORM_FIELD_PATHS,
+  PRODUCT_CUSTOM_FIELD_FORM_TABS,
+  PRODUCT_CUSTOM_FIELD_FORM_ZONES,
+  PRODUCT_CUSTOM_FIELD_LINK_PATHS,
+  PRODUCT_CUSTOM_FIELD_MODEL,
+} from "./product"
+
+export const CUSTOM_FIELD_MODELS = [PRODUCT_CUSTOM_FIELD_MODEL] as const
+
+export const CUSTOM_FIELD_CONTAINER_ZONES = [
+  ...PRODUCT_CUSTOM_FIELD_DISPLAY_ZONES,
+] as const
+
+export const CUSTOM_FIELD_FORM_ZONES = [
+  ...PRODUCT_CUSTOM_FIELD_FORM_ZONES,
+] as const
+
+export const CUSTOM_FIELD_FORM_TABS = [
+  ...PRODUCT_CUSTOM_FIELD_FORM_TABS,
+] as const
+
+export const CUSTOM_FIELD_FORM_CONFIG_PATHS = [
+  ...PRODUCT_CUSTOM_FIELD_FORM_CONFIG_PATHS,
+] as const
+
+export const CUSTOM_FIELD_FORM_FIELD_PATHS = [
+  ...PRODUCT_CUSTOM_FIELD_FORM_FIELD_PATHS,
+] as const
+
+export const CUSTOM_FIELD_DISPLAY_PATHS = [
+  ...PRODUCT_CUSTOM_FIELD_DISPLAY_PATHS,
+] as const
+
+export const CUSTOM_FIELD_LINK_PATHS = [
+  ...PRODUCT_CUSTOM_FIELD_LINK_PATHS,
+] as const

packages/admin/admin-shared/src/extensions/custom-fields/index.ts

@@ -0,0 +1,3 @@
+export * from "./product"
+export * from "./types"
+export * from "./utils"

packages/admin/admin-shared/src/extensions/custom-fields/product/constants.ts

@@ -0,0 +1,48 @@
+export const PRODUCT_CUSTOM_FIELD_MODEL = "product" as const
+
+export const PRODUCT_CUSTOM_FIELD_FORM_ZONES = [
+  "create",
+  "edit",
+  "organize",
+  "attributes",
+] as const
+
+export const PRODUCT_CUSTOM_FIELD_CREATE_FORM_TABS = [
+  "general",
+  "organize",
+] as const
+export const PRODUCT_CUSTOM_FIELD_FORM_TABS = [
+  ...PRODUCT_CUSTOM_FIELD_CREATE_FORM_TABS,
+] as const
+
+export const PRODUCT_CUSTOM_FIELD_DISPLAY_ZONES = [
+  "general",
+  "organize",
+  "attributes",
+] as const
+
+export const PRODUCT_CUSTOM_FIELD_LINK_PATHS = [
+  `${PRODUCT_CUSTOM_FIELD_MODEL}.$link`,
+] as const
+
+export const PRODUCT_CUSTOM_FIELD_FORM_CONFIG_PATHS = [
+  ...PRODUCT_CUSTOM_FIELD_FORM_ZONES.map(
+    (form) => `${PRODUCT_CUSTOM_FIELD_MODEL}.${form}.$config`
+  ),
+] as const
+
+export const PRODUCT_CUSTOM_FIELD_FORM_FIELD_PATHS = [
+  ...PRODUCT_CUSTOM_FIELD_FORM_ZONES.flatMap((form) => {
+    return form === "create"
+      ? PRODUCT_CUSTOM_FIELD_CREATE_FORM_TABS.map(
+          (tab) => `${PRODUCT_CUSTOM_FIELD_MODEL}.${form}.${tab}.$field`
+        )
+      : [`${PRODUCT_CUSTOM_FIELD_MODEL}.${form}.$field`]
+  }),
+] as const
+
+export const PRODUCT_CUSTOM_FIELD_DISPLAY_PATHS = [
+  ...PRODUCT_CUSTOM_FIELD_DISPLAY_ZONES.map(
+    (id) => `${PRODUCT_CUSTOM_FIELD_MODEL}.${id}.$display`
+  ),
+] as const

packages/admin/admin-shared/src/extensions/custom-fields/product/index.ts

@@ -0,0 +1,2 @@
+export * from "./constants"
+export * from "./types"

packages/admin/admin-shared/src/extensions/custom-fields/product/types.ts

@@ -0,0 +1,10 @@
+import {
+  PRODUCT_CUSTOM_FIELD_DISPLAY_ZONES,
+  PRODUCT_CUSTOM_FIELD_FORM_TABS,
+  PRODUCT_CUSTOM_FIELD_FORM_ZONES,
+} from "./constants"
+
+export type ProductFormZone = (typeof PRODUCT_CUSTOM_FIELD_FORM_ZONES)[number]
+export type ProductFormTab = (typeof PRODUCT_CUSTOM_FIELD_FORM_TABS)[number]
+export type ProductDisplayZone =
+  (typeof PRODUCT_CUSTOM_FIELD_DISPLAY_ZONES)[number]

packages/admin/admin-shared/src/extensions/custom-fields/types.ts

@@ -0,0 +1,48 @@
+import {
+  CUSTOM_FIELD_CONTAINER_ZONES,
+  CUSTOM_FIELD_FORM_TABS,
+  CUSTOM_FIELD_FORM_ZONES,
+  CUSTOM_FIELD_MODELS,
+} from "./constants"
+import type {
+  ProductDisplayZone,
+  ProductFormTab,
+  ProductFormZone,
+} from "./product"
+
+export type CustomFieldModel = (typeof CUSTOM_FIELD_MODELS)[number]
+
+export type CustomFieldFormZone = (typeof CUSTOM_FIELD_FORM_ZONES)[number]
+
+export type CustomFieldFormTab = (typeof CUSTOM_FIELD_FORM_TABS)[number]
+
+export type CustomFieldContainerZone =
+  (typeof CUSTOM_FIELD_CONTAINER_ZONES)[number]
+
+export type CustomFieldZone = CustomFieldFormZone | CustomFieldContainerZone
+
+export type CustomFieldImportType = "display" | "field" | "link" | "config"
+
+export interface CustomFieldModelFormMap {
+  product: ProductFormZone
+}
+
+export interface CustomFieldModelContainerMap {
+  product: ProductDisplayZone
+}
+
+export type CustomFieldModelFormTabsMap = {
+  product: {
+    create: ProductFormTab
+    edit: never
+    organize: never
+    attributes: never
+  }
+  customer: {
+    create: never
+    edit: never
+  }
+}
+
+export type CustomFieldFormKeys<T extends CustomFieldModel> =
+  CustomFieldModelFormMap[T]

packages/admin/admin-shared/src/extensions/custom-fields/utils.ts

@@ -0,0 +1,54 @@
+import {
+  CUSTOM_FIELD_CONTAINER_ZONES,
+  CUSTOM_FIELD_DISPLAY_PATHS,
+  CUSTOM_FIELD_FORM_CONFIG_PATHS,
+  CUSTOM_FIELD_FORM_FIELD_PATHS,
+  CUSTOM_FIELD_FORM_TABS,
+  CUSTOM_FIELD_FORM_ZONES,
+  CUSTOM_FIELD_LINK_PATHS,
+  CUSTOM_FIELD_MODELS,
+} from "./constants"
+import {
+  CustomFieldContainerZone,
+  CustomFieldFormTab,
+  CustomFieldFormZone,
+  CustomFieldModel,
+} from "./types"
+
+// Validators for individual segments of the custom field extension system
+
+export function isValidCustomFieldModel(id: any): id is CustomFieldModel {
+  return CUSTOM_FIELD_MODELS.includes(id)
+}
+
+export function isValidCustomFieldFormZone(id: any): id is CustomFieldFormZone {
+  return CUSTOM_FIELD_FORM_ZONES.includes(id)
+}
+
+export function isValidCustomFieldFormTab(id: any): id is CustomFieldFormTab {
+  return CUSTOM_FIELD_FORM_TABS.includes(id)
+}
+
+export function isValidCustomFieldDisplayZone(
+  id: any
+): id is CustomFieldContainerZone {
+  return CUSTOM_FIELD_CONTAINER_ZONES.includes(id)
+}
+
+// Validators for full paths of custom field extensions
+
+export function isValidCustomFieldDisplayPath(id: any): id is string {
+  return CUSTOM_FIELD_DISPLAY_PATHS.includes(id)
+}
+
+export function isValidCustomFieldFormConfigPath(id: any): id is string {
+  return CUSTOM_FIELD_FORM_CONFIG_PATHS.includes(id)
+}
+
+export function isValidCustomFieldFormFieldPath(id: any): id is string {
+  return CUSTOM_FIELD_FORM_FIELD_PATHS.includes(id)
+}
+
+export function isValidCustomFieldLinkPath(id: any): id is string {
+  return CUSTOM_FIELD_LINK_PATHS.includes(id)
+}