@utrecht/web-component-library-stencil 1.0.0-alpha.162 → 1.0.0-alpha.166

package/dist/collection/node_modules/@storybook/ui/dist/modern/components/preview/preview.js

@@ -1,229 +0,0 @@
-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, { Fragment, useMemo, useEffect, useRef } from 'react';
-import { Helmet } from 'react-helmet-async';
-import { Consumer, merge } from '@storybook/api';
-import { SET_CURRENT_STORY } from '@storybook/core-events';
-import { addons, types } from '@storybook/addons';
-import { Loader } from '@storybook/components';
-import { Location } from '@storybook/router';
-import * as S from './utils/components';
-import { ZoomProvider, ZoomConsumer } from './tools/zoom';
-import { defaultWrappers, ApplyWrappers } from './wrappers';
-import { ToolbarComp } from './toolbar';
-import { FramesRenderer } from './FramesRenderer';
-
-const getWrappers = getFn => Object.values(getFn(types.PREVIEW));
-
-const getTabs = getFn => Object.values(getFn(types.TAB));
-
-const canvasMapper = ({
-  state,
-  api
-}) => ({
-  storyId: state.storyId,
-  refId: state.refId,
-  viewMode: state.viewMode,
-  customCanvas: api.renderPreview,
-  queryParams: state.customQueryParams,
-  getElements: api.getElements,
-  story: api.getData(state.storyId, state.refId),
-  storiesConfigured: state.storiesConfigured,
-  storiesFailed: state.storiesFailed,
-  refs: state.refs,
-  active: !!(state.viewMode && state.viewMode.match(/^(story|docs)$/))
-});
-
-const createCanvas = (id, baseUrl = 'iframe.html', withLoader = true) => ({
-  id: 'canvas',
-  title: 'Canvas',
-  route: ({
-    storyId,
-    refId
-  }) => refId ? `/story/${refId}_${storyId}` : `/story/${storyId}`,
-  match: ({
-    viewMode
-  }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
-  render: () => {
-    return /*#__PURE__*/React.createElement(Consumer, {
-      filter: canvasMapper
-    }, ({
-      story,
-      refs,
-      customCanvas,
-      storyId,
-      refId,
-      viewMode,
-      queryParams,
-      getElements,
-      storiesConfigured,
-      storiesFailed,
-      active
-    }) => {
-      const wrappers = useMemo(() => [...defaultWrappers, ...getWrappers(getElements)], [getElements, ...defaultWrappers]);
-      const isLoading = story ? !!refs[refId] && !refs[refId].ready : !storiesFailed && !storiesConfigured;
-      return /*#__PURE__*/React.createElement(ZoomConsumer, null, ({
-        value: scale
-      }) => {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, withLoader && isLoading && /*#__PURE__*/React.createElement(S.LoaderWrapper, null, /*#__PURE__*/React.createElement(Loader, {
-          id: "preview-loader",
-          role: "progressbar"
-        })), /*#__PURE__*/React.createElement(ApplyWrappers, {
-          id: id,
-          storyId: storyId,
-          viewMode: viewMode,
-          active: active,
-          wrappers: wrappers
-        }, customCanvas ? customCanvas(storyId, viewMode, id, baseUrl, scale, queryParams) : /*#__PURE__*/React.createElement(FramesRenderer, {
-          baseUrl: baseUrl,
-          refs: refs,
-          scale: scale,
-          story: story,
-          viewMode: viewMode,
-          refId: refId,
-          queryParams: queryParams,
-          storyId: storyId
-        })));
-      });
-    });
-  }
-});
-
-const useTabs = (id, baseUrl, withLoader, getElements, story) => {
-  const canvas = useMemo(() => {
-    return createCanvas(id, baseUrl, withLoader);
-  }, [id, baseUrl, withLoader]);
-  const tabsFromConfig = useMemo(() => {
-    return getTabs(getElements);
-  }, [getElements]);
-  return useMemo(() => {
-    if (story !== null && story !== void 0 && story.parameters) {
-      return filterTabs([canvas, ...tabsFromConfig], story.parameters);
-    }
-
-    return [canvas, ...tabsFromConfig];
-  }, [story, canvas, ...tabsFromConfig]);
-};
-
-const Preview = /*#__PURE__*/React.memo(props => {
-  const {
-    api,
-    id: previewId,
-    options,
-    viewMode,
-    storyId,
-    story = undefined,
-    description,
-    baseUrl,
-    withLoader = true
-  } = props;
-  const {
-    getElements
-  } = api;
-  const tabs = useTabs(previewId, baseUrl, withLoader, getElements, story);
-  const shouldScale = viewMode === 'story';
-  const {
-    isToolshown
-  } = options;
-  const previousStoryId = useRef(storyId);
-  const previousViewMode = useRef(viewMode);
-  useEffect(() => {
-    if (story && viewMode) {
-      // Don't emit the event on first ("real") render, only when story or mode changes
-      if (storyId !== previousStoryId.current || viewMode !== previousViewMode.current) {
-        previousStoryId.current = storyId;
-        previousViewMode.current = viewMode;
-
-        if (viewMode.match(/docs|story/)) {
-          const {
-            refId,
-            id
-          } = story;
-          api.emit(SET_CURRENT_STORY, {
-            storyId: id,
-            viewMode,
-            options: {
-              target: refId ? `storybook-ref-${refId}` : 'storybook-preview-iframe'
-            }
-          });
-        }
-      }
-    }
-  }, [story, viewMode]);
-  return /*#__PURE__*/React.createElement(Fragment, null, previewId === 'main' && /*#__PURE__*/React.createElement(Helmet, {
-    key: "description"
-  }, /*#__PURE__*/React.createElement("title", null, description)), /*#__PURE__*/React.createElement(ZoomProvider, {
-    shouldScale: shouldScale
-  }, /*#__PURE__*/React.createElement(ToolbarComp, {
-    key: "tools",
-    story: story,
-    api: api,
-    isShown: isToolshown,
-    tabs: tabs
-  }), /*#__PURE__*/React.createElement(S.FrameWrap, {
-    key: "frame",
-    offset: isToolshown ? 40 : 0
-  }, tabs.map((_ref, i) => {
-    let {
-      render: Render,
-      match
-    } = _ref,
-        t = _objectWithoutPropertiesLoose(_ref, ["render", "match"]);
-
-    // @ts-ignore
-    const key = t.id || t.key || i;
-    return /*#__PURE__*/React.createElement(Fragment, {
-      key: key
-    }, /*#__PURE__*/React.createElement(Location, null, lp => /*#__PURE__*/React.createElement(Render, {
-      active: match(lp)
-    })));
-  }))));
-});
-export { Preview };
-
-function filterTabs(panels, parameters) {
-  const {
-    previewTabs
-  } = addons.getConfig();
-  const parametersTabs = parameters ? parameters.previewTabs : undefined;
-
-  if (previewTabs || parametersTabs) {
-    // deep merge global and local settings
-    const tabs = merge(previewTabs, parametersTabs);
-    const arrTabs = Object.keys(tabs).map((key, index) => Object.assign({
-      index
-    }, typeof tabs[key] === 'string' ? {
-      title: tabs[key]
-    } : tabs[key], {
-      id: key
-    }));
-    return panels.filter(panel => {
-      const t = arrTabs.find(tab => tab.id === panel.id);
-      return t === undefined || t.id === 'canvas' || !t.hidden;
-    }).map((panel, index) => Object.assign({}, panel, {
-      index
-    })).sort((p1, p2) => {
-      const tab_1 = arrTabs.find(tab => tab.id === p1.id); // @ts-ignore
-
-      const index_1 = tab_1 ? tab_1.index : arrTabs.length + p1.index;
-      const tab_2 = arrTabs.find(tab => tab.id === p2.id); // @ts-ignore
-
-      const index_2 = tab_2 ? tab_2.index : arrTabs.length + p2.index;
-      return index_1 - index_2;
-    }).map(panel => {
-      const t = arrTabs.find(tab => tab.id === panel.id);
-
-      if (t) {
-        return Object.assign({}, panel, {
-          title: t.title || panel.title,
-          disabled: t.disabled,
-          hidden: t.hidden
-        });
-      }
-
-      return panel;
-    });
-  }
-
-  return panels;
-}

package/dist/collection/node_modules/@storybook/ui/dist/modern/components/preview/preview.mockdata.js

@@ -1,51 +0,0 @@
-import { types } from '@storybook/addons';
-export const previewProps = {
-  id: 'string',
-  api: {
-    on: () => {},
-    emit: () => {},
-    off: () => {},
-    getElements: type => type === types.TAB ? [{
-      id: 'notes',
-      type: types.TAB,
-      title: 'Notes',
-      route: ({
-        storyId
-      }) => `/info/${storyId}`,
-      match: ({
-        viewMode
-      }) => viewMode === 'info',
-      render: () => null
-    }] : []
-  },
-  story: {
-    id: 'story--id',
-    depth: 1,
-    isComponent: false,
-    isLeaf: true,
-    isRoot: false,
-    kind: 'kind',
-    name: 'story name',
-    parent: 'root',
-    children: [],
-    parameters: {
-      fileName: '',
-      options: {},
-      docsOnly: false
-    },
-    args: {}
-  },
-  path: 'string',
-  viewMode: 'story',
-  location: {},
-  baseUrl: 'http://example.com',
-  queryParams: {},
-  options: {
-    isFullscreen: false,
-    isToolshown: true
-  },
-  withLoader: false,
-  docsOnly: false,
-  description: '',
-  refs: {}
-};

package/dist/collection/node_modules/@storybook/ui/dist/modern/components/preview/preview.stories.js

@@ -1,110 +0,0 @@
-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 from 'react';
-import { Provider as ManagerProvider, Consumer } from '@storybook/api';
-import { createMemorySource, createHistory } from '@reach/router';
-import { Location, LocationProvider } from '@storybook/router';
-import { ThemeProvider, ensure as ensureTheme, themes } from '@storybook/theming';
-import { Preview } from './preview';
-import { PrettyFakeProvider } from '../../FakeProvider';
-import { previewProps } from './preview.mockdata';
-const provider = new PrettyFakeProvider();
-export default {
-  title: 'UI/Preview',
-  component: Preview,
-  decorators: [(StoryFn, c) => /*#__PURE__*/React.createElement(LocationProvider, {
-    key: "location.provider",
-    history: createHistory(createMemorySource('/?path=/story/story--id'))
-  }, /*#__PURE__*/React.createElement(Location, {
-    key: "location.consumer"
-  }, locationData => /*#__PURE__*/React.createElement(ManagerProvider, _extends({
-    key: "manager",
-    provider: provider
-  }, locationData, {
-    docsMode: false
-  }), /*#__PURE__*/React.createElement(ThemeProvider, {
-    key: "theme.provider",
-    theme: ensureTheme(themes.light)
-  }, /*#__PURE__*/React.createElement(StoryFn, c)))))]
-};
-export const noTabs = () => /*#__PURE__*/React.createElement(Consumer, null, ({
-  api
-}) => {
-  return /*#__PURE__*/React.createElement(Preview, _extends({}, previewProps, {
-    api: Object.assign({}, api, {
-      getElements: () => ({})
-    }),
-    story: {
-      parameters: {
-        previewTabs: {
-          canvas: {
-            hidden: true
-          }
-        }
-      }
-    }
-  }));
-});
-noTabs.displayName = "noTabs";
-export const hideFullscreen = () => /*#__PURE__*/React.createElement(Consumer, null, ({
-  api
-}) => {
-  return /*#__PURE__*/React.createElement(Preview, _extends({}, previewProps, {
-    api: Object.assign({}, api, {
-      getElements: () => ({})
-    }),
-    story: {
-      parameters: {
-        toolbar: {
-          fullscreen: {
-            hidden: true
-          }
-        }
-      }
-    }
-  }));
-});
-hideFullscreen.displayName = "hideFullscreen";
-export const hideAllDefaultTools = () => /*#__PURE__*/React.createElement(Consumer, null, ({
-  api
-}) => {
-  return /*#__PURE__*/React.createElement(Preview, _extends({}, previewProps, {
-    api: Object.assign({}, api, {
-      getElements: () => ({})
-    }),
-    story: {
-      parameters: {
-        toolbar: {
-          title: {
-            hidden: true
-          },
-          zoom: {
-            hidden: true
-          },
-          eject: {
-            hidden: true
-          },
-          copy: {
-            hidden: true
-          },
-          fullscreen: {
-            hidden: true
-          }
-        }
-      }
-    }
-  }));
-});
-hideAllDefaultTools.displayName = "hideAllDefaultTools";
-export const withCanvasTab = () => /*#__PURE__*/React.createElement(Consumer, null, ({
-  api
-}) => {
-  return /*#__PURE__*/React.createElement(Preview, _extends({}, previewProps, {
-    api: Object.assign({}, api, {
-      getElements: () => ({})
-    })
-  }));
-});
-withCanvasTab.displayName = "withCanvasTab";
-export const withTabs = () => /*#__PURE__*/React.createElement(Preview, previewProps);
-withTabs.displayName = "withTabs";

package/dist/collection/node_modules/@storybook/ui/dist/modern/components/preview/toolbar.js

@@ -1,202 +0,0 @@
-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); }
-
-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, { Fragment, useMemo } from 'react';
-import { styled } from '@storybook/theming';
-import { FlexBar, IconButton, Icons, Separator, TabButton, TabBar } from '@storybook/components';
-import { Consumer, merge } from '@storybook/api';
-import { shortcutToHumanString } from '@storybook/api/shortcut';
-import { addons, types } from '@storybook/addons';
-import { Location } from '@storybook/router';
-import { zoomTool } from './tools/zoom';
-import * as S from './utils/components';
-import { copyTool } from './tools/copy';
-import { ejectTool } from './tools/eject';
-export const getTools = getFn => Object.values(getFn(types.TOOL));
-export const getToolsExtra = getFn => Object.values(getFn(types.TOOLEXTRA));
-
-const Bar = (_ref) => {
-  let props = _objectWithoutPropertiesLoose(_ref, ["shown"]);
-
-  return /*#__PURE__*/React.createElement(FlexBar, props);
-};
-
-Bar.displayName = "Bar";
-export const Toolbar = styled(Bar)({
-  position: 'absolute',
-  left: 0,
-  right: 0,
-  top: 0,
-  transition: 'transform .2s linear'
-}, ({
-  shown
-}) => ({
-  transform: shown ? 'translateY(0px)' : 'translateY(-40px)'
-}));
-
-const fullScreenMapper = ({
-  api,
-  state
-}) => ({
-  toggle: api.toggleFullscreen,
-  value: state.layout.isFullscreen,
-  shortcut: shortcutToHumanString(api.getShortcutKeys().fullScreen)
-});
-
-export const fullScreenTool = {
-  title: 'fullscreen',
-  id: 'fullscreen',
-  match: p => ['story', 'docs'].includes(p.viewMode),
-  render: () => /*#__PURE__*/React.createElement(Consumer, {
-    filter: fullScreenMapper
-  }, ({
-    toggle,
-    value,
-    shortcut
-  }) => /*#__PURE__*/React.createElement(S.DesktopOnly, null, /*#__PURE__*/React.createElement(IconButton, {
-    key: "full",
-    onClick: toggle,
-    title: `${value ? 'Exit full screen' : 'Go full screen'} [${shortcut}]`
-  }, /*#__PURE__*/React.createElement(Icons, {
-    icon: value ? 'close' : 'expand'
-  }))))
-};
-
-const tabsMapper = ({
-  state
-}) => ({
-  viewMode: state.docsOnly,
-  storyId: state.storyId,
-  path: state.path,
-  location: state.location,
-  refId: state.refId
-});
-
-export const createTabsTool = tabs => ({
-  title: 'title',
-  id: 'title',
-  render: () => /*#__PURE__*/React.createElement(Consumer, {
-    filter: tabsMapper
-  }, rp => /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(TabBar, {
-    key: "tabs"
-  }, tabs.filter(p => !p.hidden).map((t, index) => {
-    const to = t.route(rp);
-    const isActive = rp.path === to;
-    return /*#__PURE__*/React.createElement(S.UnstyledLink, {
-      key: t.id || `l${index}`,
-      to: to
-    }, /*#__PURE__*/React.createElement(TabButton, {
-      disabled: t.disabled,
-      active: isActive
-    }, t.title));
-  })), /*#__PURE__*/React.createElement(Separator, null)))
-});
-export const defaultTools = [zoomTool];
-export const defaultToolsExtra = [fullScreenTool, ejectTool, copyTool];
-
-const useTools = (getElements, tabs, viewMode, story, location, path) => {
-  const toolsFromConfig = useMemo(() => getTools(getElements), [getElements]);
-  const toolsExtraFromConfig = useMemo(() => getToolsExtra(getElements), [getElements]);
-  const tools = useMemo(() => [...defaultTools, ...toolsFromConfig], [defaultTools, toolsFromConfig]);
-  const toolsExtra = useMemo(() => [...defaultToolsExtra, ...toolsExtraFromConfig], [defaultToolsExtra, toolsExtraFromConfig]);
-  return useMemo(() => {
-    return story && story.parameters ? filterTools(tools, toolsExtra, tabs, {
-      viewMode,
-      story,
-      location,
-      path
-    }) : {
-      left: tools,
-      right: toolsExtra
-    };
-  }, [viewMode, story, location, path, tools, toolsExtra, tabs]);
-};
-
-export const ToolRes = /*#__PURE__*/React.memo(({
-  api,
-  story,
-  tabs,
-  isShown,
-  location,
-  path,
-  viewMode
-}) => {
-  const {
-    left,
-    right
-  } = useTools(api.getElements, tabs, viewMode, story, location, path);
-  return left || right ? /*#__PURE__*/React.createElement(Toolbar, {
-    key: "toolbar",
-    shown: isShown,
-    border: true
-  }, /*#__PURE__*/React.createElement(Tools, {
-    key: "left",
-    list: left
-  }), /*#__PURE__*/React.createElement(Tools, {
-    key: "right",
-    list: right
-  })) : null;
-});
-export const ToolbarComp = /*#__PURE__*/React.memo(props => /*#__PURE__*/React.createElement(Location, null, ({
-  location,
-  path,
-  viewMode
-}) => /*#__PURE__*/React.createElement(ToolRes, _extends({}, props, {
-  location,
-  path,
-  viewMode
-}))));
-export const Tools = /*#__PURE__*/React.memo(({
-  list
-}) => /*#__PURE__*/React.createElement(React.Fragment, null, list.filter(Boolean).map((_ref2, index) => {
-  let {
-    render: Render,
-    id
-  } = _ref2,
-      t = _objectWithoutPropertiesLoose(_ref2, ["render", "id"]);
-
-  return (
-    /*#__PURE__*/
-    // @ts-ignore
-    React.createElement(Render, {
-      key: id || t.key || `f-${index}`
-    })
-  );
-})));
-
-function toolbarItemHasBeenExcluded(item, story) {
-  var _toolbarItems$item$id;
-
-  const toolbarItemsFromStoryParameters = 'toolbar' in story.parameters ? story.parameters.toolbar : undefined;
-  const {
-    toolbar: toolbarItemsFromAddonsConfig
-  } = addons.getConfig();
-  const toolbarItems = merge(toolbarItemsFromAddonsConfig, toolbarItemsFromStoryParameters);
-  return toolbarItems ? !!((_toolbarItems$item$id = toolbarItems[item.id]) !== null && _toolbarItems$item$id !== void 0 && _toolbarItems$item$id.hidden) : false;
-}
-
-export function filterTools(tools, toolsExtra, tabs, {
-  viewMode,
-  story,
-  location,
-  path
-}) {
-  const toolsLeft = [tabs.filter(p => !p.hidden).length >= 1 && createTabsTool(tabs), ...tools];
-  const toolsRight = [...toolsExtra];
-
-  const filter = item => item && (!item.match || item.match({
-    storyId: story.id,
-    refId: story.refId,
-    viewMode,
-    location,
-    path
-  })) && !toolbarItemHasBeenExcluded(item, story);
-
-  const left = toolsLeft.filter(filter);
-  const right = toolsRight.filter(filter);
-  return {
-    left,
-    right
-  };
-}

package/dist/collection/node_modules/@storybook/ui/dist/modern/components/preview/tools/copy.js

@@ -1,47 +0,0 @@
-import global from 'global';
-import React from 'react';
-import copy from 'copy-to-clipboard';
-import { IconButton, Icons } from '@storybook/components';
-import { Consumer } from '@storybook/api';
-import { stringifyQueryParams } from '../utils/stringifyQueryParams';
-const {
-  PREVIEW_URL
-} = global;
-
-const copyMapper = ({
-  state
-}) => {
-  const {
-    storyId,
-    refId,
-    refs
-  } = state;
-  const ref = refs[refId];
-  return {
-    refId,
-    baseUrl: ref ? `${ref.url}/iframe.html` : PREVIEW_URL || 'iframe.html',
-    storyId,
-    queryParams: state.customQueryParams
-  };
-};
-
-export const copyTool = {
-  title: 'copy',
-  id: 'copy',
-  match: ({
-    viewMode
-  }) => viewMode === 'story',
-  render: () => /*#__PURE__*/React.createElement(Consumer, {
-    filter: copyMapper
-  }, ({
-    baseUrl,
-    storyId,
-    queryParams
-  }) => storyId ? /*#__PURE__*/React.createElement(IconButton, {
-    key: "copy",
-    onClick: () => copy(`${baseUrl}?id=${storyId}${stringifyQueryParams(queryParams)}`),
-    title: "Copy canvas link"
-  }, /*#__PURE__*/React.createElement(Icons, {
-    icon: "link"
-  })) : null)
-};

package/dist/collection/node_modules/@storybook/ui/dist/modern/components/preview/tools/eject.js

@@ -1,47 +0,0 @@
-import global from 'global';
-import React from 'react';
-import { IconButton, Icons } from '@storybook/components';
-import { Consumer } from '@storybook/api';
-import { stringifyQueryParams } from '../utils/stringifyQueryParams';
-const {
-  PREVIEW_URL
-} = global;
-
-const ejectMapper = ({
-  state
-}) => {
-  const {
-    storyId,
-    refId,
-    refs
-  } = state;
-  const ref = refs[refId];
-  return {
-    refId,
-    baseUrl: ref ? `${ref.url}/iframe.html` : PREVIEW_URL || 'iframe.html',
-    storyId,
-    queryParams: state.customQueryParams
-  };
-};
-
-export const ejectTool = {
-  title: 'eject',
-  id: 'eject',
-  match: ({
-    viewMode
-  }) => viewMode === 'story',
-  render: () => /*#__PURE__*/React.createElement(Consumer, {
-    filter: ejectMapper
-  }, ({
-    baseUrl,
-    storyId,
-    queryParams
-  }) => storyId ? /*#__PURE__*/React.createElement(IconButton, {
-    key: "opener",
-    href: `${baseUrl}?id=${storyId}${stringifyQueryParams(queryParams)}`,
-    target: "_blank",
-    title: "Open canvas in new tab"
-  }, /*#__PURE__*/React.createElement(Icons, {
-    icon: "sharealt"
-  })) : null)
-};