@soppiya/app-bridge 1.0.8 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (116) hide show
  1. package/dist/components/articles-picker/api/query.d.ts +8 -0
  2. package/dist/components/articles-picker/api/query.js +22 -0
  3. package/dist/components/articles-picker/index.d.ts +1 -0
  4. package/dist/components/articles-picker/index.js +2 -0
  5. package/dist/components/articles-picker/model/useArticles.d.ts +30 -0
  6. package/dist/components/articles-picker/model/useArticles.js +46 -0
  7. package/dist/components/articles-picker/ui/ArticlesPicker.d.ts +9 -0
  8. package/dist/components/articles-picker/ui/ArticlesPicker.js +107 -0
  9. package/dist/components/articles-picker/ui/ProductPicker.stories.d.ts +17 -0
  10. package/dist/components/articles-picker/ui/ProductPicker.stories.js +13 -0
  11. package/dist/components/blogs-picker/api/query.d.ts +8 -0
  12. package/dist/components/blogs-picker/api/query.js +22 -0
  13. package/dist/components/blogs-picker/index.d.ts +1 -0
  14. package/dist/components/blogs-picker/index.js +2 -0
  15. package/dist/components/blogs-picker/model/useBlogs.d.ts +30 -0
  16. package/dist/components/blogs-picker/model/useBlogs.js +46 -0
  17. package/dist/components/blogs-picker/ui/BlogsPicker.d.ts +9 -0
  18. package/dist/components/blogs-picker/ui/BlogsPicker.js +107 -0
  19. package/dist/components/blogs-picker/ui/BlogsPicker.stories.d.ts +17 -0
  20. package/dist/components/blogs-picker/ui/BlogsPicker.stories.js +13 -0
  21. package/dist/components/collections-pciker/api/query.d.ts +5 -0
  22. package/dist/components/collections-pciker/api/query.js +22 -0
  23. package/dist/components/collections-pciker/index.d.ts +1 -0
  24. package/dist/components/collections-pciker/index.js +2 -0
  25. package/dist/components/collections-pciker/model/useCollections.d.ts +29 -0
  26. package/dist/components/collections-pciker/model/useCollections.js +32 -0
  27. package/dist/components/collections-pciker/ui/CollectionPicker.d.ts +9 -0
  28. package/dist/components/collections-pciker/ui/CollectionPicker.js +105 -0
  29. package/dist/components/collections-pciker/ui/CollectionPicker.stories.d.ts +17 -0
  30. package/dist/components/collections-pciker/ui/CollectionPicker.stories.js +13 -0
  31. package/dist/components/index.d.ts +9 -3
  32. package/dist/components/index.js +9 -4
  33. package/dist/components/meta-data/api/query.d.ts +4 -0
  34. package/dist/components/meta-data/api/query.js +14 -0
  35. package/dist/components/meta-data/index.d.ts +1 -0
  36. package/dist/components/meta-data/index.js +2 -0
  37. package/dist/components/meta-data/model/meta.types.d.ts +7 -0
  38. package/dist/components/meta-data/model/meta.types.js +33 -0
  39. package/dist/components/meta-data/model/schema.d.ts +0 -0
  40. package/dist/components/meta-data/model/schema.js +0 -0
  41. package/dist/components/meta-data/model/useGetMetaFields.d.ts +12 -0
  42. package/dist/components/meta-data/model/useGetMetaFields.js +18 -0
  43. package/dist/components/meta-data/ui/ArticleRefMetaField.d.ts +3 -0
  44. package/dist/components/meta-data/ui/ArticleRefMetaField.js +37 -0
  45. package/dist/components/meta-data/ui/BlogRefMetaField.d.ts +3 -0
  46. package/dist/components/meta-data/ui/BlogRefMetaField.js +37 -0
  47. package/dist/components/meta-data/ui/BooleanMetaField.d.ts +3 -0
  48. package/dist/components/meta-data/ui/BooleanMetaField.js +27 -0
  49. package/dist/components/meta-data/ui/CollectionRefMetaField.d.ts +3 -0
  50. package/dist/components/meta-data/ui/CollectionRefMetaField.js +36 -0
  51. package/dist/components/meta-data/ui/ColorMetaField.d.ts +3 -0
  52. package/dist/components/meta-data/ui/ColorMetaField.js +17 -0
  53. package/dist/components/meta-data/ui/DateAndTimeMetaField.d.ts +3 -0
  54. package/dist/components/meta-data/ui/DateAndTimeMetaField.js +34 -0
  55. package/dist/components/meta-data/ui/DateMetaField.d.ts +3 -0
  56. package/dist/components/meta-data/ui/DateMetaField.js +33 -0
  57. package/dist/components/meta-data/ui/FloatMetaField.d.ts +3 -0
  58. package/dist/components/meta-data/ui/FloatMetaField.js +23 -0
  59. package/dist/components/meta-data/ui/MetaData.d.ts +13 -0
  60. package/dist/components/meta-data/ui/MetaData.js +66 -0
  61. package/dist/components/meta-data/ui/MetaData.stories.d.ts +10 -0
  62. package/dist/components/meta-data/ui/MetaData.stories.js +136 -0
  63. package/dist/components/meta-data/ui/MetaDataItem.d.ts +16 -0
  64. package/dist/components/meta-data/ui/MetaDataItem.js +256 -0
  65. package/dist/components/meta-data/ui/MetaDataTypePopup.d.ts +11 -0
  66. package/dist/components/meta-data/ui/MetaDataTypePopup.js +70 -0
  67. package/dist/components/meta-data/ui/MultilineTextMetaField.d.ts +3 -0
  68. package/dist/components/meta-data/ui/MultilineTextMetaField.js +15 -0
  69. package/dist/components/meta-data/ui/NumberMetaField.d.ts +3 -0
  70. package/dist/components/meta-data/ui/NumberMetaField.js +19 -0
  71. package/dist/components/meta-data/ui/PageRefMetaField.d.ts +3 -0
  72. package/dist/components/meta-data/ui/PageRefMetaField.js +37 -0
  73. package/dist/components/meta-data/ui/ProductRefMetaField.d.ts +3 -0
  74. package/dist/components/meta-data/ui/ProductRefMetaField.js +37 -0
  75. package/dist/components/meta-data/ui/SingleLineTextMetaField.d.ts +3 -0
  76. package/dist/components/meta-data/ui/SingleLineTextMetaField.js +18 -0
  77. package/dist/components/meta-data/ui/VariantRefMetaField.d.ts +3 -0
  78. package/dist/components/meta-data/ui/VariantRefMetaField.js +45 -0
  79. package/dist/components/pages-picker/api/query.d.ts +8 -0
  80. package/dist/components/pages-picker/api/query.js +22 -0
  81. package/dist/components/pages-picker/index.d.ts +1 -0
  82. package/dist/components/pages-picker/index.js +2 -0
  83. package/dist/components/pages-picker/model/usePages.d.ts +30 -0
  84. package/dist/components/pages-picker/model/usePages.js +46 -0
  85. package/dist/components/pages-picker/ui/PagesPicker.d.ts +9 -0
  86. package/dist/components/pages-picker/ui/PagesPicker.js +104 -0
  87. package/dist/components/pages-picker/ui/PagesPicker.stories.d.ts +17 -0
  88. package/dist/components/pages-picker/ui/PagesPicker.stories.js +13 -0
  89. package/dist/components/products-picker/api/query.d.ts +8 -0
  90. package/dist/components/products-picker/api/query.js +24 -0
  91. package/dist/components/products-picker/index.d.ts +1 -0
  92. package/dist/components/products-picker/index.js +2 -0
  93. package/dist/components/products-picker/model/useProducts.d.ts +30 -0
  94. package/dist/components/products-picker/model/useProducts.js +46 -0
  95. package/dist/components/products-picker/ui/ProductPicker.d.ts +9 -0
  96. package/dist/components/products-picker/ui/ProductPicker.js +107 -0
  97. package/dist/components/products-picker/ui/ProductsPicker.stories.d.ts +17 -0
  98. package/dist/components/products-picker/ui/ProductsPicker.stories.js +13 -0
  99. package/dist/components/variants-picker/api/query.d.ts +1 -0
  100. package/dist/components/variants-picker/api/query.js +2 -2
  101. package/dist/components/variants-picker/model/useVariants.d.ts +3 -0
  102. package/dist/components/variants-picker/model/useVariants.js +6 -3
  103. package/dist/components/variants-picker/ui/VariantsPicker.d.ts +2 -1
  104. package/dist/components/variants-picker/ui/VariantsPicker.js +3 -2
  105. package/dist/components/variants-picker/ui/VariantsPicker.stories.d.ts +2 -1
  106. package/dist/index.d.ts +2 -2
  107. package/dist/shared/graphql/gql.d.ts +32 -2
  108. package/dist/shared/graphql/gql.js +8 -2
  109. package/dist/shared/graphql/graphql.d.ts +2296 -100
  110. package/dist/shared/graphql/graphql.js +2382 -297
  111. package/dist/shared/loading/Loading.d.ts +2 -0
  112. package/dist/shared/loading/Loading.js +11 -0
  113. package/dist/shared/loading/index.d.ts +1 -0
  114. package/dist/shared/loading/index.js +2 -0
  115. package/dist/styles.css +118 -0
  116. package/package.json +4 -2
@@ -0,0 +1,8 @@
1
+ export declare const articlesQuery: import("@graphql-typed-document-node/core").TypedDocumentNode<import("../../../shared/graphql/graphql").ArticlesQuery, import("../../../shared/graphql/graphql").Exact<{
2
+ filterKeys?: import("../../../shared/graphql/graphql").InputMaybe<import("../../../shared/graphql/graphql").ArticleFilterKeys>;
3
+ after?: import("../../../shared/graphql/graphql").InputMaybe<import("../../../shared/graphql/graphql").Scalars["ID"]["input"]>;
4
+ before?: import("../../../shared/graphql/graphql").InputMaybe<import("../../../shared/graphql/graphql").Scalars["ID"]["input"]>;
5
+ first?: import("../../../shared/graphql/graphql").InputMaybe<import("../../../shared/graphql/graphql").Scalars["Int"]["input"]>;
6
+ last?: import("../../../shared/graphql/graphql").InputMaybe<import("../../../shared/graphql/graphql").Scalars["Int"]["input"]>;
7
+ query?: import("../../../shared/graphql/graphql").InputMaybe<import("../../../shared/graphql/graphql").Scalars["String"]["input"]>;
8
+ }>>;
@@ -0,0 +1,22 @@
1
+ import { graphql } from "../../../shared/graphql/index.js";
2
+ const articlesQuery = graphql(`query Articles($filterKeys: ArticleFilterKeys, $after: ID, $before: ID, $first: Int, $last: Int, $query: String) {
3
+ articles(filterKeys: $filterKeys, after: $after, before: $before, first: $first, last: $last, query: $query) {
4
+ edges {
5
+ node {
6
+ _id
7
+ title
8
+ image {
9
+ _id
10
+ url
11
+ }
12
+ }
13
+ }
14
+ pageInfo {
15
+ endCursor
16
+ hasNextPage
17
+ hasPreviousPage
18
+ startCursor
19
+ }
20
+ }
21
+ }`);
22
+ export { articlesQuery };
@@ -0,0 +1 @@
1
+ export { default as ArticlesPicker } from "./ui/ArticlesPicker";
@@ -0,0 +1,2 @@
1
+ import ArticlesPicker from "./ui/ArticlesPicker.js";
2
+ export { ArticlesPicker };
@@ -0,0 +1,30 @@
1
+ import { ArticleFilterKeys } from "../../../shared/graphql/graphql";
2
+ type Props = {
3
+ skip?: boolean;
4
+ first?: number;
5
+ query?: string | null;
6
+ filterKeys?: ArticleFilterKeys;
7
+ };
8
+ export declare const userArticles: (props?: Props) => {
9
+ articles: {
10
+ __typename: "Article";
11
+ _id?: string | null;
12
+ title?: string | null;
13
+ image?: {
14
+ __typename: "Media";
15
+ _id?: string | null;
16
+ url?: string | null;
17
+ } | null;
18
+ }[] | undefined;
19
+ pageInfo: {
20
+ __typename: "PageInfo";
21
+ endCursor?: string | null;
22
+ hasNextPage?: boolean | null;
23
+ hasPreviousPage?: boolean | null;
24
+ startCursor?: string | null;
25
+ } | null | undefined;
26
+ isLoadingArticles: boolean;
27
+ error: import("@apollo/client").ErrorLike | undefined;
28
+ fetchMoreArticles: () => void;
29
+ };
30
+ export {};
@@ -0,0 +1,46 @@
1
+ import { useQuery } from "@apollo/client/react";
2
+ import { articlesQuery } from "../api/query.js";
3
+ const userArticles = (props = {})=>{
4
+ const { first, query, filterKeys, skip } = props;
5
+ const { data, loading: isLoadingArticles, error, fetchMore } = useQuery(articlesQuery, {
6
+ skip,
7
+ variables: {
8
+ first,
9
+ query,
10
+ filterKeys
11
+ }
12
+ });
13
+ const articles = data?.articles?.edges?.map((edge)=>edge?.node).filter((node)=>null != node);
14
+ const pageInfo = data?.articles?.pageInfo;
15
+ const fetchMoreArticles = ()=>{
16
+ if (!pageInfo?.hasNextPage) return;
17
+ fetchMore({
18
+ variables: {
19
+ first,
20
+ query,
21
+ filterKeys,
22
+ after: pageInfo.endCursor
23
+ },
24
+ updateQuery (prev, { fetchMoreResult }) {
25
+ if (!fetchMoreResult.articles?.edges || !prev.articles?.edges) return prev;
26
+ return {
27
+ articles: {
28
+ ...fetchMoreResult.articles,
29
+ edges: [
30
+ ...prev.articles.edges,
31
+ ...fetchMoreResult.articles.edges
32
+ ]
33
+ }
34
+ };
35
+ }
36
+ });
37
+ };
38
+ return {
39
+ articles,
40
+ pageInfo,
41
+ isLoadingArticles,
42
+ error,
43
+ fetchMoreArticles
44
+ };
45
+ };
46
+ export { userArticles };
@@ -0,0 +1,9 @@
1
+ type Props = {
2
+ title?: string;
3
+ initialIds?: string[];
4
+ limit?: number;
5
+ onClose?: () => void;
6
+ onOk?: (articles: string[]) => void;
7
+ };
8
+ declare const ArticlesPicker: ({ title, initialIds, limit, onClose, onOk }: Props) => import("react/jsx-runtime").JSX.Element;
9
+ export default ArticlesPicker;
@@ -0,0 +1,107 @@
1
+ import { jsx, jsxs } from "react/jsx-runtime";
2
+ import { InfinityScroll } from "../../infinity-scroll/index.js";
3
+ import { useFilterQuery } from "../../../shared/lib/index.js";
4
+ import { BlockStack, Box, Button, Checkbox, Image, InlineStack, Input, Modal, Spinner, Text } from "@soppiya/elementus";
5
+ import lodash from "lodash";
6
+ import { useState } from "react";
7
+ import { userArticles } from "../model/useArticles.js";
8
+ const ArticlesPicker = ({ title, initialIds = [], limit = 1 / 0, onClose, onOk })=>{
9
+ const [selectedVariant, setSelectedVariant] = useState(initialIds);
10
+ const { query, debounceQuery, onChangeQuery } = useFilterQuery();
11
+ const { articles, pageInfo, isLoadingArticles, fetchMoreArticles } = userArticles({
12
+ first: 20,
13
+ query: debounceQuery
14
+ });
15
+ const isSelected = limit === 1 / 0 ? true : 1 === limit ? 1 === selectedVariant.length : selectedVariant.length >= limit;
16
+ const handleSelectVariant = (articleId)=>{
17
+ selectedVariant?.includes(articleId) ? setSelectedVariant((prev)=>prev?.filter((id)=>articleId !== id)) : setSelectedVariant((prev)=>[
18
+ ...prev,
19
+ articleId
20
+ ]);
21
+ };
22
+ const handleOk = ()=>{
23
+ if (lodash.isFunction(onOk)) onOk(selectedVariant);
24
+ };
25
+ const ButtonJSX = /*#__PURE__*/ jsx(InlineStack, {
26
+ gap: 50,
27
+ justifyContent: "end",
28
+ children: /*#__PURE__*/ jsx(Button, {
29
+ disabled: lodash.isEmpty(selectedVariant) || !isSelected,
30
+ onClick: handleOk,
31
+ children: "Add"
32
+ })
33
+ });
34
+ return /*#__PURE__*/ jsx(Modal, {
35
+ open: true,
36
+ title: title || "Artilces",
37
+ bodyPadding: 0,
38
+ buttons: ButtonJSX,
39
+ onClose: onClose,
40
+ children: /*#__PURE__*/ jsxs(BlockStack, {
41
+ children: [
42
+ /*#__PURE__*/ jsx(Box, {
43
+ className: "border-b border-b-[#ebebeb]! h",
44
+ padding: 60,
45
+ children: /*#__PURE__*/ jsx(Input, {
46
+ size: "sm",
47
+ type: "search",
48
+ value: query ?? "",
49
+ onChange: (event)=>onChangeQuery(event.target.value)
50
+ })
51
+ }),
52
+ isLoadingArticles ? /*#__PURE__*/ jsx(InlineStack, {
53
+ justifyContent: "center",
54
+ padding: 80,
55
+ children: /*#__PURE__*/ jsx(Spinner, {
56
+ size: "md"
57
+ })
58
+ }) : /*#__PURE__*/ jsxs(BlockStack, {
59
+ children: [
60
+ articles?.map((article)=>/*#__PURE__*/ jsxs(InlineStack, {
61
+ stack: "full",
62
+ className: "lg:cursor-pointer border-b border-b-[#ebebeb]!",
63
+ gapX: 60,
64
+ padding: 60,
65
+ onClick: ()=>handleSelectVariant(String(article._id)),
66
+ children: [
67
+ /*#__PURE__*/ jsxs(InlineStack, {
68
+ alignItems: "center",
69
+ gapX: 60,
70
+ children: [
71
+ /*#__PURE__*/ jsx(Box, {
72
+ children: /*#__PURE__*/ jsx(Checkbox, {
73
+ checked: selectedVariant.includes(String(article._id)),
74
+ onChange: ()=>{}
75
+ })
76
+ }),
77
+ /*#__PURE__*/ jsx(Box, {
78
+ children: /*#__PURE__*/ jsx(Image, {
79
+ size: "xs",
80
+ url: String(article.image?.url)
81
+ })
82
+ })
83
+ ]
84
+ }),
85
+ /*#__PURE__*/ jsx(BlockStack, {
86
+ gapY: 30,
87
+ justifyContent: "center",
88
+ children: /*#__PURE__*/ jsx(Text, {
89
+ size: "sm",
90
+ color: "secondary",
91
+ truncate: "truncate-1",
92
+ children: article.title
93
+ })
94
+ })
95
+ ]
96
+ }, article._id)),
97
+ pageInfo?.hasNextPage && /*#__PURE__*/ jsx(InfinityScroll, {
98
+ onFetch: fetchMoreArticles
99
+ })
100
+ ]
101
+ })
102
+ ]
103
+ })
104
+ });
105
+ };
106
+ const ui_ArticlesPicker = ArticlesPicker;
107
+ export { ui_ArticlesPicker as default };
@@ -0,0 +1,17 @@
1
+ declare const meta: {
2
+ title: string;
3
+ component: ({ title, initialIds, limit, onClose, onOk }: {
4
+ title?: string;
5
+ initialIds?: string[];
6
+ limit?: number;
7
+ onClose?: () => void;
8
+ onOk?: (articles: string[]) => void;
9
+ }) => import("react/jsx-runtime").JSX.Element;
10
+ };
11
+ export default meta;
12
+ export declare const Default: {
13
+ args: {
14
+ primary: boolean;
15
+ label: string;
16
+ };
17
+ };
@@ -0,0 +1,13 @@
1
+ import ArticlesPicker from "./ArticlesPicker.js";
2
+ const meta = {
3
+ title: "Example/ArticlesPicker",
4
+ component: ArticlesPicker
5
+ };
6
+ const ProductPicker_stories = meta;
7
+ const Default = {
8
+ args: {
9
+ primary: true,
10
+ label: "Button"
11
+ }
12
+ };
13
+ export { Default, ProductPicker_stories as default };
@@ -0,0 +1,8 @@
1
+ export declare const blogsQuery: import("@graphql-typed-document-node/core").TypedDocumentNode<import("../../../shared/graphql/graphql").BlogsQuery, import("../../../shared/graphql/graphql").Exact<{
2
+ filterKeys?: import("../../../shared/graphql/graphql").InputMaybe<import("../../../shared/graphql/graphql").BlogFilterKeys>;
3
+ after?: import("../../../shared/graphql/graphql").InputMaybe<import("../../../shared/graphql/graphql").Scalars["ID"]["input"]>;
4
+ before?: import("../../../shared/graphql/graphql").InputMaybe<import("../../../shared/graphql/graphql").Scalars["ID"]["input"]>;
5
+ first?: import("../../../shared/graphql/graphql").InputMaybe<import("../../../shared/graphql/graphql").Scalars["Int"]["input"]>;
6
+ last?: import("../../../shared/graphql/graphql").InputMaybe<import("../../../shared/graphql/graphql").Scalars["Int"]["input"]>;
7
+ query?: import("../../../shared/graphql/graphql").InputMaybe<import("../../../shared/graphql/graphql").Scalars["String"]["input"]>;
8
+ }>>;
@@ -0,0 +1,22 @@
1
+ import { graphql } from "../../../shared/graphql/index.js";
2
+ const blogsQuery = graphql(`query Blogs($filterKeys: BlogFilterKeys, $after: ID, $before: ID, $first: Int, $last: Int, $query: String) {
3
+ blogs(filterKeys: $filterKeys, after: $after, before: $before, first: $first, last: $last, query: $query) {
4
+ pageInfo {
5
+ endCursor
6
+ hasNextPage
7
+ hasPreviousPage
8
+ startCursor
9
+ }
10
+ edges {
11
+ node {
12
+ _id
13
+ title
14
+ image {
15
+ _id
16
+ url
17
+ }
18
+ }
19
+ }
20
+ }
21
+ }`);
22
+ export { blogsQuery };
@@ -0,0 +1 @@
1
+ export { default as BlogsPicker } from "./ui/BlogsPicker";
@@ -0,0 +1,2 @@
1
+ import BlogsPicker from "./ui/BlogsPicker.js";
2
+ export { BlogsPicker };
@@ -0,0 +1,30 @@
1
+ import { BlogFilterKeys } from "../../../shared/graphql/graphql";
2
+ type Props = {
3
+ skip?: boolean;
4
+ first?: number;
5
+ query?: string | null;
6
+ filterKeys?: BlogFilterKeys;
7
+ };
8
+ export declare const useBlogs: (props?: Props) => {
9
+ blogs: {
10
+ __typename: "Blog";
11
+ _id?: string | null;
12
+ title?: string | null;
13
+ image?: {
14
+ __typename: "Media";
15
+ _id?: string | null;
16
+ url?: string | null;
17
+ } | null;
18
+ }[] | undefined;
19
+ pageInfo: {
20
+ __typename: "PageInfo";
21
+ endCursor?: string | null;
22
+ hasNextPage?: boolean | null;
23
+ hasPreviousPage?: boolean | null;
24
+ startCursor?: string | null;
25
+ } | null | undefined;
26
+ isLoadingBlogs: boolean;
27
+ error: import("@apollo/client").ErrorLike | undefined;
28
+ fetchMoreBlogs: () => void;
29
+ };
30
+ export {};
@@ -0,0 +1,46 @@
1
+ import { useQuery } from "@apollo/client/react";
2
+ import { blogsQuery } from "../api/query.js";
3
+ const useBlogs = (props = {})=>{
4
+ const { first, skip, query, filterKeys } = props;
5
+ const { data, loading: isLoadingBlogs, error, fetchMore } = useQuery(blogsQuery, {
6
+ skip,
7
+ variables: {
8
+ first,
9
+ query,
10
+ filterKeys
11
+ }
12
+ });
13
+ const blogs = data?.blogs?.edges?.map((edge)=>edge?.node).filter((node)=>null != node);
14
+ const pageInfo = data?.blogs?.pageInfo;
15
+ const fetchMoreBlogs = ()=>{
16
+ if (!pageInfo?.hasNextPage) return;
17
+ fetchMore({
18
+ variables: {
19
+ first,
20
+ query,
21
+ filterKeys,
22
+ after: pageInfo.endCursor
23
+ },
24
+ updateQuery (prev, { fetchMoreResult }) {
25
+ if (!fetchMoreResult.blogs?.edges || !prev.blogs?.edges) return prev;
26
+ return {
27
+ blogs: {
28
+ ...fetchMoreResult.blogs,
29
+ edges: [
30
+ ...prev.blogs.edges,
31
+ ...fetchMoreResult.blogs.edges
32
+ ]
33
+ }
34
+ };
35
+ }
36
+ });
37
+ };
38
+ return {
39
+ blogs,
40
+ pageInfo,
41
+ isLoadingBlogs,
42
+ error,
43
+ fetchMoreBlogs
44
+ };
45
+ };
46
+ export { useBlogs };
@@ -0,0 +1,9 @@
1
+ type Props = {
2
+ title?: string;
3
+ initialIds?: string[];
4
+ limit?: number;
5
+ onClose?: () => void;
6
+ onOk?: (products: string[]) => void;
7
+ };
8
+ declare const BlogsPicker: ({ title, initialIds, limit, onClose, onOk }: Props) => import("react/jsx-runtime").JSX.Element;
9
+ export default BlogsPicker;
@@ -0,0 +1,107 @@
1
+ import { jsx, jsxs } from "react/jsx-runtime";
2
+ import { InfinityScroll } from "../../infinity-scroll/index.js";
3
+ import { useFilterQuery } from "../../../shared/lib/index.js";
4
+ import { BlockStack, Box, Button, Checkbox, Image, InlineStack, Input, Modal, Spinner, Text } from "@soppiya/elementus";
5
+ import lodash from "lodash";
6
+ import { useState } from "react";
7
+ import { useBlogs } from "../model/useBlogs.js";
8
+ const BlogsPicker = ({ title, initialIds = [], limit = 1 / 0, onClose, onOk })=>{
9
+ const [selectedBlog, setSelectedBlog] = useState(initialIds);
10
+ const { query, debounceQuery, onChangeQuery } = useFilterQuery();
11
+ const { blogs, isLoadingBlogs, fetchMoreBlogs, pageInfo } = useBlogs({
12
+ first: 20,
13
+ query: debounceQuery
14
+ });
15
+ const isSelected = limit === 1 / 0 ? true : 1 === limit ? 1 === selectedBlog.length : selectedBlog.length >= limit;
16
+ const handleSelectedBlog = (blogId)=>{
17
+ selectedBlog.includes(blogId) ? setSelectedBlog((prev)=>prev.filter((id)=>id !== blogId)) : setSelectedBlog((prev)=>[
18
+ ...prev,
19
+ blogId
20
+ ]);
21
+ };
22
+ const handleOk = ()=>{
23
+ if (lodash.isFunction(onOk)) onOk(selectedBlog);
24
+ };
25
+ console.log(selectedBlog);
26
+ const ButtonJSX = /*#__PURE__*/ jsx(InlineStack, {
27
+ justifyContent: "end",
28
+ children: /*#__PURE__*/ jsx(Button, {
29
+ onClick: handleOk,
30
+ disabled: lodash.isEmpty(selectedBlog) || !isSelected,
31
+ children: "Add"
32
+ })
33
+ });
34
+ return /*#__PURE__*/ jsx(Modal, {
35
+ open: true,
36
+ title: title || "Blogs",
37
+ buttons: ButtonJSX,
38
+ bodyPadding: 0,
39
+ onClose: onClose,
40
+ children: /*#__PURE__*/ jsxs(BlockStack, {
41
+ children: [
42
+ /*#__PURE__*/ jsx(Box, {
43
+ className: "border-b border-b-[#ebebeb]! h",
44
+ padding: 60,
45
+ children: /*#__PURE__*/ jsx(Input, {
46
+ size: "sm",
47
+ type: "search",
48
+ value: query ?? "",
49
+ onChange: (event)=>onChangeQuery(event.target.value)
50
+ })
51
+ }),
52
+ isLoadingBlogs ? /*#__PURE__*/ jsx(InlineStack, {
53
+ justifyContent: "center",
54
+ padding: 80,
55
+ children: /*#__PURE__*/ jsx(Spinner, {
56
+ size: "md"
57
+ })
58
+ }) : /*#__PURE__*/ jsxs(BlockStack, {
59
+ children: [
60
+ blogs?.map((blog)=>/*#__PURE__*/ jsxs(InlineStack, {
61
+ stack: "full",
62
+ className: "lg:cursor-pointer border-b border-b-[#ebebeb]!",
63
+ gapX: 60,
64
+ padding: 60,
65
+ onClick: ()=>handleSelectedBlog(String(blog._id)),
66
+ children: [
67
+ /*#__PURE__*/ jsxs(InlineStack, {
68
+ alignItems: "center",
69
+ gapX: 60,
70
+ children: [
71
+ /*#__PURE__*/ jsx(Box, {
72
+ children: /*#__PURE__*/ jsx(Checkbox, {
73
+ checked: selectedBlog.includes(String(blog._id)),
74
+ onChange: ()=>{}
75
+ })
76
+ }),
77
+ /*#__PURE__*/ jsx(Box, {
78
+ children: /*#__PURE__*/ jsx(Image, {
79
+ size: "xs",
80
+ url: String(blog.image?.url ?? "")
81
+ })
82
+ })
83
+ ]
84
+ }),
85
+ /*#__PURE__*/ jsx(BlockStack, {
86
+ gapY: 30,
87
+ justifyContent: "center",
88
+ children: /*#__PURE__*/ jsx(Text, {
89
+ size: "sm",
90
+ color: "secondary",
91
+ truncate: "truncate-1",
92
+ children: blog.title
93
+ })
94
+ })
95
+ ]
96
+ }, blog._id)),
97
+ pageInfo?.hasNextPage && /*#__PURE__*/ jsx(InfinityScroll, {
98
+ onFetch: fetchMoreBlogs
99
+ })
100
+ ]
101
+ })
102
+ ]
103
+ })
104
+ });
105
+ };
106
+ const ui_BlogsPicker = BlogsPicker;
107
+ export { ui_BlogsPicker as default };
@@ -0,0 +1,17 @@
1
+ declare const meta: {
2
+ title: string;
3
+ component: ({ title, initialIds, limit, onClose, onOk }: {
4
+ title?: string;
5
+ initialIds?: string[];
6
+ limit?: number;
7
+ onClose?: () => void;
8
+ onOk?: (products: string[]) => void;
9
+ }) => import("react/jsx-runtime").JSX.Element;
10
+ };
11
+ export default meta;
12
+ export declare const Default: {
13
+ args: {
14
+ primary: boolean;
15
+ label: string;
16
+ };
17
+ };
@@ -0,0 +1,13 @@
1
+ import BlogsPicker from "./BlogsPicker.js";
2
+ const meta = {
3
+ title: "Example/BlogsPicker",
4
+ component: BlogsPicker
5
+ };
6
+ const BlogsPicker_stories = meta;
7
+ const Default = {
8
+ args: {
9
+ primary: true,
10
+ label: "Button"
11
+ }
12
+ };
13
+ export { Default, BlogsPicker_stories as default };
@@ -0,0 +1,5 @@
1
+ export declare const collectionQuery: import("@graphql-typed-document-node/core").TypedDocumentNode<import("../../../shared/graphql/graphql").CollectionsQuery, import("../../../shared/graphql/graphql").Exact<{
2
+ skip?: import("../../../shared/graphql/graphql").InputMaybe<import("../../../shared/graphql/graphql").Scalars["Int"]["input"]>;
3
+ filterKeys?: import("../../../shared/graphql/graphql").InputMaybe<import("../../../shared/graphql/graphql").CollectionFilterKeys>;
4
+ query?: import("../../../shared/graphql/graphql").InputMaybe<import("../../../shared/graphql/graphql").Scalars["String"]["input"]>;
5
+ }>>;
@@ -0,0 +1,22 @@
1
+ import { graphql } from "../../../shared/graphql/index.js";
2
+ const collectionQuery = graphql(`query Collections($skip: Int, $filterKeys: CollectionFilterKeys, $query: String) {
3
+ collections(skip: $skip, filterKeys: $filterKeys, query: $query) {
4
+ edges {
5
+ node {
6
+ _id
7
+ title
8
+ image {
9
+ _id
10
+ url
11
+ }
12
+ }
13
+ }
14
+ pageInfo {
15
+ endCursor
16
+ hasNextPage
17
+ hasPreviousPage
18
+ startCursor
19
+ }
20
+ }
21
+ }`);
22
+ export { collectionQuery };
@@ -0,0 +1 @@
1
+ export { default as CollectionPicker } from "./ui/CollectionPicker";
@@ -0,0 +1,2 @@
1
+ import CollectionPicker from "./ui/CollectionPicker.js";
2
+ export { CollectionPicker };
@@ -0,0 +1,29 @@
1
+ import { CollectionFilterKeys } from "../../../shared/graphql/graphql";
2
+ type Props = {
3
+ skip?: number;
4
+ query?: string | null;
5
+ filterKeys?: CollectionFilterKeys;
6
+ };
7
+ export declare const useCollections: (props?: Props) => {
8
+ collections: {
9
+ __typename: "Collection";
10
+ _id?: string | null;
11
+ title?: string | null;
12
+ image?: {
13
+ __typename: "Media";
14
+ _id?: string | null;
15
+ url?: string | null;
16
+ } | null;
17
+ }[] | undefined;
18
+ pageInfo: {
19
+ __typename: "PageInfo";
20
+ endCursor?: string | null;
21
+ hasNextPage?: boolean | null;
22
+ hasPreviousPage?: boolean | null;
23
+ startCursor?: string | null;
24
+ } | null | undefined;
25
+ isLoadingCollections: boolean;
26
+ error: import("@apollo/client").ErrorLike | undefined;
27
+ fetchMoreCollections: () => void;
28
+ };
29
+ export {};
@@ -0,0 +1,32 @@
1
+ import { useQuery } from "@apollo/client/react";
2
+ import { collectionQuery } from "../api/query.js";
3
+ const useCollections = (props = {})=>{
4
+ const { skip, query, filterKeys } = props;
5
+ const { data, loading: isLoadingCollections, error, fetchMore } = useQuery(collectionQuery, {
6
+ variables: {
7
+ filterKeys,
8
+ query,
9
+ skip
10
+ }
11
+ });
12
+ const collections = data?.collections?.edges?.map((edge)=>edge?.node)?.filter((node)=>null != node);
13
+ const pageInfo = data?.collections?.pageInfo;
14
+ const fetchMoreCollections = ()=>{
15
+ if (!pageInfo?.hasNextPage) return;
16
+ fetchMore({
17
+ variables: {
18
+ filterKeys,
19
+ query,
20
+ skip
21
+ }
22
+ });
23
+ };
24
+ return {
25
+ collections,
26
+ pageInfo,
27
+ isLoadingCollections,
28
+ error,
29
+ fetchMoreCollections
30
+ };
31
+ };
32
+ export { useCollections };
@@ -0,0 +1,9 @@
1
+ type Props = {
2
+ title?: string;
3
+ initialIds?: string[];
4
+ limit?: number;
5
+ onClose?: () => void;
6
+ onOk?: (collections: string[]) => void;
7
+ };
8
+ declare const CollectionPicker: ({ title, initialIds, limit, onClose, onOk }: Props) => import("react/jsx-runtime").JSX.Element;
9
+ export default CollectionPicker;