@synerise/ds-code-area 0.0.1

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Synerise
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,103 @@
+---
+id: code-area
+title: CodeArea
+---
+
+CodeArea UI Component
+
+## Installation
+
+```
+npm i @synerise/ds-code-area
+or
+yarn add @synerise/ds-code-area
+```
+
+To have syntax validation you need to follow the integration instructions here:
+https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md 
+
+## Usage
+
+```js
+import CodeArea from '@synerise/ds-code-area'
+
+type SupportedSyntaxes = 'json' | 'javascript';
+const syntaxOptions = [
+    {
+        language: 'json',
+        label: 'JSON'
+    },
+    {
+        language: 'javascript',
+        label: 'Javascript'
+    }
+];
+
+<CodeArea<SupportedSyntaxes>
+    syntaxOptions={syntaxOptions}
+    onSyntaxChange={ /* current syntax handler */ }
+    onChange={ /* current value handler */ }
+/>
+
+```
+
+
+## API
+
+| Property                    | Description                                                    | Type                                  | Default        |
+| --------------------------- | -------------------------------------------------------------- | ------------------------------------- | -------------- |
+| label                       | label above editor                                             | `ReactNode`                           | -              |
+| description                 | description below editor                                       | `ReactNode`                           | -              |
+| counter                     | limit character count                                          | `{ limit: number; placement?: 'bottom' &#124; 'top'; }` | - |
+| errorText                   | error message to show below editor  (also adds "error styles") | `ReactNode`                           | -              |
+| syntaxOptions               | array of available syntaxes                                    | `CodeAreaSyntaxOption[]`              | -              |
+| currentSyntax               | current syntax of editor value                                 | `CodeAreaSyntax`                      | -              |
+| allowFullscreen             | renders fullscreen mode button                                 | `boolean`                             | -              |
+| tooltip                     | tooltip text displayed next to label                           | `ReactNode`                           | -              |
+| tooltipProps                | tooltip properties (see @synerise/ds-tooltip)                  | `TooltipExtendedProps & TooltipProps` | -              |
+| style                       | custom style added to outermost div                            | `CSSProperties`                       | -              |
+| className                   | class name to add to outermost div                             | `string`                              | -              |
+| renderFooterContent         | renders custom content in footer bar                           |  `(CodeAreaStateProps) => ReactNode`  | -              |
+| renderAdditionalDescription | renders custom content above description                       |  `(CodeAreaStateProps) => ReactNode`  | -              |
+| onFullscreenChange          | triggered when fullscreen is toggled on/off                    | `(isFullscreen: boolean) => void`     | -              |
+| onSyntaxChange              | triggered when user switches syntax                            | `(newSyntax: SyntaxName) => void`     | -              |
+| texts                       | customise displayed texts                                      | `CodeAreaTexts`                       | -              |
+
+### CodeAreaTexts
+
+Customisable user-facing labels
+
+| Property           | Description                                         | Type          | Default        |
+| ------------------ | --------------------------------------------------- | ------------- | -------------- |
+| fullscreen         | fullscreen button label                             | `ReactNode`   | -              |
+| closeFullscreen    | close fullscreen button label                       | `ReactNode`   | -              |
+| fullscreenTitle    | used in fullscreen mode if no `label` prop provided | `ReactNode`   | -              |
+
+
+
+### CodeAreaSyntaxOption
+
+At least one syntax option must be provided.
+
+| Property           | Description                                    | Type             | Default        |
+| ------------------ | ---------------------------------------------- | ---------------- | -------------- |
+| language           | language of editor `value`                     | `CodeAreaSyntax` | -              |
+| label              | optional user-friendly display name            | `string`         | -              |
+
+### CodeAreaSyntax
+
+See list of languages supported by monaco here: https://github.com/microsoft/monaco-editor/tree/main/src/basic-languages. 
+
+```js
+CodeAreaSyntax = 'json' | 'html' | 'css' | 'typescript' | 'javascript' | string;
+```
+
+### CodeAreaStateProps
+
+Props passed to `renderAdditionalDescription()` and `renderFooterContent()`.
+
+| Property           | Description                                  | Type          | Default        |
+| ------------------ | -------------------------------------------- | ------------- | -------------- |
+| isFullscreen       | is fullscreen mode on or off                 | `boolean`     | -              |
+| count              | current character count                      | `number`      | -              |
+| isValid            | is editor value valid                        | `boolean`     | -              |

package/dist/CodeArea.d.ts

@@ -0,0 +1,3 @@
+import { CodeAreaProps } from './CodeArea.types';
+declare const CodeArea: ({ label, description, counter, errorText, syntaxOptions, currentSyntax, allowFullscreen, renderFooterContent, renderAdditionalDescription, tooltip, tooltipProps, style, className, texts, onChange, onFullscreenChange, onSyntaxChange, value, ...monacoProps }: CodeAreaProps) => JSX.Element;
+export default CodeArea;

package/dist/CodeArea.js

@@ -0,0 +1,226 @@
+var _excluded = ["label", "description", "counter", "errorText", "syntaxOptions", "currentSyntax", "allowFullscreen", "renderFooterContent", "renderAdditionalDescription", "tooltip", "tooltipProps", "style", "className", "texts", "onChange", "onFullscreenChange", "onSyntaxChange", "value"];
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React, { useState, useMemo, useRef, useEffect } from 'react';
+import MonacoEditor from 'react-monaco-editor';
+import { InlineSelect } from '@synerise/ds-inline-edit';
+import { Label } from '@synerise/ds-input';
+import { useResizeObserver } from '@synerise/ds-utils';
+import * as S from './CodeArea.styles';
+import { FullscreenHeader, ContentBelow, ContentAbove, BottomBar } from './components';
+import { getDefaultTexts, getCharCount, calculateRequiredSpace } from './utils';
+import { MONACO_DEFAULT_OPTIONS, TRIGGER_SOURCE, DS_MONACO_THEME, DS_MONACO_THEME_NAME } from './constants';
+
+var CodeArea = function CodeArea(_ref) {
+  var label = _ref.label,
+      description = _ref.description,
+      counter = _ref.counter,
+      errorText = _ref.errorText,
+      syntaxOptions = _ref.syntaxOptions,
+      currentSyntax = _ref.currentSyntax,
+      allowFullscreen = _ref.allowFullscreen,
+      renderFooterContent = _ref.renderFooterContent,
+      renderAdditionalDescription = _ref.renderAdditionalDescription,
+      tooltip = _ref.tooltip,
+      tooltipProps = _ref.tooltipProps,
+      style = _ref.style,
+      className = _ref.className,
+      texts = _ref.texts,
+      onChange = _ref.onChange,
+      onFullscreenChange = _ref.onFullscreenChange,
+      onSyntaxChange = _ref.onSyntaxChange,
+      value = _ref.value,
+      monacoProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var _useState = useState(true),
+      isValid = _useState[0],
+      setIsValid = _useState[1];
+
+  var _useState2 = useState(false),
+      isFullscreen = _useState2[0],
+      setIsFullscreen = _useState2[1];
+
+  var editorRef = useRef(null);
+  var monacoRef = useRef(null);
+  var wrapperRef = useRef(null);
+  var contentBelowRef = useRef(null);
+
+  var _useResizeObserver = useResizeObserver(wrapperRef),
+      height = _useResizeObserver.height,
+      width = _useResizeObserver.width;
+
+  var _useResizeObserver2 = useResizeObserver(contentBelowRef),
+      contentBelowHeight = _useResizeObserver2.height;
+
+  var count = getCharCount(value, counter == null ? void 0 : counter.limit);
+  var allTexts = getDefaultTexts(texts);
+
+  var toggleFullscreen = function toggleFullscreen() {
+    setIsFullscreen(!isFullscreen);
+    onFullscreenChange && onFullscreenChange(isFullscreen);
+  };
+
+  var editorWillMount = monacoProps.editorWillMount,
+      editorDidMount = monacoProps.editorDidMount,
+      options = monacoProps.options;
+
+  var combinedOptions = _objectSpread({}, MONACO_DEFAULT_OPTIONS, {}, options);
+
+  var handleEditorWillMount = function handleEditorWillMount(monacoInstance) {
+    monacoRef.current = monacoInstance;
+    monacoInstance.editor.defineTheme(DS_MONACO_THEME_NAME, DS_MONACO_THEME);
+    monacoInstance.editor.setTheme(DS_MONACO_THEME_NAME);
+    monacoInstance.editor.onDidChangeMarkers(function () {
+      var markers = monacoInstance.editor.getModelMarkers({});
+      setIsValid(!markers.length);
+    });
+    editorWillMount && editorWillMount(monacoInstance);
+  };
+
+  var handleEditorDidMount = function handleEditorDidMount(editor, monacoInstance) {
+    editorRef.current = editor;
+    editorDidMount && editorDidMount(editor, monacoInstance);
+  };
+
+  var handleChange = function handleChange(newValue, event) {
+    if (counter != null && counter.limit && newValue.length > (counter == null ? void 0 : counter.limit)) {
+      editorRef.current && editorRef.current.trigger(TRIGGER_SOURCE, 'undo', null);
+      return;
+    }
+
+    if (editorRef.current) {
+      editorRef.current.pushUndoStop();
+    }
+
+    onChange && onChange(newValue, event);
+  };
+
+  var labelWithTooltip = label && /*#__PURE__*/React.createElement(Label, {
+    label: label,
+    tooltip: tooltip,
+    tooltipConfig: (tooltip || tooltipProps) && _objectSpread({}, tooltipProps, {
+      placement: isFullscreen ? 'right' : undefined,
+      title: tooltip
+    })
+  });
+
+  var renderCounter = function renderCounter(placement) {
+    return (counter == null ? void 0 : counter.limit) && (!placement || (counter == null ? void 0 : counter.placement) === placement) && /*#__PURE__*/React.createElement(S.Counter, null, count, " / ", counter.limit);
+  };
+
+  useEffect(function () {
+    setIsValid(!errorText);
+  }, [errorText]);
+  useEffect(function () {
+    if (editorRef.current) {
+      var _editorRef$current, _monacoRef$current;
+
+      var currentModel = (_editorRef$current = editorRef.current) == null ? void 0 : _editorRef$current.getModel(); // eslint-disable-next-line no-unused-expressions
+
+      currentModel && ((_monacoRef$current = monacoRef.current) == null ? void 0 : _monacoRef$current.editor.setModelLanguage(currentModel, currentSyntax));
+    }
+  }, [currentSyntax]);
+
+  var _useMemo = useMemo(function () {
+    var source = syntaxOptions == null ? void 0 : syntaxOptions.map(function (item) {
+      var itemLabel = item.label,
+          language = item.language;
+      return {
+        key: language,
+        text: itemLabel || language,
+        onSelect: function onSelect() {
+          onSyntaxChange && onSyntaxChange(language);
+        }
+      };
+    });
+    var currentItem = syntaxOptions == null ? void 0 : syntaxOptions.find(function (item) {
+      return item.language === currentSyntax;
+    });
+    return {
+      syntaxDataSource: source,
+      currentSyntaxItem: currentItem || {
+        language: currentSyntax
+      }
+    };
+  }, [currentSyntax, onSyntaxChange, syntaxOptions]),
+      syntaxDataSource = _useMemo.syntaxDataSource,
+      currentSyntaxItem = _useMemo.currentSyntaxItem;
+
+  var syntaxSelect = useMemo(function () {
+    return syntaxDataSource && syntaxDataSource.length > 1 ? /*#__PURE__*/React.createElement(InlineSelect, {
+      size: "small",
+      expanded: false,
+      input: {
+        name: 'syntax-select',
+        value: currentSyntaxItem.label || currentSyntaxItem.language
+      },
+      initialValue: currentSyntaxItem.label || currentSyntaxItem.language,
+      dataSource: syntaxDataSource
+    }) : /*#__PURE__*/React.createElement(S.SyntaxTitle, {
+      size: "small"
+    }, currentSyntaxItem.label || currentSyntaxItem.language);
+  }, [currentSyntaxItem, syntaxDataSource]);
+  var customFooterContent = renderFooterContent && /*#__PURE__*/React.createElement(S.BottomBarElement, null, renderFooterContent({
+    isFullscreen: isFullscreen,
+    count: count,
+    isValid: isValid
+  }));
+  var additionalDescription = renderAdditionalDescription && /*#__PURE__*/React.createElement(S.AdditionalDescription, null, renderAdditionalDescription({
+    isFullscreen: isFullscreen,
+    count: count,
+    isValid: isValid
+  }));
+  var isBottomBarShowing = Boolean(syntaxSelect || allowFullscreen && !isFullscreen || customFooterContent);
+  var requiredSpace = isFullscreen ? calculateRequiredSpace(isBottomBarShowing, contentBelowHeight) : 0;
+  return /*#__PURE__*/React.createElement(S.CodeAreaWrapper, {
+    requiredSpace: requiredSpace,
+    className: className,
+    style: style,
+    isFullscreen: isFullscreen
+  }, isFullscreen && /*#__PURE__*/React.createElement(FullscreenHeader, {
+    label: labelWithTooltip,
+    texts: allTexts,
+    onClick: toggleFullscreen
+  }), !isFullscreen && /*#__PURE__*/React.createElement(ContentAbove, {
+    label: labelWithTooltip,
+    counter: renderCounter('top')
+  }), /*#__PURE__*/React.createElement(S.CodeAreaContent, null, /*#__PURE__*/React.createElement(S.EditorWrapper, {
+    hasError: Boolean(errorText)
+  }, /*#__PURE__*/React.createElement(S.EditorInnerWrapper, {
+    ref: wrapperRef
+  }, /*#__PURE__*/React.createElement(MonacoEditor, _extends({
+    theme: DS_MONACO_THEME_NAME,
+    width: width,
+    height: height
+  }, monacoProps, {
+    options: combinedOptions,
+    value: value,
+    onChange: handleChange,
+    editorDidMount: handleEditorDidMount,
+    editorWillMount: handleEditorWillMount,
+    language: currentSyntax
+  }))), isBottomBarShowing && /*#__PURE__*/React.createElement(BottomBar, {
+    texts: allTexts,
+    syntaxSelect: syntaxSelect,
+    allowFullscreen: allowFullscreen && !isFullscreen,
+    toggleFullscreen: toggleFullscreen,
+    customFooterContent: customFooterContent
+  })), /*#__PURE__*/React.createElement(ContentBelow, {
+    ref: contentBelowRef,
+    errorText: errorText,
+    description: description,
+    additionalDescription: additionalDescription,
+    counter: renderCounter(!isFullscreen ? 'bottom' : undefined)
+  })));
+};
+
+export default CodeArea;

package/dist/CodeArea.styles.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+export declare const EditorInnerWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CodeAreaContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const EditorWrapper: import("styled-components").StyledComponent<"div", any, {
+    hasError: boolean;
+}, never>;
+export declare const FullscreenHeaderTitle: import("styled-components").StyledComponent<({ level, withoutMargin, children, className, ellipsis, ...antdProps }: import("@synerise/ds-typography/dist/Title.types").Props) => JSX.Element, any, {}, never>;
+export declare const FullscreenHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CodeAreaWrapper: import("styled-components").StyledComponent<"div", any, {
+    isFullscreen: boolean;
+    requiredSpace: number;
+}, never>;
+export declare const AdditionalDescription: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ContentBelow: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ContentAbove: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SyntaxTitle: import("styled-components").StyledComponent<({ size, className, children, ellipsis }: {
+    size?: import("@synerise/ds-typography").TextSize | undefined;
+    ellipsis?: import("@synerise/ds-typography/dist/Ellipsis").EllipsisProps | undefined;
+    children?: import("react").ReactNode;
+    className?: string | undefined;
+}) => JSX.Element, any, {}, never>;
+export declare const BottomBar: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LeftSide: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const RightSide: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SyntaxSelect: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BottomBarElement: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Description: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Counter: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ErrorText: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/CodeArea.styles.js

@@ -0,0 +1,92 @@
+import styled, { css } from 'styled-components';
+import { Title, Text } from '@synerise/ds-typography';
+var FlexRow = styled.div.withConfig({
+  displayName: "CodeAreastyles__FlexRow",
+  componentId: "svoej2-0"
+})(["display:flex;justify-content:space-between;align-items:center;"]);
+export var EditorInnerWrapper = styled.div.withConfig({
+  displayName: "CodeAreastyles__EditorInnerWrapper",
+  componentId: "svoej2-1"
+})(["height:295px;"]);
+export var CodeAreaContent = styled.div.withConfig({
+  displayName: "CodeAreastyles__CodeAreaContent",
+  componentId: "svoej2-2"
+})([""]);
+export var EditorWrapper = styled.div.withConfig({
+  displayName: "CodeAreastyles__EditorWrapper",
+  componentId: "svoej2-3"
+})(["border:solid 1px ", ";border-radius:3px;padding-top:12px;", ";canvas{opacity:0;}"], function (props) {
+  return props.hasError ? props.theme.palette['red-600'] : props.theme.palette['grey-200'];
+}, function (props) {
+  return props.hasError && css(["background:", ";box-shadow:inset 0 0 0 1px ", ";"], props.theme.palette['red-050'], props.theme.palette['red-600']);
+});
+export var FullscreenHeaderTitle = styled(Title).withConfig({
+  displayName: "CodeAreastyles__FullscreenHeaderTitle",
+  componentId: "svoej2-4"
+})(["display:flex;gap:16px;align-items:center;margin-bottom:0;"]);
+export var FullscreenHeader = styled(FlexRow).withConfig({
+  displayName: "CodeAreastyles__FullscreenHeader",
+  componentId: "svoej2-5"
+})(["padding:16px 24px;"]);
+export var CodeAreaWrapper = styled.div.withConfig({
+  displayName: "CodeAreastyles__CodeAreaWrapper",
+  componentId: "svoej2-6"
+})(["", ""], function (props) {
+  if (props.isFullscreen) {
+    return css(["position:fixed;width:100vw;height:100vh;z-index:999;left:0;top:0;background:", ";", "{height:calc(100vh - ", "px);}", "{margin:0 24px;}"], props.theme.palette.white, EditorInnerWrapper, props.requiredSpace, CodeAreaContent);
+  }
+
+  return css(["margin-bottom:12px;"]);
+});
+export var AdditionalDescription = styled.div.withConfig({
+  displayName: "CodeAreastyles__AdditionalDescription",
+  componentId: "svoej2-7"
+})(["margin-bottom:8px;"]);
+export var ContentBelow = styled(FlexRow).withConfig({
+  displayName: "CodeAreastyles__ContentBelow",
+  componentId: "svoej2-8"
+})(["margin-top:8px;align-items:flex-start;"]);
+export var ContentAbove = styled(FlexRow).withConfig({
+  displayName: "CodeAreastyles__ContentAbove",
+  componentId: "svoej2-9"
+})(["margin-bottom:8px;"]);
+export var SyntaxTitle = styled(Text).withConfig({
+  displayName: "CodeAreastyles__SyntaxTitle",
+  componentId: "svoej2-10"
+})([""]);
+export var BottomBar = styled(FlexRow).withConfig({
+  displayName: "CodeAreastyles__BottomBar",
+  componentId: "svoej2-11"
+})(["border-top:solid 1px ", ";padding:8px;"], function (props) {
+  return props.theme.palette['grey-200'];
+});
+export var LeftSide = styled.div.withConfig({
+  displayName: "CodeAreastyles__LeftSide",
+  componentId: "svoej2-12"
+})([""]);
+export var RightSide = styled.div.withConfig({
+  displayName: "CodeAreastyles__RightSide",
+  componentId: "svoej2-13"
+})(["margin-left:auto;display:flex;gap:8px;"]);
+export var SyntaxSelect = styled(LeftSide).withConfig({
+  displayName: "CodeAreastyles__SyntaxSelect",
+  componentId: "svoej2-14"
+})(["padding-left:8px;"]);
+export var BottomBarElement = styled.div.withConfig({
+  displayName: "CodeAreastyles__BottomBarElement",
+  componentId: "svoej2-15"
+})([""]);
+export var Description = styled.div.withConfig({
+  displayName: "CodeAreastyles__Description",
+  componentId: "svoej2-16"
+})([""]);
+export var Counter = styled.div.withConfig({
+  displayName: "CodeAreastyles__Counter",
+  componentId: "svoej2-17"
+})(["font-weight:500;"]);
+export var ErrorText = styled.div.withConfig({
+  displayName: "CodeAreastyles__ErrorText",
+  componentId: "svoej2-18"
+})(["color:", ";margin-bottom:4px;"], function (props) {
+  return props.theme.palette['red-600'];
+});

package/dist/CodeArea.types.d.ts

@@ -0,0 +1,43 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { MonacoEditorProps } from 'react-monaco-editor';
+import { TooltipProps } from 'antd/lib/tooltip';
+import TooltipExtendedProps from '@synerise/ds-tooltip/dist/Tooltip.types';
+export type CodeAreaSyntax = 'json' | 'html' | 'css' | 'typescript' | 'javascript' | string;
+export type CodeAreaSyntaxOption<SyntaxName extends CodeAreaSyntax = CodeAreaSyntax> = {
+    language: SyntaxName;
+    label?: string;
+};
+export type CodeAreaTexts = {
+    fullscreen: ReactNode;
+    closeFullscreen: ReactNode;
+    fullscreenTitle: ReactNode;
+};
+export type CodeAreaProps<SyntaxName extends CodeAreaSyntax = CodeAreaSyntax> = MonacoEditorProps & {
+    label?: ReactNode;
+    description?: ReactNode;
+    texts?: Partial<CodeAreaTexts>;
+    counter?: {
+        limit: number;
+        placement?: 'bottom' | 'top';
+    };
+    errorText?: ReactNode;
+    syntaxOptions?: CodeAreaSyntaxOption<SyntaxName>[];
+    currentSyntax: SyntaxName;
+    allowFullscreen?: boolean;
+    tooltip?: ReactNode;
+    tooltipProps?: TooltipExtendedProps & TooltipProps;
+    style?: CSSProperties;
+    className?: string;
+    renderFooterContent?: (props: {
+        isFullscreen?: boolean;
+        count?: number;
+        isValid?: boolean;
+    }) => ReactNode;
+    renderAdditionalDescription?: (props: {
+        isFullscreen?: boolean;
+        count?: number;
+        isValid?: boolean;
+    }) => ReactNode;
+    onFullscreenChange?: (isFullscreen: boolean) => void;
+    onSyntaxChange?: (newSyntax: SyntaxName) => void;
+};

package/dist/CodeArea.types.js

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

package/dist/components/BottomBar.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { CodeAreaTexts } from '../CodeArea.types';
+type BottomBarProps = {
+    texts: CodeAreaTexts;
+    allowFullscreen?: boolean;
+    syntaxSelect?: ReactNode;
+    customFooterContent?: ReactNode;
+    toggleFullscreen?: () => void;
+};
+export declare const BottomBar: ({ texts, syntaxSelect, customFooterContent, allowFullscreen, toggleFullscreen, }: BottomBarProps) => JSX.Element;
+export {};

package/dist/components/BottomBar.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import Button from '@synerise/ds-button';
+import Icon, { FullScreenM } from '@synerise/ds-icon';
+import * as S from '../CodeArea.styles';
+export var BottomBar = function BottomBar(_ref) {
+  var texts = _ref.texts,
+      syntaxSelect = _ref.syntaxSelect,
+      customFooterContent = _ref.customFooterContent,
+      allowFullscreen = _ref.allowFullscreen,
+      toggleFullscreen = _ref.toggleFullscreen;
+  var fullscreenButton = allowFullscreen && /*#__PURE__*/React.createElement(Button, {
+    type: "ghost",
+    mode: "icon-label",
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      component: /*#__PURE__*/React.createElement(FullScreenM, null)
+    }),
+    onClick: toggleFullscreen
+  }, texts.fullscreen);
+  return /*#__PURE__*/React.createElement(S.BottomBar, {
+    "data-testid": "code-area-bottombar"
+  }, syntaxSelect && /*#__PURE__*/React.createElement(S.SyntaxSelect, {
+    "data-testid": "code-area-syntaxoptions"
+  }, syntaxSelect), (customFooterContent || fullscreenButton) && /*#__PURE__*/React.createElement(S.RightSide, null, customFooterContent, fullscreenButton));
+};

package/dist/components/ContentAbove.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+type ContentAboveProps = {
+    label?: ReactNode;
+    counter?: ReactNode;
+};
+export declare const ContentAbove: ({ label, counter }: ContentAboveProps) => JSX.Element;
+export {};

package/dist/components/ContentAbove.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import * as S from '../CodeArea.styles';
+export var ContentAbove = function ContentAbove(_ref) {
+  var label = _ref.label,
+      counter = _ref.counter;
+  return /*#__PURE__*/React.createElement(S.ContentAbove, null, label && /*#__PURE__*/React.createElement(S.LeftSide, {
+    "data-testid": "code-area-label"
+  }, label), counter && /*#__PURE__*/React.createElement(S.RightSide, {
+    "data-testid": "code-area-counter-top"
+  }, counter));
+};

package/dist/components/ContentBelow.d.ts

@@ -0,0 +1,6 @@
+import React, { ReactNode } from 'react';
+import { CodeAreaProps } from '../CodeArea.types';
+export declare const ContentBelow: React.ForwardRefExoticComponent<Pick<CodeAreaProps<string>, "description" | "errorText"> & {
+    additionalDescription?: ReactNode;
+    counter?: ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ContentBelow.js

@@ -0,0 +1,18 @@
+import React, { forwardRef } from 'react';
+import * as S from '../CodeArea.styles';
+export var ContentBelow = forwardRef(function (_ref, ref) {
+  var description = _ref.description,
+      additionalDescription = _ref.additionalDescription,
+      errorText = _ref.errorText,
+      counter = _ref.counter;
+  return /*#__PURE__*/React.createElement(S.ContentBelow, {
+    "data-testid": "code-area-below",
+    ref: ref
+  }, (description || additionalDescription || errorText) && /*#__PURE__*/React.createElement(S.LeftSide, null, additionalDescription, errorText && /*#__PURE__*/React.createElement(S.ErrorText, {
+    "data-testid": "code-area-error"
+  }, errorText), description && /*#__PURE__*/React.createElement(S.Description, {
+    "data-testid": "code-area-description"
+  }, description)), counter && /*#__PURE__*/React.createElement(S.RightSide, {
+    "data-testid": "code-area-counter-bottom"
+  }, counter));
+});

package/dist/components/FullscreenHeader.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { CodeAreaTexts } from '../CodeArea.types';
+type FullscreenHeaderProps = {
+    label?: ReactNode;
+    texts: CodeAreaTexts;
+    onClick: () => void;
+};
+export declare const FullscreenHeader: ({ label, texts, onClick }: FullscreenHeaderProps) => JSX.Element;
+export {};

package/dist/components/FullscreenHeader.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import Button from '@synerise/ds-button';
+import Icon, { CloseM, CodeTerminalM } from '@synerise/ds-icon';
+import * as S from '../CodeArea.styles';
+export var FullscreenHeader = function FullscreenHeader(_ref) {
+  var label = _ref.label,
+      texts = _ref.texts,
+      onClick = _ref.onClick;
+  return /*#__PURE__*/React.createElement(S.FullscreenHeader, null, /*#__PURE__*/React.createElement(S.LeftSide, null, /*#__PURE__*/React.createElement(S.FullscreenHeaderTitle, {
+    level: 3
+  }, /*#__PURE__*/React.createElement(Icon, {
+    component: /*#__PURE__*/React.createElement(CodeTerminalM, null)
+  }), label || texts.fullscreenTitle)), /*#__PURE__*/React.createElement(S.RightSide, null, /*#__PURE__*/React.createElement(Button, {
+    type: "primary",
+    mode: "icon-label",
+    onClick: onClick,
+    icon: /*#__PURE__*/React.createElement(Icon, {
+      component: /*#__PURE__*/React.createElement(CloseM, null)
+    })
+  }, texts.closeFullscreen)));
+};

package/dist/components/index.d.ts

@@ -0,0 +1,4 @@
+export * from './ContentAbove';
+export * from './ContentBelow';
+export * from './FullscreenHeader';
+export * from './BottomBar';

package/dist/components/index.js

@@ -0,0 +1,4 @@
+export * from './ContentAbove';
+export * from './ContentBelow';
+export * from './FullscreenHeader';
+export * from './BottomBar';

package/dist/constants.d.ts

@@ -0,0 +1,5 @@
+import type { monaco } from 'react-monaco-editor';
+export declare const MONACO_DEFAULT_OPTIONS: monaco.editor.IStandaloneEditorConstructionOptions;
+export declare const TRIGGER_SOURCE = "ds-code-area";
+export declare const DS_MONACO_THEME_NAME = "DSTheme";
+export declare const DS_MONACO_THEME: monaco.editor.IStandaloneThemeData;

package/dist/constants.js

@@ -0,0 +1,31 @@
+import { theme } from '@synerise/ds-core';
+export var MONACO_DEFAULT_OPTIONS = {
+  minimap: {
+    enabled: false
+  },
+  automaticLayout: true,
+  renderLineHighlight: 'none',
+  scrollbar: {
+    verticalScrollbarSize: 11,
+    verticalSliderSize: 3,
+    vertical: 'visible',
+    useShadows: false
+  }
+};
+export var TRIGGER_SOURCE = 'ds-code-area';
+var TRANSPARENT = '#00000000';
+export var DS_MONACO_THEME_NAME = 'DSTheme';
+export var DS_MONACO_THEME = {
+  base: 'vs',
+  inherit: true,
+  rules: [],
+  colors: {
+    'editor.foreground': theme.palette['grey-800'],
+    'editor.background': TRANSPARENT,
+    'editorOverviewRuler.border': TRANSPARENT,
+    'scrollbarSlider.background': theme.palette['grey-300'],
+    'scrollbarSlider.hoverBackground': theme.palette['grey-500'],
+    'scrollbarSlider.activeBackground': theme.palette['grey-500'],
+    'editorLineNumber.foreground': theme.palette['grey-500']
+  }
+};

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './CodeArea';
+export type { CodeAreaProps, CodeAreaTexts, CodeAreaSyntaxOption, CodeAreaSyntax } from './CodeArea.types';

package/dist/index.js

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

package/dist/modules.d.js

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/dist/utils/calculateRequiredSpace.d.ts

@@ -0,0 +1 @@
+export declare const calculateRequiredSpace: (isBottomBarShowing: boolean, contentBelowHeight: number) => number;

package/dist/utils/calculateRequiredSpace.js

@@ -0,0 +1,6 @@
+var HEADER_HEIGHT = 64;
+var BAR_HEIGHT = 49;
+var MARGINS = 40;
+export var calculateRequiredSpace = function calculateRequiredSpace(isBottomBarShowing, contentBelowHeight) {
+  return HEADER_HEIGHT + (isBottomBarShowing ? BAR_HEIGHT : 0) + contentBelowHeight + MARGINS;
+};

package/dist/utils/getCharCount.d.ts

@@ -0,0 +1 @@
+export declare const getCharCount: (value?: string | null, limit?: number) => number | undefined;

package/dist/utils/getCharCount.js

@@ -0,0 +1,4 @@
+export var getCharCount = function getCharCount(value, limit) {
+  if (limit && value && value.toString().length > limit) return undefined;
+  return value ? value.toString().length : 0;
+};

package/dist/utils/getDefaultTexts.d.ts

@@ -0,0 +1,2 @@
+import { CodeAreaTexts } from '../CodeArea.types';
+export declare const getDefaultTexts: (texts?: Partial<CodeAreaTexts>) => CodeAreaTexts;

package/dist/utils/getDefaultTexts.js

@@ -0,0 +1,25 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+export var getDefaultTexts = function getDefaultTexts(texts) {
+  var defaultTexts = {
+    fullscreen: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "DS.CODE-AREA.FULLSCREEN",
+      defaultMessage: "Fullscreen"
+    }),
+    closeFullscreen: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "DS.CODE-AREA.CLOSE-FULLSCREEN",
+      defaultMessage: "Close fullscreen"
+    }),
+    fullscreenTitle: /*#__PURE__*/React.createElement(FormattedMessage, {
+      id: "DS.CODE-AREA.FULLSCREEN-TITLE",
+      defaultMessage: "Fullscreen editor"
+    })
+  };
+  return _objectSpread({}, defaultTexts, {}, texts);
+};

package/dist/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from './getDefaultTexts';
+export * from './getCharCount';
+export * from './calculateRequiredSpace';

package/dist/utils/index.js

@@ -0,0 +1,3 @@
+export * from './getDefaultTexts';
+export * from './getCharCount';
+export * from './calculateRequiredSpace';

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@synerise/ds-code-area",
+  "version": "0.0.1",
+  "description": "CodeArea UI Component for the Synerise Design System",
+  "license": "ISC",
+  "repository": "Synerise/synerise-design",
+  "main": "dist/index.js",
+  "files": [
+    "/dist",
+    "CHANGELOG.md",
+    "README.md",
+    "package.json",
+    "LICENSE.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "npm run build:js && npm run build:css && npm run defs",
+    "build:css": "node ../../../scripts/style/less.js",
+    "build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
+    "build:watch": "npm run build:js -- --watch",
+    "defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
+    "pack:ci": "npm pack --pack-destination ../../portal/storybook-static/static",
+    "prepublish": "npm run build",
+    "test": "jest",
+    "test:watch": "npm run test -- --watchAll",
+    "types": "tsc --noEmit"
+  },
+  "sideEffects": [
+    "dist/style/*",
+    "*.less"
+  ],
+  "types": "dist/index.d.ts",
+  "dependencies": {
+    "@synerise/ds-button": "^0.19.4",
+    "@synerise/ds-core": "^0.40.12",
+    "@synerise/ds-icon": "^0.60.4",
+    "@synerise/ds-inline-edit": "^0.6.101",
+    "@synerise/ds-input": "^0.20.2",
+    "@synerise/ds-tooltip": "^0.14.21",
+    "@synerise/ds-typography": "^0.14.3",
+    "@synerise/ds-utils": "^0.26.0",
+    "monaco-editor": "0.47.0",
+    "react-monaco-editor": "^0.55.0"
+  },
+  "peerDependencies": {
+    "@synerise/ds-core": "*",
+    "react": ">=16.9.0 < 17.0.0",
+    "styled-components": "5.0.1"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "5.1.1"
+  },
+  "gitHead": "2f935cb84d9f0c1171540094be36ab73bc024871"
+}