added example: with-geist-ui (#36525)

## Bug

- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [x] Make sure the linting passes by running `yarn lint`

examples/with-geist-ui/.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

examples/with-geist-ui/README.md

@@ -0,0 +1,21 @@
+# Example app with [geist-ui](https://github.com/geist-org/geist-ui) and TypeScript
+
+This example features how to use [geist-ui](https://github.com/geist-org/geist-ui) as the component library within a Next.js app with TypeScript.
+
+## Deploy your own
+
+Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-geist-ui)
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-geist-ui&project-name=with-geist-ui&repository-name=with-geist-ui)
+
+Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example:
+
+```bash
+npx create-next-app --example with-geist-ui with-geist-ui-app
+# or
+yarn create next-app --example with-geist-ui with-geist-ui-app
+# or
+pnpm create next-app -- --example with-geist-ui with-geist-ui-app
+```
+
+Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

examples/with-geist-ui/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

examples/with-geist-ui/package.json

@@ -0,0 +1,22 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@geist-ui/core": "latest",
+    "@geist-ui/icons": "1.0.1",
+    "next": "latest",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
+  },
+  "devDependencies": {
+    "@types/node": "^17.0.29",
+    "@types/react": "^18.0.8",
+    "eslint": "8.14.0",
+    "eslint-config-next": "12.1.5",
+    "typescript": "^4.5.4"
+  }
+}

examples/with-geist-ui/pages/_app.tsx

@@ -0,0 +1,12 @@
+import type { AppProps } from 'next/app'
+import { GeistProvider, CssBaseline } from '@geist-ui/core'
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    <GeistProvider>
+      <CssBaseline />
+      <Component {...pageProps} />
+    </GeistProvider>
+  )
+}
+export default MyApp

examples/with-geist-ui/pages/_document.js

@@ -0,0 +1,33 @@
+import Document, { Html, Head, Main, NextScript } from 'next/document'
+import { CssBaseline } from '@geist-ui/core'
+
+class MyDocument extends Document {
+  static async getInitialProps(ctx) {
+    const initialProps = await Document.getInitialProps(ctx)
+    const styles = CssBaseline.flush()
+
+    return {
+      ...initialProps,
+      styles: (
+        <>
+          {initialProps.styles}
+          {styles}
+        </>
+      ),
+    }
+  }
+
+  render() {
+    return (
+      <Html>
+        <Head />
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
+
+export default MyDocument

examples/with-geist-ui/pages/index.tsx

@@ -0,0 +1,87 @@
+import Head from 'next/head'
+import {
+  Page,
+  Text,
+  Image,
+  Display,
+  Button,
+  Grid,
+  Spacer,
+} from '@geist-ui/core'
+import { Github } from '@geist-ui/icons'
+
+const gh = 'https://github.com/geist-org/geist-ui'
+const docs = 'https://geist-ui.dev'
+
+export default function Home() {
+  const redirect = (url: string) => window.open(url)
+
+  return (
+    <div>
+      <Head>
+        <title>Geist UI with NextJS</title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <Page dotBackdrop width="800px" padding={0}>
+        <Display
+          title="Geist UI"
+          caption={
+            <>
+              Example repository of{' '}
+              <Text span b>
+                Next.js
+              </Text>{' '}
+              &{' '}
+              <Text b i style={{ letterSpacing: '0.6px' }}>
+                <Text span type="success">
+                  G
+                </Text>
+                <Text span type="warning">
+                  e
+                </Text>
+                <Text span type="secondary">
+                  i
+                </Text>
+                <Text span type="error">
+                  s
+                </Text>
+                <Text span style={{ color: '#ccc' }}>
+                  t
+                </Text>
+                <Text span type="success" ml="5px">
+                  UI.
+                </Text>
+              </Text>{' '}
+            </>
+          }
+        >
+          <Image
+            src="/geist-banner.png"
+            alt="geist ui banner"
+            draggable={false}
+          />
+        </Display>
+        <Grid.Container justify="center" gap={3} mt="100px">
+          <Grid xs={20} sm={7} justify="center">
+            <Button
+              shadow
+              type="secondary-light"
+              width="100%"
+              onClick={() => redirect(gh)}
+            >
+              <Github size={20} />
+              <Spacer inline w={0.35} />
+              GitHub Repo
+            </Button>
+          </Grid>
+          <Grid xs={0} sm={3} />
+          <Grid xs={20} sm={7} justify="center">
+            <Button width="100%" onClick={() => redirect(docs)}>
+              Documentation Site
+            </Button>
+          </Grid>
+        </Grid.Container>
+      </Page>
+    </div>
+  )
+}

examples/with-geist-ui/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}