Merge branch 'main' into canary

heroui-inc · Dec 18, 2024 · e753317 · e753317
2 parents afe0b52 + f11659e
commit e753317
Show file tree

Hide file tree

Showing 30 changed files with 310 additions and 117 deletions.
diff --git a/apps/docs/app/examples/modal/placement/page.tsx b/apps/docs/app/examples/modal/placement/page.tsx
@@ -58,7 +58,7 @@ export default function Page() {
                 </p>
               </ModalBody>
               <ModalFooter>
-                <Button color="danger" variant="light" onClick={onClose}>
+                <Button color="danger" variant="light" onPress={onClose}>
                   Close
                 </Button>
                 <Button color="primary" onPress={onClose}>

diff --git a/apps/docs/app/examples/navbar/bordered/page.tsx b/apps/docs/app/examples/navbar/bordered/page.tsx
@@ -1,16 +1,6 @@
 "use client";
 
-import {
-  Navbar,
-  NavbarBrand,
-  NavbarContent,
-  NavbarItem,
-  Link as NextUiLink,
-  LinkProps,
-  Button,
-} from "@nextui-org/react";
-
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
+import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react";
 
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">

diff --git a/apps/docs/app/examples/navbar/controlled-menu/page.tsx b/apps/docs/app/examples/navbar/controlled-menu/page.tsx
@@ -9,13 +9,10 @@ import {
   NavbarMenuItem,
   NavbarMenuToggle,
   Button,
-  Link as NextUiLink,
-  LinkProps,
+  Link,
 } from "@nextui-org/react";
 import React from "react";
 
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
-
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
     <path

diff --git a/apps/docs/app/examples/navbar/custom-active-item/page.tsx b/apps/docs/app/examples/navbar/custom-active-item/page.tsx
@@ -1,16 +1,6 @@
 "use client";
 
-import {
-  Navbar,
-  NavbarBrand,
-  NavbarContent,
-  NavbarItem,
-  Link as NextUiLink,
-  LinkProps,
-  Button,
-} from "@nextui-org/react";
-
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
+import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react";
 
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">

diff --git a/apps/docs/app/examples/navbar/disable-menu-animation/page.tsx b/apps/docs/app/examples/navbar/disable-menu-animation/page.tsx
@@ -6,16 +6,13 @@ import {
   NavbarContent,
   NavbarItem,
   Button,
-  Link as NextUiLink,
-  LinkProps,
+  Link,
   NavbarMenu,
   NavbarMenuItem,
   NavbarMenuToggle,
 } from "@nextui-org/react";
 import React from "react";
 
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
-
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
     <path

diff --git a/apps/docs/app/examples/navbar/disabled-blur/page.tsx b/apps/docs/app/examples/navbar/disabled-blur/page.tsx
@@ -1,16 +1,6 @@
 "use client";
 
-import {
-  Navbar,
-  NavbarBrand,
-  NavbarContent,
-  NavbarItem,
-  Link as NextUiLink,
-  LinkProps,
-  Button,
-} from "@nextui-org/react";
-
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
+import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react";
 
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">

diff --git a/apps/docs/app/examples/navbar/hide-on-scroll/page.tsx b/apps/docs/app/examples/navbar/hide-on-scroll/page.tsx
@@ -1,16 +1,6 @@
 "use client";
 
-import {
-  Navbar,
-  NavbarBrand,
-  NavbarContent,
-  NavbarItem,
-  Link as NextUiLink,
-  LinkProps,
-  Button,
-} from "@nextui-org/react";
-
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
+import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react";
 
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">

diff --git a/apps/docs/app/examples/navbar/static/page.tsx b/apps/docs/app/examples/navbar/static/page.tsx
@@ -1,16 +1,6 @@
 "use client";
 
-import {
-  Navbar,
-  NavbarBrand,
-  NavbarContent,
-  NavbarItem,
-  Link as NextUiLink,
-  LinkProps,
-  Button,
-} from "@nextui-org/react";
-
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
+import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react";
 
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">

diff --git a/apps/docs/app/examples/navbar/usage/page.tsx b/apps/docs/app/examples/navbar/usage/page.tsx
@@ -1,16 +1,6 @@
 "use client";
 
-import {
-  Navbar,
-  NavbarBrand,
-  NavbarContent,
-  NavbarItem,
-  Link as NextUiLink,
-  LinkProps,
-  Button,
-} from "@nextui-org/react";
-
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
+import {Navbar, NavbarBrand, NavbarContent, NavbarItem, Link, Button} from "@nextui-org/react";
 
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">

diff --git a/apps/docs/app/examples/navbar/with-avatar/page.tsx b/apps/docs/app/examples/navbar/with-avatar/page.tsx
@@ -5,17 +5,14 @@ import {
   NavbarBrand,
   NavbarContent,
   NavbarItem,
-  Link as NextUiLink,
-  LinkProps,
+  Link,
   DropdownItem,
   DropdownTrigger,
   Dropdown,
   DropdownMenu,
   Avatar,
 } from "@nextui-org/react";
 
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
-
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
     <path

diff --git a/apps/docs/app/examples/navbar/with-dropdown-menu/page.tsx b/apps/docs/app/examples/navbar/with-dropdown-menu/page.tsx
@@ -5,8 +5,7 @@ import {
   NavbarBrand,
   NavbarContent,
   NavbarItem,
-  Link as NextUiLink,
-  LinkProps,
+  Link,
   Button,
   DropdownItem,
   DropdownTrigger,
@@ -15,8 +14,6 @@ import {
 } from "@nextui-org/react";
 import {ChevronDown, Lock, Activity, Flash, Server, TagUser, Scale} from "@nextui-org/shared-icons";
 
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
-
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
     <path

diff --git a/apps/docs/app/examples/navbar/with-menu/page.tsx b/apps/docs/app/examples/navbar/with-menu/page.tsx
@@ -5,17 +5,14 @@ import {
   NavbarBrand,
   NavbarContent,
   NavbarItem,
-  Link as NextUiLink,
-  LinkProps,
+  Link,
   Button,
   NavbarMenuToggle,
   NavbarMenu,
   NavbarMenuItem,
 } from "@nextui-org/react";
 import React from "react";
 
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
-
 const AcmeLogo = () => (
   <svg fill="none" height="36" viewBox="0 0 32 32" width="36">
     <path

diff --git a/apps/docs/app/examples/navbar/with-search-input/page.tsx b/apps/docs/app/examples/navbar/with-search-input/page.tsx
@@ -5,8 +5,7 @@ import {
   NavbarBrand,
   NavbarContent,
   NavbarItem,
-  Link as NextUiLink,
-  LinkProps,
+  Link,
   Input,
   DropdownItem,
   DropdownTrigger,
@@ -15,8 +14,6 @@ import {
   Avatar,
 } from "@nextui-org/react";
 
-const Link = (props: LinkProps) => <NextUiLink {...props} onClick={(e) => e.preventDefault()} />;
-
 import {SearchLinearIcon} from "@/components/icons";
 
 const AcmeLogo = () => (

diff --git a/apps/docs/components/marketing/install-banner.tsx b/apps/docs/components/marketing/install-banner.tsx
@@ -72,7 +72,7 @@ export const InstallBanner = () => {
               href="/docs/guide/installation"
               radius="full"
               size="md"
-              onClick={() => {
+              onPress={() => {
                 posthog.capture("InstallBanner - Get Started", {
                   action: "press",
                   category: "landing-page",
@@ -91,7 +91,7 @@ export const InstallBanner = () => {
               size="md"
               startContent={<GithubIcon />}
               variant="bordered"
-              onClick={() => {
+              onPress={() => {
                 posthog.capture("InstallBanner - Github", {
                   action: "press",
                   category: "landing-page",

diff --git a/apps/docs/components/marketing/sponsor-item.tsx b/apps/docs/components/marketing/sponsor-item.tsx
@@ -17,7 +17,7 @@ export const SponsorItem = ({name, href, logo}: Sponsor) => {
       isExternal
       className="flex flex-col items-center justify-center"
       href={href}
-      onClick={() => {
+      onPress={() => {
         posthog.capture("Hero - Sponsors", {
           name,
           action: "click",

diff --git a/apps/docs/components/mdx-components.tsx b/apps/docs/components/mdx-components.tsx
@@ -198,7 +198,7 @@ const Link = ({href, children}: {href?: string; children?: React.ReactNode}) =>
       disableAnimation={true}
       href={href}
       {...externalProps}
-      onClick={handleClick}
+      onPress={handleClick}
     >
       {children}
     </Components.Link>

diff --git a/apps/docs/components/sandpack/copy-button.tsx b/apps/docs/components/sandpack/copy-button.tsx
@@ -23,7 +23,7 @@ export const CopyButton = ({code: codeProp}: {code?: string}) => {
       content={copied ? "Copied!" : "Copy"}
       radius="md"
     >
-      <Button isIconOnly size="sm" title="Copy Code" variant="light" onClick={copyHandler}>
+      <Button isIconOnly size="sm" title="Copy Code" variant="light" onPress={copyHandler}>
         <CopyLinearIcon className="text-white dark:text-zinc-500" height={16} width={16} />
       </Button>
     </Tooltip>

diff --git a/apps/docs/content/components/input/built-in-validation.raw.jsx b/apps/docs/content/components/input/built-in-validation.raw.jsx
@@ -0,0 +1,40 @@
+import {Button, Form, Input} from "@nextui-org/react";
+
+export default function App() {
+  const [submitted, setSubmitted] = React.useState(null);
+
+  const onSubmit = (e) => {
+    e.preventDefault();
+    const data = Object.fromEntries(new FormData(e.currentTarget));
+
+    setSubmitted(data);
+  };
+
+  return (
+    <Form className="w-full max-w-xs" validationBehavior="native" onSubmit={onSubmit}>
+      <Input
+        isRequired
+        errorMessage={({validationDetails, validationErrors}) => {
+          if (validationDetails.typeMismatch) {
+            return "Please enter a valid email address";
+          }
+
+          return validationErrors;
+        }}
+        label="Email"
+        labelPlacement="outside"
+        name="email"
+        placeholder="Enter your email"
+        type="email"
+      />
+      <Button color="primary" type="submit">
+        Submit
+      </Button>
+      {submitted && (
+        <div className="text-small text-default-500">
+          You submitted: <code>{JSON.stringify(submitted)}</code>
+        </div>
+      )}
+    </Form>
+  );
+}
diff --git a/apps/docs/content/components/input/built-in-validation.ts b/apps/docs/content/components/input/built-in-validation.ts
@@ -0,0 +1,9 @@
+import App from "./built-in-validation.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/input/custom-validation.raw.jsx b/apps/docs/content/components/input/custom-validation.raw.jsx
@@ -0,0 +1,40 @@
+import {Button, Form, Input} from "@nextui-org/react";
+
+export default function App() {
+  const [submitted, setSubmitted] = React.useState(null);
+
+  const onSubmit = (e) => {
+    e.preventDefault();
+    const data = Object.fromEntries(new FormData(e.currentTarget));
+
+    setSubmitted(data);
+  };
+
+  return (
+    <Form className="w-full max-w-xs" validationBehavior="native" onSubmit={onSubmit}>
+      <Input
+        isRequired
+        label="Username"
+        labelPlacement="outside"
+        name="username"
+        placeholder="Enter your username"
+        type="text"
+        validate={(value) => {
+          if (value.length < 3) {
+            return "Username must be at least 3 characters long";
+          }
+
+          return value === "admin" ? "Nice try!" : null;
+        }}
+      />
+      <Button color="primary" type="submit">
+        Submit
+      </Button>
+      {submitted && (
+        <div className="text-small text-default-500">
+          You submitted: <code>{JSON.stringify(submitted)}</code>
+        </div>
+      )}
+    </Form>
+  );
+}
diff --git a/apps/docs/content/components/input/custom-validation.ts b/apps/docs/content/components/input/custom-validation.ts
@@ -0,0 +1,9 @@
+import App from "./custom-validation.raw.jsx?raw";
+
+const react = {
+  "/App.jsx": App,
+};
+
+export default {
+  ...react,
+};
diff --git a/apps/docs/content/components/input/index.ts b/apps/docs/content/components/input/index.ts
@@ -14,6 +14,10 @@ import startEndContent from "./start-end-content";
 import errorMessage from "./error-message";
 import regexValidation from "./regex-validation";
 import controlled from "./controlled";
+import builtInValidation from "./built-in-validation";
+import customValidation from "./custom-validation";
+import realTimeValidation from "./real-time-validation";
+import serverValidation from "./server-validation";
 import customStyles from "./custom-styles";
 import customImpl from "./custom-impl";
 
@@ -34,6 +38,10 @@ export const inputContent = {
   errorMessage,
   regexValidation,
   controlled,
+  builtInValidation,
+  customValidation,
+  realTimeValidation,
+  serverValidation,
   customStyles,
   customImpl,
 };