@pushwoosh/smart-components-kit 0.2.0 → 0.3.0

package/{dynamic-content-picker → DynamicContentPicker}/DynamicContentPicker.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Horizontal, Vertical } from '@pushwoosh/kit-helpers';
-import { TextInputField } from '@pushwoosh/kit-text-input';
 import { NativeSelect } from '@pushwoosh/kit-select';
 import { Spinner } from '@pushwoosh/kit-spinner';
+import { TextInputField } from '@pushwoosh/kit-text-input';
 import { useDynamicContentTags } from './hooks';
 import { FieldTitle, TagPickerDiv } from './styled';
 export const Field = ({

package/{dynamic-content-picker → DynamicContentPicker}/DynamicContentPicker.types.d.ts

@@ -1,4 +1,4 @@
-import { TagData } from '@pushwoosh/grpc-bridge/bridge/tags/types';
+import { type TagData } from '@pushwoosh/grpc-bridge/bridge/tags/types';
 export type DynamicContent = {
     tagName: string;
     modifier: string;

package/{dynamic-content-picker → DynamicContentPicker}/hooks.d.ts

@@ -1,4 +1,4 @@
-import { SPAContextType } from '../context';
+import { type SPAContextType } from '../context';
 import type { FullTagData } from './DynamicContentPicker.types';
 export declare function fetchDynamicContentTags(context: SPAContextType): Promise<FullTagData[]>;
 export declare function useDynamicContentTags(): {

package/{dynamic-content-picker → DynamicContentPicker}/hooks.js

@@ -1,7 +1,6 @@
-import { useContext } from 'react';
 import { useAsync } from '@pushwoosh/kit-helpers';
 import { collectPaginatedData } from '../asyncHelpers';
-import { SPAContext } from '../context';
+import { useSPAContext } from '../context';
 const ignoreTagTypes = ['boolean', 'list'];
 const numberTypes = ['integer', 'decimal'];
 export async function fetchDynamicContentTags(context) {
@@ -23,7 +22,7 @@ export async function fetchDynamicContentTags(context) {
   }));
 }
 export function useDynamicContentTags() {
-  const context = useContext(SPAContext);
+  const context = useSPAContext();
   return useAsync(async () => {
     return fetchDynamicContentTags(context);
   }, [context]);

package/{dynamic-content-picker → DynamicContentPicker}/styled.js

@@ -5,9 +5,9 @@ export const TagPickerDiv = styled(Vertical).attrs({
   $padding: 16
 }).withConfig({
   displayName: "TagPickerDiv",
-  componentId: "sc-gptaqm-0"
+  componentId: "sc-1blii2o-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-gptaqm-1"
+  componentId: "sc-1blii2o-1"
 })(["font-size:12px;font-style:normal;font-weight:500;line-height:130%;"]);

package/EmailTemplatePreview/EmailTemplatePreview.d.ts

@@ -0,0 +1,9 @@
+import { type FC } from 'react';
+type EmailTemplatePreviewProps = {
+    code: string;
+    width?: string;
+    height?: string;
+    scale?: number;
+};
+export declare const EmailTemplatePreview: FC<EmailTemplatePreviewProps>;
+export {};

package/EmailTemplatePreview/EmailTemplatePreview.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import { EmailTemplatePreview as DumpPreview } from '@pushwoosh/kit-dumb-components';
+import { useAsync } from '@pushwoosh/kit-helpers';
+import { RectangularSkeleton } from '@pushwoosh/kit-skeleton';
+import { useSPAContext } from '../context';
+export const EmailTemplatePreview = ({
+  code,
+  width,
+  height,
+  scale
+}) => {
+  const {
+    grpcBridge
+  } = useSPAContext();
+  const res = useAsync(async () => {
+    const {
+      content: {
+        content: {
+          html,
+          localizationData
+        }
+      },
+      previewSettings
+    } = await grpcBridge.emailTemplates.get({
+      code
+    });
+    return {
+      template: html,
+      localization: localizationData.default || {},
+      values: previewSettings
+    };
+  }, [code]);
+  if (res.loading) {
+    return React.createElement(RectangularSkeleton, {
+      width: width,
+      height: height
+    });
+  }
+  return React.createElement(DumpPreview, {
+    template: res.value.template,
+    localization: res.value.localization,
+    values: res.value.values,
+    width: width,
+    height: height,
+    scale: scale
+  });
+};

package/EmailTemplatePreview/index.d.ts

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

package/EmailTemplatePreview/index.js

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

package/_devel/lib/dynamic-content-picker.js

@@ -1,7 +1,8 @@
+/* eslint-disable no-console */
 import React, { useState } from 'react';
-import { DynamicContentPicker } from '../../dynamic-content-picker';
-import { Horizontal } from '@pushwoosh/kit-helpers';
 import { Button } from '@pushwoosh/kit-button';
+import { Horizontal } from '@pushwoosh/kit-helpers';
+import { DynamicContentPicker } from '../../DynamicContentPicker';
 export function DynamicContentPickerExample() {
   const [dc, setDc] = useState();
   return React.createElement("div", null, React.createElement(DynamicContentPicker, {

package/_devel/lib/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { RouteComponentProps } from 'react-router-dom';
+import { type RouteComponentProps } from 'react-router-dom';
 interface MatchParams {
     path: string;
     url: string;

package/_devel/lib/index.js

@@ -13,7 +13,7 @@ export const Lib = ({
     "$sizes": "200px 780px"
   }, React.createElement("ul", null, React.createElement("li", null, React.createElement(Link, {
     to: `${match.url}/dynamic-content-picker`
-  }, "Child 1")), React.createElement("li", null, React.createElement(Link, {
+  }, "Dynamic content picker")), React.createElement("li", null, React.createElement(Link, {
     to: `${match.url}/example`
   }, "Child 2"))), React.createElement("div", null, React.createElement(Switch, null, React.createElement(Route, {
     path: `${match.path}/dynamic-content-picker`,

package/asyncHelpers.js

@@ -3,7 +3,6 @@ export async function collectPaginatedData(limit, fn) {
   let page = 0;
   let items;
   do {
-    // eslint-disable-next-line no-await-in-loop
     items = await fn(limit, page);
     result.push(...items);
     page += 1;

package/context/context.d.ts

@@ -0,0 +1,2 @@
+import { type SPAContextType } from './types';
+export declare const SPAContext: import("react").Context<SPAContextType | undefined>;

package/context/context.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const SPAContext = createContext(undefined);

package/context/index.d.ts

@@ -1,15 +1,5 @@
-import { type History } from 'history';
-import type { GrpcBridge } from '@pushwoosh/grpc-bridge';
-import type { HttpClient, RpcClient, GrpcClient } from '@pushwoosh/http-client';
-import type { SessionStore } from '@pushwoosh/session-store';
-export type SPAContextType = {
-    readonly history: History;
-    readonly httpClient: HttpClient;
-    readonly rpcClient: RpcClient;
-    readonly grpcClient: GrpcClient;
-    readonly grpcBridge: GrpcBridge;
-    readonly sessionStore: SessionStore;
-};
-export declare const SPAContext: import("react").Context<SPAContextType | undefined>;
+import type { SPAContextType } from './types';
+import { useSPAContext } from './useSPAContext';
+export type { SPAContextType };
+export { useSPAContext };
 export declare const SPAContextProvider: import("react").Provider<SPAContextType | undefined>;
-export declare function useSPAContext(): SPAContextType;

package/context/index.js

@@ -1,10 +1,4 @@
-import { createContext, useContext } from 'react';
-export const SPAContext = createContext(undefined);
-export const SPAContextProvider = SPAContext.Provider;
-export function useSPAContext() {
-  const contextValue = useContext(SPAContext);
-  if (!contextValue) {
-    throw new Error('useSPAContext must be used within a SPAContextProvider');
-  }
-  return contextValue;
-}
+import { SPAContext } from './context';
+import { useSPAContext } from './useSPAContext';
+export { useSPAContext };
+export const SPAContextProvider = SPAContext.Provider;

package/context/types.d.ts

@@ -0,0 +1,13 @@
+import { type History } from 'history';
+import type { GrpcBridge } from '@pushwoosh/grpc-bridge';
+import type { GrpcClient, HttpClient, RpcClient } from '@pushwoosh/http-client';
+import type { SessionStore } from '@pushwoosh/session-store';
+export type SPAContextType = {
+    readonly history: History;
+    readonly httpClient: HttpClient;
+    readonly rpcClient: RpcClient;
+    readonly grpcClient: GrpcClient;
+    readonly grpcBridge: GrpcBridge;
+    readonly sessionStore: SessionStore;
+    readonly __smartComponentsCache: Record<string, any>;
+};

package/context/types.js

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

package/context/useSPAContext.d.ts

@@ -0,0 +1 @@
+export declare function useSPAContext(): import("./types").SPAContextType;

package/context/useSPAContext.js

@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+import { SPAContext } from './context';
+export function useSPAContext() {
+  const contextValue = useContext(SPAContext);
+  if (!contextValue) {
+    throw new Error('useSPAContext must be used within a SPAContextProvider');
+  }
+  return contextValue;
+}

package/package.json

@@ -16,32 +16,30 @@
   "dependencies": {
     "@pushwoosh/kit-button": "^2.2.5",
     "@pushwoosh/kit-constants": "^1.6.5",
+    "@pushwoosh/kit-dumb-components": "^0.0.6",
     "@pushwoosh/kit-helpers": "^4.6.1",
     "@pushwoosh/kit-select": "^1.1.0",
+    "@pushwoosh/kit-skeleton": "^1.1.6",
     "@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",
-    "@pushwoosh/grpc-bridge": "^1.5.10",
+    "@pushwoosh/frontend-builder-engine": "^1.0.4",
+    "@pushwoosh/grpc-bridge": "^1.5.36",
     "@pushwoosh/http-client": "^2.4.12",
     "@pushwoosh/session-store": "^2.4.1",
-    "@types/eslint__js": "^8.42.3",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
     "@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"
+    "typescript": "^5.6.2"
   },
   "peerDependencies": {
-    "@pushwoosh/grpc-bridge": "^1.5.10",
+    "@pushwoosh/grpc-bridge": "^1.5.36",
     "@pushwoosh/http-client": "^2.4.12",
     "@pushwoosh/session-store": "^2.4.1",
     "react": "^16.14.0 || ^18.0.0",
@@ -50,5 +48,5 @@
   "engines": {
     "node": ">= 18"
   },
-  "version": "0.2.0"
+  "version": "0.3.0"
 }