meta: some component cleanups and design fixes (nodejs#6046)

* chore: simplified button

* refactor: language drop: use external props, onchange and style fixes

* chore: use formatmessage

* meta: normalised component imports

* fix: language dropdown duplicated entries

* meta: update to collab guide

COLLABORATOR_GUIDE.md

@@ -287,7 +287,7 @@ They also allow Developers to preview Components and be able to test them manual
 
 ```tsx
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
-import NameOfComponent from './index';
+import NameOfComponent from '@components/PathTo/YourComponent';
 
 type Story = StoryObj<typeof NameOfComponent>;
 type Meta = MetaObj<typeof NameOfComponent>;

components/Common/AvatarGroup/Avatar/index.stories.tsx

@@ -1,9 +1,8 @@
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
+import Avatar from '@/components/Common/AvatarGroup/Avatar';
 import { githubProfileAvatarUrl } from '@/util/gitHubUtils';
 
-import Avatar from './';
-
 type Story = StoryObj<typeof Avatar>;
 type Meta = MetaObj<typeof Avatar>;
 

components/Common/AvatarGroup/index.stories.tsx

@@ -1,9 +1,8 @@
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
+import AvatarGroup from '@/components/Common/AvatarGroup';
 import { githubProfileAvatarUrl } from '@/util/gitHubUtils';
 
-import AvatarGroup from './';
-
 type Story = StoryObj<typeof AvatarGroup>;
 type Meta = MetaObj<typeof AvatarGroup>;
 

components/Common/AvatarGroup/index.tsx

@@ -2,10 +2,10 @@ import classNames from 'classnames';
 import type { ComponentProps, FC } from 'react';
 import { useState, useMemo } from 'react';
 
+import Avatar from '@/components/Common/AvatarGroup/Avatar';
+import avatarstyles from '@/components/Common/AvatarGroup/Avatar/index.module.css';
 import { getAcronymFromString } from '@/util/stringUtils';
 
-import Avatar from './Avatar';
-import avatarstyles from './Avatar/index.module.css';
 import styles from './index.module.css';
 
 type AvatarGroupProps = {

components/Common/Badge/index.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
-import Badge from './index';
+import Badge from '@/components/Common/Badge';
 
 type Story = StoryObj<typeof Badge>;
 type Meta = MetaObj<typeof Badge>;

components/Common/Banner/index.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
-import Banner from './index';
+import Banner from '@/components/Common/Banner';
 
 type Story = StoryObj<typeof Banner>;
 type Meta = MetaObj<typeof Banner>;

components/Common/Blockquote/index.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
-import Blockquote from './index';
+import Blockquote from '@/components/Common/Blockquote';
 
 type Story = StoryObj<typeof Blockquote>;
 type Meta = MetaObj<typeof Blockquote>;

components/Common/Breadcrumbs/index.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
-import Breadcrumbs from './';
+import Breadcrumbs from '@/components/Common/Breadcrumbs';
 
 type Story = StoryObj<typeof Breadcrumbs>;
 type Meta = MetaObj<typeof Breadcrumbs>;

components/Common/Breadcrumbs/index.tsx

@@ -1,11 +1,11 @@
 import { type LinkProps } from 'next/link';
 import { useMemo, type FC } from 'react';
 
-import BreadcrumbHomeLink from './BreadcrumbHomeLink';
-import BreadcrumbItem from './BreadcrumbItem';
-import BreadcrumbLink from './BreadcrumbLink';
-import BreadcrumbRoot from './BreadcrumbRoot';
-import BreadcrumbTruncatedItem from './BreadcrumbTruncatedItem';
+import BreadcrumbHomeLink from '@/components/Common/Breadcrumbs/BreadcrumbHomeLink';
+import BreadcrumbItem from '@/components/Common/Breadcrumbs/BreadcrumbItem';
+import BreadcrumbLink from '@/components/Common/Breadcrumbs/BreadcrumbLink';
+import BreadcrumbRoot from '@/components/Common/Breadcrumbs/BreadcrumbRoot';
+import BreadcrumbTruncatedItem from '@/components/Common/Breadcrumbs/BreadcrumbTruncatedItem';
 
 type BreadcrumbLink = {
   label: string;

components/Common/Button/index.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
-import Button from './index';
+import Button from '@/components/Common/Button';
 
 type Story = StoryObj<typeof Button>;
 type Meta = MetaObj<typeof Button>;

components/Common/Button/index.tsx

@@ -12,14 +12,13 @@ const Button: FC<ButtonProps> = ({
   children,
   className,
   ...props
-}) => {
-  const buttonStyles = classNames(styles.button, styles[variant], className);
-
-  return (
-    <button className={buttonStyles} {...props}>
-      {children}
-    </button>
-  );
-};
+}) => (
+  <button
+    className={classNames(styles.button, styles[variant], className)}
+    {...props}
+  >
+    {children}
+  </button>
+);
 
 export default Button;

components/Common/CrossLink/index.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
-import CrossLink from './index';
+import CrossLink from '@/components/Common/CrossLink';
 
 type Story = StoryObj<typeof CrossLink>;
 type Meta = MetaObj<typeof CrossLink>;

components/Common/LanguageDropDown/index.module.css

@@ -1,9 +1,9 @@
 .iconWrapper {
   @apply h-9
     w-9
-    rounded-md 
-    bg-neutral-100 
-    p-2 
+    rounded-md
+    bg-neutral-100
+    p-2
     text-neutral-700
     dark:bg-neutral-900
     dark:text-neutral-300;
@@ -12,23 +12,27 @@
 .dropDownContent {
   @apply max-h-80
     w-48
-    overflow-y-scroll
+    overflow-hidden
     rounded
-    border 
-    border-neutral-200 
-    py-[1px]
+    border
+    border-neutral-200
     shadow-lg
     dark:border-neutral-900;
+
+  > div {
+    @apply max-h-80
+      w-48 overflow-y-auto;
+  }
 }
 
 .dropDownItem {
-  @apply cursor-default 
+  @apply cursor-pointer
     px-2.5
-    py-1.5 
-    text-sm 
+    py-1.5
+    text-sm
     font-medium
-    text-neutral-800 
-    outline-none 
+    text-neutral-800
+    outline-none
     data-[highlighted]:bg-green-600
     data-[highlighted]:text-white
     dark:text-white;

components/Common/LanguageDropDown/index.stories.tsx

@@ -1,10 +1,19 @@
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
-import LanguageDropDown from './index';
+import LanguageDropDown from '@/components/Common/LanguageDropDown';
 
 type Story = StoryObj<typeof LanguageDropDown>;
 type Meta = MetaObj<typeof LanguageDropDown>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  args: {
+    availableLanguages: [
+      { name: 'English', code: 'en' },
+      { name: 'French', code: 'fr' },
+      { name: 'Spanish', code: 'es' },
+    ],
+    currentLanguage: { name: 'English', code: 'en' },
+  },
+};
 
 export default { component: LanguageDropDown } as Meta;

components/Common/LanguageDropDown/index.tsx

@@ -4,21 +4,26 @@ import classNames from 'classnames';
 import type { FC } from 'react';
 import { useIntl } from 'react-intl';
 
-import { useLocale } from '@/hooks/useLocale';
+import type { LocaleConfig } from '@/types';
 
 import styles from './index.module.css';
 
-export type LanguageDropDownProps = {
-  onClick?: () => void;
+type SimpleLocaleConfig = Pick<LocaleConfig, 'name' | 'code'>;
+
+type LanguageDropDownProps = {
+  onChange?: (newLocale: SimpleLocaleConfig) => void;
+  currentLanguage: SimpleLocaleConfig;
+  availableLanguages: SimpleLocaleConfig[];
 };
 
 const LanguageDropdown: FC<LanguageDropDownProps> = ({
-  onClick = () => {},
+  onChange = () => {},
+  currentLanguage,
+  availableLanguages,
 }) => {
-  const { availableLocales, currentLocale } = useLocale();
-  const intl = useIntl();
+  const { formatMessage } = useIntl();
 
-  const ariaLabel = intl.formatMessage({
+  const ariaLabel = formatMessage({
     id: 'components.common.languageDropdown.label',
   });
 
@@ -36,17 +41,19 @@ const LanguageDropdown: FC<LanguageDropDownProps> = ({
           className={styles.dropDownContent}
           sideOffset={5}
         >
-          {availableLocales.map(({ name, code }) => (
-            <DropdownMenu.Item
-              key={code}
-              onClick={onClick}
-              className={classNames(styles.dropDownItem, {
-                [styles.currentDropDown]: code === currentLocale.code,
-              })}
-            >
-              {name}
-            </DropdownMenu.Item>
-          ))}
+          <div>
+            {availableLanguages.map(({ name, code }) => (
+              <DropdownMenu.Item
+                key={code}
+                onClick={() => onChange({ name, code })}
+                className={classNames(styles.dropDownItem, {
+                  [styles.currentDropDown]: code === currentLanguage.code,
+                })}
+              >
+                {name}
+              </DropdownMenu.Item>
+            ))}
+          </div>
         </DropdownMenu.Content>
       </DropdownMenu.Portal>
     </DropdownMenu.Root>

components/Common/MetaBar/index.stories.tsx

@@ -4,10 +4,9 @@ import Image from 'next/image';
 import { FormattedMessage } from 'react-intl';
 
 import AvatarGroup from '@/components/Common/AvatarGroup';
+import MetaBar from '@/components/Common/MetaBar';
 import LocalizedLink from '@/components/LocalizedLink';
 
-import MetaBar from './index';
-
 type Story = StoryObj<typeof MetaBar>;
 type Meta = MetaObj<typeof MetaBar>;
 

components/Common/Notification/index.stories.tsx

@@ -2,7 +2,7 @@ import { CodeBracketIcon } from '@heroicons/react/24/solid';
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 import { FormattedMessage } from 'react-intl';
 
-import Notification from './index';
+import Notification from '@/components/Common/Notification';
 
 type Story = StoryObj<typeof Notification>;
 type Meta = MetaObj<typeof Notification>;

components/Common/Pagination/PaginationListItem/index.tsx

@@ -19,13 +19,13 @@ const PaginationListItem: FC<PaginationListItemProps> = ({
   currentPage,
   totalPages,
 }) => {
-  const intl = useIntl();
+  const { formatMessage } = useIntl();
 
   return (
     <li key={pageNumber} aria-setsize={totalPages} aria-posinset={pageNumber}>
       <LocalizedLink
         href={url}
-        aria-label={intl.formatMessage(
+        aria-label={formatMessage(
           { id: 'components.common.pagination.pageLabel' },
           { pageNumber }
         )}

components/Common/Pagination/index.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
-import Pagination from './index';
+import Pagination from '@/components/Common/Pagination';
 
 type Story = StoryObj<typeof Pagination>;
 type Meta = MetaObj<typeof Pagination>;

components/Common/Pagination/index.tsx

@@ -9,7 +9,7 @@ import styles from './index.module.css';
 
 type Page = { url: string };
 
-export type PaginationProps = {
+type PaginationProps = {
   // One-based number of the current page
   currentPage: number;
   pages: Page[];
@@ -23,7 +23,7 @@ const Pagination: FC<PaginationProps> = ({
   pages,
   currentPageSiblingsCount = 1,
 }) => {
-  const intl = useIntl();
+  const { formatMessage } = useIntl();
 
   const parsedPages = useGetPageElements(
     currentPage,
@@ -33,14 +33,14 @@ const Pagination: FC<PaginationProps> = ({
 
   return (
     <nav
-      aria-label={intl.formatMessage({
+      aria-label={formatMessage({
         id: 'components.common.pagination.defaultLabel',
       })}
       className={styles.pagination}
     >
       <Button
         type="button"
-        aria-label={intl.formatMessage({
+        aria-label={formatMessage({
           id: 'components.common.pagination.prevAriaLabel',
         })}
         disabled={currentPage === 1}
@@ -56,7 +56,7 @@ const Pagination: FC<PaginationProps> = ({
       <ol className={styles.list}>{parsedPages}</ol>
       <Button
         type="button"
-        aria-label={intl.formatMessage({
+        aria-label={formatMessage({
           id: 'components.common.pagination.nextAriaLabel',
         })}
         disabled={currentPage === pages.length}