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) + +[![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)). 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. + + {' '} + + } + > + geist ui banner + + + + + + + + + + + +
+ ) +} diff --git a/examples/with-geist-ui/public/geist-banner.png b/examples/with-geist-ui/public/geist-banner.png new file mode 100644 index 0000000000000..cf7a3facab671 Binary files /dev/null and b/examples/with-geist-ui/public/geist-banner.png differ diff --git a/examples/with-geist-ui/tsconfig.json b/examples/with-geist-ui/tsconfig.json new file mode 100644 index 0000000000000..99710e857874f --- /dev/null +++ b/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"] +}