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

package/dist/collection/node_modules/@storybook/addon-docs/dist/esm/lib/jsdocParser.js

@@ -0,0 +1,207 @@
+import "core-js/modules/es.array.includes.js";
+import "core-js/modules/es.string.includes.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.symbol.description.js";
+import "core-js/modules/es.function.name.js";
+import "core-js/modules/es.string.replace.js";
+import "core-js/modules/es.regexp.exec.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.array.join.js";
+import doctrine from 'doctrine';
+
+function containsJsDoc(value) {
+  return value != null && value.includes('@');
+}
+
+function parse(content, tags) {
+  var ast;
+
+  try {
+    ast = doctrine.parse(content, {
+      tags: tags,
+      sloppy: true
+    });
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error(e);
+    throw new Error('Cannot parse JSDoc tags.');
+  }
+
+  return ast;
+}
+
+var DEFAULT_OPTIONS = {
+  tags: ['param', 'arg', 'argument', 'returns', 'ignore']
+};
+export var parseJsDoc = function parseJsDoc(value) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_OPTIONS;
+
+  if (!containsJsDoc(value)) {
+    return {
+      includesJsDoc: false,
+      ignore: false
+    };
+  }
+
+  var jsDocAst = parse(value, options.tags);
+  var extractedTags = extractJsDocTags(jsDocAst);
+
+  if (extractedTags.ignore) {
+    // There is no point in doing other stuff since this prop will not be rendered.
+    return {
+      includesJsDoc: true,
+      ignore: true
+    };
+  }
+
+  return {
+    includesJsDoc: true,
+    ignore: false,
+    // Always use the parsed description to ensure JSDoc is removed from the description.
+    description: jsDocAst.description,
+    extractedTags: extractedTags
+  };
+};
+
+function extractJsDocTags(ast) {
+  var extractedTags = {
+    params: null,
+    returns: null,
+    ignore: false
+  };
+
+  for (var i = 0; i < ast.tags.length; i += 1) {
+    var tag = ast.tags[i];
+
+    if (tag.title === 'ignore') {
+      extractedTags.ignore = true; // Once we reach an @ignore tag, there is no point in parsing the other tags since we will not render the prop.
+
+      break;
+    } else {
+      switch (tag.title) {
+        // arg & argument are aliases for param.
+        case 'param':
+        case 'arg':
+        case 'argument':
+          {
+            var paramTag = extractParam(tag);
+
+            if (paramTag != null) {
+              if (extractedTags.params == null) {
+                extractedTags.params = [];
+              }
+
+              extractedTags.params.push(paramTag);
+            }
+
+            break;
+          }
+
+        case 'returns':
+          {
+            var returnsTag = extractReturns(tag);
+
+            if (returnsTag != null) {
+              extractedTags.returns = returnsTag;
+            }
+
+            break;
+          }
+
+        default:
+          break;
+      }
+    }
+  }
+
+  return extractedTags;
+}
+
+function extractParam(tag) {
+  var paramName = tag.name; // When the @param doesn't have a name but have a type and a description, "null-null" is returned.
+
+  if (paramName != null && paramName !== 'null-null') {
+    return {
+      name: tag.name,
+      type: tag.type,
+      description: tag.description,
+      getPrettyName: function getPrettyName() {
+        if (paramName.includes('null')) {
+          // There is a few cases in which the returned param name contains "null".
+          // - @param {SyntheticEvent} event- Original SyntheticEvent
+          // - @param {SyntheticEvent} event.\n@returns {string}
+          return paramName.replace('-null', '').replace('.null', '');
+        }
+
+        return tag.name;
+      },
+      getTypeName: function getTypeName() {
+        return tag.type != null ? extractTypeName(tag.type) : null;
+      }
+    };
+  }
+
+  return null;
+}
+
+function extractReturns(tag) {
+  if (tag.type != null) {
+    return {
+      type: tag.type,
+      description: tag.description,
+      getTypeName: function getTypeName() {
+        return extractTypeName(tag.type);
+      }
+    };
+  }
+
+  return null;
+}
+
+function extractTypeName(type) {
+  if (type.type === 'NameExpression') {
+    return type.name;
+  }
+
+  if (type.type === 'RecordType') {
+    var recordFields = type.fields.map(function (field) {
+      if (field.value != null) {
+        var valueTypeName = extractTypeName(field.value);
+        return "".concat(field.key, ": ").concat(valueTypeName);
+      }
+
+      return field.key;
+    });
+    return "({".concat(recordFields.join(', '), "})");
+  }
+
+  if (type.type === 'UnionType') {
+    var unionElements = type.elements.map(extractTypeName);
+    return "(".concat(unionElements.join('|'), ")");
+  } // Only support untyped array: []. Might add more support later if required.
+
+
+  if (type.type === 'ArrayType') {
+    return '[]';
+  }
+
+  if (type.type === 'TypeApplication') {
+    if (type.expression != null) {
+      if (type.expression.name === 'Array') {
+        var arrayType = extractTypeName(type.applications[0]);
+        return "".concat(arrayType, "[]");
+      }
+    }
+  }
+
+  if (type.type === 'NullableType' || type.type === 'NonNullableType' || type.type === 'OptionalType') {
+    return extractTypeName(type.expression);
+  }
+
+  if (type.type === 'AllLiteral') {
+    return 'any';
+  }
+
+  return null;
+}

package/dist/collection/node_modules/@storybook/addon-docs/dist/esm/lib/utils.js

@@ -0,0 +1,25 @@
+import "core-js/modules/es.string.replace.js";
+import "core-js/modules/es.regexp.exec.js";
+export var MAX_TYPE_SUMMARY_LENGTH = 90;
+export var MAX_DEFAULT_VALUE_SUMMARY_LENGTH = 50;
+export function isTooLongForTypeSummary(value) {
+  return value.length > MAX_TYPE_SUMMARY_LENGTH;
+}
+export function isTooLongForDefaultValueSummary(value) {
+  return value.length > MAX_DEFAULT_VALUE_SUMMARY_LENGTH;
+}
+export function createSummaryValue(summary, detail) {
+  if (summary === detail) {
+    return {
+      summary: summary
+    };
+  }
+
+  return {
+    summary: summary,
+    detail: detail
+  };
+}
+export var normalizeNewlines = function normalizeNewlines(string) {
+  return string.replace(/\\r\\n/g, '\\n');
+};

package/dist/collection/node_modules/@storybook/addon-docs/dist/esm/register.js

@@ -0,0 +1,21 @@
+import "core-js/modules/es.array.concat.js";
+import { addons, types } from '@storybook/addons';
+import { ADDON_ID, PANEL_ID } from './shared';
+addons.register(ADDON_ID, function () {
+  addons.add(PANEL_ID, {
+    type: types.TAB,
+    title: 'Docs',
+    route: function route(_ref) {
+      var storyId = _ref.storyId,
+          refId = _ref.refId;
+      return refId ? "/docs/".concat(refId, "_").concat(storyId) : "/docs/".concat(storyId);
+    },
+    match: function match(_ref2) {
+      var viewMode = _ref2.viewMode;
+      return viewMode === 'docs';
+    },
+    render: function render() {
+      return null;
+    }
+  });
+});

package/dist/collection/node_modules/@storybook/addon-docs/dist/esm/shared.js

@@ -0,0 +1,11 @@
+export var ADDON_ID = 'storybook/docs';
+export var PANEL_ID = "".concat(ADDON_ID, "/panel");
+export var PARAM_KEY = "docs";
+export var SNIPPET_RENDERED = "".concat(ADDON_ID, "/snippet-rendered");
+export var SourceType;
+
+(function (SourceType) {
+  SourceType["AUTO"] = "auto";
+  SourceType["CODE"] = "code";
+  SourceType["DYNAMIC"] = "dynamic";
+})(SourceType || (SourceType = {}));

package/dist/collection/node_modules/@storybook/addon-docs/dist/modern/blocks/Anchor.js

@@ -0,0 +1,8 @@
+import React from 'react';
+export const anchorBlockIdFromId = storyId => `anchor--${storyId}`;
+export const Anchor = ({
+  storyId,
+  children
+}) => /*#__PURE__*/React.createElement("div", {
+  id: anchorBlockIdFromId(storyId)
+}, children);

package/dist/collection/node_modules/@storybook/addon-docs/dist/modern/blocks/ArgsTable.js

@@ -0,0 +1,271 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import React, { useContext, useEffect, useState, useCallback } from 'react';
+import mapValues from 'lodash/mapValues';
+import { ArgsTable as PureArgsTable, ArgsTableError, TabbedArgsTable } from '@storybook/components';
+import { addons } from '@storybook/addons';
+import { filterArgTypes } from '@storybook/store';
+import Events from '@storybook/core-events';
+import { DocsContext } from './DocsContext';
+import { CURRENT_SELECTION, PRIMARY_STORY } from './types';
+import { getComponentName } from './utils';
+import { lookupStoryId } from './Story';
+import { useStory } from './useStory';
+
+const useArgs = (storyId, context) => {
+  const channel = addons.getChannel();
+  const story = context.storyById(storyId);
+
+  if (!story) {
+    throw new Error(`Unknown story: ${storyId}`);
+  }
+
+  const storyContext = context.getStoryContext(story);
+  const [args, setArgs] = useState(storyContext.args);
+  useEffect(() => {
+    const cb = changed => {
+      if (changed.storyId === storyId) {
+        setArgs(changed.args);
+      }
+    };
+
+    channel.on(Events.STORY_ARGS_UPDATED, cb);
+    return () => channel.off(Events.STORY_ARGS_UPDATED, cb);
+  }, [storyId]);
+  const updateArgs = useCallback(updatedArgs => channel.emit(Events.UPDATE_STORY_ARGS, {
+    storyId,
+    updatedArgs
+  }), [storyId]);
+  const resetArgs = useCallback(argNames => channel.emit(Events.RESET_STORY_ARGS, {
+    storyId,
+    argNames
+  }), [storyId]);
+  return [args, updateArgs, resetArgs];
+};
+
+export const extractComponentArgTypes = (component, {
+  id,
+  storyById
+}, include, exclude) => {
+  const {
+    parameters
+  } = storyById(id);
+  const {
+    extractArgTypes
+  } = parameters.docs || {};
+
+  if (!extractArgTypes) {
+    throw new Error(ArgsTableError.ARGS_UNSUPPORTED);
+  }
+
+  let argTypes = extractArgTypes(component);
+  argTypes = filterArgTypes(argTypes, include, exclude);
+  return argTypes;
+};
+
+const isShortcut = value => {
+  return value && [CURRENT_SELECTION, PRIMARY_STORY].includes(value);
+};
+
+export const getComponent = (props = {}, {
+  id,
+  storyById
+}) => {
+  const {
+    of
+  } = props;
+  const {
+    story
+  } = props;
+  const {
+    component
+  } = storyById(id);
+
+  if (isShortcut(of) || isShortcut(story)) {
+    return component || null;
+  }
+
+  if (!of) {
+    throw new Error(ArgsTableError.NO_COMPONENT);
+  }
+
+  return of;
+};
+
+const addComponentTabs = (tabs, components, context, include, exclude, sort) => Object.assign({}, tabs, mapValues(components, comp => ({
+  rows: extractComponentArgTypes(comp, context, include, exclude),
+  sort
+})));
+
+export const StoryTable = props => {
+  const context = useContext(DocsContext);
+  const {
+    id: currentId,
+    componentStories
+  } = context;
+  const {
+    story: storyName,
+    component,
+    subcomponents,
+    showComponent,
+    include,
+    exclude,
+    sort
+  } = props;
+
+  try {
+    let storyId;
+
+    switch (storyName) {
+      case CURRENT_SELECTION:
+        {
+          storyId = currentId;
+          break;
+        }
+
+      case PRIMARY_STORY:
+        {
+          const primaryStory = componentStories()[0];
+          storyId = primaryStory.id;
+          break;
+        }
+
+      default:
+        {
+          storyId = lookupStoryId(storyName, context);
+        }
+    }
+
+    const story = useStory(storyId, context); // eslint-disable-next-line prefer-const
+
+    let [args, updateArgs, resetArgs] = useArgs(storyId, context);
+    if (!story) return /*#__PURE__*/React.createElement(PureArgsTable, {
+      isLoading: true,
+      updateArgs: updateArgs,
+      resetArgs: resetArgs
+    });
+    const argTypes = filterArgTypes(story.argTypes, include, exclude);
+    const mainLabel = getComponentName(component) || 'Story';
+    let tabs = {
+      [mainLabel]: {
+        rows: argTypes,
+        args,
+        updateArgs,
+        resetArgs
+      }
+    }; // Use the dynamically generated component tabs if there are no controls
+
+    const storyHasArgsWithControls = argTypes && Object.values(argTypes).find(v => !!(v !== null && v !== void 0 && v.control));
+
+    if (!storyHasArgsWithControls) {
+      updateArgs = null;
+      resetArgs = null;
+      tabs = {};
+    }
+
+    if (component && (!storyHasArgsWithControls || showComponent)) {
+      tabs = addComponentTabs(tabs, {
+        [mainLabel]: component
+      }, context, include, exclude);
+    }
+
+    if (subcomponents) {
+      if (Array.isArray(subcomponents)) {
+        throw new Error(`Unexpected subcomponents array. Expected an object whose keys are tab labels and whose values are components.`);
+      }
+
+      tabs = addComponentTabs(tabs, subcomponents, context, include, exclude);
+    }
+
+    return /*#__PURE__*/React.createElement(TabbedArgsTable, {
+      tabs: tabs,
+      sort: sort
+    });
+  } catch (err) {
+    return /*#__PURE__*/React.createElement(PureArgsTable, {
+      error: err.message
+    });
+  }
+};
+export const ComponentsTable = props => {
+  const context = useContext(DocsContext);
+  const {
+    components,
+    include,
+    exclude,
+    sort
+  } = props;
+  const tabs = addComponentTabs({}, components, context, include, exclude);
+  return /*#__PURE__*/React.createElement(TabbedArgsTable, {
+    tabs: tabs,
+    sort: sort
+  });
+};
+export const ArgsTable = props => {
+  const context = useContext(DocsContext);
+  const {
+    id,
+    storyById
+  } = context;
+  const {
+    parameters: {
+      controls
+    },
+    subcomponents
+  } = storyById(id);
+  const {
+    include,
+    exclude,
+    components,
+    sort: sortProp
+  } = props;
+  const {
+    story: storyName
+  } = props;
+  const sort = sortProp || (controls === null || controls === void 0 ? void 0 : controls.sort);
+  const main = getComponent(props, context);
+
+  if (storyName) {
+    return /*#__PURE__*/React.createElement(StoryTable, _extends({}, props, {
+      component: main,
+      subcomponents,
+      sort
+    }));
+  }
+
+  if (!components && !subcomponents) {
+    let mainProps;
+
+    try {
+      mainProps = {
+        rows: extractComponentArgTypes(main, context, include, exclude)
+      };
+    } catch (err) {
+      mainProps = {
+        error: err.message
+      };
+    }
+
+    return /*#__PURE__*/React.createElement(PureArgsTable, _extends({}, mainProps, {
+      sort: sort
+    }));
+  }
+
+  if (components) {
+    return /*#__PURE__*/React.createElement(ComponentsTable, _extends({}, props, {
+      components,
+      sort
+    }));
+  }
+
+  const mainLabel = getComponentName(main);
+  return /*#__PURE__*/React.createElement(ComponentsTable, _extends({}, props, {
+    components: Object.assign({
+      [mainLabel]: main
+    }, subcomponents),
+    sort: sort
+  }));
+};
+ArgsTable.defaultProps = {
+  of: CURRENT_SELECTION
+};

package/dist/collection/node_modules/@storybook/addon-docs/dist/modern/blocks/Canvas.js

@@ -0,0 +1,79 @@
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React, { useContext } from 'react';
+import { MDXProvider } from '@mdx-js/react';
+import { toId, storyNameFromExport } from '@storybook/csf';
+import { resetComponents, Preview as PurePreview, PreviewSkeleton } from '@storybook/components';
+import { DocsContext } from './DocsContext';
+import { SourceContext } from './SourceContainer';
+import { getSourceProps, SourceState } from './Source';
+import { useStories } from './useStory';
+export { SourceState };
+
+const getPreviewProps = (_ref, docsContext, sourceContext) => {
+  let {
+    withSource,
+    mdxSource,
+    children
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, ["withSource", "mdxSource", "children"]);
+
+  const {
+    mdxComponentAnnotations,
+    mdxStoryNameToKey
+  } = docsContext;
+  let sourceState = withSource;
+  let isLoading = false;
+
+  if (sourceState === SourceState.NONE) {
+    return {
+      isLoading,
+      previewProps: props
+    };
+  }
+
+  if (mdxSource) {
+    return {
+      isLoading,
+      previewProps: Object.assign({}, props, {
+        withSource: getSourceProps({
+          code: decodeURI(mdxSource)
+        }, docsContext, sourceContext)
+      })
+    };
+  }
+
+  const childArray = Array.isArray(children) ? children : [children];
+  const storyChildren = childArray.filter(c => c.props && (c.props.id || c.props.name));
+  const targetIds = storyChildren.map(s => s.props.id || toId(mdxComponentAnnotations.id || mdxComponentAnnotations.title, storyNameFromExport(mdxStoryNameToKey[s.props.name])));
+  const sourceProps = getSourceProps({
+    ids: targetIds
+  }, docsContext, sourceContext);
+  if (!sourceState) sourceState = sourceProps.state;
+  const stories = useStories(targetIds, docsContext);
+  isLoading = stories.some(s => !s);
+  return {
+    isLoading,
+    previewProps: Object.assign({}, props, {
+      // pass through columns etc.
+      withSource: sourceProps,
+      isExpanded: sourceState === SourceState.OPEN
+    })
+  };
+};
+
+export const Canvas = props => {
+  const docsContext = useContext(DocsContext);
+  const sourceContext = useContext(SourceContext);
+  const {
+    isLoading,
+    previewProps
+  } = getPreviewProps(props, docsContext, sourceContext);
+  const {
+    children
+  } = props;
+  if (isLoading) return /*#__PURE__*/React.createElement(PreviewSkeleton, null);
+  return /*#__PURE__*/React.createElement(MDXProvider, {
+    components: resetComponents
+  }, /*#__PURE__*/React.createElement(PurePreview, previewProps, children));
+};