@pingux/astro 2.121.1-alpha.2 → 2.122.0-alpha.0

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CodeEditorProps } from '../../types';
+declare const CodeEditor: React.ForwardRefExoticComponent<CodeEditorProps & React.RefAttributes<HTMLElement>>;
+export default CodeEditor;

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

@@ -0,0 +1,55 @@
+"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$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = _interopRequireDefault(require("@monaco-editor/react"));
+var _index = require("../../index");
+var _react3 = require("@emotion/react");
+var _excluded = ["value", "language", "onChange", "onValidate", "height"];
+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; }
+var CodeEditor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var value = props.value,
+    language = props.language,
+    onChange = props.onChange,
+    onValidate = props.onValidate,
+    height = props.height,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var editorRef = (0, _react.useRef)(null);
+  return (0, _react3.jsx)(_index.Box, (0, _extends2["default"])({}, others, {
+    ref: ref
+  }), (0, _react3.jsx)(_index.Box, {
+    variant: "codeEditor.wrapper",
+    ref: editorRef,
+    height: height
+  }, (0, _react3.jsx)(_react2["default"], {
+    height: "100%",
+    language: language,
+    value: value,
+    theme: "vs-light",
+    onChange: onChange,
+    onValidate: onValidate,
+    options: {
+      fontSize: 14,
+      automaticLayout: true,
+      minimap: {
+        enabled: true
+      },
+      stickyScroll: {
+        enabled: false
+      }
+    }
+  })));
+});
+var _default = CodeEditor;
+exports["default"] = _default;

package/lib/cjs/components/CodeEditor/CodeEditor.mdx

@@ -0,0 +1,35 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Components/CodeEditor/CodeEditor" />
+
+# CodeEditor
+
+The Code Editor component is a tool for editing and displaying code snippets in an application. 
+It provides syntax highlighting, shows line numbers, and validates errors in the code.
+In addition, it supports standard IDE keyboard interactions like tab-to-indent.
+
+The CodeEditor component should be used for complex use cases that require an interactive environment, support for various programming languages, functionalities like linting, keyboard interactions, and real-time updates. 
+When code snippets need to be presented in a read-only format, use [CodeView](./?path=/docs/components-codeview--docs).
+
+Languages
+supported languages are categorized into two groups: those with rich IntelliSense and validation capabilities, and those that provide only basic syntax highlighting. Check the list at [monaco-editor](https://github.com/suren-atoyan/monaco-react#:~:text=It%27s%20important%20to%20mention%20that%20according%20to%20monaco%2Deditor%2C%20the%20whole%20supported%20languages%20are%20divided%20into%20two%20groups%3A)
+
+### Required Components
+
+This component can be used independently and does not require additional components. 
+
+### Accessibility
+
+#### Keyboard Navigation
+
+These keys provide additional functionality to the component. 
+
+| Keys | Functions |
+| ---- | --------- |
+| Enter | Inserts a new line of code |
+| Arrow keys | Move the cursor within the code in the set direction |
+
+#### Screen Readers
+
+The **`aria-live`** attribute is used to announce content changes in a live region.
+

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { StoryFn } from '@storybook/react';
+import { CodeEditorProps } from '../../types';
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<CodeEditorProps & React.RefAttributes<HTMLElement>>;
+    parameters: {
+        docs: {
+            page: () => React.JSX.Element;
+            source: {
+                type: string;
+            };
+        };
+        a11y: {
+            config: {
+                rules: {
+                    id: string;
+                    enabled: boolean;
+                }[];
+            };
+        };
+    };
+};
+export default _default;
+export declare const TypescriptEditor: StoryFn<CodeEditorProps>;
+export declare const JavascriptEditor: StoryFn<CodeEditorProps>;
+export declare const JsonEditor: StoryFn<CodeEditorProps>;

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

@@ -0,0 +1,66 @@
+"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.JsonEditor = exports.JavascriptEditor = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
+var _index = require("../../index");
+var _CodeEditor = _interopRequireDefault(require("./CodeEditor.mdx"));
+var _react2 = require("@emotion/react");
+var _default = {
+  title: 'Experimental/CodeEditor',
+  component: _index.CodeEditor,
+  parameters: {
+    docs: {
+      page: function page() {
+        return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_CodeEditor["default"], null), (0, _react2.jsx)(_storybookDocsLayout["default"], null));
+      },
+      source: {
+        type: 'code'
+      }
+    },
+    a11y: {
+      config: {
+        rules: [{
+          id: 'color-contrast',
+          enabled: false
+        }, {
+          id: 'aria-roledescription',
+          enabled: false
+        }]
+      }
+    }
+  }
+};
+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() {
+  return (0, _react2.jsx)(_index.CodeEditor, {
+    value: tsCode,
+    language: "typescript",
+    height: "200px"
+  });
+};
+exports.TypescriptEditor = TypescriptEditor;
+var JavascriptEditor = function JavascriptEditor() {
+  return (0, _react2.jsx)(_index.CodeEditor, {
+    value: jsCode,
+    language: "javascript",
+    height: "200px"
+  });
+};
+exports.JavascriptEditor = JavascriptEditor;
+var JsonEditor = function JsonEditor() {
+  return (0, _react2.jsx)(_index.CodeEditor, {
+    value: jsonCode,
+    language: "json",
+    height: "200px"
+  });
+};
+exports.JsonEditor = JsonEditor;

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

@@ -0,0 +1,10 @@
+declare const _default: {
+    wrapper: {
+        borderColor: string;
+        borderRadius: string;
+        borderStyle: string;
+        borderWidth: string;
+        width: string;
+    };
+};
+export default _default;

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

@@ -0,0 +1,30 @@
+"use strict";
+
+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 _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _Input = require("../Input/Input.styles");
+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 wrapper = _objectSpread(_objectSpread({}, _Input.input.fieldControlWrapper), {}, {
+  borderColor: 'neutral.80',
+  borderRadius: '3px 4px 4px 3px',
+  borderStyle: 'solid',
+  borderWidth: '1px 1px 1px 0px',
+  width: '100%'
+});
+var _default = {
+  wrapper: wrapper
+};
+exports["default"] = _default;

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _stringify = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/json/stringify"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _index = require("../../index");
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
+var _react2 = require("@emotion/react");
+var testId = 'test-code-sample';
+var defaultProps = {
+  'data-testid': testId
+};
+var jsCode = "\n  function helloWorld() {\n    console.log(\"Hello, World!\");\n  }\n";
+
+// Needs to be added to each components test file
+(0, _universalComponentTest.universalComponentTests)({
+  rules: {
+    'color-contrast': {
+      enabled: false
+    }
+  },
+  renderComponent: function renderComponent(props) {
+    return (0, _react2.jsx)(_index.CodeEditor, (0, _extends2["default"])({}, defaultProps, props, {
+      value: jsCode,
+      language: "javascript"
+    }));
+  }
+});
+jest.mock('@monaco-editor/react', function () {
+  return {
+    __esModule: true,
+    "default": function _default(_ref) {
+      var _context;
+      var language = _ref.language,
+        value = _ref.value,
+        _onChange = _ref.onChange;
+      return (0, _react2.jsx)("textarea", {
+        "data-testid": "mock-monaco-editor",
+        onChange: function onChange(e) {
+          return _onChange(e.target.value);
+        },
+        value: (0, _concat["default"])(_context = "Editor Language: ".concat(language, ", Code:")).call(_context, value),
+        "aria-label": "Code editor"
+      });
+    }
+  };
+});
+describe('CodeEditor', function () {
+  it('renders with initial value', function () {
+    var value = 'console.log("Hello, World!");';
+    (0, _testWrapper.render)((0, _react2.jsx)(_index.CodeEditor, {
+      language: "javascript",
+      value: value
+    }));
+    expect(_testWrapper.screen.getByTestId('mock-monaco-editor')).toBeInTheDocument();
+    expect(_testWrapper.screen.getByText('Editor Language: javascript, Code:console.log("Hello, World!");')).toBeInTheDocument();
+  });
+  it('calls onChange when code changes', function () {
+    var value = 'console.log("Hello, World!");';
+    var mockOnChange = jest.fn();
+    (0, _testWrapper.render)((0, _react2.jsx)(_index.CodeEditor, {
+      language: "javascript",
+      value: value,
+      onChange: mockOnChange
+    }));
+    var editor = _testWrapper.screen.getByTestId('mock-monaco-editor');
+    var newValue = (0, _stringify["default"])([{
+      key: false
+    }]);
+    (0, _testWrapper.act)(function () {
+      _testWrapper.fireEvent.change(editor, {
+        target: {
+          value: newValue
+        }
+      });
+    });
+    expect(mockOnChange).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1 @@
+export { default } from './CodeEditor';

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

@@ -0,0 +1,14 @@
+"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
+});
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _CodeEditor["default"];
+  }
+});
+var _CodeEditor = _interopRequireDefault(require("./CodeEditor"));

package/lib/cjs/components/CodeView/CodeView.mdx

@@ -5,7 +5,10 @@ import { Meta } from '@storybook/addon-docs';
 # CodeView
 
 This component is used for code syntax highlighting and is built on [prism-react-renderer](https://github.com/FormidableLabs/prism-react-renderer).
-It should contain the language title and be formatted with indentations, line breaks, and comments, and should not contain complex code snippets.
+It should contain the language title and be formatted with indentations, line breaks, and comments, and should not contain complex code snippets. 
+
+The CodeView component should be used for code snippets that need to be presented in a read-only format. 
+For more complex use cases that require an interactive environment, support for various programming languages, functionalities like linting, keyboard interactions, and real-time updates, use [CodeEditor](./?path=/docs/experimental-codeeditor--docs).
 
 ### Required Components
 

package/lib/cjs/components/MultivaluesField/CondensedMultivaluesField.js

@@ -37,6 +37,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ = require("../..");
 var _MultivaluesContext = require("../../context/MultivaluesContext");
 var _hooks = require("../../hooks");
+var _loadingStates = _interopRequireDefault(require("../../utils/devUtils/constants/loadingStates"));
 var _pendoID = require("../../utils/devUtils/constants/pendoID");
 var _isIterable = require("../../utils/devUtils/props/isIterable");
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
@@ -44,7 +45,7 @@ var _fieldAttributes = require("../../utils/docUtils/fieldAttributes");
 var _statusProp = require("../../utils/docUtils/statusProp");
 var _ListBox = _interopRequireDefault(require("../ListBox"));
 var _react2 = require("@emotion/react");
-var _excluded = ["defaultSelectedKeys", "direction", "disabledKeys", "containerProps", "hasAutoFocus", "hasNoSelectAll", "hasNoStatusIndicator", "helperText", "inputProps", "isDisabled", "isNotFlippable", "isReadOnly", "isRequired", "items", "label", "mode", "onBlur", "onFocus", "onInputChange", "onKeyDown", "onKeyUp", "onOpenChange", "onSelectionChange", "placeholder", "selectedKeys", "selectedOptionText", "scrollBoxProps", "status"];
+var _excluded = ["defaultSelectedKeys", "direction", "disabledKeys", "containerProps", "hasAutoFocus", "hasNoSelectAll", "hasNoStatusIndicator", "helperText", "inputProps", "isDisabled", "isNotFlippable", "isReadOnly", "isRequired", "items", "label", "loadingState", "mode", "onBlur", "onFocus", "onInputChange", "onKeyDown", "onKeyUp", "onLoadMore", "onLoadPrev", "onOpenChange", "onSelectionChange", "placeholder", "selectedKeys", "selectedOptionText", "scrollBoxProps", "status"];
 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 = _filterInstanceProperty2(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -67,12 +68,15 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
     isRequired = props.isRequired,
     items = props.items,
     label = props.label,
+    loadingState = props.loadingState,
     mode = props.mode,
     _onBlur = props.onBlur,
     _onFocus = props.onFocus,
     onInputChange = props.onInputChange,
     onKeyDown = props.onKeyDown,
     _onKeyUp = props.onKeyUp,
+    onLoadMore = props.onLoadMore,
+    onLoadPrev = props.onLoadPrev,
     onOpenChange = props.onOpenChange,
     onSelectionChange = props.onSelectionChange,
     placeholder = props.placeholder,
@@ -292,6 +296,10 @@ var CondensedMultivaluesField = /*#__PURE__*/(0, _react.forwardRef)(function (pr
     hasAutoFocus: hasAutoFocus,
     hasNoEmptySelection: true,
     state: state,
+    onLoadMore: onLoadMore,
+    onLoadPrev: onLoadPrev,
+    loadingState: loadingState,
+    isLoading: loadingState === _loadingStates["default"].LOADING_MORE,
     "aria-label": "List of options",
     isCondensed: mode === 'condensed'
   }, overlayProps))), (0, _react2.jsx)(_reactAria.DismissButton, {