index.js

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var loadable = _interopDefault(require('@loadable/component'));
var _get = _interopDefault(require('lodash/fp/get'));
var tslib_1 = require('tslib');
var __chunk_1 = require('./chunk.js');
var _omit = _interopDefault(require('lodash/fp/omit'));
var router = require('@reach/router');
var _first = _interopDefault(require('lodash/fp/first'));
var capitalize = _interopDefault(require('capitalize'));
require('fast-deep-equal');
require('lodash/fp/merge');
require('array-sort');
require('lodash/fp/unionBy');
require('lodash/fp/flattenDepth');
require('lodash/fp/pipe');
require('ulid');
require('match-sorter');
require('lodash/fp/throttle');
var react = require('@mdx-js/react');
var createHashSource = require('hash-source');
let source = createHashSource.default();;

const BasePlayground = loadable(() => Promise.resolve(require('./Playground.js')));
const Playground = props => typeof window !== 'undefined' ? React.createElement(React.Suspense, {
  fallback: null
}, React.createElement(BasePlayground, Object.assign({}, props))) : null;

const AsyncComponent = defaultProps => {
  const [loading, setLoading] = React.useState(true);
  const [error, setError] = React.useState(null);
  const [data, setData] = React.useState({});
  React.useEffect(() => {
    const {
      getInitialProps
    } = defaultProps;

    if (getInitialProps && __chunk_1.isFn(getInitialProps)) {
      setLoading(true);
      getInitialProps(defaultProps).then(data => {
        setLoading(false);
        setError(null);
        setData(data);
      }).catch(err => {
        setLoading(false);
        setError(err);
        setData({});
      });
    }
  }, []);

  const {
    as: Comp,
    getInitialProps
  } = defaultProps,
        props = tslib_1.__rest(defaultProps, ["as", "getInitialProps"]);

  return React.createElement(Comp, Object.assign({}, props, {
    data: Object.assign({}, data, {
      loading,
      error
    })
  }));
};

const loadRoute = (path, imports, components) => {
  const Loading = components.loading;

  const fn = async () => {
    const importFn = _get(path, imports);

    const {
      default: Component,
      getInitialProps
    } = await importFn();

    const ExportedComponent = props => React.createElement(AsyncComponent, Object.assign({}, props, {
      as: Component || 'div',
      getInitialProps: getInitialProps
    }));

    return ExportedComponent;
  };

  return loadable(fn, {
    fallback: React.createElement(Loading, null)
  });
};
const AsyncRoute = defaultProps => {
  const {
    asyncComponent,
    path,
    entry
  } = defaultProps,
        routeProps = tslib_1.__rest(defaultProps, ["asyncComponent", "path", "entry"]);

  const components = __chunk_1.useComponents();
  const Page = components.page;
  const Component = asyncComponent;
  const props = Object.assign({}, routeProps, {
    doc: entry
  });
  return Page ? React.createElement(Page, Object.assign({}, props), React.createElement(Component, Object.assign({}, props))) : React.createElement(Component, Object.assign({}, props));
};

const Link = React.forwardRef((defaultProps, ref) => {
  const props = _omit(['activeClassName', 'partiallyActive'], defaultProps);

  const isActive = React.useCallback(({
    isCurrent
  }) => {
    return isCurrent ? {
      className: `${props.className} active`
    } : {};
  }, [props.className]);
  return React.createElement(router.Link, Object.assign({}, props, {
    getProps: isActive,
    ref: ref
  }));
});
Link.displayName = 'Link';

const RE_OBJECTOF = /(?:React\.)?(?:PropTypes\.)?objectOf\((?:React\.)?(?:PropTypes\.)?(\w+)\)/;

const getTypeStr = type => {
  switch (type.name.toLowerCase()) {
    case 'instanceof':
      return `Class(${type.value})`;

    case 'enum':
      if (type.computed) return type.value;
      return type.value ? type.value.map(v => `${v.value}`).join(' │ ') : type.raw;

    case 'union':
      return type.value ? type.value.map(t => `${getTypeStr(t)}`).join(' │ ') : type.raw;

    case 'array':
      return type.raw;

    case 'arrayof':
      return `Array<${getTypeStr(type.value)}>`;

    case 'custom':
      if (type.raw.indexOf('function') !== -1 || type.raw.indexOf('=>') !== -1) return 'Custom(Function)';else if (type.raw.toLowerCase().indexOf('objectof') !== -1) {
        const m = type.raw.match(RE_OBJECTOF);
        if (m && m[1]) return `ObjectOf(${capitalize(m[1])})`;
        return 'ObjectOf';
      }
      return 'Custom';

    case 'bool':
      return 'Boolean';

    case 'func':
      return 'Function';

    case 'shape':
      const shape = type.value;
      const rst = {};
      Object.keys(shape).forEach(key => {
        rst[key] = getTypeStr(shape[key]);
      });
      return JSON.stringify(rst, null, 2);

    default:
      return capitalize(type.name);
  }
};

const humanize = type => getTypeStr(type);

const getPropType = prop => {
  const propName = _get('name', prop.flowType || prop.type);

  if (!propName) return null;
  const isEnum = propName.startsWith('"') || propName === 'enum';
  const name = capitalize(isEnum ? 'enum' : propName);

  const value = _get('type.value', prop);

  if (!name) return null;

  if (isEnum && typeof value === 'string' || !prop.flowType && !isEnum && !value || prop.flowType && !prop.flowType.elements) {
    return name;
  }

  return prop.flowType ? humanize(prop.flowType) : humanize(prop.type);
};
const Props = ({
  title,
  isToggle,
  isRaw,
  of: component
}) => {
  const components = __chunk_1.useComponents();
  const {
    props: stateProps
  } = React.useContext(__chunk_1.doczState.context);
  const PropsComponent = components.props;

  const filename = _get('__filemeta.filename', component);

  const filemetaName = _get('__filemeta.name', component);

  const componentName = filemetaName || component.displayName || component.name;
  const found = stateProps && stateProps.length > 0 && stateProps.find(item => filename ? item.key === filename : item.key.includes(`${componentName}.`));
  const value = _get('value', found) || [];

  const firstDefinition = _first(value);

  const definition = value.find(i => i.displayName === componentName);

  const props = _get('props', definition || firstDefinition);

  if (!props) return null;
  if (!PropsComponent) return null;
  return React.createElement(PropsComponent, {
    title: title,
    isRaw: isRaw,
    isToggle: isToggle,
    props: props,
    getPropType: getPropType
  });
};

const goToHash = ({
  location
}) => {
  setTimeout(() => {
    if (location && location.hash) {
      const decodedHash = decodeURI(location.hash);
      const id = decodedHash.substring(1);
      const el = document.getElementById(id);
      if (el) el.scrollIntoView();
    }
  });
};

const Routes = ({
  imports
}) => {
  const components = __chunk_1.useComponents();
  const {
    entries
  } = React.useContext(__chunk_1.doczState.context);
  const NotFound = components.notFound;
  const history = React.useMemo(() => router.createHistory(source), []);
  React.useEffect(() => {
    history.listen(goToHash);
  }, []);
  return React.createElement(react.MDXProvider, {
    components: components
  }, React.createElement(router.LocationProvider, {
    history: history
  }, React.createElement(router.Router, null, React.createElement(NotFound, {
    default: true
  }), entries && entries.map(({
    key: path,
    value: entry
  }) => {
    const props = {
      path,
      entries,
      components
    };
    const component = loadRoute(path, imports, components);
    return React.createElement(AsyncRoute, Object.assign({}, props, {
      entry: entry,
      key: entry.id,
      path: entry.route,
      asyncComponent: component
    }));
  }))));
};

function theme(themeConfig, transform = c => c) {
  return WrappedComponent => {
    const Theme = React.memo(props => {
      const {
        linkComponent
      } = props;
      const {
        db,
        children,
        wrapper: Wrapper = React.Fragment
      } = props;
      const initial = Object.assign({}, db, {
        themeConfig,
        transform,
        linkComponent
      });
      return React.createElement(__chunk_1.doczState.Provider, {
        initial: initial
      }, React.createElement(Wrapper, null, React.createElement(WrappedComponent, null, children)));
    });
    Theme.displayName = WrappedComponent.displayName || 'DoczTheme';
    return Theme;
  };
}

exports.ComponentsProvider = __chunk_1.ComponentsProvider;
exports.doczState = __chunk_1.doczState;
exports.useComponents = __chunk_1.useComponents;
exports.useConfig = __chunk_1.useConfig;
exports.useDataServer = __chunk_1.useDataServer;
exports.useDocs = __chunk_1.useDocs;
exports.useMenus = __chunk_1.useMenus;
exports.usePrevious = __chunk_1.usePrevious;
exports.useWindowSize = __chunk_1.useWindowSize;
exports.AsyncRoute = AsyncRoute;
exports.Link = Link;
exports.Playground = Playground;
exports.Props = Props;
exports.Routes = Routes;
exports.loadRoute = loadRoute;
exports.theme = theme;