ssovee-os-web-ui 0.1.67 → 0.1.71

package/README.md

@@ -55,6 +55,31 @@ export function Example() {
 }
 ```
 
+## JSON editor
+
+`JsonEditor` is a controlled Monaco editor configured for JSON by default:
+
+```tsx
+import { useState } from "react";
+import { JsonEditor } from "ssovee-os-web-ui";
+
+export function SettingsEditor() {
+  const [value, setValue] = useState('{"enabled":true}');
+
+  return (
+    <JsonEditor
+      value={value}
+      onChange={setValue}
+      theme="light"
+      height="320px"
+      options={{ minimap: { enabled: false } }}
+    />
+  );
+}
+```
+
+Use `theme="vs-dark"` for a dark editor. The component also accepts Monaco `language`, `height`, and `options` props.
+
 ## Window components
 
 ### Simple window
@@ -179,6 +204,7 @@ The package exports these components and types for external use:
 - `Button`
 - `Input`
 - `TextArea`
+- `JsonEditor`
 - `Select`
 - `SelectOption`
 - `Checkbox`

package/dist/index.cjs

@@ -3,8 +3,11 @@
 var React22 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('@phosphor-icons/react');
+var Editor = require('@monaco-editor/react');
 var uaParserJs = require('ua-parser-js');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
   var n = Object.create(null);
@@ -24,6 +27,7 @@ function _interopNamespace(e) {
 }
 
 var React22__namespace = /*#__PURE__*/_interopNamespace(React22);
+var Editor__default = /*#__PURE__*/_interopDefault(Editor);
 
 // src/components/Button.tsx
 
@@ -302,6 +306,28 @@ var TextArea = React22__namespace.default.forwardRef(
 );
 TextArea.displayName = "TextArea";
 var TextArea_default = TextArea;
+var JsonEditor = ({
+  value,
+  onChange,
+  language = "json",
+  theme = "light",
+  height = "100%",
+  options,
+  className
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style: { height }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    Editor__default.default,
+    {
+      height: "100%",
+      language,
+      theme,
+      value,
+      onChange: (nextValue) => onChange(nextValue ?? ""),
+      options
+    }
+  ) });
+};
+var JsonEditor_default = JsonEditor;
 var Select = React22__namespace.default.forwardRef(
   ({
     className,
@@ -3430,6 +3456,7 @@ exports.Dropdown = Dropdown_default;
 exports.FileUpload = FileUpload_default;
 exports.ImageWithPlaceholder = ImageWithPlaceholder_default;
 exports.Input = Input_default;
+exports.JsonEditor = JsonEditor_default;
 exports.Loading = Loading_default;
 exports.Modal = Modal_default;
 exports.Pagination = Pagination_default;