@synerise/ds-code-area 1.3.1 → 1.3.2
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/README.md +3 -1
- package/dist/CodeArea.figma.d.ts +1 -0
- package/dist/CodeArea.figma.js +119 -0
- package/dist/components/CodeAreaEditor.d.ts +1 -1
- package/package.json +13 -13
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,10 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [1.3.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-code-area@1.3.1...@synerise/ds-code-area@1.3.2) (2026-03-20)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @synerise/ds-code-area
|
|
9
|
+
|
|
6
10
|
## [1.3.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-code-area@1.3.0...@synerise/ds-code-area@1.3.1) (2026-03-09)
|
|
7
11
|
|
|
8
12
|
### Bug Fixes
|
package/README.md
CHANGED
|
@@ -55,7 +55,7 @@ const syntaxOptions = [
|
|
|
55
55
|
| allowFullscreen | renders fullscreen mode button | `boolean` | - |
|
|
56
56
|
| readOnly | renders readOnly mode | `boolean` | - |
|
|
57
57
|
| tooltip | tooltip text displayed next to label | `ReactNode` | - |
|
|
58
|
-
| tooltipProps | tooltip properties (see @synerise/ds-tooltip) | `
|
|
58
|
+
| tooltipProps | tooltip properties (see @synerise/ds-tooltip) | `TooltipProps` | - |
|
|
59
59
|
| style | custom style added to outermost div | `CSSProperties` | - |
|
|
60
60
|
| className | class name to add to outermost div | `string` | - |
|
|
61
61
|
| renderFooterContent | renders custom content in footer bar | `(CodeAreaStateProps) => ReactNode` | - |
|
|
@@ -66,6 +66,8 @@ const syntaxOptions = [
|
|
|
66
66
|
| getPopupContainer | customise where fullscreen layer is rendered into | getPopupContainer (@synerise/ds-utils) | - |
|
|
67
67
|
| placeholder | placeholder content | `ReactNode` | - |
|
|
68
68
|
| noBorder | remove border from wrapper | `boolean` | - |
|
|
69
|
+
| height | height of the editor wrapper | `string \| number` | `295px` |
|
|
70
|
+
| zIndex | z-index of the fullscreen overlay | `string \| number` | `zindex-modal` token |
|
|
69
71
|
|
|
70
72
|
### CodeAreaTexts
|
|
71
73
|
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,119 @@
|
|
|
1
|
+
import figma from '@figma/code-connect';
|
|
2
|
+
import CodeArea from './CodeArea';
|
|
3
|
+
var FIGMA_URL = 'https://www.figma.com/design/fsSZONXpVvtrDsCgtu01Jb/Synerise-Design-System?node-id=3143:21126&m=dev';
|
|
4
|
+
figma.connect(CodeArea, FIGMA_URL, {
|
|
5
|
+
variant: {
|
|
6
|
+
State: 'Default',
|
|
7
|
+
Label: 'True',
|
|
8
|
+
Border: 'True'
|
|
9
|
+
},
|
|
10
|
+
example: function example() {
|
|
11
|
+
return /*#__PURE__*/React.createElement(CodeArea, {
|
|
12
|
+
label: "Label",
|
|
13
|
+
description: "Description",
|
|
14
|
+
currentSyntax: "json",
|
|
15
|
+
value: ""
|
|
16
|
+
});
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
figma.connect(CodeArea, FIGMA_URL, {
|
|
20
|
+
variant: {
|
|
21
|
+
State: 'Default',
|
|
22
|
+
Label: 'False',
|
|
23
|
+
Border: 'True'
|
|
24
|
+
},
|
|
25
|
+
example: function example() {
|
|
26
|
+
return /*#__PURE__*/React.createElement(CodeArea, {
|
|
27
|
+
currentSyntax: "json",
|
|
28
|
+
value: ""
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
|
+
});
|
|
32
|
+
figma.connect(CodeArea, FIGMA_URL, {
|
|
33
|
+
variant: {
|
|
34
|
+
State: 'Default',
|
|
35
|
+
Label: 'False',
|
|
36
|
+
Border: 'False'
|
|
37
|
+
},
|
|
38
|
+
example: function example() {
|
|
39
|
+
return /*#__PURE__*/React.createElement(CodeArea, {
|
|
40
|
+
currentSyntax: "json",
|
|
41
|
+
value: "",
|
|
42
|
+
noBorder: true
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
});
|
|
46
|
+
figma.connect(CodeArea, FIGMA_URL, {
|
|
47
|
+
variant: {
|
|
48
|
+
State: 'Validated',
|
|
49
|
+
Label: 'True',
|
|
50
|
+
Border: 'True'
|
|
51
|
+
},
|
|
52
|
+
example: function example() {
|
|
53
|
+
return /*#__PURE__*/React.createElement(CodeArea, {
|
|
54
|
+
label: "Label",
|
|
55
|
+
description: "Description",
|
|
56
|
+
currentSyntax: "json",
|
|
57
|
+
value: "",
|
|
58
|
+
errorText: "Fill Code area"
|
|
59
|
+
});
|
|
60
|
+
}
|
|
61
|
+
});
|
|
62
|
+
figma.connect(CodeArea, FIGMA_URL, {
|
|
63
|
+
variant: {
|
|
64
|
+
State: 'Validated',
|
|
65
|
+
Label: 'False',
|
|
66
|
+
Border: 'True'
|
|
67
|
+
},
|
|
68
|
+
example: function example() {
|
|
69
|
+
return /*#__PURE__*/React.createElement(CodeArea, {
|
|
70
|
+
currentSyntax: "json",
|
|
71
|
+
value: "",
|
|
72
|
+
errorText: "Fill Code area"
|
|
73
|
+
});
|
|
74
|
+
}
|
|
75
|
+
});
|
|
76
|
+
figma.connect(CodeArea, FIGMA_URL, {
|
|
77
|
+
variant: {
|
|
78
|
+
State: 'Validated',
|
|
79
|
+
Label: 'False',
|
|
80
|
+
Border: 'False'
|
|
81
|
+
},
|
|
82
|
+
example: function example() {
|
|
83
|
+
return /*#__PURE__*/React.createElement(CodeArea, {
|
|
84
|
+
currentSyntax: "json",
|
|
85
|
+
value: "",
|
|
86
|
+
errorText: "Fill Code area",
|
|
87
|
+
noBorder: true
|
|
88
|
+
});
|
|
89
|
+
}
|
|
90
|
+
});
|
|
91
|
+
figma.connect(CodeArea, FIGMA_URL, {
|
|
92
|
+
variant: {
|
|
93
|
+
State: 'Read only',
|
|
94
|
+
Label: 'False',
|
|
95
|
+
Border: 'True'
|
|
96
|
+
},
|
|
97
|
+
example: function example() {
|
|
98
|
+
return /*#__PURE__*/React.createElement(CodeArea, {
|
|
99
|
+
currentSyntax: "json",
|
|
100
|
+
value: "",
|
|
101
|
+
readOnly: true
|
|
102
|
+
});
|
|
103
|
+
}
|
|
104
|
+
});
|
|
105
|
+
figma.connect(CodeArea, FIGMA_URL, {
|
|
106
|
+
variant: {
|
|
107
|
+
State: 'Read only',
|
|
108
|
+
Label: 'False',
|
|
109
|
+
Border: 'False'
|
|
110
|
+
},
|
|
111
|
+
example: function example() {
|
|
112
|
+
return /*#__PURE__*/React.createElement(CodeArea, {
|
|
113
|
+
currentSyntax: "json",
|
|
114
|
+
value: "",
|
|
115
|
+
readOnly: true,
|
|
116
|
+
noBorder: true
|
|
117
|
+
});
|
|
118
|
+
}
|
|
119
|
+
});
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
export declare const CodeAreaEditor: React.ForwardRefExoticComponent<Omit<import("@monaco-editor/react").EditorProps, "
|
|
2
|
+
export declare const CodeAreaEditor: React.ForwardRefExoticComponent<Omit<import("@monaco-editor/react").EditorProps, "language" | "height"> & {
|
|
3
3
|
label?: React.ReactNode;
|
|
4
4
|
description?: React.ReactNode;
|
|
5
5
|
texts?: Partial<import("../CodeArea.types").CodeAreaTexts>;
|
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.2",
|
|
4
4
|
"description": "CodeArea UI Component for the Synerise Design System",
|
|
5
5
|
"license": "ISC",
|
|
6
6
|
"repository": "Synerise/synerise-design",
|
|
@@ -23,8 +23,8 @@
|
|
|
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",
|
|
26
|
-
"test": "vitest",
|
|
27
|
-
"test:watch": "
|
|
26
|
+
"test": "vitest run",
|
|
27
|
+
"test:watch": "vitest",
|
|
28
28
|
"types": "tsc --noEmit",
|
|
29
29
|
"check:circular-dependencies": "madge --circular --extensions ts,tsx,js,jsx --ts-config tsconfig.json src/ --exclude '/dist/'",
|
|
30
30
|
"upgrade:ds": "ncu -f \"@synerise/ds-*\" -u"
|
|
@@ -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.
|
|
41
|
-
"@synerise/ds-form-field": "^1.3.
|
|
42
|
-
"@synerise/ds-icon": "^1.
|
|
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.
|
|
39
|
+
"@synerise/ds-button": "^1.5.17",
|
|
40
|
+
"@synerise/ds-core": "^1.11.0",
|
|
41
|
+
"@synerise/ds-form-field": "^1.3.9",
|
|
42
|
+
"@synerise/ds-icon": "^1.15.0",
|
|
43
|
+
"@synerise/ds-inline-edit": "^1.1.23",
|
|
44
|
+
"@synerise/ds-loader": "^1.0.13",
|
|
45
|
+
"@synerise/ds-tooltip": "^1.4.9",
|
|
46
|
+
"@synerise/ds-typography": "^1.1.12",
|
|
47
|
+
"@synerise/ds-utils": "^1.7.0"
|
|
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": "8efc031fa688c0b87c7b3915bae93546bb63bcac"
|
|
61
61
|
}
|