docz/dist/index.esm.js

export { Link } from 'gatsby';
import { createContext, createElement, useContext, Fragment, Component, useMemo, useEffect, useRef, useState, memo } from 'react';
import _merge from 'lodash/fp/merge';
import equal from 'fast-deep-equal';
import _kebabCase from 'lodash/fp/kebabCase';
import _mapValues from 'lodash/fp/mapValues';
import _get from 'lodash/fp/get';
import _first from 'lodash/fp/first';
import _assoc from 'lodash/fp/assoc';
import { pascalCase } from 'pascal-case';
import marksy from 'marksy';
import sort from 'array-sort';
import _unionBy from 'lodash/fp/unionBy';
import _flattenDepth from 'lodash/fp/flattenDepth';
import _omit from 'lodash/fp/omit';
import _pipe from 'lodash/fp/pipe';
import { ulid } from 'ulid';
import match from 'match-sorter';
import _throttle from 'lodash/fp/throttle';
import { __rest } from 'tslib';
import capitalize from 'capitalize';

const DefNotFound = () => createElement(Fragment, null, "Not found");

const DefLayout = ({
  children
}) => createElement(Fragment, null, children);

const DefPlayground = ({
  component,
  code
}) => createElement("div", null, component, createElement("pre", null, code));

const defaultComponents = {
  layout: DefLayout,
  notFound: DefNotFound,
  playground: DefPlayground
};
const ctx = createContext(defaultComponents);
const ComponentsProvider = ({
  components: themeComponents = {},
  children
}) => createElement(ctx.Provider, {
  value: Object.assign({}, defaultComponents, themeComponents)
}, children);
const useComponents = () => {
  return useContext(ctx);
};

function create(initial) {
  var _a;

  const ctx = createContext(initial);
  const listeners = new Set();

  const dispatch = fn => {
    listeners.forEach(listener => listener(fn));
  };

  return {
    context: ctx,
    set: fn => dispatch(fn),
    Provider: (_a = class Provider extends Component {
      constructor() {
        super(...arguments);
        this.state = this.props.initial || initial || {};
      }

      static getDerivedStateFromProps(props, state) {
        if (!equal(props.initial, state)) return props.initial;
        return null;
      }

      componentDidMount() {
        listeners.add(fn => this.setState(fn));
      }

      componentWillUnmount() {
        listeners.clear();
      }

      render() {
        return createElement(ctx.Provider, {
          value: this.state
        }, this.props.children);
      }

    }, _a.displayName = 'DoczStateProvider', _a)
  };
}

const doczState = create({});

const useConfig = () => {
  const state = useContext(doczState.context);
  const {
    transform,
    config,
    themeConfig = {}
  } = state;

  const newConfig = _merge(themeConfig, config ? config.themeConfig : {});

  const transformed = transform ? transform(newConfig) : newConfig;
  return Object.assign({}, config, {
    themeConfig: transformed
  });
};

const useComponentProps = ({
  componentName,
  fileName
}) => {
  const components = useComponents();
  const {
    props: stateProps
  } = useContext(doczState.context);

  const componentMatcher = (componentName, item) => {
    const matchingPatterns = [fileName, `/${componentName}.`, `/${_kebabCase(componentName)}.`, `/${pascalCase(componentName)}.`];
    return !!matchingPatterns.find(pattern => item.key.includes(pattern));
  };

  const found = stateProps && stateProps.length > 0 && stateProps.find(item => componentMatcher(componentName, item));
  const value = _get('value', found) || [];

  const firstDefinition = _first(value);

  const definition = value.find(i => i.displayName === componentName);
  const compile = useMemo(() => marksy({
    createElement,
    elements: components
  }), [components]);
  const props = useMemo(() => {
    const props = _get('props', definition || firstDefinition);

    const parseDescs = _mapValues(prop => {
      const desc = _get('description', prop);

      return !desc ? prop : _assoc('description', compile(desc).tree, prop);
    });

    return parseDescs(props);
  }, [compile, definition || firstDefinition]);
  return props;
};

const useCurrentDoc = () => {
  const state = useContext(doczState.context);
  return _get('currentEntry.value', state);
};

const updateState = ev => {
  const {
    type,
    payload
  } = JSON.parse(ev.data);
  const prop = type.startsWith('state.') && type.split('.')[1];

  if (prop) {
    doczState.set(state => Object.assign({}, state, {
      [prop]: payload
    }));
  }
};

const useDataServer = url => {
  useEffect(() => {
    if (!url) return;
    const socket = new WebSocket(url);
    socket.onmessage = updateState;
    return () => socket.close();
  }, []);
};

function flatArrFromObject(arr, prop) {
  const reducer = (arr, obj) => {
    const value = _get(prop)(obj);

    return value ? arr.concat([value]) : arr;
  };

  return Array.from(new Set(arr.reduce(reducer, [])));
}
function compare(a, b, reverse) {
  if (a < b) return reverse ? 1 : -1;
  if (a > b) return reverse ? -1 : 1;
  return 0;
}

const useDocs = () => {
  const {
    entries = []
  } = useContext(doczState.context);
  const arr = entries.map(({
    value
  }) => value);
  return sort(arr, (a, b) => compare(a.name, b.name));
};

const noMenu = entry => !entry.menu;

const fromMenu = menu => entry => entry.menu === menu;

const entriesOfMenu = (menu, entries) => entries.filter(fromMenu(menu));

const parseMenu = entries => name => ({
  name,
  menu: entriesOfMenu(name, entries)
});

const menusFromEntries = entries => {
  const entriesWithoutMenu = entries.filter(noMenu);
  const menus = flatArrFromObject(entries, 'menu').map(parseMenu(entries));
  return _unionBy('name', menus, entriesWithoutMenu);
};

const parseItemStr = item => typeof item === 'string' ? {
  name: item
} : item;

const normalize = item => {
  const selected = parseItemStr(item);
  return Object.assign({}, selected, {
    id: selected.id || ulid(),
    parent: _get('parent', selected) || _get('parent', item),
    menu: Array.isArray(selected.menu) ? selected.menu.map(normalize) : selected.menu
  });
};

const clean = item => item.href || item.route ? _omit('menu', item) : item;

const normalizeAndClean = _pipe(normalize, clean);

const mergeMenus = (entriesMenu, configMenu) => {
  const first = entriesMenu.map(normalizeAndClean);
  const second = configMenu.map(normalizeAndClean);

  const merged = _unionBy('name', first, second);

  return merged.map(item => {
    if (!item.menu) return item;
    const found = second.find(i => i.name === item.name);
    const foundMenu = found && found.menu;
    return Object.assign({}, item, {
      menu: foundMenu ? mergeMenus(item.menu, foundMenu) : item.menu || found.menu
    });
  });
};

const UNKNOWN_POS = Infinity;

const findPos = (item, orderedList = []) => {
  const name = typeof item !== 'string' ? _get('name', item) : item;
  const pos = orderedList.findIndex(item => item === name);
  return pos !== -1 ? pos : UNKNOWN_POS;
};

const compareWithMenu = (to = []) => (a, b) => {
  const list = to.map(i => i.name || i);
  return compare(findPos(a, list), findPos(b, list));
};

const sortByName = (a, b) => {
  return a.name < b.name ? -1 : a.name > b.name ? 1 : 0;
};

const sortMenus = (first, second = []) => {
  const sorted = sort(first, compareWithMenu(second), sortByName);
  return sorted.map(item => {
    if (!item.menu) return item;
    const found = second.find(menu => menu.name === item.name);
    const foundMenu = found && found.menu;
    return Object.assign({}, item, {
      menu: foundMenu ? sortMenus(item.menu, foundMenu) : sort(item.menu, sortByName)
    });
  });
};

const search = (val, menu) => {
  const items = menu.map(item => [item].concat(item.menu || []));

  const flattened = _flattenDepth(2, items);

  const flattenedDeduplicated = Array.from(new Set(flattened));
  return match(flattenedDeduplicated, val, {
    keys: ['name']
  });
};

const filterMenus = (items, filter) => {
  if (!filter) return items;
  return items.filter(filter).map(item => {
    if (!item.menu) return item;
    return Object.assign({}, item, {
      menu: item.menu.filter(filter)
    });
  });
};

const useMenus = opts => {
  const {
    query = ''
  } = opts || {};
  const {
    entries,
    config
  } = useContext(doczState.context);
  if (!entries) return null;
  const arr = entries.map(({
    value
  }) => value);
  const entriesMenu = menusFromEntries(arr);
  const sorted = useMemo(() => {
    const merged = mergeMenus(entriesMenu, config.menu);
    const result = sortMenus(merged, config.menu);
    return filterMenus(result, opts && opts.filter);
  }, [entries, config]);
  return query && query.length > 0 ? search(query, sorted) : sorted;
};

const usePrevious = (value, defaultValue) => {
  const ref = useRef(defaultValue);
  useEffect(() => {
    ref.current = value;
  });
  return ref.current;
};

const isClient = typeof window === 'object';

const getSize = (initialWidth, initialHeight) => ({
  innerHeight: isClient ? window.innerHeight : initialHeight,
  innerWidth: isClient ? window.innerWidth : initialWidth,
  outerHeight: isClient ? window.outerHeight : initialHeight,
  outerWidth: isClient ? window.outerWidth : initialWidth
});

const useWindowSize = (throttleMs = 300, _initialWidth = Infinity, initialHeight = Infinity) => {
  const [windowSize, setWindowSize] = useState(getSize(initialHeight, initialHeight));

  const tSetWindowResize = _throttle(throttleMs, () => setWindowSize(getSize(initialHeight, initialHeight)));

  useEffect(() => {
    window.addEventListener('resize', tSetWindowResize);
    return () => void window.removeEventListener('resize', tSetWindowResize);
  }, []);
  return windowSize;
};

const Playground = ({
  className,
  children,
  style,
  wrapper,
  __scope,
  __position,
  __code,
  language,
  useScoping
}) => {
  const components = useComponents();
  const PlaygroundComponent = components.playground;
  if (!PlaygroundComponent) return null;
  return createElement(PlaygroundComponent, {
    components: components,
    component: children,
    className: className,
    style: style,
    wrapper: wrapper,
    scope: __scope,
    position: __position,
    code: __code,
    language: language,
    useScoping: useScoping
  });
};

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 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 = 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 = _a => {
  var {
    title,
    isToggle,
    isRaw,
    of: component
  } = _a,
      rest = __rest(_a, ["title", "isToggle", "isRaw", "of"]);

  const components = useComponents();
  const PropsComponent = components.props;

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

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

  const componentName = filemetaName || _get('displayName', component) || _get('name', component);

  const props = useComponentProps({
    componentName,
    fileName
  });
  if (!PropsComponent) return null;
  return createElement(PropsComponent, Object.assign({
    title: title,
    isRaw: isRaw,
    isToggle: isToggle,
    props: props,
    getPropType: getPropType,
    of: component
  }, rest));
};

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

export { ComponentsProvider, Playground, Props, doczState, theme, useComponentProps, useComponents, useConfig, useCurrentDoc, useDataServer, useDocs, useMenus, usePrevious, useWindowSize };