@storybook/addon-docs 6.5.0-alpha.46 → 6.5.0-alpha.49

package/dist/modern/frameworks/vue/sourceDecorator.js

@@ -1,195 +0,0 @@
-import "core-js/modules/es.array.reduce.js";
-
-/* eslint no-underscore-dangle: ["error", { "allow": ["_vnode"] }] */
-import { addons } from '@storybook/addons';
-import { logger } from '@storybook/client-logger';
-import { SourceType, SNIPPET_RENDERED } from '../../shared';
-export const skipSourceRender = context => {
-  var _context$parameters$d;
-
-  const sourceParams = context === null || context === void 0 ? void 0 : (_context$parameters$d = context.parameters.docs) === null || _context$parameters$d === void 0 ? void 0 : _context$parameters$d.source;
-  const isArgsStory = context === null || context === void 0 ? void 0 : context.parameters.__isArgsStory; // always render if the user forces it
-
-  if ((sourceParams === null || sourceParams === void 0 ? void 0 : sourceParams.type) === SourceType.DYNAMIC) {
-    return false;
-  } // never render if the user is forcing the block to render code, or
-  // if the user provides code, or if it's not an args story.
-
-
-  return !isArgsStory || (sourceParams === null || sourceParams === void 0 ? void 0 : sourceParams.code) || (sourceParams === null || sourceParams === void 0 ? void 0 : sourceParams.type) === SourceType.CODE;
-};
-export const sourceDecorator = (storyFn, context) => {
-  const story = storyFn(); // See ../react/jsxDecorator.tsx
-
-  if (skipSourceRender(context)) {
-    return story;
-  }
-
-  const channel = addons.getChannel();
-  const storyComponent = getStoryComponent(story.options.STORYBOOK_WRAPS);
-  return {
-    components: {
-      Story: story
-    },
-
-    // We need to wait until the wrapper component to be mounted so Vue runtime
-    // struct VNode tree. We get `this._vnode == null` if switch to `created`
-    // lifecycle hook.
-    mounted() {
-      // Theoretically this does not happens but we need to check it.
-      if (!this._vnode) {
-        return;
-      }
-
-      try {
-        const storyNode = lookupStoryInstance(this, storyComponent);
-        const code = vnodeToString(storyNode._vnode);
-
-        const emitFormattedTemplate = async () => {
-          const prettier = await import('prettier/standalone');
-          const prettierHtml = await import('prettier/parser-html');
-          channel.emit(SNIPPET_RENDERED, (context || {}).id, prettier.format(`<template>${code}</template>`, {
-            parser: 'vue',
-            plugins: [prettierHtml],
-            // Because the parsed vnode missing spaces right before/after the surround tag,
-            // we always get weird wrapped code without this option.
-            htmlWhitespaceSensitivity: 'ignore'
-          }));
-        };
-
-        emitFormattedTemplate();
-      } catch (e) {
-        logger.warn(`Failed to generate dynamic story source: ${e}`);
-      }
-    },
-
-    template: '<story />'
-  };
-};
-export function vnodeToString(vnode) {
-  var _vnode$data, _vnode$componentOptio, _vnode$data2;
-
-  const attrString = [...((_vnode$data = vnode.data) !== null && _vnode$data !== void 0 && _vnode$data.slot ? [['slot', vnode.data.slot]] : []), ['class', stringifyClassAttribute(vnode)], ...((_vnode$componentOptio = vnode.componentOptions) !== null && _vnode$componentOptio !== void 0 && _vnode$componentOptio.propsData ? Object.entries(vnode.componentOptions.propsData) : []), ...((_vnode$data2 = vnode.data) !== null && _vnode$data2 !== void 0 && _vnode$data2.attrs ? Object.entries(vnode.data.attrs) : [])].filter(([name], index, list) => list.findIndex(item => item[0] === name) === index).map(([name, value]) => stringifyAttr(name, value)).filter(Boolean).join(' ');
-
-  if (!vnode.componentOptions) {
-    // Non-component elements (div, span, etc...)
-    if (vnode.tag) {
-      if (!vnode.children) {
-        return `<${vnode.tag} ${attrString}/>`;
-      }
-
-      return `<${vnode.tag} ${attrString}>${vnode.children.map(vnodeToString).join('')}</${vnode.tag}>`;
-    } // TextNode
-
-
-    if (vnode.text) {
-      if (/[<>"&]/.test(vnode.text)) {
-        return `{{\`${vnode.text.replace(/`/g, '\\`')}\`}}`;
-      }
-
-      return vnode.text;
-    } // Unknown
-
-
-    return '';
-  } // Probably users never see the "unknown-component". It seems that vnode.tag
-  // is always set.
-
-
-  const tag = vnode.componentOptions.tag || vnode.tag || 'unknown-component';
-
-  if (!vnode.componentOptions.children) {
-    return `<${tag} ${attrString}/>`;
-  }
-
-  return `<${tag} ${attrString}>${vnode.componentOptions.children.map(vnodeToString).join('')}</${tag}>`;
-}
-
-function stringifyClassAttribute(vnode) {
-  var _vnode$data$staticCla, _vnode$data$staticCla2;
-
-  if (!vnode.data || !vnode.data.staticClass && !vnode.data.class) {
-    return undefined;
-  }
-
-  return [...((_vnode$data$staticCla = (_vnode$data$staticCla2 = vnode.data.staticClass) === null || _vnode$data$staticCla2 === void 0 ? void 0 : _vnode$data$staticCla2.split(' ')) !== null && _vnode$data$staticCla !== void 0 ? _vnode$data$staticCla : []), ...normalizeClassBinding(vnode.data.class)].filter(Boolean).join(' ') || undefined;
-} // https://vuejs.org/v2/guide/class-and-style.html#Binding-HTML-Classes
-
-
-function normalizeClassBinding(binding) {
-  if (!binding) {
-    return [];
-  }
-
-  if (typeof binding === 'string') {
-    return [binding];
-  }
-
-  if (binding instanceof Array) {
-    // To handle an object-in-array binding smartly, we use recursion
-    return binding.map(normalizeClassBinding).reduce((a, b) => [...a, ...b], []);
-  }
-
-  if (typeof binding === 'object') {
-    return Object.entries(binding).filter(([, active]) => !!active).map(([className]) => className);
-  } // Unknown class binding
-
-
-  return [];
-}
-
-function stringifyAttr(attrName, value) {
-  if (typeof value === 'undefined' || typeof value === 'function') {
-    return null;
-  }
-
-  if (value === true) {
-    return attrName;
-  }
-
-  if (typeof value === 'string') {
-    return `${attrName}=${quote(value)}`;
-  } // TODO: Better serialization (unquoted object key, Symbol/Classes, etc...)
-  //       Seems like Prettier don't format JSON-look object (= when keys are quoted)
-
-
-  return `:${attrName}=${quote(JSON.stringify(value))}`;
-}
-
-function quote(value) {
-  return value.includes(`"`) && !value.includes(`'`) ? `'${value}'` : `"${value.replace(/"/g, '&quot;')}"`;
-}
-/**
- * Skip decorators and grab a story component itself.
- * https://github.com/pocka/storybook-addon-vue-info/pull/113
- */
-
-
-function getStoryComponent(w) {
-  let matched = w;
-
-  while (matched && matched.options && matched.options.components && matched.options.components.story && matched.options.components.story.options && matched.options.components.story.options.STORYBOOK_WRAPS) {
-    matched = matched.options.components.story.options.STORYBOOK_WRAPS;
-  }
-
-  return matched;
-}
-
-/**
- * Find the story's instance from VNode tree.
- */
-function lookupStoryInstance(instance, storyComponent) {
-  if (instance.$vnode && instance.$vnode.componentOptions && instance.$vnode.componentOptions.Ctor === storyComponent) {
-    return instance;
-  }
-
-  for (let i = 0, l = instance.$children.length; i < l; i += 1) {
-    const found = lookupStoryInstance(instance.$children[i], storyComponent);
-
-    if (found) {
-      return found;
-    }
-  }
-
-  return null;
-}

package/dist/modern/frameworks/vue3/config.js

@@ -1,11 +0,0 @@
-import { extractArgTypes } from './extractArgTypes';
-import { extractComponentDescription } from '../../lib/docgen';
-import { prepareForInline } from './prepareForInline';
-export const parameters = {
-  docs: {
-    inlineStories: true,
-    prepareForInline,
-    extractArgTypes,
-    extractComponentDescription
-  }
-};

package/dist/modern/frameworks/vue3/extractArgTypes.js

@@ -1,43 +0,0 @@
-import { hasDocgen, extractComponentProps } from '../../lib/docgen';
-import { convert } from '../../lib/convert';
-const SECTIONS = ['props', 'events', 'slots'];
-export const extractArgTypes = component => {
-  if (!hasDocgen(component)) {
-    return null;
-  }
-
-  const results = {};
-  SECTIONS.forEach(section => {
-    const props = extractComponentProps(component, section);
-    props.forEach(({
-      propDef,
-      docgenInfo,
-      jsDocTags
-    }) => {
-      const {
-        name,
-        type,
-        description,
-        defaultValue: defaultSummary,
-        required
-      } = propDef;
-      const sbType = section === 'props' ? convert(docgenInfo) : {
-        name: 'void'
-      };
-      results[name] = {
-        name,
-        description,
-        type: Object.assign({
-          required
-        }, sbType),
-        table: {
-          type,
-          jsDocTags,
-          defaultValue: defaultSummary,
-          category: section
-        }
-      };
-    });
-  });
-  return results;
-};

package/dist/modern/frameworks/vue3/prepareForInline.js

@@ -1,22 +0,0 @@
-import React from 'react';
-import * as Vue from 'vue';
-import { app } from '@storybook/vue3'; // This is cast as `any` to workaround type errors caused by Vue 2 types
-
-const {
-  render,
-  h
-} = Vue;
-export const prepareForInline = (storyFn, {
-  args
-}) => {
-  const component = storyFn();
-  const vnode = h(component, args); // By attaching the app context from `@storybook/vue3` to the vnode
-  // like this, these stoeis are able to access any app config stuff
-  // the end-user set inside `.storybook/preview.js`
-
-  vnode.appContext = app._context; // eslint-disable-line no-underscore-dangle
-
-  return /*#__PURE__*/React.createElement('div', {
-    ref: node => node ? render(vnode, node) : null
-  });
-};

package/dist/modern/frameworks/vue3/preset.js

@@ -1,24 +0,0 @@
-export function webpackFinal(webpackConfig = {}, options) {
-  var _options$presetsList;
-
-  let vueDocgenOptions = {};
-  (_options$presetsList = options.presetsList) === null || _options$presetsList === void 0 ? void 0 : _options$presetsList.forEach(preset => {
-    if (preset.name.includes('addon-docs') && preset.options.vueDocgenOptions) {
-      const appendableOptions = preset.options.vueDocgenOptions;
-      vueDocgenOptions = Object.assign({}, vueDocgenOptions, appendableOptions);
-    }
-  });
-  webpackConfig.module.rules.push({
-    test: /\.vue$/,
-    loader: require.resolve('vue-docgen-loader', {
-      paths: [require.resolve('@storybook/vue3')]
-    }),
-    enforce: 'post',
-    options: {
-      docgenOptions: Object.assign({
-        alias: webpackConfig.resolve.alias
-      }, vueDocgenOptions)
-    }
-  });
-  return webpackConfig;
-}

package/dist/modern/frameworks/web-components/config.js

@@ -1,17 +0,0 @@
-import { extractArgTypes, extractComponentDescription } from './custom-elements';
-import { sourceDecorator } from './sourceDecorator';
-import { prepareForInline } from './prepareForInline';
-import { SourceType } from '../../shared';
-export const decorators = [sourceDecorator];
-export const parameters = {
-  docs: {
-    extractArgTypes,
-    extractComponentDescription,
-    inlineStories: true,
-    prepareForInline,
-    source: {
-      type: SourceType.DYNAMIC,
-      language: 'html'
-    }
-  }
-};

package/dist/modern/frameworks/web-components/custom-elements.js

@@ -1,125 +0,0 @@
-import "core-js/modules/es.array.reduce.js";
-import { getCustomElements, isValidComponent, isValidMetaData } from '@storybook/web-components';
-import { logger } from '@storybook/client-logger';
-
-function mapData(data, category) {
-  return data && data.filter(item => item && item.name).reduce((acc, item) => {
-    if (item.kind === 'method') return acc;
-
-    switch (category) {
-      case 'events':
-        mapEvent(item).forEach(argType => {
-          acc[argType.name] = argType;
-        });
-        break;
-
-      default:
-        acc[item.name] = mapItem(item, category);
-        break;
-    }
-
-    return acc;
-  }, {});
-}
-
-function mapItem(item, category) {
-  var _item$type, _item$type2;
-
-  const type = category === 'properties' ? {
-    name: ((_item$type = item.type) === null || _item$type === void 0 ? void 0 : _item$type.text) || item.type
-  } : {
-    name: 'void'
-  };
-  return {
-    name: item.name,
-    required: false,
-    description: item.description,
-    type,
-    table: {
-      category,
-      type: {
-        summary: ((_item$type2 = item.type) === null || _item$type2 === void 0 ? void 0 : _item$type2.text) || item.type
-      },
-      defaultValue: {
-        summary: item.default !== undefined ? item.default : item.defaultValue
-      }
-    }
-  };
-}
-
-function mapEvent(item) {
-  let name = item.name.replace(/(-|_|:|\.|\s)+(.)?/g, (_match, _separator, chr) => {
-    return chr ? chr.toUpperCase() : '';
-  }).replace(/^([A-Z])/, match => match.toLowerCase());
-  name = `on${name.charAt(0).toUpperCase() + name.substr(1)}`;
-  return [{
-    name,
-    action: {
-      name: item.name
-    },
-    table: {
-      disable: true
-    }
-  }, mapItem(item, 'events')];
-}
-
-const getMetaDataExperimental = (tagName, customElements) => {
-  if (!isValidComponent(tagName) || !isValidMetaData(customElements)) {
-    return null;
-  }
-
-  const metaData = customElements.tags.find(tag => tag.name.toUpperCase() === tagName.toUpperCase());
-
-  if (!metaData) {
-    logger.warn(`Component not found in custom-elements.json: ${tagName}`);
-  }
-
-  return metaData;
-};
-
-const getMetaDataV1 = (tagName, customElements) => {
-  var _customElements$modul;
-
-  if (!isValidComponent(tagName) || !isValidMetaData(customElements)) {
-    return null;
-  }
-
-  let metadata;
-  customElements === null || customElements === void 0 ? void 0 : (_customElements$modul = customElements.modules) === null || _customElements$modul === void 0 ? void 0 : _customElements$modul.forEach(_module => {
-    var _module$declarations;
-
-    _module === null || _module === void 0 ? void 0 : (_module$declarations = _module.declarations) === null || _module$declarations === void 0 ? void 0 : _module$declarations.forEach(declaration => {
-      if (declaration.tagName === tagName) {
-        metadata = declaration;
-      }
-    });
-  });
-
-  if (!metadata) {
-    logger.warn(`Component not found in custom-elements.json: ${tagName}`);
-  }
-
-  return metadata;
-};
-
-export const extractArgTypesFromElements = (tagName, customElements) => {
-  const metaData = getMetaData(tagName, customElements);
-  return metaData && Object.assign({}, mapData(metaData.attributes, 'attributes'), mapData(metaData.members, 'properties'), mapData(metaData.properties, 'properties'), mapData(metaData.events, 'events'), mapData(metaData.slots, 'slots'), mapData(metaData.cssProperties, 'css custom properties'), mapData(metaData.cssParts, 'css shadow parts'));
-};
-
-const getMetaData = (tagName, manifest) => {
-  if ((manifest === null || manifest === void 0 ? void 0 : manifest.version) === 'experimental') {
-    return getMetaDataExperimental(tagName, manifest);
-  }
-
-  return getMetaDataV1(tagName, manifest);
-};
-
-export const extractArgTypes = tagName => {
-  const cem = getCustomElements();
-  return extractArgTypesFromElements(tagName, cem);
-};
-export const extractComponentDescription = tagName => {
-  const metaData = getMetaData(tagName, getCustomElements());
-  return metaData && metaData.description;
-};

package/dist/modern/frameworks/web-components/prepareForInline.js

@@ -1,23 +0,0 @@
-import React from 'react';
-import { render } from 'lit-html';
-export const prepareForInline = storyFn => {
-  class Story extends React.Component {
-    constructor(...args) {
-      super(...args);
-      this.wrapperRef = /*#__PURE__*/React.createRef();
-    }
-
-    componentDidMount() {
-      render(storyFn(), this.wrapperRef.current);
-    }
-
-    render() {
-      return /*#__PURE__*/React.createElement('div', {
-        ref: this.wrapperRef
-      });
-    }
-
-  }
-
-  return /*#__PURE__*/React.createElement(Story);
-};

package/dist/modern/frameworks/web-components/sourceDecorator.js

@@ -1,47 +0,0 @@
-/* global window */
-import { render } from 'lit-html';
-import { addons, useEffect } from '@storybook/addons';
-import { SNIPPET_RENDERED, SourceType } from '../../shared';
-
-function skipSourceRender(context) {
-  var _context$parameters$d;
-
-  const sourceParams = context === null || context === void 0 ? void 0 : (_context$parameters$d = context.parameters.docs) === null || _context$parameters$d === void 0 ? void 0 : _context$parameters$d.source;
-  const isArgsStory = context === null || context === void 0 ? void 0 : context.parameters.__isArgsStory; // always render if the user forces it
-
-  if ((sourceParams === null || sourceParams === void 0 ? void 0 : sourceParams.type) === SourceType.DYNAMIC) {
-    return false;
-  } // never render if the user is forcing the block to render code, or
-  // if the user provides code, or if it's not an args story.
-
-
-  return !isArgsStory || (sourceParams === null || sourceParams === void 0 ? void 0 : sourceParams.code) || (sourceParams === null || sourceParams === void 0 ? void 0 : sourceParams.type) === SourceType.CODE;
-}
-
-function applyTransformSource(source, context) {
-  var _context$parameters$d2;
-
-  const {
-    transformSource
-  } = (_context$parameters$d2 = context.parameters.docs) !== null && _context$parameters$d2 !== void 0 ? _context$parameters$d2 : {};
-  if (typeof transformSource !== 'function') return source;
-  return transformSource(source, context);
-}
-
-export function sourceDecorator(storyFn, context) {
-  var _context$parameters$d3, _context$parameters$d4;
-
-  const story = context !== null && context !== void 0 && (_context$parameters$d3 = context.parameters.docs) !== null && _context$parameters$d3 !== void 0 && (_context$parameters$d4 = _context$parameters$d3.source) !== null && _context$parameters$d4 !== void 0 && _context$parameters$d4.excludeDecorators ? context.originalStoryFn(context.args, context) : storyFn();
-  let source;
-  useEffect(() => {
-    if (source) addons.getChannel().emit(SNIPPET_RENDERED, context.id, source);
-  });
-
-  if (!skipSourceRender(context)) {
-    const container = window.document.createElement('div');
-    render(story, container);
-    source = applyTransformSource(container.innerHTML.replace(/<!---->/g, ''), context);
-  }
-
-  return story;
-}

package/dist/modern/lib/convert/flow/convert.js

@@ -1,89 +0,0 @@
-/* eslint-disable no-case-declarations */
-const isLiteral = type => type.name === 'literal';
-
-const toEnumOption = element => element.value.replace(/['|"]/g, '');
-
-const convertSig = type => {
-  switch (type.type) {
-    case 'function':
-      return {
-        name: 'function'
-      };
-
-    case 'object':
-      const values = {};
-      type.signature.properties.forEach(prop => {
-        values[prop.key] = convert(prop.value);
-      });
-      return {
-        name: 'object',
-        value: values
-      };
-
-    default:
-      throw new Error(`Unknown: ${type}`);
-  }
-};
-
-export const convert = type => {
-  const {
-    name,
-    raw
-  } = type;
-  const base = {};
-  if (typeof raw !== 'undefined') base.raw = raw;
-
-  switch (type.name) {
-    case 'literal':
-      return Object.assign({}, base, {
-        name: 'other',
-        value: type.value
-      });
-
-    case 'string':
-    case 'number':
-    case 'symbol':
-    case 'boolean':
-      {
-        return Object.assign({}, base, {
-          name
-        });
-      }
-
-    case 'Array':
-      {
-        return Object.assign({}, base, {
-          name: 'array',
-          value: type.elements.map(convert)
-        });
-      }
-
-    case 'signature':
-      return Object.assign({}, base, convertSig(type));
-
-    case 'union':
-      if (type.elements.every(isLiteral)) {
-        return Object.assign({}, base, {
-          name: 'enum',
-          value: type.elements.map(toEnumOption)
-        });
-      }
-
-      return Object.assign({}, base, {
-        name,
-        value: type.elements.map(convert)
-      });
-
-    case 'intersection':
-      return Object.assign({}, base, {
-        name,
-        value: type.elements.map(convert)
-      });
-
-    default:
-      return Object.assign({}, base, {
-        name: 'other',
-        value: name
-      });
-  }
-};

package/dist/modern/lib/convert/flow/index.js

@@ -1,2 +0,0 @@
-export * from './convert';
-export * from './types';

package/dist/modern/lib/convert/index.js

@@ -1,14 +0,0 @@
-import { convert as tsConvert } from './typescript';
-import { convert as flowConvert } from './flow';
-import { convert as propTypesConvert } from './proptypes';
-export const convert = docgenInfo => {
-  const {
-    type,
-    tsType,
-    flowType
-  } = docgenInfo;
-  if (type != null) return propTypesConvert(type);
-  if (tsType != null) return tsConvert(tsType);
-  if (flowType != null) return flowConvert(flowType);
-  return null;
-};