Packages redesign

.gitignore

@@ -66,3 +66,5 @@ yarn-error.log*
 
 cert.pem
 key.pem
+
+.vscode

www/.eslintrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  extends: [
+    '@pluralsh/eslint-config-typescript',
+  ],
+  globals: {
+    JSX: true,
+  },
+}

www/.yarnrc.yml

@@ -1,2 +1,7 @@
-yarnPath: .yarn/releases/yarn-3.2.1.cjs
 nodeLinker: node-modules
+
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-typescript.cjs
+    spec: "@yarnpkg/plugin-typescript"
+
+yarnPath: .yarn/releases/yarn-3.2.1.cjs

www/package.json

@@ -21,8 +21,8 @@
   "dependencies": {
     "@absinthe/socket": "0.2.1",
     "@apollo/client": "3.6.9",
-    "@emotion/react": "11.9.3",
-    "@emotion/styled": "11.9.3",
+    "@emotion/react": "11.10.0",
+    "@emotion/styled": "11.10.0",
     "@gitbeaker/browser": "35.7.0",
     "@jest/types": "28.1.3",
     "@nivo/core": "0.79.0",
@@ -44,19 +44,19 @@
     "fuse.js": "6.6.2",
     "graphql": "16.5.0",
     "graphql-ws": "5.9.1",
-    "grommet": "2.25.0",
+    "grommet": "2.25.1",
     "grommet-icons": "4.7.0",
     "highlight.js": "11.6.0",
-    "honorable": "0.129.0",
+    "honorable": "0.135.0",
     "honorable-recipe-mp": "0.3.0",
-    "honorable-theme-default": "0.63.0",
+    "honorable-theme-default": "0.65.0",
     "js-yaml": "4.1.0",
     "lodash": "4.17.21",
     "memoize-one": "6.0.0",
     "moment": "2.29.4",
     "phoenix": "1.6.11",
     "pluralsh-absinthe-socket-apollo-link": "0.2.0",
-    "pluralsh-design-system": "1.118.0",
+    "pluralsh-design-system": "1.155.0",
     "prop-types": "15.8.1",
     "query-string": "7.1.1",
     "react": "18.2.0",
@@ -69,12 +69,13 @@
     "react-dnd": "16.0.1",
     "react-dnd-html5-backend": "16.0.1",
     "react-dom": "18.2.0",
-    "react-file-icon": "1.1.0",
+    "react-file-icon": "1.2.0",
     "react-file-picker": "0.0.6",
     "react-highlight.js": "1.0.7",
     "react-icons": "4.4.0",
     "react-json-view": "1.21.3",
     "react-markdown": "8.0.3",
+    "react-multiline-clamp": "2.0.0",
     "react-portal": "4.2.2",
     "react-resize-detector": "7.1.2",
     "react-router-dom": "6.3.0",
@@ -83,15 +84,15 @@
     "react-spinners": "0.13.3",
     "react-stripe-elements": "6.1.2",
     "react-sweet-progress": "1.1.2",
-    "react-toggle": "4.1.2",
+    "react-toggle": "4.1.3",
     "react-transition-group": "4.4.2",
     "react-use-intercom": "1.5.2",
     "react-virtualized-auto-sizer": "1.0.6",
     "react-window": "1.8.7",
     "react-window-reversed": "1.4.1",
     "rehype-raw": "6.1.1",
-    "slate": "0.81.1",
-    "slate-history": "0.66.0",
+    "slate": "0.81.3",
+    "slate-history": "0.81.3",
     "slate-react": "0.81.0",
     "styled-components": "5.3.5",
     "uuid": "8.3.2",
@@ -100,15 +101,18 @@
     "xterm-theme": "1.1.0"
   },
   "devDependencies": {
-    "@babel/core": "7.18.6",
-    "@babel/eslint-parser": "7.18.2",
-    "@babel/preset-env": "7.18.6",
+    "@babel/core": "7.18.10",
+    "@babel/eslint-parser": "7.18.9",
+    "@babel/preset-env": "7.18.10",
     "@babel/preset-react": "7.18.6",
+    "@pluralsh/eslint-config-typescript": "2.3.0",
     "@pluralsh/stylelint-config": "1.0.0",
-    "eslint": "8.19.0",
+    "@typescript-eslint/eslint-plugin": "5.33.1",
+    "@typescript-eslint/parser": "5.33.1",
+    "eslint": "8.22.0",
     "eslint-config-pluralsh": "3.1.0",
     "postcss-import": "8.2.0",
-    "stylelint": "14.9.1",
+    "stylelint": "14.10.0",
     "typescript": "4.7.4"
   },
   "jest": {

www/public/index.html

@@ -108,6 +108,24 @@
         src: url("/ABCMonumentGroteskSemi-Mono-Heavy.woff") format("woff");
         font-weight: 600;
       }
+
+      @font-face {
+        font-family: 'Monument Mono';
+        src: url("/ABCMonumentGroteskMono-Regular.woff") format("woff");
+        font-weight: 400;
+      }
+
+      @font-face {
+        font-family: 'Monument Mono';
+        src: url("/ABCMonumentGroteskMono-Medium.woff") format("woff");
+        font-weight: 500;
+      }
+
+      @font-face {
+        font-family: 'Monument Mono';
+        src: url("/ABCMonumentGroteskMono-Heavy.woff") format("woff");
+        font-weight: 600;
+      }
     </style>
     <!-- Fix Hljs background color so it can be overriden -->
     <style>

www/src/App.js

@@ -3,8 +3,11 @@ import { BrowserRouter, Route, Routes } from 'react-router-dom'
 import { ApolloProvider } from '@apollo/client'
 import { IntercomProvider } from 'react-use-intercom'
 import { Box, Grommet } from 'grommet'
-import { 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'
+
 import mpRecipe from 'honorable-recipe-mp'
 
 import { client } from './helpers/client'
@@ -29,79 +32,84 @@ const honorableTheme = mergeTheme(theme, {
 })
 
 function App() {
+  const mergedStyledTheme = mergeDeep(DEFAULT_THEME, styledTheme)
+
   return (
     <ApolloProvider client={client}>
       <IntercomProvider appId={INTERCOM_APP_ID}>
         <ThemeProvider theme={honorableTheme}>
-          <CssBaseline />
-          <Grommet
-            full
-            theme={DEFAULT_THEME}
-            themeMode="dark"
-          >
-            <Box
-              width="100vw"
-              height="100vh"
-              background="#171A21"
+          <StyledThemeProvider theme={mergedStyledTheme}>
+            <CssBaseline />
+            <GlobalStyle />
+            <Grommet
+              full
+              theme={mergedStyledTheme}
+              themeMode="dark"
             >
-              <BrowserRouter>
-                <Routes>
-                  <Route
-                    path="/reset-password/:id"
-                    element={<ResetPassword />}
-                  />
-                  <Route
-                    path="/password-reset"
-                    element={<PasswordReset />}
-                  />
-                  <Route
-                    path="/confirm-email/:id"
-                    element={<EmailConfirmed />}
-                  />
-                  <Route
-                    path="/invite/:inviteId"
-                    element={<Invite />}
-                  />
-                  <Route
-                    path="/passwordless-login/:token"
-                    element={<PasswordlessLogin />}
-                  />
-                  <Route
-                    path="/oauth/callback/github/shell"
-                    element={<Plural />}
-                  />
-                  <Route
-                    path="/oauth/callback/gitlab/shell"
-                    element={<Plural />}
-                  />
-                  <Route
-                    path="/oauth/callback/:service"
-                    element={<OAuthCallback />}
-                  />
-                  <Route
-                    path="/sso/callback"
-                    element={<SSOCallback />}
-                  />
-                  <Route
-                    path="/login"
-                    element={<Login />}
-                  />
-                  <Route
-                    path="/signup"
-                    element={<Signup />}
-                  />
-                  <Route
-                    path="/oauth/consent"
-                    element={<OAuthConsent />}
-                  />
-                  <Route
-                    path="*"
-                    element={<Plural />}
-                  />
-                </Routes>
-              </BrowserRouter>
-            </Box>
-          </Grommet>
+              <Box
+                width="100vw"
+                height="100vh"
+                background="#171A21"
+              >
+                <BrowserRouter>
+                  <Routes>
+                    <Route
+                      path="/reset-password/:id"
+                      element={<ResetPassword />}
+                    />
+                    <Route
+                      path="/password-reset"
+                      element={<PasswordReset />}
+                    />
+                    <Route
+                      path="/confirm-email/:id"
+                      element={<EmailConfirmed />}
+                    />
+                    <Route
+                      path="/invite/:inviteId"
+                      element={<Invite />}
+                    />
+                    <Route
+                      path="/passwordless-login/:token"
+                      element={<PasswordlessLogin />}
+                    />
+                    <Route
+                      path="/oauth/callback/github/shell"
+                      element={<Plural />}
+                    />
+                    <Route
+                      path="/oauth/callback/gitlab/shell"
+                      element={<Plural />}
+                    />
+                    <Route
+                      path="/oauth/callback/:service"
+                      element={<OAuthCallback />}
+                    />
+                    <Route
+                      path="/sso/callback"
+                      element={<SSOCallback />}
+                    />
+                    <Route
+                      path="/login"
+                      element={<Login />}
+                    />
+                    <Route
+                      path="/signup"
+                      element={<Signup />}
+                    />
+                    <Route
+                      path="/oauth/consent"
+                      element={<OAuthConsent />}
+                    />
+                    <Route
+                      path="*"
+                      element={<Plural />}
+                    />
+                  </Routes>
+                </BrowserRouter>
+              </Box>
+            </Grommet>
+          </StyledThemeProvider>
         </ThemeProvider>
       </IntercomProvider>
     </ApolloProvider>

www/src/App.test.tsx

@@ -5,6 +5,7 @@ import App from './App'
 describe('App', () => {
   it('should render', () => {
     const container = render(<App />)
+
     expect(container).not.toBeNull()
   })
 })

www/src/components/Breadcrumbs.js

@@ -1,4 +1,6 @@
-import { createContext, useContext, useMemo, useState } from 'react'
+import {
+  createContext, useContext, useMemo, useState,
+} from 'react'
 import { useNavigate } from 'react-router-dom'
 import { Anchor, Box, Text } from 'grommet'
 
@@ -11,6 +13,7 @@ export const BreadcrumbsContext = createContext({
 
 function CrumbLink({ crumb: { url, text, disable } }) {
   const navigate = useNavigate()
+
   // TODO: new design does not cover the "disabled" state. Should it be removed?
   if (disable) {
     return (
@@ -35,6 +38,7 @@ function CrumbLink({ crumb: { url, text, disable } }) {
 
 export function Breadcrumbs() {
   const { breadcrumbs } = useContext(BreadcrumbsContext)
+
   if (breadcrumbs.length === 0) return null
 
   const children = Array.from(lookahead(breadcrumbs, (crumb, next) => {
@@ -60,8 +64,7 @@ export function Breadcrumbs() {
       >{crumb.text}
       </Text>
     )
-  })
-  ).flat()
+  })).flat()
 
   return (
     <Box