From 342331e66d787fe6fcb226912c008b9196f29ac7 Mon Sep 17 00:00:00 2001
From: Marzouq
Date: Tue, 10 May 2022 04:02:02 -0700
Subject: [PATCH] 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 | 34 +++++++
examples/with-geist-ui/README.md | 21 +++++
examples/with-geist-ui/next-env.d.ts | 5 +
examples/with-geist-ui/package.json | 22 +++++
examples/with-geist-ui/pages/_app.tsx | 12 +++
examples/with-geist-ui/pages/_document.js | 33 +++++++
examples/with-geist-ui/pages/index.tsx | 87 ++++++++++++++++++
.../with-geist-ui/public/geist-banner.png | Bin 0 -> 42007 bytes
examples/with-geist-ui/tsconfig.json | 20 ++++
9 files changed, 234 insertions(+)
create mode 100644 examples/with-geist-ui/.gitignore
create mode 100644 examples/with-geist-ui/README.md
create mode 100644 examples/with-geist-ui/next-env.d.ts
create mode 100644 examples/with-geist-ui/package.json
create mode 100644 examples/with-geist-ui/pages/_app.tsx
create mode 100644 examples/with-geist-ui/pages/_document.js
create mode 100644 examples/with-geist-ui/pages/index.tsx
create mode 100644 examples/with-geist-ui/public/geist-banner.png
create mode 100644 examples/with-geist-ui/tsconfig.json
diff --git a/examples/with-geist-ui/.gitignore b/examples/with-geist-ui/.gitignore
new file mode 100644
index 0000000000000..1437c53f70bc2
--- /dev/null
+++ b/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
diff --git a/examples/with-geist-ui/README.md b/examples/with-geist-ui/README.md
new file mode 100644
index 0000000000000..04f20dd2b6348
--- /dev/null
+++ b/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)
+
+[](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)).
diff --git a/examples/with-geist-ui/next-env.d.ts b/examples/with-geist-ui/next-env.d.ts
new file mode 100644
index 0000000000000..4f11a03dc6cc3
--- /dev/null
+++ b/examples/with-geist-ui/next-env.d.ts
@@ -0,0 +1,5 @@
+///
+///
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/examples/with-geist-ui/package.json b/examples/with-geist-ui/package.json
new file mode 100644
index 0000000000000..81de156c6e85f
--- /dev/null
+++ b/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"
+ }
+}
diff --git a/examples/with-geist-ui/pages/_app.tsx b/examples/with-geist-ui/pages/_app.tsx
new file mode 100644
index 0000000000000..906b974c8092c
--- /dev/null
+++ b/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 (
+
+
+
+
+ )
+}
+export default MyApp
diff --git a/examples/with-geist-ui/pages/_document.js b/examples/with-geist-ui/pages/_document.js
new file mode 100644
index 0000000000000..8ff3141143ca0
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+
+ )
+ }
+}
+
+export default MyDocument
diff --git a/examples/with-geist-ui/pages/index.tsx b/examples/with-geist-ui/pages/index.tsx
new file mode 100644
index 0000000000000..8808b14d3a9e1
--- /dev/null
+++ b/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 (
+
+
+
Geist UI with NextJS
+
+
+
+
+ Example repository of{' '}
+
+ Next.js
+ {' '}
+ &{' '}
+
+
+ G
+
+
+ e
+
+
+ i
+
+
+ s
+
+
+ t
+
+
+ UI.
+
+ {' '}
+
+ }
+ >
+
+
+
+
+
+
+
+
+
+
+
+
+