@synerise/ds-code-area 1.3.2 → 1.3.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +4 -0
- package/dist/CodeArea.d.ts +2 -2
- package/dist/CodeArea.figma.js +37 -88
- package/dist/CodeArea.js +31 -29
- package/dist/CodeArea.styles.d.ts +24 -24
- package/dist/CodeArea.styles.js +62 -55
- package/dist/CodeArea.types.d.ts +4 -4
- package/dist/CodeArea.types.js +1 -1
- package/dist/components/AriaContainer.d.ts +1 -1
- package/dist/components/AriaContainer.js +14 -13
- package/dist/components/BottomBar.d.ts +2 -2
- package/dist/components/BottomBar.js +25 -28
- package/dist/components/CodeAreaEditor.d.ts +5 -5
- package/dist/components/CodeAreaEditor.js +81 -104
- package/dist/components/CodeAreaEditorRaw.d.ts +2 -2
- package/dist/components/CodeAreaEditorRaw.js +118 -142
- package/dist/components/ContentAbove.d.ts +1 -1
- package/dist/components/ContentAbove.js +14 -11
- package/dist/components/ContentBelow.d.ts +2 -2
- package/dist/components/ContentBelow.js +22 -20
- package/dist/components/FullscreenHeader.d.ts +2 -2
- package/dist/components/FullscreenHeader.js +20 -21
- package/dist/components/index.js +14 -6
- package/dist/constants.d.ts +1 -1
- package/dist/constants.js +23 -17
- package/dist/index.js +25 -2
- package/dist/modules.d.js +1 -1
- package/dist/modules.d.ts +0 -0
- package/dist/utils/calculateRequiredSpace.js +8 -5
- package/dist/utils/getCharCount.js +6 -3
- package/dist/utils/getDefaultTexts.d.ts +1 -1
- package/dist/utils/getDefaultTexts.js +15 -19
- package/dist/utils/index.js +8 -3
- package/package.json +13 -13
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import React,
|
|
2
|
-
import {
|
|
1
|
+
import { default as React, ReactNode } from 'react';
|
|
2
|
+
import { CodeAreaTexts } from '../CodeArea.types';
|
|
3
3
|
type FullscreenHeaderProps = {
|
|
4
4
|
label?: ReactNode;
|
|
5
5
|
texts: CodeAreaTexts;
|
|
@@ -1,21 +1,20 @@
|
|
|
1
|
-
import
|
|
2
|
-
import Button from
|
|
3
|
-
import Icon, {
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
mode: "icon-label",
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
};
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import Button from "@synerise/ds-button";
|
|
3
|
+
import Icon, { CodeTerminalM, CloseM } from "@synerise/ds-icon";
|
|
4
|
+
import { FullscreenHeader as FullscreenHeader$1, LeftSide, FullscreenHeaderTitle, RightSide } from "../CodeArea.styles.js";
|
|
5
|
+
const FullscreenHeader = ({
|
|
6
|
+
label,
|
|
7
|
+
texts,
|
|
8
|
+
onClick
|
|
9
|
+
}) => {
|
|
10
|
+
return /* @__PURE__ */ jsxs(FullscreenHeader$1, { children: [
|
|
11
|
+
/* @__PURE__ */ jsx(LeftSide, { children: /* @__PURE__ */ jsxs(FullscreenHeaderTitle, { level: 3, children: [
|
|
12
|
+
/* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(CodeTerminalM, {}) }),
|
|
13
|
+
label || texts.fullscreenTitle
|
|
14
|
+
] }) }),
|
|
15
|
+
/* @__PURE__ */ jsx(RightSide, { children: /* @__PURE__ */ jsx(Button, { type: "primary", mode: "icon-label", onClick, icon: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(CloseM, {}) }), children: texts.closeFullscreen }) })
|
|
16
|
+
] });
|
|
17
|
+
};
|
|
18
|
+
export {
|
|
19
|
+
FullscreenHeader
|
|
20
|
+
};
|
package/dist/components/index.js
CHANGED
|
@@ -1,6 +1,14 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
import { ContentAbove } from "./ContentAbove.js";
|
|
2
|
+
import { ContentBelow } from "./ContentBelow.js";
|
|
3
|
+
import { FullscreenHeader } from "./FullscreenHeader.js";
|
|
4
|
+
import { BottomBar } from "./BottomBar.js";
|
|
5
|
+
import { CodeAreaEditorRaw } from "./CodeAreaEditorRaw.js";
|
|
6
|
+
import { CodeAreaEditor } from "./CodeAreaEditor.js";
|
|
7
|
+
export {
|
|
8
|
+
BottomBar,
|
|
9
|
+
CodeAreaEditor,
|
|
10
|
+
CodeAreaEditorRaw,
|
|
11
|
+
ContentAbove,
|
|
12
|
+
ContentBelow,
|
|
13
|
+
FullscreenHeader
|
|
14
|
+
};
|
package/dist/constants.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { editor } from 'monaco-editor/esm/vs/editor/editor.api';
|
|
2
2
|
export declare const MONACO_DEFAULT_OPTIONS: editor.IStandaloneEditorConstructionOptions;
|
|
3
3
|
export declare const TRIGGER_SOURCE = "ds-code-area";
|
|
4
4
|
export declare const DS_MONACO_THEME_NAME = "DSTheme";
|
package/dist/constants.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { theme } from
|
|
2
|
-
|
|
1
|
+
import { theme } from "@synerise/ds-core";
|
|
2
|
+
const MONACO_DEFAULT_OPTIONS = {
|
|
3
3
|
minimap: {
|
|
4
4
|
enabled: false
|
|
5
5
|
},
|
|
6
6
|
automaticLayout: true,
|
|
7
|
-
renderLineHighlight:
|
|
7
|
+
renderLineHighlight: "none",
|
|
8
8
|
quickSuggestions: {
|
|
9
9
|
other: true,
|
|
10
10
|
strings: true
|
|
@@ -12,24 +12,30 @@ export var MONACO_DEFAULT_OPTIONS = {
|
|
|
12
12
|
scrollbar: {
|
|
13
13
|
verticalScrollbarSize: 11,
|
|
14
14
|
verticalSliderSize: 3,
|
|
15
|
-
vertical:
|
|
15
|
+
vertical: "visible",
|
|
16
16
|
useShadows: false
|
|
17
17
|
}
|
|
18
18
|
};
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
base:
|
|
19
|
+
const TRIGGER_SOURCE = "ds-code-area";
|
|
20
|
+
const TRANSPARENT = "#00000000";
|
|
21
|
+
const DS_MONACO_THEME_NAME = "DSTheme";
|
|
22
|
+
const DS_MONACO_THEME = {
|
|
23
|
+
base: "vs",
|
|
24
24
|
inherit: true,
|
|
25
25
|
rules: [],
|
|
26
26
|
colors: {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
27
|
+
"editor.foreground": theme.palette["grey-800"],
|
|
28
|
+
"editor.background": TRANSPARENT,
|
|
29
|
+
"editorOverviewRuler.border": TRANSPARENT,
|
|
30
|
+
"scrollbarSlider.background": theme.palette["grey-300"],
|
|
31
|
+
"scrollbarSlider.hoverBackground": theme.palette["grey-500"],
|
|
32
|
+
"scrollbarSlider.activeBackground": theme.palette["grey-500"],
|
|
33
|
+
"editorLineNumber.foreground": theme.palette["grey-500"]
|
|
34
34
|
}
|
|
35
|
-
};
|
|
35
|
+
};
|
|
36
|
+
export {
|
|
37
|
+
DS_MONACO_THEME,
|
|
38
|
+
DS_MONACO_THEME_NAME,
|
|
39
|
+
MONACO_DEFAULT_OPTIONS,
|
|
40
|
+
TRIGGER_SOURCE
|
|
41
|
+
};
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,25 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import { default as default2 } from "./CodeArea.js";
|
|
2
|
+
import { AdditionalDescription, AriaContainer, BottomBar, BottomBarElement, CodeAreaContent, CodeAreaWrapper, ContentAbove, ContentBelow, Counter, Description, EditorInnerWrapper, EditorPlaceholder, EditorWrapper, ErrorText, FullscreenHeader, FullscreenHeaderTitle, LeftSide, RightSide, SyntaxSelect, SyntaxTitle } from "./CodeArea.styles.js";
|
|
3
|
+
export {
|
|
4
|
+
AdditionalDescription,
|
|
5
|
+
AriaContainer,
|
|
6
|
+
BottomBar,
|
|
7
|
+
BottomBarElement,
|
|
8
|
+
CodeAreaContent,
|
|
9
|
+
CodeAreaWrapper,
|
|
10
|
+
ContentAbove,
|
|
11
|
+
ContentBelow,
|
|
12
|
+
Counter,
|
|
13
|
+
Description,
|
|
14
|
+
EditorInnerWrapper,
|
|
15
|
+
EditorPlaceholder,
|
|
16
|
+
EditorWrapper,
|
|
17
|
+
ErrorText,
|
|
18
|
+
FullscreenHeader,
|
|
19
|
+
FullscreenHeaderTitle,
|
|
20
|
+
LeftSide,
|
|
21
|
+
RightSide,
|
|
22
|
+
SyntaxSelect,
|
|
23
|
+
SyntaxTitle,
|
|
24
|
+
default2 as default
|
|
25
|
+
};
|
package/dist/modules.d.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import
|
|
1
|
+
import "@testing-library/jest-dom";
|
|
File without changes
|
|
@@ -1,6 +1,9 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
const HEADER_HEIGHT = 64;
|
|
2
|
+
const BAR_HEIGHT = 49;
|
|
3
|
+
const MARGINS = 40;
|
|
4
|
+
const calculateRequiredSpace = (isBottomBarShowing, contentBelowHeight) => {
|
|
5
5
|
return HEADER_HEIGHT + (isBottomBarShowing ? BAR_HEIGHT : 0) + contentBelowHeight + MARGINS;
|
|
6
|
-
};
|
|
6
|
+
};
|
|
7
|
+
export {
|
|
8
|
+
calculateRequiredSpace
|
|
9
|
+
};
|
|
@@ -1,6 +1,9 @@
|
|
|
1
|
-
|
|
1
|
+
const getCharCount = (value, limit) => {
|
|
2
2
|
if (limit && value && value.toString().length > limit) {
|
|
3
|
-
return
|
|
3
|
+
return void 0;
|
|
4
4
|
}
|
|
5
5
|
return value ? value.toString().length : 0;
|
|
6
|
-
};
|
|
6
|
+
};
|
|
7
|
+
export {
|
|
8
|
+
getCharCount
|
|
9
|
+
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { CodeAreaTexts } from '../CodeArea.types';
|
|
2
2
|
export declare const getDefaultTexts: (texts?: Partial<CodeAreaTexts>) => CodeAreaTexts;
|
|
@@ -1,20 +1,16 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
defaultMessage: "Fullscreen"
|
|
9
|
-
}),
|
|
10
|
-
closeFullscreen: /*#__PURE__*/React.createElement(FormattedMessage, {
|
|
11
|
-
id: "DS.CODE-AREA.CLOSE-FULLSCREEN",
|
|
12
|
-
defaultMessage: "Close fullscreen"
|
|
13
|
-
}),
|
|
14
|
-
fullscreenTitle: /*#__PURE__*/React.createElement(FormattedMessage, {
|
|
15
|
-
id: "DS.CODE-AREA.FULLSCREEN-TITLE",
|
|
16
|
-
defaultMessage: "Fullscreen editor"
|
|
17
|
-
})
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { FormattedMessage } from "react-intl";
|
|
3
|
+
const getDefaultTexts = (texts) => {
|
|
4
|
+
const defaultTexts = {
|
|
5
|
+
fullscreen: /* @__PURE__ */ jsx(FormattedMessage, { id: "DS.CODE-AREA.FULLSCREEN", defaultMessage: "Fullscreen" }),
|
|
6
|
+
closeFullscreen: /* @__PURE__ */ jsx(FormattedMessage, { id: "DS.CODE-AREA.CLOSE-FULLSCREEN", defaultMessage: "Close fullscreen" }),
|
|
7
|
+
fullscreenTitle: /* @__PURE__ */ jsx(FormattedMessage, { id: "DS.CODE-AREA.FULLSCREEN-TITLE", defaultMessage: "Fullscreen editor" })
|
|
18
8
|
};
|
|
19
|
-
return
|
|
20
|
-
|
|
9
|
+
return {
|
|
10
|
+
...defaultTexts,
|
|
11
|
+
...texts
|
|
12
|
+
};
|
|
13
|
+
};
|
|
14
|
+
export {
|
|
15
|
+
getDefaultTexts
|
|
16
|
+
};
|
package/dist/utils/index.js
CHANGED
|
@@ -1,3 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import { getDefaultTexts } from "./getDefaultTexts.js";
|
|
2
|
+
import { getCharCount } from "./getCharCount.js";
|
|
3
|
+
import { calculateRequiredSpace } from "./calculateRequiredSpace.js";
|
|
4
|
+
export {
|
|
5
|
+
calculateRequiredSpace,
|
|
6
|
+
getCharCount,
|
|
7
|
+
getDefaultTexts
|
|
8
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@synerise/ds-code-area",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.3",
|
|
4
4
|
"description": "CodeArea UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "Synerise/synerise-design",
|
|
@@ -16,10 +16,10 @@
|
|
|
16
16
|
"access": "public"
|
|
17
17
|
},
|
|
18
18
|
"scripts": {
|
|
19
|
-
"build": "
|
|
19
|
+
"build": "vite build",
|
|
20
20
|
"build:css": "node ../../../scripts/style/less.js",
|
|
21
21
|
"build:js": "babel --delete-dir-on-start --root-mode upward src --out-dir dist --extensions '.js,.ts,.tsx'",
|
|
22
|
-
"build:watch": "
|
|
22
|
+
"build:watch": "vite build --watch",
|
|
23
23
|
"defs": "tsc --declaration --outDir dist/ --emitDeclarationOnly",
|
|
24
24
|
"pack:ci": "pnpm pack --pack-destination ../../storybook/storybook-static/static",
|
|
25
25
|
"prepublish": "pnpm run build",
|
|
@@ -36,15 +36,15 @@
|
|
|
36
36
|
"types": "dist/index.d.ts",
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@monaco-editor/react": "4.4.6",
|
|
39
|
-
"@synerise/ds-button": "^1.5.
|
|
40
|
-
"@synerise/ds-core": "^1.11.
|
|
41
|
-
"@synerise/ds-form-field": "^1.3.
|
|
42
|
-
"@synerise/ds-icon": "^1.15.
|
|
43
|
-
"@synerise/ds-inline-edit": "^1.1.
|
|
44
|
-
"@synerise/ds-loader": "^1.0.
|
|
45
|
-
"@synerise/ds-tooltip": "^1.4.
|
|
46
|
-
"@synerise/ds-typography": "^1.1.
|
|
47
|
-
"@synerise/ds-utils": "^1.7.
|
|
39
|
+
"@synerise/ds-button": "^1.5.18",
|
|
40
|
+
"@synerise/ds-core": "^1.11.1",
|
|
41
|
+
"@synerise/ds-form-field": "^1.3.10",
|
|
42
|
+
"@synerise/ds-icon": "^1.15.1",
|
|
43
|
+
"@synerise/ds-inline-edit": "^1.1.24",
|
|
44
|
+
"@synerise/ds-loader": "^1.0.14",
|
|
45
|
+
"@synerise/ds-tooltip": "^1.4.10",
|
|
46
|
+
"@synerise/ds-typography": "^1.1.13",
|
|
47
|
+
"@synerise/ds-utils": "^1.7.1"
|
|
48
48
|
},
|
|
49
49
|
"peerDependencies": {
|
|
50
50
|
"@synerise/ds-core": "*",
|
|
@@ -57,5 +57,5 @@
|
|
|
57
57
|
"monaco-editor": "0.34.1",
|
|
58
58
|
"vitest": "4"
|
|
59
59
|
},
|
|
60
|
-
"gitHead": "
|
|
60
|
+
"gitHead": "e4ecca8944fc9b41c1b9d59c8bcad5e5e2013225"
|
|
61
61
|
}
|