Merge branch 'master' of https://github.com/jsonwebtoken/jsonwebtoken.github.io into gh-actions-testing-stale-pr

Author: javiert-okta

src/features/common/components/card-tabs/card-tabs.component.tsx

@@ -21,31 +21,34 @@ import {
   TabPanel,
   Tabs,
 } from "react-aria-components";
+import { Spinner } from "../spinner/spinner.component";
 
 type CardTabsProps = {
   resizeId: string;
   languageCode: string;
   title: string | null;
   cards: CardComponentProps[];
   activeTabId: string;
+  isLoading?: boolean;
   handleActiveCardChange: (tabId: string) => void;
 };
 
 const CardTabs: React.FC<CardTabsProps> = ({
   resizeId,
   title,
   cards,
+  isLoading,
   activeTabId,
   handleActiveCardChange,
 }) => {
   const tabsId = useId();
 
   const outputModalState$ = useDebuggerStore(
-    (state) => state.outputModalState$,
+    (state) => state.outputModalState$
   );
   const outputModalId$ = useDebuggerStore((state) => state.outputModalId$);
   const closeOutputModal$ = useDebuggerStore(
-    (state) => state.closeOutputModal$,
+    (state) => state.closeOutputModal$
   );
 
   const activeCard = cards.filter((card) => card.id === activeTabId)[0];
@@ -166,9 +169,12 @@ const CardTabs: React.FC<CardTabsProps> = ({
         className={styles.cardTabs__container}
       >
         {title && (
-          <h4 id={tabsId} className={styles.cardTabs__title}>
-            {title}
-          </h4>
+          <div className={styles.cardTabs__title__container}>
+            <h4 id={tabsId} className={styles.cardTabs__title}>
+              {title}
+            </h4>
+            {isLoading && <Spinner />}
+          </div>
         )}
         <Tabs
           selectedKey={activeCard.id}
@@ -269,6 +275,7 @@ type CardTabsWithTabPersistenceComponentProps = {
   languageCode: string;
   title: string | null;
   cards: CardComponentProps[];
+  isLoading?: boolean;
   handleTabChange: (key: string) => void;
 };
 
@@ -281,6 +288,7 @@ export const CardTabsWithTabPersistenceComponentProps: React.FC<
   languageCode,
   title,
   cards,
+  isLoading,
   handleTabChange,
 }) => {
   const [activeTabId, setActiveTabId] = useState<string>(initialTabId);
@@ -309,6 +317,7 @@ export const CardTabsWithTabPersistenceComponentProps: React.FC<
       languageCode={languageCode}
       title={title}
       cards={cards}
+      isLoading={isLoading}
       activeTabId={activeTabId}
       handleActiveCardChange={handleActiveCardChange}
     />

src/features/common/components/card-tabs/card-tabs.module.scss

@@ -24,6 +24,7 @@
   line-height: 1.375rem;
   font-weight: 500;
   letter-spacing: 0.24px;
+  margin-right: 8px;
 }
 
 .cardTabs {
@@ -49,6 +50,11 @@ $cardTabs__tabList__height: 2.5rem;
   flex-shrink: 0;
 }
 
+.cardTabs__title__container {
+  display: flex;
+
+}
+
 .cardTab__title {
   position: relative;
   display: flex;

src/features/common/components/checkbox/checkbox.component.tsx

@@ -0,0 +1,28 @@
+import { Checkbox, type CheckboxProps } from "react-aria-components";
+import styles from './checkbox.module.scss'
+
+export function CheckboxComponent({
+  children,
+  ...props
+}: Omit<CheckboxProps, "children"> & {
+  children?: React.ReactNode;
+}) {
+  return (
+    <Checkbox {...props} className={styles.checkbox__component}>
+      {({ isIndeterminate }) => (
+        <>
+          <div className={styles.checkbox}>
+            <svg viewBox="0 0 18 18" aria-hidden="true">
+              {isIndeterminate ? (
+                <rect x={1} y={7.5} width={15} height={3} />
+              ) : (
+                <polyline points="1 9 7 14 15 4" />
+              )}
+            </svg>
+          </div>
+          {children}
+        </>
+      )}
+    </Checkbox>
+  );
+}

src/features/common/components/checkbox/checkbox.module.scss

@@ -0,0 +1,66 @@
+.checkbox__component {
+  --selected-color: var(--color_bg_state_success);
+  --selected-color-pressed: var(--color_fg_on_state_success_subtle);
+  --checkmark-color: var(--color_border_state_success);
+
+  display: flex;
+  /* This is needed so the HiddenInput is positioned correctly */
+  position: relative;
+  align-items: center;
+  gap: 0.571rem;
+  font-size: 1.143rem;
+  color: white;
+  forced-color-adjust: none;
+
+  .checkbox {
+    width: 1.143rem;
+    height: 1.143rem;
+    border: 2px solid var(--color_fg_default);
+    border-radius: 4px;
+    transition: all 200ms;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+    fill: none;
+    stroke: var(--functional-gray-0);
+    stroke-width: 3px;
+    stroke-dasharray: 22px;
+    stroke-dashoffset: 66;
+    transition: all 200ms;
+  }
+
+  &[data-focus-visible] .checkbox {
+    outline: 2px solid var(--color_fg_selected);
+    outline-offset: 2px;
+  }
+
+  &[data-selected],
+  &[data-indeterminate] {
+    .checkbox {
+      border-color: var(--selected-color);
+      background: var(--selected-color);
+    }
+
+    &[data-pressed] .checkbox {
+      border-color: var(--selected-color-pressed);
+      background: var(--selected-color-pressed);
+    }
+
+    svg {
+      stroke-dashoffset: 44;
+    }
+  }
+
+  &[data-indeterminate] {
+    & svg {
+      stroke: none;
+      fill: var(--checkmark-color);
+    }
+  }
+}

src/features/common/components/code-editor/editor.component.tsx

@@ -18,6 +18,7 @@ type Props = React.HTMLAttributes<HTMLDivElement> & {
   textareaId?: string;
   textareaClassName?: string;
   autoFocus?: boolean;
+  focusOnWindowFocus?: boolean;
   disabled?: boolean;
   form?: string;
   maxLength?: number;
@@ -87,6 +88,21 @@ export class EditorComponent extends React.Component<Props, State> {
 
   componentDidMount() {
     this._recordCurrentState();
+    if (this.props.focusOnWindowFocus) {
+      window.addEventListener("focus", this._focusInput);
+    }
+  }
+
+  componentDidUpdate(prevProps: Readonly<Props>): void {
+    if (prevProps.focusOnWindowFocus !== this.props.focusOnWindowFocus) {
+      this.props.focusOnWindowFocus
+        ? window.addEventListener("focus", this._focusInput)
+        : window.removeEventListener("focus", this._focusInput);
+    }
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener("focus", this._focusInput);
   }
 
   private _recordCurrentState = () => {
@@ -161,6 +177,13 @@ export class EditorComponent extends React.Component<Props, State> {
     this._history.offset++;
   };
 
+  private _focusInput = () => {
+    const input = this._input;
+
+    if (!input) return;
+    input.focus();
+  };
+
   private _updateInput = (record: Record) => {
     const input = this._input;
 
@@ -466,7 +489,7 @@ export class EditorComponent extends React.Component<Props, State> {
         selectionStart,
         selectionEnd,
       },
-      true,
+      true
     );
 
     this.props.onValueChange(value);
@@ -516,6 +539,7 @@ export class EditorComponent extends React.Component<Props, State> {
       insertSpaces,
       ignoreTabKey,
       preClassName,
+      focusOnWindowFocus,
       ...rest
     } = this.props;
 

src/features/common/components/spinner/spinner.component.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { ProgressBar } from "react-aria-components";
+import styles from "./spinner.module.scss";
+
+export const Spinner = () => {
+  return (
+    <ProgressBar aria-label="Loading…" isIndeterminate>
+      {() => (
+        <div className={styles.circular__spinner}>
+          <svg className={styles.spinner__svg} viewBox="0 0 20 20">
+            <circle
+              className={styles.spinner__circle}
+              cx="10"
+              cy="10"
+              r="8"
+              fill="none"
+              strokeWidth="4"
+            />
+          </svg>
+        </div>
+      )}
+    </ProgressBar>
+  );
+};

src/features/common/components/spinner/spinner.module.scss

@@ -0,0 +1,40 @@
+.circular__spinner {
+    width: 16px;
+    height: 16px;
+    display: inline-block;
+}
+
+.spinner__svg {
+    animation: rotate 1s linear infinite;
+    width: 100%;
+    height: 100%;
+}
+
+.spinner__circle {
+    stroke: var(--color_fg_default);
+    stroke-dasharray: 90 150;
+    stroke-dashoffset: 0;
+    stroke-linecap: round;
+    animation: dash 1.5s ease-in-out infinite;
+}
+
+@keyframes rotate {
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes dash {
+    0% {
+        stroke-dasharray: 1, 200;
+        stroke-dashoffset: 0;
+    }
+    50% {
+        stroke-dasharray: 100, 200;
+        stroke-dashoffset: -15;
+    }
+    100% {
+        stroke-dasharray: 1, 200;
+        stroke-dashoffset: -126;
+    }
+}

src/features/debugger/components/debugger-toolbar/debugger-toolbar.component.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useRef } from "react";
 import styles from "./debugger-toolbar.module.scss";
 import { BoxComponent } from "@/features/common/components/box/box.component";
 import { useDebuggerStore } from "@/features/debugger/services/debugger.store";
@@ -18,9 +18,22 @@ interface DebuggerToolbarComponentProps {
 export const DebuggerToolbarComponent: React.FC<
   DebuggerToolbarComponentProps
 > = ({ decoderDictionary, encoderDictionary, mode }) => {
+  const tabRefs = useRef<Array<HTMLLIElement | null>>([]);
   const activeWidget$ = useDebuggerStore((state) => state.activeWidget$);
-
   const setActiveWidget$ = useDebuggerStore((state) => state.setActiveWidget$);
+  const isDecoder = activeWidget$ === DebuggerWidgetValues.DECODER;
+  
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLLIElement>) => {
+    const { key } = e;
+
+    if (key == "ArrowRight" || key == "ArrowLeft") {
+      setActiveWidget$(
+        isDecoder ? DebuggerWidgetValues.ENCODER : DebuggerWidgetValues.DECODER
+      );
+      e.preventDefault();
+    }
+    tabRefs.current[isDecoder ? 0 : 1]?.focus();
+  };
 
   if (mode === DebuggerModeValues.UNIFIED) {
     return (
@@ -40,8 +53,15 @@ export const DebuggerToolbarComponent: React.FC<
               onClick={() => {
                 setActiveWidget$(DebuggerWidgetValues.DECODER);
               }}
+              onKeyDown={handleKeyDown}
               data-active={activeWidget$ === DebuggerWidgetValues.DECODER}
               data-testid={dataTestidDictionary.debugger.decoderTab.id}
+              aria-selected={activeWidget$ === DebuggerWidgetValues.DECODER}
+              aria-controls={`${DebuggerWidgetValues.DECODER}-panel`}
+              ref={(el) => {
+                tabRefs.current[0] = el;
+              }}
+              tabIndex={activeWidget$ === DebuggerWidgetValues.DECODER ? 0 : -1}
             >
               <span className={styles.titleTab__compactLabel}>
                 {decoderDictionary.compactTitle}
@@ -53,11 +73,18 @@ export const DebuggerToolbarComponent: React.FC<
             <li
               role="tab"
               className={styles.titleTab}
+              onKeyDown={handleKeyDown}
               onClick={() => {
                 setActiveWidget$(DebuggerWidgetValues.ENCODER);
               }}
               data-active={activeWidget$ === DebuggerWidgetValues.ENCODER}
               data-testid={dataTestidDictionary.debugger.encoderTab.id}
+              aria-selected={activeWidget$ === DebuggerWidgetValues.ENCODER}
+              aria-controls={`${DebuggerWidgetValues.ENCODER}-panel`}
+              ref={(el) => {
+                tabRefs.current[1] = el;
+              }}
+              tabIndex={activeWidget$ === DebuggerWidgetValues.ENCODER ? 0 : -1}
             >
               <span className={styles.titleTab__compactLabel}>
                 {encoderDictionary.compactTitle}