@pingux/astro 2.82.0-alpha.0 → 2.82.0-alpha.2

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,56 @@
+"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 _react = _interopRequireWildcard(require("react"));
+var _langJavascript = require("@codemirror/lang-javascript");
+var _langJson = require("@codemirror/lang-json");
+var eslint = _interopRequireWildcard(require("eslint-linter-browserify"));
+var _useTsLinter = _interopRequireDefault(require("../../hooks/useTsLinter/useTsLinter"));
+var _DefaultEditor = _interopRequireDefault(require("./DefaultEditor"));
+var _eslintConfig = _interopRequireDefault(require("./eslintConfig"));
+var _react2 = require("@emotion/react");
+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 supportedLanguage = props.supportedLanguage,
+    customEslintConfig = props.customEslintConfig;
+  var tsLinter = (0, _useTsLinter["default"])();
+  switch (supportedLanguage) {
+    case 'typescript':
+      return (0, _react2.jsx)(_DefaultEditor["default"], (0, _extends2["default"])({
+        ref: ref
+      }, props, {
+        editorLanguage: _langJavascript.tsxLanguage,
+        linterExtension: tsLinter
+      }));
+    case 'javascript':
+      return (0, _react2.jsx)(_DefaultEditor["default"], (0, _extends2["default"])({
+        ref: ref
+      }, props, {
+        editorLanguage: (0, _langJavascript.javascript)(),
+        linterExtension: (0, _langJavascript.esLint)(new eslint.Linter(), customEslintConfig || _eslintConfig["default"])
+      }));
+    case 'json':
+      return (0, _react2.jsx)(_DefaultEditor["default"], (0, _extends2["default"])({
+        ref: ref
+      }, props, {
+        editorLanguage: _langJson.jsonLanguage,
+        linterExtension: (0, _langJson.jsonParseLinter)()
+      }));
+    default:
+      return (0, _react2.jsx)(_DefaultEditor["default"], (0, _extends2["default"])({
+        ref: ref
+      }, props));
+  }
+});
+var _default = CodeEditor;
+exports["default"] = _default;

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

@@ -0,0 +1,33 @@
+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).
+
+
+### 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,29 @@
+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 JavascriptEditorCustomEslint: StoryFn<CodeEditorProps>;
+export declare const JsonEditor: StoryFn<CodeEditorProps>;
+export declare const CustomRules: StoryFn<CodeEditorProps>;

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

@@ -0,0 +1,108 @@
+"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.JavascriptEditorCustomEslint = exports.JavascriptEditor = exports.CustomRules = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _langJavascript = require("@codemirror/lang-javascript");
+var _language = require("@codemirror/language");
+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
+        }]
+      }
+    }
+  }
+};
+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 = "\nconst 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 regexCode = "\nfunction isNumber(string) {\n  return /^\\d+(\\.\\d*)?$/.test(string)\n}\n";
+var TypescriptEditor = function TypescriptEditor() {
+  return (0, _react2.jsx)(_index.CodeEditor, {
+    initialCode: tsCode,
+    supportedLanguage: "typescript"
+  });
+};
+exports.TypescriptEditor = TypescriptEditor;
+var JavascriptEditor = function JavascriptEditor(args) {
+  return (0, _react2.jsx)(_index.CodeEditor, (0, _extends2["default"])({}, args, {
+    initialCode: jsCode,
+    supportedLanguage: "javascript"
+  }));
+};
+exports.JavascriptEditor = JavascriptEditor;
+var JavascriptEditorCustomEslint = function JavascriptEditorCustomEslint(args) {
+  var eslintConfig = {
+    languageOptions: {
+      parserOptions: {
+        ecmaVersion: 2022,
+        ecmaFeatures: {
+          'jsx': true
+        },
+        sourceType: 'module'
+      }
+    },
+    rules: {
+      semi: ['error', 'never']
+    }
+  };
+  return (0, _react2.jsx)(_index.CodeEditor, (0, _extends2["default"])({}, args, {
+    initialCode: jsCode,
+    supportedLanguage: "javascript",
+    customEslintConfig: eslintConfig
+  }));
+};
+exports.JavascriptEditorCustomEslint = JavascriptEditorCustomEslint;
+var JsonEditor = function JsonEditor() {
+  return (0, _react2.jsx)(_index.CodeEditor, {
+    initialCode: jsonCode,
+    supportedLanguage: "json"
+  });
+};
+exports.JsonEditor = JsonEditor;
+var CustomRules = function CustomRules() {
+  var regexpLinter = function regexpLinter(view) {
+    var diagnostics = [];
+    (0, _language.syntaxTree)(view.state).cursor().iterate(function (node) {
+      if (node.name === 'RegExp') {
+        diagnostics.push({
+          from: node.from,
+          to: node.to,
+          severity: 'warning',
+          message: 'Regular expressions are FORBIDDEN'
+        });
+      }
+    });
+    return diagnostics;
+  };
+  return (0, _react2.jsx)(_index.CodeEditor, {
+    initialCode: regexCode,
+    editorLanguage: (0, _langJavascript.javascript)(),
+    customRules: regexpLinter
+  });
+};
+exports.CustomRules = CustomRules;

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 @@
+import '@testing-library/jest-dom';

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

@@ -0,0 +1,149 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/map"));
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _langJavascript = require("@codemirror/lang-javascript");
+var _react2 = require("@testing-library/react");
+var _vfs = require("@typescript/vfs");
+var _codeEditorTypescript = _interopRequireDefault(require("code-editor-typescript"));
+require("@testing-library/jest-dom");
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+var _universalComponentTest = require("../../utils/testUtils/universalComponentTest");
+var _CodeEditor = _interopRequireDefault(require("./CodeEditor"));
+var _react3 = require("@emotion/react");
+var testId = 'test-code-sample';
+var defaultProps = {
+  'data-testid': testId
+};
+var jsCode = "const 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;";
+var tsCode = "\nconst stringValue: string = 15;\nfunction addOne(integer: number) {\n  return integer + 1;\n}\n\naddOne('I am a string');\n";
+var jsonCode = "{\n  \"name\": \"Luke Skywalker\", \n  \"gender\": \"male\", \n  \"homeworld\": \"https://swapi.dev/api/planets/1/\", \n  \"films\": [\n      \"https://swapi.dev/api/films/1/\",\n  ],\n  \"starships\": [\n      \"https://swapi.dev/api/starships/12/\", \n  ]\n}";
+var editor;
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _testWrapper.render)((0, _react3.jsx)(_CodeEditor["default"], (0, _extends2["default"])({}, defaultProps, props, {
+    onEditorViewInit: function onEditorViewInit(editorView) {
+      editor = editorView;
+    }
+  })));
+};
+
+// Needs to be added to each components test file
+(0, _universalComponentTest.universalComponentTests)({
+  renderComponent: function renderComponent(props) {
+    return (0, _react3.jsx)(_CodeEditor["default"], (0, _extends2["default"])({}, defaultProps, props, {
+      initialCode: jsCode,
+      supportedLanguage: "javascript"
+    }));
+  }
+});
+test('renders with initial code', function () {
+  getComponent({
+    initialCode: jsCode,
+    supportedLanguage: 'javascript'
+  });
+  var editorComponent = _testWrapper.screen.getByRole('textbox');
+  expect(editorComponent).toBeInstanceOf(HTMLDivElement);
+  expect(editorComponent).toBeInTheDocument();
+  expect(editorComponent).toHaveAttribute('data-language', 'javascript');
+  expect(_testWrapper.screen.queryByText('function')).toBeInTheDocument();
+});
+test('renders with startState', function () {
+  var mockOnChange = jest.fn();
+  getComponent({
+    onUpdate: mockOnChange,
+    initialCode: 'testString',
+    supportedLanguage: 'javascript'
+  });
+  editor.domAtPos(1).node.nodeValue = 'testString2';
+  var transaction = editor.state.update({
+    changes: {
+      from: 0,
+      to: 10,
+      insert: 'testString2'
+    },
+    selection: editor.state.selection
+  });
+  (0, _react2.act)(function () {
+    editor.dispatch([transaction]);
+  });
+  expect(editor.state.doc.toString()).toBe('testString2');
+  expect(_testWrapper.screen.queryByText('testString')).not.toBeInTheDocument();
+  expect(_testWrapper.screen.queryByText('testString2')).toBeInTheDocument();
+  expect(mockOnChange).toHaveBeenCalledWith('testString2');
+});
+test('renders with typescript', function () {
+  getComponent({
+    initialCode: tsCode,
+    supportedLanguage: 'typescript'
+  });
+  var editorComponent = _testWrapper.screen.getByRole('textbox');
+  expect(editorComponent).toHaveAttribute('data-language', 'typescript');
+});
+test('renders with json', function () {
+  getComponent({
+    initialCode: jsonCode,
+    supportedLanguage: 'json'
+  });
+  var editorComponent = _testWrapper.screen.getByRole('textbox');
+  expect(editorComponent).toHaveAttribute('data-language', 'json');
+});
+it('returns ts error for tsLinter', function () {
+  getComponent({
+    initialCode: tsCode,
+    supportedLanguage: 'typescript'
+  });
+  var diagnostics = [];
+  diagnostics.length = 0;
+  var fileName = 'index.ts';
+  var compilerOpts = {
+    target: _codeEditorTypescript["default"].ScriptTarget.ES2016,
+    esModuleInterop: true
+  };
+  var fsMap = new _map["default"]();
+  var system = (0, _vfs.createSystem)(fsMap);
+
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-ignore
+  var env = (0, _vfs.createVirtualTypeScriptEnvironment)(system, [], _codeEditorTypescript["default"], compilerOpts);
+  env.createFile(fileName, editor.state.doc.toString());
+  var tsLinter = function tsLinter(view) {
+    var _context;
+    diagnostics.length = 0;
+    env.createFile(fileName, view.state.doc.toString());
+    var tsErrors = (0, _concat["default"])(_context = env.languageService.getSemanticDiagnostics('index.ts')).call(_context, env.languageService.getSyntacticDiagnostics('index.ts'));
+    (0, _forEach["default"])(tsErrors).call(tsErrors, function (tsError) {
+      diagnostics.push({
+        from: Number(tsError.start),
+        message: typeof tsError.messageText === 'string' ? tsError.messageText : tsError.messageText.messageText,
+        severity: 'error',
+        to: Number(tsError.start) + Number(tsError.length)
+      });
+    });
+    return diagnostics;
+  };
+  expect(diagnostics).toHaveLength(0);
+  var result = tsLinter(editor);
+  expect(result).toEqual([{
+    from: 7,
+    message: "Type 'number' is not assignable to type 'string'.",
+    severity: 'error',
+    to: 18
+  }, {
+    from: 100,
+    message: "Argument of type 'string' is not assignable to parameter of type 'number'.",
+    severity: 'error',
+    to: 115
+  }]);
+});
+test('renders CodeEditor with default props', function () {
+  getComponent({
+    initialCode: tsCode,
+    editorLanguage: (0, _langJavascript.javascript)()
+  });
+  expect(_testWrapper.screen.getByRole('textbox')).toBeInTheDocument();
+});

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

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

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

@@ -0,0 +1,83 @@
+"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 _commands = require("@codemirror/commands");
+var _lint = require("@codemirror/lint");
+var _state = require("@codemirror/state");
+var _view = require("@codemirror/view");
+var _codemirror = require("codemirror");
+var _index = require("../../index");
+var _react2 = require("@emotion/react");
+var _excluded = ["initialCode", "editorLanguage", "onUpdate", "linterExtension", "customRules", "onEditorViewInit"];
+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 language = new _state.Compartment();
+var DefaultEditor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var initialCode = props.initialCode,
+    editorLanguage = props.editorLanguage,
+    onUpdate = props.onUpdate,
+    linterExtension = props.linterExtension,
+    customRules = props.customRules,
+    onEditorViewInit = props.onEditorViewInit,
+    others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var editorRef = (0, _react.useRef)(null);
+  var viewRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    var view;
+    if (editorRef.current && editorLanguage) {
+      var startState = _state.EditorState.create({
+        doc: initialCode,
+        extensions: [_codemirror.basicSetup, language.of(editorLanguage), _view.keymap.of([_commands.indentWithTab]), (0, _lint.lintGutter)(), (0, _lint.linter)(linterExtension !== undefined ? linterExtension : null), (0, _lint.linter)(customRules !== undefined ? customRules : null), _codemirror.EditorView.contentAttributes.of({
+          'aria-label': 'Code Editor'
+        }), _codemirror.EditorView.updateListener.of(function (update) {
+          if (onUpdate) {
+            onUpdate(update.state.doc.toString());
+          }
+        }), _codemirror.EditorView.theme({
+          '.cm-scroller:focus-visible': {
+            outline: '1px solid',
+            border: '1px solid',
+            borderColor: '#4462ED',
+            outlineColor: '#758acd',
+            outlineOffset: '0px'
+          }
+        })]
+      });
+      view = new _codemirror.EditorView({
+        state: startState,
+        parent: editorRef.current
+      });
+      viewRef.current = view;
+      var scroller = editorRef.current.querySelector('.cm-scroller');
+      if (scroller) {
+        scroller.tabIndex = 0;
+      }
+      if (onEditorViewInit && viewRef.current) {
+        onEditorViewInit(viewRef.current);
+      }
+    }
+    return function () {
+      view.destroy();
+    };
+  }, [customRules, editorLanguage, initialCode, linterExtension, onEditorViewInit, onUpdate, viewRef]);
+  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, others, {
+    ref: ref
+  }), (0, _react2.jsx)(_index.Box, {
+    variant: "codeEditor.wrapper"
+  }, (0, _react2.jsx)(_index.Box, {
+    ref: editorRef
+  })));
+});
+var _default = DefaultEditor;
+exports["default"] = _default;

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

@@ -0,0 +1,18 @@
+declare const eslintConfig: {
+    plugins: {
+        'jsx-a11y': any;
+        'simple-import-sort': any;
+        'react-hooks': any;
+    };
+    languageOptions: {
+        parserOptions: {
+            ecmaVersion: number;
+            ecmaFeatures: {
+                jsx: boolean;
+            };
+            sourceType: string;
+        };
+    };
+    rules: any;
+};
+export default eslintConfig;

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

@@ -0,0 +1,95 @@
+"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 _js = _interopRequireDefault(require("@eslint/js"));
+var _eslintPluginJsxA11y = _interopRequireDefault(require("eslint-plugin-jsx-a11y"));
+var _eslintPluginReactHooks = _interopRequireDefault(require("eslint-plugin-react-hooks"));
+var _eslintPluginSimpleImportSort = _interopRequireDefault(require("eslint-plugin-simple-import-sort"));
+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 eslintConfig = {
+  plugins: {
+    'jsx-a11y': _eslintPluginJsxA11y["default"],
+    'simple-import-sort': _eslintPluginSimpleImportSort["default"],
+    'react-hooks': _eslintPluginReactHooks["default"]
+  },
+  languageOptions: {
+    parserOptions: {
+      ecmaVersion: 2022,
+      ecmaFeatures: {
+        'jsx': true
+      },
+      sourceType: 'module'
+    }
+  },
+  rules: _objectSpread(_objectSpread({}, _js["default"].configs.recommended.rules), {}, {
+    'arrow-body-style': 0,
+    'arrow-parens': ['error', 'as-needed'],
+    'import/extensions': 0,
+    'import/prefer-default-export': 0,
+    'jsx-a11y/label-has-for': 0,
+    'jsx-a11y/label-has-associated-control': [2, {
+      'labelAttributes': ['label']
+    }],
+    'jsx-a11y/anchor-is-valid': [2, {
+      'components': []
+    }],
+    'no-underscore-dangle': 0,
+    'no-multiple-empty-lines': ['error', {
+      'max': 2,
+      'maxBOF': 0,
+      'maxEOF': 0
+    }],
+    'prefer-destructuring': 0,
+    'react/jsx-filename-extension': 0,
+    'react/require-default-props': 0,
+    'react/no-multi-comp': 0,
+    'function-paren-newline': 0,
+    'quote-props': 0,
+    'object-curly-newline': ['error', {
+      'consistent': true
+    }],
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'warn',
+    'react/jsx-props-no-spreading': 0,
+    'react/function-component-definition': 0,
+    'react/destructuring-assignment': 0,
+    'no-restricted-exports': 0,
+    'react/no-unstable-nested-components': 0,
+    'import/no-cycle': 0,
+    'react/no-unused-prop-types': 0,
+    'react/no-unknown-property': 0,
+    'no-promise-executor-return': 0,
+    'simple-import-sort/exports': 'error',
+    'simple-import-sort/imports': ['error', {
+      'groups': [
+      // Packages `react` related packages come first.
+      ['^react', '^@?\\w'],
+      // Internal packages.
+      ['^(@|components)(/.*|$)'],
+      // Side effect imports.
+      ["^\\u0000"],
+      // Parent imports. Put `..` last.
+      ['^\\.\\.(?!/?$)', '^\\.\\./?$'],
+      // Other relative imports. Put same-folder imports and `.` last.
+      ['^\\./(?=.*/)(?!/?$)', '^\\.(?!/?$)', '^\\./?$'],
+      // Style imports.
+      ['^.+\\.?(css)$']]
+    }]
+  })
+};
+var _default = eslintConfig;
+exports["default"] = _default;

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"));