feature/#507 Implement autoarrange collection

index.html

@@ -94,17 +94,19 @@
         padding-top: 0;
         padding-bottom: 4rem;
       }
-      .info__company {
+      h1 {
         display: flex;
-        align-items: center;
-        gap: 3%;
+        flex-direction: column;
       }
       .info__company img {
         width: 12%;
         height: 100%;
         margin-top: 4px;
       }
-      .info__company h2 {
+      .info__company {
+        display: flex;
+        align-items: center;
+        gap: 3%;
         font-size: clamp(55px, 9vw, 10rem);
         color: var(--accent);
         background-image: linear-gradient(69deg, #96d9ab 30%, #ffffff 75%);
@@ -127,11 +129,11 @@
         padding-top: 0.9rem;
         width: 50%;
       }
-      .info__text h3 {
+      .info__first {
         font-weight: 400;
         font-size: 30px;
       }
-      .info__text p {
+      .info__community {
         font-size: 24px;
         padding-top: 1.2rem;
         color: #fc5969;
@@ -149,6 +151,7 @@
         font-weight: 600;
         letter-spacing: 0.2px;
         font-size: 20px;
+        cursor: pointer;
       }
       .info__group {
         display: flex;
@@ -198,10 +201,10 @@
         .info__text {
           padding-top: 0;
         }
-        .info__text h3 {
+        .info__first {
           font-size: 26px;
         }
-        .info__text p {
+        .info__community {
           font-size: 20px;
         }
         .info__group {
@@ -284,10 +287,10 @@
           font-size: 18px;
         }
 
-        .info__text h3 {
+        .info__first {
           font-size: 22px;
         }
-        .info__text p {
+        .info__community {
           font-size: 19px;
         }
         .github p {
@@ -304,7 +307,7 @@
           width: 70px;
           margin-top: 0;
         }
-        .info__company h2 {
+        .info__company {
           line-height: 1.1;
         }
       }
@@ -339,25 +342,28 @@
       </a>
     </header>
     <main class="main">
-      <div class="info container">
-        <div class="info__company">
-          <img
-            src="/assets/logo_mongo_modeler_dark_mode.svg"
-            alt="Mongo Modeler Logo"
-          />
-          <h2 class="info__company">Mongo Modeler</h2>
-        </div>
-        <h1 class="info__claim">
-          A free, online Data Modeling tool for MongoDB.
+      <section class="info container">
+        <h1>
+          <span class="info__company">
+            <img
+              src="/assets/logo_mongo_modeler_dark_mode.svg"
+              alt="Mongo Modeler Logo"
+            />
+            Mongo Modeler</span
+          >
+          <span class="info__claim">
+            A free, online Data Modeling tool for MongoDB.
+          </span>
         </h1>
         <div class="info__detail">
           <div class="info__text">
-            <h3>
+            <p class="info__first">
               Mongo Modeler is a <span class="highlight">free</span>, open
               source <span class="highlight">tool</span> for visualization of
               <span class="highlight">MongoDB</span> schema design
-            </h3>
-            <p>Community preview</p>
+            </p>
+
+            <p class="info__community">Community preview</p>
             <div class="info__group">
               <a href="./editor.html" class="info__link"
                 >Launch MongoDB Designer</a
@@ -374,17 +380,17 @@ <h3>
             ></iframe>
           </div>
         </div>
-      </div>
-      <div class="github">
-        <p class="container">
-          Interested in suggesting a new feature or reporting a bug? Visit our
-          project's Github page to make your contribution.
-          <a href="https://github.com/Lemoncode/mongo-modeler" target="_blank"
-            >Go to Github</a
-          >
-        </p>
-      </div>
+      </section>
     </main>
+    <footer class="github">
+      <p class="container">
+        Interested in suggesting a new feature or reporting a bug? Visit our
+        project's Github page to make your contribution.
+        <a href="https://github.com/Lemoncode/mongo-modeler" target="_blank"
+          >Go to Github</a
+        >
+      </p>
+    </footer>
     <script>
       let installPrompt = null;
       const installButton = document.querySelector('#install');

src/common/a11y/click-outside.hook.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export const useClickOutside = (
+  isOpen: boolean,
+  ref: React.RefObject<HTMLElement>,
+  callback: (e: MouseEvent) => void
+) => {
+  const handleClickOutside = (e: MouseEvent) => {
+    callback(e);
+  };
+
+  React.useEffect(() => {
+    ref.current?.addEventListener('click', handleClickOutside);
+
+    return () => {
+      ref.current?.removeEventListener('click', handleClickOutside);
+    };
+  }, [isOpen]);
+};

src/common/a11y/common.model.ts

@@ -0,0 +1,15 @@
+export type BaseA11yOption<Option> = Option & {
+  tabIndex: number;
+};
+
+export type NestedOption<Option> = {
+  id: string;
+  children?: Option[];
+};
+
+export type FlatOption<Option extends NestedOption<Option>> = Omit<
+  Option,
+  'children'
+> & {
+  parentId?: string;
+};

src/common/a11y/focus.common-helpers.ts

@@ -0,0 +1,13 @@
+export const getArrowUpIndex = (currentIndex: number) => {
+  const isFirstOption = currentIndex === 0;
+  return isFirstOption ? currentIndex : currentIndex - 1;
+};
+
+export const getArrowDownIndex = (currentIndex: number, options: any[]) => {
+  const isLastOption = currentIndex === options.length - 1;
+  return isLastOption ? currentIndex : currentIndex + 1;
+};
+
+export const getFocusedOption = <FocusableOption extends { tabIndex: number }>(
+  options: FocusableOption[]
+) => options.find(option => option.tabIndex === 0);

src/common/a11y/index.ts

@@ -0,0 +1,6 @@
+export * from './select';
+export * from './nested-select';
+export * from './on-key.hook';
+export * from './focus.common-helpers';
+export * from './nested-list';
+export * from './common.model';

src/common/a11y/list/focus.helpers.ts

@@ -0,0 +1,26 @@
+import { BaseA11yOption } from '../common.model';
+
+export const setInitialFocus = <
+  Option,
+  A11yOption extends BaseA11yOption<Option>,
+>(
+  options: Option[]
+): A11yOption[] => {
+  const a11ySelectionOptions = options.map<A11yOption>(
+    (option, index) =>
+      ({
+        ...option,
+        tabIndex: index === 0 ? 0 : -1,
+      }) as unknown as A11yOption
+  );
+
+  return a11ySelectionOptions;
+};
+
+export const onFocusOption =
+  <Option>(option: BaseA11yOption<Option>) =>
+  (element: any) => {
+    if (option.tabIndex === 0) {
+      element?.focus();
+    }
+  };

src/common/a11y/list/index.ts

@@ -0,0 +1,2 @@
+export * from './list.hooks';
+export * from './list.model';

src/common/a11y/list/list.hooks.ts

@@ -0,0 +1,95 @@
+import React from 'react';
+import { BaseA11yOption } from '../common.model';
+import { getArrowDownIndex, getArrowUpIndex } from '../focus.common-helpers';
+import { useOnKey } from '../on-key.hook';
+import { onFocusOption, setInitialFocus } from './focus.helpers';
+import { SetInitialFocusFn } from './list.model';
+import { useOnTwoKeys } from '../on-two-Keys.hook';
+
+export const useA11yList = <Option, A11yOption extends BaseA11yOption<Option>>(
+  options: Option[],
+  onSetInitialFocus: SetInitialFocusFn<Option, A11yOption> = setInitialFocus
+) => {
+  const optionListRef = React.useRef<any>(null);
+  const [internalOptions, setInternalOptions] = React.useState<A11yOption[]>(
+    onSetInitialFocus(options)
+  );
+
+  const handleFocus = (event: KeyboardEvent) => {
+    const currentIndex = internalOptions.findIndex(
+      option => option.tabIndex === 0
+    );
+    const nextIndex =
+      event.key === 'ArrowUp'
+        ? getArrowUpIndex(currentIndex)
+        : getArrowDownIndex(currentIndex, internalOptions);
+
+    if (currentIndex !== nextIndex) {
+      setInternalOptions(prevOptions =>
+        prevOptions.map((option, index) => {
+          switch (index) {
+            case currentIndex:
+              return {
+                ...option,
+                tabIndex: -1,
+              };
+            case nextIndex:
+              return {
+                ...option,
+                tabIndex: 0,
+              };
+            default:
+              return option;
+          }
+        })
+      );
+    }
+  };
+
+  const handleFirstAndLast = (value: number) => {
+    setInternalOptions(prevOptions =>
+      prevOptions.map((option, index) => {
+        switch (index) {
+          case value:
+            return {
+              ...option,
+              tabIndex: 0,
+            };
+          default:
+            return {
+              ...option,
+              tabIndex: -1,
+            };
+        }
+      })
+    );
+  };
+
+  //Need this for Mac users
+  useOnTwoKeys(
+    optionListRef,
+    ['ArrowUp', 'ArrowDown'],
+    'Meta',
+    (event: KeyboardEvent) =>
+      event.key === 'ArrowUp'
+        ? handleFirstAndLast(0)
+        : handleFirstAndLast(internalOptions.length - 1)
+  );
+
+  useOnKey(optionListRef, ['ArrowDown', 'ArrowUp'], (event: KeyboardEvent) => {
+    handleFocus(event);
+  });
+
+  useOnKey(optionListRef, ['Home', 'End'], (event: KeyboardEvent) =>
+    event.key === 'Home'
+      ? handleFirstAndLast(0)
+      : handleFirstAndLast(internalOptions.length - 1)
+  );
+
+  return {
+    optionListRef,
+    options: internalOptions,
+    setOptions: setInternalOptions,
+    onFocusOption,
+  };
+};

src/common/a11y/list/list.model.ts

@@ -0,0 +1,3 @@
+export type SetInitialFocusFn<Option, A11yOption> = (
+  options: Option[]
+) => A11yOption[];

src/common/a11y/nested-list/index.ts

@@ -0,0 +1,2 @@
+export * from './nested-list.hooks';
+export * from './nested-list.model';

src/common/a11y/nested-list/nested-list.hooks.ts

@@ -0,0 +1,29 @@
+import {
+  mapFlatOptionsToNestedListOptions,
+  mapNestedListOptionsToFlatOptions,
+} from './nested-list.mappers';
+import { NestedOption } from '../common.model';
+import { useA11yNested } from '../nested.hooks';
+import { useA11yList } from '../list';
+
+export const useA11yNestedList = <Option extends NestedOption<Option>>(
+  options: Option[]
+) => {
+  const flatOptions = mapNestedListOptionsToFlatOptions(options);
+
+  const {
+    optionListRef,
+    options: internalOptions,
+    setOptions,
+    onFocusOption,
+  } = useA11yList(flatOptions);
+
+  useA11yNested(optionListRef, internalOptions, setOptions);
+
+  return {
+    optionListRef,
+    options: mapFlatOptionsToNestedListOptions(internalOptions),
+    setOptions,
+    onFocusOption,
+  };
+};