@pushwoosh/smart-components-kit 0.0.2 → 0.0.4

package/asyncHelpers.d.ts

@@ -0,0 +1 @@
+export declare function collectPaginatedData<T>(limit: number, fn: (limit: number, page: number) => Promise<T[]>): Promise<T[]>;

package/asyncHelpers.js

@@ -0,0 +1,12 @@
+export async function collectPaginatedData(limit, fn) {
+  const result = [];
+  let page = 0;
+  let items;
+  do {
+    // eslint-disable-next-line no-await-in-loop
+    items = await fn(limit, page);
+    result.push(...items);
+    page += 1;
+  } while (items.length === limit);
+  return result;
+}

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

@@ -0,0 +1,12 @@
+import { type FC, type PropsWithChildren, type ReactNode } from 'react';
+import type { DynamicContent } from './DynamicContentPicker.types';
+export declare const FieldTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Field: FC<PropsWithChildren<{
+    title: ReactNode;
+}>>;
+type DynamicContentFormProps = {
+    dc: DynamicContent;
+    onChange: (dc: DynamicContent) => void;
+};
+export declare const DynamicContentPicker: FC<PropsWithChildren<DynamicContentFormProps>>;
+export {};

package/dynamic-content-picker/DynamicContentPicker.js

@@ -0,0 +1,77 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Vertical } from '@pushwoosh/kit-helpers';
+import { TextInputField } from '@pushwoosh/kit-text-input';
+import { NativeSelect } from '@pushwoosh/kit-select';
+import { useDynamicContentTags } from './hooks';
+const TagPickerDiv = styled(Vertical).attrs({
+  $gap: 16,
+  $padding: 16
+}).withConfig({
+  displayName: "TagPickerDiv",
+  componentId: "sc-j19s3d-0"
+})(["width:240px;border-radius:4px;background:#F7F9FA;box-shadow:0 0 4px 0 rgba(0,0,0,0.06),0 4px 6px 0 rgba(0,0,0,0.06);"]);
+export const FieldTitle = styled.div.withConfig({
+  displayName: "FieldTitle",
+  componentId: "sc-j19s3d-1"
+})(["font-size:12px;font-style:normal;font-weight:500;line-height:130%;"]);
+export const Field = ({
+  title,
+  children
+}) => {
+  return React.createElement(Vertical, {
+    "$gap": 4
+  }, React.createElement(FieldTitle, null, title), children);
+};
+export const DynamicContentPicker = ({
+  dc,
+  onChange,
+  children
+}) => {
+  const asyncResult = useDynamicContentTags();
+  if (asyncResult.loading) {
+    return React.createElement("div", null);
+  }
+  const tags = asyncResult.value || [];
+  const currentTag = tags.find(tag => tag.name === dc.tagName) || {
+    modifiers: ['regular']
+  };
+  return React.createElement(TagPickerDiv, null, React.createElement(Field, {
+    title: "Tag"
+  }, React.createElement(Vertical, {
+    "$gap": 8
+  }, React.createElement(NativeSelect, {
+    value: dc.tagName,
+    onChange: e => {
+      onChange({
+        tagName: e.target.value,
+        modifier: currentTag.modifiers[0],
+        defaultValue: ''
+      });
+    }
+  }, tags.map(tag => React.createElement("option", {
+    value: tag.name,
+    key: tag.name
+  }, tag.name))), React.createElement(NativeSelect, {
+    value: dc.modifier,
+    onChange: e => {
+      onChange({
+        ...dc,
+        modifier: e.target.value
+      });
+    }
+  }, currentTag.modifiers.map(modifier => React.createElement("option", {
+    value: modifier,
+    key: modifier
+  }, modifier))))), React.createElement(Field, {
+    title: "Default Tag Value"
+  }, React.createElement(TextInputField, {
+    value: dc.defaultValue,
+    onChange: e => {
+      onChange({
+        ...dc,
+        defaultValue: e.target.value
+      });
+    }
+  })), children);
+};

package/dynamic-content-picker/DynamicContentPicker.types.d.ts

@@ -0,0 +1,9 @@
+import { TagData } from '@pushwoosh/grpc-bridge/bridge/tags/types';
+export type DynamicContent = {
+    tagName: string;
+    modifier: string;
+    defaultValue: string;
+};
+export type FullTagData = TagData & {
+    modifiers: string[];
+};

package/dynamic-content-picker/DynamicContentPicker.types.js

@@ -0,0 +1 @@
+export {};

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

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

package/dynamic-content-picker/index.js

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

package/package.json

@@ -1,7 +1,9 @@
 {
   "name": "@pushwoosh/smart-components-kit",
   "main": "index.js",
+  "module": "index.js",
   "types": "index.d.ts",
+  "sideEffects": false,
   "scripts": {
     "start": "`pushwoosh-engine app:command:dev`",
     "build": "pushwoosh-engine lib:build",
@@ -11,6 +13,13 @@
     "check:types": "echo \"Run check:types\" && tsc --project tsconfig.json --skipLibCheck --emitDeclarationOnly false --noEmit"
   },
   "pre-commit": "check",
+  "dependencies": {
+    "@pushwoosh/kit-constants": "^1.6.5",
+    "@pushwoosh/kit-helpers": "^4.6.1",
+    "@pushwoosh/kit-select": "^1.1.0",
+    "@pushwoosh/kit-spinner": "^1.5.1",
+    "@pushwoosh/kit-text-input": "^1.5.1"
+  },
   "devDependencies": {
     "@eslint/js": "^9.10.0",
     "@pushwoosh/frontend-builder-engine": "^0.6.0",
@@ -20,9 +29,12 @@
     "@types/eslint__js": "^8.42.3",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
+    "@types/styled-components": "^5.1.34",
     "eslint": "^9.10.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router-dom": "^5.3.4",
+    "styled-components": "^5.3.11",
     "typescript": "^5.6.2",
     "typescript-eslint": "^8.5.0"
   },
@@ -31,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.2"
+  "version": "0.0.4"
 }

package/parcel.d.ts

@@ -0,0 +1,9 @@
+import { type PushwooshSPAContextType } from './context';
+export type ParcelResult<P> = {
+    render: (props: P) => void;
+    unmount: () => void;
+};
+export type ParcelProps = {
+    context: PushwooshSPAContextType;
+};
+export declare function parcel(container: HTMLElement): ParcelResult<ParcelProps>;

package/parcel.js

@@ -0,0 +1,26 @@
+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();
+  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);
+  return {
+    render(props) {
+      root.render(React.createElement(PushwooshSPAContextProvider, {
+        value: props.context
+      }, React.createElement(TestParcel, null)));
+    },
+    unmount() {
+      root.unmount();
+    }
+  };
+}