Spaces:
Sleeping
Sleeping
| Pull Request Number: 4228 | |
| Title: feat: nextjs 15 migration [docs] | |
| Base Branch: canary | |
| Head Branch: feat/next15 | |
| Author: jrgarciadev | |
| URL: https://github.com/nextui-org/nextui/pull/4228 | |
| State: MERGED | |
| Created At: 2024-12-05T15:04:01Z | |
| Merged At: 2024-12-05T20:07:45Z | |
| Participants: jrgarciadev | |
| Description: | |
| Closes # | |
| π Description | |
| β³οΈ Current behavior (updates) | |
| π New behavior | |
| π£ Is this a breaking change (Yes/No): | |
| π Additional Information | |
| Summary by CodeRabbit | |
| Release Notes | |
| New Features | |
| Introduced new components: Support, CarbonAd, Codeblock, PackageManagers, and NextUIPerf. | |
| Added a new route for "Design Principles" in the documentation. | |
| Improvements | |
| Enhanced the Support component to fetch sponsor data asynchronously. | |
| Updated the PopoverContent and NavbarMenu components for improved scroll management. | |
| Refactored the theme-switch logic for better theme initialization. | |
| Bug Fixes | |
| Corrected image paths in the blog documentation for version 2.6.0. | |
| Documentation | |
| Updated the blog post for NextUI v2.6.0 with new features and breaking changes. | |
| Chores | |
| Updated various dependencies to improve performance and compatibility. | |
| Commits: | |
| - feat: nextjs 15 migration in progress\n- feat: next 15 downgraded to next 14\n | |
| Labels: | |
| Comments: | |
| - vercel: [vc]: #ywTe3xw0xPNgcDCvxYRL46oOwPaQzsIzsEwq0QvakI0=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJuZXh0dWktZG9jcy12MiIsInJvb3REaXJlY3RvcnkiOiJhcHBzL2RvY3MiLCJpbnNwZWN0b3JVcmwiOiJodHRwczovL3ZlcmNlbC5jb20vbmV4dHVpLW9yZy9uZXh0dWktZG9jcy12Mi9IOTNzeDNMUzZlczVBeldqblAxWHNDdVoxV2sxIiwicHJldmlld1VybCI6Im5leHR1aS1kb2NzLXYyLWdpdC1mZWF0LW5leHQxNS1uZXh0dWktb3JnLnZlcmNlbC5hcHAiLCJuZXh0Q29tbWl0U3RhdHVzIjoiREVQTE9ZRUQiLCJsaXZlRmVlZGJhY2siOnsicmVzb2x2ZWQiOjAsInVucmVzb2x2ZWQiOjAsInRvdGFsIjowLCJsaW5rIjoibmV4dHVpLWRvY3MtdjItZ2l0LWZlYXQtbmV4dDE1LW5leHR1aS1vcmcudmVyY2VsLmFwcCJ9fSx7Im5hbWUiOiJuZXh0dWktc3Rvcnlib29rLXYyIiwicm9vdERpcmVjdG9yeSI6InBhY2thZ2VzL3N0b3J5Ym9vayIsImluc3BlY3RvclVybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS9uZXh0dWktb3JnL25leHR1aS1zdG9yeWJvb2stdjIvMTJzU0V3RG11RFVzbnlROXFEcmo1UlZEYXlUdSIsInByZXZpZXdVcmwiOiJuZXh0dWktc3Rvcnlib29rLXYyLWdpdC1mZWF0LW5leHQxNS1uZXh0dWktb3JnLnZlcmNlbC5hcHAiLCJuZXh0Q29tbWl0U3RhdHVzIjoiREVQTE9ZRUQiLCJsaXZlRmVlZGJhY2siOnsicmVzb2x2ZWQiOjAsInVucmVzb2x2ZWQiOjAsInRvdGFsIjowLCJsaW5rIjoibmV4dHVpLXN0b3J5Ym9vay12Mi1naXQtZmVhdC1uZXh0MTUtbmV4dHVpLW9yZy52ZXJjZWwuYXBwIn19XX0= | |
| **The latest updates on your projects**. Learn more about [Vercel for Git βοΈ](https://vercel.link/github-learn-more) | |
| | Name | Status | Preview | Comments | Updated (UTC) | | |
| | :--- | :----- | :------ | :------- | :------ | | |
| | **nextui-docs-v2** | β Ready ([Inspect](https://vercel.com/nextui-org/nextui-docs-v2/H93sx3LS6es5AzWjnP1XsCuZ1Wk1)) | [Visit Preview](https://nextui-docs-v2-git-feat-next15-nextui-org.vercel.app) | π¬ [**Add feedback**](https://vercel.live/open-feedback/nextui-docs-v2-git-feat-next15-nextui-org.vercel.app?via=pr-comment-feedback-link) | Dec 5, 2024 8:07pm | | |
| | **nextui-storybook-v2** | β Ready ([Inspect](https://vercel.com/nextui-org/nextui-storybook-v2/12sSEwDmuDUsnyQ9qDrj5RVDayTu)) | [Visit Preview](https://nextui-storybook-v2-git-feat-next15-nextui-org.vercel.app) | π¬ [**Add feedback**](https://vercel.live/open-feedback/nextui-storybook-v2-git-feat-next15-nextui-org.vercel.app?via=pr-comment-feedback-link) | Dec 5, 2024 8:07pm | | |
| \n- coderabbitai: <!-- This is an auto-generated comment: summarize by coderabbit.ai --> | |
| <!-- walkthrough_start --> | |
| ## Walkthrough | |
| This pull request introduces multiple changes across various files, primarily focusing on updates to components, configuration, and documentation. Key modifications include adjustments to the `generateStaticParams` function's return type, restructuring of metadata and viewport settings, refactoring of components like `Support` and `UserTwitterCard`, and the introduction of new components such as `CarbonAd` and `Codeblock`. Additionally, several package.json files have been updated to reflect dependency changes and version bumps. The overall aim is to enhance functionality, improve documentation clarity, and streamline component behavior. | |
| ## Changes | |
| | File Path | Change Summary | | |
| |--------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------| | |
| | `apps/docs/app/docs/[[...slug]]/page.tsx` | Updated `generateStaticParams` return type from `Promise<DocPageProps["params"][]>` to `Promise<{slug: string[]}[]>`. | | |
| | `apps/docs/app/layout.tsx` | Removed `themeColor` and `viewport` from `metadata`; added new `viewport` object with specific properties. | | |
| | `apps/docs/app/page.tsx` | Changed `Support` import to default import; removed `getData` function and its call; wrapped `Support` in `Suspense`. | | |
| | `apps/docs/app/providers.tsx` | Updated `ThemeProviderProps` import; modified PostHog initialization to check for production environment. | | |
| | `apps/docs/components/demos/user-twitter-card.tsx` | Removed `FC` type annotation; simplified component definition. | | |
| | `apps/docs/components/docs/components/code-demo/react-live-demo.tsx` | Changed import alias from `Components` to `NextUI`; updated `scope` object. | | |
| | `apps/docs/components/marketing/support-client.tsx` | Introduced new `Support` component for displaying sponsorship options. | | |
| | `apps/docs/components/marketing/support.tsx` | Refactored to an async function that fetches sponsors using `getAllSponsors`. | | |
| | `apps/docs/components/theme-switch.tsx` | Introduced `initialTheme` variable for SSR detection; updated `isSelected` and `aria-label` logic. | | |
| | `apps/docs/config/routes.json` | Added new route for "Design Principles"; removed previous entry for the same. | | |
| | `apps/docs/content/blog/v2.6.0.mdx` | Updated image paths and enhanced the introduction section with new features and breaking changes. | | |
| | `apps/docs/next.config.js` | Removed `swcMinify`; updated `images` configuration from `domains` to `remotePatterns`. | | |
| | `apps/docs/package.json` | Updated several dependencies to exact versions; added new `mdx-bundler` dependency. | | |
| | `apps/docs/styles/globals.css` | Reintroduced Tailwind CSS directives; commented out experimental styles. | | |
| | `packages/components/navbar/package.json` | Updated version to `2.1.0`; removed `react-remove-scroll` dependency. | | |
| | `packages/components/navbar/src/navbar-menu.tsx` | Removed `MenuWrapper` component; simplified rendering logic. | | |
| | `packages/components/navbar/src/use-navbar.ts` | Added `shouldBlockScroll` property to `Props` interface; updated default value in `useNavbar`. | | |
| | `packages/components/popover/package.json` | Updated version to `2.2.0`; removed `react-remove-scroll` dependency. | | |
| | `packages/components/popover/src/popover-content.tsx` | Removed `RemoveScroll` from rendering logic; simplified structure. | | |
| | `packages/components/popover/src/use-popover.ts` | Integrated `usePreventScroll` for managing scroll behavior based on `shouldBlockScroll`. | | |
| | `packages/components/tooltip/package.json` | Updated version to `2.1.0`; removed `react` and `react-dom` from `devDependencies`. | | |
| | `apps/docs/components/docs/components/codeblock.tsx` | Introduced new `Codeblock` component for syntax-highlighted code blocks. | | |
| | `apps/docs/components/docs/components/package-managers.tsx` | Introduced new `PackageManagers` component for displaying package manager commands. | | |
| | `apps/docs/components/mdx-content.tsx` | Updated `MDXContent` to utilize `useMDXComponent` hook for dynamic rendering. | | |
| | `apps/docs/app/examples/perf/client-page.tsx` | Introduced new `NextUIPerf` component for performance testing interface. | | |
| | `apps/docs/app/examples/perf/page.tsx` | Renamed export from `NextUIPerf` to `PerfPage`; simplified structure to wrap `ClientPage` in `Suspense`. | | |
| | `apps/docs/components/ads/carbon-ad/carbon-ad.tsx` | Introduced new `CarbonAd` component for managing ethical and carbon ads. | | |
| ## Possibly related PRs | |
| - **#2544**: Modifies the `generateStaticParams` function in the `page.tsx` file. | |
| - **#3035**: Updates to the `cli-api.mdx` file, affecting parameter generation. | |
| - **#3307**: Refactors the `Popover` component, impacting component behavior. | |
| - **#3512**: Focuses on version bumps across various components. | |
| - **#3582**: Enhances logic for React imports, affecting component handling. | |
| - **#3595**: Introduces a new feature for the `Popover` component. | |
| - **#3631**: Adds missing package manager tabs in documentation. | |
| - **#3650**: Improves documentation for package managers. | |
| - **#3731**: Enhances installation documentation. | |
| - **#3815**: Updates references from Twitter to X in documentation. | |
| - **#3922**: Revises the code block structure, related to code handling. | |
| - **#4030**: Fixes an invalid link in the documentation. | |
| - **#4204**: Addresses issues in the React core package. | |
| ## Suggested labels | |
| `π Scope : Docs` | |
| ## Suggested reviewers | |
| - wingkwong | |
| - ryo-manba | |
| <!-- walkthrough_end --> | |
| <!-- internal state start --> | |
| <!-- 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 --> | |
| <!-- internal state end --> | |
| <!-- tips_start --> | |
| --- | |
| Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? | |
| <details> | |
| <summary>β€οΈ Share</summary> | |
| - [X](https://twitter.com/intent/tweet?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A&url=https%3A//coderabbit.ai) | |
| - [Mastodon](https://mastodon.social/share?text=I%20just%20used%20%40coderabbitai%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20the%20proprietary%20code.%20Check%20it%20out%3A%20https%3A%2F%2Fcoderabbit.ai) | |
| - [Reddit](https://www.reddit.com/submit?title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&text=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code.%20Check%20it%20out%3A%20https%3A//coderabbit.ai) | |
| - [LinkedIn](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fcoderabbit.ai&mini=true&title=Great%20tool%20for%20code%20review%20-%20CodeRabbit&summary=I%20just%20used%20CodeRabbit%20for%20my%20code%20review%2C%20and%20it%27s%20fantastic%21%20It%27s%20free%20for%20OSS%20and%20offers%20a%20free%20trial%20for%20proprietary%20code) | |
| </details> | |
| <details> | |
| <summary>πͺ§ Tips</summary> | |
| ### Chat | |
| There are 3 ways to chat with [CodeRabbit](https://coderabbit.ai): | |
| - Review comments: Directly reply to a review comment made by CodeRabbit. Example: | |
| - `I pushed a fix in commit <commit_id>, please review it.` | |
| - `Generate unit testing code for this file.` | |
| - `Open a follow-up GitHub issue for this discussion.` | |
| - Files and specific lines of code (under the "Files changed" tab): Tag `@coderabbitai` in a new review comment at the desired location with your query. Examples: | |
| - `@coderabbitai generate unit testing code for this file.` | |
| - `@coderabbitai modularize this function.` | |
| - PR comments: Tag `@coderabbitai` in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples: | |
| - `@coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.` | |
| - `@coderabbitai read src/utils.ts and generate unit testing code.` | |
| - `@coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.` | |
| - `@coderabbitai help me debug CodeRabbit configuration file.` | |
| Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. | |
| ### CodeRabbit Commands (Invoked using PR comments) | |
| - `@coderabbitai pause` to pause the reviews on a PR. | |
| - `@coderabbitai resume` to resume the paused reviews. | |
| - `@coderabbitai review` to trigger an incremental review. This is useful when automatic reviews are disabled for the repository. | |
| - `@coderabbitai full review` to do a full review from scratch and review all the files again. | |
| - `@coderabbitai summary` to regenerate the summary of the PR. | |
| - `@coderabbitai resolve` resolve all the CodeRabbit review comments. | |
| - `@coderabbitai configuration` to show the current CodeRabbit configuration for the repository. | |
| - `@coderabbitai help` to get help. | |
| ### Other keywords and placeholders | |
| - Add `@coderabbitai ignore` anywhere in the PR description to prevent this PR from being reviewed. | |
| - Add `@coderabbitai summary` to generate the high-level summary at a specific location in the PR description. | |
| - Add `@coderabbitai` anywhere in the PR title to generate the title automatically. | |
| ### Documentation and Community | |
| - Visit our [Documentation](https://docs.coderabbit.ai) for detailed information on how to use CodeRabbit. | |
| - Join our [Discord Community](http://discord.gg/coderabbit) to get help, request features, and share feedback. | |
| - Follow us on [X/Twitter](https://twitter.com/coderabbitai) for updates and announcements. | |
| </details> | |
| <!-- tips_end -->\n- changeset-bot: ### β οΈ No Changeset found | |
| Latest commit: c1c05ecc0834b12ff63db5cd56d0a77c1512c22d | |
| Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. **If these changes should result in a version bump, you need to add a changeset.** | |
| <details><summary>This PR includes no changesets</summary> | |
| When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types | |
| </details> | |
| [Click here to learn what changesets are, and how to add one](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md). | |
| [Click here if you're a maintainer who wants to add a changeset to this PR](https://github.com/nextui-org/nextui/new/feat/next15?filename=.changeset/tough-stingrays-turn.md&value=---%0A%22%40nextui-org%2Fdocs%22%3A%20patch%0A%22%40nextui-org%2Fnavbar%22%3A%20patch%0A%22%40nextui-org%2Fpopover%22%3A%20patch%0A%22%40nextui-org%2Ftooltip%22%3A%20patch%0A---%0A%0Afeat%3A%20nextjs%2015%20migration%20%5Bdocs%5D%0A) | |
| \n | |
| Files Changed: | |
| - apps/docs/app/docs/[[...slug]]/page.tsx (modified, 2 changes)\n Patch: @@ -71,7 +71,7 @@ export async function generateMetadata({params}: DocPageProps): Promise<Metadata | |
| }; | |
| } | |
| -export async function generateStaticParams(): Promise<DocPageProps["params"][]> { | |
| +export async function generateStaticParams(): Promise<{slug: string[]}[]> { | |
| return allDocs.map((doc) => ({ | |
| slug: doc.slugAsParams.split("/"), | |
| }));\n- apps/docs/app/examples/perf/client-page.tsx (added, 561 changes)\n Patch: @@ -0,0 +1,561 @@ | |
| +"use client"; | |
| + | |
| +import { | |
| + RadioGroup, | |
| + Radio, | |
| + Button, | |
| + Accordion, | |
| + Tabs, | |
| + Textarea, | |
| + Input, | |
| + Tab, | |
| + Avatar, | |
| + Select, | |
| + SelectItem, | |
| + AccordionItem, | |
| + Pagination, | |
| + extendVariants, | |
| + PaginationItem, | |
| +} from "@nextui-org/react"; | |
| +import {useFilter} from "@react-aria/i18n"; | |
| +import {useEffect, useMemo, useRef, useState} from "react"; | |
| +import {useSearchParams} from "next/navigation"; | |
| + | |
| +import {SearchLinearIcon} from "@/components/icons"; | |
| + | |
| +const MyRadioGroup = () => { | |
| + const [radio, setRadio] = useState("1"); | |
| + | |
| + return ( | |
| + <RadioGroup value={radio} onValueChange={setRadio}> | |
| + <Radio value="1">Radio 1</Radio> | |
| + <Radio value="2">Radio 2</Radio> | |
| + <Radio value="3">Radio 3</Radio> | |
| + <Radio value="4">Radio 4</Radio> | |
| + <Radio value="5">Radio 5</Radio> | |
| + <Radio value="6">Radio 6</Radio> | |
| + <Radio value="7">Radio 7</Radio> | |
| + <Radio value="8">Radio 8</Radio> | |
| + <Radio value="9">Radio 9</Radio> | |
| + <Radio value="10">Radio 10</Radio> | |
| + <Radio value="11">Radio 11</Radio> | |
| + <Radio value="12">Radio 12</Radio> | |
| + <Radio value="13">Radio 13</Radio> | |
| + <Radio value="14">Radio 14</Radio> | |
| + <Radio value="15">Radio 15</Radio> | |
| + <Radio value="16">Radio 16</Radio> | |
| + <Radio value="17">Radio 17</Radio> | |
| + <Radio value="18">Radio 18</Radio> | |
| + <Radio value="19">Radio 19</Radio> | |
| + <Radio value="20">Radio 20</Radio> | |
| + <Radio value="21">Radio 21</Radio> | |
| + <Radio value="22">Radio 22</Radio> | |
| + <Radio value="23">Radio 23</Radio> | |
| + <Radio value="24">Radio 24</Radio> | |
| + <Radio value="25">Radio 25</Radio> | |
| + <Radio value="26">Radio 26</Radio> | |
| + <Radio value="27">Radio 27</Radio> | |
| + <Radio value="28">Radio 28</Radio> | |
| + <Radio value="29">Radio 29</Radio> | |
| + <Radio value="30">Radio 30</Radio> | |
| + <Radio value="31">Radio 31</Radio> | |
| + <Radio value="32">Radio 32</Radio> | |
| + <Radio value="33">Radio 33</Radio> | |
| + <Radio value="34">Radio 34</Radio> | |
| + <Radio value="35">Radio 35</Radio> | |
| + <Radio value="36">Radio 36</Radio> | |
| + <Radio value="37">Radio 37</Radio> | |
| + <Radio value="38">Radio 38</Radio> | |
| + <Radio value="39">Radio 39</Radio> | |
| + <Radio value="40">Radio 40</Radio> | |
| + <Radio value="41">Radio 41</Radio> | |
| + <Radio value="42">Radio 42</Radio> | |
| + <Radio value="43">Radio 43</Radio> | |
| + <Radio value="44">Radio 44</Radio> | |
| + <Radio value="45">Radio 45</Radio> | |
| + <Radio value="46">Radio 46</Radio> | |
| + <Radio value="47">Radio 47</Radio> | |
| + <Radio value="48">Radio 48</Radio> | |
| + <Radio value="49">Radio 49</Radio> | |
| + <Radio value="50">Radio 50</Radio> | |
| + <Radio value="51">Radio 51</Radio> | |
| + <Radio value="52">Radio 52</Radio> | |
| + <Radio value="53">Radio 53</Radio> | |
| + <Radio value="54">Radio 54</Radio> | |
| + <Radio value="55">Radio 55</Radio> | |
| + <Radio value="56">Radio 56</Radio> | |
| + <Radio value="57">Radio 57</Radio> | |
| + <Radio value="58">Radio 58</Radio> | |
| + <Radio value="59">Radio 59</Radio> | |
| + <Radio value="60">Radio 60</Radio> | |
| + <Radio value="61">Radio 61</Radio> | |
| + <Radio value="62">Radio 62</Radio> | |
| + </RadioGroup> | |
| + ); | |
| +}; | |
| + | |
| +const MyInput = extendVariants(Input, { | |
| + variants: { | |
| + color: { | |
| + stone: { | |
| + inputWrapper: [ | |
| + "bg-zinc-100", | |
| + "border", | |
| + "shadow", | |
| + "transition-colors", | |
| + "focus-within:bg-zinc-100", | |
| + "data-[hover=true]:border-zinc-600", | |
| + "data-[hover=true]:bg-zinc-100", | |
| + "group-data-[focus=true]:border-zinc-600", | |
| + // dark theme | |
| + "dark:bg-zinc-900", | |
| + "dark:border-zinc-800", | |
| + "dark:data-[hover=true]:bg-zinc-900", | |
| + "dark:focus-within:bg-zinc-900", | |
| + ], | |
| + input: [ | |
| + "text-zinc-800", | |
| + "placeholder:text-zinc-600", | |
| + // dark theme | |
| + "dark:text-zinc-400", | |
| + "dark:placeholder:text-zinc-600", | |
| + ], | |
| + }, | |
| + }, | |
| + size: { | |
| + xs: { | |
| + inputWrapper: "h-6 min-h-6 px-1", | |
| + input: "text-tiny", | |
| + }, | |
| + md: { | |
| + inputWrapper: "h-10 min-h-10", | |
| + input: "text-small", | |
| + }, | |
| + xl: { | |
| + inputWrapper: "h-14 min-h-14", | |
| + input: "text-medium", | |
| + }, | |
| + }, | |
| + radius: { | |
| + xs: { | |
| + inputWrapper: "rounded", | |
| + }, | |
| + sm: { | |
| + inputWrapper: "rounded-[4px]", | |
| + }, | |
| + }, | |
| + textSize: { | |
| + base: { | |
| + input: "text-base", | |
| + }, | |
| + }, | |
| + removeLabel: { | |
| + true: { | |
| + label: "hidden", | |
| + }, | |
| + false: {}, | |
| + }, | |
| + }, | |
| + defaultVariants: { | |
| + color: "stone", | |
| + textSize: "base", | |
| + removeLabel: true, | |
| + }, | |
| +}); | |
| + | |
| +const MyButton2 = extendVariants(Button, { | |
| + variants: { | |
| + color: { | |
| + foreground: | |
| + "bg-foreground text-background data-[hover=true]:bg-foreground/90 data-[pressed=true]:bg-foreground/80", | |
| + }, | |
| + isScalable: { | |
| + true: "scale-125", | |
| + false: "", | |
| + }, | |
| + size: { | |
| + xl: "size--xl", | |
| + "2xl": "size--2xl", | |
| + }, | |
| + mySize: { | |
| + lg: "px-12 py-6 text-lg", | |
| + xl: "px-12 py-6 text-xl", | |
| + }, | |
| + }, | |
| + defaultVariants: { | |
| + color: "foreground", | |
| + }, | |
| +}); | |
| + | |
| +const usersData = [ | |
| + { | |
| + id: 1, | |
| + name: "Tony Reichert", | |
| + role: "CEO", | |
| + team: "Management", | |
| + status: "active", | |
| + age: "29", | |
| + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png", | |
| + email: "[email protected]", | |
| + }, | |
| + { | |
| + id: 2, | |
| + name: "Zoey Lang", | |
| + role: "Tech Lead", | |
| + team: "Development", | |
| + status: "paused", | |
| + age: "25", | |
| + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png", | |
| + email: "[email protected]", | |
| + }, | |
| + { | |
| + id: 3, | |
| + name: "Jane Fisher", | |
| + role: "Sr. Dev", | |
| + team: "Development", | |
| + status: "active", | |
| + age: "22", | |
| + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png", | |
| + email: "[email protected]", | |
| + }, | |
| + { | |
| + id: 4, | |
| + name: "William Howard", | |
| + role: "C.M.", | |
| + team: "Marketing", | |
| + status: "vacation", | |
| + age: "28", | |
| + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png", | |
| + email: "[email protected]", | |
| + }, | |
| + { | |
| + id: 5, | |
| + name: "Kristen Copper", | |
| + role: "S. Manager", | |
| + team: "Sales", | |
| + status: "active", | |
| + age: "24", | |
| + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png", | |
| + email: "[email protected]", | |
| + }, | |
| + { | |
| + id: 6, | |
| + name: "Brian Kim", | |
| + role: "P. Manager", | |
| + team: "Management", | |
| + age: "29", | |
| + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png", | |
| + email: "[email protected]", | |
| + status: "active", | |
| + }, | |
| + { | |
| + id: 7, | |
| + name: "Michael Hunt", | |
| + role: "Designer", | |
| + team: "Design", | |
| + status: "paused", | |
| + age: "27", | |
| + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png", | |
| + email: "[email protected]", | |
| + }, | |
| + { | |
| + id: 8, | |
| + name: "Samantha Brooks", | |
| + role: "HR Manager", | |
| + team: "HR", | |
| + status: "active", | |
| + age: "31", | |
| + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png", | |
| + email: "[email protected]", | |
| + }, | |
| + { | |
| + id: 9, | |
| + name: "Frank Harrison", | |
| + role: "F. Manager", | |
| + team: "Finance", | |
| + status: "vacation", | |
| + age: "33", | |
| + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png", | |
| + email: "[email protected]", | |
| + }, | |
| + { | |
| + id: 10, | |
| + name: "Emma Adams", | |
| + role: "Ops Manager", | |
| + team: "Operations", | |
| + status: "active", | |
| + age: "35", | |
| + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png", | |
| + email: "[email protected]", | |
| + }, | |
| + { | |
| + id: 11, | |
| + name: "Brandon Stevens", | |
| + role: "Jr. Dev", | |
| + team: "Development", | |
| + status: "active", | |
| + age: "22", | |
| + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png", | |
| + email: "[email protected]", | |
| + }, | |
| + { | |
| + id: 12, | |
| + name: "Megan Richards", | |
| + role: "P. Manager", | |
| + team: "Product", | |
| + status: "paused", | |
| + age: "28", | |
| + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png", | |
| + email: "[email protected]", | |
| + }, | |
| + { | |
| + id: 13, | |
| + name: "Oliver Scott", | |
| + role: "S. Manager", | |
| + team: "Security", | |
| + status: "active", | |
| + age: "37", | |
| + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png", | |
| + email: "[email protected]", | |
| + }, | |
| + { | |
| + id: 14, | |
| + name: "Grace Allen", | |
| + role: "M. Specialist", | |
| + team: "Marketing", | |
| + status: "active", | |
| + age: "30", | |
| + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png", | |
| + email: "[email protected]", | |
| + }, | |
| + { | |
| + id: 15, | |
| + name: "Noah Carter", | |
| + role: "IT Specialist", | |
| + team: "I. Technology", | |
| + status: "paused", | |
| + age: "31", | |
| + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png", | |
| + email: "[email protected]", | |
| + }, | |
| + { | |
| + id: 16, | |
| + name: "Ava Perez", | |
| + role: "Manager", | |
| + team: "Sales", | |
| + status: "active", | |
| + age: "29", | |
| + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png", | |
| + email: "[email protected]", | |
| + }, | |
| + { | |
| + id: 17, | |
| + name: "Liam Johnson", | |
| + role: "Data Analyst", | |
| + team: "Analysis", | |
| + status: "active", | |
| + age: "28", | |
| + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png", | |
| + email: "[email protected]", | |
| + }, | |
| + { | |
| + id: 18, | |
| + name: "Sophia Taylor", | |
| + role: "QA Analyst", | |
| + team: "Testing", | |
| + status: "active", | |
| + age: "27", | |
| + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png", | |
| + email: "[email protected]", | |
| + }, | |
| + { | |
| + id: 19, | |
| + name: "Lucas Harris", | |
| + role: "Administrator", | |
| + team: "Information Technology", | |
| + status: "paused", | |
| + age: "32", | |
| + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png", | |
| + email: "[email protected]", | |
| + }, | |
| + { | |
| + id: 20, | |
| + name: "Mia Robinson", | |
| + role: "Coordinator", | |
| + team: "Operations", | |
| + status: "active", | |
| + age: "26", | |
| + avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png", | |
| + email: "[email protected]", | |
| + }, | |
| +]; | |
| + | |
| +export default function NextUIPerf() { | |
| + const [textA, setTextA] = useState<string>(""); | |
| + const [textB, setTextB] = useState<string>(""); | |
| + const [textC, setTextC] = useState<string>(""); | |
| + const [isOpen, setIsOpen] = useState<boolean>(false); | |
| + const [inputValue, setInputValue] = useState<string>(); | |
| + const [selectedKey, setSelectedKey] = useState<string>(""); | |
| + | |
| + const searchParams = useSearchParams(); | |
| + | |
| + const page = Number(searchParams.get("page")); | |
| + | |
| + let {startsWith} = useFilter({sensitivity: "base"}); | |
| + | |
| + const filteredItems = inputValue | |
| + ? usersData.filter((item) => startsWith(item.name, inputValue)) | |
| + : usersData; | |
| + | |
| + const inputRef = useRef<HTMLInputElement>(null); | |
| + | |
| + useEffect(() => { | |
| + isOpen && inputRef?.current?.focus(); | |
| + }, [isOpen]); | |
| + | |
| + const handleSelectionChange = (e: React.ChangeEvent<HTMLSelectElement>) => { | |
| + setSelectedKey(e.target.value); | |
| + }; | |
| + | |
| + const topContent = useMemo(() => { | |
| + return ( | |
| + <Input | |
| + ref={inputRef} | |
| + isClearable | |
| + aria-activedescendant={selectedKey} | |
| + aria-expanded={isOpen} | |
| + aria-label="Search user" | |
| + autoComplete="off" | |
| + autoCorrect="off" | |
| + className="z-10 sticky top-1" | |
| + placeholder="Search..." | |
| + spellCheck={false} | |
| + startContent={<SearchLinearIcon className="text-default-400" size={18} strokeWidth="2" />} | |
| + type="text" | |
| + onValueChange={setInputValue} | |
| + /> | |
| + ); | |
| + }, [inputRef, selectedKey, isOpen]); | |
| + | |
| + return ( | |
| + <div className="w-full p-24 gap-4 flex flex-col"> | |
| + <Select | |
| + classNames={{ | |
| + base: "max-w-xs", | |
| + listboxWrapper: "scroll-pb-6 scroll-pt-28", | |
| + }} | |
| + items={filteredItems} | |
| + label="Assigned to" | |
| + labelPlacement="outside" | |
| + listboxProps={{ | |
| + topContent, | |
| + variant: "flat", | |
| + classNames: { | |
| + base: [ | |
| + "before:content-[''] before:rounded-t-medium before:fixed before:w-full before:h-14 before:z-10", | |
| + "before:top-0 before:left-0 before:bg-gradient-to-b before:from-default-50", | |
| + ], | |
| + }, | |
| + }} | |
| + placeholder="Select a user" | |
| + selectedKeys={[selectedKey]} | |
| + showScrollIndicators={false} | |
| + variant="flat" | |
| + onChange={handleSelectionChange} | |
| + onOpenChange={setIsOpen} | |
| + > | |
| + {(item) => ( | |
| + <SelectItem key={item.id} textValue={item.name}> | |
| + <div className="flex gap-2 items-center"> | |
| + <Avatar alt={item.name} className="flex-shrink-0" size="sm" src={item.avatar} /> | |
| + <div className="flex flex-col"> | |
| + <span className="text-small">{item.name}</span> | |
| + <span className="text-tiny text-default-400">{item.email}</span> | |
| + </div> | |
| + </div> | |
| + </SelectItem> | |
| + )} | |
| + </Select> | |
| + | |
| + <Accordion> | |
| + <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1"> | |
| + Non est aliqua tempor occaecat laborum. Lorem culpa minim irure mollit. Est qui | |
| + reprehenderit commodo magna proident anim ipsum ex. Mollit id amet officia nisi excepteur | |
| + eu. Commodo elit commodo nisi nisi aute eu aliquip aliquip voluptate exercitation ullamco | |
| + ipsum eiusmod veniam. Magna in laborum anim amet anim ex elit aliqua nostrud mollit. | |
| + Pariatur ullamco cillum proident aliqua nostrud. Labore ea veniam cillum duis veniam in | |
| + cupidatat voluptate eu officia. Ut laborum sunt nostrud magna. Ex magna esse cillum enim | |
| + incididunt pariatur qui veniam dolor. Exercitation id culpa et enim mollit duis duis | |
| + aliquip. Magna ullamco est cupidatat laboris irure pariatur aliquip duis aute cillum. | |
| + Officia irure do laboris ea nisi sunt reprehenderit laboris irure. Ex eiusmod in duis | |
| + veniam excepteur. Sunt et et laboris culpa. Mollit excepteur occaecat elit anim officia. | |
| + Laborum commodo proident cupidatat pariatur eu veniam id qui do culpa. Quis consectetur | |
| + adipisicing anim ex ea velit excepteur. Deserunt laboris ex aute sunt laborum tempor ea | |
| + enim dolore ut in. Id aliqua Lorem exercitation qui velit nostrud anim reprehenderit enim. | |
| + Nisi elit fugiat deserunt elit. Sit excepteur ipsum enim excepteur irure irure sint veniam | |
| + elit consequat ea id. Lorem ea qui sunt enim occaecat excepteur officia ex consequat | |
| + nostrud. Tempor sint Lorem est culpa do. | |
| + </AccordionItem> | |
| + <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2"> | |
| + Non est aliqua tempor occaecat laborum. Lorem culpa minim irure mollit. Est qui | |
| + reprehenderit commodo magna proident anim ipsum ex. Mollit id amet officia nisi excepteur | |
| + eu. Commodo elit commodo nisi nisi aute eu aliquip aliquip voluptate exercitation ullamco | |
| + ipsum eiusmod veniam. Magna in laborum anim amet anim ex elit aliqua nostrud mollit. | |
| + Pariatur ullamco cillum proident aliqua nostrud. Labore ea veniam cillum duis veniam in | |
| + cupidatat voluptate eu officia. Ut laborum sunt nostrud magna. Ex magna esse cillum enim | |
| + </AccordionItem> | |
| + <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3"> | |
| + Non est aliqua tempor occaecat laborum. Lorem culpa minim irure mollit. Est qui | |
| + reprehenderit commodo magna proident anim ipsum ex. Mollit id amet officia nisi excepteur | |
| + eu. Commodo elit commodo nisi nisi aute eu aliquip aliquip voluptate exercitation ullamco | |
| + ipsum eiusmod veniam. Magna in laborum anim amet anim ex elit aliqua nostrud mollit. | |
| + Pariatur ullamco cillum proident aliqua nostrud. Labore ea veniam cillum duis veniam in | |
| + </AccordionItem> | |
| + </Accordion> | |
| + <Tabs classNames={{panel: "flex flex-col gap-5"}} variant="underlined"> | |
| + <Tab title="Test 1"> | |
| + <Textarea defaultValue="ASdasd" label="Default value (uncontrolled)" /> | |
| + <Input label="Text B Tab 1" value={textB} onValueChange={setTextB} /> | |
| + <Textarea label="Text C Tab 1" value={textC} onValueChange={setTextC} /> | |
| + </Tab> | |
| + <Tab title="Test 2"> | |
| + <Textarea label="Text B Tab 2" value={textB} onValueChange={setTextB} /> | |
| + <Textarea label="Text C Tab 2" value={textC} onValueChange={setTextC} /> | |
| + </Tab> | |
| + <Tab title="Test 3"> | |
| + <Textarea label="Text B Tab 3" value={textB} onValueChange={setTextB} /> | |
| + <Textarea label="Text C Tab 3" value={textC} onValueChange={setTextC} /> | |
| + </Tab> | |
| + </Tabs> | |
| + | |
| + <h2>Outside</h2> | |
| + <Textarea label="Text A" placeholder="Text A" value={textA} onValueChange={setTextA} /> | |
| + <Textarea label="Text B" placeholder="Text B" value={textB} onValueChange={setTextB} /> | |
| + <Textarea label="Text C" placeholder="Text C" value={textC} onValueChange={setTextC} /> | |
| + | |
| + <MyRadioGroup /> | |
| + | |
| + <MyInput | |
| + isClearable | |
| + placeholder="Search..." | |
| + radius="md" | |
| + size="md" | |
| + startContent={<SearchLinearIcon className="text-zinc-500" size={16} />} | |
| + /> | |
| + | |
| + <Button>Click Me!</Button> | |
| + | |
| + <MyButton2 color="primary">Press Me!</MyButton2> | |
| + | |
| + <Pagination | |
| + showControls | |
| + initialPage={page ?? 1} | |
| + renderItem={({page, ...itemProps}) => { | |
| + return <PaginationItem href={`/examples/perf?page=${page}`} {...itemProps} />; | |
| + }} | |
| + total={10} | |
| + /> | |
| + </div> | |
| + ); | |
| +}\n- apps/docs/app/examples/perf/page.tsx (modified, 562 changes)\n Patch: @@ -1,561 +1,11 @@ | |
| -"use client"; | |
| +import {Suspense} from "react"; | |
| -import { | |
| - RadioGroup, | |
| - Radio, | |
| - Button, | |
| - Accordion, | |
| - Tabs, | |
| - Textarea, | |
| - Input, | |
| - Tab, | |
| - Avatar, | |
| - Select, | |
| - SelectItem, | |
| - AccordionItem, | |
| - Pagination, | |
| - extendVariants, | |
| - PaginationItem, | |
| -} from "@nextui-org/react"; | |
| -import {useFilter} from "@react-aria/i18n"; | |
| -import {useEffect, useMemo, useRef, useState} from "react"; | |
| -import {useSearchParams} from "next/navigation"; | |
| - | |
| -import {SearchLinearIcon} from "@/components/icons"; | |
| - | |
| -const MyRadioGroup = () => { | |
| - const [radio, setRadio] = useState("1"); | |
| - | |
| - return ( | |
| - <RadioGroup value={radio} onValueChange={setRadio}> | |
| - <Radio value="1">Radio 1</Radio> | |
| - <Radio value="2">Radio 2</Radio> | |
| - <Radio value="3">Radio 3</Radio> | |
| - <Radio value="4">Radio 4</Radio> | |
| - <Radio value="5">Radio 5</Radio> | |
| - <Radio value="6">Radio 6</Radio> | |
| - <Radio value="7">Radio 7</Radio> | |
| - <Radio value="8">Radio 8</Radio> | |
| - <Radio value="9">Radio 9</Radio> | |
| - <Radio value="10">Radio 10</Radio> | |
| - <Radio value="11">Radio 11</Radio> | |
| - <Radio value="12">Radio 12</Radio> | |
| - <Radio value="13">Radio 13</Radio> | |
| - <Radio value="14">Radio 14</Radio> | |
| - <Radio value="15">Radio 15</Radio> | |
| - <Radio value="16">Radio 16</Radio> | |
| - <Radio value="17">Radio 17</Radio> | |
| - <Radio value="18">Radio 18</Radio> | |
| - <Radio value="19">Radio 19</Radio> | |
| - <Radio value="20">Radio 20</Radio> | |
| - <Radio value="21">Radio 21</Radio> | |
| - <Radio value="22">Radio 22</Radio> | |
| - <Radio value="23">Radio 23</Radio> | |
| - <Radio value="24">Radio 24</Radio> | |
| - <Radio value="25">Radio 25</Radio> | |
| - <Radio value="26">Radio 26</Radio> | |
| - <Radio value="27">Radio 27</Radio> | |
| - <Radio value="28">Radio 28</Radio> | |
| - <Radio value="29">Radio 29</Radio> | |
| - <Radio value="30">Radio 30</Radio> | |
| - <Radio value="31">Radio 31</Radio> | |
| - <Radio value="32">Radio 32</Radio> | |
| - <Radio value="33">Radio 33</Radio> | |
| - <Radio value="34">Radio 34</Radio> | |
| - <Radio value="35">Radio 35</Radio> | |
| - <Radio value="36">Radio 36</Radio> | |
| - <Radio value="37">Radio 37</Radio> | |
| - <Radio value="38">Radio 38</Radio> | |
| - <Radio value="39">Radio 39</Radio> | |
| - <Radio value="40">Radio 40</Radio> | |
| - <Radio value="41">Radio 41</Radio> | |
| - <Radio value="42">Radio 42</Radio> | |
| - <Radio value="43">Radio 43</Radio> | |
| - <Radio value="44">Radio 44</Radio> | |
| - <Radio value="45">Radio 45</Radio> | |
| - <Radio value="46">Radio 46</Radio> | |
| - <Radio value="47">Radio 47</Radio> | |
| - <Radio value="48">Radio 48</Radio> | |
| - <Radio value="49">Radio 49</Radio> | |
| - <Radio value="50">Radio 50</Radio> | |
| - <Radio value="51">Radio 51</Radio> | |
| - <Radio value="52">Radio 52</Radio> | |
| - <Radio value="53">Radio 53</Radio> | |
| - <Radio value="54">Radio 54</Radio> | |
| - <Radio value="55">Radio 55</Radio> | |
| - <Radio value="56">Radio 56</Radio> | |
| - <Radio value="57">Radio 57</Radio> | |
| - <Radio value="58">Radio 58</Radio> | |
| - <Radio value="59">Radio 59</Radio> | |
| - <Radio value="60">Radio 60</Radio> | |
| - <Radio value="61">Radio 61</Radio> | |
| - <Radio value="62">Radio 62</Radio> | |
| - </RadioGroup> | |
| - ); | |
| -}; | |
| - | |
| -const MyInput = extendVariants(Input, { | |
| - variants: { | |
| - color: { | |
| - stone: { | |
| - inputWrapper: [ | |
| - "bg-zinc-100", | |
| - "border", | |
| - "shadow", | |
| - "transition-colors", | |
| - "focus-within:bg-zinc-100", | |
| - "data-[hover=true]:border-zinc-600", | |
| - "data-[hover=true]:bg-zinc-100", | |
| - "group-data-[focus=true]:border-zinc-600", | |
| - // dark theme | |
| - "dark:bg-zinc-900", | |
| - "dark:border-zinc-800", | |
| - "dark:data-[hover=true]:bg-zinc-900", | |
| - "dark:focus-within:bg-zinc-900", | |
| - ], | |
| - input: [ | |
| - "text-zinc-800", | |
| - "placeholder:text-zinc-600", | |
| - // dark theme | |
| - "dark:text-zinc-400", | |
| - "dark:placeholder:text-zinc-600", | |
| - ], | |
| - }, | |
| - }, | |
| - size: { | |
| - xs: { | |
| - inputWrapper: "h-6 min-h-6 px-1", | |
| - input: "text-tiny", | |
| - }, | |
| - md: { | |
| - inputWrapper: "h-10 min-h-10", | |
| - input: "text-small", | |
| - }, | |
| - xl: { | |
| - inputWrapper: "h-14 min-h-14", | |
| - input: "text-medium", | |
| - }, | |
| - }, | |
| - radius: { | |
| - xs: { | |
| - inputWrapper: "rounded", | |
| - }, | |
| - sm: { | |
| - inputWrapper: "rounded-[4px]", | |
| - }, | |
| - }, | |
| - textSize: { | |
| - base: { | |
| - input: "text-base", | |
| - }, | |
| - }, | |
| - removeLabel: { | |
| - true: { | |
| - label: "hidden", | |
| - }, | |
| - false: {}, | |
| - }, | |
| - }, | |
| - defaultVariants: { | |
| - color: "stone", | |
| - textSize: "base", | |
| - removeLabel: true, | |
| - }, | |
| -}); | |
| - | |
| -const MyButton2 = extendVariants(Button, { | |
| - variants: { | |
| - color: { | |
| - foreground: | |
| - "bg-foreground text-background data-[hover=true]:bg-foreground/90 data-[pressed=true]:bg-foreground/80", | |
| - }, | |
| - isScalable: { | |
| - true: "scale-125", | |
| - false: "", | |
| - }, | |
| - size: { | |
| - xl: "size--xl", | |
| - "2xl": "size--2xl", | |
| - }, | |
| - mySize: { | |
| - lg: "px-12 py-6 text-lg", | |
| - xl: "px-12 py-6 text-xl", | |
| - }, | |
| - }, | |
| - defaultVariants: { | |
| - color: "foreground", | |
| - }, | |
| -}); | |
| - | |
| -const usersData = [ | |
| - { | |
| - id: 1, | |
| - name: "Tony Reichert", | |
| - role: "CEO", | |
| - team: "Management", | |
| - status: "active", | |
| - age: "29", | |
| - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/1.png", | |
| - email: "[email protected]", | |
| - }, | |
| - { | |
| - id: 2, | |
| - name: "Zoey Lang", | |
| - role: "Tech Lead", | |
| - team: "Development", | |
| - status: "paused", | |
| - age: "25", | |
| - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/1.png", | |
| - email: "[email protected]", | |
| - }, | |
| - { | |
| - id: 3, | |
| - name: "Jane Fisher", | |
| - role: "Sr. Dev", | |
| - team: "Development", | |
| - status: "active", | |
| - age: "22", | |
| - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/2.png", | |
| - email: "[email protected]", | |
| - }, | |
| - { | |
| - id: 4, | |
| - name: "William Howard", | |
| - role: "C.M.", | |
| - team: "Marketing", | |
| - status: "vacation", | |
| - age: "28", | |
| - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/2.png", | |
| - email: "[email protected]", | |
| - }, | |
| - { | |
| - id: 5, | |
| - name: "Kristen Copper", | |
| - role: "S. Manager", | |
| - team: "Sales", | |
| - status: "active", | |
| - age: "24", | |
| - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/3.png", | |
| - email: "[email protected]", | |
| - }, | |
| - { | |
| - id: 6, | |
| - name: "Brian Kim", | |
| - role: "P. Manager", | |
| - team: "Management", | |
| - age: "29", | |
| - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/3.png", | |
| - email: "[email protected]", | |
| - status: "active", | |
| - }, | |
| - { | |
| - id: 7, | |
| - name: "Michael Hunt", | |
| - role: "Designer", | |
| - team: "Design", | |
| - status: "paused", | |
| - age: "27", | |
| - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/4.png", | |
| - email: "[email protected]", | |
| - }, | |
| - { | |
| - id: 8, | |
| - name: "Samantha Brooks", | |
| - role: "HR Manager", | |
| - team: "HR", | |
| - status: "active", | |
| - age: "31", | |
| - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/4.png", | |
| - email: "[email protected]", | |
| - }, | |
| - { | |
| - id: 9, | |
| - name: "Frank Harrison", | |
| - role: "F. Manager", | |
| - team: "Finance", | |
| - status: "vacation", | |
| - age: "33", | |
| - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/5.png", | |
| - email: "[email protected]", | |
| - }, | |
| - { | |
| - id: 10, | |
| - name: "Emma Adams", | |
| - role: "Ops Manager", | |
| - team: "Operations", | |
| - status: "active", | |
| - age: "35", | |
| - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/5.png", | |
| - email: "[email protected]", | |
| - }, | |
| - { | |
| - id: 11, | |
| - name: "Brandon Stevens", | |
| - role: "Jr. Dev", | |
| - team: "Development", | |
| - status: "active", | |
| - age: "22", | |
| - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/7.png", | |
| - email: "[email protected]", | |
| - }, | |
| - { | |
| - id: 12, | |
| - name: "Megan Richards", | |
| - role: "P. Manager", | |
| - team: "Product", | |
| - status: "paused", | |
| - age: "28", | |
| - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/7.png", | |
| - email: "[email protected]", | |
| - }, | |
| - { | |
| - id: 13, | |
| - name: "Oliver Scott", | |
| - role: "S. Manager", | |
| - team: "Security", | |
| - status: "active", | |
| - age: "37", | |
| - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/8.png", | |
| - email: "[email protected]", | |
| - }, | |
| - { | |
| - id: 14, | |
| - name: "Grace Allen", | |
| - role: "M. Specialist", | |
| - team: "Marketing", | |
| - status: "active", | |
| - age: "30", | |
| - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/8.png", | |
| - email: "[email protected]", | |
| - }, | |
| - { | |
| - id: 15, | |
| - name: "Noah Carter", | |
| - role: "IT Specialist", | |
| - team: "I. Technology", | |
| - status: "paused", | |
| - age: "31", | |
| - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/9.png", | |
| - email: "[email protected]", | |
| - }, | |
| - { | |
| - id: 16, | |
| - name: "Ava Perez", | |
| - role: "Manager", | |
| - team: "Sales", | |
| - status: "active", | |
| - age: "29", | |
| - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/9.png", | |
| - email: "[email protected]", | |
| - }, | |
| - { | |
| - id: 17, | |
| - name: "Liam Johnson", | |
| - role: "Data Analyst", | |
| - team: "Analysis", | |
| - status: "active", | |
| - age: "28", | |
| - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/11.png", | |
| - email: "[email protected]", | |
| - }, | |
| - { | |
| - id: 18, | |
| - name: "Sophia Taylor", | |
| - role: "QA Analyst", | |
| - team: "Testing", | |
| - status: "active", | |
| - age: "27", | |
| - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/11.png", | |
| - email: "[email protected]", | |
| - }, | |
| - { | |
| - id: 19, | |
| - name: "Lucas Harris", | |
| - role: "Administrator", | |
| - team: "Information Technology", | |
| - status: "paused", | |
| - age: "32", | |
| - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/male/12.png", | |
| - email: "[email protected]", | |
| - }, | |
| - { | |
| - id: 20, | |
| - name: "Mia Robinson", | |
| - role: "Coordinator", | |
| - team: "Operations", | |
| - status: "active", | |
| - age: "26", | |
| - avatar: "https://d2u8k2ocievbld.cloudfront.net/memojis/female/12.png", | |
| - email: "[email protected]", | |
| - }, | |
| -]; | |
| - | |
| -export default function NextUIPerf() { | |
| - const [textA, setTextA] = useState<string>(""); | |
| - const [textB, setTextB] = useState<string>(""); | |
| - const [textC, setTextC] = useState<string>(""); | |
| - const [isOpen, setIsOpen] = useState<boolean>(false); | |
| - const [inputValue, setInputValue] = useState<string>(); | |
| - const [selectedKey, setSelectedKey] = useState<string>(""); | |
| - | |
| - const searchParams = useSearchParams(); | |
| - | |
| - const page = Number(searchParams.get("page")); | |
| - | |
| - let {startsWith} = useFilter({sensitivity: "base"}); | |
| - | |
| - const filteredItems = inputValue | |
| - ? usersData.filter((item) => startsWith(item.name, inputValue)) | |
| - : usersData; | |
| - | |
| - const inputRef = useRef<HTMLInputElement>(null); | |
| - | |
| - useEffect(() => { | |
| - isOpen && inputRef?.current?.focus(); | |
| - }, [isOpen]); | |
| - | |
| - const handleSelectionChange = (e: React.ChangeEvent<HTMLSelectElement>) => { | |
| - setSelectedKey(e.target.value); | |
| - }; | |
| - | |
| - const topContent = useMemo(() => { | |
| - return ( | |
| - <Input | |
| - ref={inputRef} | |
| - isClearable | |
| - aria-activedescendant={selectedKey} | |
| - aria-expanded={isOpen} | |
| - aria-label="Search user" | |
| - autoComplete="off" | |
| - autoCorrect="off" | |
| - className="z-10 sticky top-1" | |
| - placeholder="Search..." | |
| - spellCheck={false} | |
| - startContent={<SearchLinearIcon className="text-default-400" size={18} strokeWidth="2" />} | |
| - type="text" | |
| - onValueChange={setInputValue} | |
| - /> | |
| - ); | |
| - }, [inputRef, selectedKey, isOpen]); | |
| +import ClientPage from "./client-page"; | |
| +export default function PerfPage() { | |
| return ( | |
| - <div className="w-full p-24 gap-4 flex flex-col"> | |
| - <Select | |
| - classNames={{ | |
| - base: "max-w-xs", | |
| - listboxWrapper: "scroll-pb-6 scroll-pt-28", | |
| - }} | |
| - items={filteredItems} | |
| - label="Assigned to" | |
| - labelPlacement="outside" | |
| - listboxProps={{ | |
| - topContent, | |
| - variant: "flat", | |
| - classNames: { | |
| - base: [ | |
| - "before:content-[''] before:rounded-t-medium before:fixed before:w-full before:h-14 before:z-10", | |
| - "before:top-0 before:left-0 before:bg-gradient-to-b before:from-default-50", | |
| - ], | |
| - }, | |
| - }} | |
| - placeholder="Select a user" | |
| - selectedKeys={[selectedKey]} | |
| - showScrollIndicators={false} | |
| - variant="flat" | |
| - onChange={handleSelectionChange} | |
| - onOpenChange={setIsOpen} | |
| - > | |
| - {(item) => ( | |
| - <SelectItem key={item.id} textValue={item.name}> | |
| - <div className="flex gap-2 items-center"> | |
| - <Avatar alt={item.name} className="flex-shrink-0" size="sm" src={item.avatar} /> | |
| - <div className="flex flex-col"> | |
| - <span className="text-small">{item.name}</span> | |
| - <span className="text-tiny text-default-400">{item.email}</span> | |
| - </div> | |
| - </div> | |
| - </SelectItem> | |
| - )} | |
| - </Select> | |
| - | |
| - <Accordion> | |
| - <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1"> | |
| - Non est aliqua tempor occaecat laborum. Lorem culpa minim irure mollit. Est qui | |
| - reprehenderit commodo magna proident anim ipsum ex. Mollit id amet officia nisi excepteur | |
| - eu. Commodo elit commodo nisi nisi aute eu aliquip aliquip voluptate exercitation ullamco | |
| - ipsum eiusmod veniam. Magna in laborum anim amet anim ex elit aliqua nostrud mollit. | |
| - Pariatur ullamco cillum proident aliqua nostrud. Labore ea veniam cillum duis veniam in | |
| - cupidatat voluptate eu officia. Ut laborum sunt nostrud magna. Ex magna esse cillum enim | |
| - incididunt pariatur qui veniam dolor. Exercitation id culpa et enim mollit duis duis | |
| - aliquip. Magna ullamco est cupidatat laboris irure pariatur aliquip duis aute cillum. | |
| - Officia irure do laboris ea nisi sunt reprehenderit laboris irure. Ex eiusmod in duis | |
| - veniam excepteur. Sunt et et laboris culpa. Mollit excepteur occaecat elit anim officia. | |
| - Laborum commodo proident cupidatat pariatur eu veniam id qui do culpa. Quis consectetur | |
| - adipisicing anim ex ea velit excepteur. Deserunt laboris ex aute sunt laborum tempor ea | |
| - enim dolore ut in. Id aliqua Lorem exercitation qui velit nostrud anim reprehenderit enim. | |
| - Nisi elit fugiat deserunt elit. Sit excepteur ipsum enim excepteur irure irure sint veniam | |
| - elit consequat ea id. Lorem ea qui sunt enim occaecat excepteur officia ex consequat | |
| - nostrud. Tempor sint Lorem est culpa do. | |
| - </AccordionItem> | |
| - <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2"> | |
| - Non est aliqua tempor occaecat laborum. Lorem culpa minim irure mollit. Est qui | |
| - reprehenderit commodo magna proident anim ipsum ex. Mollit id amet officia nisi excepteur | |
| - eu. Commodo elit commodo nisi nisi aute eu aliquip aliquip voluptate exercitation ullamco | |
| - ipsum eiusmod veniam. Magna in laborum anim amet anim ex elit aliqua nostrud mollit. | |
| - Pariatur ullamco cillum proident aliqua nostrud. Labore ea veniam cillum duis veniam in | |
| - cupidatat voluptate eu officia. Ut laborum sunt nostrud magna. Ex magna esse cillum enim | |
| - </AccordionItem> | |
| - <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3"> | |
| - Non est aliqua tempor occaecat laborum. Lorem culpa minim irure mollit. Est qui | |
| - reprehenderit commodo magna proident anim ipsum ex. Mollit id amet officia nisi excepteur | |
| - eu. Commodo elit commodo nisi nisi aute eu aliquip aliquip voluptate exercitation ullamco | |
| - ipsum eiusmod veniam. Magna in laborum anim amet anim ex elit aliqua nostrud mollit. | |
| - Pariatur ullamco cillum proident aliqua nostrud. Labore ea veniam cillum duis veniam in | |
| - </AccordionItem> | |
| - </Accordion> | |
| - <Tabs classNames={{panel: "flex flex-col gap-5"}} variant="underlined"> | |
| - <Tab title="Test 1"> | |
| - <Textarea defaultValue="ASdasd" label="Default value (uncontrolled)" /> | |
| - <Input label="Text B Tab 1" value={textB} onValueChange={setTextB} /> | |
| - <Textarea label="Text C Tab 1" value={textC} onValueChange={setTextC} /> | |
| - </Tab> | |
| - <Tab title="Test 2"> | |
| - <Textarea label="Text B Tab 2" value={textB} onValueChange={setTextB} /> | |
| - <Textarea label="Text C Tab 2" value={textC} onValueChange={setTextC} /> | |
| - </Tab> | |
| - <Tab title="Test 3"> | |
| - <Textarea label="Text B Tab 3" value={textB} onValueChange={setTextB} /> | |
| - <Textarea label="Text C Tab 3" value={textC} onValueChange={setTextC} /> | |
| - </Tab> | |
| - </Tabs> | |
| - | |
| - <h2>Outside</h2> | |
| - <Textarea label="Text A" placeholder="Text A" value={textA} onValueChange={setTextA} /> | |
| - <Textarea label="Text B" placeholder="Text B" value={textB} onValueChange={setTextB} /> | |
| - <Textarea label="Text C" placeholder="Text C" value={textC} onValueChange={setTextC} /> | |
| - | |
| - <MyRadioGroup /> | |
| - | |
| - <MyInput | |
| - isClearable | |
| - placeholder="Search..." | |
| - radius="md" | |
| - size="md" | |
| - startContent={<SearchLinearIcon className="text-zinc-500" size={16} />} | |
| - /> | |
| - | |
| - <Button>Click Me!</Button> | |
| - | |
| - <MyButton2 color="primary">Press Me!</MyButton2> | |
| - | |
| - <Pagination | |
| - showControls | |
| - initialPage={page ?? 1} | |
| - renderItem={({page, ...itemProps}) => { | |
| - return <PaginationItem href={`/examples/perf?page=${page}`} {...itemProps} />; | |
| - }} | |
| - total={10} | |
| - /> | |
| - </div> | |
| + <Suspense fallback={<div>Loading...</div>}> | |
| + <ClientPage /> | |
| + </Suspense> | |
| ); | |
| }\n- apps/docs/app/layout.tsx (modified, 19 changes)\n Patch: @@ -1,6 +1,6 @@ | |
| import "@/styles/globals.css"; | |
| import "@/styles/sandpack.css"; | |
| -import {Metadata} from "next"; | |
| +import {Metadata, Viewport} from "next"; | |
| import {clsx} from "@nextui-org/shared-utils"; | |
| import {Providers} from "./providers"; | |
| @@ -33,10 +33,6 @@ export const metadata: Metadata = { | |
| "UI Framework", | |
| "UI Design System", | |
| ], | |
| - themeColor: [ | |
| - {media: "(prefers-color-scheme: light)", color: "white"}, | |
| - {media: "(prefers-color-scheme: dark)", color: "black"}, | |
| - ], | |
| icons: { | |
| icon: "/favicon.ico", | |
| shortcut: "/favicon-32x32.png", | |
| @@ -58,8 +54,17 @@ export const metadata: Metadata = { | |
| "application/rss+xml": [{url: "https://nextui.org/feed.xml", title: "NextUI RSS Feed"}], | |
| }, | |
| }, | |
| - viewport: | |
| - "viewport-fit=cover, width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0", | |
| +}; | |
| + | |
| +export const viewport: Viewport = { | |
| + initialScale: 1, | |
| + themeColor: [ | |
| + {color: "#f4f4f5", media: "(prefers-color-scheme: light)"}, | |
| + {color: "#111111", media: "(prefers-color-scheme: dark)"}, | |
| + ], | |
| + userScalable: true, | |
| + viewportFit: "cover", | |
| + width: "device-width", | |
| }; | |
| export default function RootLayout({children}: {children: React.ReactNode}) {\n- apps/docs/app/page.tsx (modified, 22 changes)\n Patch: @@ -1,4 +1,5 @@ | |
| import {Spacer} from "@nextui-org/spacer"; | |
| +import {Suspense} from "react"; | |
| import {Hero} from "@/components/marketing/hero"; | |
| import {FeaturesGrid} from "@/components/marketing/features-grid"; | |
| @@ -9,26 +10,11 @@ import {Customization} from "@/components/marketing/customization"; | |
| import {LastButNotLeast} from "@/components/marketing/last-but-not-least"; | |
| import {InstallBanner} from "@/components/marketing/install-banner"; | |
| import {Community} from "@/components/marketing/community"; | |
| -import {Support} from "@/components/marketing/support"; | |
| +import Support from "@/components/marketing/support"; | |
| import landingContent from "@/content/landing"; | |
| -import {getAllSponsors} from "@/utils/get-all-sponsors"; | |
| import {Sponsors} from "@/components/marketing/sponsors"; | |
| -async function getData() { | |
| - try { | |
| - const sponsors = await getAllSponsors(); | |
| - | |
| - return { | |
| - sponsors, | |
| - }; | |
| - } catch (error) { | |
| - throw new Error("Failed to fetch data"); | |
| - } | |
| -} | |
| - | |
| export default async function Home() { | |
| - const data = await getData(); | |
| - | |
| return ( | |
| <main className="container mx-auto max-w-7xl px-6 flex-grow"> | |
| <section className="flex flex-col items-center justify-center"> | |
| @@ -40,7 +26,9 @@ export default async function Home() { | |
| <DarkMode /> | |
| <Customization /> | |
| <LastButNotLeast /> | |
| - <Support sponsors={data.sponsors} /> | |
| + <Suspense fallback={<div>Loading...</div>}> | |
| + <Support /> | |
| + </Suspense> | |
| <Spacer y={24} /> | |
| <InstallBanner /> | |
| <Community />\n- apps/docs/app/providers.tsx (modified, 4 changes)\n Patch: @@ -5,7 +5,7 @@ import type {ReactNode} from "react"; | |
| import * as React from "react"; | |
| import {NextUIProvider} from "@nextui-org/react"; | |
| import {ThemeProvider as NextThemesProvider} from "next-themes"; | |
| -import {ThemeProviderProps} from "next-themes/dist/types"; | |
| +import {ThemeProviderProps} from "next-themes"; | |
| import {useRouter} from "next/navigation"; | |
| import {useEffect} from "react"; | |
| import posthog from "posthog-js"; | |
| @@ -23,7 +23,7 @@ export function Providers({children, themeProps}: ProvidersProps) { | |
| const ProviderWrapper = ({children}: {children: ReactNode}) => { | |
| useEffect(() => { | |
| - if (typeof window !== "undefined") { | |
| + if (typeof window !== "undefined" && __PROD__) { | |
| posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, { | |
| api_host: "/ingest", | |
| person_profiles: "identified_only",\n- apps/docs/components/ads/carbon-ad/carbon-ad.tsx (modified, 2 changes)\n Patch: @@ -1,3 +1,5 @@ | |
| +"use client"; | |
| + | |
| import React, {useCallback, useEffect} from "react"; | |
| import Script from "next/script"; | |
| \n- apps/docs/components/demos/user-twitter-card.tsx (modified, 6 changes)\n Patch: @@ -1,15 +1,14 @@ | |
| "use client"; | |
| -import {useState, FC} from "react"; | |
| +import {useState} from "react"; | |
| import {Card, CardHeader, Button, Avatar, CardBody, CardFooter} from "@nextui-org/react"; | |
| import {clsx} from "@nextui-org/shared-utils"; | |
| -import NextImage from "next/image"; | |
| interface UserTwitterCardProps { | |
| className?: string; | |
| } | |
| -export const UserTwitterCard: FC<UserTwitterCardProps> = ({className}) => { | |
| +export const UserTwitterCard = ({className}: UserTwitterCardProps) => { | |
| const [isFollowed, setIsFollowed] = useState(false); | |
| return ( | |
| @@ -18,7 +17,6 @@ export const UserTwitterCard: FC<UserTwitterCardProps> = ({className}) => { | |
| <div className="flex gap-5"> | |
| <Avatar | |
| isBordered | |
| - ImgComponent={NextImage} | |
| alt="Zoey Lang" | |
| imgProps={{ | |
| width: 40,\n- apps/docs/components/docs/components/code-demo/react-live-demo.tsx (modified, 5 changes)\n Patch: @@ -1,7 +1,7 @@ | |
| import React from "react"; | |
| import {LivePreview, LiveProvider, LiveError} from "react-live"; | |
| import {clsx} from "@nextui-org/shared-utils"; | |
| -import * as Components from "@nextui-org/react"; | |
| +import * as NextUI from "@nextui-org/react"; | |
| import * as intlDateUtils from "@internationalized/date"; | |
| import * as reactAriaI18n from "@react-aria/i18n"; | |
| import * as reactHookFormBase from "react-hook-form"; | |
| @@ -31,7 +31,8 @@ const reactHookForm = { | |
| }; | |
| export const scope = { | |
| - ...Components, | |
| + React, | |
| + ...NextUI, | |
| ...intlDateUtils, | |
| ...reactAriaI18n, | |
| ...reactHookForm,\n- apps/docs/components/docs/components/codeblock.tsx (modified, 2 changes)\n Patch: @@ -1,3 +1,5 @@ | |
| +"use client"; | |
| + | |
| import type {Language, PrismTheme} from "prism-react-renderer"; | |
| import type {TransformTokensTypes} from "./helper"; | |
| \n- apps/docs/components/docs/components/package-managers.tsx (modified, 2 changes)\n Patch: @@ -1,3 +1,5 @@ | |
| +"use client"; | |
| + | |
| import {Tabs, Tab, Snippet, Code} from "@nextui-org/react"; | |
| import {Key, useState} from "react"; | |
| \n- apps/docs/components/marketing/support-client.tsx (added, 211 changes)\n Patch: @@ -0,0 +1,211 @@ | |
| +"use client"; | |
| + | |
| +import {FC, useMemo, useRef} from "react"; | |
| +import {Avatar, AvatarProps, Button, Spacer, Tooltip} from "@nextui-org/react"; | |
| +import {clamp} from "@nextui-org/shared-utils"; | |
| +import {usePostHog} from "posthog-js/react"; | |
| + | |
| +import {sectionWrapper, titleWrapper, title, subtitle} from "../primitives"; | |
| + | |
| +import {FeaturesGrid} from "./features-grid"; | |
| + | |
| +import {OpenCollectiveIcon, PatreonIcon, HeartBoldIcon, PlusLinearIcon} from "@/components/icons"; | |
| +import {Sponsor, SPONSOR_TIERS, SPONSOR_COLORS, getTier} from "@/libs/docs/sponsors"; | |
| +import {SonarPulse} from "@/components/sonar-pulse"; | |
| +import {useIsMobile} from "@/hooks/use-media-query"; | |
| + | |
| +export interface SupportProps { | |
| + sponsors: Sponsor[]; | |
| +} | |
| + | |
| +const supportAccounts = [ | |
| + { | |
| + title: "Open Collective", | |
| + description: "Sponsor the NextUI maintainers.", | |
| + icon: <OpenCollectiveIcon className="text-pink-500" />, | |
| + href: "https://opencollective.com/nextui", | |
| + isExternal: true, | |
| + }, | |
| + { | |
| + title: "Patreon", | |
| + description: "Sponsor the creator, Junior Garcia.", | |
| + icon: <PatreonIcon className="text-pink-500" />, | |
| + href: "https://www.patreon.com/jrgarciadev?fan_landing=true", | |
| + isExternal: true, | |
| + }, | |
| +]; | |
| + | |
| +const SONAR_PULSE_SIZE = 80; | |
| +const SONAR_PULSE_CIRCLES_COUNT = 4; | |
| +const SONAR_PULSE_RADIUS = 130; | |
| + | |
| +const getSponsorName = (sponsor: Sponsor) => { | |
| + if (!sponsor.name) { | |
| + return ""; | |
| + } | |
| + | |
| + return sponsor.name.slice(0, 2).toUpperCase(); | |
| +}; | |
| + | |
| +const getSponsorSize = (sponsor: Sponsor, isMobile: boolean) => { | |
| + let size: AvatarProps["size"] = "md"; | |
| + const tier = sponsor.tier || getTier(sponsor.totalAmountDonated); | |
| + | |
| + switch (tier) { | |
| + case SPONSOR_TIERS.BRONZE: | |
| + size = isMobile ? "sm" : "md"; | |
| + break; | |
| + case SPONSOR_TIERS.SILVER: | |
| + size = isMobile ? "sm" : "md"; | |
| + break; | |
| + case SPONSOR_TIERS.GOLD: | |
| + size = isMobile ? "md" : "lg"; | |
| + break; | |
| + case SPONSOR_TIERS.PLATINUM: | |
| + size = isMobile ? "md" : "lg"; | |
| + break; | |
| + default: | |
| + size = isMobile ? "sm" : "md"; | |
| + } | |
| + | |
| + return size; | |
| +}; | |
| + | |
| +const getSponsorColor = (sponsor: Sponsor) => { | |
| + const tier = sponsor.tier || getTier(sponsor.totalAmountDonated); | |
| + | |
| + return SPONSOR_COLORS[tier] || "default"; | |
| +}; | |
| + | |
| +const getSponsorAvatarStyles = (index: number, sponsors: Sponsor[] = []) => { | |
| + const angle = (index * 360) / sponsors.length; | |
| + const radius = SONAR_PULSE_RADIUS; | |
| + | |
| + // position the avatar randomly inside the sonar pulse | |
| + const randomRadius = clamp(Math.floor((index + 1) * radius), radius * 0.4, radius); | |
| + | |
| + const x = randomRadius * Math.cos((angle * Math.PI) / 180); | |
| + const y = randomRadius * Math.sin((angle * Math.PI) / 180); | |
| + | |
| + return { | |
| + transform: `translate(${x}px, ${y}px)`, | |
| + }; | |
| +}; | |
| + | |
| +export const Support: FC<SupportProps> = ({sponsors = []}) => { | |
| + const sonarRef = useRef(null); | |
| + const isMobile = useIsMobile(); | |
| + const posthog = usePostHog(); | |
| + | |
| + const handleExternalLinkClick = (href: string) => { | |
| + if (!href) return; | |
| + window.open(href, "_blank"); | |
| + }; | |
| + | |
| + const handleBecomeSponsor = () => { | |
| + posthog.capture("Support - Become a sponsor", { | |
| + action: "click", | |
| + category: "landing-page", | |
| + }); | |
| + | |
| + handleExternalLinkClick(supportAccounts[0].href); | |
| + }; | |
| + const renderSponsors = useMemo(() => { | |
| + if (!sponsors.length) return null; | |
| + | |
| + return ( | |
| + <div | |
| + className="absolute rounded-full bg-transparent" | |
| + style={{ | |
| + width: `${SONAR_PULSE_RADIUS}px`, | |
| + top: SONAR_PULSE_RADIUS / 6, | |
| + left: SONAR_PULSE_RADIUS / 6, | |
| + }} | |
| + > | |
| + {sponsors.map((sponsor, index) => ( | |
| + <Avatar | |
| + key={`${sponsor.MemberId}-${index}`} | |
| + isBordered | |
| + showFallback | |
| + className="absolute cursor-pointer bg-transparent before:bg-white/10 before:content-[''] before:block before:z-[-1] before:absolute before:inset-0 before:backdrop-blur-md before:backdrop-saturate-200" | |
| + color={getSponsorColor(sponsor) as AvatarProps["color"]} | |
| + name={getSponsorName(sponsor)} | |
| + size={getSponsorSize(sponsor, isMobile)} | |
| + src={sponsor.image} | |
| + style={getSponsorAvatarStyles(index, sponsors)} | |
| + onClick={() => handleExternalLinkClick(sponsor["website"] || sponsor["profile"])} | |
| + /> | |
| + ))} | |
| + </div> | |
| + ); | |
| + }, [isMobile, sponsors]); | |
| + | |
| + return ( | |
| + <section className={sectionWrapper({class: "flex flex-col items-center z-20 mt-16 lg:mt-44"})}> | |
| + <div className="max-w-4xl flex flex-col gap-8"> | |
| + <div> | |
| + <div className={titleWrapper({class: "text-center items-center"})}> | |
| + <div className="flex md:inline-flex flex-col md:flex-row items-center"> | |
| + <h1 className={title({size: "lg"})}>Support NextUI </h1> | |
| + <HeartBoldIcon | |
| + className="text-pink-500 animate-heartbeat" | |
| + size={50} | |
| + style={{ | |
| + animationDuration: "2.5s", | |
| + }} | |
| + /> | |
| + </div> | |
| + </div> | |
| + <p | |
| + className={subtitle({class: "md:w-full text-center flex justify-center items-center"})} | |
| + > | |
| + Using NextUI in a profit-making product, as a freelancer, or for fun projects? Your | |
| + contributions will help to make NextUI better. | |
| + </p> | |
| + <Spacer y={12} /> | |
| + <FeaturesGrid | |
| + classNames={{ | |
| + base: "lg:grid-cols-2", | |
| + }} | |
| + features={supportAccounts} | |
| + /> | |
| + <div | |
| + ref={sonarRef} | |
| + className="relative mt-32 md:mt-60 w-full flex items-center justify-center" | |
| + > | |
| + <SonarPulse | |
| + circlesCount={SONAR_PULSE_CIRCLES_COUNT} | |
| + color="#7928CA" | |
| + icon={ | |
| + <Tooltip | |
| + showArrow | |
| + color="secondary" | |
| + content={"Become a sponsor"} | |
| + offset={10} | |
| + radius="full" | |
| + > | |
| + <Button | |
| + isIconOnly | |
| + aria-label="Become a sponsor" | |
| + className="z-50 w-auto h-auto bg-gradient-to-b from-[#FF1CF7] to-[#7928CA]" | |
| + radius="full" | |
| + onPress={handleBecomeSponsor} | |
| + > | |
| + <PlusLinearIcon | |
| + className="flex items-center justify-center rounded-full text-white" | |
| + size={54} | |
| + /> | |
| + </Button> | |
| + </Tooltip> | |
| + } | |
| + playState="running" | |
| + size={SONAR_PULSE_SIZE} | |
| + > | |
| + {renderSponsors} | |
| + </SonarPulse> | |
| + </div> | |
| + </div> | |
| + </div> | |
| + </section> | |
| + ); | |
| +};\n- apps/docs/components/marketing/support.tsx (modified, 220 changes)\n Patch: @@ -1,211 +1,21 @@ | |
| -"use client"; | |
| +import {Support as SupportClient} from "./support-client"; | |
| -import {FC, useMemo, useRef} from "react"; | |
| -import {Avatar, AvatarProps, Button, Spacer, Tooltip} from "@nextui-org/react"; | |
| -import {clamp} from "@nextui-org/shared-utils"; | |
| -import {usePostHog} from "posthog-js/react"; | |
| +import {getAllSponsors} from "@/utils/get-all-sponsors"; | |
| -import {sectionWrapper, titleWrapper, title, subtitle} from "../primitives"; | |
| +async function getData() { | |
| + try { | |
| + const sponsors = await getAllSponsors(); | |
| -import {FeaturesGrid} from "./features-grid"; | |
| - | |
| -import {OpenCollectiveIcon, PatreonIcon, HeartBoldIcon, PlusLinearIcon} from "@/components/icons"; | |
| -import {Sponsor, SPONSOR_TIERS, SPONSOR_COLORS, getTier} from "@/libs/docs/sponsors"; | |
| -import {SonarPulse} from "@/components/sonar-pulse"; | |
| -import {useIsMobile} from "@/hooks/use-media-query"; | |
| - | |
| -export interface SupportProps { | |
| - sponsors: Sponsor[]; | |
| -} | |
| - | |
| -const supportAccounts = [ | |
| - { | |
| - title: "Open Collective", | |
| - description: "Sponsor the NextUI maintainers.", | |
| - icon: <OpenCollectiveIcon className="text-pink-500" />, | |
| - href: "https://opencollective.com/nextui", | |
| - isExternal: true, | |
| - }, | |
| - { | |
| - title: "Patreon", | |
| - description: "Sponsor the creator, Junior Garcia.", | |
| - icon: <PatreonIcon className="text-pink-500" />, | |
| - href: "https://www.patreon.com/jrgarciadev?fan_landing=true", | |
| - isExternal: true, | |
| - }, | |
| -]; | |
| - | |
| -const SONAR_PULSE_SIZE = 80; | |
| -const SONAR_PULSE_CIRCLES_COUNT = 4; | |
| -const SONAR_PULSE_RADIUS = 130; | |
| - | |
| -const getSponsorName = (sponsor: Sponsor) => { | |
| - if (!sponsor.name) { | |
| - return ""; | |
| + return { | |
| + sponsors, | |
| + }; | |
| + } catch (error) { | |
| + throw new Error("Failed to fetch data"); | |
| } | |
| +} | |
| - return sponsor.name.slice(0, 2).toUpperCase(); | |
| -}; | |
| - | |
| -const getSponsorSize = (sponsor: Sponsor, isMobile: boolean) => { | |
| - let size: AvatarProps["size"] = "md"; | |
| - const tier = sponsor.tier || getTier(sponsor.totalAmountDonated); | |
| - | |
| - switch (tier) { | |
| - case SPONSOR_TIERS.BRONZE: | |
| - size = isMobile ? "sm" : "md"; | |
| - break; | |
| - case SPONSOR_TIERS.SILVER: | |
| - size = isMobile ? "sm" : "md"; | |
| - break; | |
| - case SPONSOR_TIERS.GOLD: | |
| - size = isMobile ? "md" : "lg"; | |
| - break; | |
| - case SPONSOR_TIERS.PLATINUM: | |
| - size = isMobile ? "md" : "lg"; | |
| - break; | |
| - default: | |
| - size = isMobile ? "sm" : "md"; | |
| - } | |
| - | |
| - return size; | |
| -}; | |
| - | |
| -const getSponsorColor = (sponsor: Sponsor) => { | |
| - const tier = sponsor.tier || getTier(sponsor.totalAmountDonated); | |
| - | |
| - return SPONSOR_COLORS[tier] || "default"; | |
| -}; | |
| - | |
| -const getSponsorAvatarStyles = (index: number, sponsors: Sponsor[] = []) => { | |
| - const angle = (index * 360) / sponsors.length; | |
| - const radius = SONAR_PULSE_RADIUS; | |
| - | |
| - // position the avatar randomly inside the sonar pulse | |
| - const randomRadius = clamp(Math.floor((index + 1) * radius), radius * 0.4, radius); | |
| - | |
| - const x = randomRadius * Math.cos((angle * Math.PI) / 180); | |
| - const y = randomRadius * Math.sin((angle * Math.PI) / 180); | |
| - | |
| - return { | |
| - transform: `translate(${x}px, ${y}px)`, | |
| - }; | |
| -}; | |
| - | |
| -export const Support: FC<SupportProps> = ({sponsors = []}) => { | |
| - const sonarRef = useRef(null); | |
| - const isMobile = useIsMobile(); | |
| - const posthog = usePostHog(); | |
| - | |
| - const handleExternalLinkClick = (href: string) => { | |
| - if (!href) return; | |
| - window.open(href, "_blank"); | |
| - }; | |
| - | |
| - const handleBecomeSponsor = () => { | |
| - posthog.capture("Support - Become a sponsor", { | |
| - action: "click", | |
| - category: "landing-page", | |
| - }); | |
| - | |
| - handleExternalLinkClick(supportAccounts[0].href); | |
| - }; | |
| - const renderSponsors = useMemo(() => { | |
| - if (!sponsors.length) return null; | |
| - | |
| - return ( | |
| - <div | |
| - className="absolute rounded-full bg-transparent" | |
| - style={{ | |
| - width: `${SONAR_PULSE_RADIUS}px`, | |
| - top: SONAR_PULSE_RADIUS / 6, | |
| - left: SONAR_PULSE_RADIUS / 6, | |
| - }} | |
| - > | |
| - {sponsors.map((sponsor, index) => ( | |
| - <Avatar | |
| - key={`${sponsor.MemberId}-${index}`} | |
| - isBordered | |
| - showFallback | |
| - className="absolute cursor-pointer bg-transparent before:bg-white/10 before:content-[''] before:block before:z-[-1] before:absolute before:inset-0 before:backdrop-blur-md before:backdrop-saturate-200" | |
| - color={getSponsorColor(sponsor) as AvatarProps["color"]} | |
| - name={getSponsorName(sponsor)} | |
| - size={getSponsorSize(sponsor, isMobile)} | |
| - src={sponsor.image} | |
| - style={getSponsorAvatarStyles(index, sponsors)} | |
| - onClick={() => handleExternalLinkClick(sponsor["website"] || sponsor["profile"])} | |
| - /> | |
| - ))} | |
| - </div> | |
| - ); | |
| - }, [isMobile, sponsors]); | |
| +export default async function Support() { | |
| + const data = await getData(); | |
| - return ( | |
| - <section className={sectionWrapper({class: "flex flex-col items-center z-20 mt-16 lg:mt-44"})}> | |
| - <div className="max-w-4xl flex flex-col gap-8"> | |
| - <div> | |
| - <div className={titleWrapper({class: "text-center items-center"})}> | |
| - <div className="flex md:inline-flex flex-col md:flex-row items-center"> | |
| - <h1 className={title({size: "lg"})}>Support NextUI </h1> | |
| - <HeartBoldIcon | |
| - className="text-pink-500 animate-heartbeat" | |
| - size={50} | |
| - style={{ | |
| - animationDuration: "2.5s", | |
| - }} | |
| - /> | |
| - </div> | |
| - </div> | |
| - <p | |
| - className={subtitle({class: "md:w-full text-center flex justify-center items-center"})} | |
| - > | |
| - Using NextUI in a profit-making product, as a freelancer, or for fun projects? Your | |
| - contributions will help to make NextUI better. | |
| - </p> | |
| - <Spacer y={12} /> | |
| - <FeaturesGrid | |
| - classNames={{ | |
| - base: "lg:grid-cols-2", | |
| - }} | |
| - features={supportAccounts} | |
| - /> | |
| - <div | |
| - ref={sonarRef} | |
| - className="relative mt-32 md:mt-60 w-full flex items-center justify-center" | |
| - > | |
| - <SonarPulse | |
| - circlesCount={SONAR_PULSE_CIRCLES_COUNT} | |
| - color="#7928CA" | |
| - icon={ | |
| - <Tooltip | |
| - showArrow | |
| - color="secondary" | |
| - content={"Become a sponsor"} | |
| - offset={10} | |
| - radius="full" | |
| - > | |
| - <Button | |
| - isIconOnly | |
| - aria-label="Become a sponsor" | |
| - className="z-50 w-auto h-auto bg-gradient-to-b from-[#FF1CF7] to-[#7928CA]" | |
| - radius="full" | |
| - onPress={handleBecomeSponsor} | |
| - > | |
| - <PlusLinearIcon | |
| - className="flex items-center justify-center rounded-full text-white" | |
| - size={54} | |
| - /> | |
| - </Button> | |
| - </Tooltip> | |
| - } | |
| - playState="running" | |
| - size={SONAR_PULSE_SIZE} | |
| - > | |
| - {renderSponsors} | |
| - </SonarPulse> | |
| - </div> | |
| - </div> | |
| - </div> | |
| - </section> | |
| - ); | |
| -}; | |
| + return <SupportClient sponsors={data.sponsors} />; | |
| +}\n- apps/docs/components/mdx-content.tsx (modified, 2 changes)\n Patch: @@ -1,5 +1,5 @@ | |
| -/* eslint-disable react/display-name */ | |
| "use client"; | |
| + | |
| import type {MDXComponents as MDXComponentsType} from "mdx/types"; | |
| import {useMDXComponent} from "next-contentlayer2/hooks";\n- apps/docs/components/theme-switch.tsx (modified, 6 changes)\n Patch: @@ -20,6 +20,8 @@ export const ThemeSwitch: FC<ThemeSwitchProps> = ({className, classNames}) => { | |
| const isSSR = useIsSSR(); | |
| const posthog = usePostHog(); | |
| + const initialTheme = isSSR ? "light" : theme; | |
| + | |
| const onChange = () => { | |
| theme === "light" ? setTheme("dark") : setTheme("light"); | |
| @@ -31,8 +33,8 @@ export const ThemeSwitch: FC<ThemeSwitchProps> = ({className, classNames}) => { | |
| }; | |
| const {Component, slots, isSelected, getBaseProps, getInputProps, getWrapperProps} = useSwitch({ | |
| - isSelected: theme === "light", | |
| - "aria-label": `Switch to ${theme === "light" ? "dark" : "light"} mode`, | |
| + isSelected: initialTheme === "light", | |
| + "aria-label": `Switch to ${initialTheme === "light" ? "dark" : "light"} mode`, | |
| onChange, | |
| }); | |
| \n- apps/docs/config/routes.json (modified, 12 changes)\n Patch: @@ -12,6 +12,12 @@ | |
| "keywords": "introduction, nextui", | |
| "path": "/docs/guide/introduction.mdx" | |
| }, | |
| + { | |
| + "key": "design-principles", | |
| + "title": "Design Principles", | |
| + "keywords": "design principles, nextui", | |
| + "path": "/docs/guide/design-principles.mdx" | |
| + }, | |
| { | |
| "key": "installation", | |
| "title": "Installation", | |
| @@ -24,12 +30,6 @@ | |
| "keywords": "cli, command line interface", | |
| "path": "/docs/guide/cli.mdx" | |
| }, | |
| - { | |
| - "key": "design-principles", | |
| - "title": "Design Principles", | |
| - "keywords": "design principles, nextui", | |
| - "path": "/docs/guide/design-principles.mdx" | |
| - }, | |
| { | |
| "key": "routing", | |
| "title": "Routing",\n- apps/docs/content/blog/v2.6.0.mdx (modified, 4 changes)\n Patch: @@ -2,7 +2,7 @@ | |
| title: "NextUI v2.6.0 π₯" | |
| description: "NextUI v2.6.0 includes 4 new components, React 19 & Next.js 15 support, and lots of bug fixes and improvements." | |
| date: "2024-12-03" | |
| -image: "/blog/v2.6.0.jpg" | |
| +image: "/blog/v2.4.0.jpg" | |
| tags: ["nextui", "v2.6.0", "release", "bug fixes", "improvements", "animations"] | |
| author: | |
| name: "Junior Garcia" | |
| @@ -14,7 +14,7 @@ author: | |
| import {formContent} from "@/content/components/form"; | |
| <img | |
| - src="/blog/v2.6.0_2x.jpg" | |
| + src="/blog/v2.4.0_2x.jpg" | |
| width={700} | |
| height={350} | |
| alt="NextUI v2.6.0"\n- apps/docs/next.config.js (modified, 28 changes)\n Patch: @@ -3,7 +3,6 @@ const withContentlayer = require("next-contentlayer2").withContentlayer; | |
| /** @type {import('next').NextConfig} */ | |
| const nextConfig = { | |
| transpilePackages: ["@nextui-org/react", "@nextui-org/theme"], | |
| - swcMinify: true, | |
| reactStrictMode: true, // Recommended for the `pages` directory, default in `app`. | |
| redirects: require("./next-redirect.js"), | |
| eslint: { | |
| @@ -14,12 +13,27 @@ const nextConfig = { | |
| ignoreBuildErrors: true, | |
| }, | |
| images: { | |
| - domains: [ | |
| - "opencollective-production.s3.us-west-1.amazonaws.com", | |
| - "avatars.githubusercontent.com", | |
| - "logo.clearbit.com", | |
| - "i.pravatar.cc", | |
| - "nextui.org", | |
| + remotePatterns: [ | |
| + { | |
| + protocol: "https", | |
| + hostname: "opencollective-production.s3.us-west-1.amazonaws.com", | |
| + }, | |
| + { | |
| + protocol: "https", | |
| + hostname: "avatars.githubusercontent.com", | |
| + }, | |
| + { | |
| + protocol: "https", | |
| + hostname: "logo.clearbit.com", | |
| + }, | |
| + { | |
| + protocol: "https", | |
| + hostname: "i.pravatar.cc", | |
| + }, | |
| + { | |
| + protocol: "https", | |
| + hostname: "nextui.org", | |
| + }, | |
| ], | |
| }, | |
| rewrites: async () => {\n- apps/docs/package.json (modified, 68 changes)\n Patch: @@ -18,8 +18,8 @@ | |
| "dependencies": { | |
| "@codesandbox/sandpack-react": "^2.6.4", | |
| "@emotion/is-prop-valid": "^1.3.1", | |
| - "@iconify/icons-solar": "^1.2.3", | |
| - "@iconify/react": "^4.1.1", | |
| + "@iconify/icons-solar": "1.2.3", | |
| + "@iconify/react": "5.0.2", | |
| "@internationalized/date": "3.5.6", | |
| "@mapbox/rehype-prism": "^0.6.0", | |
| "@nextui-org/aria-utils": "workspace:*", | |
| @@ -52,57 +52,58 @@ | |
| "@react-stately/layout": "3.13.9", | |
| "@react-stately/tree": "3.8.1", | |
| "@rehooks/local-storage": "^2.4.5", | |
| + "@tanstack/react-virtual": "3.10.9", | |
| "canvas-confetti": "^1.9.2", | |
| "cmdk": "^0.2.0", | |
| - "color2k": "^2.0.2", | |
| - "contentlayer2": "^0.5.1", | |
| - "date-fns": "^2.30.0", | |
| - "framer-motion": "11.9.0", | |
| - "geist": "^1.3.1", | |
| + "color2k": "2.0.3", | |
| + "contentlayer2": "0.5.3", | |
| + "date-fns": "4.1.0", | |
| + "framer-motion": "11.11.13", | |
| + "geist": "1.3.1", | |
| "github-slugger": "^2.0.0", | |
| "gray-matter": "^4.0.3", | |
| "hast-util-to-html": "9.0.3", | |
| "marked": "^5.1.0", | |
| - "match-sorter": "^6.3.1", | |
| - "mini-svg-data-uri": "^1.4.3", | |
| - "mitt": "3.0.0", | |
| - "next": "13.5.1", | |
| - "next-contentlayer2": "^0.5.1", | |
| - "next-themes": "^0.2.1", | |
| + "match-sorter": "8.0.0", | |
| + "mini-svg-data-uri": "1.4.4", | |
| + "mitt": "3.0.1", | |
| + "next": "14.3.0-canary.43", | |
| + "next-contentlayer2": "0.5.3", | |
| + "next-themes": "0.4.3", | |
| "nprogress": "^0.2.0", | |
| "parse-numeric-range": "1.2.0", | |
| - "posthog-js": "1.187.1", | |
| + "posthog-js": "1.184.1", | |
| "prism-react-renderer": "^1.2.1", | |
| "querystring": "^0.2.1", | |
| - "react": "^18.2.0", | |
| - "react-dom": "^18.2.0", | |
| + "react": "18.3.1", | |
| + "react-dom": "18.3.1", | |
| "react-hook-form": "^7.51.3", | |
| "react-icons": "^4.10.1", | |
| - "react-live": "^2.3.0", | |
| + "react-live": "^4.1.8", | |
| "react-multi-ref": "^1.0.1", | |
| "react-wrap-balancer": "^1.0.0", | |
| "refractor": "3.3.1", | |
| "rehype": "13.0.2", | |
| "rehype-parse": "9.0.1", | |
| "rehype-pretty-code": "^0.14.0", | |
| - "rehype-slug": "^6.0.0", | |
| + "rehype-slug": "6.0.0", | |
| "remark": "^15.0.1", | |
| - "remark-gfm": "^4.0.0", | |
| - "rss": "^1.2.2", | |
| - "scroll-into-view-if-needed": "3.0.10", | |
| + "remark-gfm": "4.0.0", | |
| + "rss": "1.2.2", | |
| + "scroll-into-view-if-needed": "3.1.0", | |
| "sharp": "^0.32.1", | |
| "shelljs": "^0.8.4", | |
| - "swr": "^2.2.1", | |
| + "swr": "2.2.5", | |
| "tailwind-variants": "^0.1.20", | |
| "unified": "^11.0.5", | |
| - "unist-util-visit": "^5.0.0", | |
| - "usehooks-ts": "^2.9.1", | |
| - "zustand": "^4.3.8" | |
| + "unist-util-visit": "5.0.0", | |
| + "usehooks-ts": "3.1.0", | |
| + "zustand": "5.0.1" | |
| }, | |
| "devDependencies": { | |
| "@docusaurus/utils": "2.0.0-beta.3", | |
| - "@next/bundle-analyzer": "^13.4.6", | |
| - "@next/env": "^13.4.12", | |
| + "@next/bundle-analyzer": "14.3.0-canary.43", | |
| + "@next/env": "14.3.0-canary.43", | |
| "@react-types/calendar": "3.4.10", | |
| "@react-types/datepicker": "3.8.3", | |
| "@react-types/shared": "3.25.0", | |
| @@ -116,20 +117,21 @@ | |
| "@types/react": "18.2.8", | |
| "@types/react-dom": "18.2.4", | |
| "@types/refractor": "^3.0.2", | |
| - "@types/rss": "^0.0.30", | |
| + "@types/rss": "0.0.32", | |
| "@types/shelljs": "^0.8.9", | |
| "@types/uuid": "^8.3.1", | |
| "algoliasearch": "^4.10.3", | |
| - "autoprefixer": "^10.4.14", | |
| + "autoprefixer": "10.4.20", | |
| "dotenv": "^16.0.1", | |
| "esbuild-plugin-raw": "0.1.8", | |
| - "eslint-config-next": "^13.5.1", | |
| + "eslint-config-next": "15.0.3", | |
| "markdown-toc": "^1.2.0", | |
| - "next-sitemap": "^4.1.8", | |
| + "mdx-bundler": "10.0.3", | |
| + "next-sitemap": "4.2.3", | |
| "node-fetch": "^3.2.10", | |
| - "postcss": "^8.4.21", | |
| + "postcss": "8.4.49", | |
| "prettier": "^2.7.1", | |
| - "tailwindcss": "^3.4.0", | |
| + "tailwindcss": "3.4.14", | |
| "tsx": "^3.8.2", | |
| "typescript": "^5.5.0", | |
| "uuid": "^8.3.2"\n- apps/docs/styles/globals.css (modified, 8 changes)\n Patch: @@ -1,11 +1,11 @@ | |
| -@tailwind base; | |
| -@tailwind components; | |
| -@tailwind utilities; | |
| - | |
| @import 'prism.css'; | |
| @import 'nprogress.css'; | |
| @import 'ads.css'; | |
| +@tailwind base; | |
| +@tailwind components; | |
| +@tailwind utilities; | |
| + | |
| html { | |
| font-size: 16px; | |
| padding: 0px !important;\n- package.json (modified, 4 changes)\n Patch: @@ -142,8 +142,8 @@ | |
| }, | |
| "pnpm": { | |
| "overrides": { | |
| - "react": "^18.2.0", | |
| - "react-dom": "^18.2.0", | |
| + "react": "18.2.0", | |
| + "react-dom": "18.2.0", | |
| "@changesets/get-github-info": "0.6.0" | |
| } | |
| },\n- packages/components/navbar/package.json (modified, 3 changes)\n Patch: @@ -52,8 +52,7 @@ | |
| "@react-aria/overlays": "3.23.4", | |
| "@react-aria/utils": "3.26.0", | |
| "@react-stately/toggle": "3.7.8", | |
| - "@react-stately/utils": "3.10.4", | |
| - "react-remove-scroll": "^2.5.6" | |
| + "@react-stately/utils": "3.10.4" | |
| }, | |
| "devDependencies": { | |
| "@nextui-org/theme": "workspace:*",\n- packages/components/navbar/src/navbar-menu.tsx (modified, 77 changes)\n Patch: @@ -3,8 +3,6 @@ import {useDOMRef} from "@nextui-org/react-utils"; | |
| import {clsx, dataAttr} from "@nextui-org/shared-utils"; | |
| import {AnimatePresence, HTMLMotionProps, LazyMotion, m} from "framer-motion"; | |
| import {mergeProps} from "@react-aria/utils"; | |
| -import {ReactElement, useCallback} from "react"; | |
| -import {RemoveScroll} from "react-remove-scroll"; | |
| import {Overlay} from "@react-aria/overlays"; | |
| import {menuVariants} from "./navbar-menu-transitions"; | |
| @@ -33,56 +31,41 @@ const NavbarMenu = forwardRef<"ul", NavbarMenuProps>((props, ref) => { | |
| const styles = clsx(classNames?.menu, className); | |
| - const MenuWrapper = useCallback( | |
| - ({children}: {children: ReactElement}) => { | |
| - return ( | |
| - <RemoveScroll forwardProps enabled={isMenuOpen} removeScrollBar={false}> | |
| - {children} | |
| - </RemoveScroll> | |
| - ); | |
| - }, | |
| - [isMenuOpen], | |
| - ); | |
| - | |
| const contents = disableAnimation ? ( | |
| - <MenuWrapper> | |
| - <ul | |
| - ref={domRef} | |
| - className={slots.menu?.({class: styles})} | |
| - data-open={dataAttr(isMenuOpen)} | |
| - style={{ | |
| - // @ts-expect-error | |
| - "--navbar-height": typeof height === "number" ? `${height}px` : height, | |
| - }} | |
| - {...otherProps} | |
| - > | |
| - {children} | |
| - </ul> | |
| - </MenuWrapper> | |
| + <ul | |
| + ref={domRef} | |
| + className={slots.menu?.({class: styles})} | |
| + data-open={dataAttr(isMenuOpen)} | |
| + style={{ | |
| + // @ts-expect-error | |
| + "--navbar-height": typeof height === "number" ? `${height}px` : height, | |
| + }} | |
| + {...otherProps} | |
| + > | |
| + {children} | |
| + </ul> | |
| ) : ( | |
| <AnimatePresence mode="wait"> | |
| {isMenuOpen ? ( | |
| <LazyMotion features={domAnimation}> | |
| - <MenuWrapper> | |
| - <m.ul | |
| - ref={domRef} | |
| - layoutScroll | |
| - animate="enter" | |
| - className={slots.menu?.({class: styles})} | |
| - data-open={dataAttr(isMenuOpen)} | |
| - exit="exit" | |
| - initial="exit" | |
| - style={{ | |
| - // @ts-expect-error | |
| - "--navbar-height": typeof height === "number" ? `${height}px` : height, | |
| - ...style, | |
| - }} | |
| - variants={menuVariants} | |
| - {...mergeProps(motionProps, otherProps)} | |
| - > | |
| - {children} | |
| - </m.ul> | |
| - </MenuWrapper> | |
| + <m.ul | |
| + ref={domRef} | |
| + layoutScroll | |
| + animate="enter" | |
| + className={slots.menu?.({class: styles})} | |
| + data-open={dataAttr(isMenuOpen)} | |
| + exit="exit" | |
| + initial="exit" | |
| + style={{ | |
| + // @ts-expect-error | |
| + "--navbar-height": typeof height === "number" ? `${height}px` : height, | |
| + ...style, | |
| + }} | |
| + variants={menuVariants} | |
| + {...mergeProps(motionProps, otherProps)} | |
| + > | |
| + {children} | |
| + </m.ul> | |
| </LazyMotion> | |
| ) : null} | |
| </AnimatePresence>\n- packages/components/navbar/src/use-navbar.ts (modified, 11 changes)\n Patch: @@ -15,6 +15,7 @@ import {mergeProps, useResizeObserver} from "@react-aria/utils"; | |
| import {useScrollPosition} from "@nextui-org/use-scroll-position"; | |
| import {useControlledState} from "@react-stately/utils"; | |
| import {HTMLMotionProps} from "framer-motion"; | |
| +import {usePreventScroll} from "@react-aria/overlays"; | |
| interface Props extends HTMLNextUIProps<"nav"> { | |
| /** | |
| @@ -47,6 +48,11 @@ interface Props extends HTMLNextUIProps<"nav"> { | |
| * @default false | |
| */ | |
| shouldHideOnScroll?: boolean; | |
| + /** | |
| + * Whether the navbar should block scroll when the menu is open or not. | |
| + * @default false | |
| + */ | |
| + shouldBlockScroll?: boolean; | |
| /** | |
| * Whether the navbar parent scroll event should be listened to or not. | |
| * @default false | |
| @@ -102,6 +108,7 @@ export function useNavbar(originalProps: UseNavbarProps) { | |
| height = "4rem", | |
| shouldHideOnScroll = false, | |
| disableScrollHandler = false, | |
| + shouldBlockScroll = true, | |
| onScrollPositionChange, | |
| isMenuOpen: isMenuOpenProp, | |
| isMenuDefaultOpen, | |
| @@ -146,6 +153,10 @@ export function useNavbar(originalProps: UseNavbarProps) { | |
| } | |
| }; | |
| + usePreventScroll({ | |
| + isDisabled: !(shouldBlockScroll && isMenuOpen), | |
| + }); | |
| + | |
| useResizeObserver({ | |
| ref: domRef, | |
| onResize: () => {\n- packages/components/popover/package.json (modified, 3 changes)\n Patch: @@ -56,8 +56,7 @@ | |
| "@react-aria/utils": "3.26.0", | |
| "@react-stately/overlays": "3.6.11", | |
| "@react-types/button": "3.10.0", | |
| - "@react-types/overlays": "3.8.10", | |
| - "react-remove-scroll": "^2.5.6" | |
| + "@react-types/overlays": "3.8.10" | |
| }, | |
| "devDependencies": { | |
| "@nextui-org/card": "workspace:*",\n- packages/components/popover/src/popover-content.tsx (modified, 7 changes)\n Patch: @@ -2,7 +2,6 @@ import type {AriaDialogProps} from "@react-aria/dialog"; | |
| import type {HTMLMotionProps} from "framer-motion"; | |
| import {DOMAttributes, ReactNode, useMemo, useRef} from "react"; | |
| -import {RemoveScroll} from "react-remove-scroll"; | |
| import {DismissButton} from "@react-aria/overlays"; | |
| import {TRANSITION_VARIANTS} from "@nextui-org/framer-utils"; | |
| import {m, LazyMotion} from "framer-motion"; | |
| @@ -25,12 +24,10 @@ const PopoverContent = (props: PopoverContentProps) => { | |
| const { | |
| Component: OverlayComponent, | |
| - isOpen, | |
| placement, | |
| backdrop, | |
| motionProps, | |
| disableAnimation, | |
| - shouldBlockScroll, | |
| getPopoverProps, | |
| getDialogProps, | |
| getBackdropProps, | |
| @@ -84,7 +81,7 @@ const PopoverContent = (props: PopoverContentProps) => { | |
| }, [backdrop, disableAnimation, getBackdropProps]); | |
| const contents = ( | |
| - <RemoveScroll enabled={shouldBlockScroll && isOpen} removeScrollBar={false}> | |
| + <> | |
| {disableAnimation ? ( | |
| content | |
| ) : ( | |
| @@ -103,7 +100,7 @@ const PopoverContent = (props: PopoverContentProps) => { | |
| </m.div> | |
| </LazyMotion> | |
| )} | |
| - </RemoveScroll> | |
| + </> | |
| ); | |
| return (\n- packages/components/popover/src/use-popover.ts (modified, 6 changes)\n Patch: @@ -6,7 +6,7 @@ import {RefObject, Ref, useEffect} from "react"; | |
| import {ReactRef, useDOMRef} from "@nextui-org/react-utils"; | |
| import {OverlayTriggerState, useOverlayTriggerState} from "@react-stately/overlays"; | |
| import {useFocusRing} from "@react-aria/focus"; | |
| -import {ariaHideOutside, useOverlayTrigger} from "@react-aria/overlays"; | |
| +import {ariaHideOutside, useOverlayTrigger, usePreventScroll} from "@react-aria/overlays"; | |
| import {OverlayTriggerProps} from "@react-types/overlays"; | |
| import { | |
| HTMLNextUIProps, | |
| @@ -190,6 +190,10 @@ export function usePopover(originalProps: UsePopoverProps) { | |
| const baseStyles = clsx(classNames?.base, className); | |
| + usePreventScroll({ | |
| + isDisabled: !(shouldBlockScroll && state.isOpen), | |
| + }); | |
| + | |
| const getPopoverProps: PropGetter = (props = {}) => ({ | |
| ref: domRef, | |
| ...mergeProps(popoverProps, otherProps, props),\n- packages/components/tooltip/package.json (modified, 4 changes)\n Patch: @@ -60,9 +60,7 @@ | |
| "@nextui-org/system": "workspace:*", | |
| "@nextui-org/theme": "workspace:*", | |
| "clean-package": "2.2.0", | |
| - "framer-motion": "11.9.0", | |
| - "react": "^18.2.0", | |
| - "react-dom": "^18.2.0" | |
| + "framer-motion": "11.9.0" | |
| }, | |
| "clean-package": "../../../clean-package.config.json" | |
| } | |
| \ No newline at end of file\n- pnpm-lock.yaml (modified, 4277 changes)\n Patch: No patch available\n |