From bd118a87425efc7a38024939ae184e1daf0432a9 Mon Sep 17 00:00:00 2001
From: Mikyo King <mikyo@arize.com>
Date: Tue, 13 Jun 2023 10:59:17 -0600
Subject: [PATCH] feat: add empty for error and not found (#134)

* feat: add empty for error and not found

* add to limit for now

* fix import
---
 package.json                                  |   4 +-
 src/empty/EmptyGraphic.tsx                    |  10 +-
 ...ptyDocuments.tsx => EmptyDocumentsSVG.tsx} |   2 +-
 src/empty/graphics/ErrorSVG.tsx               | 222 ++++++++++++++++++
 src/empty/graphics/NotFoundSVG.tsx            | 173 ++++++++++++++
 src/empty/graphics/index.tsx                  |   5 +-
 stories/EmptyGraphic.stories.tsx              |   6 +-
 7 files changed, 413 insertions(+), 9 deletions(-)
 rename src/empty/graphics/{EmptyDocuments.tsx => EmptyDocumentsSVG.tsx} (99%)
 create mode 100644 src/empty/graphics/ErrorSVG.tsx
 create mode 100644 src/empty/graphics/NotFoundSVG.tsx

diff --git a/package.json b/package.json
index 9031b85f..29adc1c2 100644
--- a/package.json
+++ b/package.json
@@ -58,11 +58,11 @@
   "size-limit": [
     {
       "path": "dist/components.cjs.production.min.js",
-      "limit": "300 KB"
+      "limit": "500 KB"
     },
     {
       "path": "dist/components.esm.js",
-      "limit": "300 KB"
+      "limit": "500 KB"
     }
   ],
   "devDependencies": {
diff --git a/src/empty/EmptyGraphic.tsx b/src/empty/EmptyGraphic.tsx
index e300bb18..3532aa1f 100644
--- a/src/empty/EmptyGraphic.tsx
+++ b/src/empty/EmptyGraphic.tsx
@@ -1,13 +1,13 @@
 import React, { useMemo } from 'react';
 import { assertUnreachable } from '../utils/typeUtils';
-import { EmptyDocuments } from './graphics';
+import { EmptyDocumentsSVG, NotFoundSVG, ErrorSVG } from './graphics';
 
 export type EmptyGraphicProps = {
   /**
    * The icon to display
    * @default 'documents'
    **/
-  graphicKey: 'documents';
+  graphicKey: 'documents' | 'not found' | 'error';
   /**
    * The size of the icon
    * @default 'S'
@@ -41,7 +41,11 @@ export function EmptyGraphic(props: EmptyGraphicProps) {
   const graphic = useMemo(() => {
     switch (graphicKey) {
       case 'documents':
-        return <EmptyDocuments {...dimensions} />;
+        return <EmptyDocumentsSVG {...dimensions} />;
+      case 'not found':
+        return <NotFoundSVG {...dimensions} />;
+      case 'error':
+        return <ErrorSVG {...dimensions} />;
       default:
         assertUnreachable(graphicKey);
     }
diff --git a/src/empty/graphics/EmptyDocuments.tsx b/src/empty/graphics/EmptyDocumentsSVG.tsx
similarity index 99%
rename from src/empty/graphics/EmptyDocuments.tsx
rename to src/empty/graphics/EmptyDocumentsSVG.tsx
index 0d22d950..da7fbd76 100644
--- a/src/empty/graphics/EmptyDocuments.tsx
+++ b/src/empty/graphics/EmptyDocumentsSVG.tsx
@@ -3,7 +3,7 @@ import { css } from '@emotion/react';
 import { StyleProps } from '../../types';
 import { useStyleProps } from '../../utils';
 
-export const EmptyDocuments = (props: StyleProps) => {
+export const EmptyDocumentsSVG = (props: StyleProps) => {
   // Create a unique ID so that more than one gradient def can exist
   // TODO - try to hoist the gradient defs to be global
   const id = useId();
diff --git a/src/empty/graphics/ErrorSVG.tsx b/src/empty/graphics/ErrorSVG.tsx
new file mode 100644
index 00000000..86d6b821
--- /dev/null
+++ b/src/empty/graphics/ErrorSVG.tsx
@@ -0,0 +1,222 @@
+import React, { useId } from 'react';
+import { css } from '@emotion/react';
+import { StyleProps } from '../../types';
+import { useStyleProps } from '../../utils';
+export function ErrorSVG(props: StyleProps) {
+  // Create a unique ID so that more than one gradient def can exist
+  // TODO - try to hoist the gradient defs to be global
+  const id = useId();
+  const { styleProps } = useStyleProps(props);
+  const linearGradientID = `${id}-linear-gradient`;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 150 150"
+      {...(styleProps as any)}
+      css={css`
+        .cls-1 {
+          isolation: isolate;
+        }
+        .cls-2 {
+          fill: transparent;
+        }
+        .cls-3 {
+          fill: #2c353f;
+        }
+        .cls-4 {
+          mix-blend-mode: multiply;
+          opacity: 0.18;
+        }
+        .cls-5 {
+          fill: url(#${linearGradientID});
+        }
+        .cls-6,
+        .cls-7 {
+          fill: none;
+          stroke-linecap: round;
+          stroke-miterlimit: 10;
+        }
+        .cls-6 {
+          stroke: #02bf92;
+          stroke-dasharray: 0 6.31;
+        }
+        .cls-7 {
+          stroke: #5bdbff;
+          stroke-width: 2px;
+        }
+      `}
+    >
+      <defs>
+        <linearGradient
+          id={linearGradientID}
+          x1="40.04"
+          y1="75.24"
+          x2="109.77"
+          y2="75.24"
+          gradientTransform="translate(150.24 0.29) rotate(90)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stopColor="#636a71" />
+          <stop offset="1" stopColor="#38424e" />
+        </linearGradient>
+      </defs>
+      <g className="cls-1">
+        <g id="Layer_2" data-name="Layer 2">
+          <g id="BG">
+            <rect className="cls-2" width="150" height="150" />
+            <circle className="cls-3" cx="75" cy="75.2" r="64.93" />
+          </g>
+          <g id="Art">
+            <image
+              className="cls-4"
+              width="122"
+              height="121"
+              transform="translate(14.23 14.82)"
+              xlinkHref="data:image/png;base64,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"
+            />
+            <rect
+              className="cls-5"
+              x="40.13"
+              y="40.33"
+              width="69.74"
+              height="69.74"
+              rx="4.81"
+              transform="translate(-31.21 75.06) rotate(-45)"
+            />
+            <line
+              className="cls-6"
+              x1="75.01"
+              y1="17.89"
+              x2="75.01"
+              y2="3.44"
+            />
+            <line
+              className="cls-6"
+              x1="55.41"
+              y1="21.34"
+              x2="50.47"
+              y2="7.76"
+            />
+            <line
+              className="cls-6"
+              x1="38.17"
+              y1="31.29"
+              x2="28.88"
+              y2="20.22"
+            />
+            <line
+              className="cls-6"
+              x1="25.38"
+              y1="46.53"
+              x2="12.86"
+              y2="39.31"
+            />
+            <line
+              className="cls-6"
+              x1="18.57"
+              y1="65.24"
+              x2="4.33"
+              y2="62.73"
+            />
+            <line
+              className="cls-6"
+              x1="18.56"
+              y1="85.14"
+              x2="4.33"
+              y2="87.65"
+            />
+            <line
+              className="cls-6"
+              x1="25.36"
+              y1="103.84"
+              x2="12.85"
+              y2="111.07"
+            />
+            <line
+              className="cls-6"
+              x1="38.15"
+              y1="119.09"
+              x2="28.86"
+              y2="130.16"
+            />
+            <line
+              className="cls-6"
+              x1="55.39"
+              y1="129.05"
+              x2="50.44"
+              y2="142.63"
+            />
+            <line
+              className="cls-6"
+              x1="74.99"
+              y1="132.51"
+              x2="74.99"
+              y2="146.96"
+            />
+            <line
+              className="cls-6"
+              x1="94.59"
+              y1="129.06"
+              x2="99.53"
+              y2="142.64"
+            />
+            <line
+              className="cls-6"
+              x1="111.83"
+              y1="119.11"
+              x2="121.12"
+              y2="130.18"
+            />
+            <line
+              className="cls-6"
+              x1="124.62"
+              y1="103.87"
+              x2="137.14"
+              y2="111.09"
+            />
+            <line
+              className="cls-6"
+              x1="131.43"
+              y1="85.17"
+              x2="145.67"
+              y2="87.67"
+            />
+            <line
+              className="cls-6"
+              x1="131.44"
+              y1="65.26"
+              x2="145.67"
+              y2="62.75"
+            />
+            <line
+              className="cls-6"
+              x1="124.64"
+              y1="46.56"
+              x2="137.15"
+              y2="39.33"
+            />
+            <line
+              className="cls-6"
+              x1="111.85"
+              y1="31.31"
+              x2="121.14"
+              y2="20.24"
+            />
+            <line
+              className="cls-6"
+              x1="94.61"
+              y1="21.35"
+              x2="99.56"
+              y2="7.77"
+            />
+            <circle className="cls-7" cx="75" cy="100.67" r="5.34" />
+            <path
+              className="cls-7"
+              d="M76.88,86.93H73.12a2.51,2.51,0,0,1-2.5-2.32L68,47.07a2.49,2.49,0,0,1,2.49-2.67h9.06A2.49,2.49,0,0,1,82,47.07L79.38,84.61A2.51,2.51,0,0,1,76.88,86.93Z"
+            />
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+}
diff --git a/src/empty/graphics/NotFoundSVG.tsx b/src/empty/graphics/NotFoundSVG.tsx
new file mode 100644
index 00000000..9383c7ff
--- /dev/null
+++ b/src/empty/graphics/NotFoundSVG.tsx
@@ -0,0 +1,173 @@
+import React, { useId } from 'react';
+import { css } from '@emotion/react';
+import { StyleProps } from '../../types';
+import { useStyleProps } from '../../utils';
+export const NotFoundSVG = (props: StyleProps) => {
+  // Create a unique ID so that more than one gradient def can exist
+  // TODO - try to hoist the gradient defs to be global
+  const id = useId();
+  const { styleProps } = useStyleProps(props);
+  const linearGradientID1 = `${id}-linear-gradient-1`;
+  const linearGradientId2 = `${id}-linear-gradient-2`;
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 150 150"
+      {...(styleProps as any)}
+      css={css`
+        .cls-1 {
+          isolation: isolate;
+        }
+        .cls-2 {
+          fill: transparent;
+        }
+        .cls-14,
+        .cls-3 {
+          fill: #2c353f;
+        }
+        .cls-4 {
+          fill: url(#${id});
+        }
+        .cls-10,
+        .cls-13,
+        .cls-5,
+        .cls-6,
+        .cls-7,
+        .cls-8,
+        .cls-9 {
+          fill: none;
+          stroke-linecap: round;
+          stroke-miterlimit: 10;
+        }
+        .cls-5,
+        .cls-6,
+        .cls-7,
+        .cls-8,
+        .cls-9 {
+          stroke: #5bdbff;
+        }
+        .cls-5 {
+          stroke-width: 0.95px;
+        }
+        .cls-6 {
+          stroke-width: 0.75px;
+        }
+        .cls-7 {
+          stroke-width: 0.55px;
+        }
+        .cls-8 {
+          stroke-width: 0.35px;
+        }
+        .cls-9 {
+          stroke-width: 0.25px;
+        }
+        .cls-10 {
+          stroke: #02bf92;
+          stroke-dasharray: 0 5.11;
+        }
+        .cls-11 {
+          mix-blend-mode: multiply;
+          opacity: 0.18;
+        }
+        .cls-12,
+        .cls-14 {
+          stroke: #ededed;
+          stroke-miterlimit: 1;
+          stroke-width: 1.5px;
+        }
+        .cls-12 {
+          fill: url(#${linearGradientId2});
+        }
+        .cls-13 {
+          stroke: #fff;
+          stroke-width: 0.5px;
+        }
+      `}
+    >
+      <defs>
+        <linearGradient
+          id={linearGradientID1}
+          x1="75.17"
+          y1="34.89"
+          x2="75.17"
+          y2="118.38"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stopColor="#636a71" stopOpacity="0.9" />
+          <stop offset="1" stopColor="#636a71" stopOpacity="0" />
+        </linearGradient>
+        <linearGradient
+          id={linearGradientId2}
+          x1="20.04"
+          y1="58.35"
+          x2="127.35"
+          y2="30.32"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0" stopColor="#636a71" />
+          <stop offset="1" stopColor="#38424e" />
+        </linearGradient>
+      </defs>
+      <g className="cls-1">
+        <g id={`${id}-Layer_2`} data-name="Layer 2">
+          <g id={`${id}-BG`}>
+            <rect className="cls-2" width="150" height="150" />
+            <circle className="cls-3" cx="75" cy="75" r="64.93" />
+          </g>
+          <g id={`${id}-Art`}>
+            <path
+              className="cls-4"
+              d="M29.68,121.49s17.5,18.44,44.4,18.44c30.24,0,46.58-18.78,46.58-18.78L74.08,34.89"
+            />
+            <ellipse
+              className="cls-5"
+              cx="75"
+              cy="124.23"
+              rx="29.32"
+              ry="5.94"
+            />
+            <ellipse
+              className="cls-6"
+              cx="75"
+              cy="106.36"
+              rx="24.35"
+              ry="4.93"
+            />
+            <ellipse className="cls-7" cx="75" cy="90.5" rx="19.38" ry="3.92" />
+            <ellipse
+              className="cls-8"
+              cx="75"
+              cy="77.86"
+              rx="14.41"
+              ry="2.92"
+            />
+            <ellipse className="cls-9" cx="75" cy="66.72" rx="9.44" ry="1.91" />
+            <path
+              className="cls-10"
+              d="M26.49,108.86a59.58,59.58,0,1,1,98.8,0"
+            />
+            <image
+              className="cls-11"
+              width="142"
+              height="66"
+              transform="translate(3.51 9.54)"
+              xlinkHref="data:image/png;base64,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"
+            />
+            <path
+              className="cls-12"
+              d="M91.46,30C113,27.51,129,28.76,129.89,33.61c1.18,6.21-22.72,16-53.37,21.78s-56.46,5.51-57.64-.7C18,49.83,32.42,42.8,53.46,37.18"
+            />
+            <path
+              className="cls-13"
+              d="M71.65,51.92C53,55.45,36.59,56.05,29.11,53.87"
+            />
+            <path
+              className="cls-14"
+              d="M52.63,40C53.46,33.83,61,27.9,70.94,26s19,.82,22.09,6.15l0,0A60.63,60.63,0,0,1,52.63,40Z"
+            />
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+};
diff --git a/src/empty/graphics/index.tsx b/src/empty/graphics/index.tsx
index 6341f3c8..152427aa 100644
--- a/src/empty/graphics/index.tsx
+++ b/src/empty/graphics/index.tsx
@@ -1,2 +1,3 @@
-export * from './EmptyDocuments';
-export * from './EmptyDocuments';
+export * from './EmptyDocumentsSVG';
+export * from './NotFoundSVG';
+export * from './ErrorSVG';
diff --git a/stories/EmptyGraphic.stories.tsx b/stories/EmptyGraphic.stories.tsx
index 80828c8f..808ec447 100644
--- a/stories/EmptyGraphic.stories.tsx
+++ b/stories/EmptyGraphic.stories.tsx
@@ -25,7 +25,11 @@ const meta: Meta = {
 
 export default meta;
 
-const graphics: EmptyGraphicProps['graphicKey'][] = ['documents'];
+const graphics: EmptyGraphicProps['graphicKey'][] = [
+  'documents',
+  'not found',
+  'error',
+];
 export const Gallery = () => {
   return (
     <ul>