@storybook/addon-docs 6.5.0-alpha.5 → 6.5.0-alpha.52

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

@@ -1,13 +0,0 @@
-import { extractArgTypes } from './extractArgTypes';
-import { extractComponentDescription } from './extractComponentDescription';
-import { prepareForInline } from './prepareForInline';
-import { sourceDecorator } from './sourceDecorator';
-export const parameters = {
-  docs: {
-    inlineStories: true,
-    prepareForInline,
-    extractArgTypes,
-    extractComponentDescription
-  }
-};
-export const decorators = [sourceDecorator];

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

@@ -1,118 +0,0 @@
-import { logger } from '@storybook/client-logger';
-
-function hasKeyword(keyword, keywords) {
-  return keywords ? keywords.find(k => k.name === keyword) != null : false;
-}
-
-export const extractArgTypes = component => {
-  try {
-    // eslint-disable-next-line no-underscore-dangle
-    const docgen = component.__docgen;
-
-    if (docgen) {
-      return createArgTypes(docgen);
-    }
-  } catch (err) {
-    logger.log(`Error extracting argTypes: ${err}`);
-  }
-
-  return {};
-};
-export const createArgTypes = docgen => {
-  const results = {};
-  docgen.data.forEach(item => {
-    var _item$type, _item$type2;
-
-    results[item.name] = {
-      control: parseTypeToControl(item.type),
-      name: item.name,
-      description: item.description,
-      type: {
-        required: hasKeyword('required', item.keywords),
-        name: (_item$type = item.type) === null || _item$type === void 0 ? void 0 : _item$type.text
-      },
-      table: {
-        type: {
-          summary: (_item$type2 = item.type) === null || _item$type2 === void 0 ? void 0 : _item$type2.text
-        },
-        defaultValue: {
-          summary: item.defaultValue
-        },
-        category: 'properties'
-      }
-    };
-  });
-  docgen.events.forEach(item => {
-    results[`event_${item.name}`] = {
-      name: item.name,
-      description: item.description,
-      type: {
-        name: 'other',
-        value: 'void'
-      },
-      table: {
-        category: 'events'
-      }
-    };
-  });
-  docgen.slots.forEach(item => {
-    var _item$params;
-
-    results[`slot_${item.name}`] = {
-      name: item.name,
-      description: [item.description, (_item$params = item.params) === null || _item$params === void 0 ? void 0 : _item$params.map(p => `\`${p.name}\``).join(' ')].filter(p => p).join('\n\n'),
-      type: {
-        name: 'other',
-        value: 'void'
-      },
-      table: {
-        category: 'slots'
-      }
-    };
-  });
-  return results;
-};
-/**
- * Function to convert the type from sveltedoc-parser to a storybook type
- * @param typeName
- * @returns string
- */
-
-const parseTypeToControl = type => {
-  if (!type) {
-    return null;
-  }
-
-  if (type.kind === 'type') {
-    switch (type.type) {
-      case 'string':
-        return {
-          type: 'text'
-        };
-
-      case 'enum':
-        return {
-          type: 'radio'
-        };
-
-      case 'any':
-        return {
-          type: 'object'
-        };
-
-      default:
-        return {
-          type: type.type
-        };
-    }
-  } else if (type.kind === 'union') {
-    if (Array.isArray(type.type) && !type.type.find(t => t.type !== 'string')) {
-      return {
-        type: 'radio',
-        options: type.type.filter(t => t.kind === 'const').map(t => t.value)
-      };
-    }
-  }
-
-  return null;
-};

package/dist/modern/frameworks/svelte/extractComponentDescription.js

@@ -1,10 +0,0 @@
-export function extractComponentDescription(component) {
-  if (!component) {
-    return null;
-  }
-
-  const {
-    __docgen = {}
-  } = component;
-  return __docgen.description;
-}

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

@@ -1,18 +0,0 @@
-import React from 'react'; // @ts-ignore
-
-import HOC from './HOC.svelte';
-export const prepareForInline = storyFn => {
-  const el = React.useRef(null);
-  React.useEffect(() => {
-    const root = new HOC({
-      target: el.current,
-      props: {
-        storyFn
-      }
-    });
-    return () => root.$destroy();
-  });
-  return /*#__PURE__*/React.createElement('div', {
-    ref: el
-  });
-};

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

@@ -1,11 +0,0 @@
-import path from 'path';
-export async function webpackFinal(webpackConfig, options) {
-  const svelteOptions = await options.presets.apply('svelteOptions', {}, options);
-  webpackConfig.module.rules.push({
-    test: /\.svelte$/,
-    loader: path.resolve(`${__dirname}/svelte-docgen-loader`),
-    enforce: 'post',
-    options: svelteOptions
-  });
-  return webpackConfig;
-}

package/dist/modern/frameworks/svelte/sample/MockButton.svelte

@@ -1,45 +0,0 @@
-<script>
-  import { createEventDispatcher, afterUpdate } from 'svelte';
-  export let text = '';
-  export let rounded = true;
-
-  const dispatch = createEventDispatcher();
-
-  function onClick(event) {
-    rounded = !rounded;
-
-    /**
-     * Click Event 
-     */
-    dispatch('click', event);
-  }
-
-  afterUpdate(() => {
-    /**
-     * After Update
-     */
-    dispatch('afterUpdate');
-  });
-</script>
-
-<style>
-  .rounded {
-    border-radius: 35px;
-  }
-
-  .button {
-    border: 3px solid;
-    padding: 10px 20px;
-    background-color: white;
-    outline: none;
-  }
-</style>
-
-<svelte:options accessors={true} />
-<button class="button" class:rounded on:click={onClick}>
-  <strong>{rounded ? 'Round' : 'Square'} corners</strong>
-  <br />
-  {text}
-  <!-- Default Slot -->
-  <slot {rounded}/>
-</button>

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

@@ -1,187 +0,0 @@
-import { addons, useEffect } from '@storybook/addons';
-import { SourceType, SNIPPET_RENDERED } from '../../shared';
-/**
- * Check if the sourcecode should be generated.
- *
- * @param context StoryContext
- */
-
-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;
-};
-/**
- * Transform a key/value to a svelte declaration as string.
- *
- * Default values are ommited
- *
- * @param key Key
- * @param value Value
- * @param argTypes Component ArgTypes
- */
-
-
-function toSvelteProperty(key, value, argTypes) {
-  if (value === undefined || value === null) {
-    return null;
-  } // default value ?
-
-
-  if (argTypes[key] && argTypes[key].defaultValue === value) {
-    return null;
-  }
-
-  if (value === true) {
-    return key;
-  }
-
-  if (typeof value === 'string') {
-    return `${key}=${JSON.stringify(value)}`;
-  }
-
-  return `${key}={${JSON.stringify(value)}}`;
-}
-/**
- * Extract a component name.
- *
- * @param component Component
- */
-
-
-function getComponentName(component) {
-  if (component == null) {
-    return null;
-  }
-
-  const {
-    __docgen = {}
-  } = component;
-  let {
-    name
-  } = __docgen;
-
-  if (!name) {
-    return component.name;
-  }
-
-  if (name.endsWith('.svelte')) {
-    name = name.substring(0, name.length - 7);
-  }
-
-  return name;
-}
-/**
- * Generate a svelte template.
- *
- * @param component Component
- * @param args Args
- * @param argTypes ArgTypes
- * @param slotProperty Property used to simulate a slot
- */
-
-
-export function generateSvelteSource(component, args, argTypes, slotProperty) {
-  const name = getComponentName(component);
-
-  if (!name) {
-    return null;
-  }
-
-  const props = Object.entries(args).filter(([k]) => k !== slotProperty).map(([k, v]) => toSvelteProperty(k, v, argTypes)).filter(p => p).join(' ');
-  const slotValue = slotProperty ? args[slotProperty] : null;
-
-  if (slotValue) {
-    return `<${name} ${props}>\n    ${slotValue}\n</${name}>`;
-  }
-
-  return `<${name} ${props}/>`;
-}
-/**
- * Check if the story component is a wrapper to the real component.
- *
- * A component can be annoted with @wrapper to indicate that
- * it's just a wrapper for the real tested component. If it's the case
- * then the code generated references the real component, not the wrapper.
- *
- * moreover, a wrapper can annotate a property with @slot : this property
- * is then assumed to be an alias to the default slot.
- *
- * @param component Component
- */
-
-function getWrapperProperties(component) {
-  const {
-    __docgen
-  } = component;
-
-  if (!__docgen) {
-    return {
-      wrapper: false
-    };
-  } // the component should be declared as a wrapper
-
-
-  if (!__docgen.keywords.find(kw => kw.name === 'wrapper')) {
-    return {
-      wrapper: false
-    };
-  }
-
-  const slotProp = __docgen.data.find(prop => prop.keywords.find(kw => kw.name === 'slot'));
-
-  return {
-    wrapper: true,
-    slotProperty: slotProp === null || slotProp === void 0 ? void 0 : slotProp.name
-  };
-}
-/**
- * Svelte source decorator.
- * @param storyFn Fn
- * @param context  StoryContext
- */
-
-
-export const sourceDecorator = (storyFn, context) => {
-  const channel = addons.getChannel();
-  const skip = skipSourceRender(context);
-  const story = storyFn();
-  let source;
-  useEffect(() => {
-    if (!skip && source) {
-      channel.emit(SNIPPET_RENDERED, (context || {}).id, source);
-    }
-  });
-
-  if (skip) {
-    return story;
-  }
-
-  const {
-    parameters = {},
-    args = {}
-  } = context || {};
-  let {
-    Component: component = {}
-  } = story;
-  const {
-    wrapper,
-    slotProperty
-  } = getWrapperProperties(component);
-
-  if (wrapper) {
-    component = parameters.component;
-  }
-
-  source = generateSvelteSource(component, args, context === null || context === void 0 ? void 0 : context.argTypes, slotProperty);
-  return story;
-};

package/dist/modern/frameworks/svelte/svelte-docgen-loader.js

@@ -1,89 +0,0 @@
-import svelteDoc from 'sveltedoc-parser';
-import dedent from 'ts-dedent';
-import * as path from 'path';
-import * as fs from 'fs';
-import { getOptions } from 'loader-utils';
-import { preprocess } from 'svelte/compiler';
-import { logger } from '@storybook/node-logger'; // From https://github.com/sveltejs/svelte/blob/8db3e8d0297e052556f0b6dde310ef6e197b8d18/src/compiler/compile/utils/get_name_from_filename.ts
-// Copied because it is not exported from the compiler
-
-function getNameFromFilename(filename) {
-  if (!filename) return null;
-  const parts = filename.split(/[/\\]/).map(encodeURI);
-
-  if (parts.length > 1) {
-    const index_match = parts[parts.length - 1].match(/^index(\.\w+)/);
-
-    if (index_match) {
-      parts.pop();
-      parts[parts.length - 1] += index_match[1];
-    }
-  }
-
-  const base = parts.pop().replace(/%/g, 'u').replace(/\.[^.]+$/, '').replace(/[^a-zA-Z_$0-9]+/g, '_').replace(/^_/, '').replace(/_$/, '').replace(/^(\d)/, '_$1');
-
-  if (!base) {
-    throw new Error(`Could not derive component name from file ${filename}`);
-  }
-
-  return base[0].toUpperCase() + base.slice(1);
-}
-/**
- * webpack loader for sveltedoc-parser
- * @param source raw svelte component
- */
-
-
-export default async function svelteDocgen(source) {
-  // eslint-disable-next-line no-underscore-dangle
-  const {
-    resource
-  } = this._module;
-  const svelteOptions = Object.assign({}, getOptions(this));
-  const {
-    preprocess: preprocessOptions,
-    logDocgen = false
-  } = svelteOptions;
-  let docOptions;
-
-  if (preprocessOptions) {
-    const src = fs.readFileSync(resource).toString();
-    const {
-      code: fileContent
-    } = await preprocess(src, preprocessOptions);
-    docOptions = {
-      fileContent
-    };
-  } else {
-    docOptions = {
-      filename: resource
-    };
-  } // set SvelteDoc options
-
-
-  const options = Object.assign({}, docOptions, {
-    version: 3
-  });
-  let docgen = '';
-
-  try {
-    const componentDoc = await svelteDoc.parse(options); // get filename for source content
-
-    const file = path.basename(resource); // populate filename in docgen
-
-    componentDoc.name = path.basename(file);
-    const componentName = getNameFromFilename(resource);
-    docgen = dedent`
-
-              ${componentName}.__docgen = ${JSON.stringify(componentDoc)};
-              `;
-  } catch (error) {
-    if (logDocgen) {
-      logger.error(error);
-    }
-  } // inject __docgen prop in svelte component
-
-
-  const output = source + docgen;
-  return output;
-}

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

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

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

@@ -1,103 +0,0 @@
-import { hasDocgen, extractComponentProps } from '../../lib/docgen';
-import { convert } from '../../lib/convert';
-const SECTIONS = ['props', 'events', 'slots'];
-/**
- * Check if "@values" tag is defined within docgenInfo.
- * If true, then propDef is mutated.
- */
-
-function isEnum(propDef, docgenInfo) {
-  // cast as any, since "values" doesn't exist in DocgenInfo type
-  const {
-    type,
-    values
-  } = docgenInfo;
-  const matched = Array.isArray(values) && values.length && type.name !== 'enum';
-  if (!matched) return false;
-  const enumString = values.join(', ');
-  let {
-    summary
-  } = propDef.type;
-  summary = summary ? `${summary}: ${enumString}` : enumString;
-  Object.assign(propDef.type, Object.assign({}, propDef.type, {
-    name: 'enum',
-    value: values,
-    summary
-  }));
-  return propDef;
-}
-/**
- * @returns {Array} result
- * @returns {PropDef} result.def - propDef
- * @returns {boolean} result.isChanged - flag whether propDef is mutated or not.
- *  this is needed to prevent sbType from performing convert(docgenInfo).
- */
-
-
-function verifyPropDef(propDef, docgenInfo) {
-  let def = propDef;
-  let isChanged = false; // another callback can be added here.
-  // callback is mutually exclusive from each other.
-
-  const callbacks = [isEnum];
-
-  for (let i = 0, len = callbacks.length; i < len; i += 1) {
-    const matched = callbacks[i](propDef, docgenInfo);
-
-    if (matched) {
-      def = matched;
-      isChanged = true;
-    }
-  }
-
-  return [def, isChanged];
-}
-
-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 [result, isPropDefChanged] = verifyPropDef(propDef, docgenInfo);
-      const {
-        name,
-        type,
-        description,
-        defaultValue: defaultSummary,
-        required
-      } = result;
-      let sbType;
-
-      if (isPropDefChanged) {
-        sbType = type;
-      } else {
-        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/vue/prepareForInline.js

@@ -1,40 +0,0 @@
-import React from 'react';
-import Vue from 'vue';
-// Inspired by https://github.com/egoist/vue-to-react,
-// modified to store args as props in the root store
-// FIXME get this from @storybook/vue
-const COMPONENT = 'STORYBOOK_COMPONENT';
-const VALUES = 'STORYBOOK_VALUES';
-export const prepareForInline = (storyFn, {
-  args
-}) => {
-  const component = storyFn();
-  const el = React.useRef(null); // FIXME: This recreates the Vue instance every time, which should be optimized
-
-  React.useEffect(() => {
-    const root = new Vue({
-      el: el.current,
-
-      data() {
-        return {
-          [COMPONENT]: component,
-          [VALUES]: args
-        };
-      },
-
-      render(h) {
-        const children = this[COMPONENT] ? [h(this[COMPONENT])] : undefined;
-        return h('div', {
-          attrs: {
-            id: 'root'
-          }
-        }, children);
-      }
-
-    });
-    return () => root.$destroy();
-  });
-  return /*#__PURE__*/React.createElement('div', null, /*#__PURE__*/React.createElement('div', {
-    ref: el
-  }));
-};

package/dist/modern/frameworks/vue/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/vue')]
-    }),
-    enforce: 'post',
-    options: {
-      docgenOptions: Object.assign({
-        alias: webpackConfig.resolve.alias
-      }, vueDocgenOptions)
-    }
-  });
-  return webpackConfig;
-}