@pingux/astro 2.130.0-alpha.1 → 2.130.0

package/lib/cjs/components/CodeEditor/CodeEditor.chromatic.stories.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { StoryFn } from '@storybook/react';
+import { CodeEditorProps } from '../../types';
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<CodeEditorProps & React.RefAttributes<HTMLDivElement>>;
+};
+export default _default;
+export declare const TypescriptEditor: StoryFn<CodeEditorProps>;
+export declare const JavascriptEditor: StoryFn<CodeEditorProps>;
+export declare const JsonEditor: StoryFn<CodeEditorProps>;
+export declare const ReadOnly: StoryFn<CodeEditorProps>;

package/lib/cjs/components/CodeEditor/CodeEditor.chromatic.stories.js

@@ -0,0 +1,125 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.TypescriptEditor = exports.ReadOnly = exports.JsonEditor = exports.JavascriptEditor = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _index = require("../../index");
+var _react2 = require("@emotion/react");
+var _default = {
+  title: 'Chromatic Only CodeEditor',
+  component: _index.CodeEditor
+};
+exports["default"] = _default;
+var jsonCode = "{\n  \"name\": \"Luke Skywalker\", \n  \"height\": \"172\", \n  \"mass\": \"77\", \n  \"hair_color\": \"blond\", \n  \"skin_color\": \"fair\", \n  \"eye_color\": \"blue\", \n  \"birth_year\": \"19BBY\", \n  \"gender\": \"male\", \n  \"homeworld\": \"https://swapi.dev/api/planets/1/\", \n  \"films\": [\n      \"https://swapi.dev/api/films/1/\", \n      \"https://swapi.dev/api/films/2/\", \n      \"https://swapi.dev/api/films/3/\", \n      \"https://swapi.dev/api/films/6/\"\n  ],\n  \"starships\": [\n      \"https://swapi.dev/api/starships/12/\", \n      \"https://swapi.dev/api/starships/22/\"\n  ]\n}";
+var tsCode = "const stringValue: string = 15;\n\nfunction addOne(integer: number) {\n  return integer + 1;\n}\n\naddOne('I am a string');\n";
+var jsCode = "\nfunction factorial(n) {\n  if (n === 0 || n === 1) {\n    return 1;\n  } else {\n    return n * factorial(n - 1);\n  }\n}\n\nconsole.log(factorial(5));\n\n(a) => {};\n";
+var TypescriptEditor = function TypescriptEditor(args) {
+  return (0, _react2.jsx)(_index.CodeEditor, (0, _extends2["default"])({}, args, {
+    defaultValue: tsCode,
+    language: "typescript",
+    height: "200px",
+    editorOptionsProps: {
+      minimap: {
+        enabled: false
+      },
+      scrollbar: {
+        vertical: 'hidden',
+        horizontal: 'hidden'
+      },
+      renderValidationDecorations: 'off',
+      renderLineHighlight: 'none',
+      cursorStyle: 'block',
+      overviewRulerLanes: 0,
+      hideCursorInOverviewRuler: true,
+      selectionHighlight: false
+    },
+    onMount: function onMount(editor) {
+      editor.layout(); // Force layout stabilization
+    }
+  }));
+};
+exports.TypescriptEditor = TypescriptEditor;
+var JavascriptEditor = function JavascriptEditor(args) {
+  return (0, _react2.jsx)(_index.CodeEditor, (0, _extends2["default"])({}, args, {
+    defaultValue: jsCode,
+    language: "javascript",
+    height: "200px",
+    editorOptionsProps: {
+      minimap: {
+        enabled: false
+      },
+      scrollbar: {
+        vertical: 'hidden',
+        horizontal: 'hidden'
+      },
+      renderValidationDecorations: 'off',
+      renderLineHighlight: 'none',
+      cursorStyle: 'block',
+      overviewRulerLanes: 0,
+      hideCursorInOverviewRuler: true,
+      selectionHighlight: false
+    },
+    onMount: function onMount(editor) {
+      editor.layout();
+    }
+  }));
+};
+exports.JavascriptEditor = JavascriptEditor;
+var JsonEditor = function JsonEditor(args) {
+  return (0, _react2.jsx)(_index.CodeEditor, (0, _extends2["default"])({}, args, {
+    defaultValue: jsonCode,
+    language: "json",
+    height: "200px",
+    editorOptionsProps: {
+      minimap: {
+        enabled: false
+      },
+      scrollbar: {
+        vertical: 'hidden',
+        horizontal: 'hidden'
+      },
+      renderValidationDecorations: 'off',
+      renderLineHighlight: 'none',
+      cursorStyle: 'block',
+      overviewRulerLanes: 0,
+      hideCursorInOverviewRuler: true,
+      selectionHighlight: false
+    },
+    onMount: function onMount(editor) {
+      editor.layout();
+    }
+  }));
+};
+exports.JsonEditor = JsonEditor;
+var ReadOnly = function ReadOnly() {
+  return (0, _react2.jsx)(_index.CodeEditor, {
+    defaultValue: jsonCode,
+    language: "json",
+    height: "200px",
+    isReadOnly: true,
+    editorOptionsProps: {
+      minimap: {
+        enabled: false
+      },
+      scrollbar: {
+        vertical: 'hidden',
+        horizontal: 'hidden'
+      },
+      renderValidationDecorations: 'off',
+      renderLineHighlight: 'none',
+      cursorStyle: 'block',
+      overviewRulerLanes: 0,
+      hideCursorInOverviewRuler: true,
+      selectionHighlight: false
+    },
+    onMount: function onMount(editor) {
+      editor.layout();
+    }
+  });
+};
+exports.ReadOnly = ReadOnly;

package/lib/cjs/components/CodeEditor/CodeEditor.js

@@ -1,15 +1,22 @@
 "use strict";
 
 var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
 var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
@@ -18,9 +25,11 @@ var _hooks = require("../../hooks");
 var _index = require("../../index");
 var _languageMapping = _interopRequireDefault(require("../../utils/devUtils/constants/languageMapping"));
 var _react3 = require("@emotion/react");
-var _excluded = ["defaultValue", "language", "onChange", "onValidate", "height", "className", "isReadOnly", "iconButtonProps"];
+var _excluded = ["defaultValue", "language", "onChange", "onValidate", "height", "className", "isReadOnly", "iconButtonProps", "editorOptionsProps", "onMount"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var CodeEditor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var defaultValue = props.defaultValue,
     language = props.language,
@@ -30,6 +39,8 @@ var CodeEditor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     className = props.className,
     isReadOnly = props.isReadOnly,
     iconButtonProps = props.iconButtonProps,
+    editorOptionsProps = props.editorOptionsProps,
+    onMount = props.onMount,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
       isReadOnly: isReadOnly
@@ -82,7 +93,7 @@ var CodeEditor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     theme: "vs-light",
     onChange: handleChange,
     onValidate: onValidate,
-    options: {
+    options: _objectSpread({
       fontSize: 14,
       automaticLayout: true,
       minimap: {
@@ -97,7 +108,8 @@ var CodeEditor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         top: 13,
         bottom: 13
       }
-    }
+    }, editorOptionsProps),
+    onMount: onMount
   }))));
 });
 var _default = CodeEditor;

package/lib/cjs/components/CodeEditor/CodeEditor.stories.d.ts

@@ -16,6 +16,9 @@ declare const _default: {
                 }[];
             };
         };
+        chromatic: {
+            disable: boolean;
+        };
     };
 };
 export default _default;

package/lib/cjs/components/CodeEditor/CodeEditor.stories.js

@@ -31,6 +31,9 @@ var _default = {
           enabled: false
         }]
       }
+    },
+    chromatic: {
+      disable: true
     }
   }
 };

package/lib/cjs/types/codeEditor.d.ts

@@ -10,6 +10,8 @@ export interface CodeEditorProps extends Omit<DOMAttributes<FocusableElement>, '
     onValidate?: (markers: editor.IMarker[]) => void;
     isReadOnly?: boolean;
     iconButtonProps?: Omit<IconButtonProps, 'onPress'>;
+    editorOptionsProps?: monaco.editor.IStandaloneEditorConstructionOptions;
+    onMount?: (codeEditor: monaco.editor.IStandaloneCodeEditor) => void;
 }
 export interface CustomEditorOptions extends monaco.editor.IStandaloneEditorConstructionOptions {
     stickyScroll?: {

package/lib/components/CodeEditor/CodeEditor.chromatic.stories.js

@@ -0,0 +1,113 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import { CodeEditor } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Chromatic Only CodeEditor',
+  component: CodeEditor
+};
+var jsonCode = "{\n  \"name\": \"Luke Skywalker\", \n  \"height\": \"172\", \n  \"mass\": \"77\", \n  \"hair_color\": \"blond\", \n  \"skin_color\": \"fair\", \n  \"eye_color\": \"blue\", \n  \"birth_year\": \"19BBY\", \n  \"gender\": \"male\", \n  \"homeworld\": \"https://swapi.dev/api/planets/1/\", \n  \"films\": [\n      \"https://swapi.dev/api/films/1/\", \n      \"https://swapi.dev/api/films/2/\", \n      \"https://swapi.dev/api/films/3/\", \n      \"https://swapi.dev/api/films/6/\"\n  ],\n  \"starships\": [\n      \"https://swapi.dev/api/starships/12/\", \n      \"https://swapi.dev/api/starships/22/\"\n  ]\n}";
+var tsCode = "const stringValue: string = 15;\n\nfunction addOne(integer: number) {\n  return integer + 1;\n}\n\naddOne('I am a string');\n";
+var jsCode = "\nfunction factorial(n) {\n  if (n === 0 || n === 1) {\n    return 1;\n  } else {\n    return n * factorial(n - 1);\n  }\n}\n\nconsole.log(factorial(5));\n\n(a) => {};\n";
+export var TypescriptEditor = function TypescriptEditor(args) {
+  return ___EmotionJSX(CodeEditor, _extends({}, args, {
+    defaultValue: tsCode,
+    language: "typescript",
+    height: "200px",
+    editorOptionsProps: {
+      minimap: {
+        enabled: false
+      },
+      scrollbar: {
+        vertical: 'hidden',
+        horizontal: 'hidden'
+      },
+      renderValidationDecorations: 'off',
+      renderLineHighlight: 'none',
+      cursorStyle: 'block',
+      overviewRulerLanes: 0,
+      hideCursorInOverviewRuler: true,
+      selectionHighlight: false
+    },
+    onMount: function onMount(editor) {
+      editor.layout(); // Force layout stabilization
+    }
+  }));
+};
+
+export var JavascriptEditor = function JavascriptEditor(args) {
+  return ___EmotionJSX(CodeEditor, _extends({}, args, {
+    defaultValue: jsCode,
+    language: "javascript",
+    height: "200px",
+    editorOptionsProps: {
+      minimap: {
+        enabled: false
+      },
+      scrollbar: {
+        vertical: 'hidden',
+        horizontal: 'hidden'
+      },
+      renderValidationDecorations: 'off',
+      renderLineHighlight: 'none',
+      cursorStyle: 'block',
+      overviewRulerLanes: 0,
+      hideCursorInOverviewRuler: true,
+      selectionHighlight: false
+    },
+    onMount: function onMount(editor) {
+      editor.layout();
+    }
+  }));
+};
+export var JsonEditor = function JsonEditor(args) {
+  return ___EmotionJSX(CodeEditor, _extends({}, args, {
+    defaultValue: jsonCode,
+    language: "json",
+    height: "200px",
+    editorOptionsProps: {
+      minimap: {
+        enabled: false
+      },
+      scrollbar: {
+        vertical: 'hidden',
+        horizontal: 'hidden'
+      },
+      renderValidationDecorations: 'off',
+      renderLineHighlight: 'none',
+      cursorStyle: 'block',
+      overviewRulerLanes: 0,
+      hideCursorInOverviewRuler: true,
+      selectionHighlight: false
+    },
+    onMount: function onMount(editor) {
+      editor.layout();
+    }
+  }));
+};
+export var ReadOnly = function ReadOnly() {
+  return ___EmotionJSX(CodeEditor, {
+    defaultValue: jsonCode,
+    language: "json",
+    height: "200px",
+    isReadOnly: true,
+    editorOptionsProps: {
+      minimap: {
+        enabled: false
+      },
+      scrollbar: {
+        vertical: 'hidden',
+        horizontal: 'hidden'
+      },
+      renderValidationDecorations: 'off',
+      renderLineHighlight: 'none',
+      cursorStyle: 'block',
+      overviewRulerLanes: 0,
+      hideCursorInOverviewRuler: true,
+      selectionHighlight: false
+    },
+    onMount: function onMount(editor) {
+      editor.layout();
+    }
+  });
+};

package/lib/components/CodeEditor/CodeEditor.js

@@ -1,7 +1,18 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["defaultValue", "language", "onChange", "onValidate", "height", "className", "isReadOnly", "iconButtonProps"];
+var _excluded = ["defaultValue", "language", "onChange", "onValidate", "height", "className", "isReadOnly", "iconButtonProps", "editorOptionsProps", "onMount"];
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { forwardRef, useRef, useState } from 'react';
 import Editor from '@monaco-editor/react';
 import { useStatusClasses } from '../../hooks';
@@ -17,6 +28,8 @@ var CodeEditor = /*#__PURE__*/forwardRef(function (props, ref) {
     className = props.className,
     isReadOnly = props.isReadOnly,
     iconButtonProps = props.iconButtonProps,
+    editorOptionsProps = props.editorOptionsProps,
+    onMount = props.onMount,
     others = _objectWithoutProperties(props, _excluded);
   var _useStatusClasses = useStatusClasses(className, {
       isReadOnly: isReadOnly
@@ -69,7 +82,7 @@ var CodeEditor = /*#__PURE__*/forwardRef(function (props, ref) {
     theme: "vs-light",
     onChange: handleChange,
     onValidate: onValidate,
-    options: {
+    options: _objectSpread({
       fontSize: 14,
       automaticLayout: true,
       minimap: {
@@ -84,7 +97,8 @@ var CodeEditor = /*#__PURE__*/forwardRef(function (props, ref) {
         top: 13,
         bottom: 13
       }
-    }
+    }, editorOptionsProps),
+    onMount: onMount
   }))));
 });
 export default CodeEditor;

package/lib/components/CodeEditor/CodeEditor.stories.js

@@ -23,6 +23,9 @@ export default {
           enabled: false
         }]
       }
+    },
+    chromatic: {
+      disable: true
     }
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.130.0-alpha.1",
+  "version": "2.130.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",