@urbanos/react-discovery-ui 2.1.43

package/lib/components/data-card/data-card.test.js

@@ -0,0 +1,74 @@
+import { shallow } from 'enzyme'
+import DataCard from './data-card'
+import { Link } from 'react-router-dom'
+import SanitizedHTML from 'react-sanitized-html'
+import ReactImageFallback from 'react-image-fallback'
+
+let subject
+const dataset = {
+  id: 'c21e1562-c44b-4d65-b8ec-cac3dcbb133b',
+  name: 'someName',
+  title: 'someTitle',
+  sourceType: 'ingest',
+  organization_name: 'org_name',
+  organization_title: 'Organization Title',
+  organization_image_url: 'logo.png',
+  description: 'somedescription',
+  fileTypes: ['foo', 'bar'],
+  modified: '2018-06-21'
+}
+
+describe('data card element', () => {
+  beforeEach(() => {
+    subject = shallow(<DataCard dataset={dataset} />)
+  })
+
+  test('card to render text based on props', () => {
+    expect(
+      subject
+        .find(SanitizedHTML)
+        .dive()
+        .render()
+        .text()
+    ).toEqual(dataset.description)
+    expect(subject.find('.file-type').length).toEqual(dataset.fileTypes.length)
+    expect(subject.find(Link).at(1).props().to).toEqual(
+      `/dataset/${dataset.organization_name}/${dataset.name}`
+    )
+  })
+})
+
+describe('data card element with logo', () => {
+  beforeEach(() => {
+    subject = shallow(<DataCard dataset={dataset} />)
+  })
+
+  test('card to render logo with correct url and alt text', () => {
+    expect(subject.find(ReactImageFallback).prop('alt')).toEqual('The logo for Organization Title')
+    expect(subject.find(ReactImageFallback).prop('src')).toEqual(dataset.organization_image_url)
+  })
+})
+
+describe('data card element with html description', () => {
+  beforeEach(() => {
+    const datasetWithHtmlDescription = Object.assign({}, dataset, {
+      description: '<table></table>somedescription'
+    })
+
+    subject = shallow(<DataCard dataset={datasetWithHtmlDescription} />)
+  })
+
+  test('tags not in the whitelist are removed', () => {
+    expect(
+      subject
+        .find(SanitizedHTML)
+        .dive()
+        .render()
+        .text()
+    ).toEqual(dataset.description)
+    expect(subject.find('.file-type').length).toEqual(dataset.fileTypes.length)
+    expect(subject.find(Link).at(1).props().to).toEqual(
+      `/dataset/${dataset.organization_name}/${dataset.name}`
+    )
+  })
+})

package/lib/components/data-card/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _dataCard = _interopRequireDefault(require("./data-card"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _dataCard.default;

package/lib/components/data-view/data-view.js

@@ -0,0 +1,194 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _variables = _interopRequireDefault(require("../../styles/variables.scss"));
+require("./data-view.scss");
+var _reactTable = _interopRequireDefault(require("react-table"));
+require("react-table/react-table.css");
+var _reactJsonView = _interopRequireDefault(require("react-json-view"));
+var _loadingElement = _interopRequireDefault(require("../../components/generic-elements/loading-element"));
+var _reactTabs = require("react-tabs");
+var _lodash = _interopRequireDefault(require("lodash"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _possibleConstructorReturn(t, e) { if (e && ("object" == _typeof(e) || "function" == typeof e)) return e; if (void 0 !== e) throw new TypeError("Derived constructors may only return object or undefined"); return _assertThisInitialized(t); }
+function _assertThisInitialized(e) { if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); return e; }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+function _inherits(t, e) { if ("function" != typeof e && null !== e) throw new TypeError("Super expression must either be null or a function"); t.prototype = Object.create(e && e.prototype, { constructor: { value: t, writable: !0, configurable: !0 } }), Object.defineProperty(t, "prototype", { writable: !1 }), e && _setPrototypeOf(t, e); }
+function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
+var _default = exports.default = /*#__PURE__*/function (_Component) {
+  function _default() {
+    var _this;
+    _classCallCheck(this, _default);
+    _this = _callSuper(this, _default);
+    _this.state = {
+      index: 0
+    };
+    return _this;
+  }
+  _inherits(_default, _Component);
+  return _createClass(_default, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var isGeojson = this.props.format == 'geojson';
+      var cleanData = isGeojson ? undefined : this.getCleanData(this.props.data);
+      var columns = this.props.columns.map(function (column) {
+        return {
+          Header: column,
+          id: column,
+          accessor: function accessor(row) {
+            return row[column];
+          },
+          headerClassName: 'table-header'
+        };
+      });
+      return /*#__PURE__*/_react.default.createElement("div", {
+        id: "data-view"
+      }, /*#__PURE__*/_react.default.createElement(_reactTabs.Tabs, {
+        selectedIndex: this.state.index,
+        onSelect: function onSelect(tabIndex) {
+          return _this2.setState({
+            index: tabIndex
+          });
+        }
+      }, /*#__PURE__*/_react.default.createElement(_reactTabs.TabList, {
+        className: "header"
+      }, /*#__PURE__*/_react.default.createElement("span", {
+        className: "tab-area"
+      }, !isGeojson && /*#__PURE__*/_react.default.createElement(_reactTabs.Tab, {
+        "data-testid": "data-table"
+      }, "Table"), /*#__PURE__*/_react.default.createElement(_reactTabs.Tab, {
+        "data-testid": "data-json"
+      }, "JSON"))), !isGeojson && /*#__PURE__*/_react.default.createElement(_reactTabs.TabPanel, null, /*#__PURE__*/_react.default.createElement("div", {
+        id: "data-view-table"
+      }, /*#__PURE__*/_react.default.createElement(_reactTable.default, {
+        data: cleanData,
+        columns: columns,
+        loading: this.props.loading,
+        defaultPageSize: 50,
+        style: {
+          height: '400px'
+        },
+        className: "-striped -highlight",
+        page: this.props.page,
+        onPageChange: this.props.onNextPageClicked
+      }))), /*#__PURE__*/_react.default.createElement(_reactTabs.TabPanel, null, /*#__PURE__*/_react.default.createElement("div", {
+        id: "data-view-raw"
+      }, this.renderJsonOrLoading(this.props.loading)))));
+    }
+  }, {
+    key: "cleanseData",
+    value: function cleanseData(data) {
+      var _this3 = this;
+      if (!data.map) {
+        return [];
+      }
+      return data.map(function (row) {
+        return _this3.cleanseRow(row);
+      });
+    }
+  }, {
+    key: "cleanseRow",
+    value: function cleanseRow(row) {
+      var _this4 = this;
+      var deconstructedObject = Object.entries(row);
+      var listOfKeyValues = deconstructedObject.map(function (field) {
+        return _defineProperty({}, field[0], _this4.cleanseField(field[1]));
+      });
+      var reconstructedObject = Object.assign.apply(Object, [{}].concat(_toConsumableArray(listOfKeyValues)));
+      return reconstructedObject;
+    }
+  }, {
+    key: "cleanseField",
+    value: function cleanseField(value) {
+      if (typeof value === 'boolean') {
+        return value.toString();
+      } else if (_lodash.default.isNull(value) || _lodash.default.isNaN(value)) {
+        return '';
+      } else if (_typeof(value) === 'object') {
+        return JSON.stringify(value);
+      } else {
+        return value;
+      }
+    }
+  }, {
+    key: "getCleanData",
+    value: function getCleanData(queryData) {
+      return queryData ? this.cleanseData(queryData) : queryData;
+    }
+  }, {
+    key: "renderJsonOrLoading",
+    value: function renderJsonOrLoading(isLoading) {
+      if (isLoading) {
+        return /*#__PURE__*/_react.default.createElement(_loadingElement.default, {
+          className: "spinner"
+        });
+      } else {
+        return /*#__PURE__*/_react.default.createElement(_reactJsonView.default, {
+          src: this.props.data,
+          theme: this.getTheme(),
+          collapsed: 2
+        });
+      }
+    }
+  }, {
+    key: "getTheme",
+    value: function getTheme() {
+      // react-json-view uses the 'base16' theme structure:
+      // https://github.com/chriskempson/base16/blob/master/styling.md
+      return {
+        base00: 'white',
+        // Default Background
+        base01: 'white',
+        // Lighter Background
+        base02: _variables.default.headerGrey,
+        // Null background
+        base03: _variables.default.almostBlack,
+        // Null Text
+        base04: _variables.default.mediumGrey,
+        // Item counts
+        base05: _variables.default.darkGrey,
+        // Unused
+        base06: _variables.default.darkGrey,
+        // Unused
+        base07: _variables.default.lightBlue,
+        // Field names
+        base08: _variables.default.darkGrey,
+        // Unused
+        base09: _variables.default.green,
+        // Field values
+        base0A: _variables.default.darkGrey,
+        // Unused
+        base0B: _variables.default.darkGrey,
+        // Unused
+        base0C: _variables.default.darkGrey,
+        // Unused
+        base0D: _variables.default.darkGrey,
+        // Expanders
+        base0E: _variables.default.darkGrey,
+        // Expanders
+        base0F: _variables.default.darkGrey // Expanders
+      };
+    }
+  }]);
+}(_react.Component);

package/lib/components/data-view/data-view.scss

@@ -0,0 +1,39 @@
+@import '../../styles/variables.scss';
+@import '../../styles/mixins.scss';
+
+#data-view {
+  .header-container {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .ReactTable .rt-noData {
+    color: black;
+  }
+
+  .header-text-items {
+    margin: 1rem;
+  }
+
+  .preview-header {
+    @include header();
+  }
+
+  #data-view-table {
+    color: $almost-black;
+
+    .table-header {
+      background-color: $header-grey;
+      text-align: left;
+      font-weight: 800;
+    }
+  }
+
+  #data-view-raw {
+    overflow: scroll;
+    max-height: 30rem;
+    min-height: 10rem;
+    padding: 1rem;
+  }
+
+}

package/lib/components/data-view/data-view.test.js

@@ -0,0 +1,155 @@
+import {
+  mount
+} from 'enzyme'
+import DataView from './data-view'
+import { Tab, TabPanel } from 'react-tabs'
+import ReactTable from 'react-table'
+import ReactJson from 'react-json-view'
+import LoadingElement from '../../components/generic-elements/loading-element'
+
+describe('data view', () => {
+  describe('ui', () => {
+    let subject
+    beforeEach(() => {
+      const data = [{
+        firstName: 'Joe',
+        lastName: 'Smith',
+        enrolled: true,
+        'firstName.lastName': 'Joe Smith'
+      }, {
+        firstName: 'Jane',
+        lastName: 'Doe',
+        enrolled: false,
+        'firstName.lastName': 'Jane Doe'
+      }]
+      const columns = ['firstName', 'lastName', 'enrolled', 'firstName.lastName']
+      subject = mount(<DataView data={data} columns={columns} />)
+    })
+
+    test('should render table headers including column names with dots in them', () => {
+      const headers = subject.find('.rt-resizable-header-content')
+      const actual = headers.map(x => x.text())
+
+      expect(actual).toContain('firstName', 'lastName', 'enrolled', 'firstName.lastName')
+    })
+
+    test('should render table rows including data for column names with dots', () => {
+      const table_elements = subject.find('.rt-tr .rt-td')
+      const expected = [
+        'Joe', 'Smith', 'true', 'Joe Smith',
+        'Jane', 'Doe', 'false', 'Jane Doe'
+      ]
+      const actual = table_elements.map((x) => x.text())
+
+      expect(actual).toContain(...expected)
+    })
+
+    test('should render two tabs', () => {
+      expect(subject.find(Tab).length).toEqual(2)
+    })
+
+    it('has two tab panels', () => {
+      expect(subject.find(TabPanel).length).toEqual(2)
+    })
+
+    it('has a react table component on the first tab, and it is shown by default', () => {
+      expect(subject.find(ReactTable).length).toEqual(1)
+    })
+
+    it('has a react json component on the second tab', () => {
+      subject.setState({ index: 1 })
+      expect(subject.find(ReactJson).length).toEqual(1)
+    })
+  })
+
+  describe('geojson', () => {
+    let subject
+    beforeEach(() => {
+      const data = {}
+      const columns = []
+      subject = mount(<DataView data={data} columns={columns} format='geojson' />)
+    })
+
+    test('should render one tab', () => {
+      expect(subject.find(Tab).length).toEqual(1)
+    })
+
+    it('has one tab panel', () => {
+      expect(subject.find(TabPanel).length).toEqual(1)
+    })
+
+    it('does not have a react table component', () => {
+      expect(subject.find(ReactTable).length).toEqual(0)
+    })
+
+    it('has a react json component on the first tab', () => {
+      expect(subject.find(ReactJson).length).toEqual(1)
+    })
+  })
+
+  describe('json loading', () => {
+    let subject
+    beforeEach(() => {
+      const data = []
+      const columns = ['firstName', 'lastName', 'enrolled', 'firstName.lastName']
+      subject = mount(<DataView data={data} columns={columns} loading />)
+      subject.setState({ index: 1 })
+    })
+
+    it('does not render a react json component', () => {
+      expect(subject.find(ReactJson).length).toEqual(0)
+    })
+
+    it('does render a loading element', () => {
+      expect(subject.find(LoadingElement).length).toEqual(1)
+    })
+  })
+
+  describe('data table', () => {
+    it('converts unrenderable values to strings only for the react table', () => {
+      const queryData = [
+        { object: { value: 1 }, boolean: true, array: [1], nan: NaN, null: null },
+        { object: { value: 2 }, boolean: false, array: [2, 3], nan: NaN, null: null }
+      ]
+      const columns = ['object', 'boolean', 'array', 'nan', 'null']
+
+      const subject = mount(<DataView data={queryData} columns={columns} />)
+
+      const expectedData = [
+        { object: '{\"value\":1}', boolean: 'true', array: '[1]', nan: '', null: '' },
+        { object: '{\"value\":2}', boolean: 'false', array: '[2,3]', nan: '', null: '' }
+      ]
+
+      expect(subject.find(ReactTable).prop('data')).toEqual(expectedData)
+      expect(subject.prop('data')).toEqual(queryData)
+    })
+
+    it('can handle column names with dots (.) by giving a custom accessor', () => {
+      const queryData = [
+        { 'first.name': 'Mark', 'last.name': 'Johnson' },
+        { 'first.name': 'George', 'last.name': 'Lakoff' }
+      ]
+      const columns = [
+        'first.name',
+        'last.name'
+      ]
+
+      const subject = mount(<DataView data={queryData} columns={columns} />)
+
+      const stringifyAccessor = column => {
+        column.accessor = column.accessor.toString().replace(/\s/g, '')
+        return column
+      }
+
+      const expectedColumns = [
+        { Header: 'first.name', id: 'first.name', accessor: (row) => row[column], headerClassName: 'table-header' },
+        { Header: 'last.name', id: 'last.name', accessor: (row) => row[column], headerClassName: 'table-header' }
+      ]
+      expectedColumns.map(stringifyAccessor)
+
+      const actualColumns = subject.find(ReactTable).prop('columns').map(stringifyAccessor)
+
+      expect(actualColumns).toEqual(expectedColumns)
+    })
+  })
+})

package/lib/components/data-view/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _dataView = _interopRequireDefault(require("./data-view"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _dataView.default;

package/lib/components/dataset-api-doc/api-example.js

@@ -0,0 +1,120 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./api-example.scss");
+var _FilterNone = _interopRequireDefault(require("@material-ui/icons/FilterNone"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var defaultHeaders = [{
+  name: 'api_key',
+  default: '',
+  description: 'Include your unique api key as the value. You can generate your key by navigating to the “API Key” item on the “My Account” menu.',
+  required: false
+}];
+var _default = exports.default = function _default(_ref) {
+  var title = _ref.title,
+    descriptionHtml = _ref.descriptionHtml,
+    action = _ref.action,
+    url = _ref.url,
+    params = _ref.params,
+    examples = _ref.examples,
+    _ref$headers = _ref.headers,
+    headers = _ref$headers === void 0 ? defaultHeaders : _ref$headers;
+  return /*#__PURE__*/React.createElement("api-example", null, /*#__PURE__*/React.createElement("div", {
+    className: "example-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "example-title"
+  }, title), descriptionHtml, /*#__PURE__*/React.createElement("div", {
+    className: "example-code"
+  }, /*#__PURE__*/React.createElement("code", {
+    "data-testid": "".concat(title, "-api-example"),
+    className: "example-element"
+  }, "".concat(action, ": ").concat(url))), params && renderParameters(params), renderHeaders(headers), examples && renderExamples(examples, url)));
+};
+function renderParameters(params) {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "example-header"
+  }, "Optional Parameters"), /*#__PURE__*/React.createElement("div", {
+    className: "example-parameters"
+  }, /*#__PURE__*/React.createElement("table", {
+    className: "example-table"
+  }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null, "Name"), /*#__PURE__*/React.createElement("th", null, "Default"), /*#__PURE__*/React.createElement("th", null, "Example"), /*#__PURE__*/React.createElement("th", null, "Description"))), /*#__PURE__*/React.createElement("tbody", null, params.map(renderParameter)))));
+}
+function renderParameter(parameter) {
+  return /*#__PURE__*/React.createElement("tr", {
+    key: "".concat(parameter.name)
+  }, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("span", {
+    className: "pill"
+  }, parameter.name)), /*#__PURE__*/React.createElement("td", null, parameter.default), /*#__PURE__*/React.createElement("td", {
+    className: "parameter-example"
+  }, parameter.example), /*#__PURE__*/React.createElement("td", null, parameter.description));
+}
+function renderHeaders(headers) {
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "example-header"
+  }, "Headers"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("table", {
+    className: "example-table"
+  }, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("th", null, "Name"), /*#__PURE__*/React.createElement("th", null, "Required"), /*#__PURE__*/React.createElement("th", null, "Default"), /*#__PURE__*/React.createElement("th", null, "Description"))), /*#__PURE__*/React.createElement("tbody", null, headers.map(renderHeader)))));
+}
+function renderHeader(header) {
+  return /*#__PURE__*/React.createElement("tr", {
+    key: "".concat(header.name)
+  }, /*#__PURE__*/React.createElement("td", null, /*#__PURE__*/React.createElement("span", {
+    className: "pill"
+  }, header.name)), /*#__PURE__*/React.createElement("td", {
+    className: "required-marker"
+  }, header.required ? "Yes" : "No"), /*#__PURE__*/React.createElement("td", null, header.default), /*#__PURE__*/React.createElement("td", null, header.description));
+}
+function renderExamples(examples, url) {
+  examples = examples.map(function (example) {
+    example.curl = createCurlCommand(example, url);
+    return example;
+  });
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "example-header"
+  }, "Example Bodies"), examples.map(renderExample));
+}
+function renderExample(example, index) {
+  var copyToClipboard = function copyToClipboard(event) {
+    var textField = document.createElement('textarea');
+    textField.innerText = example.curl;
+    document.body.appendChild(textField);
+    textField.select();
+    document.execCommand('copy');
+    textField.remove();
+    event.target.focus();
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: "example-body",
+    key: index
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "example-description"
+  }, example.description), /*#__PURE__*/React.createElement("div", {
+    className: "example-code"
+  }, /*#__PURE__*/React.createElement("code", {
+    "data-testid": "curl-example-".concat(index),
+    className: "example-element"
+  }, example.body), /*#__PURE__*/React.createElement("div", {
+    className: "example-element curl",
+    onClick: function onClick(event) {
+      return copyToClipboard(event);
+    },
+    onKeyDownCapture: function onKeyDownCapture(event) {
+      if (event.key === ' ' || event.key === 'Enter') {
+        event.preventDefault() && copyToClipboard(event);
+      }
+    },
+    role: "button",
+    tabIndex: "0",
+    "aria-label": "cURL ".concat(index)
+  }, "cURL", /*#__PURE__*/React.createElement(_FilterNone.default, {
+    className: "copy-FilterNoneIcon"
+  }, "filter_none"), /*#__PURE__*/React.createElement("div", {
+    className: "secret-curl-field"
+  }, example.curl))));
+}
+function createCurlCommand(example, url) {
+  return "curl -X POST '".concat(url, "' -H 'Content-Type: text/plain' -H 'api_key: USER_API_KEY_HERE' -d '").concat(example.body, "'");
+}