@pushwoosh/dumb-components 1.0.28 → 1.0.29

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/index.d.ts

@@ -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

@@ -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.29",
   "description": "React components to build Pushwoosh products",
   "main": "index.js",
   "module": "index.js",
@@ -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",