[DOP-3497]: Refactor state

.npmrc

@@ -1,5 +1,5 @@
 registry=https://artifactory.corp.mongodb.com/artifactory/api/npm/npm/
-_auth=${NPM_BASE_64_AUTH}
+_email=docs-platform
-_email=${NPM_EMAIL}
 _always-auth=true
 git-tag-version=false
+//artifactory.corp.mongodb.com/artifactory/api/npm/npm/:_auth=ZG9jcy1wbGF0Zm9ybTpBS0NwOGpSYkRUVjRVRktUM0JSTndlckxrckwyVFdjaDZ4U0d0c3JKZUhyRmtFTExGdFZDNDVnZEMxRGF4ZzZ5ckhNeWt2U0Zv

package.json

@@ -32,6 +32,7 @@
     "start": "webpack serve --mode=development --env playground --hot --config demo/webpack.config.ts",
     "start:prod": "webpack serve --env playground --mode=production --config demo/webpack.config.ts",
     "start:benchmark": "webpack serve --mode=production --env.bench --config demo/webpack.config.ts",
+    "dev:vite": "vite",
     "test": "npm run unit && npm run license-check",
     "unit": "jest --coverage",
     "test:update-snapshot": "jest --updateSnapshot",
@@ -76,7 +77,7 @@
     "@types/lunr": "^2.3.3",
     "@types/mark.js": "^8.11.5",
     "@types/marked": "^4.0.3",
-    "@types/node": "^15.6.1",
+    "@types/node": "^15.14.9",
     "@types/prismjs": "^1.16.5",
     "@types/prop-types": "^15.7.3",
     "@types/react": "^17.0.8",
@@ -151,6 +152,7 @@
     "@mdb/flora": "^0.20.5",
     "@mdx-js/react": "^1.6.22",
     "@redocly/openapi-core": "^1.0.0-beta.104",
+    "@vitejs/plugin-react": "^3.1.0",
     "classnames": "^2.3.1",
     "decko": "^1.2.0",
     "dompurify": "^2.2.8",
@@ -172,7 +174,8 @@
     "style-loader": "^3.3.1",
     "swagger2openapi": "^7.0.6",
     "theme-ui": "^0.13.1",
-    "url-template": "^2.0.8"
+    "url-template": "^2.0.8",
+    "vite": "^4.1.1"
   },
   "size-limit": [
     {

src/components/VersionSelector/Option.tsx

@@ -3,18 +3,19 @@ import { StyledLi, StyledOptionText, StyledPlaceholder } from './styled.elements
 import Checkmark from './CheckmarkSvg';
 import { OptionProps } from './types';
 
-export const Option = ({ option, selected, onClick }: OptionProps) => {
+export const Option = ({ option, selected, onClick, focused }: OptionProps) => {
   const KEY_ENTER = 'ENTER';
   const KEY_SPACE = 'SPACE';
 
   const handleKeyPress = (event: React.KeyboardEvent) => {
+    console.log(event.key);
     if (event.key === KEY_ENTER || event.key === KEY_SPACE) {
       onClick();
     }
   };
 
   return (
-    <StyledLi onClick={onClick} onKeyPress={handleKeyPress} selected={selected}>
+    <StyledLi onClick={onClick} onKeyPress={handleKeyPress} selected={selected} focused={focused}>
       {selected ? <Checkmark /> : <StyledPlaceholder />}
       <StyledOptionText>{option}</StyledOptionText>
     </StyledLi>

src/components/VersionSelector/VersionSelector.tsx

@@ -24,8 +24,23 @@ const VersionSelectorComponent = ({
 }: VersionSelectorProps): JSX.Element => {
   const initialSelectedIdx = resourceVersions.indexOf(active.resourceVersion);
   const [open, setOpen] = React.useState<boolean>(false);
+  const [focusedIdx, setFocusedIdx] = React.useState<number | null>(null);
   const [selectedIdx, setSelectedIdx] = React.useState<number>(initialSelectedIdx);
+
   const menuListRef = React.useRef(null);
+
+  const options = resourceVersions.map((option, i) => {
+    return (
+      <Option
+        key={`option-${i}`}
+        selected={i === selectedIdx}
+        focused={i === focusedIdx && focusedIdx !== selectedIdx}
+        option={option}
+        onClick={() => handleClick(i)}
+      />
+    );
+  });
+
   useOutsideClick(menuListRef, () => {
     if (open) setOpen(false);
   });
@@ -35,6 +50,10 @@ const VersionSelectorComponent = ({
     setOpen(false);
   };
 
+  const handleFocusChange = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    console.log(event.key);
+  };
+
   return (
     <StyledWrapper ref={menuListRef}>
       <StyledSelectWrapper>
@@ -50,18 +69,9 @@ const VersionSelectorComponent = ({
         </StyledButton>
       </StyledSelectWrapper>
 
-      <StyledDropdown open={open}>
+      <StyledDropdown open={open} onKeyDown={handleFocusChange}>
         <div>
-          <StyledMenuList>
+          <StyledMenuList>{options}</StyledMenuList>
-            {resourceVersions.map((option, i) => (
-              <Option
-                key={`option-${i}`}
-                selected={i === selectedIdx}
-                option={option}
-                onClick={() => handleClick(i)}
-              />
-            ))}
-          </StyledMenuList>
         </div>
       </StyledDropdown>
     </StyledWrapper>

src/components/VersionSelector/types.ts

@@ -1,3 +1,5 @@
+import { CSSProperties } from 'react';
+
 export interface ActiveVersionData {
   resourceVersion: string;
   apiVersion: string;
@@ -13,6 +15,7 @@ export interface OptionProps {
   option: string;
   selected: boolean;
   onClick: () => void;
+  focused: boolean;
 }
 
 export interface ArrowIconProps {