From 7b4debd8c8eb61aeae8abbb4a09d8cac1f1f1a7a Mon Sep 17 00:00:00 2001
From: Jake Laderman <jsladerman@gmail.com>
Date: Thu, 8 Aug 2024 16:26:23 -0400
Subject: [PATCH] feat: remove grommet

---
 package.json                 |  2 -
 src/components/InfoPanel.tsx | 74 ------------------------------------
 src/index.ts                 |  1 -
 yarn.lock                    | 35 ++---------------
 4 files changed, 3 insertions(+), 109 deletions(-)
 delete mode 100644 src/components/InfoPanel.tsx

diff --git a/package.json b/package.json
index f5abe3cf2..7ac8ee31a 100644
--- a/package.json
+++ b/package.json
@@ -48,13 +48,11 @@
     "babel-plugin-styled-components": "2.1.4",
     "chroma-js": "2.4.2",
     "classnames": "2.3.2",
-    "grommet": "2.34.2",
     "highlight.js": "11.9.0",
     "honorable-recipe-mapper": "0.2.0",
     "immer": "10.0.3",
     "lodash-es": "4.17.21",
     "moment": "2.29.4",
-    "prop-types": "15.8.1",
     "react-animate-height": "3.2.3",
     "react-aria": "3.31.1",
     "react-embed": "3.7.0",
diff --git a/src/components/InfoPanel.tsx b/src/components/InfoPanel.tsx
deleted file mode 100644
index 3cdcea2e0..000000000
--- a/src/components/InfoPanel.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-// TODO: Replace grommet Layer with semi-compatible replacement ./Layer.tsx
-// Not sure if we need to support `plain` prop
-import { Layer } from 'grommet'
-import { Div, Flex, Span } from 'honorable'
-
-import { Card, CloseIcon, IconFrame } from '../index'
-
-export default function InfoPanel({
-  title,
-  onClose = () => {},
-  width = 420,
-  marginTop = '0',
-  contentHeight = 300,
-  contentPadding = 0,
-  contentGap = 0,
-  children,
-}: {
-  title: string
-  onClose?: () => void
-  width?: number | string
-  marginTop?: string
-  contentHeight?: number | string
-  contentPadding?: number | string
-  contentGap?: number | string
-  children?: JSX.Element | JSX.Element[] | string
-}) {
-  return (
-    <Layer
-      plain
-      onClickOutside={onClose}
-      position="top-right"
-      margin={{ top: marginTop }}
-    >
-      <Card
-        fillLevel={2}
-        width={width}
-        overflow="hidden"
-        margin="large"
-      >
-        <Div
-          padding="medium"
-          borderBottom="1px solid border-fill-two"
-        >
-          <Flex
-            align="center"
-            justify="space-between"
-          >
-            <Span
-              fontSize={18}
-              fontWeight={500}
-              lineHeight="24px"
-            >
-              {title}
-            </Span>
-            <IconFrame
-              clickable
-              icon={<CloseIcon />}
-              onClick={() => onClose()}
-            />
-          </Flex>
-        </Div>
-        <Flex
-          direction="column"
-          overflowY="auto"
-          gap={contentGap}
-          padding={contentPadding}
-          height={contentHeight}
-        >
-          {children}
-        </Flex>
-      </Card>
-    </Layer>
-  )
-}
diff --git a/src/index.ts b/src/index.ts
index e9a702f2f..c493f9bdf 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -42,7 +42,6 @@ export { default as ProgressBar } from './components/ProgressBar'
 export { default as Prop } from './components/Prop'
 export { default as PropWide } from './components/PropWide'
 export { default as PropsContainer } from './components/PropsContainer'
-export { default as InfoPanel } from './components/InfoPanel'
 export { default as UserDetails } from './components/UserDetails'
 export { default as Radio } from './components/Radio'
 export { default as RadioGroup } from './components/RadioGroup'
diff --git a/yarn.lock b/yarn.lock
index bd54e9aa5..1e304dab8 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3093,7 +3093,6 @@ __metadata:
     eslint-plugin-storybook: 0.6.15
     firebase-tools: 11.30.0
     fuse.js: 6.6.2
-    grommet: 2.34.2
     highlight.js: 11.9.0
     honorable: 1.0.0-beta.17
     honorable-recipe-mapper: 0.2.0
@@ -3108,7 +3107,6 @@ __metadata:
     moment: 2.29.4
     npm-run-all: 4.1.5
     prettier: 3.0.3
-    prop-types: 15.8.1
     react: ^18.3.1
     react-animate-height: 3.2.3
     react-aria: 3.31.1
@@ -12341,33 +12339,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"grommet-icons@npm:^4.10.0":
-  version: 4.12.1
-  resolution: "grommet-icons@npm:4.12.1"
-  peerDependencies:
-    react: ^16.6.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.6.0 || ^17.0.0 || ^18.0.0
-    styled-components: ">= 5.x"
-  checksum: 2cacc5c45b2b7a8633564f084f28fa9c2cb1ae30e2c8865523353da6f407b9c52df8c6f2462b9c478b667bbff9a2bc9ef10f9597fdc83445b8f1879803a47f42
-  languageName: node
-  linkType: hard
-
-"grommet@npm:2.34.2":
-  version: 2.34.2
-  resolution: "grommet@npm:2.34.2"
-  dependencies:
-    grommet-icons: ^4.10.0
-    hoist-non-react-statics: ^3.2.0
-    markdown-to-jsx: ^7.2.0
-    prop-types: ^15.8.1
-  peerDependencies:
-    react: ^16.6.1 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.6.1 || ^17.0.0 || ^18.0.0
-    styled-components: ^5.1.0
-  checksum: 2592d9ca2108225fb8c2d053cac86c9bff90ad09f7950231538449a24736471340c58c9e7abbffe060d2c5ecc9347ce8f7c4592a2157b83d5341dc06c56e12bd
-  languageName: node
-  linkType: hard
-
 "gtoken@npm:^5.0.4":
   version: 5.3.2
   resolution: "gtoken@npm:5.3.2"
@@ -12639,7 +12610,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hoist-non-react-statics@npm:^3.0.0, hoist-non-react-statics@npm:^3.2.0, hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.1, hoist-non-react-statics@npm:^3.3.2":
+"hoist-non-react-statics@npm:^3.0.0, hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.1, hoist-non-react-statics@npm:^3.3.2":
   version: 3.3.2
   resolution: "hoist-non-react-statics@npm:3.3.2"
   dependencies:
@@ -14911,7 +14882,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"markdown-to-jsx@npm:^7.1.8, markdown-to-jsx@npm:^7.2.0":
+"markdown-to-jsx@npm:^7.1.8":
   version: 7.4.7
   resolution: "markdown-to-jsx@npm:7.4.7"
   peerDependencies:
@@ -16846,7 +16817,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types@npm:15.8.1, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
+"prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
   dependencies: