remove honorable Flex components (#1930)

assets/package.json

@@ -7,7 +7,7 @@
     "start": "vite",
     "start:dev": "BASE_URL=console.plrl-dev-aws.onplural.sh yarn start",
     "start:cd": "BASE_URL=console.boot-aws.onplural.sh yarn start",
-    "start:prod": "yarn build && BASE_URL=console.plrl-dev-aws.onplural.sh vite preview",
+    "start:prod": "VITE_PROD_SECRET_KEY=1234567890 vite build && BASE_URL=console.boot-aws.onplural.sh vite preview",
     "build": "tsc --build && vite build",
     "test": "vitest --run",
     "test:watch": "vitest",
@@ -49,7 +49,7 @@
     "@nivo/radial-bar": "0.88.0",
     "@nivo/tooltip": "0.88.0",
     "@nivo/treemap": "0.88.0",
-    "@pluralsh/design-system": "5.7.0",
+    "@pluralsh/design-system": "5.7.1",
     "@react-hooks-library/core": "0.6.0",
     "@saas-ui/use-hotkeys": "1.1.3",
     "@tanstack/react-table": "8.20.5",

assets/src/components/cd/cluster/node/NodeEvents.tsx

@@ -1,6 +1,6 @@
-import { useOutletContext } from 'react-router-dom'
-import { Flex } from 'honorable'
+import { Flex } from '@pluralsh/design-system'
 import LoadingIndicator from 'components/utils/LoadingIndicator'
+import { useOutletContext } from 'react-router-dom'
 
 import { Node } from 'generated/graphql'
 

assets/src/components/cd/cluster/node/NodeMetadata.tsx

@@ -1,12 +1,12 @@
-import { useOutletContext } from 'react-router-dom'
-import { Flex } from 'honorable'
+import { Flex } from '@pluralsh/design-system'
+import LoadingIndicator from 'components/utils/LoadingIndicator'
+import { MetadataGrid, MetadataItem } from 'components/utils/Metadata'
 import { Node } from 'generated/graphql'
+import { useOutletContext } from 'react-router-dom'
 import { nodeStatusToReadiness } from 'utils/status'
-import { MetadataGrid, MetadataItem } from 'components/utils/Metadata'
-import LoadingIndicator from 'components/utils/LoadingIndicator'
 
-import { StatusChip } from '../../../cluster/TableElements'
 import { LabelsAnnotations } from '../../../cluster/LabelsAnnotations'
+import { StatusChip } from '../../../cluster/TableElements'
 
 export default function NodeMetadata() {
   const { node } = useOutletContext() as { node: Node }

assets/src/components/cd/cluster/node/NodeRaw.tsx

@@ -1,7 +1,7 @@
+import { Flex } from '@pluralsh/design-system'
+import LoadingIndicator from 'components/utils/LoadingIndicator'
 import { useOutletContext } from 'react-router-dom'
 import { stringify } from 'yaml'
-import { Flex } from 'honorable'
-import LoadingIndicator from 'components/utils/LoadingIndicator'
 
 import { Node } from '../../../../generated/graphql'
 import { RawPageCode } from '../../../utils/RawPageCode.tsx'

assets/src/components/cd/cluster/pod/Pod.tsx

@@ -120,7 +120,7 @@ export default function Pod() {
       </ResponsiveLayoutSidenavContainer>
       <ResponsiveLayoutSpacer />
       <TabPanel
-        as={<ResponsiveLayoutContentContainer overflow="visible" />}
+        as={<ResponsiveLayoutContentContainer css={{ overflow: 'visible' }} />}
         stateRef={tabStateRef}
       >
         <Outlet context={{ pod }} />

assets/src/components/cd/cluster/pod/PodContainers.tsx

@@ -1,6 +1,7 @@
 import {
   Chip,
   CollapseIcon,
+  Flex,
   IconFrame,
   Prop,
   Table,
@@ -11,18 +12,18 @@ import { createColumnHelper, Row } from '@tanstack/react-table'
 import { UnstyledLink } from 'components/utils/Link'
 import { filesize } from 'filesize'
 import { Container, ContainerStatus, Maybe, Port } from 'generated/graphql'
-import { Flex, Span } from 'honorable'
+import { Span } from 'honorable'
 import { ComponentProps, CSSProperties, useMemo } from 'react'
 import { useNavigate } from 'react-router-dom'
 import styled, { useTheme } from 'styled-components'
 import { cpuParser, memoryParser } from 'utils/kubernetes'
 import {
+  containerStatusToReadiness,
   Readiness,
   ReadinessT,
-  containerStatusToReadiness,
+  readinessToContainerLabel,
   readinessToLabel,
   readinessToSeverity,
-  readinessToContainerLabel,
 } from 'utils/status'
 
 import { Overline } from 'components/cd/utils/PermissionsModal.tsx'

assets/src/components/cd/cluster/pod/PodInfo.tsx

@@ -1,27 +1,27 @@
-import { Link, useOutletContext, useParams } from 'react-router-dom'
-import { Flex } from 'honorable'
+import { Button, Flex, LogsIcon } from '@pluralsh/design-system'
 import { ScrollablePage } from 'components/utils/layout/ScrollablePage'
 import { ContainerStatus, Maybe, Pod } from 'generated/graphql'
-import { Button, LogsIcon } from '@pluralsh/design-system'
+import { Link, useOutletContext, useParams } from 'react-router-dom'
 
 import { SubTitle } from '../../../utils/SubTitle'
 
-import { Readiness } from '../../../../utils/status'
 import { getServicePodDetailsPath } from '../../../../routes/cdRoutesConsts'
+import { Readiness } from '../../../../utils/status'
 import { PodConditions } from './PodConditions.tsx'
-import { PodMetadata } from './PodMetadata.tsx'
 import {
   ColCpuReservation,
+  ColExpander,
   ColImage,
   ColMemoryReservation,
   ColName,
   ColPorts,
   ColStatus,
-  ShellLink,
   columnHelper,
-  ColExpander,
   PodContainers,
+  ShellLink,
 } from './PodContainers.tsx'
+import { PodMetadata } from './PodMetadata.tsx'
+import { useTheme } from 'styled-components'
 
 export const statusesToRecord = (statuses?: Maybe<Maybe<ContainerStatus>[]>) =>
   (statuses || []).reduce(
@@ -94,6 +94,7 @@ const columns = [
 
 // It's used by multiple routes.
 export default function PodInfo() {
+  const { spacing } = useTheme()
   const { clusterId, serviceId } = useParams()
   const { pod } = useOutletContext() as { pod: Pod }
   const containers = pod.spec.containers || []
@@ -112,7 +113,7 @@ export default function PodInfo() {
       <Flex
         direction="column"
         gap="xlarge"
-        paddingBottom="large"
+        paddingBottom={spacing.large}
       >
         <section>
           <SubTitle>Containers</SubTitle>

assets/src/components/cd/cluster/pod/PodMetadata.tsx

@@ -1,9 +1,7 @@
-import { Card } from '@pluralsh/design-system'
+import { Card, Flex } from '@pluralsh/design-system'
 
-import { Flex } from 'honorable'
-
-import { Pod } from 'generated/graphql'
 import { LabelPairsSection } from 'components/utils/LabelPairsSection'
+import { Pod } from 'generated/graphql'
 
 import { useTheme } from 'styled-components'
 

assets/src/components/cd/logs/LogsInfoPanel.tsx

@@ -1,5 +1,5 @@
-import { CloseIcon, Modal } from '@pluralsh/design-system'
-import { Div, Flex, Span } from 'honorable'
+import { CloseIcon, Flex, Modal } from '@pluralsh/design-system'
+import { Div, Span } from 'honorable'
 
 export function LogsInfoPanel({
   title,

assets/src/components/cd/services/service/pod/Pod.tsx

@@ -130,7 +130,7 @@ export default function Pod() {
       </ResponsiveLayoutSidenavContainer>
       <ResponsiveLayoutSpacer />
       <TabPanel
-        as={<ResponsiveLayoutContentContainer overflow="visible" />}
+        as={<ResponsiveLayoutContentContainer css={{ overflow: 'visible' }} />}
         stateRef={tabStateRef}
       >
         <Outlet context={{ pod }} />

assets/src/components/cluster/ContainerStatuses.tsx

@@ -1,9 +1,9 @@
-import { Tooltip } from '@pluralsh/design-system'
-import { Div, Flex, Span } from 'honorable'
+import { Flex, Tooltip } from '@pluralsh/design-system'
+import { Div, Span } from 'honorable'
 import styled from 'styled-components'
 import { Readiness, ReadinessT, readinessToContainerLabel } from 'utils/status'
 
-import { ReactElement, type JSX } from 'react'
+import { type JSX, ReactElement } from 'react'
 import { ContainerStatusT } from '../cd/cluster/pod/PodsList.tsx'
 
 const iconBaseProps = {

assets/src/components/cluster/Gauges.tsx

@@ -1,8 +1,8 @@
-import { ReactNode, useMemo } from 'react'
 import { filesize } from 'filesize'
+import { ReactNode, useMemo } from 'react'
 import styled from 'styled-components'
 
-import { Flex, FlexProps } from 'honorable'
+import { Flex, FlexProps } from '@pluralsh/design-system'
 
 import RadialBarChart from 'components/utils/RadialBarChart'
 

assets/src/components/cluster/LabelsAnnotations.tsx

@@ -1,8 +1,8 @@
-import { CardProps, ChipList } from '@pluralsh/design-system'
-import { Div, Flex } from 'honorable'
-import { ReactNode } from 'react'
-import type { LabelPair, Maybe, Metadata as MetadataT } from 'generated/graphql'
+import { CardProps, ChipList, Flex } from '@pluralsh/design-system'
 import { CARD_CONTENT_MAX_WIDTH, MetadataCard } from 'components/utils/Metadata'
+import type { LabelPair, Maybe, Metadata as MetadataT } from 'generated/graphql'
+import { Div } from 'honorable'
+import { ReactNode } from 'react'
 import { useTheme } from 'styled-components'
 
 export const mapify = (tags) =>

assets/src/components/cluster/TableElements.tsx

@@ -2,15 +2,15 @@ import {
   AppIcon,
   CaretRightIcon,
   Chip,
-  IconFrame,
   ChipProps,
+  Flex,
+  IconFrame,
 } from '@pluralsh/design-system'
 import { SortingFn } from '@tanstack/table-core'
 import { UnstyledLink } from 'components/utils/Link'
 import { Maybe } from 'generated/graphql'
-import { Flex } from 'honorable'
 import { ComponentProps, ReactNode } from 'react'
-import styled, { useTheme } from 'styled-components'
+import styled from 'styled-components'
 import {
   PhaseT,
   phaseToSeverity,
@@ -151,11 +151,9 @@ export function LabelWithIcon({
   label?: Maybe<string>
   icon?: Maybe<string>
 }) {
-  const theme = useTheme()
-
   return (
     <Flex
-      gap={theme.spacing.xsmall}
+      gap="xsmall"
       alignItems="center"
     >
       {icon && (

assets/src/components/cluster/containers/ContainerShell.tsx

@@ -1,6 +1,6 @@
-import { Button, ToolIcon, Tooltip } from '@pluralsh/design-system'
+import { Button, Flex, ToolIcon, Tooltip } from '@pluralsh/design-system'
+import { Div } from 'honorable'
 import { useContext, useState } from 'react'
-import { Div, Flex } from 'honorable'
 
 import TerminalThemeSelector from 'components/terminal/TerminalThemeSelector'
 

assets/src/components/cluster/containers/ShellCommandEditor.tsx

@@ -5,8 +5,8 @@ import {
   Input,
   PencilIcon,
 } from '@pluralsh/design-system'
+import { Form } from 'honorable'
 import { useEffect, useRef, useState } from 'react'
-import { Flex, Form } from 'honorable'
 import styled from 'styled-components'
 
 export const CODELINE_HEIGHT = 42
@@ -102,7 +102,7 @@ export function ShellCommandEditor({
 }) {
   const [isEditing, setIsEditing] = useState(false)
   const [inputVal, setInputVal] = useState(command)
-  const inputWrapRef = useRef<HTMLDivElement>(undefined)
+  const inputWrapRef = useRef<HTMLDivElement | null>(null)
 
   useEffect(() => {
     if (!isEditing) {
@@ -136,13 +136,7 @@ export function ShellCommandEditor({
       flex="1 1"
       overflow="hidden"
     >
-      <Flex
-        ref={inputWrapRef as any}
-        minWidth={50}
-        // width="50px"
-        flex="1 1"
-        overflow="hidden"
-      >
+      <WrapperSC ref={inputWrapRef}>
         <CodeWrap
           $isEditing={isEditing}
           className="codeWrap"
@@ -169,7 +163,7 @@ export function ShellCommandEditor({
             }}
           />
         )}
-      </Flex>
+      </WrapperSC>
       {!isEditing && (
         <Button
           floating
@@ -208,3 +202,10 @@ export function ShellCommandEditor({
     </Form>
   )
 }
+
+const WrapperSC = styled.div(() => ({
+  display: 'flex',
+  minWidth: 50,
+  flex: '1 1',
+  overflow: 'hidden',
+}))