Remove @sumup/collector (#1972)

* Remove tracking Storybook decorator

* Remove Collector from Circuit UI

* Add changeset

.changeset/green-singers-sneeze.md

@@ -0,0 +1,6 @@
+---
+'@sumup/circuit-ui': major
+'@sumup/cna-template': minor
+---
+
+Removed `@sumup/collector` from the peer dependencies and removed the related `tracking` and `trackingLabel` props (deprecated since v6.4).

.storybook/preview.tsx

@@ -1,6 +1,5 @@
 import { light, components } from './themes';
 import { withThemeProvider } from './decorators/withThemeProvider';
-import { withTrackingAction } from './decorators/withTrackingAction';
 import { withUnmountWhenHidden } from './decorators/withUnmountWhenHidden';
 import { DocsContainer } from './components';
 
@@ -46,8 +45,4 @@ export const globalTypes = {
   },
 };
 
-export const decorators = [
-  withThemeProvider,
-  withTrackingAction,
-  withUnmountWhenHidden,
-];
+export const decorators = [withThemeProvider, withUnmountWhenHidden];

docs/introduction/2-getting-started.mdx

@@ -26,13 +26,13 @@ npm install @sumup/circuit-ui
 yarn add @sumup/circuit-ui
 ```
 
-Circuit UI relies on some mandatory peer dependencies, namely [@sumup/collector](https://www.npmjs.com/package/@sumup/collector), [@sumup/design-tokens](https://www.npmjs.com/package/@sumup/design-tokens), [@sumup/icons](https://www.npmjs.com/package/@sumup/icons), [@sumup/intl](https://www.npmjs.com/package/@sumup/intl), [React](https://reactjs.org/), and [Emotion](https://emotion.sh/). You should install them with the following command:
+Circuit UI relies on some mandatory peer dependencies, namely [@sumup/design-tokens](https://www.npmjs.com/package/@sumup/design-tokens), [@sumup/icons](https://www.npmjs.com/package/@sumup/icons), [@sumup/intl](https://www.npmjs.com/package/@sumup/intl), [React](https://reactjs.org/), and [Emotion](https://emotion.sh/). You should install them with the following command:
 
 ```sh
 # With npm:
-npm install --save @sumup/collector @sumup/design-tokens @sumup/icons @sumup/intl react react-dom @emotion/react @emotion/styled
+npm install --save @sumup/design-tokens @sumup/icons @sumup/intl react react-dom @emotion/react @emotion/styled
 # With yarn v1
-yarn add @sumup/collector @sumup/design-tokens @sumup/icons @sumup/intl react react-dom @emotion/react @emotion/styled
+yarn add @sumup/design-tokens @sumup/icons @sumup/intl react react-dom @emotion/react @emotion/styled
 ```
 
 We also recommend installing and configuring the [`@sumup/eslint-plugin-circuit-ui`](Packages/eslint-plugin-circuit-ui/Docs) ESLint plugin. It will lint [Circuit UI custom properties](Features/Theme/Docs) and will include codemods for future Circuit UI breaking changes.

packages/circuit-ui/components/Anchor/Anchor.tsx

@@ -29,20 +29,13 @@ import { ClickEvent } from '../../types/events';
 import { AsPropType } from '../../types/prop-types';
 import { Body, BodyProps } from '../Body/Body';
 import { useComponents } from '../ComponentsContext';
-import { useClickEvent, TrackingProps } from '../../hooks/useClickEvent';
 
 export interface BaseProps extends BodyProps {
   children: ReactNode;
   /**
    * Function that's called when the button is clicked.
    */
   onClick?: (event: ClickEvent) => void;
-  /**
-   * @deprecated
-   *
-   * Use an `onClick` handler to dispatch user interaction events instead.
-   */
-  tracking?: TrackingProps;
   /**
    * The ref to the HTML DOM element, it can be a button an anchor or a span, typed as any for now because of complex js manipulation with styled components
    */
@@ -89,37 +82,19 @@ const anchorStyles = (theme: Theme) => css`
  * a hyperlink. Based on the Body component, so it also supports its props.
  */
 export const Anchor = forwardRef(
-  ({ tracking, ...props }: AnchorProps, ref?: BaseProps['ref']): ReturnType => {
+  (props: AnchorProps, ref?: BaseProps['ref']): ReturnType => {
     const components = useComponents();
     const Link = components.Link as AsPropType;
 
-    const handleClick = useClickEvent(props.onClick, tracking, 'anchor');
-
     if (!props.href && !props.onClick) {
       return <Body as="span" {...props} ref={ref} />;
     }
 
     if (props.href) {
-      return (
-        <Body
-          {...props}
-          css={anchorStyles}
-          as={Link}
-          ref={ref}
-          onClick={handleClick}
-        />
-      );
+      return <Body {...props} css={anchorStyles} as={Link} ref={ref} />;
     }
 
-    return (
-      <Body
-        as="button"
-        {...props}
-        css={anchorStyles}
-        ref={ref}
-        onClick={handleClick}
-      />
-    );
+    return <Body as="button" {...props} css={anchorStyles} ref={ref} />;
   },
 );
 

packages/circuit-ui/components/Button/Button.stories.tsx

@@ -14,7 +14,6 @@
  */
 
 import { useState } from 'react';
-import { action } from '@storybook/addon-actions';
 import { Plus } from '@sumup/icons';
 
 import { Stack } from '../../../../.storybook/components';
@@ -91,19 +90,6 @@ export const WithIcon = (args: ButtonProps) => (
   </Button>
 );
 
-export const Tracking = (args: ButtonProps) => (
-  <Button
-    {...args}
-    onClick={action('Button Click')}
-    tracking={{
-      label: 'track-button',
-      customParameters: { key: 'value' },
-    }}
-  >
-    Track me
-  </Button>
-);
-
 export const Loading = (args: ButtonProps) => {
   const [isLoading, setLoading] = useState(false);
 

packages/circuit-ui/components/Button/Button.tsx

@@ -36,7 +36,6 @@ import { ReturnType } from '../../types/return-type';
 import { ClickEvent } from '../../types/events';
 import { AsPropType, EmotionAsPropType } from '../../types/prop-types';
 import { useComponents } from '../ComponentsContext';
-import { useClickEvent, TrackingProps } from '../../hooks/useClickEvent';
 import Spinner from '../Spinner';
 import { AccessibilityError } from '../../util/errors';
 
@@ -75,12 +74,6 @@ export interface BaseProps {
    * Function that's called when the button is clicked.
    */
   'onClick'?: (event: ClickEvent) => void;
-  /**
-   * @deprecated
-   *
-   * Use an `onClick` handler to dispatch user interaction events instead.
-   */
-  'tracking'?: TrackingProps;
   /**
    The ref to the HTML DOM element
    */
@@ -427,7 +420,6 @@ export const Button = forwardRef(
       isLoading,
       loadingLabel,
       icon: Icon,
-      tracking,
       as,
       ...props
     }: ButtonProps,
@@ -447,8 +439,6 @@ export const Button = forwardRef(
     const { Link } = useComponents();
     const linkOrButton = props.href ? Link : 'button';
 
-    const handleClick = useClickEvent(props.onClick, tracking, 'button');
-
     return (
       <StyledButton
         {...props}
@@ -460,7 +450,6 @@ export const Button = forwardRef(
         disabled={disabled || isLoading}
         ref={ref}
         as={(as || linkOrButton) as EmotionAsPropType}
-        onClick={handleClick}
       >
         <LoadingIcon isLoading={Boolean(isLoading)} size="byte">
           <LoadingLabel>{loadingLabel}</LoadingLabel>

packages/circuit-ui/components/CalendarTag/CalendarTag.js

@@ -35,16 +35,6 @@ class CalendarTag extends Component {
      * Callback to receive the set of dates when the user selects them.
      */
     onDatesRangeChange: PropTypes.func.isRequired,
-    /**
-     * @deprecated
-     *
-     * Use an `onClick` handler to dispatch user interaction events instead.
-     */
-    tracking: PropTypes.shape({
-      label: PropTypes.string.isRequired,
-      component: PropTypes.string,
-      customParameters: PropTypes.object,
-    }),
     /**
      * Function that's called when the date tag is clicked.
      */
@@ -97,7 +87,7 @@ class CalendarTag extends Component {
   };
 
   render() {
-    const { onDatesRangeChange, tracking, ...props } = this.props;
+    const { onDatesRangeChange, ...props } = this.props;
     const { focusedInput, startDate, endDate } = this.state;
     const isOpen = focusedInput !== null;
 
@@ -107,10 +97,6 @@ class CalendarTag extends Component {
           selected={isOpen}
           ref={this.handleTagRef}
           onClick={this.handleTagClick}
-          tracking={{
-            component: 'calendar-tag',
-            ...tracking,
-          }}
         >
           {this.getDateRangePreview()}
         </Tag>