@pushwoosh/dumb-components 1.0.28 → 1.0.30

package/CodeEditor/CodeEditor.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { type CodeEditorProps } from './types';
+export declare const CodeEditor: ({ value, onChange, readOnly, width, height, onBlur, extensions, themeOptions, hasError, placeholder, }: CodeEditorProps) => React.JSX.Element;

package/CodeEditor/CodeEditor.js

@@ -0,0 +1,29 @@
+import createTheme from '@uiw/codemirror-themes';
+import React from 'react';
+import { defaultTheme } from './constants';
+import { CodeMirrorStyled } from './styles';
+export const CodeEditor = ({
+  value,
+  onChange,
+  readOnly,
+  width,
+  height,
+  onBlur,
+  extensions,
+  themeOptions,
+  hasError,
+  placeholder
+}) => {
+  return React.createElement(CodeMirrorStyled, {
+    value: value,
+    theme: themeOptions ? createTheme(themeOptions) : defaultTheme,
+    readOnly: readOnly,
+    onChange: onChange,
+    onBlur: onBlur,
+    width: width,
+    height: height,
+    extensions: extensions,
+    placeholder: placeholder,
+    "$danger": hasError
+  });
+};

package/CodeEditor/constants.d.ts

@@ -0,0 +1 @@
+export declare const defaultTheme: import("@codemirror/state").Extension;

package/CodeEditor/constants.js

@@ -0,0 +1,25 @@
+import { tags } from '@lezer/highlight';
+import createTheme from '@uiw/codemirror-themes';
+import { Color, FontFamily, FontSize } from '@pushwoosh/kit-constants';
+export const defaultTheme = createTheme({
+  theme: 'light',
+  settings: {
+    background: Color.CLEAR,
+    backgroundImage: '',
+    foreground: Color.MAIN,
+    caret: Color.BRIGHT,
+    selection: Color.BRIGHT_LIGHT,
+    selectionMatch: Color.BRIGHT_LIGHT,
+    gutterBackground: Color.SOFT_LIGHT,
+    gutterForeground: Color.PHANTOM,
+    gutterBorder: Color.FORM,
+    gutterActiveForeground: Color.MAIN,
+    lineHighlight: Color.SOFT_LIGHT,
+    fontFamily: FontFamily.MONO,
+    fontSize: FontSize.REGULAR
+  },
+  styles: [{
+    tag: tags.invalid,
+    color: Color.PRIMARY
+  }]
+});

package/CodeEditor/index.d.ts

@@ -0,0 +1,2 @@
+export { CodeEditor } from './CodeEditor';
+export { html, liquid, json } from './languages';

package/CodeEditor/index.js

@@ -0,0 +1,2 @@
+export { CodeEditor } from './CodeEditor';
+export { html, liquid, json } from './languages';

package/CodeEditor/languages/html.d.ts

@@ -0,0 +1 @@
+export declare const html: import("@codemirror/language").LanguageSupport[];

package/CodeEditor/languages/html.js

@@ -0,0 +1,2 @@
+import { html as createHtml } from '@codemirror/lang-html';
+export const html = [createHtml()];

package/CodeEditor/languages/index.d.ts

@@ -0,0 +1,3 @@
+export { html } from './html';
+export { json } from './json';
+export { liquid } from './liquid';

package/CodeEditor/languages/index.js

@@ -0,0 +1,3 @@
+export { html } from './html';
+export { json } from './json';
+export { liquid } from './liquid';

package/CodeEditor/languages/json.d.ts

@@ -0,0 +1 @@
+export declare const json: import("@codemirror/language").LanguageSupport[];

package/CodeEditor/languages/json.js

@@ -0,0 +1,2 @@
+import { json as createJson } from '@codemirror/lang-json';
+export const json = [createJson()];

package/CodeEditor/languages/liquid.d.ts

@@ -0,0 +1 @@
+export declare const liquid: import("@codemirror/language").LanguageSupport[];

package/CodeEditor/languages/liquid.js

@@ -0,0 +1,2 @@
+import { liquid as createLiquid } from '@codemirror/lang-liquid';
+export const liquid = [createLiquid()];

package/CodeEditor/styles.d.ts

@@ -0,0 +1,3 @@
+export declare const CodeMirrorStyled: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@uiw/react-codemirror").ReactCodeMirrorProps & import("react").RefAttributes<import("@uiw/react-codemirror").ReactCodeMirrorRef>>, any, {
+    $danger?: boolean;
+}, never>;

package/CodeEditor/styles.js

@@ -0,0 +1,9 @@
+import CodeMirror from '@uiw/react-codemirror';
+import styled from 'styled-components';
+import { Color, ShapeRadius } from '@pushwoosh/kit-constants';
+export const CodeMirrorStyled = styled(CodeMirror).withConfig({
+  displayName: "CodeMirrorStyled",
+  componentId: "sc-3i4lgt-0"
+})([".cm-editor{border:1px solid ", ";outline:none;border-radius:", ";overflow:hidden;&.cm-focused{border-color:", ";}}"], ({
+  $danger
+}) => $danger ? Color.DANGER : Color.FORM, ShapeRadius.CONTROL, Color.BRIGHT);

package/CodeEditor/types.d.ts

@@ -0,0 +1,15 @@
+import { type CreateThemeOptions } from '@uiw/codemirror-themes';
+import { type ViewUpdate, type Extension } from '@uiw/react-codemirror';
+export type Language = 'json' | 'html' | 'liquid';
+export type CodeEditorProps = {
+    value: string;
+    readOnly?: boolean;
+    width?: string;
+    height?: string;
+    hasError?: boolean;
+    extensions: Extension[];
+    placeholder?: string;
+    themeOptions?: CreateThemeOptions;
+    onChange?: (value: string, viewUpdate: ViewUpdate) => void;
+    onBlur?: () => void;
+};

package/CodeEditor/types.js

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

package/PushPreview/components/NoPushPreview/NoPushPreview.d.ts

@@ -0,0 +1,2 @@
+import { type ReactElement } from 'react';
+export declare function NoPushPreview(): ReactElement;

package/PushPreview/components/NoPushPreview/NoPushPreview.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Vertical } from '@pushwoosh/kit-helpers';
+import { Container, IconMock } from './styles';
+import { LockedText, LockedTitle } from '../../../common';
+export function NoPushPreview() {
+  return React.createElement(Container, {
+    "$gap": "10px",
+    "$padding": "10px",
+    "$alignItems": "center",
+    "$justifyContent": "start"
+  }, React.createElement(IconMock, null), React.createElement(Vertical, null, React.createElement(LockedTitle, null, "Content missed..."), React.createElement(LockedText, {
+    "$small": true
+  }, "Might be old data or deleted presets")));
+}

package/PushPreview/components/NoPushPreview/index.d.ts

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

package/PushPreview/components/NoPushPreview/index.js

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

package/PushPreview/components/NoPushPreview/styles.d.ts

@@ -0,0 +1,14 @@
+export declare const IconMock: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Container: 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;
+}, "$gridAutoFlow">;

package/PushPreview/components/NoPushPreview/styles.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+import { Color, ShapeRadius } from '@pushwoosh/kit-constants';
+import { Horizontal } from '@pushwoosh/kit-helpers';
+export const IconMock = styled.div.withConfig({
+  displayName: "IconMock",
+  componentId: "sc-mvf0fq-0"
+})(["width:36px;height:36px;border-radius:", ";border:1px dashed ", ";background:", ";"], ShapeRadius.CONTROL, Color.SOFT_LIGHT_HOVER, Color.BRIGHT_LIGHT);
+export const Container = styled(Horizontal).withConfig({
+  displayName: "Container",
+  componentId: "sc-mvf0fq-1"
+})(["background:", ";border-radius:", ";border:1px dashed ", ";max-width:350px;"], Color.CLEAR, ShapeRadius.SECTION, Color.SOFT_LIGHT_HOVER);

package/PushPreview/components/SilentPushPreview/SilentPushPreview.d.ts

@@ -0,0 +1,2 @@
+import { type ReactElement } from 'react';
+export declare function SilentPushPreview(): ReactElement;

package/PushPreview/components/SilentPushPreview/SilentPushPreview.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Vertical } from '@pushwoosh/kit-helpers';
+import { NotificationIcon } from '@pushwoosh/kit-icons';
+import { Container, IconContainer } from './styles';
+import { LockedText, LockedTitle } from '../../../common';
+export function SilentPushPreview() {
+  return React.createElement(Container, {
+    "$gap": "10px",
+    "$padding": "10px",
+    "$alignItems": "center",
+    "$justifyContent": "start"
+  }, React.createElement(IconContainer, null, React.createElement(NotificationIcon, {
+    size: "medium",
+    type: "disabled",
+    view: "lined",
+    color: "#FFD600"
+  })), React.createElement(Vertical, null, React.createElement(LockedTitle, null, "Silent push"), React.createElement(LockedText, {
+    "$small": true
+  }, "There is no content to preview")));
+}

package/PushPreview/components/SilentPushPreview/index.d.ts

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

package/PushPreview/components/SilentPushPreview/index.js

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

package/PushPreview/components/SilentPushPreview/styles.d.ts

@@ -0,0 +1,14 @@
+export declare const IconContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Container: 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;
+}, "$gridAutoFlow">;

package/PushPreview/components/SilentPushPreview/styles.js

@@ -0,0 +1,11 @@
+import styled from 'styled-components';
+import { Color, ShapeRadius } from '@pushwoosh/kit-constants';
+import { Horizontal } from '@pushwoosh/kit-helpers';
+export const IconContainer = styled.div.withConfig({
+  displayName: "IconContainer",
+  componentId: "sc-fgx4rs-0"
+})(["width:36px;height:36px;padding:6px;border-radius:", ";opacity:0.5;background:", ";"], ShapeRadius.CONTROL, Color.MAIN);
+export const Container = styled(Horizontal).withConfig({
+  displayName: "Container",
+  componentId: "sc-fgx4rs-1"
+})(["background:", ";border-radius:", ";border:1px dashed ", ";max-width:350px;"], Color.CLEAR, ShapeRadius.SECTION, Color.SOFT_LIGHT_HOVER);

package/PushPreview/index.d.ts

@@ -1 +1,3 @@
-export * from './PushPreview';
+export { PushPreview } from './PushPreview';
+export { NoPushPreview } from './components/NoPushPreview';
+export { SilentPushPreview } from './components/SilentPushPreview';

package/PushPreview/index.js

@@ -1 +1,3 @@
-export * from './PushPreview';
+export { PushPreview } from './PushPreview';
+export { NoPushPreview } from './components/NoPushPreview';
+export { SilentPushPreview } from './components/SilentPushPreview';

package/index.d.ts

@@ -24,7 +24,7 @@ export { Tab, TabBar, TabPanel, Tabs, type TabCode } from './Tabs';
 export { Link } from './Link';
 export { StatisticCard } from './StatisticCard';
 export { EmailTemplatePreview, NoEmailTemplatePreview } from './EmailTemplatePreview';
-export { PushPreview } from './PushPreview';
+export { PushPreview, NoPushPreview, SilentPushPreview } from './PushPreview';
 export { Toast, ToastProvider, useToast } from './Toast';
 export { DataTable, DataTableList, DataTableGetContext, DataTablePagination, DataTableSearchInput, DataTableSortableCell, Loading, TableList, TablePagination, useDataTableContext, useDataTableGetParams, Table, Td, Tr, Th, ElementHover, ItemDetailLink, ItemName, LockedText, Description, type DataTableParams, type DataTableData, type DataTableContextType, } from './Table';
 export { AutosizeInput, PageHeader, PageHeaderEditable } from './PageHeader';
@@ -32,4 +32,5 @@ export { ExportResult } from './ExportResult';
 export { NativeInput, NativeTextarea, NativeSelect } from './native';
 export { FieldBox } from './FieldBox';
 export { NumberPicker } from './NumberPicker';
+export { CodeEditor } from './CodeEditor';
 export { EnhancedInput, SearchInput } from './EnhancedInput';

package/index.js

@@ -24,7 +24,7 @@ export { Tab, TabBar, TabPanel, Tabs } from './Tabs';
 export { Link } from './Link';
 export { StatisticCard } from './StatisticCard';
 export { EmailTemplatePreview, NoEmailTemplatePreview } from './EmailTemplatePreview';
-export { PushPreview } from './PushPreview';
+export { PushPreview, NoPushPreview, SilentPushPreview } from './PushPreview';
 export { Toast, ToastProvider, useToast } from './Toast';
 export { DataTable, DataTableList, DataTableGetContext, DataTablePagination, DataTableSearchInput, DataTableSortableCell, Loading, TableList, TablePagination, useDataTableContext, useDataTableGetParams, Table, Td, Tr, Th, ElementHover, ItemDetailLink, ItemName, LockedText, Description } from './Table';
 export { AutosizeInput, PageHeader, PageHeaderEditable } from './PageHeader';
@@ -32,4 +32,5 @@ export { ExportResult } from './ExportResult';
 export { NativeInput, NativeTextarea, NativeSelect } from './native';
 export { FieldBox } from './FieldBox';
 export { NumberPicker } from './NumberPicker';
+export { CodeEditor } from './CodeEditor';
 export { EnhancedInput, SearchInput } from './EnhancedInput';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/dumb-components",
-  "version": "1.0.28",
+  "version": "1.0.30",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",
@@ -21,7 +21,7 @@
   },
   "devDependencies": {
     "@pushwoosh/frontend-builder-engine": "^1.0.16",
-    "@pushwoosh/kit-constants": "^1.6.7",
+    "@pushwoosh/kit-constants": "^1.6.8",
     "@svgr/webpack": "^8.1.0",
     "@types/lodash": "^4.17.13",
     "@types/react": "^18.2.69",
@@ -35,11 +35,17 @@
     "styled-components": "^5.3.11"
   },
   "dependencies": {
+    "@codemirror/lang-html": "^6.4.9",
+    "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/lang-liquid": "^6.2.2",
     "@floating-ui/react-dom": "^2.1.2",
+    "@lezer/highlight": "^1.2.1",
     "@pushwoosh/kit-helpers": "^4.6.2",
     "@pushwoosh/kit-icons": "^2.1.1",
     "@pushwoosh/kit-typography": "^1.7.1",
     "@tippyjs/react": "^4.2.6",
+    "@uiw/codemirror-themes": "^4.23.8",
+    "@uiw/react-codemirror": "^4.23.8",
     "liquidjs": "^10.18.0",
     "lodash": "^4.17.21",
     "polished": "^4.3.1",