@pushwoosh/smart-components-kit 0.0.4 → 0.1.1

package/{parcel.d.ts → _devel/index.d.ts}

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

package/_devel/index.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { Router, Route, Switch, Link } from 'react-router-dom';
+import { PushwooshSPAContextProvider } from '../context';
+import { Lib } from './lib';
+import { TestPlace } from './test-place';
+export function parcel(container) {
+  const root = createRoot(container);
+  return {
+    render(props) {
+      root.render(React.createElement(Router, {
+        history: props.context.history
+      }, React.createElement(PushwooshSPAContextProvider, {
+        value: props.context
+      }, React.createElement(Switch, null, React.createElement(Route, {
+        path: "/:url",
+        exact: true,
+        render: ({
+          match
+        }) => {
+          return React.createElement("ul", null, React.createElement("li", null, React.createElement(Link, {
+            to: `${match.url}/test`
+          }, "Test your new component")), React.createElement("li", null, React.createElement(Link, {
+            to: `${match.url}/lib`
+          }, "Components lib")));
+        }
+      }), React.createElement(Route, {
+        path: "/:url/test",
+        component: TestPlace
+      }), React.createElement(Route, {
+        path: "/:url/lib",
+        component: Lib
+      })))));
+    },
+    unmount() {
+      root.unmount();
+    }
+  };
+}

package/_devel/lib/dynamic-content-picker.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function DynamicContentPickerExample(): React.JSX.Element;

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

@@ -0,0 +1,16 @@
+import React, { useState } from 'react';
+import { DynamicContentPicker } from '../../dynamic-content-picker';
+import { Horizontal } from '@pushwoosh/kit-helpers';
+import { Button } from '@pushwoosh/kit-button';
+export function DynamicContentPickerExample() {
+  const [dc, setDc] = useState();
+  return React.createElement("div", null, React.createElement(DynamicContentPicker, {
+    dc: dc,
+    onChange: setDc
+  }, React.createElement(Horizontal, {
+    "$justifyContent": "end"
+  }, React.createElement(Button, {
+    color: "primary",
+    onClick: () => console.log(dc)
+  }, "Log to console"))));
+}

package/_devel/lib/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { RouteComponentProps } from 'react-router-dom';
+interface MatchParams {
+    path: string;
+    url: string;
+}
+export declare const Lib: React.FC<RouteComponentProps<MatchParams>>;
+export {};

package/_devel/lib/index.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Route, Switch, Link } from 'react-router-dom';
+import { Columns } from '@pushwoosh/kit-helpers';
+import { DynamicContentPickerExample } from './dynamic-content-picker';
+function Example() {
+  return React.createElement("div", null, React.createElement("h3", null, "component example"));
+}
+export const Lib = ({
+  match
+}) => {
+  return React.createElement(Columns, {
+    "$gap": 12,
+    "$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, {
+    to: `${match.url}/example`
+  }, "Child 2"))), React.createElement("div", null, React.createElement(Switch, null, React.createElement(Route, {
+    path: `${match.path}/dynamic-content-picker`,
+    component: DynamicContentPickerExample
+  }), React.createElement(Route, {
+    path: `${match.path}/example`,
+    component: Example
+  }), React.createElement(Route, {
+    path: match.path,
+    exact: true,
+    render: () => React.createElement("div", null, "Please select a child route.")
+  }))));
+};

package/_devel/test-place.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare function TestPlace(): React.JSX.Element;

package/_devel/test-place.js

@@ -0,0 +1,6 @@
+// PLEASE, DON'T COMMIT THIS FILE
+// I is for testing components, you can add your component here to test it
+import React from 'react';
+export function TestPlace() {
+  return React.createElement("div", null, "add your component to test please, don't commit this file");
+}

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

@@ -1,11 +1,10 @@
 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;
+    dc?: DynamicContent;
     onChange: (dc: DynamicContent) => void;
 };
 export declare const DynamicContentPicker: FC<PropsWithChildren<DynamicContentFormProps>>;

package/dynamic-content-picker/DynamicContentPicker.js

@@ -1,20 +1,10 @@
 import React from 'react';
-import styled from 'styled-components';
-import { Vertical } from '@pushwoosh/kit-helpers';
+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 { 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%;"]);
+import { FieldTitle, TagPickerDiv } from './styled';
 export const Field = ({
   title,
   children
@@ -23,17 +13,28 @@ export const Field = ({
     "$gap": 4
   }, React.createElement(FieldTitle, null, title), children);
 };
+const defaultDynamicContent = {
+  tagName: '',
+  modifier: 'regular',
+  defaultValue: ''
+};
 export const DynamicContentPicker = ({
-  dc,
+  dc = defaultDynamicContent,
   onChange,
   children
 }) => {
   const asyncResult = useDynamicContentTags();
   if (asyncResult.loading) {
-    return React.createElement("div", null);
+    return React.createElement(TagPickerDiv, null, React.createElement(Horizontal, {
+      "$placeItems": "center",
+      "$padding": 36
+    }, React.createElement(Spinner, {
+      size: "medium"
+    })));
   }
   const tags = asyncResult.value || [];
   const currentTag = tags.find(tag => tag.name === dc.tagName) || {
+    name: '',
     modifiers: ['regular']
   };
   return React.createElement(TagPickerDiv, null, React.createElement(Field, {
@@ -49,7 +50,9 @@ export const DynamicContentPicker = ({
         defaultValue: ''
       });
     }
-  }, tags.map(tag => React.createElement("option", {
+  }, !currentTag.name && React.createElement("option", {
+    value: ""
+  }, "Select tag"), tags.map(tag => React.createElement("option", {
     value: tag.name,
     key: tag.name
   }, tag.name))), React.createElement(NativeSelect, {
@@ -59,7 +62,8 @@ export const DynamicContentPicker = ({
         ...dc,
         modifier: e.target.value
       });
-    }
+    },
+    disabled: !currentTag.name
   }, currentTag.modifiers.map(modifier => React.createElement("option", {
     value: modifier,
     key: modifier
@@ -72,6 +76,7 @@ export const DynamicContentPicker = ({
         ...dc,
         defaultValue: e.target.value
       });
-    }
+    },
+    disabled: !currentTag.name
   })), children);
 };

package/dynamic-content-picker/hooks.js

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

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

@@ -0,0 +1,17 @@
+export declare const TagPickerDiv: import("styled-components").StyledComponent<"div", any, {
+    $alignContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $alignItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $gap?: string | number | undefined;
+    $gridAutoFlow?: "row" | "column" | "dense" | "row dense" | "column dense" | undefined;
+    $justifyContent?: "end" | "start" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch" | undefined;
+    $justifyItems?: "end" | "start" | "center" | "stretch" | "baseline" | undefined;
+    $margin?: string | number | undefined;
+    $padding?: string | number | undefined;
+    $placeItems?: "end" | "start" | "center" | "stretch" | undefined;
+} & {
+    $gridAutoFlow: string;
+} & {
+    $gap: number;
+    $padding: number;
+}, "$gridAutoFlow" | "$gap" | "$padding">;
+export declare const FieldTitle: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dynamic-content-picker/styled.js

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+import { Vertical } from '@pushwoosh/kit-helpers';
+export const TagPickerDiv = styled(Vertical).attrs({
+  $gap: 16,
+  $padding: 16
+}).withConfig({
+  displayName: "TagPickerDiv",
+  componentId: "sc-gptaqm-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"
+})(["font-size:12px;font-style:normal;font-weight:500;line-height:130%;"]);

package/package.json

@@ -14,6 +14,7 @@
   },
   "pre-commit": "check",
   "dependencies": {
+    "@pushwoosh/kit-button": "^2.2.5",
     "@pushwoosh/kit-constants": "^1.6.5",
     "@pushwoosh/kit-helpers": "^4.6.1",
     "@pushwoosh/kit-select": "^1.1.0",
@@ -29,6 +30,7 @@
     "@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",
@@ -48,5 +50,5 @@
   "engines": {
     "node": ">= 18"
   },
-  "version": "0.0.4"
+  "version": "0.1.1"
 }

package/parcel.js

@@ -1,26 +0,0 @@
-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();
-    }
-  };
-}