@utrecht/web-component-library-stencil 1.0.0-alpha.245 → 1.0.0-alpha.246

package/dist/collection/node_modules/@storybook/addon-docs/dist/modern/frameworks/svelte/config.js

@@ -0,0 +1,13 @@
+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/collection/node_modules/@storybook/addon-docs/dist/modern/frameworks/svelte/extractArgTypes.js

@@ -0,0 +1,118 @@
+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/collection/node_modules/@storybook/addon-docs/dist/modern/frameworks/svelte/extractComponentDescription.js

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

package/dist/collection/node_modules/@storybook/addon-docs/dist/modern/frameworks/svelte/prepareForInline.js

@@ -0,0 +1,18 @@
+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/collection/node_modules/@storybook/addon-docs/dist/modern/frameworks/svelte/preset.js

@@ -0,0 +1,11 @@
+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/collection/node_modules/@storybook/addon-docs/dist/modern/frameworks/svelte/sourceDecorator.js

@@ -0,0 +1,187 @@
+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/collection/node_modules/@storybook/addon-docs/dist/modern/frameworks/svelte/svelte-docgen-loader.js

@@ -0,0 +1,89 @@
+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/collection/node_modules/@storybook/addon-docs/dist/modern/frameworks/vue/config.js

@@ -0,0 +1,13 @@
+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/collection/node_modules/@storybook/addon-docs/dist/modern/frameworks/vue/extractArgTypes.js

@@ -0,0 +1,103 @@
+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/collection/node_modules/@storybook/addon-docs/dist/modern/frameworks/vue/prepareForInline.js

@@ -0,0 +1,40 @@
+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/collection/node_modules/@storybook/addon-docs/dist/modern/frameworks/vue/preset.js

@@ -0,0 +1,24 @@
+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;
+}