refactor: review updates

Author: canerakdas

apps/site/components/Downloads/Release/VersionDropdown.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import Select from '@node-core/ui-components/Common/Select';
+import WithNoScriptSelect from '@node-core/ui-components/Common/Select/NoScriptSelect';
 import { useLocale, useTranslations } from 'next-intl';
 import type { FC } from 'react';
 import { useContext } from 'react';
@@ -51,7 +51,7 @@ const VersionDropdown: FC = () => {
   };
 
   return (
-    <Select
+    <WithNoScriptSelect
       ariaLabel={t('layouts.download.dropdown.version')}
       values={releases.map(({ status, versionWithPrefix }) => ({
         value: versionWithPrefix,

packages/ui-components/src/Common/Select/NoScriptSelect/index.tsx

@@ -0,0 +1,25 @@
+import { useId } from 'react';
+
+import Select from '#ui/Common/Select';
+import type { StatelessSelectProps } from '#ui/Common/Select/StatelessSelect';
+import StatelessSelect from '#ui/Common/Select/StatelessSelect';
+
+const WithNoScriptSelect = <T extends string>({
+  as,
+  ...props
+}: StatelessSelectProps<T>) => {
+  const id = useId();
+  const selectId = `select-${id.replace(/[^a-zA-Z0-9]/g, '')}`;
+
+  return (
+    <>
+      <Select {...props} fallbackClass={selectId} />
+      <noscript>
+        <style>{`.${selectId} { display: none!important; }`}</style>
+        <StatelessSelect {...props} as={as} />
+      </noscript>
+    </>
+  );
+};
+
+export default WithNoScriptSelect;

packages/ui-components/src/Common/Select/StatelessSelect/index.tsx

@@ -3,17 +3,18 @@ import classNames from 'classnames';
 import { useId, useMemo } from 'react';
 
 import type { SelectGroup, SelectProps } from '#ui/Common/Select';
-import { isStringArray, isValuesArray } from '#ui/Common/Select';
+import type { LinkLike } from '#ui/types';
+import { isStringArray, isValuesArray } from '#ui/util/array';
 
 import styles from '../index.module.css';
 
-export type StatelessSelectProps<T extends string> = Omit<
-  SelectProps<T>,
-  'onChange' | 'loading'
-> & {
-  targetElement: string;
+type StatelessSelectConfig = {
+  as?: LinkLike | 'div';
 };
 
+export type StatelessSelectProps<T extends string> = SelectProps<T> &
+  StatelessSelectConfig;
+
 const StatelessSelect = <T extends string>({
   values = [],
   defaultValue,
@@ -24,7 +25,6 @@ const StatelessSelect = <T extends string>({
   ariaLabel,
   disabled = false,
   as: Component = 'div',
-  targetElement,
 }: StatelessSelectProps<T>) => {
   const id = useId();
 
@@ -43,7 +43,7 @@ const StatelessSelect = <T extends string>({
     }
 
     return mappedValues as Array<SelectGroup<T>>;
-  }, [values]);
+  }, [values]) as Array<SelectGroup<T>>;
 
   // Find the current/default item to display in summary
   const currentItem = useMemo(
@@ -55,75 +55,72 @@ const StatelessSelect = <T extends string>({
   );
 
   return (
-    <noscript>
-      <style>{`.${targetElement} { display: none!important; }`}</style>
-      <div
-        className={classNames(
-          styles.select,
-          styles.noscript,
-          { [styles.inline]: inline },
-          className
-        )}
-      >
-        {label && (
-          <label className={styles.label} htmlFor={id}>
-            {label}
-          </label>
-        )}
+    <div
+      className={classNames(
+        styles.select,
+        styles.noscript,
+        { [styles.inline]: inline },
+        className
+      )}
+    >
+      {label && (
+        <label className={styles.label} htmlFor={id}>
+          {label}
+        </label>
+      )}
 
-        <details className={styles.trigger} id={id}>
-          <summary
-            className={styles.summary}
-            aria-label={ariaLabel}
-            aria-disabled={disabled}
-          >
-            {currentItem ? (
-              <span className={styles.selectedValue}>
-                {currentItem.iconImage}
-                <span>{currentItem.label}</span>
-              </span>
-            ) : (
-              <span className={styles.placeholder}>{placeholder}</span>
-            )}
-            <ChevronDownIcon className={styles.icon} />
-          </summary>
+      <details className={styles.trigger} id={id}>
+        <summary
+          className={styles.summary}
+          aria-label={ariaLabel}
+          aria-disabled={disabled}
+        >
+          {currentItem ? (
+            <span className={styles.selectedValue}>
+              {currentItem.iconImage}
+              <span>{currentItem.label}</span>
+            </span>
+          ) : (
+            <span className={styles.placeholder}>{placeholder}</span>
+          )}
+          <ChevronDownIcon className={styles.icon} />
+        </summary>
 
-          <div
-            className={classNames(styles.dropdown, { [styles.inline]: inline })}
-          >
-            {mappedValues.map(({ label: groupLabel, items }, groupKey) => (
-              <div
-                key={groupLabel?.toString() ?? groupKey}
-                className={styles.group}
-              >
-                {groupLabel && (
-                  <div className={classNames(styles.item, styles.label)}>
-                    {groupLabel}
-                  </div>
-                )}
+        <div
+          className={classNames(styles.dropdown, { [styles.inline]: inline })}
+        >
+          {mappedValues.map(({ label: groupLabel, items }, groupKey) => (
+            <div
+              key={groupLabel?.toString() ?? groupKey}
+              className={styles.group}
+            >
+              {groupLabel && (
+                <div className={classNames(styles.item, styles.label)}>
+                  {groupLabel}
+                </div>
+              )}
 
-                {items.map(
-                  ({ value, label, iconImage, disabled: itemDisabled }) => (
-                    <Component
-                      key={value}
-                      href={value}
-                      className={classNames(styles.item, styles.text, {
-                        [styles.disabled]: itemDisabled || disabled,
-                        [styles.selected]: value === defaultValue,
-                      })}
-                      aria-disabled={itemDisabled || disabled}
-                    >
-                      {iconImage}
-                      <span>{label}</span>
-                    </Component>
-                  )
-                )}
-              </div>
-            ))}
-          </div>
-        </details>
-      </div>
-    </noscript>
+              {items.map(
+                ({ value, label, iconImage, disabled: itemDisabled }) => (
+                  <Component
+                    key={value}
+                    href={value}
+                    className={classNames(styles.item, styles.text, {
+                      [styles.disabled]: itemDisabled || disabled,
+                      [styles.selected]: value === defaultValue,
+                    })}
+                    aria-disabled={itemDisabled || disabled}
+                  >
+                    {iconImage}
+                    <span>{label}</span>
+                  </Component>
+                )
+              )}
+            </div>
+          ))}
+        </div>
+      </details>
+    </div>
   );
 };
 

packages/ui-components/src/Common/Select/index.module.css

@@ -161,16 +161,22 @@
 }
 
 .noscript {
+  @apply relative;
+
   summary {
     @apply flex
       w-full
       justify-between;
   }
 
+  .trigger {
+    @apply block;
+  }
+
   .dropdown {
     @apply absolute
-      left-4
-      mt-6;
+      left-0
+      mt-4;
   }
 
   .text {

packages/ui-components/src/Common/Select/index.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
 import Select from '#ui/Common/Select';
+import StatelessSelect from '#ui/Common/Select/StatelessSelect';
 import * as OSIcons from '#ui/Icons/OperatingSystem';
 
 type Story = StoryObj<typeof Select>;
@@ -108,4 +109,13 @@ export const InlineSelect: Story = {
   },
 };
 
+export const WithNoScriptSelect: Story = {
+  render: () => (
+    <StatelessSelect
+      values={Array.from({ length: 100 }, (_, i) => `Item ${i}`)}
+      defaultValue="Item 50"
+    />
+  ),
+};
+
 export default { component: Select } as Meta;

packages/ui-components/src/Common/Select/index.tsx

@@ -6,9 +6,9 @@ import classNames from 'classnames';
 import { useEffect, useId, useMemo, useState } from 'react';
 import type { ReactElement, ReactNode } from 'react';
 
-import StatelessSelect from '#ui/Common/Select/StatelessSelect';
 import Skeleton from '#ui/Common/Skeleton';
 import type { FormattedMessage, LinkLike } from '#ui/types';
+import { isStringArray, isValuesArray } from '#ui/util/array';
 
 import styles from './index.module.css';
 
@@ -24,16 +24,6 @@ export type SelectGroup<T extends string> = {
   items: Array<SelectValue<T>>;
 };
 
-export const isStringArray = (
-  values: Array<unknown>
-): values is Array<string> =>
-  Boolean(values[0] && typeof values[0] === 'string');
-
-export const isValuesArray = <T extends string>(
-  values: Array<unknown>
-): values is Array<SelectValue<T>> =>
-  Boolean(values[0] && typeof values[0] === 'object' && 'value' in values[0]);
-
 export type SelectProps<T extends string> = {
   values: Array<SelectGroup<T>> | Array<T> | Array<SelectValue<T>>;
   defaultValue?: T;
@@ -45,6 +35,7 @@ export type SelectProps<T extends string> = {
   ariaLabel?: string;
   loading?: boolean;
   disabled?: boolean;
+  fallbackClass?: string;
   as?: LinkLike | 'div';
 };
 
@@ -59,10 +50,9 @@ const Select = <T extends string>({
   ariaLabel,
   loading = false,
   disabled = false,
-  as,
+  fallbackClass = '',
 }: SelectProps<T>): ReactNode => {
   const id = useId();
-  const uniqueSelectClass = `select-${id.replace(/[^a-zA-Z0-9]/g, '')}`;
   const [value, setValue] = useState(defaultValue);
 
   useEffect(() => setValue(defaultValue), [defaultValue]);
@@ -81,8 +71,8 @@ const Select = <T extends string>({
       return [{ items: mappedValues }];
     }
 
-    return mappedValues as Array<SelectGroup<T>>;
-  }, [values]);
+    return mappedValues;
+  }, [values]) as Array<SelectGroup<T>>;
 
   // We render the actual item slotted to fix/prevent the issue
   // of the tirgger flashing on the initial render
@@ -140,7 +130,7 @@ const Select = <T extends string>({
           styles.select,
           { [styles.inline]: inline },
           className,
-          uniqueSelectClass
+          fallbackClass
         )}
       >
         {label && (
@@ -190,18 +180,6 @@ const Select = <T extends string>({
           </SelectPrimitive.Portal>
         </SelectPrimitive.Root>
       </span>
-      <StatelessSelect
-        values={values}
-        defaultValue={defaultValue}
-        placeholder={placeholder}
-        label={label}
-        inline={inline}
-        className={className}
-        ariaLabel={ariaLabel}
-        disabled={disabled}
-        targetElement={uniqueSelectClass}
-        as={as}
-      />
     </Skeleton>
   );
 };

packages/ui-components/src/Containers/Sidebar/index.module.css

@@ -5,12 +5,12 @@
     w-full
     flex-col
     gap-8
-    overflow-auto
     border-r-0
     border-neutral-200
     bg-white
     px-4
     py-6
+    sm:overflow-auto
     sm:border-r
     md:max-w-xs
     lg:px-6

packages/ui-components/src/Containers/Sidebar/index.tsx

@@ -1,6 +1,6 @@
 import type { ComponentProps, FC, PropsWithChildren } from 'react';
 
-import Select from '#ui/Common/Select';
+import WithNoScriptSelect from '#ui/Common/Select/NoScriptSelect';
 import SidebarGroup from '#ui/Containers/Sidebar/SidebarGroup';
 import type { LinkLike } from '#ui/types';
 
@@ -42,7 +42,7 @@ const SideBar: FC<PropsWithChildren<SidebarProps>> = ({
       {children}
 
       {selectItems.length > 0 && (
-        <Select
+        <WithNoScriptSelect
           label={title}
           values={selectItems}
           defaultValue={currentItem?.value}

packages/ui-components/src/util/array.ts

@@ -0,0 +1,7 @@
+export const isStringArray = (
+  values: Array<unknown>
+): values is Array<string> =>
+  Boolean(values[0] && typeof values[0] === 'string');
+
+export const isValuesArray = <T>(values: Array<unknown>): values is Array<T> =>
+  Boolean(values[0] && typeof values[0] === 'object' && 'value' in values[0]);