@pushwoosh/smart-components-kit 0.0.2 → 0.0.3

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,98 @@
+import React, { useContext } from 'react';
+import styled from 'styled-components';
+import { useAsync, 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';
+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);
+};
+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]);
+  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/index.d.ts

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

package/dynamic-content-picker/index.js

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

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"
   },
@@ -37,5 +49,5 @@
   "engines": {
     "node": ">= 18"
   },
-  "version": "0.0.2"
+  "version": "0.0.3"
 }

package/parcel.d.ts

@@ -0,0 +1,9 @@
+import { 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,21 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { PushwooshSPAContextProvider, usePushwooshSPAContext } from './context';
+function TestParcel() {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const context = usePushwooshSPAContext();
+  return React.createElement("div", null, "Test Parcel");
+}
+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();
+    }
+  };
+}