chore: move all components into Components dir with pascal case (#934)

app/assets/javascripts/components/Menu/Menu.tsx

@@ -0,0 +1,117 @@
+import {
+  JSX,
+  FunctionComponent,
+  ComponentChildren,
+  VNode,
+  RefCallback,
+  ComponentChild,
+} from 'preact';
+import { useEffect, useRef } from 'preact/hooks';
+import { JSXInternal } from 'preact/src/jsx';
+import { MenuItem, MenuItemListElement } from './MenuItem';
+import { KeyboardKey } from '@/services/ioService';
+import { useListKeyboardNavigation } from '../utils';
+
+type MenuProps = {
+  className?: string;
+  style?: string | JSX.CSSProperties | undefined;
+  a11yLabel: string;
+  children: ComponentChildren;
+  closeMenu?: () => void;
+  isOpen: boolean;
+};
+
+export const Menu: FunctionComponent<MenuProps> = ({
+  children,
+  className = '',
+  style,
+  a11yLabel,
+  closeMenu,
+  isOpen,
+}: MenuProps) => {
+  const menuItemRefs = useRef<(HTMLButtonElement | null)[]>([]);
+
+  const menuElementRef = useRef<HTMLMenuElement>(null);
+
+  const handleKeyDown: JSXInternal.KeyboardEventHandler<HTMLMenuElement> = (
+    event
+  ) => {
+    if (!menuItemRefs.current) {
+      return;
+    }
+
+    if (event.key === KeyboardKey.Escape) {
+      closeMenu?.();
+      return;
+    }
+  };
+
+  useListKeyboardNavigation(menuElementRef);
+
+  useEffect(() => {
+    if (isOpen && menuItemRefs.current.length > 0) {
+      setTimeout(() => {
+        menuElementRef.current?.focus();
+      });
+    }
+  }, [isOpen]);
+
+  const pushRefToArray: RefCallback<HTMLLIElement> = (instance) => {
+    if (instance && instance.children) {
+      Array.from(instance.children).forEach((child) => {
+        if (
+          child.getAttribute('role')?.includes('menuitem') &&
+          !menuItemRefs.current.includes(child as HTMLButtonElement)
+        ) {
+          menuItemRefs.current.push(child as HTMLButtonElement);
+        }
+      });
+    }
+  };
+
+  const mapMenuItems = (
+    child: ComponentChild,
+    index: number,
+    array: ComponentChild[]
+  ) => {
+    if (!child) return;
+
+    const _child = child as VNode<unknown>;
+    const isFirstMenuItem =
+      index ===
+      array.findIndex((child) => (child as VNode<unknown>).type === MenuItem);
+
+    const hasMultipleItems = Array.isArray(_child.props.children)
+      ? Array.from(_child.props.children as ComponentChild[]).some(
+          (child) => (child as VNode<unknown>).type === MenuItem
+        )
+      : false;
+
+    const items = hasMultipleItems
+      ? [...(_child.props.children as ComponentChild[])]
+      : [_child];
+
+    return items.map((child) => {
+      return (
+        <MenuItemListElement
+          isFirstMenuItem={isFirstMenuItem}
+          ref={pushRefToArray}
+        >
+          {child}
+        </MenuItemListElement>
+      );
+    });
+  };
+
+  return (
+    <menu
+      className={`m-0 p-0 list-style-none focus:shadow-none ${className}`}
+      onKeyDown={handleKeyDown}
+      ref={menuElementRef}
+      style={style}
+      aria-label={a11yLabel}
+    >
+      {Array.isArray(children) ? children.map(mapMenuItems) : null}
+    </menu>
+  );
+};

app/assets/javascripts/components/Menu/MenuItem.tsx

@@ -0,0 +1,124 @@
+import { ComponentChildren, FunctionComponent, VNode } from 'preact';
+import { forwardRef, Ref } from 'preact/compat';
+import { JSXInternal } from 'preact/src/jsx';
+import { Icon } from '../Icon';
+import { Switch, SwitchProps } from '../Switch';
+import { IconType } from '@standardnotes/snjs';
+import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/constants';
+
+export enum MenuItemType {
+  IconButton,
+  RadioButton,
+  SwitchButton,
+}
+
+type MenuItemProps = {
+  type: MenuItemType;
+  children: ComponentChildren;
+  onClick?: JSXInternal.MouseEventHandler<HTMLButtonElement>;
+  onChange?: SwitchProps['onChange'];
+  onBlur?: (event: { relatedTarget: EventTarget | null }) => void;
+  className?: string;
+  checked?: boolean;
+  icon?: IconType;
+  iconClassName?: string;
+  tabIndex?: number;
+};
+
+export const MenuItem: FunctionComponent<MenuItemProps> = forwardRef(
+  (
+    {
+      children,
+      onClick,
+      onChange,
+      onBlur,
+      className = '',
+      type,
+      checked,
+      icon,
+      iconClassName,
+      tabIndex,
+    }: MenuItemProps,
+    ref: Ref<HTMLButtonElement>
+  ) => {
+    return type === MenuItemType.SwitchButton &&
+      typeof onChange === 'function' ? (
+      <button
+        className="sn-dropdown-item focus:bg-info-backdrop focus:shadow-none justify-between"
+        onClick={() => {
+          onChange(!checked);
+        }}
+        onBlur={onBlur}
+        tabIndex={
+          typeof tabIndex === 'number' ? tabIndex : FOCUSABLE_BUT_NOT_TABBABLE
+        }
+        role="menuitemcheckbox"
+        aria-checked={checked}
+      >
+        <span className="flex flex-grow items-center">{children}</span>
+        <Switch className="px-0" checked={checked} />
+      </button>
+    ) : (
+      <button
+        ref={ref}
+        role={type === MenuItemType.RadioButton ? 'menuitemradio' : 'menuitem'}
+        tabIndex={
+          typeof tabIndex === 'number' ? tabIndex : FOCUSABLE_BUT_NOT_TABBABLE
+        }
+        className={`sn-dropdown-item focus:bg-info-backdrop focus:shadow-none ${className}`}
+        onClick={onClick}
+        onBlur={onBlur}
+        {...(type === MenuItemType.RadioButton
+          ? { 'aria-checked': checked }
+          : {})}
+      >
+        {type === MenuItemType.IconButton && icon ? (
+          <Icon type={icon} className={iconClassName} />
+        ) : null}
+        {type === MenuItemType.RadioButton && typeof checked === 'boolean' ? (
+          <div
+            className={`pseudo-radio-btn ${
+              checked ? 'pseudo-radio-btn--checked' : ''
+            } mr-2`}
+          ></div>
+        ) : null}
+        {children}
+      </button>
+    );
+  }
+);
+
+export const MenuItemSeparator: FunctionComponent = () => (
+  <div role="separator" className="h-1px my-2 bg-border"></div>
+);
+
+type ListElementProps = {
+  isFirstMenuItem: boolean;
+  children: ComponentChildren;
+};
+
+export const MenuItemListElement: FunctionComponent<ListElementProps> =
+  forwardRef(
+    (
+      { children, isFirstMenuItem }: ListElementProps,
+      ref: Ref<HTMLLIElement>
+    ) => {
+      const child = children as VNode<unknown>;
+
+      return (
+        <li className="list-style-none" role="none" ref={ref}>
+          {{
+            ...child,
+            props: {
+              ...(child.props ? { ...child.props } : {}),
+              ...(child.type === MenuItem
+                ? {
+                    tabIndex: isFirstMenuItem ? 0 : -1,
+                  }
+                : {}),
+            },
+          }}
+        </li>
+      );
+    }
+  );