@pushwoosh/smart-components-kit 0.0.3 → 0.0.4

package/dynamic-content-picker/DynamicContentPicker.js

@@ -1,10 +1,9 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import styled from 'styled-components';
-import { useAsync, Vertical } from '@pushwoosh/kit-helpers';
+import { Vertical } from '@pushwoosh/kit-helpers';
 import { TextInputField } from '@pushwoosh/kit-text-input';
 import { NativeSelect } from '@pushwoosh/kit-select';
-import { PushwooshSPAContext } from '../context';
-import { collectPaginatedData } from '../asyncHelpers';
+import { useDynamicContentTags } from './hooks';
 const TagPickerDiv = styled(Vertical).attrs({
   $gap: 16,
   $padding: 16
@@ -24,32 +23,12 @@ export const Field = ({
     "$gap": 4
   }, React.createElement(FieldTitle, null, title), children);
 };
-const ignoreTagTypes = ['boolean', 'list'];
 export const DynamicContentPicker = ({
   dc,
   onChange,
   children
 }) => {
-  const context = useContext(PushwooshSPAContext);
-  const asyncResult = useAsync(async () => {
-    const [originalTags, modifiers] = await Promise.all([collectPaginatedData(1000, async (perPage, page) => {
-      const res = await context.grpcBridge.tags.list({
-        orderBy: 'name',
-        orderDirection: 'asc',
-        page,
-        perPage
-      });
-      return res.tags;
-    }), context.rpcClient.callRemoteProcedure('base.modifiers', {})]);
-    const {
-      1: numbers,
-      2: strings
-    } = modifiers.response.result;
-    return originalTags.filter(tag => !ignoreTagTypes.includes(tag.type)).map(tag => ({
-      ...tag,
-      modifiers: tag.type === 'integer' || tag.type === 'decimal' ? numbers : strings
-    }));
-  }, [context]);
+  const asyncResult = useDynamicContentTags();
   if (asyncResult.loading) {
     return React.createElement("div", null);
   }

package/dynamic-content-picker/hooks.d.ts

@@ -0,0 +1,20 @@
+import { PushwooshSPAContextType } from '../context';
+import type { FullTagData } from './DynamicContentPicker.types';
+export declare function fetchDynamicContentTags(context: PushwooshSPAContextType): Promise<FullTagData[]>;
+export declare function useDynamicContentTags(): {
+    loading: boolean;
+    error?: undefined;
+    value?: undefined;
+} | {
+    loading: false;
+    error: Error;
+    value?: undefined;
+} | {
+    loading: true;
+    error?: Error | undefined;
+    value?: FullTagData[] | undefined;
+} | {
+    loading: false;
+    error?: undefined;
+    value: FullTagData[];
+};

package/dynamic-content-picker/hooks.js

@@ -0,0 +1,30 @@
+import { useContext } from 'react';
+import { useAsync } from '@pushwoosh/kit-helpers';
+import { collectPaginatedData } from '../asyncHelpers';
+import { PushwooshSPAContext } from '../context';
+const ignoreTagTypes = ['boolean', 'list'];
+export async function fetchDynamicContentTags(context) {
+  const [originalTags, modifiers] = await Promise.all([collectPaginatedData(1000, async (perPage, page) => {
+    const res = await context.grpcBridge.tags.list({
+      orderBy: 'name',
+      orderDirection: 'asc',
+      page,
+      perPage
+    });
+    return res.tags;
+  }), context.rpcClient.callRemoteProcedure('base.modifiers', {})]);
+  const {
+    1: numbers,
+    2: strings
+  } = modifiers.response.result;
+  return originalTags.filter(tag => !ignoreTagTypes.includes(tag.type)).map(tag => ({
+    ...tag,
+    modifiers: tag.type === 'integer' || tag.type === 'decimal' ? numbers : strings
+  }));
+}
+export function useDynamicContentTags() {
+  const context = useContext(PushwooshSPAContext);
+  return useAsync(async () => {
+    return fetchDynamicContentTags(context);
+  }, [context]);
+}

package/dynamic-content-picker/index.d.ts

@@ -1,2 +1,3 @@
 export type { DynamicContent } from './DynamicContentPicker.types';
 export { DynamicContentPicker } from './DynamicContentPicker';
+export * from './hooks';

package/dynamic-content-picker/index.js

@@ -1 +1,2 @@
-export { DynamicContentPicker } from './DynamicContentPicker';
+export { DynamicContentPicker } from './DynamicContentPicker';
+export * from './hooks';

package/package.json

@@ -43,11 +43,10 @@
     "@pushwoosh/http-client": "^2.4.12",
     "@pushwoosh/session-store": "^2.4.1",
     "react": "^16.14.0 || ^18.0.0",
-    "react-dom": "^16.14.0 || ^18.0.0",
-    "single-spa": "^5.9.3"
+    "react-dom": "^16.14.0 || ^18.0.0"
   },
   "engines": {
     "node": ">= 18"
   },
-  "version": "0.0.3"
+  "version": "0.0.4"
 }

package/parcel.d.ts

@@ -1,4 +1,4 @@
-import { PushwooshSPAContextType } from './context';
+import { type PushwooshSPAContextType } from './context';
 export type ParcelResult<P> = {
     render: (props: P) => void;
     unmount: () => void;

package/parcel.js

@@ -1,10 +1,15 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import { PushwooshSPAContextProvider, usePushwooshSPAContext } from './context';
+import { DynamicContentPicker } from './dynamic-content-picker';
 function TestParcel() {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const context = usePushwooshSPAContext();
-  return React.createElement("div", null, "Test Parcel");
+  const [dc, setDc] = React.useState({});
+  return React.createElement("div", null, React.createElement(DynamicContentPicker, {
+    dc: dc,
+    onChange: setDc
+  }));
 }
 export function parcel(container) {
   const root = createRoot(container);