@soppiya/app-bridge 1.0.8 → 1.1.1

package/dist/components/meta-data/ui/MetaData.js

@@ -0,0 +1,66 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Loading } from "../../../shared/loading/index.js";
+import { BlockStack, Card, Text } from "@soppiya/elementus";
+import { isFunction } from "lodash";
+import { useGetMetaFields } from "../model/useGetMetaFields.js";
+import MetaDataItem from "./MetaDataItem.js";
+const MetaData_MetaData = ({ scope = "product", value = [], onChange })=>{
+    const { metafields, loading } = useGetMetaFields([
+        scope
+    ]);
+    const handleChange = (metaFieldID, value)=>{
+        isFunction(onChange) && onChange({
+            metafield: metaFieldID,
+            value
+        });
+    };
+    const getMetaFieldValue = (_id)=>{
+        const metaField = value.find((item)=>item.metafield === _id);
+        return metaField?.value;
+    };
+    if (0 === metafields.length) return /*#__PURE__*/ jsxs(Card, {
+        children: [
+            /*#__PURE__*/ jsx(BlockStack, {
+                padding: 70,
+                children: /*#__PURE__*/ jsx("div", {
+                    children: /*#__PURE__*/ jsx(Text, {
+                        size: "md",
+                        weight: "semibold",
+                        children: "Meta fields"
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx(BlockStack, {
+                className: "border-t border-t-[#ebebeb]",
+                padding: 70,
+                children: /*#__PURE__*/ jsx(Text, {
+                    size: "md",
+                    weight: "medium",
+                    alignment: "center",
+                    children: "Empty"
+                })
+            })
+        ]
+    });
+    return /*#__PURE__*/ jsxs(Card, {
+        children: [
+            /*#__PURE__*/ jsx(BlockStack, {
+                padding: 70,
+                children: /*#__PURE__*/ jsx("div", {
+                    children: /*#__PURE__*/ jsx(Text, {
+                        size: "md",
+                        weight: "semibold",
+                        children: "Meta fields"
+                    })
+                })
+            }),
+            loading && !metafields ? /*#__PURE__*/ jsx(Loading, {}) : metafields.map((metaField)=>/*#__PURE__*/ jsx(MetaDataItem, {
+                    metaField: metaField,
+                    value: getMetaFieldValue(metaField?._id ?? ""),
+                    onChange: (value)=>handleChange(metaField?._id ?? "", value)
+                }, metaField?._id))
+        ]
+    });
+};
+const MetaData = MetaData_MetaData;
+export { MetaData as default };

package/dist/components/meta-data/ui/MetaData.stories.d.ts

@@ -0,0 +1,10 @@
+import MetaData from "./MetaData";
+import type { Meta } from "@storybook/react";
+declare const meta: Meta<typeof MetaData>;
+export default meta;
+export declare const Product: () => import("react/jsx-runtime").JSX.Element;
+export declare const Article: () => import("react/jsx-runtime").JSX.Element;
+export declare const Variant: () => import("react/jsx-runtime").JSX.Element;
+export declare const Blog: () => import("react/jsx-runtime").JSX.Element;
+export declare const Page: () => import("react/jsx-runtime").JSX.Element;
+export declare const Collection: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/meta-data/ui/MetaData.stories.js

@@ -0,0 +1,136 @@
+import { jsx } from "react/jsx-runtime";
+import { Card } from "@soppiya/elementus";
+import { useState } from "react";
+import MetaData from "./MetaData.js";
+const meta = {
+    title: "Example/MetaData",
+    component: MetaData
+};
+const MetaData_stories = meta;
+const Product = ()=>{
+    const [product, setProduct] = useState([]);
+    const handleChange = (field)=>{
+        setProduct((prev)=>{
+            const exists = prev.find((f)=>f.metafield === field.metafield);
+            if (!exists) return [
+                ...prev,
+                field
+            ];
+            return prev.map((f)=>f.metafield === field.metafield ? field : f);
+        });
+    };
+    return /*#__PURE__*/ jsx(Card, {
+        padding: 70,
+        children: /*#__PURE__*/ jsx(MetaData, {
+            scope: "product",
+            value: product,
+            onChange: handleChange
+        })
+    });
+};
+const Article = ()=>{
+    const [product, setProduct] = useState([]);
+    const handleChange = (field)=>{
+        setProduct((prev)=>{
+            const exists = prev.find((f)=>f.metafield === field.metafield);
+            if (!exists) return [
+                ...prev,
+                field
+            ];
+            return prev.map((f)=>f.metafield === field.metafield ? field : f);
+        });
+    };
+    return /*#__PURE__*/ jsx(Card, {
+        padding: 70,
+        children: /*#__PURE__*/ jsx(MetaData, {
+            scope: "article",
+            value: product,
+            onChange: handleChange
+        })
+    });
+};
+const Variant = ()=>{
+    const [product, setProduct] = useState([]);
+    const handleChange = (field)=>{
+        setProduct((prev)=>{
+            const exists = prev.find((f)=>f.metafield === field.metafield);
+            if (!exists) return [
+                ...prev,
+                field
+            ];
+            return prev.map((f)=>f.metafield === field.metafield ? field : f);
+        });
+    };
+    return /*#__PURE__*/ jsx(Card, {
+        padding: 70,
+        children: /*#__PURE__*/ jsx(MetaData, {
+            scope: "variant",
+            value: product,
+            onChange: handleChange
+        })
+    });
+};
+const Blog = ()=>{
+    const [product, setProduct] = useState([]);
+    const handleChange = (field)=>{
+        setProduct((prev)=>{
+            const exists = prev.find((f)=>f.metafield === field.metafield);
+            if (!exists) return [
+                ...prev,
+                field
+            ];
+            return prev.map((f)=>f.metafield === field.metafield ? field : f);
+        });
+    };
+    return /*#__PURE__*/ jsx(Card, {
+        padding: 70,
+        children: /*#__PURE__*/ jsx(MetaData, {
+            scope: "blog",
+            value: product,
+            onChange: handleChange
+        })
+    });
+};
+const Page = ()=>{
+    const [product, setProduct] = useState([]);
+    const handleChange = (field)=>{
+        setProduct((prev)=>{
+            const exists = prev.find((f)=>f.metafield === field.metafield);
+            if (!exists) return [
+                ...prev,
+                field
+            ];
+            return prev.map((f)=>f.metafield === field.metafield ? field : f);
+        });
+    };
+    return /*#__PURE__*/ jsx(Card, {
+        padding: 70,
+        children: /*#__PURE__*/ jsx(MetaData, {
+            scope: "page",
+            value: product,
+            onChange: handleChange
+        })
+    });
+};
+const Collection = ()=>{
+    const [product, setProduct] = useState([]);
+    const handleChange = (field)=>{
+        setProduct((prev)=>{
+            const exists = prev.find((f)=>f.metafield === field.metafield);
+            if (!exists) return [
+                ...prev,
+                field
+            ];
+            return prev.map((f)=>f.metafield === field.metafield ? field : f);
+        });
+    };
+    return /*#__PURE__*/ jsx(Card, {
+        padding: 70,
+        children: /*#__PURE__*/ jsx(MetaData, {
+            scope: "collection",
+            value: product,
+            onChange: handleChange
+        })
+    });
+};
+export { Article, Blog, Collection, Page, Product, Variant, MetaData_stories as default };

package/dist/components/meta-data/ui/MetaDataItem.d.ts

@@ -0,0 +1,16 @@
+import { Metafield } from "../../../shared/graphql/graphql";
+import React from "react";
+interface Props {
+    metaField: Metafield;
+    value?: string[];
+    onChange?: (value: string[]) => void;
+}
+export interface MetaDataProps {
+    entry?: string;
+    value?: string;
+    children?: React.ReactNode;
+    onChange: (value: string) => void;
+    onDelete?: () => void;
+}
+declare const MetaDataItem: ({ metaField, value, onChange }: Props) => import("react/jsx-runtime").JSX.Element;
+export default MetaDataItem;

package/dist/components/meta-data/ui/MetaDataItem.js

@@ -0,0 +1,256 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button, Card, InlineStack, SoppiyaIcon, Text } from "@soppiya/elementus";
+import ArticlesPicker from "../../articles-picker/ui/ArticlesPicker.js";
+import BlogsPicker from "../../blogs-picker/ui/BlogsPicker.js";
+import CollectionPicker from "../../collections-pciker/ui/CollectionPicker.js";
+import PagesPicker from "../../pages-picker/ui/PagesPicker.js";
+import { ProductsPicker } from "../../products-picker/index.js";
+import { VariantsPicker } from "../../variants-picker/index.js";
+import { useClickAway } from "@uidotdev/usehooks";
+import classnames from "classnames";
+import { isEmpty, isFunction, isNumber } from "lodash";
+import react, { useCallback, useState } from "react";
+import meta_types from "../model/meta.types.js";
+import ArticleRefMetaField from "./ArticleRefMetaField.js";
+import BlogRefMetaField from "./BlogRefMetaField.js";
+import BooleanMetaField from "./BooleanMetaField.js";
+import CollectionRefMetaField from "./CollectionRefMetaField.js";
+import ColorMetaField from "./ColorMetaField.js";
+import DateAndTimeMetaField from "./DateAndTimeMetaField.js";
+import DateMetaField from "./DateMetaField.js";
+import MetaDataTypePopup from "./MetaDataTypePopup.js";
+import MultilineTextMetaField from "./MultilineTextMetaField.js";
+import NumberMetaField from "./NumberMetaField.js";
+import PageRefMetaField from "./PageRefMetaField.js";
+import ProductRefMetaField from "./ProductRefMetaField.js";
+import SingleLineTextMetaField from "./SingleLineTextMetaField.js";
+import VariantRefMetaField from "./VariantRefMetaField.js";
+const MetaDataItem_MetaDataItem = ({ metaField, value = [], onChange })=>{
+    const [activeMetaField, setActiveMetaField] = useState(null);
+    const [visibleExplorer, setVisibleExplorer] = useState("");
+    const metaFieldRef = useClickAway(()=>visibleExplorer ? null : setActiveMetaField(null));
+    const isRefType = meta_types.isRefType(metaField.type);
+    let MetaFieldJSX;
+    switch(metaField.type){
+        case "date_time":
+            MetaFieldJSX = DateAndTimeMetaField;
+            break;
+        case "date":
+            MetaFieldJSX = DateMetaField;
+            break;
+        case "number":
+            MetaFieldJSX = NumberMetaField;
+            break;
+        case "multiline_text":
+            MetaFieldJSX = MultilineTextMetaField;
+            break;
+        case "single_line_text":
+            MetaFieldJSX = SingleLineTextMetaField;
+            break;
+        case "product_ref":
+            MetaFieldJSX = ProductRefMetaField;
+            break;
+        case "collection_ref":
+            MetaFieldJSX = CollectionRefMetaField;
+            break;
+        case "variant_ref":
+            MetaFieldJSX = VariantRefMetaField;
+            break;
+        case "page_ref":
+            MetaFieldJSX = PageRefMetaField;
+            break;
+        case "article_ref":
+            MetaFieldJSX = ArticleRefMetaField;
+            break;
+        case "blog_ref":
+            MetaFieldJSX = BlogRefMetaField;
+            break;
+        case "boolean":
+            MetaFieldJSX = BooleanMetaField;
+            break;
+        case "color":
+            MetaFieldJSX = ColorMetaField;
+            break;
+    }
+    const handleCheckIsMultiple = ()=>{
+        if (isRefType && "single" === metaField.entry) return !(value.length >= 1);
+        return "multiple" === metaField.entry;
+    };
+    const handleToggleMetaField = (value)=>{
+        setActiveMetaField((prev)=>prev ? null : value);
+    };
+    const handleAddMetaField = ()=>{
+        switch(metaField.type){
+            case "product_ref":
+                setVisibleExplorer("product");
+                break;
+            case "collection_ref":
+                setVisibleExplorer("collection");
+                break;
+            case "variant_ref":
+                setVisibleExplorer("variant");
+                break;
+            case "page_ref":
+                setVisibleExplorer("page");
+                break;
+            case "blog_ref":
+                setVisibleExplorer("blog");
+                break;
+            case "article_ref":
+                setVisibleExplorer("article");
+                break;
+            default:
+                isFunction(onChange) && onChange(value.concat(""));
+        }
+    };
+    const handleDeleteMetaField = (i)=>{
+        if (!isNumber(i)) return;
+        const filteredValue = value.filter((_, index)=>index !== i);
+        isFunction(onChange) && onChange(filteredValue);
+    };
+    const handleClearMetaField = ()=>{
+        isFunction(onChange) && onChange([]);
+    };
+    const handleChange = (newValue, i)=>{
+        if (i && "multiple" === metaField.entry) {
+            const mappedValue = value.map((item, index)=>index === i ? newValue : item);
+            isFunction(onChange) && onChange(mappedValue);
+        } else isFunction(onChange) && onChange([
+            newValue
+        ]);
+    };
+    const handleSelectExplorerItems = useCallback((items)=>{
+        isFunction(onChange) && onChange(items);
+        setVisibleExplorer("");
+    }, [
+        visibleExplorer,
+        onChange
+    ]);
+    return /*#__PURE__*/ jsxs(react.Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs(InlineStack, {
+                padding: 70,
+                className: "border-t border-t-[#ebebeb] relative",
+                justifyContent: "space-between",
+                children: [
+                    /*#__PURE__*/ jsx(InlineStack, {
+                        className: "w-[calc(100%-188px)]! md:w-[calc(100%-256px)]! lg:w-[calc(100%-352px)]!",
+                        alignItems: "center",
+                        children: /*#__PURE__*/ jsx(Text, {
+                            size: "md",
+                            children: metaField.name
+                        })
+                    }),
+                    /*#__PURE__*/ jsxs(InlineStack, {
+                        className: "w-[188px]! md:w-[256px]! lg:w-[352px]! bg-[#f1f1f1] py-1.5 px-3 lg:cursor-pointer",
+                        radius: 3,
+                        justifyContent: "space-between",
+                        onClick: ()=>handleToggleMetaField(metaField.type),
+                        children: [
+                            /*#__PURE__*/ jsxs(Text, {
+                                size: "sm",
+                                weight: "regular",
+                                children: [
+                                    "[",
+                                    metaField.type,
+                                    "]"
+                                ]
+                            }),
+                            /*#__PURE__*/ jsxs(Text, {
+                                size: "sm",
+                                weight: "regular",
+                                children: [
+                                    value.length,
+                                    " item"
+                                ]
+                            })
+                        ]
+                    }),
+                    activeMetaField && /*#__PURE__*/ jsx(Card, {
+                        radius: 6,
+                        className: classnames('invisible absolute p-4! left-0 md:-left-5 top-0.5 md:w-[calc(100%+40px)]! z-20', {
+                            visible: activeMetaField
+                        }),
+                        ref: metaFieldRef,
+                        children: /*#__PURE__*/ jsx(MetaDataTypePopup, {
+                            name: metaField.name,
+                            type: metaField.type,
+                            isMultiple: handleCheckIsMultiple(),
+                            onAdd: handleAddMetaField,
+                            onClear: handleClearMetaField,
+                            children: MetaFieldJSX && ("multiple" !== metaField.entry || isRefType ? /*#__PURE__*/ jsx(MetaFieldJSX, {
+                                value: isRefType ? value.join(",") : value[0],
+                                onChange: (v)=>handleChange(v),
+                                children: /*#__PURE__*/ jsx(InlineStack, {
+                                    alignItems: "center",
+                                    children: /*#__PURE__*/ jsx(Button, {
+                                        color: "white",
+                                        onClick: ()=>handleDeleteMetaField(0),
+                                        children: /*#__PURE__*/ jsx(SoppiyaIcon, {
+                                            icon: "minus.svg",
+                                            size: "xs"
+                                        })
+                                    })
+                                })
+                            }) : (isEmpty(value) ? [
+                                ""
+                            ] : value).map((v, key)=>/*#__PURE__*/ jsx(MetaFieldJSX, {
+                                    entry: metaField.entry,
+                                    onChange: (v)=>handleChange(v, key),
+                                    children: /*#__PURE__*/ jsx(InlineStack, {
+                                        alignItems: "center",
+                                        children: /*#__PURE__*/ jsx(Button, {
+                                            color: "white",
+                                            onClick: ()=>handleDeleteMetaField(key),
+                                            children: /*#__PURE__*/ jsx(SoppiyaIcon, {
+                                                icon: "minus.svg",
+                                                size: "sm"
+                                            })
+                                        })
+                                    })
+                                }, key)))
+                        })
+                    })
+                ]
+            }),
+            "product" === visibleExplorer && /*#__PURE__*/ jsx(ProductsPicker, {
+                limit: "multiple" === metaField.entry ? 1 / 0 : 1,
+                initialIds: value,
+                onClose: ()=>setVisibleExplorer(""),
+                onOk: handleSelectExplorerItems
+            }),
+            "variant" === visibleExplorer && /*#__PURE__*/ jsx(VariantsPicker, {
+                limit: "multiple" === metaField.entry ? 1 / 0 : 1,
+                initialIds: value,
+                onClose: ()=>setVisibleExplorer(""),
+                onOk: handleSelectExplorerItems
+            }),
+            "article" === visibleExplorer && /*#__PURE__*/ jsx(ArticlesPicker, {
+                initialIds: value,
+                limit: "multiple" === metaField.entry ? 1 / 0 : 1,
+                onClose: ()=>setVisibleExplorer(""),
+                onOk: handleSelectExplorerItems
+            }),
+            "collection" === visibleExplorer && /*#__PURE__*/ jsx(CollectionPicker, {
+                initialIds: value,
+                limit: "multiple" === metaField.entry ? 1 / 0 : 1,
+                onClose: ()=>setVisibleExplorer(""),
+                onOk: handleSelectExplorerItems
+            }),
+            "blog" === visibleExplorer && /*#__PURE__*/ jsx(BlogsPicker, {
+                initialIds: value,
+                limit: "multiple" === metaField.entry ? 1 / 0 : 1,
+                onClose: ()=>setVisibleExplorer(""),
+                onOk: handleSelectExplorerItems
+            }),
+            "page" === visibleExplorer && /*#__PURE__*/ jsx(PagesPicker, {
+                initialIds: value,
+                limit: "multiple" === metaField.entry ? 1 / 0 : 1,
+                onClose: ()=>setVisibleExplorer(""),
+                onOk: handleSelectExplorerItems
+            })
+        ]
+    });
+};
+const MetaDataItem = MetaDataItem_MetaDataItem;
+export { MetaDataItem as default };

package/dist/components/meta-data/ui/MetaDataTypePopup.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+interface Props {
+    isMultiple: boolean;
+    name: string;
+    type: string;
+    children: React.ReactNode;
+    onAdd?: () => void;
+    onClear?: () => void;
+}
+declare const MetaFieldTypePopup: ({ isMultiple, name, type, children, onAdd, onClear }: Props) => import("react/jsx-runtime").JSX.Element;
+export default MetaFieldTypePopup;

package/dist/components/meta-data/ui/MetaDataTypePopup.js

@@ -0,0 +1,70 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { BlockStack, Button, InlineStack, Text } from "@soppiya/elementus";
+import react from "react";
+import meta_types from "../model/meta.types.js";
+const MetaFieldTypePopup = ({ isMultiple, name, type, children, onAdd, onClear })=>{
+    const isRefType = meta_types.isRefType(type);
+    const textCapitalize = (value)=>value.split("_").map((w)=>w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
+    return /*#__PURE__*/ jsx(react.Fragment, {
+        children: /*#__PURE__*/ jsxs(InlineStack, {
+            flexDirection: {
+                xs: "col",
+                md: "row"
+            },
+            gap: 70,
+            children: [
+                /*#__PURE__*/ jsxs(BlockStack, {
+                    className: "w-[170px]!",
+                    children: [
+                        /*#__PURE__*/ jsx(Text, {
+                            size: "md",
+                            decoration: "underline",
+                            children: name
+                        }),
+                        /*#__PURE__*/ jsx(Text, {
+                            size: "md",
+                            color: "secondary",
+                            children: textCapitalize(type)
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxs(BlockStack, {
+                    className: "grow md:flex-col-reverse!",
+                    children: [
+                        /*#__PURE__*/ jsx(BlockStack, {
+                            gap: 50,
+                            padding: {
+                                top: {
+                                    md: children ? 70 : 0
+                                }
+                            },
+                            className: "border-b border-b-[#ebebeb] md:border-b-transparent pb-4 md:pb-0 ",
+                            children: children
+                        }),
+                        isMultiple && /*#__PURE__*/ jsx(BlockStack, {
+                            children: /*#__PURE__*/ jsxs(InlineStack, {
+                                justifyContent: "space-between",
+                                className: "md:border-b md:border-b-[#ebebeb] mt-4 md:mt-0 md:pb-3",
+                                children: [
+                                    /*#__PURE__*/ jsx(Button, {
+                                        color: "white",
+                                        onClick: onAdd,
+                                        children: isRefType ? `Select ${type.split("_")[0]}` : "Add Item"
+                                    }),
+                                    /*#__PURE__*/ jsx(Button, {
+                                        variant: "plain",
+                                        color: "blue",
+                                        onClick: onClear,
+                                        children: "Clear all"
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+const MetaDataTypePopup = MetaFieldTypePopup;
+export { MetaDataTypePopup as default };

package/dist/components/meta-data/ui/MultilineTextMetaField.d.ts

@@ -0,0 +1,3 @@
+import { MetaDataProps } from "./MetaDataItem";
+declare const MultilineTextMetaField: ({ entry, value, children, onChange }: MetaDataProps) => import("react/jsx-runtime").JSX.Element;
+export default MultilineTextMetaField;

package/dist/components/meta-data/ui/MultilineTextMetaField.js

@@ -0,0 +1,15 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Textarea } from "@soppiya/elementus";
+const MultilineTextMetaField_MultilineTextMetaField = ({ entry, value, children, onChange })=>/*#__PURE__*/ jsxs("div", {
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                children: /*#__PURE__*/ jsx(Textarea, {
+                    value: value,
+                    onChange: (e)=>onChange(e.target.value)
+                })
+            }),
+            "multiple" === entry && children
+        ]
+    });
+const MultilineTextMetaField = MultilineTextMetaField_MultilineTextMetaField;
+export { MultilineTextMetaField as default };

package/dist/components/meta-data/ui/NumberMetaField.d.ts

@@ -0,0 +1,3 @@
+import { MetaDataProps } from "./MetaDataItem";
+declare const NumberMetaField: ({ entry, value, children, onChange }: MetaDataProps) => import("react/jsx-runtime").JSX.Element;
+export default NumberMetaField;

package/dist/components/meta-data/ui/NumberMetaField.js

@@ -0,0 +1,19 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Input } from "@soppiya/elementus";
+const NumberMetaField = ({ entry, value, children, onChange })=>/*#__PURE__*/ jsxs("div", {
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                children: /*#__PURE__*/ jsx("div", {
+                    children: /*#__PURE__*/ jsx(Input, {
+                        size: "sm",
+                        type: "number",
+                        value: value,
+                        onChange: (e)=>onChange(e.target.value)
+                    })
+                })
+            }),
+            "multiple" === entry && children
+        ]
+    });
+const ui_NumberMetaField = NumberMetaField;
+export { ui_NumberMetaField as default };

package/dist/components/meta-data/ui/PageRefMetaField.d.ts

@@ -0,0 +1,3 @@
+import { MetaDataProps } from "./MetaDataItem";
+declare const PageRefMetaField: ({ value, children }: MetaDataProps) => import("react/jsx-runtime").JSX.Element | import("react/jsx-runtime").JSX.Element[] | undefined;
+export default PageRefMetaField;

package/dist/components/meta-data/ui/PageRefMetaField.js

@@ -0,0 +1,37 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { usePages } from "../../pages-picker/model/usePages.js";
+import { Loading } from "../../../shared/loading/index.js";
+import { Image, InlineStack, Text } from "@soppiya/elementus";
+const PageRefMetaField_PageRefMetaField = ({ value, children })=>{
+    const { pages, isLoadingPages } = usePages({
+        skip: !value,
+        filterKeys: {
+            cursors: value?.split(",")
+        }
+    });
+    if (isLoadingPages) return /*#__PURE__*/ jsx(Loading, {});
+    return pages?.map((page)=>/*#__PURE__*/ jsxs(InlineStack, {
+            justifyContent: "space-between",
+            children: [
+                /*#__PURE__*/ jsxs(InlineStack, {
+                    gapX: 70,
+                    alignItems: "center",
+                    children: [
+                        /*#__PURE__*/ jsx(Image, {
+                            size: "xs",
+                            url: page.image?.url ?? ""
+                        }),
+                        /*#__PURE__*/ jsx(Text, {
+                            size: "md",
+                            weight: "regular",
+                            color: "blue",
+                            children: page.title
+                        })
+                    ]
+                }),
+                children
+            ]
+        }, page._id));
+};
+const PageRefMetaField = PageRefMetaField_PageRefMetaField;
+export { PageRefMetaField as default };

package/dist/components/meta-data/ui/ProductRefMetaField.d.ts

@@ -0,0 +1,3 @@
+import { MetaDataProps } from "./MetaDataItem";
+declare const ProductRefMetaField: ({ value, children }: MetaDataProps) => import("react/jsx-runtime").JSX.Element | import("react/jsx-runtime").JSX.Element[] | undefined;
+export default ProductRefMetaField;