@utrecht/web-component-library-stencil 1.0.0-alpha.16 → 1.0.0-alpha.160

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

@@ -0,0 +1,261 @@
+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); }
+
+/* eslint-disable no-underscore-dangle */
+import React, { useContext, useEffect, useState, useCallback } from 'react';
+import mapValues from 'lodash/mapValues';
+import { ArgsTable as PureArgsTable, ArgsTableError, TabbedArgsTable } from '@storybook/components';
+import { filterArgTypes } from '@storybook/client-api';
+import Events from '@storybook/core-events';
+import { DocsContext } from './DocsContext';
+import { CURRENT_SELECTION, PRIMARY_STORY } from './types';
+import { getComponentName, getDocsStories } from './utils';
+import { lookupStoryId } from './Story';
+
+const useArgs = (storyId, storyStore) => {
+  const story = storyStore.fromId(storyId);
+
+  if (!story) {
+    throw new Error(`Unknown story: ${storyId}`);
+  }
+
+  const {
+    args: initialArgs
+  } = story;
+  const [args, setArgs] = useState(initialArgs);
+  useEffect(() => {
+    const cb = changed => {
+      if (changed.storyId === storyId) {
+        setArgs(changed.args);
+      }
+    };
+
+    storyStore._channel.on(Events.STORY_ARGS_UPDATED, cb);
+
+    return () => storyStore._channel.off(Events.STORY_ARGS_UPDATED, cb);
+  }, [storyId]);
+  const updateArgs = useCallback(newArgs => storyStore.updateStoryArgs(storyId, newArgs), [storyId]);
+  const resetArgs = useCallback(argNames => storyStore.resetStoryArgs(storyId, argNames), [storyId]);
+  return [args, updateArgs, resetArgs];
+};
+
+export const extractComponentArgTypes = (component, {
+  parameters
+}, include, exclude) => {
+  const params = parameters || {};
+  const {
+    extractArgTypes
+  } = params.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 = {}, context) => {
+  const {
+    of
+  } = props;
+  const {
+    story
+  } = props;
+  const {
+    parameters = {}
+  } = context;
+  const {
+    component
+  } = parameters;
+
+  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,
+    parameters: {
+      argTypes
+    },
+    storyStore
+  } = context;
+  const {
+    story,
+    component,
+    subcomponents,
+    showComponent,
+    include,
+    exclude,
+    sort
+  } = props;
+  let storyArgTypes;
+
+  try {
+    let storyId;
+
+    switch (story) {
+      case CURRENT_SELECTION:
+        {
+          storyId = currentId;
+          storyArgTypes = argTypes;
+          break;
+        }
+
+      case PRIMARY_STORY:
+        {
+          const primaryStory = getDocsStories(context)[0];
+          storyId = primaryStory.id;
+          storyArgTypes = primaryStory.parameters.argTypes;
+          break;
+        }
+
+      default:
+        {
+          storyId = lookupStoryId(story, context);
+          const data = storyStore.fromId(storyId);
+          storyArgTypes = data.parameters.argTypes;
+        }
+    }
+
+    storyArgTypes = filterArgTypes(storyArgTypes, include, exclude);
+    const mainLabel = getComponentName(component) || 'Story'; // eslint-disable-next-line prefer-const
+
+    let [args, updateArgs, resetArgs] = useArgs(storyId, storyStore);
+    let tabs = {
+      [mainLabel]: {
+        rows: storyArgTypes,
+        args,
+        updateArgs,
+        resetArgs
+      }
+    }; // Use the dynamically generated component tabs if there are no controls
+
+    const storyHasArgsWithControls = storyArgTypes && Object.values(storyArgTypes).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 {
+    parameters: {
+      subcomponents,
+      controls
+    } = {}
+  } = context;
+  const {
+    include,
+    exclude,
+    components,
+    sort: sortProp
+  } = props;
+  const {
+    story
+  } = props;
+  const sort = sortProp || (controls === null || controls === void 0 ? void 0 : controls.sort);
+  const main = getComponent(props, context);
+
+  if (story) {
+    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,62 @@
+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 } from '@storybook/components';
+import { DocsContext } from './DocsContext';
+import { SourceContext } from './SourceContainer';
+import { getSourceProps, SourceState } from './Source';
+export { SourceState };
+
+const getPreviewProps = (_ref, docsContext, sourceContext) => {
+  let {
+    withSource,
+    mdxSource,
+    children
+  } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, ["withSource", "mdxSource", "children"]);
+
+  const {
+    mdxComponentMeta,
+    mdxStoryNameToKey
+  } = docsContext;
+  let sourceState = withSource;
+
+  if (sourceState === SourceState.NONE) {
+    return props;
+  }
+
+  if (mdxSource) {
+    return Object.assign({}, props, {
+      withSource: getSourceProps({
+        code: decodeURI(mdxSource)
+      }, docsContext, sourceContext)
+    });
+  }
+
+  const childArray = Array.isArray(children) ? children : [children];
+  const stories = childArray.filter(c => c.props && (c.props.id || c.props.name));
+  const targetIds = stories.map(s => s.props.id || toId(mdxComponentMeta.id || mdxComponentMeta.title, storyNameFromExport(mdxStoryNameToKey[s.props.name])));
+  const sourceProps = getSourceProps({
+    ids: targetIds
+  }, docsContext, sourceContext);
+  if (!sourceState) sourceState = sourceProps.state;
+  return 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 previewProps = getPreviewProps(props, docsContext, sourceContext);
+  const {
+    children
+  } = props;
+  return /*#__PURE__*/React.createElement(MDXProvider, {
+    components: resetComponents
+  }, /*#__PURE__*/React.createElement(PurePreview, previewProps, children));
+};

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

@@ -0,0 +1,100 @@
+import React, { useContext } from 'react';
+import { Description } from '@storybook/components';
+import { DocsContext } from './DocsContext';
+import { CURRENT_SELECTION } from './types';
+import { str } from '../lib/docgen';
+export let DescriptionType;
+
+(function (DescriptionType) {
+  DescriptionType["INFO"] = "info";
+  DescriptionType["NOTES"] = "notes";
+  DescriptionType["DOCGEN"] = "docgen";
+  DescriptionType["LEGACY_5_2"] = "legacy-5.2";
+  DescriptionType["AUTO"] = "auto";
+})(DescriptionType || (DescriptionType = {}));
+
+const getNotes = notes => notes && (typeof notes === 'string' ? notes : str(notes.markdown) || str(notes.text));
+
+const getInfo = info => info && (typeof info === 'string' ? info : str(info.text));
+
+const noDescription = component => null;
+
+export const getDescriptionProps = ({
+  of,
+  type,
+  markdown,
+  children
+}, {
+  parameters
+}) => {
+  if (children || markdown) {
+    return {
+      markdown: children || markdown
+    };
+  }
+
+  const {
+    component,
+    notes,
+    info,
+    docs
+  } = parameters;
+  const {
+    extractComponentDescription = noDescription,
+    description
+  } = docs || {};
+  const target = of === CURRENT_SELECTION ? component : of; // override component description
+
+  const componentDescriptionParameter = description === null || description === void 0 ? void 0 : description.component;
+
+  if (componentDescriptionParameter) {
+    return {
+      markdown: componentDescriptionParameter
+    };
+  }
+
+  switch (type) {
+    case DescriptionType.INFO:
+      return {
+        markdown: getInfo(info)
+      };
+
+    case DescriptionType.NOTES:
+      return {
+        markdown: getNotes(notes)
+      };
+    // FIXME: remove in 6.0
+
+    case DescriptionType.LEGACY_5_2:
+      return {
+        markdown: `
+${getNotes(notes) || getInfo(info) || ''}
+
+${extractComponentDescription(target) || ''}
+`.trim()
+      };
+
+    case DescriptionType.DOCGEN:
+    case DescriptionType.AUTO:
+    default:
+      return {
+        markdown: extractComponentDescription(target, parameters)
+      };
+  }
+};
+
+const DescriptionContainer = props => {
+  const context = useContext(DocsContext);
+  const {
+    markdown
+  } = getDescriptionProps(props, context);
+  return markdown ? /*#__PURE__*/React.createElement(Description, {
+    markdown: markdown
+  }) : null;
+}; // since we are in the docs blocks, assume default description if for primary component story
+
+
+DescriptionContainer.defaultProps = {
+  of: '.'
+};
+export { DescriptionContainer as Description };

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

@@ -0,0 +1,96 @@
+import React, { useEffect } from 'react';
+import global from 'global';
+import deprecate from 'util-deprecate';
+import dedent from 'ts-dedent';
+import { MDXProvider } from '@mdx-js/react';
+import { ThemeProvider, ensure as ensureTheme } from '@storybook/theming';
+import { DocsWrapper, DocsContent, components as htmlComponents } from '@storybook/components';
+import { DocsContext } from './DocsContext';
+import { anchorBlockIdFromId } from './Anchor';
+import { storyBlockIdFromId } from './Story';
+import { SourceContainer } from './SourceContainer';
+import { CodeOrSourceMdx, AnchorMdx, HeadersMdx } from './mdx';
+import { scrollToElement } from './utils';
+const {
+  document,
+  window: globalWindow
+} = global;
+const defaultComponents = Object.assign({}, htmlComponents, {
+  code: CodeOrSourceMdx,
+  a: AnchorMdx
+}, HeadersMdx);
+const warnOptionsTheme = deprecate(() => {}, dedent`
+    Deprecated parameter: options.theme => docs.theme
+
+    https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/theming.md#storybook-theming
+`);
+export const DocsContainer = ({
+  context,
+  children
+}) => {
+  const {
+    id: storyId = null,
+    parameters = {}
+  } = context || {};
+  const {
+    options = {},
+    docs = {}
+  } = parameters;
+  let themeVars = docs.theme;
+
+  if (!themeVars && options.theme) {
+    warnOptionsTheme();
+    themeVars = options.theme;
+  }
+
+  const theme = ensureTheme(themeVars);
+  const allComponents = Object.assign({}, defaultComponents, docs.components);
+  useEffect(() => {
+    let url;
+
+    try {
+      url = new URL(globalWindow.parent.location);
+    } catch (err) {
+      return;
+    }
+
+    if (url.hash) {
+      const element = document.getElementById(url.hash.substring(1));
+
+      if (element) {
+        // Introducing a delay to ensure scrolling works when it's a full refresh.
+        setTimeout(() => {
+          scrollToElement(element);
+        }, 200);
+      }
+    } else {
+      const element = document.getElementById(anchorBlockIdFromId(storyId)) || document.getElementById(storyBlockIdFromId(storyId));
+
+      if (element) {
+        const allStories = element.parentElement.querySelectorAll('[id|="anchor-"]');
+        let scrollTarget = element;
+
+        if (allStories && allStories[0] === element) {
+          // Include content above first story
+          scrollTarget = document.getElementById('docs-root');
+        } // Introducing a delay to ensure scrolling works when it's a full refresh.
+
+
+        setTimeout(() => {
+          scrollToElement(scrollTarget, 'start');
+        }, 200);
+      }
+    }
+  }, [storyId]);
+  return /*#__PURE__*/React.createElement(DocsContext.Provider, {
+    value: context
+  }, /*#__PURE__*/React.createElement(SourceContainer, null, /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: theme
+  }, /*#__PURE__*/React.createElement(MDXProvider, {
+    components: allComponents
+  }, /*#__PURE__*/React.createElement(DocsWrapper, {
+    className: "sbdocs sbdocs-wrapper"
+  }, /*#__PURE__*/React.createElement(DocsContent, {
+    className: "sbdocs sbdocs-content"
+  }, children))))));
+};

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

@@ -0,0 +1,16 @@
+import { createContext } from 'react';
+import { window as globalWindow } from 'global';
+
+// We add DocsContext to window. The reason is that in case DocsContext.ts is
+// imported multiple times (maybe once directly, and another time from a minified bundle)
+// we will have multiple DocsContext definitions - leading to lost context in
+// the React component tree.
+// This was specifically a problem with the Vite builder.
+
+/* eslint-disable no-underscore-dangle */
+if (globalWindow.__DOCS_CONTEXT__ === undefined) {
+  globalWindow.__DOCS_CONTEXT__ = /*#__PURE__*/createContext({});
+  globalWindow.__DOCS_CONTEXT__.displayName = 'DocsContext';
+}
+
+export const DocsContext = globalWindow.__DOCS_CONTEXT__;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Title } from './Title';
+import { Subtitle } from './Subtitle';
+import { Description } from './Description';
+import { Primary } from './Primary';
+import { PRIMARY_STORY } from './types';
+import { ArgsTable } from './ArgsTable';
+import { Stories } from './Stories';
+export const DocsPage = () => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Title, null), /*#__PURE__*/React.createElement(Subtitle, null), /*#__PURE__*/React.createElement(Description, null), /*#__PURE__*/React.createElement(Primary, null), /*#__PURE__*/React.createElement(ArgsTable, {
+  story: PRIMARY_STORY
+}), /*#__PURE__*/React.createElement(Stories, null));

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import deprecate from 'util-deprecate';
+import dedent from 'ts-dedent';
+import { Subheading } from './Subheading';
+import { Anchor } from './Anchor';
+import { Description } from './Description';
+import { Story } from './Story';
+import { Canvas } from './Canvas';
+const warnStoryDescription = deprecate(() => {}, dedent`
+    Deprecated parameter: docs.storyDescription => docs.description.story
+      
+    https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#docs-description-parameter
+  `);
+export const DocsStory = ({
+  id,
+  name,
+  expanded = true,
+  withToolbar = false,
+  parameters = {}
+}) => {
+  let description;
+  const {
+    docs
+  } = parameters;
+
+  if (expanded && docs) {
+    var _docs$description;
+
+    description = (_docs$description = docs.description) === null || _docs$description === void 0 ? void 0 : _docs$description.story;
+
+    if (!description) {
+      description = docs.storyDescription;
+      if (description) warnStoryDescription();
+    }
+  }
+
+  const subheading = expanded && name;
+  return /*#__PURE__*/React.createElement(Anchor, {
+    storyId: id
+  }, subheading && /*#__PURE__*/React.createElement(Subheading, null, subheading), description && /*#__PURE__*/React.createElement(Description, {
+    markdown: description
+  }), /*#__PURE__*/React.createElement(Canvas, {
+    withToolbar: withToolbar
+  }, /*#__PURE__*/React.createElement(Story, {
+    id: id
+  })));
+};

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { H2 } from '@storybook/components';
+import { HeaderMdx } from './mdx';
+export const Heading = ({
+  children,
+  disableAnchor
+}) => {
+  if (disableAnchor || typeof children !== 'string') {
+    return /*#__PURE__*/React.createElement(H2, null, children);
+  }
+
+  const tagID = children.toLowerCase().replace(/[^a-z0-9]/gi, '-');
+  return /*#__PURE__*/React.createElement(HeaderMdx, {
+    as: "h2",
+    id: tagID
+  }, children);
+};

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

@@ -0,0 +1,32 @@
+import React, { useContext } from 'react';
+import global from 'global';
+import { Anchor } from './Anchor';
+import { DocsContext } from './DocsContext';
+import { getDocsStories } from './utils';
+const {
+  document
+} = global;
+
+function getFirstStoryId(docsContext) {
+  const stories = getDocsStories(docsContext);
+  return stories.length > 0 ? stories[0].id : null;
+}
+
+function renderAnchor() {
+  const context = useContext(DocsContext);
+  const anchorId = getFirstStoryId(context) || context.id;
+  return /*#__PURE__*/React.createElement(Anchor, {
+    storyId: anchorId
+  });
+}
+/**
+ * This component is used to declare component metadata in docs
+ * and gets transformed into a default export underneath the hood.
+ */
+
+
+export const Meta = () => {
+  const params = new URL(document.location).searchParams;
+  const isDocs = params.get('viewMode') === 'docs';
+  return isDocs ? renderAnchor() : null;
+};

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import deprecate from 'util-deprecate';
+import dedent from 'ts-dedent';
+import { Canvas } from './Canvas';
+export const Preview = deprecate(props => /*#__PURE__*/React.createElement(Canvas, props), dedent`
+    Preview doc block has been renamed to Canvas.
+
+    https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#previewprops-renamed
+  `);

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

@@ -0,0 +1,22 @@
+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 } from 'react';
+import { DocsContext } from './DocsContext';
+import { DocsStory } from './DocsStory';
+import { getDocsStories } from './utils';
+export const Primary = ({
+  name
+}) => {
+  const context = useContext(DocsContext);
+  const componentStories = getDocsStories(context);
+  let story;
+
+  if (componentStories) {
+    story = name ? componentStories.find(s => s.name === name) : componentStories[0];
+  }
+
+  return story ? /*#__PURE__*/React.createElement(DocsStory, _extends({}, story, {
+    expanded: false,
+    withToolbar: true
+  })) : null;
+};

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import deprecate from 'util-deprecate';
+import dedent from 'ts-dedent';
+import { ArgsTable } from './ArgsTable';
+import { CURRENT_SELECTION } from './types';
+export const Props = deprecate(props => /*#__PURE__*/React.createElement(ArgsTable, props), dedent`
+    Props doc block has been renamed to ArgsTable.
+
+    https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#previewprops-renamed
+  `); // @ts-ignore
+
+Props.defaultProps = {
+  of: CURRENT_SELECTION
+};