@instructure/ui-test-utils/lib/utils/generateComponentExamples.js

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
exports.generateComponentExamples = generateComponentExamples;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _nanoid = require("nanoid");
var _generatePropCombinations = require("./generatePropCombinations");
var _react = _interopRequireDefault(require("react"));
/*
 * The MIT License (MIT)
 *
 * Copyright (c) 2015 - present Instructure, Inc.
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */

/**
 * Generates examples for the given component based on the given configuration.
 * @param Component A React component
 * @param config A configuration object (stored in xy.examples.jsx files in InstUI)
 * @returns Array of examples broken into sections and pages if configured to do so.
 * @module generateComponentExamples
 * @private
 *
 */
function generateComponentExamples(Component, config) {
  const sectionProp = config.sectionProp,
    excludeProps = config.excludeProps,
    filter = config.filter;
  const PROPS_CACHE = [];
  const sections = [];
  const maxExamples = config.maxExamples ? config.maxExamples : 500;
  let exampleCount = 0;
  let propValues = {};
  const getParameters = page => {
    const examples = page.examples;
    const index = page.index;
    let parameters = {};
    if (typeof config.getParameters === 'function') {
      parameters = {
        ...config.getParameters({
          examples,
          index
        })
      };
    }
    return parameters;
  };

  /**
   * Merges the auto-generated props with ones in the examples files specified
   * by the `getComponentProps()` method; props from the example files have
   * priority
   */
  const mergeComponentPropsFromConfig = props => {
    let componentProps = props;
    // TODO this code is so complicated because getComponentProps(props) can return
    // different values based on its props parameter.
    // If it would always return the same thing then we could reduce the
    // number of combinations generated by generatePropCombinations() by
    // getComponentProps() reducing some to 1 value, it would also remove the
    // need of PROPS_CACHE and duplicate checks.
    // InstUI is not using the 'props' param of getComponentProps(), but others are
    if (typeof config.getComponentProps === 'function') {
      componentProps = {
        ...componentProps,
        ...config.getComponentProps(props)
      };
    }
    return componentProps;
  };
  const getExampleProps = props => {
    let exampleProps = {};
    if (typeof config.getExampleProps === 'function') {
      exampleProps = {
        ...config.getExampleProps(props)
      };
    }
    return exampleProps;
  };
  const addPage = section => {
    const page = {
      examples: [],
      index: section.pages.length
    };
    section.pages.push(page);
    return page;
  };
  const addExample = (sectionName, example) => {
    let section = sections.find(section => section.sectionName === sectionName);
    if (!section) {
      section = {
        sectionName: sectionName,
        propName: sectionProp,
        propValue: sectionName,
        pages: []
      };
      sections.push(section);
    }
    let page = section.pages[section.pages.length - 1];
    let maxExamplesPerPage = config.maxExamplesPerPage;
    if (typeof maxExamplesPerPage === 'function') {
      maxExamplesPerPage = maxExamplesPerPage(sectionName);
    }
    if (!page) {
      page = addPage(section);
    } else if (maxExamplesPerPage && page.examples.length % maxExamplesPerPage === 0 && page.examples.length > 0) {
      page = addPage(section);
    }
    page.examples.push(example);
  };

  // Serializes the given recursively, faster than JSON.stringify()
  const fastSerialize = props => {
    const strArr = [];
    objToString(props, strArr);
    return strArr.join('');
  };
  const objToString = (currObject, currString) => {
    if (!currObject) {
      return;
    }
    if ( /*#__PURE__*/_react.default.isValidElement(currObject)) {
      currString.push(JSON.stringify(currObject));
    } else if (typeof currObject === 'object') {
      for (const _ref of Object.entries(currObject)) {
        var _ref2 = (0, _slicedToArray2.default)(_ref, 2);
        const key = _ref2[0];
        const value = _ref2[1];
        currString.push(key);
        objToString(value, currString);
      }
    } else {
      currString.push(currObject);
    }
  };
  const maybeAddExample = props => {
    const componentProps = mergeComponentPropsFromConfig(props);
    const ignore = typeof filter === 'function' ? filter(componentProps) : false;
    if (ignore) {
      return;
    }
    const propsString = fastSerialize(componentProps);
    if (!PROPS_CACHE.includes(propsString)) {
      const key = (0, _nanoid.nanoid)();
      const exampleProps = getExampleProps(props);
      exampleCount++;
      if (exampleCount < maxExamples) {
        PROPS_CACHE.push(propsString);
        let sectionName = 'Examples';
        if (sectionProp && componentProps[sectionProp]) {
          sectionName = componentProps[sectionProp];
        }
        addExample(sectionName, {
          Component,
          componentProps,
          exampleProps,
          key
        });
      }
    }
  };
  if (isEmpty(config.propValues)) {
    maybeAddExample({});
  } else {
    if (Array.isArray(excludeProps)) {
      ;
      Object.keys(config.propValues).forEach(propName => {
        if (!excludeProps.includes(propName)) {
          propValues[propName] = config.propValues[propName];
        }
      });
    } else {
      propValues = config.propValues;
    }
    // eslint-disable-next-line no-console
    console.info(`Generating examples for ${Component.displayName} (${Object.keys(propValues).length} props):`, propValues);
    // TODO reconcile the differences between these files
    // generatePropCombinations should call getComponentProps and not do anything?
    const combos = (0, _generatePropCombinations.generatePropCombinations)(propValues).filter(Boolean);
    let index = 0;
    while (index < combos.length && exampleCount < maxExamples) {
      const combo = combos[index];
      if (combo) {
        maybeAddExample(combo);
        index++;
      }
    }
  }
  if (exampleCount >= maxExamples) {
    console.error(`Too many examples for ${Component.displayName}! Add a filter to the config.`);
  }

  // eslint-disable-next-line no-console
  console.info(`Generated ${exampleCount} examples for ${Component.displayName}`);
  sections.forEach(_ref3 => {
    let pages = _ref3.pages;
    pages.forEach(page => {
      // eslint-disable-next-line no-param-reassign
      page.parameters = getParameters(page);
    });
  });
  return sections;
}
function isEmpty(obj) {
  if (typeof obj !== 'object') return true;
  for (const key in obj) {
    if (Object.hasOwnProperty.call(obj, key)) return false;
  }
  return true;
}
var _default = generateComponentExamples;
exports.default = _default;