@pushwoosh/smart-components-kit 0.0.3 → 0.1.0

package/{parcel.d.ts → _devel/index.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/_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,21 +1,9 @@
-import React, { useContext } from 'react';
-import styled from 'styled-components';
-import { useAsync, Vertical } from '@pushwoosh/kit-helpers';
+import React from 'react';
+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';
-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 { useDynamicContentTags } from './hooks';
+import { FieldTitle, TagPickerDiv } from './styled';
 export const Field = ({
   title,
   children
@@ -24,37 +12,23 @@ export const Field = ({
     "$gap": 4
   }, React.createElement(FieldTitle, null, title), children);
 };
-const ignoreTagTypes = ['boolean', 'list'];
+const defaultDynamicContent = {
+  tagName: '',
+  modifier: 'regular',
+  defaultValue: ''
+};
 export const DynamicContentPicker = ({
-  dc,
+  dc = defaultDynamicContent,
   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);
   }
   const tags = asyncResult.value || [];
   const currentTag = tags.find(tag => tag.name === dc.tagName) || {
+    name: '',
     modifiers: ['regular']
   };
   return React.createElement(TagPickerDiv, null, React.createElement(Field, {
@@ -70,7 +44,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, {
@@ -80,7 +56,8 @@ export const DynamicContentPicker = ({
         ...dc,
         modifier: e.target.value
       });
-    }
+    },
+    disabled: !currentTag.name
   }, currentTag.modifiers.map(modifier => React.createElement("option", {
     value: modifier,
     key: modifier
@@ -93,6 +70,7 @@ export const DynamicContentPicker = ({
         ...dc,
         defaultValue: e.target.value
       });
-    }
+    },
+    disabled: !currentTag.name
   })), children);
 };

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'];
+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({
+      orderBy: 'name',
+      orderDirection: 'asc',
+      page,
+      perPage
+    });
+    return res.tags;
+  }), context.rpcClient.callRemoteProcedure('base.modifiers', {})]);
+  const {
+    result
+  } = modifiers.response;
+  return originalTags.filter(tag => !ignoreTagTypes.includes(tag.type)).map(tag => ({
+    ...tag,
+    modifiers: numberTypes.includes(tag.type) ? result[1] : result[2]
+  }));
+}
+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/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",
@@ -43,11 +45,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.1.0"
 }

package/parcel.js

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