feat(frontend): move to new design system package (#731)

Signed-off-by: David van der Spek <[email protected]>

Author: davidspek

www/package.json

@@ -35,6 +35,7 @@
     "@nivo/geo": "0.80.0",
     "@nivo/line": "0.80.0",
     "@octokit/core": "3.6.0",
+    "@pluralsh/design-system": "1.290.2",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "13.4.0",
     "@types/styled-components": "5.1.26",
@@ -60,7 +61,6 @@
     "moment": "2.29.4",
     "phoenix": "1.6.15",
     "pluralsh-absinthe-socket-apollo-link": "0.2.0",
-    "pluralsh-design-system": "1.288.0",
     "prop-types": "15.8.1",
     "query-string": "7.1.1",
     "randomcolor": "0.6.2",

www/src/App.tsx

@@ -3,7 +3,7 @@ import { Route, Routes } from 'react-router-dom'
 import { ApolloProvider } from '@apollo/client'
 import { IntercomProvider } from 'react-use-intercom'
 import { Box, Grommet, ThemeType } from 'grommet'
-import { GlobalStyle, styledTheme, theme } from 'pluralsh-design-system'
+import { GlobalStyle, styledTheme, theme } from '@pluralsh/design-system'
 import { CssBaseline, ThemeProvider, mergeTheme } from 'honorable'
 import { ThemeProvider as StyledThemeProvider } from 'styled-components'
 import { mergeDeep } from '@apollo/client/utilities'

www/src/components/Explore.tsx

@@ -11,7 +11,7 @@ import { useQuery } from '@apollo/client'
 import { Box, Collapsible, Text } from 'grommet'
 import { useNavigate, useParams } from 'react-router-dom'
 import sortBy from 'lodash/sortBy'
-import { CaretDownIcon, CaretRightIcon } from 'pluralsh-design-system'
+import { CaretDownIcon, CaretRightIcon } from '@pluralsh/design-system'
 import { Portal } from 'react-portal'
 import { v4 as uuidv4 } from 'uuid'
 

www/src/components/Invite.tsx

@@ -3,7 +3,7 @@ import { useParams } from 'react-router-dom'
 import { gql, useMutation, useQuery } from '@apollo/client'
 import { Box, Keyboard } from 'grommet'
 import { GqlError } from 'forge-core'
-import { AppIcon, Button } from 'pluralsh-design-system'
+import { AppIcon, Button } from '@pluralsh/design-system'
 
 import { Text } from 'honorable'
 

www/src/components/Login.tsx

@@ -1,5 +1,5 @@
 import { Box, Text } from 'grommet'
-import { CheckIcon, ErrorIcon } from 'pluralsh-design-system'
+import { CheckIcon, ErrorIcon } from '@pluralsh/design-system'
 
 export function disableState(password, confirm) {
   if (password.length === 0) return { disabled: true, reason: '' }

www/src/components/ModalHeader.tsx

@@ -1,5 +1,5 @@
 import { Div, Flex, P } from 'honorable'
-import { CloseIcon } from 'pluralsh-design-system'
+import { CloseIcon } from '@pluralsh/design-system'
 
 export function ModalHeader({ text, setOpen }: any) {
   return (

www/src/components/Plural.tsx

@@ -7,7 +7,7 @@ import {
   useMatch,
 } from 'react-router-dom'
 import { StripeProvider } from 'react-stripe-elements'
-import { Toast } from 'pluralsh-design-system'
+import { Toast } from '@pluralsh/design-system'
 import { useFeature } from '@growthbook/growthbook-react'
 
 import { growthbook } from '../helpers/growthbook'

www/src/components/account/Account.tsx

@@ -1,5 +1,5 @@
 import { Flex } from 'honorable'
-import { TabPanel } from 'pluralsh-design-system'
+import { TabPanel } from '@pluralsh/design-system'
 import { useRef } from 'react'
 import { Outlet } from 'react-router-dom'
 

www/src/components/account/AccountAttributes.tsx

@@ -13,7 +13,7 @@ import {
   Input,
   PageTitle,
   ValidatedInput,
-} from 'pluralsh-design-system'
+} from '@pluralsh/design-system'
 import { useContext, useMemo, useState } from 'react'
 import { useTheme } from 'styled-components'
 

www/src/components/account/AccountSidenav.tsx

@@ -1,4 +1,4 @@
-import { PageCard, Tab, TabList } from 'pluralsh-design-system'
+import { PageCard, Tab, TabList } from '@pluralsh/design-system'
 import { useContext } from 'react'
 import { useLocation } from 'react-router-dom'
 import { Div } from 'honorable'