@pingux/astro 2.144.0-alpha.1 → 2.144.0-alpha.2

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

@@ -31,7 +31,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 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,
+  var _props$defaultValue = props.defaultValue,
+    defaultValue = _props$defaultValue === void 0 ? '\n' : _props$defaultValue,
     language = props.language,
     onChange = props.onChange,
     onValidate = props.onValidate,

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

@@ -22,6 +22,7 @@ declare const _default: {
     };
 };
 export default _default;
+export declare const Default: StoryFn<CodeEditorProps>;
 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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.TypescriptEditor = exports.ReadOnly = exports.JsonEditor = exports.JavascriptEditor = void 0;
+exports["default"] = exports.TypescriptEditor = exports.ReadOnly = exports.JsonEditor = exports.JavascriptEditor = exports.Default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _storybookDocsLayout = _interopRequireDefault(require("../../../.storybook/storybookDocsLayout"));
@@ -41,6 +41,13 @@ 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 Default = function Default(args) {
+  return (0, _react2.jsx)(_index.CodeEditor, (0, _extends2["default"])({}, args, {
+    height: "200px",
+    language: "Default"
+  }));
+};
+exports.Default = Default;
 var TypescriptEditor = function TypescriptEditor(args) {
   return (0, _react2.jsx)(_index.CodeEditor, (0, _extends2["default"])({}, args, {
     defaultValue: tsCode,

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

@@ -58,6 +58,11 @@ describe('CodeEditor', function () {
     expect(_testWrapper.screen.getByTestId('mock-monaco-editor')).toBeInTheDocument();
     expect(_testWrapper.screen.getByText('Editor Language: javascript, Code:console.log("Hello, World!");')).toBeInTheDocument();
   });
+  it('renders with null/undefined', function () {
+    (0, _testWrapper.render)((0, _react2.jsx)(_index.CodeEditor, null));
+    expect(_testWrapper.screen.getByTestId('mock-monaco-editor')).toBeInTheDocument();
+    expect(_testWrapper.screen.getByText('Editor Language: undefined, Code:')).toBeInTheDocument();
+  });
   it('calls onChange when code changes', function () {
     var value = 'console.log("Hello, World!");';
     var mockOnChange = jest.fn();

package/lib/cjs/components/CodeView/CodeView.js

@@ -82,7 +82,7 @@ var CodeView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       console.warn("Prism language module for \"".concat(String(language), "\" not found."));
     }
   }, [language]);
-  var content = (0, _react2.jsx)(_prismReactRenderer["default"], (0, _extends2["default"])({}, _prismReactRenderer.defaultProps, {
+  var content = code ? (0, _react2.jsx)(_prismReactRenderer["default"], (0, _extends2["default"])({}, _prismReactRenderer.defaultProps, {
     theme: codeViewTheme,
     code: code,
     language: language,
@@ -117,7 +117,7 @@ var CodeView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
         }));
       }));
     }));
-  });
+  }) : '';
 
   /* istanbul ignore next */
   if (isOnyx) {

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

@@ -39,7 +39,7 @@ var defaultProps = {
 var textValue = "\nexport const Default = args => (\n  <>\n    <Text sx={{ fontWeight: 2 }}>JSON</Text>\n    <CodeView {...args} />\n  </>\n);\n";
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return (0, _testWrapper.render)((0, _react2.jsx)(_.CodeView, (0, _extends2["default"])({}, defaultProps, props), textValue));
+  return (0, _testWrapper.render)((0, _react2.jsx)(_.CodeView, (0, _extends2["default"])({}, defaultProps, props), 'children' in props ? props.children : textValue));
 };
 beforeEach(function () {
   var mockClipboard = {
@@ -183,7 +183,7 @@ test('after button click, the tooltip renders with the text "Copied!"', /*#__PUR
   }, _callee4);
 })));
 test('renders CodeView component with default language', function () {
-  var children = ' ';
+  var children = '{}';
   getComponent({
     children: children
   });
@@ -191,6 +191,17 @@ test('renders CodeView component with default language', function () {
   expect(codeViewElement).toBeInTheDocument();
   expect(codeViewElement).toHaveClass('language-json');
 });
+test('renders CodeView component with null/undefined', function () {
+  var children = undefined;
+  getComponent({
+    children: children
+  });
+  _testWrapper.screen.getByRole('button', {
+    name: /copy to clipboard/i
+  });
+  var codeViewElement = _testWrapper.screen.getByTestId(testId).querySelector('pre');
+  expect(codeViewElement).not.toBeInTheDocument();
+});
 test('renders CodeView component with highlighted code', function () {
   var children = "\n    export const Default = args => (\n      <>\n        <Text sx={{ fontWeight: 2 }}>JSON</Text>\n        <CodeView {...args} />\n      </>\n    );\n  ";
   var language = 'jsx';
@@ -203,14 +214,15 @@ test('renders CodeView component with highlighted code', function () {
   expect(codeViewElement).toHaveClass("language-".concat(language));
 });
 test('isOnyx prop renders CodeView component with next-gen theme', function () {
-  var children = ' ';
+  var children = '{}';
   getComponent({
     children: children,
     isOnyx: true,
     language: 'json'
   });
-  var codeViewElement = _testWrapper.screen.getByTestId(testId);
-  expect(codeViewElement).toHaveTextContent('JSON');
+  var codeViewElement = _testWrapper.screen.getByTestId(testId).querySelector('pre');
+  expect(codeViewElement).toBeInTheDocument();
+  expect(codeViewElement).toHaveClass('language-json');
 });
 test('if textToCopy is provided it\'s copied to clipboard instead of children text data', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
   var textToCopy, button;

package/lib/cjs/components/CopyText/CopyText.js

@@ -34,6 +34,7 @@ var TooltipWrapper = function TooltipWrapper(_ref) {
   }, others), children, (0, _react2.jsx)(_index.Tooltip, null, tooltip));
 };
 var CopyText = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _props, _props2;
   var children = props.children,
     textToCopy = props.textToCopy,
     tooltipText = props.tooltipText,
@@ -42,7 +43,7 @@ var CopyText = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     wrapperProps = props.wrapperProps,
     iconButtonProps = props.iconButtonProps,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded2);
-  var value = textToCopy || (mode === 'link' ? children.props.href : children.props.children);
+  var value = textToCopy || (mode === 'link' ? children === null || children === void 0 || (_props = children.props) === null || _props === void 0 ? void 0 : _props.href : (_props2 = children.props) === null || _props2 === void 0 ? void 0 : _props2.children);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     isCopied = _useState2[0],
@@ -125,7 +126,8 @@ var CopyText = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
       ref: ref,
       isRow: true,
-      variant: "copyText.copy"
+      variant: "copyText.copy",
+      justifyContent: content ? 'start' : 'end'
     }, wrapperProps, others), content, (0, _react2.jsx)(TooltipWrapper, (0, _extends2["default"])({
       isOpen: isTooltipOpen,
       tooltip: tooltip

package/lib/components/CodeEditor/CodeEditor.js

@@ -20,7 +20,8 @@ import { Box, CopyText, Text } from '../../index';
 import languageMapping from '../../utils/devUtils/constants/languageMapping';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var CodeEditor = /*#__PURE__*/forwardRef(function (props, ref) {
-  var defaultValue = props.defaultValue,
+  var _props$defaultValue = props.defaultValue,
+    defaultValue = _props$defaultValue === void 0 ? '\n' : _props$defaultValue,
     language = props.language,
     onChange = props.onChange,
     onValidate = props.onValidate,

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

@@ -32,6 +32,12 @@ export 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";
+export var Default = function Default(args) {
+  return ___EmotionJSX(CodeEditor, _extends({}, args, {
+    height: "200px",
+    language: "Default"
+  }));
+};
 export var TypescriptEditor = function TypescriptEditor(args) {
   return ___EmotionJSX(CodeEditor, _extends({}, args, {
     defaultValue: tsCode,

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

@@ -55,6 +55,11 @@ describe('CodeEditor', function () {
     expect(screen.getByTestId('mock-monaco-editor')).toBeInTheDocument();
     expect(screen.getByText('Editor Language: javascript, Code:console.log("Hello, World!");')).toBeInTheDocument();
   });
+  it('renders with null/undefined', function () {
+    render(___EmotionJSX(CodeEditor, null));
+    expect(screen.getByTestId('mock-monaco-editor')).toBeInTheDocument();
+    expect(screen.getByText('Editor Language: undefined, Code:')).toBeInTheDocument();
+  });
   it('calls onChange when code changes', function () {
     var value = 'console.log("Hello, World!");';
     var mockOnChange = jest.fn();

package/lib/components/CodeView/CodeView.js

@@ -72,7 +72,7 @@ var CodeView = /*#__PURE__*/forwardRef(function (props, ref) {
       console.warn("Prism language module for \"".concat(String(language), "\" not found."));
     }
   }, [language]);
-  var content = ___EmotionJSX(Highlight, _extends({}, defaultProps, {
+  var content = code ? ___EmotionJSX(Highlight, _extends({}, defaultProps, {
     theme: codeViewTheme,
     code: code,
     language: language,
@@ -107,7 +107,7 @@ var CodeView = /*#__PURE__*/forwardRef(function (props, ref) {
         }));
       }));
     }));
-  });
+  }) : '';
 
   /* istanbul ignore next */
   if (isOnyx) {

package/lib/components/CodeView/CodeView.test.js

@@ -35,7 +35,7 @@ var defaultProps = {
 var textValue = "\nexport const Default = args => (\n  <>\n    <Text sx={{ fontWeight: 2 }}>JSON</Text>\n    <CodeView {...args} />\n  </>\n);\n";
 var getComponent = function getComponent() {
   var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  return render(___EmotionJSX(CodeView, _extends({}, defaultProps, props), textValue));
+  return render(___EmotionJSX(CodeView, _extends({}, defaultProps, props), 'children' in props ? props.children : textValue));
 };
 beforeEach(function () {
   var mockClipboard = {
@@ -179,7 +179,7 @@ test('after button click, the tooltip renders with the text "Copied!"', /*#__PUR
   }, _callee4);
 })));
 test('renders CodeView component with default language', function () {
-  var children = ' ';
+  var children = '{}';
   getComponent({
     children: children
   });
@@ -187,6 +187,17 @@ test('renders CodeView component with default language', function () {
   expect(codeViewElement).toBeInTheDocument();
   expect(codeViewElement).toHaveClass('language-json');
 });
+test('renders CodeView component with null/undefined', function () {
+  var children = undefined;
+  getComponent({
+    children: children
+  });
+  screen.getByRole('button', {
+    name: /copy to clipboard/i
+  });
+  var codeViewElement = screen.getByTestId(testId).querySelector('pre');
+  expect(codeViewElement).not.toBeInTheDocument();
+});
 test('renders CodeView component with highlighted code', function () {
   var children = "\n    export const Default = args => (\n      <>\n        <Text sx={{ fontWeight: 2 }}>JSON</Text>\n        <CodeView {...args} />\n      </>\n    );\n  ";
   var language = 'jsx';
@@ -199,14 +210,15 @@ test('renders CodeView component with highlighted code', function () {
   expect(codeViewElement).toHaveClass("language-".concat(language));
 });
 test('isOnyx prop renders CodeView component with next-gen theme', function () {
-  var children = ' ';
+  var children = '{}';
   getComponent({
     children: children,
     isOnyx: true,
     language: 'json'
   });
-  var codeViewElement = screen.getByTestId(testId);
-  expect(codeViewElement).toHaveTextContent('JSON');
+  var codeViewElement = screen.getByTestId(testId).querySelector('pre');
+  expect(codeViewElement).toBeInTheDocument();
+  expect(codeViewElement).toHaveClass('language-json');
 });
 test('if textToCopy is provided it\'s copied to clipboard instead of children text data', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
   var textToCopy, button;

package/lib/components/CopyText/CopyText.js

@@ -21,6 +21,7 @@ var TooltipWrapper = function TooltipWrapper(_ref) {
   }, others), children, ___EmotionJSX(Tooltip, null, tooltip));
 };
 var CopyText = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _props, _props2;
   var children = props.children,
     textToCopy = props.textToCopy,
     tooltipText = props.tooltipText,
@@ -29,7 +30,7 @@ var CopyText = /*#__PURE__*/forwardRef(function (props, ref) {
     wrapperProps = props.wrapperProps,
     iconButtonProps = props.iconButtonProps,
     others = _objectWithoutProperties(props, _excluded2);
-  var value = textToCopy || (mode === 'link' ? children.props.href : children.props.children);
+  var value = textToCopy || (mode === 'link' ? children === null || children === void 0 || (_props = children.props) === null || _props === void 0 ? void 0 : _props.href : (_props2 = children.props) === null || _props2 === void 0 ? void 0 : _props2.children);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isCopied = _useState2[0],
@@ -112,7 +113,8 @@ var CopyText = /*#__PURE__*/forwardRef(function (props, ref) {
     return ___EmotionJSX(Box, _extends({
       ref: ref,
       isRow: true,
-      variant: "copyText.copy"
+      variant: "copyText.copy",
+      justifyContent: content ? 'start' : 'end'
     }, wrapperProps, others), content, ___EmotionJSX(TooltipWrapper, _extends({
       isOpen: isTooltipOpen,
       tooltip: tooltip

package/package.json

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