From 4d6cd36f5c222012265d474f1026cf8e341ffabe Mon Sep 17 00:00:00 2001 From: Nicholas Cunningham Date: Thu, 18 Apr 2024 09:24:34 -0600 Subject: [PATCH] feat(nx-dev): new main navigation menu (#22829) It adds a new main navigation menu on the website and in the documentation, offering more choices and simpler access to different parts of the content for the visitor. Co-authored-by: Benjamin Cabanes <3447705+bcabanes@users.noreply.github.com> --- .prettierrc | 3 +- .../src/lib/sourcemap-info-tooltip.tsx | 6 +- .../feature-search/src/lib/algolia-search.tsx | 4 +- nx-dev/nx-dev/project.json | 13 - nx-dev/ui-common/src/index.ts | 15 +- nx-dev/ui-common/src/lib/footer.tsx | 4 + nx-dev/ui-common/src/lib/github-icon.tsx | 14 + nx-dev/ui-common/src/lib/header.tsx | 326 ----------- .../src/lib/headers/default-menu-item.tsx | 56 ++ .../{ => headers}/documentation-header.tsx | 227 ++++++-- nx-dev/ui-common/src/lib/headers/header.tsx | 520 ++++++++++++++++++ .../ui-common/src/lib/headers/menu-items.ts | 214 +++++++ .../src/lib/headers/mobile-menu-item.tsx | 54 ++ .../src/lib/headers/sections-menu.tsx | 27 + .../src/lib/headers/two-columns-menu.tsx | 23 + nx-dev/ui-common/src/lib/nx-agents-icon.tsx | 17 + nx-dev/ui-common/src/lib/nx-icon.tsx | 14 + nx-dev/ui-common/src/lib/nx-replay-icon.tsx | 17 + .../src/lib/theme-switcher.component.tsx | 53 +- package.json | 8 +- pnpm-lock.yaml | 32 +- 21 files changed, 1206 insertions(+), 441 deletions(-) create mode 100644 nx-dev/ui-common/src/lib/github-icon.tsx delete mode 100644 nx-dev/ui-common/src/lib/header.tsx create mode 100644 nx-dev/ui-common/src/lib/headers/default-menu-item.tsx rename nx-dev/ui-common/src/lib/{ => headers}/documentation-header.tsx (56%) create mode 100644 nx-dev/ui-common/src/lib/headers/header.tsx create mode 100644 nx-dev/ui-common/src/lib/headers/menu-items.ts create mode 100644 nx-dev/ui-common/src/lib/headers/mobile-menu-item.tsx create mode 100644 nx-dev/ui-common/src/lib/headers/sections-menu.tsx create mode 100644 nx-dev/ui-common/src/lib/headers/two-columns-menu.tsx create mode 100644 nx-dev/ui-common/src/lib/nx-agents-icon.tsx create mode 100644 nx-dev/ui-common/src/lib/nx-icon.tsx create mode 100644 nx-dev/ui-common/src/lib/nx-replay-icon.tsx diff --git a/.prettierrc b/.prettierrc index 1d01da021e..f0d0cdef32 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,4 +1,5 @@ { "singleQuote": true, - "endOfLine": "lf" + "endOfLine": "lf", + "plugins": ["prettier-plugin-tailwindcss"] } diff --git a/graph/ui-tooltips/src/lib/sourcemap-info-tooltip.tsx b/graph/ui-tooltips/src/lib/sourcemap-info-tooltip.tsx index 3d44c2c490..dea15ce7d3 100644 --- a/graph/ui-tooltips/src/lib/sourcemap-info-tooltip.tsx +++ b/graph/ui-tooltips/src/lib/sourcemap-info-tooltip.tsx @@ -28,7 +28,7 @@ export function SourcemapInfoToolTip({ <>

{isTarget ? 'Created' : 'Set'} by: - + {docsUrlSlug ? ( +

diff --git a/nx-dev/feature-search/src/lib/algolia-search.tsx b/nx-dev/feature-search/src/lib/algolia-search.tsx index db36f8bc8a..e98589900f 100644 --- a/nx-dev/feature-search/src/lib/algolia-search.tsx +++ b/nx-dev/feature-search/src/lib/algolia-search.tsx @@ -86,8 +86,8 @@ export function AlgoliaSearch({ className="flex w-full items-center rounded-md bg-white py-1.5 px-2 text-sm leading-4 ring-1 ring-slate-300 transition dark:bg-slate-700 dark:ring-slate-900" > - - Search the docs ... + + Search ))}
+
+ Preferences +
diff --git a/nx-dev/ui-common/src/lib/github-icon.tsx b/nx-dev/ui-common/src/lib/github-icon.tsx new file mode 100644 index 0000000000..99952cc38a --- /dev/null +++ b/nx-dev/ui-common/src/lib/github-icon.tsx @@ -0,0 +1,14 @@ +import { FC, SVGProps } from 'react'; + +export const GitHubIcon: FC> = (props) => ( + + GitHub + + +); diff --git a/nx-dev/ui-common/src/lib/header.tsx b/nx-dev/ui-common/src/lib/header.tsx deleted file mode 100644 index f2a755b3ed..0000000000 --- a/nx-dev/ui-common/src/lib/header.tsx +++ /dev/null @@ -1,326 +0,0 @@ -import { Popover, Transition } from '@headlessui/react'; -import { Bars4Icon, ChevronDownIcon } from '@heroicons/react/24/outline'; -import { AlgoliaSearch } from '@nx/nx-dev/feature-search'; -import { ThemeSwitcher } from '@nx/nx-dev/ui-theme'; -import cx from 'classnames'; -import Link from 'next/link'; -import { useRouter } from 'next/router'; -import { Fragment } from 'react'; - -export function Header(): JSX.Element { - const router = useRouter(); - const flyoutMenu = [ - { - name: 'Getting started', - description: 'Jump right in and start building!', - href: '/getting-started/intro', - }, - { - name: 'Nx on CI', - description: 'Learn how to efficiently use Nx on CI', - href: '/ci/intro/ci-with-nx', - }, - { - name: 'Features', - description: - 'Learn the features of Nx with in depth guides and explainers.', - href: '/features', - }, - { - name: 'Nx Replay', - description: - 'Built-in local and remote caching to speed up your tasks and save you time and money.', - href: '/features/cache-task-results', - }, - { - name: 'Recipes', - description: 'Follow instructions to do common specific tasks.', - href: '/recipes', - }, - { - name: 'Nx Agents', - description: - 'Executes tasks remotely on different agents in parallel. Enable remote cache in one command.', - href: '/ci/features/distribute-task-execution', - }, - { - name: 'Nx Console', - description: - 'The official VSCode & JetBrains plugin bringing Nx to your editor.', - href: '/getting-started/editor-setup#vscode', - }, - { - name: 'Set Up CI', - description: 'Configure Nx for your CI provider', - href: '/ci/recipes/set-up', - }, - ]; - const flyoutMobileMenu = [ - { - name: 'Getting started', - description: 'Jump right in and start building!', - href: '/getting-started/intro', - }, - { - name: 'Blog', - description: 'Latest news from the Nx & Nx Cloud core team', - href: '/blog', - }, - { - name: 'Community', - description: 'Check how to reach out and be part of the Nx community.', - href: '/community', - }, - { - name: 'Launch Nx', - description: 'A week of exciting announcements about Nx and Nx Cloud!', - href: '/launch-nx', - }, - { - name: 'Contact us', - description: 'Give us a call!', - href: '/contact', - }, - ]; - - return ( -
- {/*DESKTOP*/} -
- {/*LOGO*/} -
- - - Nx - - - -
- {/*PRIMARY NAVIGATION*/} -
- -
- -
- {/*MOBILE*/} -
-
- {/*LOGO*/} - - - Nx - - - - {/*MENU*/} -
- - {({ open }) => ( - <> - - - - - -
- -
- - - - )} - -
-
- -
-
- ); -} diff --git a/nx-dev/ui-common/src/lib/headers/default-menu-item.tsx b/nx-dev/ui-common/src/lib/headers/default-menu-item.tsx new file mode 100644 index 0000000000..40f8800bea --- /dev/null +++ b/nx-dev/ui-common/src/lib/headers/default-menu-item.tsx @@ -0,0 +1,56 @@ +import { ElementType } from 'react'; +import type { MenuItem } from './menu-items'; +import cx from 'classnames'; +import Link from 'next/link'; + +export function DefaultMenuItem({ + as = 'div', + className = '', + item, + ...rest +}: { + as?: ElementType; + className?: string; + item: MenuItem; +}): JSX.Element { + const hasExternalLink = + item.href.startsWith('http') || item.href.startsWith('//'); + const Tag = as; + return ( + + {item.icon ? ( + + ); +} diff --git a/nx-dev/ui-common/src/lib/documentation-header.tsx b/nx-dev/ui-common/src/lib/headers/documentation-header.tsx similarity index 56% rename from nx-dev/ui-common/src/lib/documentation-header.tsx rename to nx-dev/ui-common/src/lib/headers/documentation-header.tsx index b129d9d1e7..2a759a433c 100644 --- a/nx-dev/ui-common/src/lib/documentation-header.tsx +++ b/nx-dev/ui-common/src/lib/headers/documentation-header.tsx @@ -1,13 +1,25 @@ -import { type JSX } from 'react'; -import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline'; +import { Fragment, type JSX } from 'react'; +import { + ArrowUpRightIcon, + Bars3Icon, + ChevronDownIcon, + XMarkIcon, +} from '@heroicons/react/24/outline'; import { AlgoliaSearch } from '@nx/nx-dev/feature-search'; -import { ThemeSwitcher } from '@nx/nx-dev/ui-theme'; import cx from 'classnames'; import Link from 'next/link'; import { useRouter } from 'next/router'; -import { ButtonLink } from './button'; -import { NxCloudIcon } from './nx-cloud-icon'; -import { AnnouncementBanner } from './announcement-banner'; +import { ButtonLink } from '../button'; +import { NxIcon } from '../nx-icon'; +import { Popover, Transition } from '@headlessui/react'; +import { TwoColumnsMenu } from './two-columns-menu'; +import { + featuresItems, + resourceMenuItems, + solutionsMenuItems, +} from './menu-items'; +import { SectionsMenu } from './sections-menu'; +import { NxCloudIcon } from '../nx-cloud-icon'; function Menu({ tabs }: { tabs: any[] }): JSX.Element { return ( @@ -197,20 +209,12 @@ export function DocumentationHeader({ href="/" className="flex flex-grow items-center px-4 text-slate-900 dark:text-white lg:px-0" > - - Nx - - + Nx +
{/*SEARCH*/} -
+
{/*NAVIGATION*/} -
+
{/* SPACER */}
-
- -
+ {/*
*/} + {/* */} + {/*
*/}
diff --git a/nx-dev/ui-common/src/lib/headers/header.tsx b/nx-dev/ui-common/src/lib/headers/header.tsx new file mode 100644 index 0000000000..0941d01d7f --- /dev/null +++ b/nx-dev/ui-common/src/lib/headers/header.tsx @@ -0,0 +1,520 @@ +import { Dialog, Disclosure, Popover, Transition } from '@headlessui/react'; +import { + ArrowUpRightIcon, + Bars4Icon, + ChevronDownIcon, + XMarkIcon, +} from '@heroicons/react/24/outline'; +import cx from 'classnames'; +import Link from 'next/link'; +import { useRouter } from 'next/router'; +import { Fragment, useEffect, useState } from 'react'; +import { ButtonLink } from '../button'; +import { + eventItems, + featuresItems, + learnItems, + plans, + resourceMenuItems, + solutionsMenuItems, +} from './menu-items'; +import { NxIcon } from '../nx-icon'; +import { GitHubIcon } from '../github-icon'; +import { MobileMenuItem } from './mobile-menu-item'; +import { SectionsMenu } from './sections-menu'; +import { TwoColumnsMenu } from './two-columns-menu'; +import { AlgoliaSearch } from '@nx/nx-dev/feature-search'; +import { NxCloudIcon } from '../nx-cloud-icon'; + +export function Header(): JSX.Element { + let [isOpen, setIsOpen] = useState(false); + const router = useRouter(); + + // We need to close the popover if the route changes or the window is resized to prevent the popover from being stuck open. + const checkSizeAndClosePopover = () => { + const breakpoint = 1024; // This is the standard Tailwind lg breakpoint value + if (window.innerWidth < breakpoint) { + setIsOpen(false); + } + }; + + useEffect(() => { + window.addEventListener('resize', checkSizeAndClosePopover); + return () => { + window.removeEventListener('resize', checkSizeAndClosePopover); + }; + }, []); + + return ( +
+ {/*DESKTOP*/} +
+ {/*PRIMARY NAVIGATION*/} +
+ {/*LOGO*/} + + Nx +
+ {/*SECONDARY NAVIGATION*/} +
+ +
+
+ {/*MOBILE*/} +
+
+ {/*LOGO*/} + + Nx +
+
+ + setIsOpen(!isOpen)} + > +
+
+
+
+ + +
+
+
+ + + + Nx + + + Nx + + +
+ +
+
+
+
+ + Go to App + + +
+ {/*FEATURES*/} + + {({ open }) => ( + <> + + Features + + + {featuresItems.map((item) => ( + + ))} + + + )} + + {/*SOLUTIONS*/} + + {({ open }) => ( + <> + + Solutions + + + {plans.map((item) => ( + + ))} + + + )} + + + Documentation + + + Blog + + + CI Pricing + + + {/*RESOURCES*/} + + {({ open }) => ( + <> + + Resources + + + {learnItems.map((item) => ( + + ))} + {eventItems.map((item) => ( + + ))} + + + )} + + + Contact + +
+
+
+ + +
+
+
+
+ +
+ ); +} diff --git a/nx-dev/ui-common/src/lib/headers/menu-items.ts b/nx-dev/ui-common/src/lib/headers/menu-items.ts new file mode 100644 index 0000000000..9cb6b72799 --- /dev/null +++ b/nx-dev/ui-common/src/lib/headers/menu-items.ts @@ -0,0 +1,214 @@ +import { + AcademicCapIcon, + ArrowPathIcon, + BoltIcon, + CircleStackIcon, + CodeBracketIcon, + CubeIcon, + NewspaperIcon, + PlayCircleIcon, + ShareIcon, + Squares2X2Icon, +} from '@heroicons/react/24/outline'; +import { FC, SVGProps } from 'react'; +import { NxAgentsIcon } from '../nx-agents-icon'; +import { NxReplayIcon } from '../nx-replay-icon'; + +export interface MenuItem { + name: string; + href: string; + description: string | null; + icon: FC> | null; + isHighlight: boolean; + isNew: boolean; +} + +export const featuresItems: MenuItem[] = [ + { + name: 'Task Running', + // description: 'Run one or many tasks in parallel.', + description: null, + href: '/features/run-tasks', + icon: BoltIcon, + isNew: false, + isHighlight: false, + }, + { + name: 'Local Caching', + // description: 'Speeds up your local workflow.', + description: null, + href: '/features/cache-task-results', + icon: CircleStackIcon, + isNew: false, + isHighlight: false, + }, + { + name: 'Nx Graph', + // description: 'See interactions for tasks and modules.', + description: null, + href: '/features/explore-graph', + icon: ShareIcon, + isNew: false, + isHighlight: false, + }, + { + name: 'Automated updates', + // description: 'Keep running on latest without effort.', + description: null, + href: '/features/automate-updating-dependencies', + icon: ArrowPathIcon, + isNew: false, + isHighlight: false, + }, + { + name: 'Module Boundaries', + // description: 'Partition your code into defined units.', + description: null, + href: '/features/enforce-module-boundaries', + icon: Squares2X2Icon, + isNew: false, + isHighlight: false, + }, + { + name: 'Nx Release', + // description: 'Versioning, changelog, publishing.', + description: null, + href: '/features/manage-releases', + icon: CubeIcon, + isNew: true, + isHighlight: false, + }, + { + name: 'Nx Replay', + description: 'Zero-config, fast & secure remote cache solution.', + href: '/ci/features/remote-cache', + icon: NxReplayIcon, + isNew: false, + isHighlight: true, + }, + { + name: 'Nx Agents', + description: + 'One-line config for distributing tasks, E2E tests split & flaky tasks rerun.', + href: '/ci/features/distribute-task-execution', + icon: NxAgentsIcon, + isNew: true, + isHighlight: true, + }, +]; +export const plans: MenuItem[] = [ + { + name: 'Nx Cloud', + description: + 'End-to-end solution for smart, efficient and maintainable CI.', + href: 'https://nx.app', + icon: null, + isNew: false, + isHighlight: false, + }, + { + name: 'Nx Enterprise', + description: + 'The ultimate Nx & Nx Cloud toolchain, tailored to your needs.', + href: 'https://nx.app/enterprise', + icon: null, + isNew: false, + isHighlight: false, + }, +]; +const useCaseItems: MenuItem[] = [ + { + name: 'Get actionable feedback', + description: 'Enhanced analysis & analytics of your workflows.', + href: '', + icon: null, + isNew: false, + isHighlight: false, + }, + { + name: 'Reduce CI timings with remote caching', + description: 'Share task results & artifacts between CI & teams.', + href: '', + icon: null, + isNew: false, + isHighlight: false, + }, + { + name: 'Performant task distribution at scale', + description: 'Faster & cheaper CI workflows.', + href: '', + icon: null, + isNew: false, + isHighlight: false, + }, + { + name: 'Improve E2E time execution on CI', + description: 'Automatic task splitting.', + href: '', + icon: null, + isNew: false, + isHighlight: false, + }, +]; +export const learnItems: MenuItem[] = [ + { + name: 'Step by step tutorials', + description: null, + href: '/getting-started/intro#learn-nx', + icon: AcademicCapIcon, + isNew: false, + isHighlight: false, + }, + { + name: 'Code examples for your stack', + description: null, + href: '/showcase/example-repos', + icon: CodeBracketIcon, + isNew: false, + isHighlight: false, + }, + { + name: 'Video tutorials', + description: null, + href: 'https://www.youtube.com/@nxdevtools', + icon: PlayCircleIcon, + isNew: false, + isHighlight: false, + }, + { + name: 'Newsletter', + description: null, + href: 'https://go.nrwl.io/nx-newsletter', + icon: NewspaperIcon, + isNew: false, + isHighlight: false, + }, +]; +export const eventItems: MenuItem[] = [ + { + name: 'Nx Conf', + description: + 'In person & virtual conference about latest monorepo advancements.', + href: '/conf', + icon: null, + isNew: false, + isHighlight: false, + }, + { + name: 'Webinars', + description: + 'Virtual courses to get a deeper understanding on monorepos animated by the Nx team.', + href: 'https://go.nx.dev/april-webinar', + icon: null, + isNew: false, + isHighlight: false, + }, +]; +export const solutionsMenuItems = { + 'Helping you grow': plans, + // 'Use cases': useCaseItems +}; +export const resourceMenuItems = { + Learn: learnItems, + Events: eventItems, +}; diff --git a/nx-dev/ui-common/src/lib/headers/mobile-menu-item.tsx b/nx-dev/ui-common/src/lib/headers/mobile-menu-item.tsx new file mode 100644 index 0000000000..53652711c4 --- /dev/null +++ b/nx-dev/ui-common/src/lib/headers/mobile-menu-item.tsx @@ -0,0 +1,54 @@ +import { ElementType } from 'react'; +import type { MenuItem } from './menu-items'; +import cx from 'classnames'; +import Link from 'next/link'; + +export function MobileMenuItem({ + as = 'div', + className = '', + item, + ...rest +}: { + as?: ElementType; + className?: string; + item: MenuItem; +}): JSX.Element { + const hasExternalLink = + item.href.startsWith('http') || item.href.startsWith('//'); + const Tag = as; + return ( + + {item.icon ? ( + + ); +} diff --git a/nx-dev/ui-common/src/lib/headers/sections-menu.tsx b/nx-dev/ui-common/src/lib/headers/sections-menu.tsx new file mode 100644 index 0000000000..5cbbcb73df --- /dev/null +++ b/nx-dev/ui-common/src/lib/headers/sections-menu.tsx @@ -0,0 +1,27 @@ +import type { MenuItem } from './menu-items'; +import { DefaultMenuItem } from './default-menu-item'; + +export function SectionsMenu({ + sections, +}: { + sections: Record; +}): JSX.Element { + return ( +
+
+ {Object.keys(sections).map((section) => ( +
+
+ {section} +
+
+ {sections[section].map((item) => ( + + ))} +
+
+ ))} +
+
+ ); +} diff --git a/nx-dev/ui-common/src/lib/headers/two-columns-menu.tsx b/nx-dev/ui-common/src/lib/headers/two-columns-menu.tsx new file mode 100644 index 0000000000..433793d086 --- /dev/null +++ b/nx-dev/ui-common/src/lib/headers/two-columns-menu.tsx @@ -0,0 +1,23 @@ +import type { MenuItem } from './menu-items'; +import { DefaultMenuItem } from './default-menu-item'; + +export function TwoColumnsMenu({ items }: { items: MenuItem[] }): JSX.Element { + return ( +
+
+ {items + .filter((i) => !i.isHighlight) + .map((item) => ( + + ))} +
+ {items + .filter((i) => i.isHighlight) + .map((item) => ( + + ))} +
+
+
+ ); +} diff --git a/nx-dev/ui-common/src/lib/nx-agents-icon.tsx b/nx-dev/ui-common/src/lib/nx-agents-icon.tsx new file mode 100644 index 0000000000..aa0fb0e289 --- /dev/null +++ b/nx-dev/ui-common/src/lib/nx-agents-icon.tsx @@ -0,0 +1,17 @@ +import { FC, SVGProps } from 'react'; + +export const NxAgentsIcon: FC> = (props) => ( + + + +); diff --git a/nx-dev/ui-common/src/lib/nx-icon.tsx b/nx-dev/ui-common/src/lib/nx-icon.tsx new file mode 100644 index 0000000000..82016c53cd --- /dev/null +++ b/nx-dev/ui-common/src/lib/nx-icon.tsx @@ -0,0 +1,14 @@ +import { FC, SVGProps } from 'react'; + +export const NxIcon: FC> = (props) => ( + + Nx + + +); diff --git a/nx-dev/ui-common/src/lib/nx-replay-icon.tsx b/nx-dev/ui-common/src/lib/nx-replay-icon.tsx new file mode 100644 index 0000000000..097ac26e8a --- /dev/null +++ b/nx-dev/ui-common/src/lib/nx-replay-icon.tsx @@ -0,0 +1,17 @@ +import { FC, SVGProps } from 'react'; + +export const NxReplayIcon: FC> = (props) => ( + + + +); diff --git a/nx-dev/ui-theme/src/lib/theme-switcher.component.tsx b/nx-dev/ui-theme/src/lib/theme-switcher.component.tsx index 4768e5278b..56ffec357b 100644 --- a/nx-dev/ui-theme/src/lib/theme-switcher.component.tsx +++ b/nx-dev/ui-theme/src/lib/theme-switcher.component.tsx @@ -5,10 +5,10 @@ import { SunIcon, } from '@heroicons/react/24/outline'; import cx from 'classnames'; -import { Fragment } from 'react'; -import { useTheme } from './theme.provider'; +import { ElementType, Fragment } from 'react'; +import { Theme, useTheme } from './theme.provider'; -export function ThemeSwitcher() { +export function ThemeSwitcher(): JSX.Element { const [theme, setTheme] = useTheme(); const themeMap = { dark: { @@ -24,23 +24,24 @@ export function ThemeSwitcher() { icon: , }, }; - const availableThemes = [ - { - label: 'Light', - value: 'light', - icon: , - }, - { - label: 'Dark', - value: 'dark', - icon: , - }, - { - label: 'System', - value: 'system', - icon: , - }, - ]; + const availableThemes: { label: string; value: Theme; icon: ElementType }[] = + [ + { + label: 'Light', + value: 'light', + icon: SunIcon, + }, + { + label: 'Dark', + value: 'dark', + icon: MoonIcon, + }, + { + label: 'System', + value: 'system', + icon: ComputerDesktopIcon, + }, + ]; return (
@@ -66,13 +67,13 @@ export function ThemeSwitcher() { leaveFrom="transform opacity-100 scale-100" leaveTo="transform opacity-0 scale-95" > - - {availableThemes.map(({ value, label, icon }) => ( - + + {availableThemes.map((t) => ( + {({ active, selected }) => (
  • - {icon} - {label} +
    • )}     diff --git a/package.json b/package.json index 40a006c867..276ad9d85d 100644 --- a/package.json +++ b/package.json @@ -124,7 +124,6 @@ "@types/marked": "^2.0.0", "@types/node": "18.19.8", "@types/npm-package-arg": "6.1.1", - "@types/prettier": "^2.6.2", "@types/react": "18.2.33", "@types/react-dom": "18.2.14", "@types/semver": "^7.5.2", @@ -169,7 +168,7 @@ "esbuild": "0.19.5", "eslint": "8.57.0", "eslint-config-next": "14.0.4", - "eslint-config-prettier": "9.0.0", + "eslint-config-prettier": "9.1.0", "eslint-plugin-cypress": "2.14.0", "eslint-plugin-import": "2.27.5", "eslint-plugin-jsx-a11y": "6.7.1", @@ -245,8 +244,8 @@ "postcss-import": "~14.1.0", "postcss-preset-env": "~7.5.0", "postcss-url": "~10.1.3", - "prettier": "^2.6.2", - "prettier-plugin-tailwindcss": "^0.1.5", + "prettier": "^2.7.1", + "prettier-plugin-tailwindcss": "^0.1.13", "pretty-quick": "^3.1.0", "raw-loader": "^4.0.2", "react-markdown": "^8.0.7", @@ -375,4 +374,3 @@ ] } } - diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3d18261824..4735521d10 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -289,7 +289,7 @@ devDependencies: version: 18.3.0-beta.3(@swc-node/register@1.8.0)(@swc/core@1.3.86)(@types/node@18.19.8)(js-yaml@4.1.0)(nx@18.3.0-beta.3)(verdaccio@5.15.4) '@nx/eslint-plugin': specifier: 18.3.0-beta.3 - version: 18.3.0-beta.3(@swc-node/register@1.8.0)(@swc/core@1.3.86)(@types/node@18.19.8)(@typescript-eslint/parser@7.4.0)(eslint-config-prettier@9.0.0)(eslint@8.57.0)(nx@18.3.0-beta.3)(typescript@5.4.2)(verdaccio@5.15.4) + version: 18.3.0-beta.3(@swc-node/register@1.8.0)(@swc/core@1.3.86)(@types/node@18.19.8)(@typescript-eslint/parser@7.4.0)(eslint-config-prettier@9.1.0)(eslint@8.57.0)(nx@18.3.0-beta.3)(typescript@5.4.2)(verdaccio@5.15.4) '@nx/jest': specifier: 18.3.0-beta.3 version: 18.3.0-beta.3(@swc-node/register@1.8.0)(@swc/core@1.3.86)(@types/node@18.19.8)(nx@18.3.0-beta.3)(ts-node@10.9.1)(typescript@5.4.2)(verdaccio@5.15.4) @@ -449,9 +449,6 @@ devDependencies: '@types/npm-package-arg': specifier: 6.1.1 version: 6.1.1 - '@types/prettier': - specifier: ^2.6.2 - version: 2.7.1 '@types/react': specifier: 18.2.33 version: 18.2.33 @@ -585,8 +582,8 @@ devDependencies: specifier: 14.0.4 version: 14.0.4(eslint@8.57.0)(typescript@5.4.2) eslint-config-prettier: - specifier: 9.0.0 - version: 9.0.0(eslint@8.57.0) + specifier: 9.1.0 + version: 9.1.0(eslint@8.57.0) eslint-plugin-cypress: specifier: 2.14.0 version: 2.14.0(eslint@8.57.0) @@ -813,10 +810,10 @@ devDependencies: specifier: ~10.1.3 version: 10.1.3(postcss@8.4.19) prettier: - specifier: ^2.6.2 + specifier: ^2.7.1 version: 2.7.1 prettier-plugin-tailwindcss: - specifier: ^0.1.5 + specifier: ^0.1.13 version: 0.1.13(prettier@2.7.1) pretty-quick: specifier: ^3.1.0 @@ -7819,10 +7816,10 @@ packages: - verdaccio dev: true - /@nrwl/eslint-plugin-nx@18.3.0-beta.3(@swc-node/register@1.8.0)(@swc/core@1.3.86)(@types/node@18.19.8)(@typescript-eslint/parser@7.4.0)(eslint-config-prettier@9.0.0)(eslint@8.57.0)(nx@18.3.0-beta.3)(typescript@5.4.2)(verdaccio@5.15.4): + /@nrwl/eslint-plugin-nx@18.3.0-beta.3(@swc-node/register@1.8.0)(@swc/core@1.3.86)(@types/node@18.19.8)(@typescript-eslint/parser@7.4.0)(eslint-config-prettier@9.1.0)(eslint@8.57.0)(nx@18.3.0-beta.3)(typescript@5.4.2)(verdaccio@5.15.4): resolution: {integrity: sha512-M1XcAYnavTKZTC/kj1D4fYx9w2Q5Rbr6nyQ8vuZpukwWgxoDiNZ7CcHBdsUYO6EyFL3b331iCpQgcK+8tmSAhA==} dependencies: - '@nx/eslint-plugin': 18.3.0-beta.3(@swc-node/register@1.8.0)(@swc/core@1.3.86)(@types/node@18.19.8)(@typescript-eslint/parser@7.4.0)(eslint-config-prettier@9.0.0)(eslint@8.57.0)(nx@18.3.0-beta.3)(typescript@5.4.2)(verdaccio@5.15.4) + '@nx/eslint-plugin': 18.3.0-beta.3(@swc-node/register@1.8.0)(@swc/core@1.3.86)(@types/node@18.19.8)(@typescript-eslint/parser@7.4.0)(eslint-config-prettier@9.1.0)(eslint@8.57.0)(nx@18.3.0-beta.3)(typescript@5.4.2)(verdaccio@5.15.4) transitivePeerDependencies: - '@babel/traverse' - '@swc-node/register' @@ -8477,7 +8474,7 @@ packages: - verdaccio dev: true - /@nx/eslint-plugin@18.3.0-beta.3(@swc-node/register@1.8.0)(@swc/core@1.3.86)(@types/node@18.19.8)(@typescript-eslint/parser@7.4.0)(eslint-config-prettier@9.0.0)(eslint@8.57.0)(nx@18.3.0-beta.3)(typescript@5.4.2)(verdaccio@5.15.4): + /@nx/eslint-plugin@18.3.0-beta.3(@swc-node/register@1.8.0)(@swc/core@1.3.86)(@types/node@18.19.8)(@typescript-eslint/parser@7.4.0)(eslint-config-prettier@9.1.0)(eslint@8.57.0)(nx@18.3.0-beta.3)(typescript@5.4.2)(verdaccio@5.15.4): resolution: {integrity: sha512-3LNegAAk+ENBwM7frkoC7WSZ/K1n05mCDZOc6jKdHhP68KNiS1NeHn872l66qDgyf1Lb/qFizlZACWoVWVtkOw==} peerDependencies: '@typescript-eslint/parser': ^6.13.2 || ^7.0.0 @@ -8486,7 +8483,7 @@ packages: eslint-config-prettier: optional: true dependencies: - '@nrwl/eslint-plugin-nx': 18.3.0-beta.3(@swc-node/register@1.8.0)(@swc/core@1.3.86)(@types/node@18.19.8)(@typescript-eslint/parser@7.4.0)(eslint-config-prettier@9.0.0)(eslint@8.57.0)(nx@18.3.0-beta.3)(typescript@5.4.2)(verdaccio@5.15.4) + '@nrwl/eslint-plugin-nx': 18.3.0-beta.3(@swc-node/register@1.8.0)(@swc/core@1.3.86)(@types/node@18.19.8)(@typescript-eslint/parser@7.4.0)(eslint-config-prettier@9.1.0)(eslint@8.57.0)(nx@18.3.0-beta.3)(typescript@5.4.2)(verdaccio@5.15.4) '@nx/devkit': 18.3.0-beta.3(nx@18.3.0-beta.3) '@nx/js': 18.3.0-beta.3(@swc-node/register@1.8.0)(@swc/core@1.3.86)(@types/node@18.19.8)(nx@18.3.0-beta.3)(typescript@5.4.2)(verdaccio@5.15.4) '@typescript-eslint/parser': 7.4.0(eslint@8.57.0)(typescript@5.4.2) @@ -8494,7 +8491,7 @@ packages: '@typescript-eslint/utils': 7.4.0(eslint@8.57.0)(typescript@5.4.2) chalk: 4.1.2 confusing-browser-globals: 1.0.11 - eslint-config-prettier: 9.0.0(eslint@8.57.0) + eslint-config-prettier: 9.1.0(eslint@8.57.0) jsonc-eslint-parser: 2.1.0 semver: 7.6.0 tslib: 2.6.2 @@ -13165,6 +13162,7 @@ packages: /@types/prettier@2.7.1: resolution: {integrity: sha512-ri0UmynRRvZiiUJdiz38MmIblKK+oH30MztdBVR95dv/Ubw6neWSb8u1XpRb72L4qsZOhz+L+z9JD40SJmfWow==} + dev: false /@types/pretty-hrtime@1.0.1: resolution: {integrity: sha512-VjID5MJb1eGKthz2qUerWT8+R4b9N+CHvGCzg9fn4kWZgaF9AhdYikQio3R7wV8YY1NsQKPaCwKz1Yff+aHNUQ==} @@ -18946,8 +18944,8 @@ packages: - supports-color dev: true - /eslint-config-prettier@9.0.0(eslint@8.57.0): - resolution: {integrity: sha512-IcJsTkJae2S35pRsRAwoCE+925rJJStOdkKnLVgtE+tEpqU0EVVM7OqrwxqgptKdX29NUwC82I5pXsGFIgSevw==} + /eslint-config-prettier@9.1.0(eslint@8.57.0): + resolution: {integrity: sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==} hasBin: true peerDependencies: eslint: '>=7.0.0' @@ -23371,6 +23369,8 @@ packages: peerDependenciesMeta: webpack: optional: true + webpack-sources: + optional: true dependencies: webpack: 5.88.0(@swc/core@1.3.86)(esbuild@0.19.5) webpack-sources: 3.2.3 @@ -23383,6 +23383,8 @@ packages: peerDependenciesMeta: webpack: optional: true + webpack-sources: + optional: true dependencies: webpack: 5.90.3(@swc/core@1.3.86)(esbuild@0.20.1) webpack-sources: 3.2.3