@storybook/addon-links 5.2.1 → 5.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-links",
-  "version": "5.2.1",
+  "version": "5.2.5",
   "description": "Story Links addon for storybook",
   "keywords": [
     "addon",
@@ -16,15 +16,22 @@
     "directory": "addons/links"
   },
   "license": "MIT",
+  "files": [
+    "dist/**/*",
+    "docs/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts"
+  ],
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.1",
-    "@storybook/core-events": "5.2.1",
-    "@storybook/router": "5.2.1",
+    "@storybook/addons": "5.2.5",
+    "@storybook/core-events": "5.2.5",
+    "@storybook/router": "5.2.5",
     "common-tags": "^1.8.0",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
@@ -37,5 +44,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5497d2ea8d47c4573d245126e6f3f45bc176c12d"
+  "gitHead": "6e80db697f865f833cf3e250573a7ce36e0ee02a"
 }

package/src/constants.ts

@@ -1,7 +0,0 @@
-export const ADDON_ID = 'storybook/links';
-
-export default {
-  NAVIGATE: `${ADDON_ID}/navigate`,
-  REQUEST: `${ADDON_ID}/request`,
-  RECEIVE: `${ADDON_ID}/receive`,
-};

package/src/index.ts

@@ -1,22 +0,0 @@
-import { stripIndents } from 'common-tags';
-import { linkTo, hrefTo, withLinks } from './preview';
-
-let hasWarned = false;
-
-export function LinkTo(): null {
-  if (!hasWarned) {
-    // eslint-disable-next-line no-console
-    console.error(stripIndents`
-      LinkTo has moved to addon-links/react:
-      import LinkTo from '@storybook/addon-links/react';
-    `);
-    hasWarned = true;
-  }
-  return null;
-}
-
-export { linkTo, hrefTo, withLinks };
-
-if (module && module.hot && module.hot.decline) {
-  module.hot.decline();
-}

package/src/manager.ts

@@ -1,14 +0,0 @@
-import addons from '@storybook/addons';
-
-import EVENTS, { ADDON_ID } from './constants';
-
-export const register = () => {
-  addons.register(ADDON_ID, api => {
-    const channel = addons.getChannel();
-
-    channel.on(EVENTS.REQUEST, ({ kind, name }) => {
-      const id = api.storyId(kind, name);
-      api.emit(EVENTS.RECEIVE, id);
-    });
-  });
-};

package/src/preview.test.js

@@ -1,53 +0,0 @@
-import addons from '@storybook/addons';
-import { SELECT_STORY } from '@storybook/core-events';
-import { linkTo, hrefTo } from './preview';
-
-jest.mock('@storybook/addons');
-
-export const mockChannel = () => {
-  return {
-    emit: jest.fn(),
-    on: jest.fn(),
-    once: jest.fn(),
-  };
-};
-
-describe('preview', () => {
-  describe('linkTo()', () => {
-    it('should select the kind and story provided', () => {
-      const channel = { emit: jest.fn() };
-      addons.getChannel.mockReturnValue(channel);
-
-      const handler = linkTo('kind', 'name');
-      handler();
-
-      expect(channel.emit).toHaveBeenCalledWith(SELECT_STORY, {
-        kind: 'kind',
-        story: 'name',
-      });
-    });
-
-    it('should handle functions returning strings', () => {
-      const channel = { emit: jest.fn() };
-      addons.getChannel.mockReturnValue(channel);
-
-      const handler = linkTo((a, b) => a + b, (a, b) => b + a);
-      handler('kind', 'name');
-
-      expect(channel.emit.mock.calls).toContainEqual([
-        SELECT_STORY,
-        {
-          kind: 'kindname',
-          story: 'namekind',
-        },
-      ]);
-    });
-  });
-
-  describe('hrefTo()', () => {
-    it('should return promise resolved with story href', async () => {
-      const href = await hrefTo('kind', 'name');
-      expect(href).toContain('?id=kind--name');
-    });
-  });
-});

package/src/preview.ts

@@ -1,76 +0,0 @@
-import { document, HTMLElement } from 'global';
-import qs from 'qs';
-import addons from '@storybook/addons';
-import { STORY_CHANGED, SELECT_STORY } from '@storybook/core-events';
-import { toId } from '@storybook/router/utils';
-
-interface ParamsId {
-  storyId: string;
-}
-interface ParamsCombo {
-  kind: string;
-  story: string;
-}
-
-export const navigate = (params: ParamsId | ParamsCombo) =>
-  addons.getChannel().emit(SELECT_STORY, params);
-
-const generateUrl = (id: string) => {
-  const { location } = document;
-  const query = qs.parse(location.search, { ignoreQueryPrefix: true });
-  return `${location.origin + location.pathname}?${qs.stringify(
-    { ...query, id },
-    { encode: false }
-  )}`;
-};
-
-const valueOrCall = (args: string[]) => (value: string | ((...args: string[]) => string)) =>
-  typeof value === 'function' ? value(...args) : value;
-
-export const linkTo = (kind: string, story?: string) => (...args: string[]) => {
-  const resolver = valueOrCall(args);
-
-  navigate({
-    kind: resolver(kind),
-    story: resolver(story),
-  });
-};
-
-export const hrefTo = (kind: string, name: string): Promise<string> =>
-  new Promise(resolve => {
-    resolve(generateUrl(toId(kind, name)));
-  });
-
-const linksListener = (e: Event) => {
-  const { target } = e;
-  if (!(target instanceof HTMLElement)) {
-    return;
-  }
-  const element = target as HTMLElement;
-  const { sbKind: kind, sbStory: story } = element.dataset;
-  if (kind || story) {
-    e.preventDefault();
-    navigate({ kind, story });
-  }
-};
-
-let hasListener = false;
-
-const on = () => {
-  if (!hasListener) {
-    hasListener = true;
-    document.addEventListener('click', linksListener);
-  }
-};
-const off = () => {
-  if (hasListener) {
-    hasListener = false;
-    document.removeEventListener('click', linksListener);
-  }
-};
-
-export const withLinks = (storyFn: () => void) => {
-  on();
-  addons.getChannel().once(STORY_CHANGED, off);
-  return storyFn();
-};

package/src/react/components/RoutedLink.js

@@ -1,50 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-// NOTE: this is a copy of `lib/components/src/navigation/RoutedLink.js`.
-// It's duplicated here because that copy has an explicit dependency on
-// React 16.3+, which breaks older versions of React running in the preview.
-// The proper DRY solution is to create a new package that doesn't depend
-// on a specific react version. However, that's a heavy-handed solution for
-// one trivial file.
-
-const LEFT_BUTTON = 0;
-// Cmd/Ctrl/Shift/Alt + Click should trigger default browser behaviour. Same applies to non-left clicks
-const isPlainLeftClick = e =>
-  e.button === LEFT_BUTTON && !e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey;
-
-export default class RoutedLink extends React.Component {
-  onClick = e => {
-    const { onClick } = this.props;
-
-    if (isPlainLeftClick(e)) {
-      e.preventDefault();
-      onClick(e);
-    }
-  };
-
-  render() {
-    const { href, children, onClick, className, style } = this.props;
-    const props = onClick
-      ? { href, className, style, onClick: this.onClick }
-      : { href, className, style };
-    return <a {...props}>{children}</a>;
-  }
-}
-
-RoutedLink.defaultProps = {
-  onClick: null,
-  href: '#',
-  children: null,
-  className: undefined,
-  style: undefined,
-};
-
-RoutedLink.propTypes = {
-  onClick: PropTypes.func,
-  href: PropTypes.string,
-  children: PropTypes.node,
-  className: PropTypes.string,
-  // eslint-disable-next-line react/forbid-prop-types
-  style: PropTypes.object,
-};

package/src/react/components/__snapshots__/link.test.js.snap

@@ -1,8 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`LinkTo render should render a link 1`] = `
-<a
-  href="http://localhost/?id=foo--bar"
-  onClick={[Function]}
-/>
-`;

package/src/react/components/link.test.js

@@ -1,43 +0,0 @@
-import { shallow } from 'enzyme';
-import React from 'react';
-import addons from '@storybook/addons';
-
-import { SELECT_STORY } from '@storybook/core-events';
-import { mockChannel } from '../../preview.test';
-import LinkTo from './link';
-
-jest.mock('@storybook/addons');
-
-describe('LinkTo', () => {
-  describe('render', () => {
-    it('should render a link', async () => {
-      const channel = mockChannel();
-      addons.getChannel.mockReturnValue(channel);
-
-      const wrapper = shallow(<LinkTo kind="foo" story="bar" />);
-      await wrapper.instance().updateHref(wrapper.props());
-      wrapper.update();
-      expect(wrapper).toMatchSnapshot();
-    });
-  });
-
-  describe('events', () => {
-    it('should select the kind and story on click', () => {
-      const channel = {
-        emit: jest.fn(),
-        on: jest.fn(),
-      };
-      addons.getChannel.mockReturnValue(channel);
-
-      const wrapper = shallow(<LinkTo kind="foo" story="bar" />);
-      wrapper.simulate('click', { button: 0, preventDefault: () => {} });
-      expect(channel.emit.mock.calls).toContainEqual([
-        SELECT_STORY,
-        {
-          kind: 'foo',
-          story: 'bar',
-        },
-      ]);
-    });
-  });
-});

package/src/react/components/link.tsx

@@ -1,74 +0,0 @@
-import React, { PureComponent } from 'react';
-
-import { navigate, hrefTo } from '../../preview';
-
-// FIXME: copied from Typography.Link. Code is duplicated to
-// avoid emotion dependency which breaks React 15.x back-compat
-
-// Cmd/Ctrl/Shift/Alt + Click should trigger default browser behaviour. Same applies to non-left clicks
-const LEFT_BUTTON = 0;
-
-const isPlainLeftClick = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) =>
-  e.button === LEFT_BUTTON && !e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey;
-
-const cancelled = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>, cb = (_e: any) => {}) => {
-  if (isPlainLeftClick(e)) {
-    e.preventDefault();
-    cb(e);
-  }
-};
-
-interface Props {
-  kind: string;
-  story: string;
-  children: React.ReactNode;
-}
-
-interface State {
-  href: string;
-}
-
-export default class LinkTo extends PureComponent<Props, State> {
-  static defaultProps: Props = {
-    kind: null,
-    story: null,
-    children: undefined,
-  };
-
-  state: State = {
-    href: '/',
-  };
-
-  componentDidMount() {
-    this.updateHref();
-  }
-
-  componentDidUpdate(prevProps: Props) {
-    const { kind, story } = this.props;
-
-    if (prevProps.kind !== kind || prevProps.story !== story) {
-      this.updateHref();
-    }
-  }
-
-  updateHref = async () => {
-    const { kind, story } = this.props;
-    const href = await hrefTo(kind, story);
-    this.setState({ href });
-  };
-
-  handleClick = () => {
-    navigate(this.props);
-  };
-
-  render() {
-    const { kind, story, children, ...rest } = this.props;
-    const { href } = this.state;
-
-    return (
-      <a href={href} onClick={e => cancelled(e, this.handleClick)} {...rest}>
-        {children}
-      </a>
-    );
-  }
-}

package/src/react/index.ts

@@ -1,3 +0,0 @@
-import LinkTo from './components/link';
-
-export default LinkTo;

package/src/typings.d.ts

@@ -1 +0,0 @@
-declare module 'global';

package/tsconfig.json

@@ -1,13 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "rootDir": "./src",
-    "types": ["webpack-env"]
-  },
-  "include": [
-    "src/**/*"
-  ],
-  "exclude": [
-    "src/__tests__/**/*"
-  ]
-}