@soppiya/app-bridge 1.0.8 → 1.0.9

package/dist/components/articles-picker/api/query.d.ts

@@ -0,0 +1,8 @@
+export declare const articlesQuery: import("@graphql-typed-document-node/core").TypedDocumentNode<import("../../../shared/graphql/graphql").ArticlesQuery, import("../../../shared/graphql/graphql").Exact<{
+    filterKeys?: import("../../../shared/graphql/graphql").InputMaybe<import("../../../shared/graphql/graphql").ArticleFilterKeys>;
+    after?: import("../../../shared/graphql/graphql").InputMaybe<import("../../../shared/graphql/graphql").Scalars["ID"]["input"]>;
+    before?: import("../../../shared/graphql/graphql").InputMaybe<import("../../../shared/graphql/graphql").Scalars["ID"]["input"]>;
+    first?: import("../../../shared/graphql/graphql").InputMaybe<import("../../../shared/graphql/graphql").Scalars["Int"]["input"]>;
+    last?: import("../../../shared/graphql/graphql").InputMaybe<import("../../../shared/graphql/graphql").Scalars["Int"]["input"]>;
+    query?: import("../../../shared/graphql/graphql").InputMaybe<import("../../../shared/graphql/graphql").Scalars["String"]["input"]>;
+}>>;

package/dist/components/articles-picker/api/query.js

@@ -0,0 +1,22 @@
+import { graphql } from "../../../shared/graphql/index.js";
+const articlesQuery = graphql(`query Articles($filterKeys: ArticleFilterKeys, $after: ID, $before: ID, $first: Int, $last: Int, $query: String) {
+  articles(filterKeys: $filterKeys, after: $after, before: $before, first: $first, last: $last, query: $query) {
+    edges {
+      node {
+        _id
+        title
+        image {
+          _id
+          url
+        }
+      }
+    }
+    pageInfo {
+      endCursor
+      hasNextPage
+      hasPreviousPage
+      startCursor
+    }
+  }
+}`);
+export { articlesQuery };

package/dist/components/articles-picker/model/useArticles.d.ts

@@ -0,0 +1,30 @@
+import { ArticleFilterKeys } from "../../../shared/graphql/graphql";
+type Props = {
+    skip?: boolean;
+    first?: number;
+    query?: string | null;
+    filterKeys?: ArticleFilterKeys;
+};
+export declare const userArticles: (props?: Props) => {
+    articles: {
+        __typename: "Article";
+        _id?: string | null;
+        title?: string | null;
+        image?: {
+            __typename: "Media";
+            _id?: string | null;
+            url?: string | null;
+        } | null;
+    }[] | undefined;
+    pageInfo: {
+        __typename: "PageInfo";
+        endCursor?: string | null;
+        hasNextPage?: boolean | null;
+        hasPreviousPage?: boolean | null;
+        startCursor?: string | null;
+    } | null | undefined;
+    isLoadingArticles: boolean;
+    error: import("@apollo/client").ErrorLike | undefined;
+    fetchMoreArticles: () => void;
+};
+export {};

package/dist/components/articles-picker/model/useArticles.js

@@ -0,0 +1,46 @@
+import { useQuery } from "@apollo/client/react";
+import { articlesQuery } from "../api/query.js";
+const userArticles = (props = {})=>{
+    const { first, query, filterKeys, skip } = props;
+    const { data, loading: isLoadingArticles, error, fetchMore } = useQuery(articlesQuery, {
+        skip,
+        variables: {
+            first,
+            query,
+            filterKeys
+        }
+    });
+    const articles = data?.articles?.edges?.map((edge)=>edge?.node).filter((node)=>null != node);
+    const pageInfo = data?.articles?.pageInfo;
+    const fetchMoreArticles = ()=>{
+        if (!pageInfo?.hasNextPage) return;
+        fetchMore({
+            variables: {
+                first,
+                query,
+                filterKeys,
+                after: pageInfo.endCursor
+            },
+            updateQuery (prev, { fetchMoreResult }) {
+                if (!fetchMoreResult.articles?.edges || !prev.articles?.edges) return prev;
+                return {
+                    articles: {
+                        ...fetchMoreResult.articles,
+                        edges: [
+                            ...prev.articles.edges,
+                            ...fetchMoreResult.articles.edges
+                        ]
+                    }
+                };
+            }
+        });
+    };
+    return {
+        articles,
+        pageInfo,
+        isLoadingArticles,
+        error,
+        fetchMoreArticles
+    };
+};
+export { userArticles };

package/dist/components/articles-picker/ui/ArticlesPicker.d.ts

@@ -0,0 +1,9 @@
+type Props = {
+    title?: string;
+    initialIds?: string[];
+    limit?: number;
+    onClose?: () => void;
+    onOk?: (articles: string[]) => void;
+};
+declare const ArticlesPicker: ({ title, initialIds, limit, onClose, onOk }: Props) => import("react/jsx-runtime").JSX.Element;
+export default ArticlesPicker;

package/dist/components/articles-picker/ui/ArticlesPicker.js

@@ -0,0 +1,107 @@
+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 { userArticles } from "../model/useArticles.js";
+const ArticlesPicker = ({ title, initialIds = [], limit = 1 / 0, onClose, onOk })=>{
+    const [selectedVariant, setSelectedVariant] = useState(initialIds);
+    const { query, debounceQuery, onChangeQuery } = useFilterQuery();
+    const { articles, pageInfo, isLoadingArticles, fetchMoreArticles } = userArticles({
+        first: 20,
+        query: debounceQuery
+    });
+    const isSelected = limit === 1 / 0 ? true : 1 === limit ? 1 === selectedVariant.length : selectedVariant.length >= limit;
+    const handleSelectVariant = (articleId)=>{
+        selectedVariant?.includes(articleId) ? setSelectedVariant((prev)=>prev?.filter((id)=>articleId !== id)) : setSelectedVariant((prev)=>[
+                ...prev,
+                articleId
+            ]);
+    };
+    const handleOk = ()=>{
+        if (lodash.isFunction(onOk)) onOk(selectedVariant);
+    };
+    const ButtonJSX = /*#__PURE__*/ jsx(InlineStack, {
+        gap: 50,
+        justifyContent: "end",
+        children: /*#__PURE__*/ jsx(Button, {
+            disabled: lodash.isEmpty(selectedVariant) || !isSelected,
+            onClick: handleOk,
+            children: "Add"
+        })
+    });
+    return /*#__PURE__*/ jsx(Modal, {
+        open: true,
+        title: title || "Artilces",
+        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)
+                    })
+                }),
+                isLoadingArticles ? /*#__PURE__*/ jsx(InlineStack, {
+                    justifyContent: "center",
+                    padding: 80,
+                    children: /*#__PURE__*/ jsx(Spinner, {
+                        size: "md"
+                    })
+                }) : /*#__PURE__*/ jsxs(BlockStack, {
+                    children: [
+                        articles?.map((article)=>/*#__PURE__*/ jsxs(InlineStack, {
+                                stack: "full",
+                                className: "lg:cursor-pointer border-b border-b-[#ebebeb]!",
+                                gapX: 60,
+                                padding: 60,
+                                onClick: ()=>handleSelectVariant(String(article._id)),
+                                children: [
+                                    /*#__PURE__*/ jsxs(InlineStack, {
+                                        alignItems: "center",
+                                        gapX: 60,
+                                        children: [
+                                            /*#__PURE__*/ jsx(Box, {
+                                                children: /*#__PURE__*/ jsx(Checkbox, {
+                                                    checked: selectedVariant.includes(String(article._id)),
+                                                    onChange: ()=>{}
+                                                })
+                                            }),
+                                            /*#__PURE__*/ jsx(Box, {
+                                                children: /*#__PURE__*/ jsx(Image, {
+                                                    size: "xs",
+                                                    url: String(article.image?.url)
+                                                })
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsx(BlockStack, {
+                                        gapY: 30,
+                                        justifyContent: "center",
+                                        children: /*#__PURE__*/ jsx(Text, {
+                                            size: "sm",
+                                            color: "secondary",
+                                            truncate: "truncate-1",
+                                            children: article.title
+                                        })
+                                    })
+                                ]
+                            }, article._id)),
+                        pageInfo?.hasNextPage && /*#__PURE__*/ jsx(InfinityScroll, {
+                            onFetch: fetchMoreArticles
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+const ui_ArticlesPicker = ArticlesPicker;
+export { ui_ArticlesPicker as default };

package/dist/components/articles-picker/ui/ProductPicker.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?: (articles: string[]) => void;
+    }) => import("react/jsx-runtime").JSX.Element;
+};
+export default meta;
+export declare const Default: {
+    args: {
+        primary: boolean;
+        label: string;
+    };
+};

package/dist/components/articles-picker/ui/ProductPicker.stories.js

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

package/dist/components/blogs-picker/api/query.d.ts

@@ -0,0 +1,8 @@
+export declare const blogsQuery: import("@graphql-typed-document-node/core").TypedDocumentNode<import("../../../shared/graphql/graphql").BlogsQuery, import("../../../shared/graphql/graphql").Exact<{
+    filterKeys?: import("../../../shared/graphql/graphql").InputMaybe<import("../../../shared/graphql/graphql").BlogFilterKeys>;
+    after?: import("../../../shared/graphql/graphql").InputMaybe<import("../../../shared/graphql/graphql").Scalars["ID"]["input"]>;
+    before?: import("../../../shared/graphql/graphql").InputMaybe<import("../../../shared/graphql/graphql").Scalars["ID"]["input"]>;
+    first?: import("../../../shared/graphql/graphql").InputMaybe<import("../../../shared/graphql/graphql").Scalars["Int"]["input"]>;
+    last?: import("../../../shared/graphql/graphql").InputMaybe<import("../../../shared/graphql/graphql").Scalars["Int"]["input"]>;
+    query?: import("../../../shared/graphql/graphql").InputMaybe<import("../../../shared/graphql/graphql").Scalars["String"]["input"]>;
+}>>;

package/dist/components/blogs-picker/api/query.js

@@ -0,0 +1,22 @@
+import { graphql } from "../../../shared/graphql/index.js";
+const blogsQuery = graphql(`query Blogs($filterKeys: BlogFilterKeys, $after: ID, $before: ID, $first: Int, $last: Int, $query: String) {
+  blogs(filterKeys: $filterKeys, after: $after, before: $before, first: $first, last: $last, query: $query) {
+    pageInfo {
+      endCursor
+      hasNextPage
+      hasPreviousPage
+      startCursor
+    }
+    edges {
+      node {
+        _id
+        title
+        image {
+          _id
+          url
+        }
+      }
+    }
+  }
+}`);
+export { blogsQuery };

package/dist/components/blogs-picker/model/useBlogs.d.ts

@@ -0,0 +1,30 @@
+import { BlogFilterKeys } from "../../../shared/graphql/graphql";
+type Props = {
+    skip?: boolean;
+    first?: number;
+    query?: string | null;
+    filterKeys?: BlogFilterKeys;
+};
+export declare const useBlogs: (props?: Props) => {
+    blogs: {
+        __typename: "Blog";
+        _id?: string | null;
+        title?: string | null;
+        image?: {
+            __typename: "Media";
+            _id?: string | null;
+            url?: string | null;
+        } | null;
+    }[] | undefined;
+    pageInfo: {
+        __typename: "PageInfo";
+        endCursor?: string | null;
+        hasNextPage?: boolean | null;
+        hasPreviousPage?: boolean | null;
+        startCursor?: string | null;
+    } | null | undefined;
+    isLoadingBlogs: boolean;
+    error: import("@apollo/client").ErrorLike | undefined;
+    fetchMoreBlogs: () => void;
+};
+export {};

package/dist/components/blogs-picker/model/useBlogs.js

@@ -0,0 +1,46 @@
+import { useQuery } from "@apollo/client/react";
+import { blogsQuery } from "../api/query.js";
+const useBlogs = (props = {})=>{
+    const { first, skip, query, filterKeys } = props;
+    const { data, loading: isLoadingBlogs, error, fetchMore } = useQuery(blogsQuery, {
+        skip,
+        variables: {
+            first,
+            query,
+            filterKeys
+        }
+    });
+    const blogs = data?.blogs?.edges?.map((edge)=>edge?.node).filter((node)=>null != node);
+    const pageInfo = data?.blogs?.pageInfo;
+    const fetchMoreBlogs = ()=>{
+        if (!pageInfo?.hasNextPage) return;
+        fetchMore({
+            variables: {
+                first,
+                query,
+                filterKeys,
+                after: pageInfo.endCursor
+            },
+            updateQuery (prev, { fetchMoreResult }) {
+                if (!fetchMoreResult.blogs?.edges || !prev.blogs?.edges) return prev;
+                return {
+                    blogs: {
+                        ...fetchMoreResult.blogs,
+                        edges: [
+                            ...prev.blogs.edges,
+                            ...fetchMoreResult.blogs.edges
+                        ]
+                    }
+                };
+            }
+        });
+    };
+    return {
+        blogs,
+        pageInfo,
+        isLoadingBlogs,
+        error,
+        fetchMoreBlogs
+    };
+};
+export { useBlogs };

package/dist/components/blogs-picker/ui/BlogsPicker.d.ts

@@ -0,0 +1,9 @@
+type Props = {
+    title?: string;
+    initialIds?: string[];
+    limit?: number;
+    onClose?: () => void;
+    onOk?: (products: string[]) => void;
+};
+declare const BlogsPicker: ({ title, initialIds, limit, onClose, onOk }: Props) => import("react/jsx-runtime").JSX.Element;
+export default BlogsPicker;

package/dist/components/blogs-picker/ui/BlogsPicker.js

@@ -0,0 +1,107 @@
+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 { useBlogs } from "../model/useBlogs.js";
+const BlogsPicker = ({ title, initialIds = [], limit = 1 / 0, onClose, onOk })=>{
+    const [selectedBlog, setSelectedBlog] = useState(initialIds);
+    const { query, debounceQuery, onChangeQuery } = useFilterQuery();
+    const { blogs, isLoadingBlogs, fetchMoreBlogs, pageInfo } = useBlogs({
+        first: 20,
+        query: debounceQuery
+    });
+    const isSelected = limit === 1 / 0 ? true : 1 === limit ? 1 === selectedBlog.length : selectedBlog.length >= limit;
+    const handleSelectedBlog = (blogId)=>{
+        selectedBlog.includes(blogId) ? setSelectedBlog((prev)=>prev.filter((id)=>id !== blogId)) : setSelectedBlog((prev)=>[
+                ...prev,
+                blogId
+            ]);
+    };
+    const handleOk = ()=>{
+        if (lodash.isFunction(onOk)) onOk(selectedBlog);
+    };
+    console.log(selectedBlog);
+    const ButtonJSX = /*#__PURE__*/ jsx(InlineStack, {
+        justifyContent: "end",
+        children: /*#__PURE__*/ jsx(Button, {
+            onClick: handleOk,
+            disabled: lodash.isEmpty(selectedBlog) || !isSelected,
+            children: "Add"
+        })
+    });
+    return /*#__PURE__*/ jsx(Modal, {
+        open: true,
+        title: title || "Blogs",
+        buttons: ButtonJSX,
+        bodyPadding: 0,
+        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)
+                    })
+                }),
+                isLoadingBlogs ? /*#__PURE__*/ jsx(InlineStack, {
+                    justifyContent: "center",
+                    padding: 80,
+                    children: /*#__PURE__*/ jsx(Spinner, {
+                        size: "md"
+                    })
+                }) : /*#__PURE__*/ jsxs(BlockStack, {
+                    children: [
+                        blogs?.map((blog)=>/*#__PURE__*/ jsxs(InlineStack, {
+                                stack: "full",
+                                className: "lg:cursor-pointer border-b border-b-[#ebebeb]!",
+                                gapX: 60,
+                                padding: 60,
+                                onClick: ()=>handleSelectedBlog(String(blog._id)),
+                                children: [
+                                    /*#__PURE__*/ jsxs(InlineStack, {
+                                        alignItems: "center",
+                                        gapX: 60,
+                                        children: [
+                                            /*#__PURE__*/ jsx(Box, {
+                                                children: /*#__PURE__*/ jsx(Checkbox, {
+                                                    checked: selectedBlog.includes(String(blog._id)),
+                                                    onChange: ()=>{}
+                                                })
+                                            }),
+                                            /*#__PURE__*/ jsx(Box, {
+                                                children: /*#__PURE__*/ jsx(Image, {
+                                                    size: "xs",
+                                                    url: String(blog.image?.url ?? "")
+                                                })
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsx(BlockStack, {
+                                        gapY: 30,
+                                        justifyContent: "center",
+                                        children: /*#__PURE__*/ jsx(Text, {
+                                            size: "sm",
+                                            color: "secondary",
+                                            truncate: "truncate-1",
+                                            children: blog.title
+                                        })
+                                    })
+                                ]
+                            }, blog._id)),
+                        pageInfo?.hasNextPage && /*#__PURE__*/ jsx(InfinityScroll, {
+                            onFetch: fetchMoreBlogs
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+const ui_BlogsPicker = BlogsPicker;
+export { ui_BlogsPicker as default };

package/dist/components/blogs-picker/ui/BlogsPicker.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?: (products: string[]) => void;
+    }) => import("react/jsx-runtime").JSX.Element;
+};
+export default meta;
+export declare const Default: {
+    args: {
+        primary: boolean;
+        label: string;
+    };
+};

package/dist/components/blogs-picker/ui/BlogsPicker.stories.js

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

package/dist/components/collections-pciker/api/query.d.ts

@@ -0,0 +1,5 @@
+export declare const collectionQuery: import("@graphql-typed-document-node/core").TypedDocumentNode<import("../../../shared/graphql/graphql").CollectionsQuery, import("../../../shared/graphql/graphql").Exact<{
+    skip?: import("../../../shared/graphql/graphql").InputMaybe<import("../../../shared/graphql/graphql").Scalars["Int"]["input"]>;
+    filterKeys?: import("../../../shared/graphql/graphql").InputMaybe<import("../../../shared/graphql/graphql").CollectionFilterKeys>;
+    query?: import("../../../shared/graphql/graphql").InputMaybe<import("../../../shared/graphql/graphql").Scalars["String"]["input"]>;
+}>>;

package/dist/components/collections-pciker/api/query.js

@@ -0,0 +1,22 @@
+import { graphql } from "../../../shared/graphql/index.js";
+const collectionQuery = graphql(`query Collections($skip: Int, $filterKeys: CollectionFilterKeys, $query: String) {
+  collections(skip: $skip, filterKeys: $filterKeys, query: $query) {
+    edges {
+      node {
+        _id
+        title
+        image {
+          _id
+          url
+        }
+      }
+    }
+    pageInfo {
+      endCursor
+      hasNextPage
+      hasPreviousPage
+      startCursor
+    }
+  }
+}`);
+export { collectionQuery };

package/dist/components/collections-pciker/model/useCollections.d.ts

@@ -0,0 +1,29 @@
+import { CollectionFilterKeys } from "../../../shared/graphql/graphql";
+type Props = {
+    skip?: number;
+    query?: string | null;
+    filterKeys?: CollectionFilterKeys;
+};
+export declare const useCollections: (props?: Props) => {
+    collections: {
+        __typename: "Collection";
+        _id?: string | null;
+        title?: string | null;
+        image?: {
+            __typename: "Media";
+            _id?: string | null;
+            url?: string | null;
+        } | null;
+    }[] | undefined;
+    pageInfo: {
+        __typename: "PageInfo";
+        endCursor?: string | null;
+        hasNextPage?: boolean | null;
+        hasPreviousPage?: boolean | null;
+        startCursor?: string | null;
+    } | null | undefined;
+    isLoadingCollections: boolean;
+    error: import("@apollo/client").ErrorLike | undefined;
+    fetchMoreCollections: () => void;
+};
+export {};

package/dist/components/collections-pciker/model/useCollections.js

@@ -0,0 +1,32 @@
+import { useQuery } from "@apollo/client/react";
+import { collectionQuery } from "../api/query.js";
+const useCollections = (props = {})=>{
+    const { skip, query, filterKeys } = props;
+    const { data, loading: isLoadingCollections, error, fetchMore } = useQuery(collectionQuery, {
+        variables: {
+            filterKeys,
+            query,
+            skip
+        }
+    });
+    const collections = data?.collections?.edges?.map((edge)=>edge?.node)?.filter((node)=>null != node);
+    const pageInfo = data?.collections?.pageInfo;
+    const fetchMoreCollections = ()=>{
+        if (!pageInfo?.hasNextPage) return;
+        fetchMore({
+            variables: {
+                filterKeys,
+                query,
+                skip
+            }
+        });
+    };
+    return {
+        collections,
+        pageInfo,
+        isLoadingCollections,
+        error,
+        fetchMoreCollections
+    };
+};
+export { useCollections };

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

@@ -0,0 +1,9 @@
+type Props = {
+    title?: string;
+    initialIds?: string[];
+    limit?: number;
+    onClose?: () => void;
+    onOk?: (collections: string[]) => void;
+};
+declare const CollectionPicker: ({ title, initialIds, limit, onClose, onOk }: Props) => import("react/jsx-runtime").JSX.Element;
+export default CollectionPicker;