update DS in doc site (#311)

package.json

@@ -33,10 +33,10 @@
     "@graphql-codegen/typescript-operations": "4.0.0",
     "@graphql-codegen/typescript-react-apollo": "3.3.7",
     "@loomhq/loom-embed": "1.5.0",
-    "@markdoc/markdoc": "0.3.0",
+    "@markdoc/markdoc": "0.4.0",
     "@markdoc/next.js": "0.2.2",
     "@open-draft/until": "2.1.0",
-    "@pluralsh/design-system": "1.343.1",
+    "@pluralsh/design-system": "3.70.1",
     "@react-aria/ssr": "3.6.0",
     "@react-stately/list": "3.8.1",
     "@react-stately/select": "3.5.1",
@@ -49,7 +49,7 @@
     "honorable": "0.194.0",
     "honorable-theme-default": "0.77.0",
     "htmlparser2": "9.1.0",
-    "immer": "10.0.2",
+    "immer": "10.0.3",
     "js-yaml": "4.1.0",
     "lodash": "4.17.21",
     "memoize-one": "6.0.0",
@@ -58,9 +58,9 @@
     "next-transpile-modules": "10.0.0",
     "posthog-js": "1.68.1",
     "raw-loader": "4.0.2",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "react-embed": "3.6.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "react-embed": "3.7.0",
     "react-github-btn": "1.4.0",
     "react-is": "18.2.0",
     "react-spring": "9.7.1",
@@ -78,8 +78,8 @@
     "@pluralsh/eslint-config-typescript": "2.5.41",
     "@pluralsh/stylelint-config": "1.1.3",
     "@types/node": "20.3.1",
-    "@types/react": "18.2.12",
-    "@types/react-dom": "18.2.5",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
     "@types/styled-components": "5.1.26",
     "@typescript-eslint/eslint-plugin": "5.59.11",
     "concurrently": "8.2.0",
@@ -99,7 +99,7 @@
     "react-hooks": "1.0.1",
     "stylelint": "15.7.0",
     "stylelint-config-prettier": "9.0.5",
-    "typescript": "4.9.5"
+    "typescript": "5.4.5"
   },
   "packageManager": "[email protected]",
   "lint-staged": {

src/components/DocSearchStyles.tsx

@@ -68,7 +68,7 @@ const GlobalStyles = createGlobalStyle(({ theme }) => ({
       display: 'none',
     },
   '.DocSearch-Form:focus-within': {
-    boxShadow: theme.boxShadows.focused,
+    outline: theme.borders['outline-focused'],
   },
   '.DocSearch-Hit-source': {
     ...theme.partials.marketingText.subtitle2,

src/components/SideNav.tsx

@@ -62,39 +62,39 @@ const KeyboardNavContext = createContext<{
   keyboardNavigable: true,
 })
 
-const StyledLink = styled(NextLink)<{ $desktop: boolean }>(
-  ({ $desktop, theme }) => ({
+const StyledLink = styled(NextLink as any)<{
+  $desktop: boolean
+}>(({ $desktop, theme }) => ({
+  display: 'flex',
+  gap: theme.spacing.small,
+  cursor: 'pointer',
+  flexGrow: 1,
+  flexShrink: 1,
+  margin: 0,
+  padding: `${theme.spacing.xsmall}px ${theme.spacing.medium}px`,
+  ...theme.partials.text.body2,
+  textDecoration: 'none',
+  color: theme.colors['text-light'],
+  '.iconRight': {
     display: 'flex',
-    gap: theme.spacing.small,
-    cursor: 'pointer',
+    justifyContent: 'right',
     flexGrow: 1,
-    flexShrink: 1,
-    margin: 0,
-    padding: `${theme.spacing.xsmall}px ${theme.spacing.medium}px`,
-    ...theme.partials.text.body2,
-    textDecoration: 'none',
-    color: theme.colors['text-light'],
-    '.iconRight': {
-      display: 'flex',
-      justifyContent: 'right',
-      flexGrow: 1,
-    },
-    '&:hover': {
-      color: theme.colors.text,
-    },
-    '&:focus, &:focus-visible': {
-      outline: 'none',
-      boxShadow: 'none',
-    },
-    '&:focus-visible::after': {
-      borderStartStartRadius: theme.borderRadiuses.medium,
-      borderEndStartRadius: theme.borderRadiuses.medium,
-      borderStartEndRadius: $desktop ? 0 : theme.borderRadiuses.medium,
-      borderEndEndRadius: $desktop ? 0 : theme.borderRadiuses.medium,
-      ...theme.partials.focus.insetAbsolute,
-    },
-  })
-)
+  },
+  '&:hover': {
+    color: theme.colors.text,
+  },
+  '&:focus, &:focus-visible': {
+    outline: 'none',
+    boxShadow: 'none',
+  },
+  '&:focus-visible::after': {
+    borderStartStartRadius: theme.borderRadiuses.medium,
+    borderEndStartRadius: theme.borderRadiuses.medium,
+    borderStartEndRadius: $desktop ? 0 : theme.borderRadiuses.medium,
+    borderEndEndRadius: $desktop ? 0 : theme.borderRadiuses.medium,
+    ...theme.partials.focus.insetAbsolute,
+  },
+}))
 
 type LinkBaseProps = Partial<ComponentProps<typeof StyledLink>> & {
   iconLeft?: ReactElement
@@ -382,7 +382,7 @@ const SubSectionsList = styled(
         })}
       </ul>
     )
-  })
+  }) as any
 )(({ theme, indentLevel }) => ({
   margin: 0,
   padding: 0,

src/components/TableOfContents.tsx

@@ -55,7 +55,7 @@ const ListItem = styled.li(() => ({
   listStyle: 'none',
 }))
 
-const StyledLink = styled(NextLink)<{ $active: boolean }>(
+const StyledLink = styled(NextLink as any)<{ $active: boolean }>(
   ({ theme, $active }) => ({
     position: 'relative',
     display: 'block',

src/generated/graphql.ts

@@ -378,6 +378,11 @@ export enum CloudProvider {
   Aws = 'AWS'
 }
 
+export type CloudRegions = {
+  __typename?: 'CloudRegions';
+  aws?: Maybe<Array<Maybe<Scalars['String']['output']>>>;
+};
+
 export type CloudShell = {
   __typename?: 'CloudShell';
   aesKey: Scalars['String']['output'];
@@ -2201,6 +2206,17 @@ export type PlatformSubscriptionLineItems = {
   quantity: Scalars['Int']['output'];
 };
 
+export type PluralCloudRegions = {
+  __typename?: 'PluralCloudRegions';
+  dedicated: CloudRegions;
+  shared: CloudRegions;
+};
+
+export type PluralCloudSettings = {
+  __typename?: 'PluralCloudSettings';
+  regions?: Maybe<PluralCloudRegions>;
+};
+
 export type PluralConfiguration = {
   __typename?: 'PluralConfiguration';
   gitCommit?: Maybe<Scalars['String']['output']>;
@@ -3401,7 +3417,7 @@ export type RootMutationTypeLinkPublisherArgs = {
 
 
 export type RootMutationTypeLoginArgs = {
-  captcha?: InputMaybe<Scalars['String']['input']>;
+  captcha: Scalars['String']['input'];
   deviceToken?: InputMaybe<Scalars['String']['input']>;
   email: Scalars['String']['input'];
   password: Scalars['String']['input'];
@@ -3726,6 +3742,7 @@ export type RootQueryType = {
   charts?: Maybe<ChartConnection>;
   chat?: Maybe<ChatMessage>;
   closure?: Maybe<Array<Maybe<ClosureItem>>>;
+  cloudSettings?: Maybe<PluralCloudSettings>;
   /** Get a cluster by its ID. */
   cluster?: Maybe<Cluster>;
   /** Get a list of clusters owned by the current account. */

src/markdoc/nodes/index.ts

@@ -1,56 +1,7 @@
 /* Markdoc nodes must be exported from this file to work with markdoc/nextjs plugin */
 
-import { Tag } from '@markdoc/markdoc'
-import { Table } from '@pluralsh/design-system/dist/markdoc/components'
 import * as designSystemNodes from '@pluralsh/design-system/dist/markdoc/nodes'
-import { isTag } from '@pluralsh/design-system/dist/markdoc/types'
 
 export const nodes = {
   ...designSystemNodes,
-  // slight fork of old DS version
-  table: {
-    render: Table,
-    description: 'Display horizontal tabs in a box',
-    children: ['tab'],
-    attributes: {},
-    transform(node, config) {
-      const children = node.transformChildren(config)
-
-      const thead = children
-        .find(
-          (child): child is Tag =>
-            isTag(child) && child?.name.toLowerCase() === 'thead'
-        )
-        ?.children.find(
-          (tr): tr is Tag => isTag(tr) && tr?.name.toLowerCase() === 'tr'
-        )
-        ?.children.filter(
-          (th): th is Tag => isTag(th) && th?.name.toLowerCase() === 'th'
-        )
-        .map((th) => th.children)
-
-      const tbody = children
-        .find(
-          (child): child is Tag =>
-            isTag(child) && child?.name.toLowerCase() === 'tbody'
-        )
-        ?.children.filter(
-          (tr): tr is Tag => isTag(tr) && tr?.name.toLowerCase() === 'tr'
-        )
-        ?.map((tr) =>
-          tr.children
-            .filter(
-              (trChild): trChild is Tag =>
-                isTag(trChild) && trChild?.name.toLowerCase() === 'td'
-            )
-            .map((td) => td.children)
-        )
-
-      return new Tag(
-        this.render as any,
-        { thead, tbody, children },
-        node.transformChildren(config)
-      )
-    },
-  },
 }