From 03160d176cdc464118e4eb79b532ff0d1bb82f37 Mon Sep 17 00:00:00 2001
From: atanasster <atanasster@gmail.com>
Date: Tue, 15 Sep 2020 08:55:38 -0400
Subject: [PATCH] feat: color-parse for better parsing

---
 ui/components/src/Popover/Popover.tsx         | 25 +++++---
 ui/design-tokens/package.json                 |  2 +
 ...ck.stories.tsx => ColorSwatch.stories.tsx} | 10 ++++
 .../src/Colors/ColorSwatch/ColorSwatch.tsx    | 35 ++++++-----
 ui/design-tokens/src/Colors/utils.ts          | 25 ++++++++
 .../src/CopyContainer/CopyContainer.tsx       | 58 +++++++++++++++++++
 ui/design-tokens/src/CopyContainer/index.ts   |  1 +
 ui/design-tokens/src/typings.d.ts             |  1 +
 yarn.lock                                     | 14 +++++
 9 files changed, 149 insertions(+), 22 deletions(-)
 rename ui/design-tokens/src/Colors/ColorSwatch/{ColorBlock.stories.tsx => ColorSwatch.stories.tsx} (62%)
 create mode 100644 ui/design-tokens/src/Colors/utils.ts
 create mode 100644 ui/design-tokens/src/CopyContainer/CopyContainer.tsx
 create mode 100644 ui/design-tokens/src/CopyContainer/index.ts
 create mode 100644 ui/design-tokens/src/typings.d.ts

diff --git a/ui/components/src/Popover/Popover.tsx b/ui/components/src/Popover/Popover.tsx
index 3773b6fbe..0b458d4da 100644
--- a/ui/components/src/Popover/Popover.tsx
+++ b/ui/components/src/Popover/Popover.tsx
@@ -5,13 +5,22 @@ import { TooltipTriggerProps } from 'react-popper-tooltip/dist/types';
 import { jsx, Box } from 'theme-ui';
 import { Arrow, Wrapper } from './PopoverUtils';
 
-export type PopoverProps = Omit<Partial<TooltipTriggerProps>, 'children'>;
+export interface PopoverOwnProps {
+  /**
+   * set to false to hide the arrow
+   */
+  arrowVisible?: boolean;
+}
+
+export type PopoverProps = PopoverOwnProps &
+  Omit<Partial<TooltipTriggerProps>, 'children'>;
 
 /**
  * A Popover container that is triggered by a click/hover event.
  * Used to display enhanced information that could not fit into the main scren.
  */
 export const Popover: FC<PopoverProps> = ({
+  arrowVisible = true,
   trigger,
   placement = 'bottom',
   modifiers,
@@ -46,12 +55,14 @@ export const Popover: FC<PopoverProps> = ({
             {...containerProps}
             sx={{ backgroundColor: 'background' }}
           >
-            <Arrow
-              placement={placement}
-              borderColor={borderColor}
-              ref={arrowRef as any}
-              {...getArrowProps()}
-            />
+            {arrowVisible && (
+              <Arrow
+                placement={placement}
+                borderColor={borderColor}
+                ref={arrowRef as any}
+                {...getArrowProps()}
+              />
+            )}
             {typeof tooltip === 'function' ? tooltip(tooltipProps) : tooltip}
           </Wrapper>
         );
diff --git a/ui/design-tokens/package.json b/ui/design-tokens/package.json
index 3a60b5004..59c6ebc5e 100644
--- a/ui/design-tokens/package.json
+++ b/ui/design-tokens/package.json
@@ -35,6 +35,8 @@
     "@component-controls/editors": "^1.25.1",
     "@component-controls/store": "^1.25.1",
     "@primer/octicons-react": "^10.0.0",
+    "color-parse": "^1.3.8",
+    "copy-to-clipboard": "^3.2.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "polished": "^3.4.4",
diff --git a/ui/design-tokens/src/Colors/ColorSwatch/ColorBlock.stories.tsx b/ui/design-tokens/src/Colors/ColorSwatch/ColorSwatch.stories.tsx
similarity index 62%
rename from ui/design-tokens/src/Colors/ColorSwatch/ColorBlock.stories.tsx
rename to ui/design-tokens/src/Colors/ColorSwatch/ColorSwatch.stories.tsx
index 4ca9765ac..898dd9815 100644
--- a/ui/design-tokens/src/Colors/ColorSwatch/ColorBlock.stories.tsx
+++ b/ui/design-tokens/src/Colors/ColorSwatch/ColorSwatch.stories.tsx
@@ -15,3 +15,13 @@ overview.controls = {
   name: { type: 'text' },
   color: { type: 'color', value: '#fbce4a' },
 };
+
+export const name = () => <ColorSwatch name="brand" color="#e95b54" />;
+
+export const rgb = () => <ColorSwatch name="text" color="rgb(0, 0, 0)" />;
+
+/*
+export const rgba = () => (
+  <ColorSwatch name="shadown" color="rgba(0, 0, 0, 0.1)" />
+);
+*/
diff --git a/ui/design-tokens/src/Colors/ColorSwatch/ColorSwatch.tsx b/ui/design-tokens/src/Colors/ColorSwatch/ColorSwatch.tsx
index a5a34fdff..d2346fda2 100644
--- a/ui/design-tokens/src/Colors/ColorSwatch/ColorSwatch.tsx
+++ b/ui/design-tokens/src/Colors/ColorSwatch/ColorSwatch.tsx
@@ -1,34 +1,39 @@
 /** @jsx jsx */
 import { FC } from 'react';
-import { jsx, Box, Theme } from 'theme-ui';
-import { parseToRgb, rgbToColorString } from 'polished';
+import { jsx, Box, Theme, SxProps } from 'theme-ui';
+import { parseToRgb } from 'polished';
+import { colorToStr } from '../utils';
 import { ColorBlockProps } from '../types';
+import { CopyContainer } from '../../CopyContainer';
 
-export const ColorSwatch: FC<ColorBlockProps> = ({ name, color }) => {
-  const colorStr = color.toLowerCase().startsWith('rgb')
-    ? rgbToColorString(parseToRgb(color))
-    : color;
+export type ColorSwatchProps = { sx?: SxProps } & ColorBlockProps;
+
+export const ColorSwatch: FC<ColorSwatchProps> = ({ name, color, sx }) => {
+  const colorStr = colorToStr(color);
   const hex = colorStr.startsWith('#') ? colorStr : `#${colorStr}`;
   const rgb = parseToRgb(hex);
   return (
     <Box sx={{ display: 'flex', flexDirection: 'row', width: '220px' }}>
-      <Box
-        sx={{
-          bg: color,
-          width: 64,
-          height: 64,
-          border: (t: Theme) => ` 1px solid  ${t.colors?.shadow}`,
-        }}
-      ></Box>
+      <CopyContainer value={hex} name={name}>
+        <Box
+          sx={{
+            bg: color,
+            width: 64,
+            height: 64,
+            border: (t: Theme) => ` 1px solid  ${t.colors?.shadow}`,
+          }}
+        />
+      </CopyContainer>
       <Box
         sx={{
           display: 'flex',
           flexDirection: 'column',
-          ml: 2,
+          ml: 3,
           lineHeight: '16px',
           justifyContent: 'space-between',
           fontSize: 0,
           py: 1,
+          ...sx,
         }}
       >
         <Box
diff --git a/ui/design-tokens/src/Colors/utils.ts b/ui/design-tokens/src/Colors/utils.ts
new file mode 100644
index 000000000..f99e2de30
--- /dev/null
+++ b/ui/design-tokens/src/Colors/utils.ts
@@ -0,0 +1,25 @@
+import parse from 'color-parse';
+import { rgb, rgba, hsl } from 'polished';
+
+/**
+ * convert color
+ */
+export const colorToStr = (color: string): string => {
+  const parsed = parse(color);
+  switch (parsed.space) {
+    case 'hsl':
+      return hsl(parsed.values[0], parsed.values[1], parsed.values[2]);
+    case 'rgb':
+      return rgb(parsed.values[0], parsed.values[1], parsed.values[2]);
+    case 'rgbs':
+      return rgba(
+        parsed.values[0],
+        parsed.values[1],
+        parsed.values[2],
+        parsed.values[3],
+      );
+
+    default:
+      return color;
+  }
+};
diff --git a/ui/design-tokens/src/CopyContainer/CopyContainer.tsx b/ui/design-tokens/src/CopyContainer/CopyContainer.tsx
new file mode 100644
index 000000000..3953e9481
--- /dev/null
+++ b/ui/design-tokens/src/CopyContainer/CopyContainer.tsx
@@ -0,0 +1,58 @@
+/** @jsx jsx */
+import { FC, useState } from 'react';
+import { jsx, Box } from 'theme-ui';
+import copy from 'copy-to-clipboard';
+import { Popover } from '@component-controls/components';
+import { CheckIcon } from '@primer/octicons-react';
+
+export interface CopyContainerProps {
+  name?: string;
+  value: string;
+}
+
+export const CopyContainer: FC<CopyContainerProps> = ({
+  name,
+  value,
+  children,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  return (
+    <Popover
+      sx={{
+        cursor: 'pointer',
+      }}
+      trigger="click"
+      followCursor={true}
+      tooltipShown={isOpen}
+      arrowVisible={false}
+      onVisibilityChange={isVisible => {
+        setIsOpen(isVisible);
+        if (isVisible) {
+          copy(value);
+          window.setTimeout(() => {
+            if (isVisible) {
+              setIsOpen(false);
+            }
+          }, 1500);
+        }
+      }}
+      tooltip={() => (
+        <Box
+          sx={{
+            p: 2,
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+          }}
+        >
+          <CheckIcon size={16} sx={{ color: 'green' }} />
+          <Box sx={{ ml: 2, fontSize: 2 }}>{`${
+            name && name !== value ? `${name} ` : ''
+          }copied ${value}`}</Box>
+        </Box>
+      )}
+    >
+      {children}
+    </Popover>
+  );
+};
diff --git a/ui/design-tokens/src/CopyContainer/index.ts b/ui/design-tokens/src/CopyContainer/index.ts
new file mode 100644
index 000000000..20ae6067d
--- /dev/null
+++ b/ui/design-tokens/src/CopyContainer/index.ts
@@ -0,0 +1 @@
+export * from './CopyContainer';
diff --git a/ui/design-tokens/src/typings.d.ts b/ui/design-tokens/src/typings.d.ts
new file mode 100644
index 000000000..87f8e6939
--- /dev/null
+++ b/ui/design-tokens/src/typings.d.ts
@@ -0,0 +1 @@
+declare module 'color-parse';
diff --git a/yarn.lock b/yarn.lock
index cb5061bcd..0461059b9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8200,6 +8200,15 @@ color-name@^1.0.0, color-name@~1.1.4:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
+color-parse@^1.3.8:
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/color-parse/-/color-parse-1.3.8.tgz#eaf54cd385cb34c0681f18c218aca38478082fa3"
+  integrity sha512-1Y79qFv0n1xair3lNMTNeoFvmc3nirMVBij24zbs1f13+7fPpQClMg5b4AuKXLt3szj7BRlHMCXHplkce6XlmA==
+  dependencies:
+    color-name "^1.0.0"
+    defined "^1.0.0"
+    is-plain-obj "^1.1.0"
+
 color-string@^1.5.2:
   version "1.5.3"
   resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.5.3.tgz#c9bbc5f01b58b5492f3d6857459cb6590ce204cc"
@@ -9531,6 +9540,11 @@ define-property@^2.0.2:
     is-descriptor "^1.0.2"
     isobject "^3.0.1"
 
+defined@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/defined/-/defined-1.0.0.tgz#c98d9bcef75674188e110969151199e39b1fa693"
+  integrity sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=
+
 del@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/del/-/del-4.1.1.tgz#9e8f117222ea44a31ff3a156c049b99052a9f0b4"