From e3f500c0b7fa6c0f73f4d33e4046ffb6e59823c7 Mon Sep 17 00:00:00 2001 From: Harkunwar Kochar <10580591+Harkunwar@users.noreply.github.com> Date: Sun, 15 Jun 2025 14:26:34 -0700 Subject: [PATCH 01/11] feat(ui-components): add change history component --- .../Common/ChangeHistory/index.module.css | 128 +++++++++++++++ .../Common/ChangeHistory/index.stories.tsx | 148 ++++++++++++++++++ .../Common/ChangeHistory/index.tsx | 80 ++++++++++ 3 files changed, 356 insertions(+) create mode 100644 packages/ui-components/Common/ChangeHistory/index.module.css create mode 100644 packages/ui-components/Common/ChangeHistory/index.stories.tsx create mode 100644 packages/ui-components/Common/ChangeHistory/index.tsx diff --git a/packages/ui-components/Common/ChangeHistory/index.module.css b/packages/ui-components/Common/ChangeHistory/index.module.css new file mode 100644 index 0000000000000..cb737befc5fde --- /dev/null +++ b/packages/ui-components/Common/ChangeHistory/index.module.css @@ -0,0 +1,128 @@ +@reference "../../styles/index.css"; + +.changeHistory { + @apply relative + inline-block; +} + +.summary { + @apply outline-hidden + flex + h-9 + cursor-pointer + select-none + items-center + gap-2 + rounded-md + border + border-neutral-200 + p-2 + text-sm + text-neutral-700 + motion-safe:transition-colors + dark:border-neutral-900 + dark:text-neutral-300; + + &:hover, + &:focus-visible { + @apply bg-neutral-100 + dark:bg-neutral-900; + } + + &.disabled { + @apply cursor-not-allowed + opacity-50; + + &:hover, + &:focus-visible { + @apply bg-transparent + dark:bg-transparent; + } + } +} + +.icon { + @apply h-4 + w-4; +} + +.chevron { + @apply h-3 + w-3 + group-open:rotate-180 + motion-safe:transition-transform; +} + +.dropdownContent { + @apply absolute + top-full + z-50 + mt-1 + max-h-80 + w-52 + overflow-hidden + rounded-sm + border + border-neutral-200 + bg-white + shadow-lg + dark:border-neutral-900 + dark:bg-neutral-950; +} + +.dropdownContent.alignLeft { + @apply left-0; +} + +.dropdownContent.alignRight { + @apply right-0; +} + +.dropdownContentInner { + @apply max-h-80 + w-52 + overflow-y-auto; +} + +.dropdownItem { + @apply outline-hidden + block + px-2.5 + py-1.5 + text-sm + font-medium + text-neutral-800 + no-underline + motion-safe:transition-colors + dark:text-white; + + &:hover, + &:focus-visible { + @apply bg-green-600 + text-white; + } +} + +.dropdownLabel { + @apply block + text-sm + font-medium + leading-tight; +} + +.dropdownVersions { + @apply block + text-xs + leading-tight + opacity-75; +} + +.emptyState { + @apply px-2.5 + py-1.5 + text-sm + font-medium + text-neutral-800 + opacity-75 + dark:text-white; +} diff --git a/packages/ui-components/Common/ChangeHistory/index.stories.tsx b/packages/ui-components/Common/ChangeHistory/index.stories.tsx new file mode 100644 index 0000000000000..236119deb82f4 --- /dev/null +++ b/packages/ui-components/Common/ChangeHistory/index.stories.tsx @@ -0,0 +1,148 @@ +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 NoChanges: Story = { + render: args => ( +
+ +
+ ), + args: { + changes: [], + }, +}; + +export const LeftAligned: Story = { + args: { + align: 'left', + 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 new file mode 100644 index 0000000000000..7ac2038d2caf8 --- /dev/null +++ b/packages/ui-components/Common/ChangeHistory/index.tsx @@ -0,0 +1,80 @@ +import { ChevronDownIcon, ClockIcon } from '@heroicons/react/24/outline'; +import type { FC } from 'react'; + +import styles from './index.module.css'; + +type ChangeHistoryProps = React.JSX.IntrinsicElements['div'] & { + label: string; + changes: Array<{ + versions: Array; + label: string; + url?: string; + }>; + align?: 'left' | 'right'; +}; + +const ChangeHistory: FC = ({ + label = 'History', + changes = [], + align = 'right', + className, + 'aria-label': ariaLabel = label, + ...props +}) => ( +
+ {changes.length > 0 ? ( +
+ + +
+
+ {changes.map((change, index) => { + const content = ( + <> +
{change.label}
+
+ {change.versions.join(', ')} +
+ + ); + + return ( + + {content} + + ); + })} +
+
+
+ ) : ( +
+
+ )} +
+); + +export default ChangeHistory; From fb29316e41f56129b55d254637025e29fda26b04 Mon Sep 17 00:00:00 2001 From: Harkunwar Kochar <10580591+Harkunwar@users.noreply.github.com> Date: Sun, 15 Jun 2025 14:36:20 -0700 Subject: [PATCH 02/11] feat(ui-components): address copilot --- .../Common/ChangeHistory/index.tsx | 21 +++++++++++-------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/packages/ui-components/Common/ChangeHistory/index.tsx b/packages/ui-components/Common/ChangeHistory/index.tsx index 7ac2038d2caf8..dd0e352440f2b 100644 --- a/packages/ui-components/Common/ChangeHistory/index.tsx +++ b/packages/ui-components/Common/ChangeHistory/index.tsx @@ -47,17 +47,20 @@ const ChangeHistory: FC = ({ ); - return ( - + const itemProps = { + key: index, + className: styles.dropdownItem, + role: 'menuitem', + tabIndex: 0, + ['aria-label']: `${change.label}: ${change.versions.join(', ')}`, + }; + + return change.url ? ( + {content} + ) : ( +
{content}
); })} From 7436a59d201df6f73f2e4df79f480f36e39f1c98 Mon Sep 17 00:00:00 2001 From: Harkunwar Kochar <10580591+Harkunwar@users.noreply.github.com> Date: Sun, 15 Jun 2025 14:42:41 -0700 Subject: [PATCH 03/11] feat(ui-components): address other copilot stuff --- packages/ui-components/Common/ChangeHistory/index.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/ui-components/Common/ChangeHistory/index.tsx b/packages/ui-components/Common/ChangeHistory/index.tsx index dd0e352440f2b..6163b59160b99 100644 --- a/packages/ui-components/Common/ChangeHistory/index.tsx +++ b/packages/ui-components/Common/ChangeHistory/index.tsx @@ -17,7 +17,7 @@ const ChangeHistory: FC = ({ label = 'History', changes = [], align = 'right', - className, + className = '', 'aria-label': ariaLabel = label, ...props }) => ( @@ -37,7 +37,7 @@ const ChangeHistory: FC = ({ aria-label={ariaLabel} >
- {changes.map((change, index) => { + {changes.map(change => { const content = ( <>
{change.label}
@@ -47,12 +47,14 @@ const ChangeHistory: FC = ({ ); + const ariaLabel = `${change.label}: ${change.versions.join(', ')}`; + const itemProps = { - key: index, + key: ariaLabel, className: styles.dropdownItem, role: 'menuitem', tabIndex: 0, - ['aria-label']: `${change.label}: ${change.versions.join(', ')}`, + ['aria-label']: ariaLabel, }; return change.url ? ( From 19fb6368ea881debeefaf8c5ac87e307ebdce896 Mon Sep 17 00:00:00 2001 From: Harkunwar Kochar <10580591+Harkunwar@users.noreply.github.com> Date: Sun, 15 Jun 2025 14:45:42 -0700 Subject: [PATCH 04/11] feat(ui-components): address other copilot stuff --- .../Common/ChangeHistory/index.module.css | 10 ---------- packages/ui-components/Common/ChangeHistory/index.tsx | 8 ++++---- 2 files changed, 4 insertions(+), 14 deletions(-) diff --git a/packages/ui-components/Common/ChangeHistory/index.module.css b/packages/ui-components/Common/ChangeHistory/index.module.css index cb737befc5fde..44e02f5ede654 100644 --- a/packages/ui-components/Common/ChangeHistory/index.module.css +++ b/packages/ui-components/Common/ChangeHistory/index.module.css @@ -116,13 +116,3 @@ leading-tight opacity-75; } - -.emptyState { - @apply px-2.5 - py-1.5 - text-sm - font-medium - text-neutral-800 - opacity-75 - dark:text-white; -} diff --git a/packages/ui-components/Common/ChangeHistory/index.tsx b/packages/ui-components/Common/ChangeHistory/index.tsx index 6163b59160b99..8851f3afcc8f7 100644 --- a/packages/ui-components/Common/ChangeHistory/index.tsx +++ b/packages/ui-components/Common/ChangeHistory/index.tsx @@ -24,10 +24,10 @@ const ChangeHistory: FC = ({
{changes.length > 0 ? (
- -