From 02f9867ce9f0d39a56063e570f382db5eb864ada Mon Sep 17 00:00:00 2001 From: Pieter Stols Date: Fri, 3 May 2024 16:50:34 +0200 Subject: [PATCH] migrating to new webapp version --- .eslintrc.json | 24 +- .gitignore | 14 +- .prettierignore | 2 - .prettierrc | 18 - README.md | 65 +- components.json | 17 + components/CancelBtn.jsx | 20 - components/Client.jsx | 45 - components/ClientList.jsx | 25 - components/Footer.jsx | 7 - components/Header.jsx | 35 - components/Layout.jsx | 17 - css/tailwind.css | 3 - cypress.config.js | 9 - cypress/e2e/clientFlow.spec.cy.js | 44 - cypress/fixtures/example.json | 5 - cypress/support/commands.js | 25 - cypress/support/e2e.js | 20 - db/models/client.js | 16 - db/mongoose.js | 17 - next.config.js | 9 - next.config.mjs | 11 + package.json | 62 +- pages/_app.js | 21 - pages/add-client.jsx | 184 - pages/api/add-client.js | 34 - pages/api/clients.js | 20 - pages/api/delete-client.js | 21 - pages/api/get-client.js | 16 - pages/api/update-client.js | 22 - pages/edit/[id].jsx | 226 - pages/index.jsx | 66 - postcss.config.js | 3 - postcss.config.mjs | 8 + prisma/schema.prisma | 42 + public/favicon.ico | Bin 15086 -> 0 bytes public/next.svg | 1 + public/vercel.svg | 1 + public/zeit.svg | 10 - src/app/api/auth/[...nextauth]/route.ts | 6 + src/app/api/client/[clientId]/route.ts | 60 + src/app/api/client/route.ts | 54 + src/app/api/user/route.ts | 27 + src/app/auth/components/FormWrapper.tsx | 67 + src/app/auth/components/GoogleButton.tsx | 21 + .../auth/sign-in/components/SignInForm.tsx | 95 + src/app/auth/sign-in/page.tsx | 7 + .../auth/sign-up/components/SignUpForm.tsx | 141 + src/app/auth/sign-up/page.tsx | 7 + src/app/clients/[clientId]/page.tsx | 79 + src/app/clients/components/client-form.tsx | 221 + .../clients/components/clients-list-table.tsx | 54 + src/app/clients/layout.tsx | 18 + src/app/clients/new/page.tsx | 48 + src/app/clients/page.tsx | 36 + src/app/favicon.ico | Bin 0 -> 25931 bytes src/app/globals.css | 59 + src/app/layout.tsx | 26 + src/app/page.tsx | 5 + src/app/types/next-auth.d.ts | 21 + src/components/ui/button.tsx | 56 + src/components/ui/card.tsx | 79 + src/components/ui/form.tsx | 177 + src/components/ui/icons.tsx | 148 + src/components/ui/input.tsx | 25 + src/components/ui/label.tsx | 26 + src/components/ui/navbar.tsx | 43 + src/components/ui/password-input.tsx | 29 + src/components/ui/table.tsx | 117 + src/components/ui/textarea.tsx | 24 + src/components/ui/toast.tsx | 129 + src/components/ui/toaster.tsx | 35 + src/components/ui/use-toast.ts | 194 + src/lib/authOptions.ts | 105 + src/lib/env.ts | 24 + src/lib/prisma.ts | 16 + src/lib/services/client.ts | 56 + src/lib/services/user.ts | 53 + src/lib/types.ts | 67 + src/lib/utils.ts | 33 + src/middleware.ts | 15 + sst.config.ts | 9 +- tailwind.config.js | 3 - tailwind.config.ts | 80 + tsconfig.json | 33 + utils/notify-message.js | 23 - yarn.lock | 15364 ++++++++-------- 87 files changed, 10319 insertions(+), 8881 deletions(-) delete mode 100644 .prettierignore delete mode 100644 .prettierrc create mode 100644 components.json delete mode 100644 components/CancelBtn.jsx delete mode 100644 components/Client.jsx delete mode 100644 components/ClientList.jsx delete mode 100644 components/Footer.jsx delete mode 100644 components/Header.jsx delete mode 100644 components/Layout.jsx delete mode 100644 css/tailwind.css delete mode 100644 cypress.config.js delete mode 100644 cypress/e2e/clientFlow.spec.cy.js delete mode 100644 cypress/fixtures/example.json delete mode 100644 cypress/support/commands.js delete mode 100644 cypress/support/e2e.js delete mode 100644 db/models/client.js delete mode 100644 db/mongoose.js delete mode 100644 next.config.js create mode 100644 next.config.mjs delete mode 100644 pages/_app.js delete mode 100644 pages/add-client.jsx delete mode 100644 pages/api/add-client.js delete mode 100644 pages/api/clients.js delete mode 100644 pages/api/delete-client.js delete mode 100644 pages/api/get-client.js delete mode 100644 pages/api/update-client.js delete mode 100644 pages/edit/[id].jsx delete mode 100644 pages/index.jsx delete mode 100644 postcss.config.js create mode 100644 postcss.config.mjs create mode 100644 prisma/schema.prisma delete mode 100644 public/favicon.ico create mode 100644 public/next.svg create mode 100644 public/vercel.svg delete mode 100644 public/zeit.svg create mode 100644 src/app/api/auth/[...nextauth]/route.ts create mode 100644 src/app/api/client/[clientId]/route.ts create mode 100644 src/app/api/client/route.ts create mode 100644 src/app/api/user/route.ts create mode 100644 src/app/auth/components/FormWrapper.tsx create mode 100644 src/app/auth/components/GoogleButton.tsx create mode 100644 src/app/auth/sign-in/components/SignInForm.tsx create mode 100644 src/app/auth/sign-in/page.tsx create mode 100644 src/app/auth/sign-up/components/SignUpForm.tsx create mode 100644 src/app/auth/sign-up/page.tsx create mode 100644 src/app/clients/[clientId]/page.tsx create mode 100644 src/app/clients/components/client-form.tsx create mode 100644 src/app/clients/components/clients-list-table.tsx create mode 100644 src/app/clients/layout.tsx create mode 100644 src/app/clients/new/page.tsx create mode 100644 src/app/clients/page.tsx create mode 100644 src/app/favicon.ico create mode 100644 src/app/globals.css create mode 100644 src/app/layout.tsx create mode 100644 src/app/page.tsx create mode 100644 src/app/types/next-auth.d.ts create mode 100644 src/components/ui/button.tsx create mode 100644 src/components/ui/card.tsx create mode 100644 src/components/ui/form.tsx create mode 100644 src/components/ui/icons.tsx create mode 100644 src/components/ui/input.tsx create mode 100644 src/components/ui/label.tsx create mode 100644 src/components/ui/navbar.tsx create mode 100644 src/components/ui/password-input.tsx create mode 100644 src/components/ui/table.tsx create mode 100644 src/components/ui/textarea.tsx create mode 100644 src/components/ui/toast.tsx create mode 100644 src/components/ui/toaster.tsx create mode 100644 src/components/ui/use-toast.ts create mode 100644 src/lib/authOptions.ts create mode 100644 src/lib/env.ts create mode 100644 src/lib/prisma.ts create mode 100644 src/lib/services/client.ts create mode 100644 src/lib/services/user.ts create mode 100644 src/lib/types.ts create mode 100644 src/lib/utils.ts create mode 100644 src/middleware.ts delete mode 100644 tailwind.config.js create mode 100644 tailwind.config.ts create mode 100644 tsconfig.json delete mode 100644 utils/notify-message.js diff --git a/.eslintrc.json b/.eslintrc.json index d1f8ee6..bffb357 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,25 +1,3 @@ { - "env": { - "browser": true, - "es6": true, - "node": true - }, - "extends": [ - "eslint:recommended", - "plugin:react/recommended", - "eslint-plugin-cypress" - ], - "globals": { - "Atomics": "readonly", - "SharedArrayBuffer": "readonly" - }, - "parserOptions": { - "ecmaFeatures": { - "jsx": true - }, - "ecmaVersion": 2018, - "sourceType": "module" - }, - "plugins": ["react"], - "rules": { "react/react-in-jsx-scope": "off" } + "extends": "next/core-web-vitals" } diff --git a/.gitignore b/.gitignore index ff81620..904ef14 100644 --- a/.gitignore +++ b/.gitignore @@ -4,6 +4,7 @@ /node_modules /.pnp .pnp.js +.yarn/install-state.gz # testing /coverage @@ -17,6 +18,7 @@ # misc .DS_Store +*.pem # debug npm-debug.log* @@ -24,12 +26,16 @@ yarn-debug.log* yarn-error.log* # local env files -.env.local -.env.development.local -.env.test.local -.env.production.local +.env*.local .env +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts + # sst .sst diff --git a/.prettierignore b/.prettierignore deleted file mode 100644 index 6cc2cb2..0000000 --- a/.prettierignore +++ /dev/null @@ -1,2 +0,0 @@ -.next -coverage diff --git a/.prettierrc b/.prettierrc deleted file mode 100644 index a887023..0000000 --- a/.prettierrc +++ /dev/null @@ -1,18 +0,0 @@ -{ - "arrowParens": "avoid", - "bracketSpacing": true, - "htmlWhitespaceSensitivity": "css", - "insertPragma": false, - "bracketSameLine": false, - "jsxSingleQuote": false, - "printWidth": 80, - "proseWrap": "preserve", - "quoteProps": "as-needed", - "requirePragma": false, - "semi": false, - "singleQuote": true, - "tabWidth": 2, - "trailingComma": "none", - "useTabs": false, - "vueIndentScriptAndStyle": false -} diff --git a/README.md b/README.md index e2be66c..c403366 100644 --- a/README.md +++ b/README.md @@ -1,61 +1,36 @@ -# Test a Next.js App with Cypress +This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). -## Video Lesson Outline: +## Getting Started -[# 1 - Application Overview](https://youtu.be/xIl-0ZTtOHY) - -[# 2 - Install Cypress and eslint-plugin-cypress](https://youtu.be/dkekN7rKF1Y) - -[# 3 - Configure Cypress.json File](https://youtu.be/smd5UQUq5Uc) - -[# 4 - Write Our First Test](https://youtu.be/TLjFmOpGjUU) - -[# 5 - Write Better Tests with Cypress Testing Library](https://youtu.be/a1SvfURYxTQ) - -[# 6 - Run Cypress in Multiple Browsers](https://youtu.be/z7s-acDceCs) - -[# 7 - Test The Client Flow ](https://youtu.be/RupBr0w-bAk) - -## Installing/Running the app - -### Create a .env file - -``` -USERNAME="name you want displayed in project here" -MONGODB_URI="database creds here" -``` +First, run the development server: ```bash -yarn +npm run dev +# or yarn dev +# or +pnpm dev +# or +bun dev ``` -## Running Tests - -```bash -yarn cy:open -``` - -### Formatting with Prettier - -```bash -yarn format -``` +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. -## Technologies Used +You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. -[NextJS](https://nextjs.org/) +This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. -[Cypress-testing-library](https://testing-library.com/docs/cypress-testing-library/intro) +## Learn More -[Tailwindcss](https://tailwindcss.com/) +To learn more about Next.js, take a look at the following resources: -[React-notifications-component](https://teodosii.github.io/react-notifications-component/) +- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. +- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. -[React-icons](https://github.com/react-icons/react-icons#readme) +You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! -[Mongoose](https://mongoosejs.com/) +## Deploy on Vercel -[MongoDB Atlas](https://www.mongodb.com/cloud/atlas/) +The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. -[Prettier](https://prettier.io/docs/en/install.html) +Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. diff --git a/components.json b/components.json new file mode 100644 index 0000000..8c574b7 --- /dev/null +++ b/components.json @@ -0,0 +1,17 @@ +{ + "$schema": "https://ui.shadcn.com/schema.json", + "style": "default", + "rsc": true, + "tsx": true, + "tailwind": { + "config": "tailwind.config.ts", + "css": "src/app/globals.css", + "baseColor": "slate", + "cssVariables": true, + "prefix": "" + }, + "aliases": { + "components": "@/components", + "utils": "@/lib/utils" + } +} \ No newline at end of file diff --git a/components/CancelBtn.jsx b/components/CancelBtn.jsx deleted file mode 100644 index 2f53957..0000000 --- a/components/CancelBtn.jsx +++ /dev/null @@ -1,20 +0,0 @@ -import Link from 'next/link' -import { MdCancel } from 'react-icons/md' - -const CancelBtn = () => ( - -) - -export default CancelBtn diff --git a/components/Client.jsx b/components/Client.jsx deleted file mode 100644 index 1014e51..0000000 --- a/components/Client.jsx +++ /dev/null @@ -1,45 +0,0 @@ -import PropTypes from 'prop-types' -import Link from 'next/link' -import { FaRegEdit } from 'react-icons/fa' -import { useRouter } from 'next/navigation' - -const Client = ({ id, name, email, phone, address, company, notes }) => { - const router = useRouter() - return ( - <> - - {name} - {email} - {phone} - {address} - {company} - - {notes ? `${notes.slice(0, 15)}...` : ''} - - - - - - - ) -} - -Client.propTypes = { - id: PropTypes.string, - name: PropTypes.string, - email: PropTypes.string, - phone: PropTypes.number, - address: PropTypes.string, - company: PropTypes.string, - notes: PropTypes.string -}.isRequired - -export default Client diff --git a/components/ClientList.jsx b/components/ClientList.jsx deleted file mode 100644 index 4269865..0000000 --- a/components/ClientList.jsx +++ /dev/null @@ -1,25 +0,0 @@ -import PropTypes from 'prop-types' -import Client from './Client' - -const ClientList = ({ clients }) => { - if (clients) { - const list = clients.map(client => ) - return <>{list} - } -} - -ClientList.propTypes = { - clients: PropTypes.arrayOf( - PropTypes.shape({ - id: PropTypes.string, - name: PropTypes.string, - email: PropTypes.string, - phone: PropTypes.number, - address: PropTypes.string, - company: PropTypes.string, - notes: PropTypes.string - }) - ) -} - -export default ClientList diff --git a/components/Footer.jsx b/components/Footer.jsx deleted file mode 100644 index 895738b..0000000 --- a/components/Footer.jsx +++ /dev/null @@ -1,7 +0,0 @@ -const Footer = () => ( -
- Client Address Book Ⓒ{new Date().getFullYear()} -
-) - -export default Footer diff --git a/components/Header.jsx b/components/Header.jsx deleted file mode 100644 index 28bb9a0..0000000 --- a/components/Header.jsx +++ /dev/null @@ -1,35 +0,0 @@ -import Link from 'next/link' -import { useRouter } from 'next/router' -import { FaAddressCard } from 'react-icons/fa' - -const Header = () => ( -
-
    -
  • - - - - {process.env.username}'s Clients{' '} -
    • - -
-
-) - -export default Header diff --git a/components/Layout.jsx b/components/Layout.jsx deleted file mode 100644 index a3bdfce..0000000 --- a/components/Layout.jsx +++ /dev/null @@ -1,17 +0,0 @@ -import PropTypes from 'prop-types' -import Header from './Header' -import Footer from './Footer' - -const Layout = props => ( - <> -
-
{props.children}
-