steven-tey / precedent Goto Github PK
View Code? Open in Web Editor NEWAn opinionated collection of components, hooks, and utilities for your Next.js project.
Home Page: https://precedent.dev
License: MIT License
An opinionated collection of components, hooks, and utilities for your Next.js project.
Home Page: https://precedent.dev
License: MIT License
I built a library with typesafe environment variables for Next.js and would love to add it to Precedent to help the community bring type safety to their environment variables.
If you can add an example of using useIntersectionObserver like scroll in this template, it would be great.
Thank you.
Hello, I notice that the animation when modal is closed not working. It disappears suddenly when we click on blur to close Modal.
I tried to find some solution, mostly about Framer Motion but I see there are nothing wrong. π§
Anyone knows how to fix it, I think UX will be better so much if we can fix it.
Im trying to use this template with LinkedIn as the auth provider.
When I plug it in, I get an error message from linked in that says 'bummer, something went wrong' and a console error that says:
Uncaught TypeError: Cannot read properties of null (reading 'textContent')
Can anyone help to find instructions for how to solve for this? I can't find an auth docs page in the app router section of the nextjs docs.
thank you
While changing the size of the screen the button width are overlapping with the container and the tooltip button is hidden in medium screen size.
PR - #39
Hi, I noticed that there are two main
elements in the markup. https://validator.w3.org/nu/?doc=https%3A%2F%2Fprecedent.dev%2F I'm sure it's not a big issue, but I'd hate for it to break a screen reader for someone.
There is a dead simple way to lock down routes with Next Auth. Adding in an example for the "dashboard" page would be sweet. If there's a design for a dashboard page or just a simple page to put together I'd be happy to handle this.
How do i change the next-auth database to mariadb/mysql?
When you open the demo modal the markup renders twice in the dom. This means that if you use a form within the modal you will have duplicate id's and causes accessibility issues with the form.
Hello can you add the classic email + password into precedent please
I'm using an older version of precedent (few weeks old) and I'm experiencing an issue with the Modal animations. The start animations play properly, but the exit animations do not play. Does anyone know how to fix it?
This is the code:
return (
<AnimatePresence>
{showModal && (
<>
{isMobile && <Leaflet setShow={setShowModal}>{children}</Leaflet>}
{isDesktop && (
<>
<FocusTrap focusTrapOptions={{ initialFocus: false }}>
<motion.div
ref={desktopModalRef}
key="desktop-modal"
className="fixed inset-0 z-40 hidden min-h-screen items-center justify-center md:flex"
initial={{ scale: 0.95 }}
animate={{ scale: 1 }}
exit={{ scale: 0.95 }}
onMouseDown={(e) => {
if (desktopModalRef.current === e.target) {
setShowModal(false);
}
}}
>
{children}
</motion.div>
</FocusTrap>
<motion.div
key="desktop-backdrop"
className="fixed inset-0 z-30 bg-gray-100 bg-opacity-10 backdrop-blur"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
onClick={() => setShowModal(false)}
/>
</>
)}
</>
)}
</AnimatePresence>
);
I can see the issue live on https://precedent.dev/ so presumably it's still there with the new code.
only an issue when resizing from small to large, the extra portion of screen will not have blur.
could not find a fix myself, will update if I do.
(big thank you for the template)
15:06:47.327 | Error:
15:06:47.327 | Invalid prisma.user.findMany()
invocation:
15:06:47.327 | Β
15:06:47.327 | Β
15:06:47.327 | The table public.User
does not exist in the current database.
Current format:write
script command code violates DRY principles πΏ
An example of duplicated prettier
command code from package.json
:
"format": "prettier \"**/*.{css,js,json,jsx,ts,tsx}\"",
"format:write": "prettier --write \"**/*.{css,js,json,jsx,ts,tsx}\""
"format": "prettier \"**/*.{css,js,json,jsx,ts,tsx}\"",
"format:write": "npm run format -- --write"
--cache
"format": "prettier --cache \"**/*.{css,js,json,jsx,ts,tsx}\"",
"format:write": "npm run format -- --write"
When doing a second migration with prisma, you are presented with Error: P3005
:
Error: P3005
The database schema is not empty. Read more about how to baseline an existing production database: https://pris.ly/d/migrate-baseline
Removing the shadowDatabaseUrl
from the schema.prisma
datasource
fixes this.
With latest updates from Vercel, we no longer need the shadowDatabaseUrl
to handle migrations.
Open the precedent website and quickly switch to another tab while the counter is still counting up. Wait for a few seconds and then go back to the precedent tab.
I'm not familiar with the codebase but I'll try to figure out how this happens.
error - Failed to download Inter
from Google Fonts. Using fallback font instead.
Tried running this app as bare as it came with no configuration and this happens within my codespace.
The current Layout.tsx is very confusing.
How can I add new pages?
Consider adding GitHubProvider as an optional authentication method. This simply showcases available options. I'd be happy to handle the implementation for you.
<dialog>
element is widely available now! I would recommend using it for modals :)
https://github.com/steven-tey/precedent/blob/main/components/shared/modal.tsx
Hi. Following the change in 2d444cf, the default setup instructions (npx create-next-app precedent --example "https://github.com/steven-tey/precedent"
) no longer work on Node v19.7.0, with the following error showing up:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/next
npm ERR! next@"13.3.1-canary.11" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer next@"^12.2.5 || ^13" from [email protected]
I can bypass the error by going into the folder and yarn install
-ing there.
I'm curious about this behavior I'm seeing. When using this template, I create an about page /about/page.tsx that only has:
export default function About() { return <div>About</div> }
While building it marks this page as SSR. If I remove the nextauth stuff and remove the nav bar from the top level layout:
<Suspense fallback="..."> {/* @ts-expect-error Server Component */} <Nav/> </Suspense>
then it will mark the page as static. Shouldn't the child page be static since this element in the top layout is wrapped in Suspense? I don't understand the behavior.
When i clone this library and try to run it, each of the next libraries is underlined with an error message along the lines of:
Cannot find module 'next-auth/react' or its corresponding type declarations.ts(2307)
Is there something that needs to be updated in this repo?
Not sure if I'm the only one, but I've cloned your repo, change the database url to a MySQL db and swapped the GoogleProvider to the TwitterProvider and I'm getting the following error after logging in:
Warning: Received `true` for a non-boolean attribute `inline`.
If you want to write it to the DOM, pass a string instead: inline="true" or inline={value.toString()}.
at code
at code (webpack-internal:///./components/home/card.tsx:62:47)
at p
at ReactMarkdown (webpack-internal:///./node_modules/.pnpm/[email protected]_kzbn2opkn2327fwg5yzwzya5o4/node_modules/react-markdown/lib/react-markdown.js:90:42)
at span
at v (webpack-internal:///./node_modules/.pnpm/[email protected][email protected]/node_modules/react-wrap-balancer/dist/index.mjs:8:856)
at div
at div
at div
at VisualElementHandler (webpack-internal:///./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/framer-motion/dist/es/motion/utils/VisualElementHandler.mjs:8:1)
at MotionComponent (webpack-internal:///./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/framer-motion/dist/es/motion/index.mjs:50:65)
at Card (webpack-internal:///./components/home/card.tsx:17:11)
at div
at VisualElementHandler (webpack-internal:///./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/framer-motion/dist/es/motion/utils/VisualElementHandler.mjs:8:1)
at MotionComponent (webpack-internal:///./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/framer-motion/dist/es/motion/index.mjs:50:65)
at main
at Layout (webpack-internal:///./components/layout/index.tsx:31:11)
at Home (webpack-internal:///./pages/index.tsx:29:120)
at main
at L (webpack-internal:///./node_modules/.pnpm/[email protected][email protected]/node_modules/react-wrap-balancer/dist/index.mjs:8:764)
at SessionProvider (webpack-internal:///./node_modules/.pnpm/[email protected]_q76c2b4vyoegvsbrcwkfvimnai/node_modules/next-auth/react/index.js:454:24)
at MyApp (webpack-internal:///./pages/_app.tsx:28:11)
at PathnameContextProviderAdapter (webpack-internal:///./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/shared/lib/router/adapters.js:62:11)
at ErrorBoundary (webpack-internal:///./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:301:63)
at ReactDevOverlay (webpack-internal:///./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:850:919)
at Container (webpack-internal:///./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/index.js:61:1)
at AppContainer (webpack-internal:///./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/index.js:171:11)
at Root (webpack-internal:///./node_modules/.pnpm/[email protected]_biqbaboplfbrettd7655fr4n2y/node_modules/next/dist/client/index.js:346:11)
And because I'm using pnpm, I've also deleted the yarn.lock
file. Everything else is correct (prisma has generated the schema und pushed to the DB and keys are correct because they work on another local app).
Any idea what that could be? As far as I could follow it, it should be somewhere in the popover.tsx
or user-dropdown.tsx
Chevron doesn't rotate as intended as the openPopover state never changes in component-grid.tsx
<Popover
content={
<div className="w-full p-2 bg-white rounded-md sm:w-40">
<button className="relative flex items-center justify-start w-full p-2 space-x-2 text-sm text-left transition-all duration-75 rounded-md hover:bg-gray-100 active:bg-gray-200">
Item 1
</button>
<button className="relative flex items-center justify-start w-full p-2 space-x-2 text-sm text-left transition-all duration-75 rounded-md hover:bg-gray-100 active:bg-gray-200">
Item 2
</button>
<button className="relative flex items-center justify-start w-full p-2 space-x-2 text-sm text-left transition-all duration-75 rounded-md hover:bg-gray-100 active:bg-gray-200">
Item 3
</button>
</div>
}
openPopover={openPopover}
setOpenPopover={setOpenPopover}
>
<button className="flex items-center justify-between w-40 px-4 py-2 transition-all duration-75 border border-gray-300 rounded-md hover:border-gray-800 focus:outline-none active:bg-gray-100">
{openPopover && <p className="text-gray-600">Popover</p>}
<ChevronDown
className={`h-4 w-4 text-gray-600 ${
openPopover ? "rotate-180" : ""
}`}
/>
</button>
</Popover>
This is crazy minor, but I follow you on Twitter and think you enjoy these polish challenges.
Look at the bottom of the viewport in this video. The spring bounce in the animation is causing the container of the components (in the title of this issue) to bounce and reveal the overlay underneath briefly.
I'm not really sure what a solution might be. Maybe make the height of the containers like 110% so that the bounce doesn't reveal the overlay underneath?
I tried cloning this repo and set my next.config.js to:
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
swcMinify: true,
experimental: {
serverActions: true,
},
};
module.exports = nextConfig;
i did this because I want to try using the Server Actions features descirbed in this video: https://www.youtube.com/watch?v=gPyKKD6mODE&t=2002s (which references this repo in its resources for server actions).
When I try to use this - I get an error that says:
Error occurred prerendering page "/". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: (0 , import_react.useEffect) is not a function
at Analytics (/v9/.next/server/chunks/447.js:32321:32)
at T (/v9/.next/server/chunks/447.js:25855:13)
at Za (/v9/.next/server/chunks/447.js:25960:21)
at Array.toJSON (/v9/.next/server/chunks/447.js:25774:20)
at stringify ()
at da (/v9/.next/server/chunks/447.js:25432:9)
at gb (/v9/.next/server/chunks/447.js:26069:29)
at Timeout._onTimeout (/v9/.next/server/chunks/447.js:25905:16)
at listOnTimeout (node:internal/timers:569:17)
at process.processTimers (node:internal/timers:512:7)
- info Generating static pages (5/5)
Export encountered errors on following paths:
/page: /
βELIFECYCLEβ Command failed with exit code 1.
Does anyone know how to use this repo with server actions?
Hello, may I know how you made the screen recording?
Currently, if you use the Firefox browser and open any modal, it will be off center and at the very top of the page, thus producing a unwanted behavior.
There are no differences in the code, since the change.
This is also present at the homepage.
With some investigation, this seems like it originates from the root modal itself and not the signin modals, so in other words.... this will occur on every modal.
Error occurred prerendering page "/sitemap.xml". Read more: https://nextjs.org/docs/messages/prerender-error Error: Invalid
prisma.user.findMany()invocation: The table
public.User does not exist in the current database. at pn.handleRequestError (/vercel/path0/node_modules/.pnpm/@[email protected][email protected]/node_modules/@prisma/client/runtime/library.js:176:6477) at pn.request (/vercel/path0/node_modules/.pnpm/@[email protected][email protected]/node_modules/@prisma/client/runtime/library.js:176:5786) at async t._request (/vercel/path0/node_modules/.pnpm/@[email protected][email protected]/node_modules/@prisma/client/runtime/library.js:179:10484) at async sitemap (/vercel/path0/.next/server/app/sitemap.xml/route.js:154:19) at async GET (/vercel/path0/.next/server/app/sitemap.xml/route.js:183:16) info - Generating static pages (5/5)
Okay for real though, while Prisma is awesome, I think the next best move for this project would be considering switching to Drizzle as it offers a lot of the benefits of Prisma but fixes a number of the core issues that many people have with it.
The main 2 being codegen & edge support. Since Drizzle allows you to create your schema purely in TypeScript there is no need to generate types from a .prisma
file. Then of course the switch to a "native driver" or HTTP driver, like @planetscale/database
, to allow for use in a V8 isolate / edge runtime.
Probably one of the biggest blockers going in would be porting the current Prisma schema to Drizzle, which should not be too hard.
I have successfully done this myself already for my own custom data as well as using these PR's in the NextAuth.js repo showing how to implement the tables needed to handle NextAuth.js / Auth.js.
If need be I am happy to help migrate the Prisma schema to a Drizzle schema π
The template boasts 100 performance on lighthouse, but in reality the performance is around 60/100 if you use the real lighthouse - the one google will use to evaluate your website on the search engine results page. It even fails the core web vitals assessment.
https://pagespeed.web.dev/report?url=https%3A%2F%2Fprecedent.dev%2F
npx prisma db push
Prisma schema loaded from prisma/schema.prisma
Datasource "db": PostgreSQL database
Error: Prisma schema validation - (get-config wasm)
Error code: P1012
error: Environment variable not found: POSTGRES_PRISMA_URL.
--> schema.prisma:11
|
10 | provider = "postgresql"
11 | url = env("POSTGRES_PRISMA_URL") // uses connection pooling
|
Validation Error Count: 1
[Context: getConfig].
I used npx vercel env pull .env to pull and also set export POSTGRES_URL_NON_POOLING=
Can you please suggest @steven-tey ?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.