@soppiya/app-bridge 1.0.0 → 1.0.4

package/dist/components/index.d.ts

@@ -1,2 +1,3 @@
 export { Media } from "./media";
 export { SaveBar } from "./savebar";
+export { VariantsPicker } from "./variants-picker";

package/dist/components/index.js

@@ -1,3 +1,4 @@
 import { Media } from "./media/index.js";
 import { SaveBar } from "./savebar/index.js";
-export { Media, SaveBar };
+import { VariantsPicker } from "./variants-picker/index.js";
+export { Media, SaveBar, VariantsPicker };

package/dist/components/media/MediaPreview.js

@@ -108,7 +108,7 @@ const MediaPreview_MediaPreview = ({ media, onClose })=>{
                         weight: "medium",
                         color: "info",
                         children: [
-                            "\u2022",
+                            "•",
                             formatToBytes(Number(media?.size), 2)
                         ]
                     }),

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

@@ -0,0 +1,7 @@
+export declare const variantsQuery: import("@graphql-typed-document-node/core").TypedDocumentNode<import("../../../shared/graphql/graphql").VariantsQuery, import("../../../shared/graphql/graphql").Exact<{
+    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/variants-picker/api/query.js

@@ -0,0 +1,30 @@
+import { graphql } from "../../../shared/graphql/index.js";
+const variantsQuery = graphql(`
+  query Variants($after: ID, $before: ID, $first: Int, $last: Int, $query: String) {
+    variants(after: $after, before: $before, first: $first, last: $last, query: $query) {
+      pageInfo {
+        endCursor
+        hasNextPage
+        hasPreviousPage
+        startCursor
+      }
+      edges {
+        node {
+          _id
+          option1
+          option2
+          option3
+          image {
+            _id
+            url
+          }
+          product {
+            _id
+            title
+          }
+        }
+      }
+    }
+  }
+`);
+export { variantsQuery };

package/dist/components/variants-picker/index.d.ts

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

package/dist/components/variants-picker/index.js

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

package/dist/components/variants-picker/model/useVariants.d.ts

@@ -0,0 +1,34 @@
+type Props = {
+    first?: number;
+    query?: string | null;
+};
+export declare const useVariants: (props?: Props) => {
+    variants: {
+        __typename: "Variant";
+        _id?: string | null;
+        option1?: string | null;
+        option2?: string | null;
+        option3?: string | null;
+        image?: {
+            __typename: "Media";
+            _id?: string | null;
+            url?: string | null;
+        } | null;
+        product?: {
+            __typename: "Product";
+            _id?: string | null;
+            title?: string | null;
+        } | null;
+    }[];
+    pageInfo: {
+        __typename: "PageInfo";
+        endCursor?: string | null;
+        hasNextPage?: boolean | null;
+        hasPreviousPage?: boolean | null;
+        startCursor?: string | null;
+    } | null | undefined;
+    isLoadingVariants: boolean;
+    error: import("@apollo/client").ErrorLike | undefined;
+    fetchMoreVariants: () => void;
+};
+export {};

package/dist/components/variants-picker/model/useVariants.js

@@ -0,0 +1,45 @@
+import { useQuery } from "@apollo/client/react";
+import { useRef } from "react";
+import { variantsQuery } from "../api/query.js";
+const useVariants = (props = {})=>{
+    const { first, query } = props;
+    const refArray = useRef([]);
+    const { data, loading: isLoadingVariants, error, fetchMore } = useQuery(variantsQuery, {
+        variables: {
+            first,
+            query
+        }
+    });
+    const variants = data?.variants?.edges?.map((edge)=>edge?.node).filter((node)=>null != node) ?? refArray.current;
+    const pageInfo = data?.variants?.pageInfo;
+    const fetchMoreVariants = ()=>{
+        if (!pageInfo?.hasNextPage) return;
+        fetchMore({
+            variables: {
+                first,
+                query,
+                after: pageInfo.endCursor
+            },
+            updateQuery (prev, { fetchMoreResult }) {
+                if (!fetchMoreResult.variants?.edges || !prev.variants?.edges) return prev;
+                return {
+                    variants: {
+                        ...fetchMoreResult.variants,
+                        edges: [
+                            ...prev.variants.edges,
+                            ...fetchMoreResult.variants.edges
+                        ]
+                    }
+                };
+            }
+        });
+    };
+    return {
+        variants,
+        pageInfo,
+        isLoadingVariants,
+        error,
+        fetchMoreVariants
+    };
+};
+export { useVariants };

package/dist/components/variants-picker/ui/VariantsPicker.d.ts

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

package/dist/components/variants-picker/ui/VariantsPicker.js

@@ -0,0 +1,113 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { InfinityScroll } from "../../infinity-scroll/index.js";
+import { useFilterQuery } from "../../../shared/lib/index.js";
+import { Badge, BlockStack, Box, Button, Checkbox, Image, InlineStack, Input, Modal, Spinner, Text } from "@soppiya/elementus";
+import lodash from "lodash";
+import { useState } from "react";
+import { useVariants } from "../model/useVariants.js";
+const VariantsPicker = ({ initialIds = [], onClose, onOk })=>{
+    const [selectedVariant, setSelectedVariant] = useState(initialIds);
+    const { query, debounceQuery, onChangeQuery } = useFilterQuery();
+    const { variants, pageInfo, isLoadingVariants, fetchMoreVariants } = useVariants({
+        first: 20,
+        query: debounceQuery
+    });
+    const handleSelectVariant = (variantId)=>{
+        selectedVariant.includes(variantId) ? setSelectedVariant((prev)=>prev.filter((id)=>variantId !== id)) : setSelectedVariant((prev)=>[
+                ...prev,
+                variantId
+            ]);
+    };
+    const handleOk = ()=>{
+        if (lodash.isFunction(onOk)) onOk(selectedVariant);
+    };
+    const buttonsJSX = /*#__PURE__*/ jsx(InlineStack, {
+        gap: 50,
+        justifyContent: "end",
+        children: /*#__PURE__*/ jsx(Button, {
+            disabled: lodash.isEmpty(selectedVariant),
+            onClick: handleOk,
+            children: "Add"
+        })
+    });
+    return /*#__PURE__*/ jsx(Modal, {
+        open: true,
+        title: "Add inventory",
+        bodyPadding: 0,
+        buttons: buttonsJSX,
+        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)
+                    })
+                }),
+                isLoadingVariants ? /*#__PURE__*/ jsx(InlineStack, {
+                    justifyContent: "center",
+                    padding: 80,
+                    children: /*#__PURE__*/ jsx(Spinner, {
+                        size: "md"
+                    })
+                }) : /*#__PURE__*/ jsxs(BlockStack, {
+                    children: [
+                        variants.map((variant)=>/*#__PURE__*/ jsxs(InlineStack, {
+                                stack: "full",
+                                className: "lg:cursor-pointer border-b border-b-[#ebebeb]!",
+                                gapX: 60,
+                                padding: 60,
+                                children: [
+                                    /*#__PURE__*/ jsxs(InlineStack, {
+                                        alignItems: "center",
+                                        gapX: 60,
+                                        children: [
+                                            /*#__PURE__*/ jsx(Box, {
+                                                children: /*#__PURE__*/ jsx(Checkbox, {
+                                                    checked: selectedVariant.includes(String(variant._id)),
+                                                    onChange: ()=>handleSelectVariant(String(variant._id))
+                                                })
+                                            }),
+                                            /*#__PURE__*/ jsx(Box, {
+                                                children: /*#__PURE__*/ jsx(Image, {
+                                                    size: "xs",
+                                                    url: String(variant.image?.url)
+                                                })
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsxs(BlockStack, {
+                                        gapY: 30,
+                                        children: [
+                                            /*#__PURE__*/ jsx(Text, {
+                                                size: "sm",
+                                                color: "secondary",
+                                                truncate: "truncate-1",
+                                                children: variant.product?.title
+                                            }),
+                                            /*#__PURE__*/ jsx(Badge, {
+                                                children: [
+                                                    variant.option1,
+                                                    variant.option2,
+                                                    variant.option3
+                                                ].filter(Boolean).join(" - ") || "Default"
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })),
+                        pageInfo?.hasNextPage && /*#__PURE__*/ jsx(InfinityScroll, {
+                            onFetch: fetchMoreVariants
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+const ui_VariantsPicker = VariantsPicker;
+export { ui_VariantsPicker as default };

package/dist/components/variants-picker/ui/VariantsPicker.stories.d.ts

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

package/dist/components/variants-picker/ui/VariantsPicker.stories.js

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

package/dist/shared/graphql/gql.d.ts

@@ -17,6 +17,7 @@ type Documents = {
     "\n  query MediaUsage {\n    mediaUsage\n  }\n": typeof types.MediaUsageDocument;
     "\n  mutation AddMedias($input: [Upload!]!) {\n    addMedias(input: $input) {\n      _id\n      file_name\n      url\n      size\n    }\n  }\n": typeof types.AddMediasDocument;
     "\n  mutation DeleteMedias($cursors: [ID!]!) {\n    deleteMedias(cursors: $cursors) {\n      message\n    }\n  }\n": typeof types.DeleteMediasDocument;
+    "\n  query Variants($after: ID, $before: ID, $first: Int, $last: Int, $query: String) {\n    variants(after: $after, before: $before, first: $first, last: $last, query: $query) {\n      pageInfo {\n        endCursor\n        hasNextPage\n        hasPreviousPage\n        startCursor\n      }\n      edges {\n        node {\n          _id\n          option1\n          option2\n          option3\n          image {\n            _id\n            url\n          }\n          product {\n            _id\n            title\n          }\n        }\n      }\n    }\n  }\n": typeof types.VariantsDocument;
 };
 declare const documents: Documents;
 /**
@@ -52,5 +53,9 @@ export declare function graphql(source: "\n  mutation AddMedias($input: [Upload!
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
 export declare function graphql(source: "\n  mutation DeleteMedias($cursors: [ID!]!) {\n    deleteMedias(cursors: $cursors) {\n      message\n    }\n  }\n"): (typeof documents)["\n  mutation DeleteMedias($cursors: [ID!]!) {\n    deleteMedias(cursors: $cursors) {\n      message\n    }\n  }\n"];
+/**
+ * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export declare function graphql(source: "\n  query Variants($after: ID, $before: ID, $first: Int, $last: Int, $query: String) {\n    variants(after: $after, before: $before, first: $first, last: $last, query: $query) {\n      pageInfo {\n        endCursor\n        hasNextPage\n        hasPreviousPage\n        startCursor\n      }\n      edges {\n        node {\n          _id\n          option1\n          option2\n          option3\n          image {\n            _id\n            url\n          }\n          product {\n            _id\n            title\n          }\n        }\n      }\n    }\n  }\n"): (typeof documents)["\n  query Variants($after: ID, $before: ID, $first: Int, $last: Int, $query: String) {\n    variants(after: $after, before: $before, first: $first, last: $last, query: $query) {\n      pageInfo {\n        endCursor\n        hasNextPage\n        hasPreviousPage\n        startCursor\n      }\n      edges {\n        node {\n          _id\n          option1\n          option2\n          option3\n          image {\n            _id\n            url\n          }\n          product {\n            _id\n            title\n          }\n        }\n      }\n    }\n  }\n"];
 export type DocumentType<TDocumentNode extends DocumentNode<any, any>> = TDocumentNode extends DocumentNode<infer TType, any> ? TType : never;
 export {};

package/dist/shared/graphql/gql.js

@@ -1,10 +1,11 @@
-import { AddMediasDocument, DeleteMediasDocument, MediaUsageDocument, MediasDocument, StoragePlanDocument } from "./graphql.js";
+import { AddMediasDocument, DeleteMediasDocument, MediaUsageDocument, MediasDocument, StoragePlanDocument, VariantsDocument } from "./graphql.js";
 const documents = {
     "\n  query Medias(\n    $after: ID\n    $before: ID\n    $first: Int\n    $last: Int\n    $query: String\n    $reverse: Boolean\n    $sortKey: MediaSortKeys\n    $filterKeys: MediaFilterKeys\n  ) {\n    medias(\n      after: $after\n      before: $before\n      first: $first\n      last: $last\n      query: $query\n      reverse: $reverse\n      sortKey: $sortKey\n      filterKeys: $filterKeys\n    ) {\n      edges {\n        node {\n          _id\n          file_name\n          url\n          size\n          type\n          mimetype\n        }\n      }\n      pageInfo {\n        endCursor\n        hasNextPage\n        hasPreviousPage\n        startCursor\n      }\n    }\n  }\n": MediasDocument,
     "\n  query StoragePlan {\n    plan {\n      storage\n      package {\n        _id\n        storage\n      }\n    }\n  }\n": StoragePlanDocument,
     "\n  query MediaUsage {\n    mediaUsage\n  }\n": MediaUsageDocument,
     "\n  mutation AddMedias($input: [Upload!]!) {\n    addMedias(input: $input) {\n      _id\n      file_name\n      url\n      size\n    }\n  }\n": AddMediasDocument,
-    "\n  mutation DeleteMedias($cursors: [ID!]!) {\n    deleteMedias(cursors: $cursors) {\n      message\n    }\n  }\n": DeleteMediasDocument
+    "\n  mutation DeleteMedias($cursors: [ID!]!) {\n    deleteMedias(cursors: $cursors) {\n      message\n    }\n  }\n": DeleteMediasDocument,
+    "\n  query Variants($after: ID, $before: ID, $first: Int, $last: Int, $query: String) {\n    variants(after: $after, before: $before, first: $first, last: $last, query: $query) {\n      pageInfo {\n        endCursor\n        hasNextPage\n        hasPreviousPage\n        startCursor\n      }\n      edges {\n        node {\n          _id\n          option1\n          option2\n          option3\n          image {\n            _id\n            url\n          }\n          product {\n            _id\n            title\n          }\n        }\n      }\n    }\n  }\n": VariantsDocument
 };
 function graphql(source) {
     return documents[source] ?? {};