From a4dfbccb780d22ceaf3188c7bd31340775cc00aa Mon Sep 17 00:00:00 2001 From: avivkeller Date: Fri, 27 Jun 2025 16:49:24 -0400 Subject: [PATCH 1/5] chore(select): move ChangeHistory to StatelessSelect --- .../Common/ChangeHistory/index.stories.tsx | 130 ------------------ .../Common/ChangeHistory/index.tsx | 67 --------- .../index.module.css | 14 -- .../Common/StatelessSelect/index.stories.tsx | 30 ++++ .../Common/StatelessSelect/index.tsx | 62 +++++++++ 5 files changed, 92 insertions(+), 211 deletions(-) delete mode 100644 packages/ui-components/Common/ChangeHistory/index.stories.tsx delete mode 100644 packages/ui-components/Common/ChangeHistory/index.tsx rename packages/ui-components/Common/{ChangeHistory => StatelessSelect}/index.module.css (86%) create mode 100644 packages/ui-components/Common/StatelessSelect/index.stories.tsx create mode 100644 packages/ui-components/Common/StatelessSelect/index.tsx diff --git a/packages/ui-components/Common/ChangeHistory/index.stories.tsx b/packages/ui-components/Common/ChangeHistory/index.stories.tsx deleted file mode 100644 index f40b27a89a8ed..0000000000000 --- a/packages/ui-components/Common/ChangeHistory/index.stories.tsx +++ /dev/null @@ -1,130 +0,0 @@ -import type { Meta as MetaObj, StoryObj } from '@storybook/react'; - -import ChangeHistory from '#ui/Common/ChangeHistory'; - -type Story = StoryObj; -type Meta = MetaObj; - -const SAMPLE_CHANGES = [ - { - versions: ['v15.4.0'], - label: 'No longer experimental', - url: 'https://github.com/nodejs/node/pull/12345', - }, - { - versions: ['v15.0.0', 'v14.17.0'], - label: 'Added in v15.0.0, v14.17.0', - url: 'https://github.com/nodejs/node/pull/67890', - }, - { - versions: ['v16.0.0'], - label: 'Deprecated in 16', - }, -]; - -const LARGE_SAMPLE_CHANGES = [ - { - versions: ['v20.0.0'], - label: 'Breaking change in v20', - url: 'https://github.com/nodejs/node/pull/50001', - }, - { - versions: ['v19.8.0'], - label: 'Performance improvement', - url: 'https://github.com/nodejs/node/pull/49999', - }, - { - versions: ['v19.0.0'], - label: 'API redesign', - url: 'https://github.com/nodejs/node/pull/49000', - }, - { - versions: ['v18.17.0', 'v18.16.1'], - label: 'Security fix backported', - url: 'https://github.com/nodejs/node/pull/48500', - }, - { - versions: ['v18.0.0'], - label: 'Major version release', - url: 'https://github.com/nodejs/node/pull/47000', - }, - { - versions: ['v17.9.0'], - label: 'Experimental feature added', - url: 'https://github.com/nodejs/node/pull/46500', - }, - { - versions: ['v17.0.0'], - label: 'Node.js 17 release', - url: 'https://github.com/nodejs/node/pull/45000', - }, - { - versions: ['v16.15.0', 'v16.14.2'], - label: 'Bug fix release', - url: 'https://github.com/nodejs/node/pull/44000', - }, - { - versions: ['v16.0.0'], - label: 'Deprecated in v16', - url: 'https://github.com/nodejs/node/pull/43000', - }, - { - versions: ['v15.14.0'], - label: 'Feature enhancement', - url: 'https://github.com/nodejs/node/pull/42000', - }, - { - versions: ['v15.0.0', 'v14.17.0'], - label: 'Initial implementation', - url: 'https://github.com/nodejs/node/pull/41000', - }, - { - versions: ['v14.18.0'], - label: 'Documentation update', - url: 'https://github.com/nodejs/node/pull/40000', - }, - { - versions: ['v14.0.0'], - label: 'Added to stable API', - url: 'https://github.com/nodejs/node/pull/39000', - }, - { - versions: ['v13.14.0'], - label: 'Experimental flag removed', - url: 'https://github.com/nodejs/node/pull/38000', - }, - { - versions: ['v12.22.0', 'v12.21.0'], - label: 'Backported to LTS', - url: 'https://github.com/nodejs/node/pull/37000', - }, - { - versions: ['v12.0.0'], - label: 'First experimental version', - url: 'https://github.com/nodejs/node/pull/36000', - }, -]; - -export const Default: Story = { - render: args => ( -
- -
- ), - args: { - changes: SAMPLE_CHANGES, - }, -}; - -export const LargeHistory: Story = { - render: args => ( -
- -
- ), - args: { - changes: LARGE_SAMPLE_CHANGES, - }, -}; - -export default { component: ChangeHistory } as Meta; diff --git a/packages/ui-components/Common/ChangeHistory/index.tsx b/packages/ui-components/Common/ChangeHistory/index.tsx deleted file mode 100644 index 3beaacc845186..0000000000000 --- a/packages/ui-components/Common/ChangeHistory/index.tsx +++ /dev/null @@ -1,67 +0,0 @@ -import { ChevronDownIcon, ClockIcon } from '@heroicons/react/24/outline'; -import classNames from 'classnames'; -import type { FC, ComponentProps } from 'react'; - -import type { LinkLike } from '#ui/types.js'; - -import styles from './index.module.css'; - -export type HistoryChange = { - versions: Array; - label: string; - url?: string; -}; - -type ChangeHistoryProps = ComponentProps<'div'> & { - label: string; - changes: Array; - as?: LinkLike; -}; - -const ChangeHistory: FC = ({ - label = 'History', - changes = [], - className, - as: As = 'a', - 'aria-label': ariaLabel = label, - ...props -}) => ( -
-
- - - {label} - - -
-
- {changes.map((change, index) => { - const MenuItem = change.url ? As : 'div'; - - return ( - -
{change.label}
-
- {change.versions.join(', ')} -
- - ); - })} -
-
-
-
-); - -export default ChangeHistory; diff --git a/packages/ui-components/Common/ChangeHistory/index.module.css b/packages/ui-components/Common/StatelessSelect/index.module.css similarity index 86% rename from packages/ui-components/Common/ChangeHistory/index.module.css rename to packages/ui-components/Common/StatelessSelect/index.module.css index c69d0e91896fa..b9405ddbdc4ec 100644 --- a/packages/ui-components/Common/ChangeHistory/index.module.css +++ b/packages/ui-components/Common/StatelessSelect/index.module.css @@ -67,17 +67,3 @@ text-white; } } - -.dropdownLabel { - @apply block - text-sm - font-medium - leading-tight; -} - -.dropdownVersions { - @apply block - text-xs - leading-tight - opacity-75; -} diff --git a/packages/ui-components/Common/StatelessSelect/index.stories.tsx b/packages/ui-components/Common/StatelessSelect/index.stories.tsx new file mode 100644 index 0000000000000..ca3c4f2dd3827 --- /dev/null +++ b/packages/ui-components/Common/StatelessSelect/index.stories.tsx @@ -0,0 +1,30 @@ +import type { Meta as MetaObj, StoryObj } from '@storybook/react'; + +import StatelessSelect from '.'; + +type Story = StoryObj; +type Meta = MetaObj; + +// Basic example with default anchor links +export const Default: Story = { + args: { + label: 'History', + values: [ + { href: '#item1', children: 'Item 1' }, + { href: '#item2', children: 'Item 2' }, + { href: '#item3', children: 'Item 3' }, + ], + children: Select Option, + }, +}; + +export default { + component: StatelessSelect, + decorators: [ + Story => ( +
+ +
+ ), + ], +} as Meta; diff --git a/packages/ui-components/Common/StatelessSelect/index.tsx b/packages/ui-components/Common/StatelessSelect/index.tsx new file mode 100644 index 0000000000000..7af2fd9fa0f71 --- /dev/null +++ b/packages/ui-components/Common/StatelessSelect/index.tsx @@ -0,0 +1,62 @@ +import classNames from 'classnames'; +import type { FC, ComponentProps, PropsWithChildren, HTMLProps } from 'react'; + +import type { LinkLike } from '#ui/types.js'; + +import styles from './index.module.css'; + +type StatelessSelectProps = ComponentProps<'div'> & { + label: string; + values: Array>; + as?: LinkLike; +}; + +const StatelessSelect: FC> = ({ + values = [], + className, + as: As = 'a', + 'aria-label': ariaLabel, + children, + ...props +}) => ( +
+
+ + {children} + +
+
+ {values.map((value, index) => { + if (value.href) { + return ( + )} + /> + ); + } else { + return ( +
)} + /> + ); + } + })} +
+
+
+
+); + +export default StatelessSelect; From 9d234d6754f014ae4578d34ed0cb023ba3a84a1d Mon Sep 17 00:00:00 2001 From: avivkeller Date: Fri, 27 Jun 2025 17:31:56 -0400 Subject: [PATCH 2/5] -> dropdown --- .../Common/{StatelessSelect => Dropdown}/index.module.css | 0 .../{StatelessSelect => Dropdown}/index.stories.tsx | 8 ++++---- .../Common/{StatelessSelect => Dropdown}/index.tsx | 6 +++--- 3 files changed, 7 insertions(+), 7 deletions(-) rename packages/ui-components/Common/{StatelessSelect => Dropdown}/index.module.css (100%) rename packages/ui-components/Common/{StatelessSelect => Dropdown}/index.stories.tsx (78%) rename packages/ui-components/Common/{StatelessSelect => Dropdown}/index.tsx (90%) diff --git a/packages/ui-components/Common/StatelessSelect/index.module.css b/packages/ui-components/Common/Dropdown/index.module.css similarity index 100% rename from packages/ui-components/Common/StatelessSelect/index.module.css rename to packages/ui-components/Common/Dropdown/index.module.css diff --git a/packages/ui-components/Common/StatelessSelect/index.stories.tsx b/packages/ui-components/Common/Dropdown/index.stories.tsx similarity index 78% rename from packages/ui-components/Common/StatelessSelect/index.stories.tsx rename to packages/ui-components/Common/Dropdown/index.stories.tsx index ca3c4f2dd3827..1d2616fcadc5c 100644 --- a/packages/ui-components/Common/StatelessSelect/index.stories.tsx +++ b/packages/ui-components/Common/Dropdown/index.stories.tsx @@ -1,9 +1,9 @@ import type { Meta as MetaObj, StoryObj } from '@storybook/react'; -import StatelessSelect from '.'; +import Dropdown from '.'; -type Story = StoryObj; -type Meta = MetaObj; +type Story = StoryObj; +type Meta = MetaObj; // Basic example with default anchor links export const Default: Story = { @@ -19,7 +19,7 @@ export const Default: Story = { }; export default { - component: StatelessSelect, + component: Dropdown, decorators: [ Story => (
diff --git a/packages/ui-components/Common/StatelessSelect/index.tsx b/packages/ui-components/Common/Dropdown/index.tsx similarity index 90% rename from packages/ui-components/Common/StatelessSelect/index.tsx rename to packages/ui-components/Common/Dropdown/index.tsx index 7af2fd9fa0f71..e19953ee1ab1c 100644 --- a/packages/ui-components/Common/StatelessSelect/index.tsx +++ b/packages/ui-components/Common/Dropdown/index.tsx @@ -5,13 +5,13 @@ import type { LinkLike } from '#ui/types.js'; import styles from './index.module.css'; -type StatelessSelectProps = ComponentProps<'div'> & { +type DropdownProps = ComponentProps<'div'> & { label: string; values: Array>; as?: LinkLike; }; -const StatelessSelect: FC> = ({ +const Dropdown: FC> = ({ values = [], className, as: As = 'a', @@ -59,4 +59,4 @@ const StatelessSelect: FC> = ({
); -export default StatelessSelect; +export default Dropdown; From 82ebb0c589c3bd3faaff0eb8ab4bc1a36c1bfd43 Mon Sep 17 00:00:00 2001 From: avivkeller Date: Fri, 27 Jun 2025 17:53:31 -0400 Subject: [PATCH 3/5] use dropdown for lang --- apps/site/components/withNavBar.tsx | 2 +- .../Common/Dropdown/index.stories.tsx | 1 - .../ui-components/Common/Dropdown/index.tsx | 5 +- .../Common/LanguageDropDown/index.module.css | 51 ++----------------- .../Common/LanguageDropDown/index.tsx | 49 +++++++----------- 5 files changed, 25 insertions(+), 83 deletions(-) diff --git a/apps/site/components/withNavBar.tsx b/apps/site/components/withNavBar.tsx index 4d575157cc276..7dede0a06aacf 100644 --- a/apps/site/components/withNavBar.tsx +++ b/apps/site/components/withNavBar.tsx @@ -70,7 +70,7 @@ const WithNavBar: FC = () => { onChange={changeLanguage} availableLanguages={availableLocales} currentLanguage={locale} - ariaLabel={t('components.common.languageDropdown.label')} + aria-label={t('components.common.languageDropdown.label')} /> ; // Basic example with default anchor links export const Default: Story = { args: { - label: 'History', values: [ { href: '#item1', children: 'Item 1' }, { href: '#item2', children: 'Item 2' }, diff --git a/packages/ui-components/Common/Dropdown/index.tsx b/packages/ui-components/Common/Dropdown/index.tsx index e19953ee1ab1c..50f1639a8562c 100644 --- a/packages/ui-components/Common/Dropdown/index.tsx +++ b/packages/ui-components/Common/Dropdown/index.tsx @@ -6,7 +6,6 @@ import type { LinkLike } from '#ui/types.js'; import styles from './index.module.css'; type DropdownProps = ComponentProps<'div'> & { - label: string; values: Array>; as?: LinkLike; }; @@ -35,20 +34,20 @@ const Dropdown: FC> = ({ return ( )} + className={classNames(styles.dropdownItem, value.className)} /> ); } else { return (
)} + className={classNames(styles.dropdownItem, value.className)} /> ); } diff --git a/packages/ui-components/Common/LanguageDropDown/index.module.css b/packages/ui-components/Common/LanguageDropDown/index.module.css index 1d96a9417b943..5a6146ac75411 100644 --- a/packages/ui-components/Common/LanguageDropDown/index.module.css +++ b/packages/ui-components/Common/LanguageDropDown/index.module.css @@ -1,53 +1,12 @@ @reference "../../styles/index.css"; .languageDropdown { - @apply h-9 - w-9 - rounded-md - p-2 - text-neutral-700 - motion-safe:transition-colors - dark:text-neutral-300; - - &:hover { - @apply bg-neutral-100 - dark:bg-neutral-900; + summary { + @apply border-0; } -} -.dropDownContent { - @apply max-h-80 - w-48 - overflow-hidden - rounded-sm - border - border-neutral-200 - bg-white - shadow-lg - dark:border-neutral-900 - dark:bg-neutral-950; - - > div { - @apply max-h-80 - w-48 - overflow-y-auto; + .selected { + @apply bg-green-600 + text-white; } } - -.dropDownItem { - @apply outline-hidden - cursor-pointer - px-2.5 - py-1.5 - text-sm - font-medium - text-neutral-800 - data-[highlighted]:bg-green-600 - data-[highlighted]:text-white - dark:text-white; -} - -.currentDropDown { - @apply bg-green-600 - text-white; -} diff --git a/packages/ui-components/Common/LanguageDropDown/index.tsx b/packages/ui-components/Common/LanguageDropDown/index.tsx index e55178333f431..bef785da5b90d 100644 --- a/packages/ui-components/Common/LanguageDropDown/index.tsx +++ b/packages/ui-components/Common/LanguageDropDown/index.tsx @@ -1,8 +1,8 @@ import { LanguageIcon } from '@heroicons/react/24/outline'; -import * as DropdownMenu from '@radix-ui/react-dropdown-menu'; import classNames from 'classnames'; import type { FC } from 'react'; +import Dropdown from '#ui/Common/Dropdown'; import type { SimpleLocaleConfig } from '#ui/types'; import styles from './index.module.css'; @@ -11,45 +11,30 @@ type LanguageDropDownProps = { onChange?: (newLocale: SimpleLocaleConfig) => void; currentLanguage: string; availableLanguages: Array; - ariaLabel: string; }; const LanguageDropdown: FC = ({ onChange = () => {}, currentLanguage, availableLanguages, - ariaLabel, + ...props }) => { return ( - - - - - - - -
- {availableLanguages.map(({ name, code, localName }) => ( - onChange({ name, code, localName })} - className={classNames(styles.dropDownItem, { - [styles.currentDropDown]: code === currentLanguage, - })} - > - {localName} - - ))} -
- - - + ({ + onClick: () => onChange({ name, code, localName }), + children: localName, + key: code, + className: classNames({ + 'cursor-pointer': true, + [styles.selected]: currentLanguage === code, + }), + }))} + className={styles.languageDropdown} + {...props} + > + + ); }; From 33d111ffbb92aab323292a9a4aeb90ee0b275f4b Mon Sep 17 00:00:00 2001 From: avivkeller Date: Fri, 27 Jun 2025 17:54:39 -0400 Subject: [PATCH 4/5] remove radix dep --- apps/site/next.config.mjs | 1 - packages/ui-components/package.json | 1 - pnpm-lock.yaml | 68 ----------------------------- 3 files changed, 70 deletions(-) diff --git a/apps/site/next.config.mjs b/apps/site/next.config.mjs index 14bb7afa4d3db..59d9794897514 100644 --- a/apps/site/next.config.mjs +++ b/apps/site/next.config.mjs @@ -81,7 +81,6 @@ const nextConfig = { // @see https://vercel.com/blog/how-we-optimized-package-imports-in-next-js optimizePackageImports: [ '@radix-ui/react-accessible-icon', - '@radix-ui/react-dropdown-menu', '@radix-ui/react-label', '@radix-ui/react-select', '@radix-ui/react-slot', diff --git a/packages/ui-components/package.json b/packages/ui-components/package.json index 5df2ec63c09d5..e1269f493dc05 100644 --- a/packages/ui-components/package.json +++ b/packages/ui-components/package.json @@ -35,7 +35,6 @@ "@heroicons/react": "^2.2.0", "@radix-ui/react-avatar": "^1.1.10", "@radix-ui/react-dialog": "^1.1.14", - "@radix-ui/react-dropdown-menu": "~2.1.15", "@radix-ui/react-label": "~2.1.7", "@radix-ui/react-select": "~2.2.5", "@radix-ui/react-separator": "~1.1.7", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index eb25eaa266a09..c294bd5e23753 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -337,9 +337,6 @@ importers: '@radix-ui/react-dialog': specifier: ^1.1.14 version: 1.1.14(@types/react@19.1.6)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) - '@radix-ui/react-dropdown-menu': - specifier: ~2.1.15 - version: 2.1.15(@types/react@19.1.6)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) '@radix-ui/react-label': specifier: ~2.1.7 version: 2.1.7(@types/react@19.1.6)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) @@ -2175,19 +2172,6 @@ packages: '@types/react-dom': optional: true - '@radix-ui/react-dropdown-menu@2.1.15': - resolution: {integrity: sha512-mIBnOjgwo9AH3FyKaSWoSu/dYj6VdhJ7frEPiGTeXCdUFHjl9h3mFh2wwhEtINOmYXWhdpf1rY2minFsmaNgVQ==} - peerDependencies: - '@types/react': '*' - '@types/react-dom': '*' - react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - peerDependenciesMeta: - '@types/react': - optional: true - '@types/react-dom': - optional: true - '@radix-ui/react-focus-guards@1.1.2': resolution: {integrity: sha512-fyjAACV62oPV925xFCrH8DR5xWhg9KYtJT4s3u54jxp+L/hbpTY2kIeEFFbFe+a/HCE94zGQMZLIpVTPVZDhaA==} peerDependencies: @@ -2232,19 +2216,6 @@ packages: '@types/react-dom': optional: true - '@radix-ui/react-menu@2.1.15': - resolution: {integrity: sha512-tVlmA3Vb9n8SZSd+YSbuFR66l87Wiy4du+YE+0hzKQEANA+7cWKH1WgqcEX4pXqxUFQKrWQGHdvEfw00TjFiew==} - peerDependencies: - '@types/react': '*' - '@types/react-dom': '*' - react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc - peerDependenciesMeta: - '@types/react': - optional: true - '@types/react-dom': - optional: true - '@radix-ui/react-popper@1.2.7': resolution: {integrity: sha512-IUFAccz1JyKcf/RjB552PlWwxjeCJB8/4KxT7EhBHOJM+mN7LdW+B3kacJXILm32xawcMMjb2i0cIZpo+f9kiQ==} peerDependencies: @@ -10116,20 +10087,6 @@ snapshots: optionalDependencies: '@types/react': 19.1.6 - '@radix-ui/react-dropdown-menu@2.1.15(@types/react@19.1.6)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)': - dependencies: - '@radix-ui/primitive': 1.1.2 - '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.6)(react@19.1.0) - '@radix-ui/react-context': 1.1.2(@types/react@19.1.6)(react@19.1.0) - '@radix-ui/react-id': 1.1.1(@types/react@19.1.6)(react@19.1.0) - '@radix-ui/react-menu': 2.1.15(@types/react@19.1.6)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) - '@radix-ui/react-primitive': 2.1.3(@types/react@19.1.6)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) - '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.1.6)(react@19.1.0) - react: 19.1.0 - react-dom: 19.1.0(react@19.1.0) - optionalDependencies: - '@types/react': 19.1.6 - '@radix-ui/react-focus-guards@1.1.2(@types/react@19.1.6)(react@19.1.0)': dependencies: react: 19.1.0 @@ -10161,31 +10118,6 @@ snapshots: optionalDependencies: '@types/react': 19.1.6 - '@radix-ui/react-menu@2.1.15(@types/react@19.1.6)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)': - dependencies: - '@radix-ui/primitive': 1.1.2 - '@radix-ui/react-collection': 1.1.7(@types/react@19.1.6)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) - '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.1.6)(react@19.1.0) - '@radix-ui/react-context': 1.1.2(@types/react@19.1.6)(react@19.1.0) - '@radix-ui/react-direction': 1.1.1(@types/react@19.1.6)(react@19.1.0) - '@radix-ui/react-dismissable-layer': 1.1.10(@types/react@19.1.6)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) - '@radix-ui/react-focus-guards': 1.1.2(@types/react@19.1.6)(react@19.1.0) - '@radix-ui/react-focus-scope': 1.1.7(@types/react@19.1.6)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) - '@radix-ui/react-id': 1.1.1(@types/react@19.1.6)(react@19.1.0) - '@radix-ui/react-popper': 1.2.7(@types/react@19.1.6)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) - '@radix-ui/react-portal': 1.1.9(@types/react@19.1.6)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) - '@radix-ui/react-presence': 1.1.4(@types/react@19.1.6)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) - '@radix-ui/react-primitive': 2.1.3(@types/react@19.1.6)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) - '@radix-ui/react-roving-focus': 1.1.10(@types/react@19.1.6)(react-dom@19.1.0(react@19.1.0))(react@19.1.0) - '@radix-ui/react-slot': 1.2.3(@types/react@19.1.6)(react@19.1.0) - '@radix-ui/react-use-callback-ref': 1.1.1(@types/react@19.1.6)(react@19.1.0) - aria-hidden: 1.2.6 - react: 19.1.0 - react-dom: 19.1.0(react@19.1.0) - react-remove-scroll: 2.7.1(@types/react@19.1.6)(react@19.1.0) - optionalDependencies: - '@types/react': 19.1.6 - '@radix-ui/react-popper@1.2.7(@types/react@19.1.6)(react-dom@19.1.0(react@19.1.0))(react@19.1.0)': dependencies: '@floating-ui/react-dom': 2.1.3(react-dom@19.1.0(react@19.1.0))(react@19.1.0) From d4c341cb69386add8749c10854244fea8697a7a4 Mon Sep 17 00:00:00 2001 From: avivkeller Date: Fri, 27 Jun 2025 18:14:11 -0400 Subject: [PATCH 5/5] fix playwright --- apps/site/tests/e2e/general-behavior.spec.ts | 18 +----------------- 1 file changed, 1 insertion(+), 17 deletions(-) diff --git a/apps/site/tests/e2e/general-behavior.spec.ts b/apps/site/tests/e2e/general-behavior.spec.ts index 78d455b81e411..6bdb500dbae08 100644 --- a/apps/site/tests/e2e/general-behavior.spec.ts +++ b/apps/site/tests/e2e/general-behavior.spec.ts @@ -12,7 +12,6 @@ const locators = { englishLocale.components.containers.navBar.controls.toggle, navLinksLocator: `[aria-label="${englishLocale.components.containers.navBar.controls.toggle}"] + div`, // Global UI controls - languageDropdownName: englishLocale.components.common.languageDropdown.label, themeToggleName: englishLocale.components.common.themeToggle.label, // Search components (from Orama library) @@ -24,17 +23,6 @@ const locators = { const getTheme = (page: Page) => page.evaluate(() => document.documentElement.dataset.theme); -const openLanguageMenu = async (page: Page) => { - const button = page.getByRole('button', { - name: locators.languageDropdownName, - }); - const selector = `[aria-labelledby=${await button.getAttribute('id')}]`; - await button.click(); - - await page.waitForSelector(selector); - return page.locator(selector); -}; - const verifyTranslation = async (page: Page, locale: Locale | string) => { // Load locale data if string code provided (e.g., 'es', 'fr') const localeData = @@ -105,11 +93,7 @@ test.describe('Node.js Website', () => { }) => { await verifyTranslation(page, englishLocale); - // Change to Spanish and verify translations - const menu = await openLanguageMenu(page); - await menu.getByText(/español/i).click(); - await page.waitForURL(/\/es$/); - + await page.goto('/es'); await verifyTranslation(page, 'es'); }); });