@cere/cere-design-system 0.0.8 → 0.0.9
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/dist/index.js +106 -30
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +107 -31
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -3018,6 +3018,9 @@ var import_react7 = __toESM(require("@monaco-editor/react"));
|
|
|
3018
3018
|
var import_material31 = require("@mui/material");
|
|
3019
3019
|
var import_Fullscreen = __toESM(require("@mui/icons-material/Fullscreen"));
|
|
3020
3020
|
var import_FullscreenExit = __toESM(require("@mui/icons-material/FullscreenExit"));
|
|
3021
|
+
var import_ErrorOutline = __toESM(require("@mui/icons-material/ErrorOutline"));
|
|
3022
|
+
var import_ExpandMore2 = __toESM(require("@mui/icons-material/ExpandMore"));
|
|
3023
|
+
var import_ExpandLess = __toESM(require("@mui/icons-material/ExpandLess"));
|
|
3021
3024
|
var import_jsx_runtime44 = require("react/jsx-runtime");
|
|
3022
3025
|
var configureTypeScript = (monaco) => {
|
|
3023
3026
|
monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
|
|
@@ -3069,6 +3072,16 @@ var CodeEditor = ({
|
|
|
3069
3072
|
const [actualHeight, setActualHeight] = (0, import_react6.useState)(
|
|
3070
3073
|
typeof height === "number" ? `${height}px` : height
|
|
3071
3074
|
);
|
|
3075
|
+
const [showProblems, setShowProblems] = (0, import_react6.useState)(false);
|
|
3076
|
+
const [hasUserToggledProblems, setHasUserToggledProblems] = (0, import_react6.useState)(false);
|
|
3077
|
+
(0, import_react6.useEffect)(() => {
|
|
3078
|
+
if (hasUserToggledProblems) return;
|
|
3079
|
+
if (validationErrors.length > 0) {
|
|
3080
|
+
setShowProblems(true);
|
|
3081
|
+
} else {
|
|
3082
|
+
setShowProblems(false);
|
|
3083
|
+
}
|
|
3084
|
+
}, [validationErrors, hasUserToggledProblems]);
|
|
3072
3085
|
const internalEditorRef = (0, import_react6.useRef)(null);
|
|
3073
3086
|
const internalMonacoRef = (0, import_react6.useRef)(null);
|
|
3074
3087
|
const finalEditorRef = editorRef || internalEditorRef;
|
|
@@ -3087,6 +3100,21 @@ var CodeEditor = ({
|
|
|
3087
3100
|
onFullscreenChange(newFullscreenState);
|
|
3088
3101
|
}
|
|
3089
3102
|
}, [isFullscreen, onFullscreenChange]);
|
|
3103
|
+
const gotoMarker = (0, import_react6.useCallback)(
|
|
3104
|
+
(marker) => {
|
|
3105
|
+
const ed = finalEditorRef?.current;
|
|
3106
|
+
if (!ed) return;
|
|
3107
|
+
const position = { lineNumber: marker.startLineNumber, column: marker.startColumn || 1 };
|
|
3108
|
+
try {
|
|
3109
|
+
ed.revealPositionInCenter(position);
|
|
3110
|
+
ed.setPosition(position);
|
|
3111
|
+
ed.focus();
|
|
3112
|
+
} catch (e) {
|
|
3113
|
+
console.error("CodeEditor: Failed to navigate to marker", e);
|
|
3114
|
+
}
|
|
3115
|
+
},
|
|
3116
|
+
[finalEditorRef]
|
|
3117
|
+
);
|
|
3090
3118
|
(0, import_react6.useEffect)(() => {
|
|
3091
3119
|
if (!isFullscreen) return;
|
|
3092
3120
|
function escapeHandler(event) {
|
|
@@ -3269,14 +3297,16 @@ var CodeEditor = ({
|
|
|
3269
3297
|
sx: {
|
|
3270
3298
|
flex: 1,
|
|
3271
3299
|
display: "flex",
|
|
3300
|
+
flexDirection: "column",
|
|
3272
3301
|
overflow: "hidden",
|
|
3273
3302
|
minHeight: editorMinHeight,
|
|
3274
|
-
position: "relative"
|
|
3303
|
+
position: "relative",
|
|
3304
|
+
height: isFullscreen ? "100%" : actualHeight
|
|
3275
3305
|
},
|
|
3276
3306
|
children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
|
|
3277
3307
|
import_react7.default,
|
|
3278
3308
|
{
|
|
3279
|
-
height:
|
|
3309
|
+
height: "100%",
|
|
3280
3310
|
defaultLanguage: language,
|
|
3281
3311
|
defaultValue: value,
|
|
3282
3312
|
value: tsCode,
|
|
@@ -3293,38 +3323,84 @@ var CodeEditor = ({
|
|
|
3293
3323
|
}
|
|
3294
3324
|
),
|
|
3295
3325
|
validationErrors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
|
|
3296
|
-
import_material31.
|
|
3326
|
+
import_material31.Box,
|
|
3297
3327
|
{
|
|
3298
|
-
severity: "error",
|
|
3299
3328
|
sx: {
|
|
3300
|
-
|
|
3301
|
-
|
|
3302
|
-
|
|
3303
|
-
|
|
3304
|
-
|
|
3305
|
-
|
|
3306
|
-
|
|
3307
|
-
|
|
3308
|
-
borderRadius: 1,
|
|
3309
|
-
maxHeight: "150px",
|
|
3310
|
-
overflow: "auto"
|
|
3329
|
+
borderTop: 1,
|
|
3330
|
+
borderColor: "divider",
|
|
3331
|
+
bgcolor: "background.default",
|
|
3332
|
+
display: "flex",
|
|
3333
|
+
flexDirection: "column",
|
|
3334
|
+
maxHeight: showProblems ? 180 : 40,
|
|
3335
|
+
minHeight: 40,
|
|
3336
|
+
transition: "max-height 0.2s ease"
|
|
3311
3337
|
},
|
|
3312
3338
|
children: [
|
|
3313
|
-
/* @__PURE__ */ (0, import_jsx_runtime44.
|
|
3314
|
-
|
|
3315
|
-
|
|
3316
|
-
|
|
3317
|
-
|
|
3318
|
-
|
|
3319
|
-
|
|
3320
|
-
|
|
3321
|
-
|
|
3322
|
-
|
|
3323
|
-
|
|
3324
|
-
|
|
3325
|
-
|
|
3326
|
-
|
|
3327
|
-
|
|
3339
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
|
|
3340
|
+
import_material31.Box,
|
|
3341
|
+
{
|
|
3342
|
+
sx: {
|
|
3343
|
+
display: "flex",
|
|
3344
|
+
alignItems: "center",
|
|
3345
|
+
px: 1,
|
|
3346
|
+
py: 0.5,
|
|
3347
|
+
gap: 1,
|
|
3348
|
+
borderBottom: showProblems ? "1px solid" : "none",
|
|
3349
|
+
borderColor: "divider",
|
|
3350
|
+
fontSize: "0.875rem",
|
|
3351
|
+
color: "text.secondary"
|
|
3352
|
+
},
|
|
3353
|
+
children: [
|
|
3354
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_ErrorOutline.default, { color: "error", fontSize: "small" }),
|
|
3355
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_material31.Box, { sx: { fontWeight: 600, color: "text.primary" }, children: "Problems" }),
|
|
3356
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_material31.Box, { sx: { ml: 1 }, children: [
|
|
3357
|
+
validationErrors.length,
|
|
3358
|
+
" error",
|
|
3359
|
+
validationErrors.length > 1 ? "s" : ""
|
|
3360
|
+
] }),
|
|
3361
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_material31.Box, { sx: { flex: 1 } }),
|
|
3362
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
|
|
3363
|
+
import_material31.IconButton,
|
|
3364
|
+
{
|
|
3365
|
+
size: "small",
|
|
3366
|
+
"aria-label": "Toggle problems panel",
|
|
3367
|
+
onClick: () => {
|
|
3368
|
+
setHasUserToggledProblems(true);
|
|
3369
|
+
setShowProblems((s) => !s);
|
|
3370
|
+
},
|
|
3371
|
+
children: showProblems ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_ExpandMore2.default, { fontSize: "small" }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_ExpandLess.default, { fontSize: "small" })
|
|
3372
|
+
}
|
|
3373
|
+
)
|
|
3374
|
+
]
|
|
3375
|
+
}
|
|
3376
|
+
),
|
|
3377
|
+
showProblems && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_material31.Box, { sx: { overflow: "auto" }, children: validationErrors.map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
|
|
3378
|
+
import_material31.Box,
|
|
3379
|
+
{
|
|
3380
|
+
onClick: () => gotoMarker(error),
|
|
3381
|
+
sx: {
|
|
3382
|
+
display: "flex",
|
|
3383
|
+
alignItems: "center",
|
|
3384
|
+
px: 1.5,
|
|
3385
|
+
py: 0.75,
|
|
3386
|
+
gap: 1,
|
|
3387
|
+
cursor: "pointer",
|
|
3388
|
+
"&:hover": { bgcolor: "action.hover" },
|
|
3389
|
+
borderBottom: "1px dashed",
|
|
3390
|
+
borderColor: "divider",
|
|
3391
|
+
fontSize: "0.85rem"
|
|
3392
|
+
},
|
|
3393
|
+
children: [
|
|
3394
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_ErrorOutline.default, { color: "error", sx: { fontSize: 18 } }),
|
|
3395
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_material31.Box, { sx: { color: "text.secondary", width: 64 }, children: [
|
|
3396
|
+
"Line ",
|
|
3397
|
+
error.startLineNumber
|
|
3398
|
+
] }),
|
|
3399
|
+
/* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_material31.Box, { sx: { color: "text.primary", flex: 1, minWidth: 0 }, children: error.message })
|
|
3400
|
+
]
|
|
3401
|
+
},
|
|
3402
|
+
`${error.startLineNumber}-${error.startColumn}-${index}`
|
|
3403
|
+
)) })
|
|
3328
3404
|
]
|
|
3329
3405
|
}
|
|
3330
3406
|
)
|