Tag Use Case

proof-of-concepts/features/stories/types.ts

@@ -0,0 +1,5 @@
+export interface ComponentProps<State, ActionAndChanges> {
+  stateReducer?: (state: State, actionAndChanges: ActionAndChanges) => State;
+}
+
+export type ItemsList = Record<string, any>;

proof-of-concepts/features/stories/useMultipleSelection/__tests__/useMultipleSelection.test.tsx

@@ -0,0 +1,33 @@
+describe('useMultipleSelection hook', () => {
+  /**
+   * *********************
+   *
+   * Keyboard Navigation
+   *
+   * *********************
+   */
+  test('a left or up arrow on the highest-indexed element does nothing', () => {});
+
+  test('a right or down arrow on the lowest-indexed element places focus back on the textbox', () => {});
+
+  test('a left or up arrow navigates to higher-indexed elements', () => {});
+
+  test('a right or down arrow navigates to lower-indexed elements', () => {});
+
+  /**
+   * *********************
+   *
+   * Keyboard Interaction
+   *
+   * *********************
+   */
+  test('enter or spacebar calls registered action', () => {});
+
+  /**
+   * *********************
+   *
+   * Accessibility
+   *
+   * *********************
+   */
+});

proof-of-concepts/features/stories/useMultipleSelection/reducer.ts

@@ -0,0 +1,61 @@
+import {
+  MultipleSelectionState,
+  MultipleSelectionAction,
+  MultipleSelectionStateChangeTypes
+} from './types';
+
+export function multipleSelectionReducer<Item>(
+  state: MultipleSelectionState<Item>,
+  action: MultipleSelectionAction<Item>
+) {
+  const { type } = action;
+  const newState = { ...state };
+  switch (type) {
+    case MultipleSelectionStateChangeTypes.KEYDOWN_ARROW_UP: {
+      return newState;
+    }
+    case MultipleSelectionStateChangeTypes.KEYDOWN_ARROW_DOWN: {
+      return newState;
+    }
+    case MultipleSelectionStateChangeTypes.KEYDOWN_ARROW_LEFT: {
+      return newState;
+    }
+    case MultipleSelectionStateChangeTypes.KEYDOWN_ARROW_RIGHT: {
+      return newState;
+    }
+    case MultipleSelectionStateChangeTypes.KEYDOWN_ENTER: {
+      return newState;
+    }
+    case MultipleSelectionStateChangeTypes.KEYDOWN_SPACEBAR: {
+      return newState;
+    }
+    case MultipleSelectionStateChangeTypes.KEYDOWN_KEYDOWN_CLICK: {
+      return newState;
+    }
+    case MultipleSelectionStateChangeTypes.MULTIPLE_SELECTION_GROUP_BLUR: {
+      return newState;
+    }
+    case MultipleSelectionStateChangeTypes.MULTIPLE_SELECTION_GROUP_FOCUS: {
+      return newState;
+    }
+    case MultipleSelectionStateChangeTypes.FUNCTION_ADD_SELECTED_ITEM: {
+      if (action.item) return newState;
+      const { item } = action;
+
+      return newState;
+    }
+    case MultipleSelectionStateChangeTypes.FUNCTION_REMOVE_SELECTED_ITEM: {
+      if (action.item) return newState;
+      const { item } = action;
+      newState.currentItems = newState.currentItems.filter(
+        (current) => current.name !== item.name
+      );
+      return newState;
+    }
+    default: {
+      throw new TypeError(
+        `Unhandled action in useMultipleSelection. Received ${type}`
+      );
+    }
+  }
+}

proof-of-concepts/features/stories/useMultipleSelection/types.ts

@@ -0,0 +1,45 @@
+import { ComponentProps } from '../types';
+export type MultipleSelectionProps<Item> = {
+  initialItems?: Item[];
+  initialHighlightedIndex?: number;
+  initialCurrentItem?: Item;
+  onCurrentItemChange?: (item: Item) => {};
+  onHighlightedIndexChange?: (index: number) => {};
+  onRemoveSelectedItem?: (itemRemoved: Item) => {};
+  onAddSelectedItem?: (itemAdded: Item) => {};
+  onSelectedItemsEmpty?: () => {};
+} & ComponentProps<
+  MultipleSelectionState<Item>,
+  MultipleSelectionActionAndChanges<Item>
+>;
+
+export type MultipleSelectionState<Item> = {
+  currentItems: Item[];
+  currentItem: Item;
+  highlightedIndex: number;
+  hasSelectedItems: boolean;
+};
+
+export enum MultipleSelectionStateChangeTypes {
+  KEYDOWN_ARROW_UP = '[multiple_selection_arrow_up]',
+  KEYDOWN_ARROW_DOWN = '[multiple_selection_arrow_down]',
+  KEYDOWN_ARROW_LEFT = '[multiple_selection_arrow_left]',
+  KEYDOWN_ARROW_RIGHT = '[multiple_selection_arrow_right]',
+  KEYDOWN_ENTER = '[multiple_selection_keydown_enter]',
+  KEYDOWN_SPACEBAR = '[multiple_selection_keydown_spacebar]',
+  KEYDOWN_KEYDOWN_CLICK = '[multiple_selection_keydown_click]',
+  MULTIPLE_SELECTION_GROUP_BLUR = '[multiple_selection_group_blur]',
+  MULTIPLE_SELECTION_GROUP_FOCUS = '[multiple_selection_group_focus]',
+  FUNCTION_ADD_SELECTED_ITEM = '[multiple_selection_function_add_seletected_item]',
+  FUNCTION_REMOVE_SELECTED_ITEM = '[multiple_selection_function_remove_seletected_item]'
+}
+
+export type MultipleSelectionAction<Item> = {
+  type: MultipleSelectionStateChangeTypes;
+  item?: Partial<MultipleSelectionState<Item>>;
+};
+
+export type MultipleSelectionActionAndChanges<Item> = {
+  changes: MultipleSelectionState<Item>;
+  action: MultipleSelectionAction<Item>;
+};

proof-of-concepts/features/stories/useMultipleSelection/useMultipleSelection.ts

@@ -0,0 +1,150 @@
+import React from 'react';
+import { multipleSelectionReducer } from './reducer';
+import { computeInitialState } from './utils';
+import {
+  normalizeKey,
+  useControlledReducer,
+  mergeRefs,
+  callAllEventHandlers,
+  noop
+} from '../utils';
+import {
+  MultipleSelectionProps,
+  MultipleSelectionState,
+  MultipleSelectionAction,
+  MultipleSelectionStateChangeTypes,
+  MultipleSelectionActionAndChanges
+} from './types';
+
+export default function useMultipleSelection<Item>(
+  props: MultipleSelectionProps<Item>
+) {
+  const [state, dispatch] = useControlledReducer<
+    (
+      state: MultipleSelectionState<Item>,
+      action: MultipleSelectionAction<Item>
+    ) => MultipleSelectionState<Item>,
+    MultipleSelectionState<Item>,
+    MultipleSelectionProps<Item>,
+    MultipleSelectionStateChangeTypes,
+    MultipleSelectionActionAndChanges<Item>
+  >(multipleSelectionReducer, computeInitialState<Item>(props), props);
+
+  const keydownHandlers = React.useCallback(
+    (e: React.KeyboardEvent) => ({
+      Enter: () => {
+        dispatch({
+          type: MultipleSelectionStateChangeTypes.KEYDOWN_ENTER
+        });
+      },
+      Spacebar: () => {
+        dispatch({
+          type: MultipleSelectionStateChangeTypes.KEYDOWN_SPACEBAR
+        });
+      },
+      ArrowDown: () => {
+        dispatch({
+          type: MultipleSelectionStateChangeTypes.KEYDOWN_ARROW_DOWN
+        });
+      },
+      ArrowUp: () => {
+        dispatch({
+          type: MultipleSelectionStateChangeTypes.KEYDOWN_ARROW_UP
+        });
+      },
+      ArrowLeft: () => {
+        dispatch({
+          type: MultipleSelectionStateChangeTypes.KEYDOWN_ARROW_LEFT
+        });
+      },
+      ArrowRight: () => {
+        dispatch({
+          type: MultipleSelectionStateChangeTypes.KEYDOWN_ARROW_RIGHT
+        });
+      }
+    }),
+    [dispatch, state]
+  );
+
+  function getSelectedItemProps() {}
+
+  function getMultiSelectionLabelProps() {}
+
+  function removeSelectedItem(item: Item) {
+    dispatch({
+      type: MultipleSelectionStateChangeTypes.FUNCTION_REMOVE_SELECTED_ITEM,
+      item
+    });
+  }
+
+  function addSelectedItem(item: Item) {
+    dispatch({
+      type: MultipleSelectionStateChangeTypes.FUNCTION_ADD_SELECTED_ITEM,
+      item
+    });
+  }
+
+  return {
+    getSelectedItemProps,
+    getMultiSelectionLabelProps,
+    removeSelectedItem,
+    addSelectedItem
+  };
+}
+
+/* the internal data structure of selected items will function as a queue */
+
+/* Usage */
+// [] the user can assign interactions to the selected elements
+
+/* state */
+// [] we want to have state of all currently selected items: Items[]
+// [] we want to store the currently highlighted/active element: Item
+// [] we want to have state of whether or not we have selected items: boolean based on undefined or defined list
+// [] we want to store the index of the currently highlighted/active element: number
+
+/* props */
+// [x] when a new highlighted index occurs recommendations based on these state change types^
+
+/* state change types - what does the user need? */
+// [x] when the group is blurred
+// [x] when the group is active
+// [x] when an item is clicked
+// [x] when a keyboard left
+// [x] when a keyboard right
+// [x] when a keyboard up
+// [x] when a keyboard down happens
+// [x] when a keyboard enter
+// [x] when a keyboard spacebar
+
+/* UI */
+// [] selected items: list
+// [] selected item: list element
+
+/* UX */
+// [x] we want to have keyboard navigation
+// [] left up and down are the same
+// [x] we want to have keyboard interaction
+// [x] enter, spacebar
+
+/* functions.operations */
+// [x] getSelectedItemProps
+// [] getLabelProps - associates/describes what the group belongs to
+
+// [x] onHighlightedIndexChange
+// [x] onHasSelectedItems
+
+// [] remove a selected item
+// [] the user specifies when/where the removal happens
+// [] we just provide a callback for them to use/specify in their code
+// [] add item to selected items
+// [] the user specifies when/where the addition happens
+// [] we just provide a callback for them to use/specify in their code
+
+/* accessibility */
+// [] we want the currently active item to have a dialogue to let the user know what item is active, number of total items, and what group the selected items belong to
+// [] we want the selected item list to be associated with a parent/combobox
+// [] we want to tell the user how to interact with the item?
+
+/* questions */
+// [] how to remove elements?

proof-of-concepts/features/stories/useMultipleSelection/utils.ts

@@ -0,0 +1,37 @@
+import { MultipleSelectionProps, MultipleSelectionState } from './types';
+import { capitalizeString } from '../utils';
+
+export function computeInitialState<Item>(
+  props: MultipleSelectionProps<Item>
+): MultipleSelectionState<Item> {
+  getInitialValue;
+  return {};
+}
+
+/**
+ * Use the keys of state to get the initial values of properties defined in props
+ * Props and State share the same keys.
+ */
+export function getInitialValue<Item>(
+  props: MultipleSelectionProps<Item>,
+  propKey: keyof MultipleSelectionState<Item>
+): Partial<MultipleSelectionState<Item>> {
+  if (propKey in props) {
+    return props[propKey as keyof MultipleSelectionProps<Item>] as Partial<
+      MultipleSelectionState<Item>
+    >;
+  }
+
+  // get the user-provided initial prop state, it is a piece of state
+  const initialPropKey = `initial${capitalizeString(
+    propKey
+  )}` as keyof MultipleSelectionProps<Item>;
+  if (initialPropKey in props) {
+    // console.log('initialPropKey', initialPropKey);
+    // console.log('initialPropKey', props[initialPropKey]);
+    return props[initialPropKey] as Partial<MultipleSelectionState<Item>>;
+  }
+
+  // return values from statically defined initial state object
+  return initialState[propKey] as Partial<MultipleSelectionState<Item>>;
+}