feat: Update design system (#561)

pluralsh · Dec 20, 2023 · 6b0c8b0 · 6b0c8b0
1 parent 50a61d1
commit 6b0c8b0
Show file tree

Hide file tree

Showing 30 changed files with 1,720 additions and 2,166 deletions.
diff --git a/assets/package.json b/assets/package.json
@@ -38,16 +38,16 @@
     "@emotion/styled": "11.11.0",
     "@graphql-codegen/named-operations-object": "3.0.0",
     "@jumpn/utils-graphql": "0.6.0",
-    "@markdoc/markdoc": "0.3.0",
+    "@markdoc/markdoc": "0.4.0",
     "@nivo/core": "0.83.0",
     "@nivo/geo": "0.83.0",
     "@nivo/line": "0.83.0",
     "@nivo/pie": "0.83.0",
     "@nivo/radial-bar": "0.83.0",
     "@nivo/tooltip": "0.83.0",
-    "@pluralsh/design-system": "3.13.1",
+    "@pluralsh/design-system": "3.14.1",
     "@react-hooks-library/core": "0.5.1",
-    "@tanstack/react-virtual": "3.0.0-beta.68",
+    "@tanstack/react-virtual": "3.0.1",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.3",
@@ -64,7 +64,7 @@
     "filesize": "10.0.12",
     "forge-core": "1.4.6",
     "fuse.js": "6.6.2",
-    "grommet": "2.32.2",
+    "grommet": "2.34.2",
     "grommet-icons": "4.10.0",
     "highlight.js": "11.9.0",
     "honorable": "1.0.0-beta.17",
@@ -117,7 +117,7 @@
     "slate-react": "0.95.0",
     "styled-components": "5.3.11",
     "tinyqueue": "2.0.3",
-    "type-fest": "4.6.0",
+    "type-fest": "4.8.3",
     "use-immer": "0.9.0",
     "uuid": "9.0.1",
     "workbox-core": "7.0.0",
@@ -137,26 +137,26 @@
     "@graphql-codegen/typescript": "4.0.1",
     "@graphql-codegen/typescript-operations": "4.0.1",
     "@graphql-codegen/typescript-react-apollo": "4.1.0",
-    "@pluralsh/eslint-config-typescript": "2.5.116",
-    "@pluralsh/stylelint-config": "2.0.9",
+    "@pluralsh/eslint-config-typescript": "2.5.150",
+    "@pluralsh/stylelint-config": "2.0.10",
     "@types/jsdom": "21.1.5",
     "@types/styled-components": "5.1.30",
     "@types/uuid": "9.0.7",
-    "@typescript-eslint/eslint-plugin": "6.10.0",
-    "@typescript-eslint/parser": "6.10.0",
-    "@vitejs/plugin-basic-ssl": "1.0.1",
-    "@vitejs/plugin-react": "4.1.1",
-    "@vitest/ui": "0.34.7",
+    "@typescript-eslint/eslint-plugin": "6.15.0",
+    "@typescript-eslint/parser": "6.15.0",
+    "@vitejs/plugin-basic-ssl": "1.0.2",
+    "@vitejs/plugin-react": "4.2.1",
+    "@vitest/ui": "1.1.0",
     "babel-plugin-styled-components": "2.1.4",
     "concurrently": "8.1.0",
     "customize-cra": "1.0.0",
     "cypress": "12.14.0",
-    "eslint": "8.42.0",
+    "eslint": "8.56.0",
     "eslint-config-pluralsh": "3.1.0",
-    "eslint-config-prettier": "9.0.0",
-    "eslint-plugin-import": "2.28.1",
+    "eslint-config-prettier": "9.1.0",
+    "eslint-plugin-import": "2.29.1",
     "eslint-plugin-import-newlines": "1.3.4",
-    "eslint-plugin-jsx-a11y": "6.7.1",
+    "eslint-plugin-jsx-a11y": "6.8.0",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
     "husky": "8.0.3",
@@ -167,13 +167,13 @@
     "prettier": "3.0.3",
     "react-error-boundary": "4.0.11",
     "stylelint": "15.11.0",
-    "typescript": "5.2.2",
+    "typescript": "5.3.3",
     "usehooks-ts": "2.9.1",
     "vite": "4.5.0",
-    "vite-plugin-pwa": "0.16.7",
+    "vite-plugin-pwa": "0.17.4",
     "vite-plugin-rewrite-all": "1.0.1",
-    "vite-tsconfig-paths": "4.2.1",
-    "vitest": "0.34.6",
+    "vite-tsconfig-paths": "4.2.2",
+    "vitest": "1.1.0",
     "wait-on": "7.0.1"
   },
   "lint-staged": {

diff --git a/assets/src/components/account/webhooks/Webhook.tsx b/assets/src/components/account/webhooks/Webhook.tsx
@@ -43,7 +43,6 @@ export default function Webhook({ hook: { id, url, health, insertedAt } }) {
           size="medium"
           textValue="Slack"
           type="floating"
-          minWidth={32}
         />
         <Div
           flexGrow={1}

diff --git a/assets/src/components/apps/Apps.tsx b/assets/src/components/apps/Apps.tsx
@@ -69,7 +69,7 @@ function QueryEmptyState({ query, setQuery }) {
       icon={<AppsIcon size={64} />}
       message="No apps found."
       description={`"${query}" did not match any of your installed applications.`}
-      width={600}
+      css={{ width: 600 }}
     >
       <Button
         secondary
@@ -89,7 +89,7 @@ function ReadyEmptyState() {
       icon={<LifePreserverIcon size={64} />}
       message="That's awkward."
       description="None of your apps appear to be ready. Don't worry — we're here to help."
-      width={400}
+      css={{ width: 400 }}
     >
       <Button
         as="a"
@@ -137,7 +137,7 @@ function PendingFailedEmptyState({ filter }) {
           </>
         ) as any // Workaround as JSX elements are not allowed here.
       }
-      width={500}
+      css={{ width: 500 }}
     />
   )
 }

diff --git a/assets/src/components/apps/app/components/misc.tsx b/assets/src/components/apps/app/components/misc.tsx
@@ -23,7 +23,7 @@ export const statusToBorder = {
 export const statusToSeverity = {
   [Readiness.Ready]: 'success',
   [Readiness.InProgress]: 'warning',
-  [Readiness.Failed]: 'error',
+  [Readiness.Failed]: 'danger',
   [Readiness.Complete]: 'success',
 } as const satisfies Record<ReadinessT, ComponentProps<typeof Chip>['severity']>
 
@@ -44,7 +44,7 @@ const stateToDisplay = {
 const stateToSeverity = {
   [ComponentState.Running]: 'success',
   [ComponentState.Pending]: 'warning',
-  [ComponentState.Failed]: 'error',
+  [ComponentState.Failed]: 'danger',
   [ComponentState.Paused]: 'info',
 } as const satisfies Record<
   ComponentState,

diff --git a/assets/src/components/apps/app/dashboards/Dashboards.tsx b/assets/src/components/apps/app/dashboards/Dashboards.tsx
@@ -52,8 +52,10 @@ export default function Dashboards() {
       {dashboards?.length < 1 && (
         <Flex justify="center">
           <EmptyState
-            marginTop={96}
-            width={500}
+            css={{
+              marginTop: 96,
+              width: 500,
+            }}
             icon={<DashboardIcon size={64} />}
             message="No dashboards available"
             description={

diff --git a/assets/src/components/apps/app/logs/LogsDownloader.tsx b/assets/src/components/apps/app/logs/LogsDownloader.tsx
@@ -48,14 +48,14 @@ export default function LogsDownloader({ query, repo }) {
     <>
       <IconFrame
         icon={<DownloadIcon />}
+        size="medium"
         tooltip
         tooltipProps={{ placement: 'bottom' }}
         clickable
         textValue="Download logs"
         type="secondary"
         onClick={() => setOpen(true)}
-        height={40}
-        width={40}
+        css={{ width: 40, height: 40 }}
       />
       <Modal
         header="Download logs"

diff --git a/assets/src/components/apps/app/logs/LogsFullScreen.tsx b/assets/src/components/apps/app/logs/LogsFullScreen.tsx
@@ -7,7 +7,7 @@ import {
   SearchIcon,
 } from '@pluralsh/design-system'
 
-import { Div, Flex } from 'honorable'
+import { useTheme } from 'styled-components'
 
 import LogsLabels from './LogsLabels'
 import { LogsCard } from './LogsCard'
@@ -24,6 +24,7 @@ export default function LogsFullScreen({
   addLabel,
   removeLabel,
 }) {
+  const theme = useTheme()
   const [open, setOpen] = useState<boolean>(false)
 
   return (
@@ -36,19 +37,20 @@ export default function LogsFullScreen({
         textValue="Fullscreen logs"
         type="secondary"
         onClick={() => setOpen(true)}
-        height={40}
-        width={40}
+        css={{ width: 40, height: 40 }}
       />
       {open && (
-        <Div
-          backgroundColor="rgba(23, 26, 33, 0.8)"
-          padding="xxxxlarge"
-          position="fixed"
-          top="0"
-          left="0"
-          height="100vh"
-          width="100vw"
-          zIndex={10}
+        <div
+          css={{
+            backgroundColor: theme.colors['modal-backdrop'],
+            padding: theme.spacing.xxxxlarge,
+            position: 'fixed',
+            top: '0',
+            left: '0',
+            height: '100vh',
+            width: '100vw',
+            zIndex: 10,
+          }}
         >
           <IconFrame
             icon={<CloseIcon />}
@@ -57,16 +59,22 @@ export default function LogsFullScreen({
             type="floating"
             clickable
             onClick={() => setOpen(false)}
-            height={40}
-            width={40}
-            top={0}
-            right={0}
-            margin="large"
-            position="fixed"
+            css={
+              {
+                position: 'fixed',
+                height: 40,
+                width: 40,
+                top: 0,
+                right: 0,
+                margin: theme.spacing.large,
+              } as const
+            }
           />
-          <Flex
-            gap="medium"
-            grow={1}
+          <div
+            css={{
+              gap: 'medium',
+              grow: 1,
+            }}
           >
             <Input
               backgroundColor="fill-one"
@@ -84,7 +92,7 @@ export default function LogsFullScreen({
               setLabels={setLabels}
               fullscreen
             />
-          </Flex>
+          </div>
           <LogsLabels
             labels={labelList}
             removeLabel={removeLabel}
@@ -96,7 +104,7 @@ export default function LogsFullScreen({
             height="100%"
             fullscreen
           />
-        </Div>
+        </div>
       )}
     </>
   )

diff --git a/assets/src/components/apps/app/misc.tsx b/assets/src/components/apps/app/misc.tsx
@@ -71,7 +71,6 @@ export function ListItem({
         {icon && (
           <IconFrame
             icon={icon}
-            minWidth={40}
             size="large"
             textValue={title}
             type="floating"

diff --git a/assets/src/components/apps/app/runbooks/Runbooks.tsx b/assets/src/components/apps/app/runbooks/Runbooks.tsx
@@ -62,8 +62,10 @@ export default function Runbooks() {
       {runbooks?.length < 1 && (
         <Flex justify="center">
           <EmptyState
-            marginTop={96}
-            width={600}
+            css={{
+              marginTop: 96,
+              width: 600,
+            }}
             icon={<RunBookIcon size={64} />}
             message="No runbooks available"
             description={

diff --git a/assets/src/components/apps/app/runbooks/runbook/RunbookAlerts.tsx b/assets/src/components/apps/app/runbooks/runbook/RunbookAlerts.tsx
@@ -66,9 +66,9 @@ function ExpandedItem({
 
 const ChipList = styled.div(({ theme }) => ({
   display: 'flex',
-  flexDiretion: 'row',
+  flexDirection: 'row',
   flexWrap: 'wrap',
-  justifyContent: 'start',
+  justifyContent: 'flex-start',
   gap: theme.spacing.xsmall,
 }))
 

diff --git a/assets/src/components/builds/UpgradePolicies.tsx b/assets/src/components/builds/UpgradePolicies.tsx
@@ -1,4 +1,4 @@
-import { createContext, useCallback, useState } from 'react'
+import { createContext, useCallback, useMemo, useState } from 'react'
 import { GearTrainIcon, IconFrame, Modal } from '@pluralsh/design-system'
 
 import UpgradePoliciesList from './UpgradePoliciesList'
@@ -8,26 +8,25 @@ export const PolicyContext = createContext({})
 export function UpgradePolicies() {
   const [modal, setModal] = useState<any>(null)
   const close = useCallback(() => setModal(null), [setModal])
+  const contextVal = useMemo(() => ({ modal, setModal, close }), [close, modal])
 
   return (
-    // eslint-disable-next-line react/jsx-no-constructed-context-values
-    <PolicyContext.Provider value={{ modal, setModal, close }}>
+    <PolicyContext.Provider value={contextVal}>
       <>
         <IconFrame
           icon={<GearTrainIcon />}
           textValue="Upgrade settings"
           tooltip
           type="secondary"
           size="medium"
-          height={40}
-          width={40}
           clickable
           onClick={() =>
             setModal({
               header: 'Upgrade Policies',
               content: <UpgradePoliciesList />,
             })
           }
+          css={{ width: 40, height: 40 }}
         />
         <Modal
           header={modal?.header}

diff --git a/assets/src/components/cd/addOns/AddOns.tsx b/assets/src/components/cd/addOns/AddOns.tsx
@@ -29,7 +29,7 @@ function QueryEmptyState({ query, setQuery }) {
     <EmptyState
       message="No add-ons found."
       description={query ? `"${query}" did not match any add-ons.` : ''}
-      width={600}
+      css={{ width: 600 }}
     >
       {query && (
         <Button

diff --git a/assets/src/components/cd/cluster/ClusterMetadata.tsx b/assets/src/components/cd/cluster/ClusterMetadata.tsx
@@ -213,7 +213,7 @@ function ClusterStatusChip({
           phase?.toLowerCase() === 'provisioned'
             ? 'success'
             : failureReason || failureMessage
-            ? 'error'
+            ? 'danger'
             : 'neutral'
         }
       >

diff --git a/assets/src/components/cd/clusters/ClusterConditions.tsx b/assets/src/components/cd/clusters/ClusterConditions.tsx
@@ -55,7 +55,7 @@ export const ColStatus = columnHelper.accessor((row) => row?.status, {
             lStatus === 'true'
               ? 'success'
               : lStatus === 'false'
-              ? 'error'
+              ? 'danger'
               : 'neutral'
           }
         >

diff --git a/assets/src/components/cd/clusters/ClusterHealthChip.tsx b/assets/src/components/cd/clusters/ClusterHealthChip.tsx
@@ -59,7 +59,7 @@ function ClusterHealthChip({
       }
     >
       <Chip
-        severity={pinged ? (healthy ? 'success' : 'error') : 'warning'}
+        severity={pinged ? (healthy ? 'success' : 'danger') : 'warning'}
         size={size}
         clickable
       >

diff --git a/assets/src/components/cd/services/CreateGlobalService.tsx b/assets/src/components/cd/services/CreateGlobalService.tsx
@@ -27,7 +27,7 @@ import { GlobalServiceFields } from './GlobalServiceFields'
 
 export const ChipList = styled(ListBoxItemChipList)(({ theme }) => ({
   marginTop: theme.spacing.small,
-  justifyContent: 'start',
+  justifyContent: 'flex-start',
 }))
 
 export const validateTagName = (name) => {