From edd2cb59d6b56a5d8e54f8a9356ec5d3e1d1dc59 Mon Sep 17 00:00:00 2001
From: Sean Costello <sean.costello@vimeo.com>
Date: Fri, 24 Feb 2023 17:28:09 -0500
Subject: [PATCH] Add react-tiny-popover and labs TourPoint component

---
 package.json                            |  2 +
 src/_labs/TourPoint/TourPoint.story.tsx | 71 +++++++++++++++++++++++
 src/_labs/TourPoint/TourPoint.tsx       | 76 +++++++++++++++++++++++++
 yarn.lock                               |  5 ++
 4 files changed, 154 insertions(+)
 create mode 100644 src/_labs/TourPoint/TourPoint.story.tsx
 create mode 100644 src/_labs/TourPoint/TourPoint.tsx

diff --git a/package.json b/package.json
index cb7e5da0c..257e84b5b 100644
--- a/package.json
+++ b/package.json
@@ -83,6 +83,7 @@
         "react": "*",
         "react-dom": "*",
         "react-is": "^17.0.2",
+        "react-tiny-popover": "^7.2.3",
         "rollup": "^2.79.1",
         "rollup-plugin-multi-input": "^1.3.3",
         "rollup-plugin-terser": "^7.0.2",
@@ -101,6 +102,7 @@
         "polished": "^4.2.2",
         "react": "^16.13.1 || ^17.0.0",
         "react-dom": "^16.13.1 || ^17.0.0",
+        "react-tiny-popover": "^7.2.3",
         "styled-components": "^5.3.6"
     },
     "resolutions": {
diff --git a/src/_labs/TourPoint/TourPoint.story.tsx b/src/_labs/TourPoint/TourPoint.story.tsx
new file mode 100644
index 000000000..c1b9e5572
--- /dev/null
+++ b/src/_labs/TourPoint/TourPoint.story.tsx
@@ -0,0 +1,71 @@
+import React, { forwardRef } from 'react';
+
+import { Story } from '@storybook/react';
+
+import { TourPoint } from './TourPoint';
+
+import { Header } from '../../typography';
+
+export default {
+  title: 'labs/TourPoint',
+  component: TourPoint,
+  argTypes: {
+    icon: { control: { disable: true } },
+    onClose: { control: { disable: true } },
+    target: { control: { disable: true } },
+  },
+  excludeStories: ['Card'],
+};
+
+type Props = any;
+
+new Image().src = 'http://placekitten.com/320/213';
+
+const Template: Story<Props> = (args) => {
+  return (
+    <div
+      style={{
+        padding: '7rem',
+        display: 'flex',
+        alignItems: 'center',
+        gap: '2rem',
+        height: '500px',
+      }}
+    >
+      <TourPoint
+        active={true}
+        attach="left"
+        {...args}
+        src="http://placekitten.com/320/213"
+        step={1}
+        title="A Fresh New Look"
+        content="All the leaves are brown and the sky is grey, I've been for a walk on a winters day."
+        onClick={() => console.log('tourpoint clicked')}
+      >
+        <Card>1</Card>
+      </TourPoint>
+    </div>
+  );
+};
+
+export const Controls = Template.bind({});
+Controls.storyName = 'TourPoint';
+Controls.args = {};
+
+export const Card: any = forwardRef(({ children }, ref: any) => {
+  return (
+    <div
+      ref={ref}
+      style={{
+        width: '12rem',
+        height: '12rem',
+        background: 'rgba(150,150,150,0.5)',
+        padding: '1rem',
+        borderRadius: '0.25rem',
+        margin: '4rem auto',
+      }}
+    >
+      <Header size="3">{children}</Header>
+    </div>
+  );
+});
diff --git a/src/_labs/TourPoint/TourPoint.tsx b/src/_labs/TourPoint/TourPoint.tsx
new file mode 100644
index 000000000..a01f7fcbb
--- /dev/null
+++ b/src/_labs/TourPoint/TourPoint.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import {
+  Popover,
+  PopoverPosition,
+  PopoverAlign,
+} from 'react-tiny-popover';
+import { TourPointStyled } from '../../components/TourPoint/TourPoint.style';
+import { Props as TourPointProps } from '../../components/TourPoint/TourPoint.types';
+import { AttachAlias } from '../../utils';
+
+interface Props extends TourPointProps {
+  children: JSX.Element;
+  positions?: PopoverPosition[];
+  align: PopoverAlign;
+}
+
+type Attach =
+  | 'right'
+  | 'right-top'
+  | 'right-bottom'
+  | 'left'
+  | 'left-top'
+  | 'left-bottom'
+  | 'top'
+  | 'top-left'
+  | 'top-right'
+  | 'bottom'
+  | 'bottom-left'
+  | 'bottom-right';
+
+export function TourPoint({
+  active,
+  content,
+  children,
+  // legacy
+  attach,
+  positions,
+  align,
+}: Props) {
+  let pos = positions;
+  let alignment = align;
+  if (attach && !positions) {
+    [pos, alignment] = convertAttachToPositionAlign(attach);
+  }
+
+  return (
+    <Popover
+      isOpen={!!active}
+      positions={pos}
+      align={alignment}
+      content={<TourPointStyled>{content}</TourPointStyled>}
+    >
+      {children}
+    </Popover>
+  );
+}
+
+function convertAttachToPositionAlign(
+  attach: Attach
+): [PopoverPosition[], PopoverAlign] {
+  const [side, placement] = attach.split('-');
+  let align: PopoverAlign = 'center';
+  switch (placement) {
+    case 'top':
+    case 'left':
+      align = 'start';
+      break;
+    case 'bottom':
+    case 'right':
+      align = 'end';
+    default:
+      break;
+  }
+
+  return [[side as PopoverPosition], align];
+}
diff --git a/yarn.lock b/yarn.lock
index 5be8b31d7..2b1956b8e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13484,6 +13484,11 @@ react-syntax-highlighter@^15.4.5:
     prismjs "^1.27.0"
     refractor "^3.6.0"
 
+react-tiny-popover@^7.2.3:
+  version "7.2.3"
+  resolved "https://registry.yarnpkg.com/react-tiny-popover/-/react-tiny-popover-7.2.3.tgz#5130b2162a117c646c8448218306ac90c56d6cc8"
+  integrity sha512-Gcufxg7kZMVMWAEveMDZEt1cwhP+x/2uVmYAV52Cp2ZBxXabUkAlzWrRlwKEiqjBVkFtIgBmycb1fGNX38/5hA==
+
 react@*:
   version "17.0.1"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"