feat: Update to latest design-system (#1266)

pluralsh · Oct 25, 2023 · a2eef51 · a2eef51
1 parent 6425dcd
commit a2eef51
Show file tree

Hide file tree

Showing 32 changed files with 2,485 additions and 2,941 deletions.
diff --git a/www/.eslintrc.cjs b/www/.eslintrc.cjs
@@ -9,5 +9,7 @@ module.exports = {
   rules: {
     '@typescript-eslint/consistent-type-exports': 'error',
     'import-newlines/enforce': 'off',
+    // Allow css prop for styled-components
+    'react/no-unknown-property': ['error', { ignore: ['css'] }],
   },
 }
diff --git a/www/package.json b/www/package.json
@@ -44,7 +44,7 @@
     "@nivo/geo": "0.83.0",
     "@nivo/line": "0.83.0",
     "@octokit/core": "4.2.1",
-    "@pluralsh/design-system": "1.343.0",
+    "@pluralsh/design-system": "3.4.1",
     "@react-spring/web": "9.7.2",
     "@stripe/react-stripe-js": "2.1.0",
     "@stripe/stripe-js": "1.54.0",
@@ -134,7 +134,7 @@
     "@graphql-codegen/typescript": "4.0.0",
     "@graphql-codegen/typescript-operations": "4.0.0",
     "@graphql-codegen/typescript-react-apollo": "3.3.7",
-    "@pluralsh/eslint-config-typescript": "2.5.41",
+    "@pluralsh/eslint-config-typescript": "2.5.84",
     "@pluralsh/stylelint-config": "1.1.3",
     "@types/events": "3.0.0",
     "@types/jsdom": "21.1.1",
@@ -145,11 +145,12 @@
     "@types/react-stripe-elements": "6.0.6",
     "@types/styled-components": "5.1.26",
     "@types/uuid": "9.0.1",
-    "@typescript-eslint/eslint-plugin": "5.59.9",
-    "@typescript-eslint/parser": "5.59.9",
+    "@typescript-eslint/eslint-plugin": "5.62.0",
+    "@typescript-eslint/parser": "5.62.0",
     "@vitejs/plugin-basic-ssl": "1.0.1",
     "@vitejs/plugin-react": "4.0.0",
-    "@vitest/ui": "0.32.0",
+    "@vitest/ui": "0.34.3",
+    "babel-plugin-styled-components": "2.1.4",
     "concurrently": "8.1.0",
     "eslint": "8.42.0",
     "eslint-config-pluralsh": "3.1.0",
@@ -169,10 +170,12 @@
     "source-map-explorer": "2.5.3",
     "stylelint": "15.7.0",
     "stylelint-config-prettier": "9.0.5",
-    "typescript": "4.9.5",
+    "typescript": "5.2.2",
     "vite": "4.4.9",
-    "vite-plugin-pwa": "0.16.4",
-    "vitest": "0.32.0",
+    "vite-plugin-pwa": "0.16.3",
+    "vite-plugin-rewrite-all": "1.0.1",
+    "vite-tsconfig-paths": "4.2.0",
+    "vitest": "0.34.3",
     "wait-on": "7.0.1"
   },
   "lint-staged": {

diff --git a/www/src/components/Invite.tsx b/www/src/components/Invite.tsx
@@ -6,7 +6,7 @@ import { useState } from 'react'
 import { useParams } from 'react-router-dom'
 
 import {
-  Invite,
+  Invite as InviteT,
   User,
   useInviteQuery,
   useRealizeInviteMutation,
@@ -38,7 +38,7 @@ function ExistingInvite({
   id,
   user,
 }: {
-  invite: Invite
+  invite: InviteT
   id: any
   user: User
 }) {
@@ -119,7 +119,7 @@ export default function Invite() {
   if (data?.invite?.user) {
     return (
       <ExistingInvite
-        invite={data?.invite as Invite}
+        invite={data?.invite as InviteT}
         id={inviteId}
         user={data?.invite?.user as User}
       />

diff --git a/www/src/components/account/CreateGroup.tsx b/www/src/components/account/CreateGroup.tsx
@@ -1,6 +1,6 @@
 import { ReactNode, useCallback, useContext, useEffect, useState } from 'react'
-import { Box } from 'grommet'
 import { Button, Modal, ValidatedInput } from '@pluralsh/design-system'
+import { useTheme } from 'styled-components'
 
 import { appendConnection, updateCache } from '../../utils/graphql'
 import { GqlError } from '../utils/Alert'
@@ -10,6 +10,7 @@ import SubscriptionContext from '../../contexts/SubscriptionContext'
 import BillingFeatureBlockModal from './billing/BillingFeatureBlockModal'
 
 export function CreateGroup({ q }: any) {
+  const theme = useTheme()
   const { availableFeatures } = useContext(SubscriptionContext)
   const isAvailable = !!availableFeatures?.userManagement
   const [createModalVisible, setCreateModalVisible] = useState(false)
@@ -82,9 +83,12 @@ export function CreateGroup({ q }: any) {
           </>
         }
       >
-        <Box
-          width="50vw"
-          gap="small"
+        <div
+          css={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: theme.spacing.medium,
+          }}
         >
           {errorMsg}
           <ValidatedInput
@@ -97,7 +101,7 @@ export function CreateGroup({ q }: any) {
             value={description}
             onChange={({ target: { value } }) => setDescription(value)}
           />
-        </Box>
+        </div>
       </Modal>
       <BillingFeatureBlockModal
         open={blockModalVisible}

diff --git a/www/src/components/account/CreateServiceAccount.tsx b/www/src/components/account/CreateServiceAccount.tsx
@@ -43,7 +43,7 @@ function ServiceAccountForm({
   return (
     <Box
       fill
-      gap="small"
+      gap="medium"
       {...box}
     >
       {error && (

diff --git a/www/src/components/account/EditGroup.tsx b/www/src/components/account/EditGroup.tsx
@@ -204,7 +204,7 @@ export function EditGroupAttributes({ group, open, onClose }: any) {
         />
         <Switch
           checked={global}
-          onChange={({ target: { checked } }) => update({ global: checked })}
+          onChange={(checked) => update({ global: checked })}
         >
           Apply globally
         </Switch>

diff --git a/www/src/components/account/Group.tsx b/www/src/components/account/Group.tsx
@@ -40,7 +40,6 @@ function GroupMember({ user, group, first, last, edit }: any) {
   return (
     <ListItem
       flex={false}
-      background="fill-two"
       first={first}
       last={last}
     >

diff --git a/www/src/components/account/InviteUser.tsx b/www/src/components/account/InviteUser.tsx
@@ -9,6 +9,8 @@ import { Button, Div, P, Span } from 'honorable'
 import { useCallback, useContext, useState } from 'react'
 import { Link } from 'react-router-dom'
 
+import { toNumber } from 'lodash'
+
 import { useCurrentUser } from '../../contexts/CurrentUserContext'
 import SubscriptionContext from '../../contexts/SubscriptionContext'
 import { GqlError } from '../utils/Alert'
@@ -40,16 +42,10 @@ export function InviteUser({ refetch }: { refetch?: (() => void) | null }) {
   }, [reset])
 
   const attemptInvite = useCallback(() => {
-    console.log('attempt', {
-      isGrandfathered,
-      isPaidPlan,
-      userCount: account?.userCount,
-    })
-    if (
-      !isGrandfathered &&
-      !isPaidPlan &&
-      (account?.userCount ?? 0) >= MAX_OPEN_SOURCE_USERS
-    ) {
+    let userCount = toNumber(account?.userCount)
+
+    userCount = Number.isNaN(userCount) ? 0 : userCount
+    if (!isGrandfathered && !isPaidPlan && userCount >= MAX_OPEN_SOURCE_USERS) {
       setShowLimitModal(true)
     } else {
       setShowInviteModal(true)

diff --git a/www/src/components/account/Role.tsx b/www/src/components/account/Role.tsx
@@ -1,7 +1,8 @@
-import { Box } from 'grommet'
 import { ValidatedInput } from '@pluralsh/design-system'
 import { useState } from 'react'
 
+import { useTheme } from 'styled-components'
+
 import { BindingInput } from './Typeaheads'
 
 export function GeneralAttributes({
@@ -10,14 +11,18 @@ export function GeneralAttributes({
   bindings,
   setBindings,
 }: any) {
+  const theme = useTheme()
   const [repositories, setRepositories] = useState(
     attributes.repositories?.join(', ')
   )
 
   return (
-    <Box
-      flex={false}
-      gap="small"
+    <div
+      css={{
+        display: 'flex',
+        flexDirection: 'column',
+        rowGap: theme.spacing.medium,
+      }}
     >
       <ValidatedInput
         label="Name"
@@ -68,6 +73,6 @@ export function GeneralAttributes({
           )
         }
       />
-    </Box>
+    </div>
   )
 }
diff --git a/www/src/components/account/RoleForm.tsx b/www/src/components/account/RoleForm.tsx
@@ -1,11 +1,12 @@
-import { Box } from 'grommet'
-import { Span, Switch } from 'honorable'
-import { Tab, TabList, TabPanel } from '@pluralsh/design-system'
+import { Switch, Tab, TabList, TabPanel } from '@pluralsh/design-system'
 import { useCallback, useRef, useState } from 'react'
 
-import { ListItem } from '../profile/ListItem'
+import { useTheme } from 'styled-components'
+
 import { GqlError } from '../utils/Alert'
 
+import { List, ListItem } from '../utils/List'
+
 import { PermissionTypes } from './types'
 
 import { GeneralAttributes } from './Role'
@@ -18,6 +19,7 @@ function PermissionToggle({
   first,
   last,
 }: any) {
+  const theme = useTheme()
   const toggle = useCallback(
     (enable) => {
       if (enable) {
@@ -41,15 +43,37 @@ function PermissionToggle({
     <ListItem
       first={first}
       last={last}
-      background="fill-two"
     >
-      <Box fill="horizontal">
-        <Span fontWeight={500}>{permission.toLowerCase()}</Span>
-        <Span color="text-light">{description}</Span>
-      </Box>
+      <div
+        css={{
+          display: 'flex',
+          flexDirection: 'column',
+          width: '100%',
+        }}
+      >
+        <h4
+          className="stuff"
+          css={{
+            ...theme.partials.text.body1Bold,
+            margin: 0,
+          }}
+        >
+          {permission.toLowerCase()}
+        </h4>
+        <p
+          css={{
+            ...theme.partials.text.body2,
+            color: theme.colors['text-light'],
+            margin: 0,
+          }}
+          color="text-light"
+        >
+          {description}
+        </p>
+      </div>
       <Switch
         checked={!!attributes.permissions.find((perm) => perm === permission)}
-        onChange={({ target: { checked } }) => toggle(checked)}
+        onChange={(checked) => toggle(checked)}
       />
     </ListItem>
   )
@@ -61,24 +85,31 @@ const TABS = {
 }
 
 export function RoleForm({
-  // eslint-disable-next-line
   error,
   attributes,
   setAttributes,
   bindings,
   setBindings,
-  ...box
-}): any {
+}: {
+  error: any
+  attributes: any
+  setAttributes: any
+  bindings: any
+  setBindings: any
+}) {
+  const theme = useTheme()
   const [view, setView] = useState('General')
   const permissions = Object.entries(PermissionTypes)
   const len = permissions.length
   const tabStateRef = useRef<any>(null)
 
   return (
-    <Box
-      flex={false}
-      gap="small"
-      {...box}
+    <div
+      css={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: theme.spacing.medium,
+      }}
     >
       {error && (
         <GqlError
@@ -108,14 +139,34 @@ export function RoleForm({
           />
         )}
         {view === 'Permissions' && (
-          <Box gap="small">
-            <Box>
-              <Span fontWeight="bold">Permissions</Span>
-              <Span>
+          <div
+            css={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: theme.spacing.small,
+            }}
+          >
+            <div
+              css={{
+                display: 'flex',
+                flexDirection: 'column',
+                gap: theme.spacing.xxsmall,
+              }}
+            >
+              <h3 css={{ ...theme.partials.text.body1Bold, margin: 0 }}>
+                Permissions
+              </h3>
+              <p
+                css={{
+                  ...theme.partials.text.body2,
+                  margin: 0,
+                  color: theme.colors['text-light'],
+                }}
+              >
                 Grant permissions to all users and groups bound to this role
-              </Span>
-            </Box>
-            <Box>
+              </p>
+            </div>
+            <List hue="lighter">
               {permissions.map(([perm, description], i) => (
                 <PermissionToggle
                   key={perm}
@@ -127,10 +178,10 @@ export function RoleForm({
                   last={i === len - 1}
                 />
               ))}
-            </Box>
-          </Box>
+            </List>
+          </div>
         )}
       </TabPanel>
-    </Box>
+    </div>
   )
 }