@soppiya/app-bridge 1.0.8 → 1.1.1

package/dist/components/collections-pciker/ui/CollectionPicker.js

@@ -0,0 +1,105 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { InfinityScroll } from "../../infinity-scroll/index.js";
+import { useFilterQuery } from "../../../shared/lib/index.js";
+import { BlockStack, Box, Button, Checkbox, Image, InlineStack, Input, Modal, Spinner, Text } from "@soppiya/elementus";
+import lodash from "lodash";
+import { useState } from "react";
+import { useCollections } from "../model/useCollections.js";
+const CollectionPicker = ({ title, initialIds = [], limit = 1 / 0, onClose, onOk })=>{
+    const [selectedVariant, setSelectedVariant] = useState(initialIds);
+    const { query, debounceQuery, onChangeQuery } = useFilterQuery();
+    const { collections, isLoadingCollections, fetchMoreCollections, pageInfo } = useCollections({
+        query: debounceQuery
+    });
+    const isSelected = limit === 1 / 0 ? true : 1 === limit ? 1 === selectedVariant.length : selectedVariant.length >= limit;
+    const handleSelectVariant = (productId)=>{
+        selectedVariant.includes(productId) ? setSelectedVariant((prev)=>prev.filter((id)=>productId !== id)) : setSelectedVariant((prev)=>[
+                ...prev,
+                productId
+            ]);
+    };
+    const handleOk = ()=>{
+        if (lodash.isFunction(onOk)) onOk(selectedVariant);
+    };
+    const ButtonJSX = /*#__PURE__*/ jsx(InlineStack, {
+        justifyContent: "end",
+        children: /*#__PURE__*/ jsx(Button, {
+            disabled: lodash.isEmpty(selectedVariant) || !isSelected,
+            onClick: handleOk,
+            children: "Add"
+        })
+    });
+    return /*#__PURE__*/ jsx(Modal, {
+        open: true,
+        title: title || "Collections",
+        bodyPadding: 0,
+        buttons: ButtonJSX,
+        onClose: onClose,
+        children: /*#__PURE__*/ jsxs(BlockStack, {
+            children: [
+                /*#__PURE__*/ jsx(Box, {
+                    className: "border-b border-b-[#ebebeb]! h",
+                    padding: 60,
+                    children: /*#__PURE__*/ jsx(Input, {
+                        size: "sm",
+                        type: "search",
+                        value: query ?? "",
+                        onChange: (event)=>onChangeQuery(event.target.value)
+                    })
+                }),
+                isLoadingCollections ? /*#__PURE__*/ jsx(InlineStack, {
+                    justifyContent: "center",
+                    padding: 80,
+                    children: /*#__PURE__*/ jsx(Spinner, {
+                        size: "md"
+                    })
+                }) : /*#__PURE__*/ jsxs(BlockStack, {
+                    children: [
+                        collections?.map((collection)=>/*#__PURE__*/ jsxs(InlineStack, {
+                                stack: "full",
+                                className: "lg:cursor-pointer border-b border-b-[#ebebeb]!",
+                                gapX: 60,
+                                padding: 60,
+                                onClick: ()=>handleSelectVariant(String(collection._id)),
+                                children: [
+                                    /*#__PURE__*/ jsxs(InlineStack, {
+                                        alignItems: "center",
+                                        gapX: 60,
+                                        children: [
+                                            /*#__PURE__*/ jsx(Box, {
+                                                children: /*#__PURE__*/ jsx(Checkbox, {
+                                                    checked: selectedVariant.includes(String(collection._id)),
+                                                    onChange: ()=>{}
+                                                })
+                                            }),
+                                            /*#__PURE__*/ jsx(Box, {
+                                                children: /*#__PURE__*/ jsx(Image, {
+                                                    size: "xs",
+                                                    url: String(collection.image?.url)
+                                                })
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsx(BlockStack, {
+                                        gapY: 30,
+                                        justifyContent: "center",
+                                        children: /*#__PURE__*/ jsx(Text, {
+                                            size: "sm",
+                                            color: "secondary",
+                                            truncate: "truncate-1",
+                                            children: collection.title
+                                        })
+                                    })
+                                ]
+                            }, collection._id)),
+                        pageInfo?.hasNextPage && /*#__PURE__*/ jsx(InfinityScroll, {
+                            onFetch: fetchMoreCollections
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+const ui_CollectionPicker = CollectionPicker;
+export { ui_CollectionPicker as default };

package/dist/components/collections-pciker/ui/CollectionPicker.stories.d.ts

@@ -0,0 +1,17 @@
+declare const meta: {
+    title: string;
+    component: ({ title, initialIds, limit, onClose, onOk }: {
+        title?: string;
+        initialIds?: string[];
+        limit?: number;
+        onClose?: () => void;
+        onOk?: (collections: string[]) => void;
+    }) => import("react/jsx-runtime").JSX.Element;
+};
+export default meta;
+export declare const Default: {
+    args: {
+        primary: boolean;
+        label: string;
+    };
+};

package/dist/components/collections-pciker/ui/CollectionPicker.stories.js

@@ -0,0 +1,13 @@
+import CollectionPicker from "./CollectionPicker.js";
+const meta = {
+    title: "Example/CollectionPicker",
+    component: CollectionPicker
+};
+const CollectionPicker_stories = meta;
+const Default = {
+    args: {
+        primary: true,
+        label: "Button"
+    }
+};
+export { Default, CollectionPicker_stories as default };

package/dist/components/index.d.ts

@@ -1,3 +1,9 @@
-export { Media } from "./media";
-export { SaveBar } from "./savebar";
-export { VariantsPicker } from "./variants-picker";
+export * from "./articles-picker";
+export * from "./blogs-picker";
+export * from "./collections-pciker";
+export * from "./media";
+export * from "./meta-data";
+export * from "./pages-picker";
+export * from "./products-picker";
+export * from "./savebar";
+export * from "./variants-picker";

package/dist/components/index.js

@@ -1,4 +1,9 @@
-import { Media } from "./media/index.js";
-import { SaveBar } from "./savebar/index.js";
-import { VariantsPicker } from "./variants-picker/index.js";
-export { Media, SaveBar, VariantsPicker };
+export * from "./articles-picker/index.js";
+export * from "./blogs-picker/index.js";
+export * from "./collections-pciker/index.js";
+export * from "./media/index.js";
+export * from "./meta-data/index.js";
+export * from "./pages-picker/index.js";
+export * from "./products-picker/index.js";
+export * from "./savebar/index.js";
+export * from "./variants-picker/index.js";

package/dist/components/meta-data/api/query.d.ts

@@ -0,0 +1,4 @@
+export declare const getMetaFields: import("@graphql-typed-document-node/core").TypedDocumentNode<import("../../../shared/graphql/graphql").MetafieldsQuery, import("../../../shared/graphql/graphql").Exact<{
+    filterKeys?: import("../../../shared/graphql/graphql").InputMaybe<import("../../../shared/graphql/graphql").MetafieldFilterKeys>;
+    first?: import("../../../shared/graphql/graphql").InputMaybe<import("../../../shared/graphql/graphql").Scalars["Int"]["input"]>;
+}>>;

package/dist/components/meta-data/api/query.js

@@ -0,0 +1,14 @@
+import { graphql } from "../../../shared/graphql/index.js";
+const getMetaFields = graphql(`query Metafields($filterKeys: MetafieldFilterKeys, $first: Int) {
+  metafields(filterKeys: $filterKeys, first: $first) {
+    edges {
+      node {
+        _id
+        entry
+        name
+        type
+      }
+    }
+  }
+}`);
+export { getMetaFields };

package/dist/components/meta-data/index.d.ts

@@ -0,0 +1 @@
+export { default as MetaData } from "./ui/MetaData";

package/dist/components/meta-data/index.js

@@ -0,0 +1,2 @@
+import MetaData from "./ui/MetaData.js";
+export { MetaData };

package/dist/components/meta-data/model/meta.types.d.ts

@@ -0,0 +1,7 @@
+declare class Meta {
+    readonly metaTypeAliasName: Record<string, string>;
+    constructor();
+    isRefType(type: string): boolean;
+}
+declare const _default: Meta;
+export default _default;

package/dist/components/meta-data/model/meta.types.js

@@ -0,0 +1,33 @@
+class Meta {
+    metaTypeAliasName;
+    constructor(){
+        this.metaTypeAliasName = {
+            article_ref: "Articles",
+            product_ref: "Products",
+            collection_ref: "Collections",
+            variant_ref: "Variants",
+            page_ref: "Pages",
+            blog_ref: "Blogs",
+            single_line_text: "Text",
+            multiline_text: "Multiline text",
+            boolean: "Boolean",
+            number: "Number",
+            date: "Date",
+            date_time: "Date time",
+            color: "Color"
+        };
+    }
+    isRefType(type) {
+        const refTypes = [
+            "product_ref",
+            "collection_ref",
+            "variant_ref",
+            "page_ref",
+            "article_ref",
+            "blog_ref"
+        ];
+        return refTypes.includes(type);
+    }
+}
+const meta_types = new Meta();
+export { meta_types as default };

package/dist/components/meta-data/model/useGetMetaFields.d.ts

@@ -0,0 +1,12 @@
+import { MetafieldScope } from "../../../shared/graphql/graphql";
+export declare const useGetMetaFields: (scope?: MetafieldScope[]) => {
+    metafields: ({
+        __typename: "Metafield";
+        _id?: string | null;
+        entry?: import("../../../shared/graphql/graphql").MetafieldEntryType | null;
+        name?: string | null;
+        type?: import("../../../shared/graphql/graphql").MetafieldType | null;
+    } | null | undefined)[];
+    loading: boolean;
+    metaFieldsError: import("@apollo/client").ErrorLike | undefined;
+};

package/dist/components/meta-data/model/useGetMetaFields.js

@@ -0,0 +1,18 @@
+import { useQuery } from "@apollo/client/react";
+import { getMetaFields } from "../api/query.js";
+const useGetMetaFields = (scope)=>{
+    const { data, loading, error } = useQuery(getMetaFields, {
+        variables: {
+            filterKeys: {
+                scopes: scope
+            }
+        }
+    });
+    const nodes = data?.metafields?.edges?.filter((m)=>null != m).map((edge)=>edge.node) ?? [];
+    return {
+        metafields: nodes,
+        loading,
+        metaFieldsError: error
+    };
+};
+export { useGetMetaFields };

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,27 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Radio } from "@soppiya/elementus";
+const BooleanMetaField = ({ entry, value, children, onChange })=>/*#__PURE__*/ jsxs("div", {
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                children: [
+                    /*#__PURE__*/ jsx(Radio, {
+                        label: "True",
+                        name: "boolean",
+                        checked: "true" === value,
+                        value: value,
+                        onChange: (e)=>onChange(e.target.value)
+                    }),
+                    /*#__PURE__*/ jsx(Radio, {
+                        label: "False",
+                        name: "boolean",
+                        checked: "false" === value,
+                        value: value,
+                        onChange: (e)=>onChange(e.target.value)
+                    })
+                ]
+            }),
+            "multiple" === entry && children
+        ]
+    });
+const ui_BooleanMetaField = BooleanMetaField;
+export { ui_BooleanMetaField as default };

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

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

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

@@ -0,0 +1,36 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCollections } from "../../collections-pciker/model/useCollections.js";
+import { Loading } from "../../../shared/loading/index.js";
+import { Image, InlineStack, Text } from "@soppiya/elementus";
+const CollectionRefMetaField_CollectionRefMetaField = ({ value, children })=>{
+    const { collections, isLoadingCollections } = useCollections({
+        filterKeys: {
+            cursors: value?.split(",")
+        }
+    });
+    if (isLoadingCollections) return /*#__PURE__*/ jsx(Loading, {});
+    return collections?.map((collection)=>/*#__PURE__*/ jsxs(InlineStack, {
+            justifyContent: "space-between",
+            children: [
+                /*#__PURE__*/ jsxs(InlineStack, {
+                    gapX: 70,
+                    alignItems: "center",
+                    children: [
+                        /*#__PURE__*/ jsx(Image, {
+                            size: "xs",
+                            url: collection.image?.url ?? ""
+                        }),
+                        /*#__PURE__*/ jsx(Text, {
+                            size: "md",
+                            weight: "regular",
+                            color: "blue",
+                            children: collection.title
+                        })
+                    ]
+                }),
+                children
+            ]
+        }, collection._id));
+};
+const CollectionRefMetaField = CollectionRefMetaField_CollectionRefMetaField;
+export { CollectionRefMetaField as default };

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

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

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

@@ -0,0 +1,17 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { InlineStack } from "@soppiya/elementus";
+const ColorMetaField = ({ entry, value, children, onChange })=>/*#__PURE__*/ jsxs(InlineStack, {
+        justifyContent: "space-between",
+        children: [
+            /*#__PURE__*/ jsx(InlineStack, {
+                children: /*#__PURE__*/ jsx("input", {
+                    type: "color",
+                    value: value,
+                    onChange: (e)=>onChange(e.target.value)
+                })
+            }),
+            "multiple" === entry && children
+        ]
+    });
+const ui_ColorMetaField = ColorMetaField;
+export { ui_ColorMetaField as default };

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

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

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

@@ -0,0 +1,34 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { BlockStack, DatePicker, InlineStack } from "@soppiya/elementus";
+import moment from "moment";
+const DateAndTimeMetaField = ({ entry, value, children, onChange })=>{
+    const handleChangeDate = (event)=>{
+        const { value } = event.target;
+        const date = new Date(value);
+        onChange(String(date.getTime()));
+    };
+    const transformValue = ()=>{
+        if (!value) return "";
+        const date = moment(Number(value)).format("YYYY-MM-DDThh:mm");
+        console.log(date);
+        return date ? date : "";
+    };
+    return /*#__PURE__*/ jsxs(InlineStack, {
+        gapX: 60,
+        children: [
+            /*#__PURE__*/ jsx(BlockStack, {
+                children: /*#__PURE__*/ jsx(DatePicker, {
+                    isDateTime: true,
+                    size: "sm",
+                    name: "date",
+                    isCloseButton: false,
+                    value: transformValue(),
+                    onChange: handleChangeDate
+                })
+            }),
+            "multiple" === entry && children
+        ]
+    });
+};
+const ui_DateAndTimeMetaField = DateAndTimeMetaField;
+export { ui_DateAndTimeMetaField as default };

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

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

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

@@ -0,0 +1,33 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { BlockStack, DatePicker, InlineStack } from "@soppiya/elementus";
+import moment from "moment";
+const DateMetaField = ({ entry, value, children, onChange })=>{
+    const handleChangeDate = (event)=>{
+        const { value } = event.target;
+        const date = new Date(value);
+        onChange(String(date.getTime()));
+    };
+    const transformValue = ()=>{
+        if (!value) return "";
+        const date = moment(Number(value)).format("YYYY-MM-DD");
+        return date ? date : "";
+    };
+    console.log(transformValue());
+    return /*#__PURE__*/ jsxs(InlineStack, {
+        gapX: 60,
+        children: [
+            /*#__PURE__*/ jsx(BlockStack, {
+                children: /*#__PURE__*/ jsx(DatePicker, {
+                    size: "sm",
+                    name: "date",
+                    isCloseButton: false,
+                    value: transformValue(),
+                    onChange: handleChangeDate
+                })
+            }),
+            "multiple" === entry && children
+        ]
+    });
+};
+const ui_DateMetaField = DateMetaField;
+export { ui_DateMetaField as default };

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

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

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

@@ -0,0 +1,23 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import float_metafield from "@/shared/scss/atoms/float_metafield.css";
+import { Input } from "@soppiya/elementus";
+const FloatMetaField_FloatMetaField = ({ entry, value, children, onChange })=>/*#__PURE__*/ jsxs("div", {
+        className: float_metafield.wrapper,
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: float_metafield.input_row,
+                children: /*#__PURE__*/ jsx("div", {
+                    className: float_metafield.input,
+                    children: /*#__PURE__*/ jsx(Input, {
+                        size: "sm",
+                        type: "number",
+                        value: value,
+                        onChange: (e)=>onChange(e.target.value)
+                    })
+                })
+            }),
+            "multiple" === entry && children
+        ]
+    });
+const FloatMetaField = FloatMetaField_FloatMetaField;
+export { FloatMetaField as default };

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

@@ -0,0 +1,13 @@
+interface Props {
+    scope: string;
+    value?: {
+        metafield: string;
+        value: string[];
+    }[];
+    onChange?: (value: {
+        metafield: string;
+        value: string[];
+    }) => void;
+}
+declare const MetaData: ({ scope, value, onChange }: Props) => import("react/jsx-runtime").JSX.Element;
+export default MetaData;