diff --git a/examples/with-next-ui/.gitignore b/examples/with-next-ui/.gitignore new file mode 100755 index 0000000000000..c87c9b392c020 --- /dev/null +++ b/examples/with-next-ui/.gitignore @@ -0,0 +1,36 @@ +# 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* +.pnpm-debug.log* + +# local env files +.env*.local + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/examples/with-next-ui/README.md b/examples/with-next-ui/README.md new file mode 100755 index 0000000000000..3dced2b06936e --- /dev/null +++ b/examples/with-next-ui/README.md @@ -0,0 +1,23 @@ +# NextUI Example + +This example shows how to use Next.js along with [NextUI](https://nextui.org/) of React. This is intended to show the integration of this UI toolkit with the Framework. + +## Deploy your own + +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example): + +[![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-next-ui) + +## How to use + +Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example: + +```bash +npx create-next-app --example with-next-ui with-next-ui-app +# or +yarn create next-app --example with-next-ui with-next-ui-app +# or +pnpm create next-app --example with-next-ui with-next-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-next-ui/common/interface.ts b/examples/with-next-ui/common/interface.ts new file mode 100644 index 0000000000000..586bc4976b718 --- /dev/null +++ b/examples/with-next-ui/common/interface.ts @@ -0,0 +1,6 @@ +export interface SvgProp { + fill?: string + size?: number + height?: number + width?: number +} diff --git a/examples/with-next-ui/components/Checkbox.tsx b/examples/with-next-ui/components/Checkbox.tsx new file mode 100644 index 0000000000000..a81e3a8e70c1e --- /dev/null +++ b/examples/with-next-ui/components/Checkbox.tsx @@ -0,0 +1,19 @@ +import { Checkbox } from '@nextui-org/react' + +const CustomCheckbox = () => { + return ( + + Buenos Aires + Sydney + London + Tokyo + + ) +} + +export default CustomCheckbox diff --git a/examples/with-next-ui/components/Collapse.tsx b/examples/with-next-ui/components/Collapse.tsx new file mode 100644 index 0000000000000..6f420347bd840 --- /dev/null +++ b/examples/with-next-ui/components/Collapse.tsx @@ -0,0 +1,29 @@ +import { Collapse, Text } from '@nextui-org/react' + +const CustomCollapse = () => { + return ( + + + + I have had my invitation to this world's festival, and thus my life + has been blessed. + + + + + In the meanwhile I smile and I sing all alone. In the meanwhile the + air is filling with the perfume of promise. + + + + + I came out on the chariot of the first gleam of light, and pursued my + voyage through the wildernesses of worlds leaving my track on many a + star and planet. + + + + ) +} + +export default CustomCollapse diff --git a/examples/with-next-ui/components/Mail.tsx b/examples/with-next-ui/components/Mail.tsx new file mode 100644 index 0000000000000..2bdb10c9ad10d --- /dev/null +++ b/examples/with-next-ui/components/Mail.tsx @@ -0,0 +1,23 @@ +import { SvgProp } from '../common/interface' + +export const Mail = ({ fill, size, height, width, ...props }: SvgProp) => { + return ( + + + + + + + ) +} diff --git a/examples/with-next-ui/components/Password.tsx b/examples/with-next-ui/components/Password.tsx new file mode 100644 index 0000000000000..d0f79199c69fc --- /dev/null +++ b/examples/with-next-ui/components/Password.tsx @@ -0,0 +1,17 @@ +import { SvgProp } from '../common/interface' + +export const Password = ({ fill, size, height, width, ...props }: SvgProp) => { + return ( + + + + + + + ) +} diff --git a/examples/with-next-ui/components/Table.tsx b/examples/with-next-ui/components/Table.tsx new file mode 100644 index 0000000000000..9e61639d59c86 --- /dev/null +++ b/examples/with-next-ui/components/Table.tsx @@ -0,0 +1,43 @@ +import { Table } from '@nextui-org/react' + +const CustomTable = () => { + return ( + + + NAME + ROLE + STATUS + + + + Tony Reichert + CEO + Active + + + Zoey Lang + Technical Lead + Paused + + + Jane Fisher + Senior Developer + Active + + + William Howard + Community Manager + Vacation + + +
+ ) +} + +export default CustomTable diff --git a/examples/with-next-ui/next.config.js b/examples/with-next-ui/next.config.js new file mode 100755 index 0000000000000..b74ef0c30ce88 --- /dev/null +++ b/examples/with-next-ui/next.config.js @@ -0,0 +1,8 @@ +/** @type {import('next').NextConfig} */ + +const nextConfig = { + reactStrictMode: false, + swcMinify: true, +} + +module.exports = nextConfig diff --git a/examples/with-next-ui/package.json b/examples/with-next-ui/package.json new file mode 100644 index 0000000000000..06b7c1224ad3b --- /dev/null +++ b/examples/with-next-ui/package.json @@ -0,0 +1,20 @@ +{ + "private": true, + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start" + }, + "dependencies": { + "@nextui-org/react": "1.0.0-beta.9", + "next": "latest", + "react": "18.2.0", + "react-dom": "18.2.0" + }, + "devDependencies": { + "@types/node": "18.0.3", + "@types/react": "18.0.15", + "@types/react-dom": "18.0.6", + "typescript": "4.7.4" + } +} diff --git a/examples/with-next-ui/pages/_app.tsx b/examples/with-next-ui/pages/_app.tsx new file mode 100755 index 0000000000000..4f774da1d7270 --- /dev/null +++ b/examples/with-next-ui/pages/_app.tsx @@ -0,0 +1,12 @@ +import '../styles/globals.css' +import { NextUIProvider } from '@nextui-org/react' + +import type { AppProps } from 'next/app' + +export default function MyApp({ Component, pageProps }: AppProps) { + return ( + + + + ) +} diff --git a/examples/with-next-ui/pages/_document.tsx b/examples/with-next-ui/pages/_document.tsx new file mode 100644 index 0000000000000..c7d9c43257f66 --- /dev/null +++ b/examples/with-next-ui/pages/_document.tsx @@ -0,0 +1,37 @@ +import Document, { + Html, + Head, + Main, + NextScript, + DocumentContext, + DocumentInitialProps, +} from 'next/document' + +import { CssBaseline } from '@nextui-org/react' + +import { Children } from 'react' + +export default class MyDocument extends Document { + static async getInitialProps( + ctx: DocumentContext + ): Promise { + const initialProps = await Document.getInitialProps(ctx) + + return { + ...initialProps, + styles: Children.toArray([initialProps.styles]), + } + } + + render() { + return ( + + {CssBaseline.flush()} + +
+ + + + ) + } +} diff --git a/examples/with-next-ui/pages/index.tsx b/examples/with-next-ui/pages/index.tsx new file mode 100755 index 0000000000000..8482e382373d4 --- /dev/null +++ b/examples/with-next-ui/pages/index.tsx @@ -0,0 +1,53 @@ +import Head from 'next/head' +import Image from 'next/image' +import styles from '../styles/Home.module.css' +import dynamic from 'next/dynamic' +import { Avatar, Pagination } from '@nextui-org/react' + +const CustomCheckbox = dynamic(() => import('../components/Checkbox')) +const CustomTable = dynamic(() => import('../components/Table')) +const CustomCollapse = dynamic(() => import('../components/Collapse')) + +export default function Home() { + return ( +
+ + NextUI Example + + + +
+

+ +

+

+ Welcome to use NextUI! +

+ {/* checkout */} +

Checkbox:

+ + {/* table */} +

Table:

+ + {/* pagination */} +

Pagination

+ + {/* collapse */} +

Collapse

+ +
+ +
+ ) +} diff --git a/examples/with-next-ui/public/favicon.ico b/examples/with-next-ui/public/favicon.ico new file mode 100755 index 0000000000000..718d6fea4835e Binary files /dev/null and b/examples/with-next-ui/public/favicon.ico differ diff --git a/examples/with-next-ui/public/vercel.svg b/examples/with-next-ui/public/vercel.svg new file mode 100755 index 0000000000000..fbf0e25a651c2 --- /dev/null +++ b/examples/with-next-ui/public/vercel.svg @@ -0,0 +1,4 @@ + + + \ No newline at end of file diff --git a/examples/with-next-ui/styles/Home.module.css b/examples/with-next-ui/styles/Home.module.css new file mode 100755 index 0000000000000..9bee497714edf --- /dev/null +++ b/examples/with-next-ui/styles/Home.module.css @@ -0,0 +1,64 @@ +.container { + padding: 0 2rem; + width: 800px; + margin: 0 auto; +} + +.main { + min-height: 100vh; + padding: 4rem 0; + flex: 1; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.main h2 { + width: 100%; + margin-top: 20px; +} + +.footer { + display: flex; + flex: 1; + padding: 2rem 0; + border-top: 1px solid #eaeaea; + justify-content: center; + align-items: center; +} + +.footer a { + display: flex; + justify-content: center; + align-items: center; + flex-grow: 1; +} + +.title a { + color: #0070f3; + text-decoration: none; +} + +.title a:hover, +.title a:focus, +.title a:active { + text-decoration: underline; +} + +.title { + margin: 0; + line-height: 1.15; + font-size: 4rem; +} + +.title, +.description { + text-align: center; +} + +.description { + margin: 4rem 0; + line-height: 1.5; + font-size: 1.5rem; +} diff --git a/examples/with-next-ui/styles/globals.css b/examples/with-next-ui/styles/globals.css new file mode 100755 index 0000000000000..e5e2dcc23baf1 --- /dev/null +++ b/examples/with-next-ui/styles/globals.css @@ -0,0 +1,16 @@ +html, +body { + padding: 0; + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, + Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; +} + +a { + color: inherit; + text-decoration: none; +} + +* { + box-sizing: border-box; +} diff --git a/examples/with-next-ui/tsconfig.json b/examples/with-next-ui/tsconfig.json new file mode 100755 index 0000000000000..99710e857874f --- /dev/null +++ b/examples/with-next-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"] +}