Stack pages begun

pluralsh · Jun 22, 2023 · c5b35f3 · c5b35f3
1 parent 9fadf1d
commit c5b35f3
Show file tree

Hide file tree

Showing 40 changed files with 1,417 additions and 464 deletions.
diff --git a/codegen.ts b/codegen.ts
@@ -50,6 +50,23 @@ const config: CodegenConfig = {
         },
       ],
     },
+    'src/generated/graphqlDirectusSystem.ts': {
+      schema: `https://directus.plural.sh/graphql/system${
+        directusToken ? `?access_token=${directusToken}` : ''
+      }`,
+      documents: './src/graph/directus/system/*.graphql',
+      plugins: [
+        'typescript',
+        'typescript-operations',
+        'typescript-react-apollo',
+        {
+          add: {
+            content: '/* eslint-disable */\n// prettier-ignore',
+            config: null,
+          },
+        },
+      ],
+    },
   },
   hooks: {
     afterAllFileWrite: ['eslint --fix'],

diff --git a/package.json b/package.json
@@ -38,7 +38,7 @@
     "@markdoc/markdoc": "0.3.0",
     "@markdoc/next.js": "0.2.2",
     "@open-draft/until": "2.1.0",
-    "@pluralsh/design-system": "1.344.1",
+    "@pluralsh/design-system": "2.0.0",
     "@react-types/shared": "3.18.1",
     "@tanstack/react-table": "8.9.2",
     "@tanstack/react-virtual": "3.0.0-beta.48",

diff --git a/pages/404.tsx b/pages/404.tsx
@@ -1,13 +1,13 @@
 import Link from '@pluralsh/design-system/dist/markdoc/components/Link'
 
-import { propsWithGlobalSettings } from '@src/components/getGlobalProps'
+import { FullPage } from '@src/components/layout/FullPage'
+import { HeaderPad } from '@src/components/layout/HeaderPad'
 import { Body1, Heading1 } from '@src/components/Typography'
-
-import { FullPage } from './_app'
+import { propsWithGlobalSettings } from '@src/utils/getGlobalProps'
 
 export default function Plural404() {
   return (
-    <FullPage>
+    <FullPage as={HeaderPad}>
       <div className="flex flex-col gap-y-medium ">
         <Heading1>Page not found</Heading1>
         <Body1>

diff --git a/pages/500.tsx b/pages/500.tsx
@@ -1,6 +1,6 @@
 import Error from 'next/error'
 
-import { propsWithGlobalSettings } from '@src/components/getGlobalProps'
+import { propsWithGlobalSettings } from '@src/utils/getGlobalProps'
 
 export default function Plural500({ statusCode }) {
   return <Error statusCode={statusCode} />

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -16,17 +16,16 @@ import { useRouter } from 'next/router'
 
 import { MarkdocContextProvider } from '@pluralsh/design-system/dist/markdoc'
 import { SSRProvider } from 'react-aria'
-import styled, { ThemeProvider as StyledThemeProvider } from 'styled-components'
+import { ThemeProvider as StyledThemeProvider } from 'styled-components'
 import { SWRConfig } from 'swr'
 
 import { BreakpointProvider } from '@src/components/BreakpointProvider'
 import DocSearchStyles from '@src/components/DocSearchStyles'
 import { type FooterVariant } from '@src/components/FooterFull'
-import { type GlobalProps } from '@src/components/getGlobalProps'
 import GlobalStyles from '@src/components/GlobalStyles'
 import { usePosthog } from '@src/components/hooks/usePosthog'
-import { PageMaxWidthLimiter } from '@src/components/MaxWidthLimiter'
 import PrimaryPage from '@src/components/PrimaryPage'
+import { type GlobalProps } from '@src/utils/getGlobalProps'
 
 // Styles
 import '@src/styles/globals.css'
@@ -50,10 +49,6 @@ export type MarkdocHeading = {
 
 const docsStyledTheme = { ...styledTheme, ...{ docs: { topNavHeight: 72 } } }
 
-export const FullPage = styled(PageMaxWidthLimiter)((_) => ({
-  width: '100%',
-}))
-
 const useNavigate = () => {
   const router = useRouter()
 

diff --git a/pages/applications/[repo].tsx b/pages/applications/[repo].tsx
@@ -5,11 +5,9 @@ import {
   BrowserIcon,
   Button,
   CertificateIcon,
-  CheckRoundedIcon,
   Code,
   DocumentIcon,
   GitHubIcon,
-  Tooltip,
 } from '@pluralsh/design-system'
 import {
   type GetStaticPaths,
@@ -24,13 +22,15 @@ import classNames from 'classnames'
 import { isEmpty } from 'lodash-es'
 import styled, { useTheme } from 'styled-components'
 
-import { FullPage } from '@pages/_app'
 import client, { directusClient } from '@src/apollo-client'
 import { mqs } from '@src/breakpoints'
 import BuildStack, { getStackTabData } from '@src/components/BuildStack'
+import { Checklist, ChecklistItem } from '@src/components/Checklist'
 import Embed from '@src/components/Embed'
 import { FooterVariant } from '@src/components/FooterFull'
-import { propsWithGlobalSettings } from '@src/components/getGlobalProps'
+import { Col, Columns2 } from '@src/components/layout/Columns'
+import { FullPage } from '@src/components/layout/FullPage'
+import { TextLimiter } from '@src/components/layout/TextLimiter'
 import { BackButton } from '@src/components/Nav'
 import { QuotesCarousel } from '@src/components/QuoteCards'
 import RepoReadmeMd from '@src/components/RepoReadme/RepoReadmeMd'
@@ -66,9 +66,12 @@ import {
   type RecipesQuery,
   type RecipesQueryVariables,
 } from '@src/generated/graphqlPlural'
+import { propsWithGlobalSettings } from '@src/utils/getGlobalProps'
 
 import { CompanyLogos } from '../../src/components/CompanyLogos'
-import { HeaderPad } from '../../src/components/GradientBGs'
+import { GradientBG } from '../../src/components/layout/GradientBG'
+import { HeaderPad } from '../../src/components/layout/HeaderPad'
+import { ProviderIcon } from '../../src/components/ProviderIcon'
 
 const DEFAULT_HERO_VIDEO = 'https://www.youtube.com/watch?v=mFDA-718RhI'
 
@@ -125,46 +128,12 @@ const AppPageTitle = styled(
   },
 }))
 
-type ProviderProps = {
+export type ProviderProps = {
   label?: string | null | undefined
   iconDark: string
   iconLight: string
 }
 
-const GradientBG = styled(
-  ({ children, position: _position, image: _image, ...props }) => (
-    <div {...props}>
-      <div className="bg" />
-      <div className="content">{children}</div>
-    </div>
-  )
-)<{ position?: string; image?: string }>(
-  ({
-    theme,
-    position = 'top center',
-    image = '/images/gradients/gradient-bg-1.jpg',
-  }) => ({
-    position: 'relative',
-    '.bg': {
-      content: '""',
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      backgroundImage: `url(${image})`,
-      backgroundPosition: position,
-      backgroundSize: 'contain',
-      backgroundRepeat: 'no-repeat',
-      backgroundColor: theme.colors['fill-zero'],
-      filter: 'blur(10px)',
-    },
-    '.content': {
-      position: 'relative',
-    },
-  })
-)
-
 export default function App({
   repo,
   appExtras,
@@ -399,68 +368,6 @@ export default function App({
   )
 }
 
-export const TextLimiter = styled.div(({ theme: _ }) => ({
-  maxWidth: 600,
-
-  [mqs.columns]: {
-    maxWidth: 600,
-  },
-}))
-
-export function Col({ className, ...props }: ComponentProps<'div'>) {
-  return (
-    <div
-      className={classNames('columns:basis-0 columns:flex-grow', className)}
-      {...props}
-    />
-  )
-}
-
-export function Columns2({ className, ...props }: ComponentProps<'div'>) {
-  return (
-    <div
-      className={classNames([
-        'flex',
-        'flex-col',
-        'columns:flex-row',
-        'columns:gap-x-xlarge',
-        'xl:gap-x-xxlarge',
-        'xl:flex-row',
-        'xxl:gap-x-xxxxlarge',
-        'maxWidth:gap-x-xxxxxlarge',
-        className,
-      ])}
-      {...props}
-    />
-  )
-}
-
-export const Checklist = styled.ul(({ theme }) => ({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: theme.spacing.medium,
-}))
-
-export const ChecklistItem = styled(({ children, ...props }) => {
-  const theme = useTheme()
-
-  return (
-    <li {...props}>
-      <CheckRoundedIcon
-        color={theme.colors['icon-success']}
-        size={20}
-      />
-      {children}
-    </li>
-  )
-})(({ theme }) => ({
-  display: 'flex',
-  alignItems: 'center',
-  gap: theme.spacing.small,
-  ...theme.partials.marketingText.body1Bold,
-  color: theme.colors.text,
-}))
-
 export const getStaticPaths: GetStaticPaths = async () => {
   if (process.env.NODE_ENV === 'development') {
     return {
@@ -510,8 +417,6 @@ export const getStaticProps: GetStaticProps<AppPageProps> = async (context) => {
     variables: { name: repoName },
   })
 
-  console.log(appData?.apps?.[0] || null)
-
   const { data: recipesData, error: recipesError } = await client.query<
     RecipesQuery,
     RecipesQueryVariables
@@ -552,44 +457,3 @@ export const getStaticProps: GetStaticProps<AppPageProps> = async (context) => {
     ],
   })
 }
-
-const ProviderIcon = styled(
-  ({
-    iconLight,
-    iconDark,
-    label,
-    ...props
-  }: ComponentProps<'div'> & ProviderProps) => (
-    <Tooltip
-      placement="top"
-      label={label}
-    >
-      <div {...props}>
-        <img
-          className="icon iconLight"
-          src={iconLight}
-        />
-        <img
-          className="icon iconDark"
-          src={iconDark}
-        />
-      </div>
-    </Tooltip>
-  )
-)(({ theme }) => ({
-  border: theme.borders['fill-two'],
-  background: theme.colors['fill-zero'],
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  padding: theme.spacing.xsmall,
-  borderRadius: theme.borderRadiuses.large,
-  width: 44,
-  height: 44,
-  '.iconLight': {
-    display: theme.mode === 'light' ? 'block' : 'none',
-  },
-  '.iconDark': {
-    display: theme.mode === 'light' ? 'none' : 'block',
-  },
-}))
diff --git a/pages/community.tsx b/pages/community.tsx
@@ -1,12 +1,12 @@
 import { useRouter } from 'next/router'
 
 import { directusClient } from '@src/apollo-client'
-import { propsWithGlobalSettings } from '@src/components/getGlobalProps'
 import {
   EventsDocument,
   type EventsQuery,
   type EventsQueryVariables,
 } from '@src/generated/graphqlDirectus'
+import { propsWithGlobalSettings } from '@src/utils/getGlobalProps'
 
 export default function Community({ events }) {
   const locale = useRouter().locale || 'en-us'

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,11 +1,12 @@
-import { propsWithGlobalSettings } from '@src/components/getGlobalProps'
+import { HeaderPad } from '@src/components/layout/HeaderPad'
 import { Body1, Heading1 } from '@src/components/Typography'
+import { propsWithGlobalSettings } from '@src/utils/getGlobalProps'
 
-import { FullPage } from './_app'
+import { FullPage } from '../src/components/layout/FullPage'
 
 export default function Index() {
   return (
-    <FullPage>
+    <FullPage as={HeaderPad}>
       <div className="flex flex-col gap-x-medium gap-y-xlarge ">
         <Heading1>Home page</Heading1>
         <Body1>This is some body text</Body1>

diff --git a/pages/marketplace.tsx b/pages/marketplace.tsx
@@ -21,16 +21,12 @@ import { isEmpty, orderBy, upperFirst } from 'lodash-es'
 import styled, { useTheme } from 'styled-components'
 
 import { mqs } from '@src/breakpoints'
-import {
-  type GlobalProps,
-  propsWithGlobalSettings,
-} from '@src/components/getGlobalProps'
-import { HeaderPad } from '@src/components/GradientBGs'
+import { MarketplacePage } from '@src/components/layout/BasicPage'
+import { HeaderPad } from '@src/components/layout/HeaderPad'
 import { MarketplaceCarousel } from '@src/components/MarketplaceCarousel'
 import { MarketplaceExtras } from '@src/components/MarketplaceExtras'
 import MarketplaceFilters from '@src/components/MarketplaceFilters'
 import StackHero, { Cta } from '@src/components/MarketplaceStackHero'
-import { MarketplacePage } from '@src/components/PageGrid'
 import { RepoCard, RepoCardList, StackCard } from '@src/components/RepoCardList'
 import { type MinRepo, getRepos, reposCache } from '@src/data/getRepos'
 import {
@@ -40,20 +36,23 @@ import {
 } from '@src/data/getSearchMetadata'
 import { type MinStack, getStacks, stacksCache } from '@src/data/getStacks'
 import { type MinRepoFragment } from '@src/generated/graphqlPlural'
+import {
+  type GlobalProps,
+  propsWithGlobalSettings,
+} from '@src/utils/getGlobalProps'
 
 import {
   type SetSearchParams,
   useSearchParams,
 } from '../src/components/hooks/useSearchParams'
+import { FullPage } from '../src/components/layout/FullPage'
 import {
   MarketSearchTabKey,
   SearchBar,
   useSearchTabKey,
 } from '../src/components/MarketplaceSearchBar'
 import { Body1, Heading1, Subtitle } from '../src/components/Typography'
 
-import { FullPage } from './_app'
-
 type PageProps = {
   repositories: MinRepo[]
   stacks: MinStack[]