From 23ebef90158a128707940159df91e5a58ac5437c Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Wed, 22 Mar 2023 10:42:22 +0100
Subject: [PATCH] chore(website): update options selector in playground

---
 .../src/components/OptionsSelector.module.css | 75 ----------------
 .../src/components/OptionsSelector.tsx        | 87 +++++++------------
 .../components/config/ConfigEditor.module.css |  4 -
 .../src/components/config/ConfigEditor.tsx    |  3 +-
 .../src/components/inputs/Dropdown.module.css | 20 +++++
 .../src/components/inputs/Dropdown.tsx        |  4 +-
 .../src/components/inputs/Text.module.css     |  5 +-
 .../website/src/components/inputs/Text.tsx    |  1 +
 .../src/components/layout/ActionLabel.tsx     | 20 +++++
 .../components/layout/InputLabel.module.css   | 25 ++++++
 .../src/components/layout/InputLabel.tsx      | 19 ++++
 packages/website/src/hooks/useClipboard.ts    | 17 ++++
 .../hooks/useDebouncedToggle.ts               |  2 +-
 packages/website/src/icons/copy.svg           |  2 +-
 14 files changed, 139 insertions(+), 145 deletions(-)
 delete mode 100644 packages/website/src/components/OptionsSelector.module.css
 create mode 100644 packages/website/src/components/inputs/Dropdown.module.css
 create mode 100644 packages/website/src/components/layout/ActionLabel.tsx
 create mode 100644 packages/website/src/components/layout/InputLabel.module.css
 create mode 100644 packages/website/src/components/layout/InputLabel.tsx
 create mode 100644 packages/website/src/hooks/useClipboard.ts
 rename packages/website/src/{components => }/hooks/useDebouncedToggle.ts (92%)

diff --git a/packages/website/src/components/OptionsSelector.module.css b/packages/website/src/components/OptionsSelector.module.css
deleted file mode 100644
index a990748be47f..000000000000
--- a/packages/website/src/components/OptionsSelector.module.css
+++ /dev/null
@@ -1,75 +0,0 @@
-.optionLabel {
-  cursor: pointer;
-}
-
-.optionItem,
-.optionLabel {
-  align-items: center;
-  display: flex;
-  flex: 0 0 1.5rem;
-  flex-direction: row;
-  font-size: 0.75rem;
-  margin: 0 0;
-  padding: 0.4rem 0.8rem;
-  transition: background-color var(--ifm-transition-fast)
-      var(--ifm-transition-timing-default),
-    color var(--ifm-transition-fast) var(--ifm-transition-timing-default);
-  color: var(--ifm-font-color-secondary);
-  justify-content: space-between;
-  border: none;
-  background: transparent;
-  font-family: var(--ifm-font-family-base);
-  box-sizing: border-box;
-  line-height: var(--ifm-line-height-base);
-}
-
-.optionLabel:hover {
-  background-color: var(--ifm-color-emphasis-100);
-  color: var(--ifm-font-color-primary);
-}
-
-.optionInput {
-  display: block;
-  width: 90%;
-  padding: 0.4rem 0.6rem;
-  line-height: 1;
-  font-size: 0.8rem;
-  font-weight: 500;
-  font-family: inherit;
-  border-radius: 6px;
-  appearance: none;
-  color: var(--ifm-font-color-secondary);
-  border: 1px solid var(--ifm-color-emphasis-100);
-  background: var(--ifm-color-emphasis-200);
-  transition: border 0.3s ease;
-}
-
-.optionInput::placeholder {
-  color: var(--ifm-color-emphasis-700);
-}
-
-.optionInput:focus {
-  outline: none;
-  border-color: var(--ifm-color-primary);
-}
-
-.optionSelect {
-  line-height: 1;
-  font-size: 0.8rem;
-  font-weight: 500;
-  border-radius: 6px;
-  font-family: inherit;
-  width: 50%;
-  box-shadow: none;
-  background-image: none;
-  padding: 0.4rem 0.6rem;
-  appearance: none;
-  color: var(--ifm-font-color-secondary);
-  border: 1px solid var(--ifm-color-emphasis-100);
-  background: var(--ifm-color-emphasis-200);
-  transition: border 0.3s ease;
-}
-.optionSelect:focus {
-  outline: none;
-  border-color: var(--ifm-color-primary);
-}
diff --git a/packages/website/src/components/OptionsSelector.tsx b/packages/website/src/components/OptionsSelector.tsx
index fe573ef86ab1..770ebbbfdb99 100644
--- a/packages/website/src/components/OptionsSelector.tsx
+++ b/packages/website/src/components/OptionsSelector.tsx
@@ -1,18 +1,19 @@
-/* eslint-disable jsx-a11y/label-has-associated-control */
 import {
   NavbarSecondaryMenuFiller,
   useWindowSize,
 } from '@docusaurus/theme-common';
 import CopyIcon from '@site/src/icons/copy.svg';
+import IconExternalLink from '@theme/Icon/ExternalLink';
 import React, { useCallback } from 'react';
 
-import useDebouncedToggle from './hooks/useDebouncedToggle';
+import { useClipboard } from '../hooks/useClipboard';
 import Checkbox from './inputs/Checkbox';
 import Dropdown from './inputs/Dropdown';
 import Tooltip from './inputs/Tooltip';
+import ActionLabel from './layout/ActionLabel';
 import Expander from './layout/Expander';
+import InputLabel from './layout/InputLabel';
 import { createMarkdown, createMarkdownParams } from './lib/markdown';
-import styles from './OptionsSelector.module.css';
 import type { ConfigModel } from './types';
 
 export interface OptionsSelectorParams {
@@ -35,8 +36,12 @@ function OptionsSelectorContent({
   tsVersions,
   isLoading,
 }: OptionsSelectorParams): JSX.Element {
-  const [copyLink, setCopyLink] = useDebouncedToggle<boolean>(false);
-  const [copyMarkdown, setCopyMarkdown] = useDebouncedToggle<boolean>(false);
+  const [copyLink, copyLinkToClipboard] = useClipboard(() =>
+    document.location.toString(),
+  );
+  const [copyMarkdown, copyMarkdownToClipboard] = useClipboard(() =>
+    createMarkdown(state),
+  );
 
   const updateTS = useCallback(
     (version: string) => {
@@ -45,23 +50,6 @@ function OptionsSelectorContent({
     [setState],
   );
 
-  const copyLinkToClipboard = useCallback(() => {
-    void navigator.clipboard
-      .writeText(document.location.toString())
-      .then(() => {
-        setCopyLink(true);
-      });
-  }, [setCopyLink]);
-
-  const copyMarkdownToClipboard = useCallback(() => {
-    if (isLoading) {
-      return;
-    }
-    void navigator.clipboard.writeText(createMarkdown(state)).then(() => {
-      setCopyMarkdown(true);
-    });
-  }, [isLoading, state, setCopyMarkdown]);
-
   const openIssue = useCallback(() => {
     if (isLoading) {
       return;
@@ -79,8 +67,7 @@ function OptionsSelectorContent({
   return (
     <>
       <Expander label="Info">
-        <label className={styles.optionLabel}>
-          TypeScript
+        <InputLabel name="TypeScript">
           <Dropdown
             name="ts"
             className="text--right"
@@ -89,65 +76,49 @@ function OptionsSelectorContent({
             onChange={updateTS}
             options={(tsVersions.length && tsVersions) || [state.ts]}
           />
-        </label>
-        <label className={styles.optionLabel}>
-          Eslint
-          <span>{process.env.ESLINT_VERSION}</span>
-        </label>
-        <label className={styles.optionLabel}>
-          TSEslint
-          <span>{process.env.TS_ESLINT_VERSION}</span>
-        </label>
+        </InputLabel>
+        <InputLabel name="Eslint">{process.env.ESLINT_VERSION}</InputLabel>
+        <InputLabel name="TSEslint">{process.env.TS_ESLINT_VERSION}</InputLabel>
       </Expander>
       <Expander label="Options">
-        <label className={styles.optionLabel}>
-          Enable jsx
+        <InputLabel name="Enable jsx">
           <Checkbox
             name="jsx"
             checked={state.jsx}
             onChange={(e): void => setState({ jsx: e })}
-            className={styles.optionCheckbox}
           />
-        </label>
-        <label className={styles.optionLabel}>
-          AST Viewer
+        </InputLabel>
+        <InputLabel name="AST Viewer">
           <Dropdown
             name="showAST"
             value={state.showAST}
             onChange={(e): void => setState({ showAST: e })}
             options={ASTOptions}
           />
-        </label>
-        <label className={styles.optionLabel}>
-          Source type
+        </InputLabel>
+        <InputLabel name="Source type">
           <Dropdown
             name="sourceType"
             value={state.sourceType}
             onChange={(e): void => setState({ sourceType: e })}
             options={['script', 'module']}
           />
-        </label>
+        </InputLabel>
       </Expander>
       <Expander label="Actions">
-        <button className={styles.optionLabel} onClick={copyLinkToClipboard}>
-          Copy Link
+        <ActionLabel name="Copy link" onClick={copyLinkToClipboard}>
           <Tooltip open={copyLink} text="Copied">
-            <CopyIcon />
+            <CopyIcon width="13.5" height="13.5" />
           </Tooltip>
-        </button>
-        <button
-          className={styles.optionLabel}
-          onClick={copyMarkdownToClipboard}
-        >
-          Copy Markdown
+        </ActionLabel>
+        <ActionLabel name="Copy Markdown" onClick={copyMarkdownToClipboard}>
           <Tooltip open={copyMarkdown} text="Copied">
-            <CopyIcon />
+            <CopyIcon width="13.5" height="13.5" />
           </Tooltip>
-        </button>
-        <button className={styles.optionLabel} onClick={openIssue}>
-          Report as Issue
-          <CopyIcon />
-        </button>
+        </ActionLabel>
+        <ActionLabel name="Report as Issue" onClick={openIssue}>
+          <IconExternalLink width="13.5" height="13.5" />
+        </ActionLabel>
       </Expander>
     </>
   );
diff --git a/packages/website/src/components/config/ConfigEditor.module.css b/packages/website/src/components/config/ConfigEditor.module.css
index 93d34e5c3086..c25633dcaab7 100644
--- a/packages/website/src/components/config/ConfigEditor.module.css
+++ b/packages/website/src/components/config/ConfigEditor.module.css
@@ -1,7 +1,3 @@
-.search {
-  border-radius: 0.2rem;
-}
-
 .searchResult,
 .searchResultGroup {
   align-items: center;
diff --git a/packages/website/src/components/config/ConfigEditor.tsx b/packages/website/src/components/config/ConfigEditor.tsx
index 361ac95b667a..8c371a58a74a 100644
--- a/packages/website/src/components/config/ConfigEditor.tsx
+++ b/packages/website/src/components/config/ConfigEditor.tsx
@@ -113,10 +113,9 @@ function ConfigEditor(props: ConfigEditorProps): JSX.Element {
       <div className={styles.searchBar}>
         <Text
           ref={filterInput}
-          type="text"
+          type="search"
           name="config-filter"
           value={filter}
-          className={styles.search}
           onChange={setFilter}
         />
       </div>
diff --git a/packages/website/src/components/inputs/Dropdown.module.css b/packages/website/src/components/inputs/Dropdown.module.css
new file mode 100644
index 000000000000..ae9233b69367
--- /dev/null
+++ b/packages/website/src/components/inputs/Dropdown.module.css
@@ -0,0 +1,20 @@
+.dropdown {
+  line-height: 1;
+  font-size: 0.8rem;
+  font-weight: 500;
+  border-radius: 6px;
+  font-family: inherit;
+  width: 50%;
+  box-shadow: none;
+  padding: 0.4rem 0.6rem;
+  appearance: none;
+  color: var(--ifm-font-color-secondary);
+  border: 1px solid var(--ifm-color-emphasis-100);
+  background: var(--ifm-color-emphasis-200);
+  transition: border 0.3s ease;
+}
+
+.dropdown:focus {
+  outline: none;
+  border-color: var(--ifm-color-primary);
+}
diff --git a/packages/website/src/components/inputs/Dropdown.tsx b/packages/website/src/components/inputs/Dropdown.tsx
index b0236c4d56e8..cb3f78cd0d9a 100644
--- a/packages/website/src/components/inputs/Dropdown.tsx
+++ b/packages/website/src/components/inputs/Dropdown.tsx
@@ -1,7 +1,7 @@
 import clsx from 'clsx';
 import React from 'react';
 
-import styles from '../OptionsSelector.module.css';
+import styles from './Dropdown.module.css';
 
 export interface DropdownOption<T> {
   readonly value: T;
@@ -28,10 +28,10 @@ function Dropdown<T extends boolean | string | number>(
 
   return (
     <select
+      className={clsx(styles.dropdown, props.className)}
       name={props.name}
       disabled={props.disabled}
       value={String(props.value)}
-      className={clsx(styles.optionSelect, props.className)}
       onChange={(e): void => {
         const selected = options.find(
           item => String(item.value) === e.target.value,
diff --git a/packages/website/src/components/inputs/Text.module.css b/packages/website/src/components/inputs/Text.module.css
index 632fa6b42faa..31f898294aa4 100644
--- a/packages/website/src/components/inputs/Text.module.css
+++ b/packages/website/src/components/inputs/Text.module.css
@@ -1,5 +1,4 @@
 .textInput {
-  appearance: none;
   background-color: var(--ifm-color-emphasis-200);
   border: 1px solid var(--ifm-color-emphasis-100);
   color: var(--ifm-font-color-secondary);
@@ -7,12 +6,14 @@
   cursor: text;
   display: inline-block;
   height: 2rem;
-  padding: 0 0.5rem 0 2.25rem;
+  padding: 0 0.5rem;
   font-size: 0.9rem;
+  border-radius: 0.2rem;
   flex: 1;
 }
 
 .textInput[type='search'] {
+  padding-left: 2.25rem;
   background: var(--ifm-color-emphasis-200) var(--ifm-navbar-search-input-icon)
     no-repeat 0.75rem center / 1rem 1rem;
 }
diff --git a/packages/website/src/components/inputs/Text.tsx b/packages/website/src/components/inputs/Text.tsx
index c4bf57493981..9a2613193f83 100644
--- a/packages/website/src/components/inputs/Text.tsx
+++ b/packages/website/src/components/inputs/Text.tsx
@@ -22,6 +22,7 @@ const Text = React.forwardRef<HTMLInputElement, DropdownProps>(
         name={props.name}
         className={clsx(styles.textInput, props.className)}
         type={props.type ?? 'text'}
+        autoComplete="off"
         placeholder={props.placeholder}
         ref={ref}
       />
diff --git a/packages/website/src/components/layout/ActionLabel.tsx b/packages/website/src/components/layout/ActionLabel.tsx
new file mode 100644
index 000000000000..6b98340a9003
--- /dev/null
+++ b/packages/website/src/components/layout/ActionLabel.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+import styles from './InputLabel.module.css';
+
+export interface InputLabelProps {
+  readonly name: string;
+  readonly children: React.ReactNode;
+  readonly onClick: () => void;
+}
+
+function ActionLabel(props: InputLabelProps): JSX.Element {
+  return (
+    <button onClick={props.onClick} className={styles.optionLabel}>
+      <span>{props.name}</span>
+      {props.children}
+    </button>
+  );
+}
+
+export default ActionLabel;
diff --git a/packages/website/src/components/layout/InputLabel.module.css b/packages/website/src/components/layout/InputLabel.module.css
new file mode 100644
index 000000000000..7c4e4491e6a5
--- /dev/null
+++ b/packages/website/src/components/layout/InputLabel.module.css
@@ -0,0 +1,25 @@
+.optionLabel {
+  cursor: pointer;
+  align-items: center;
+  display: flex;
+  flex: 0 0 1.5rem;
+  flex-direction: row;
+  font-size: 0.75rem;
+  margin: 0;
+  padding: 0.4rem 0.8rem;
+  transition: background-color var(--ifm-transition-fast)
+      var(--ifm-transition-timing-default),
+    color var(--ifm-transition-fast) var(--ifm-transition-timing-default);
+  color: var(--ifm-font-color-secondary);
+  justify-content: space-between;
+  border: none;
+  background: transparent;
+  font-family: var(--ifm-font-family-base);
+  box-sizing: border-box;
+  line-height: var(--ifm-line-height-base);
+}
+
+.optionLabel:hover {
+  background-color: var(--ifm-color-emphasis-100);
+  color: var(--ifm-font-color-primary);
+}
diff --git a/packages/website/src/components/layout/InputLabel.tsx b/packages/website/src/components/layout/InputLabel.tsx
new file mode 100644
index 000000000000..2f7e5d37e6c6
--- /dev/null
+++ b/packages/website/src/components/layout/InputLabel.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+import styles from './InputLabel.module.css';
+
+export interface InputLabelProps {
+  readonly name: string;
+  readonly children: React.ReactNode;
+}
+
+function InputLabel(props: InputLabelProps): JSX.Element {
+  return (
+    <label className={styles.optionLabel}>
+      <span>{props.name}</span>
+      {props.children}
+    </label>
+  );
+}
+
+export default InputLabel;
diff --git a/packages/website/src/hooks/useClipboard.ts b/packages/website/src/hooks/useClipboard.ts
new file mode 100644
index 000000000000..c97ecf383141
--- /dev/null
+++ b/packages/website/src/hooks/useClipboard.ts
@@ -0,0 +1,17 @@
+import { useCallback } from 'react';
+
+import { useDebouncedToggle } from './useDebouncedToggle';
+
+export type useClipboardResult = [copied: boolean, copy: () => void];
+
+export function useClipboard(code: () => string): useClipboardResult {
+  const [copied, setCopied] = useDebouncedToggle(false);
+
+  const copy = useCallback(() => {
+    void navigator.clipboard.writeText(code()).then(() => {
+      setCopied(true);
+    });
+  }, [setCopied, code]);
+
+  return [copied, copy];
+}
diff --git a/packages/website/src/components/hooks/useDebouncedToggle.ts b/packages/website/src/hooks/useDebouncedToggle.ts
similarity index 92%
rename from packages/website/src/components/hooks/useDebouncedToggle.ts
rename to packages/website/src/hooks/useDebouncedToggle.ts
index d857f4aea2c0..428955c3be70 100644
--- a/packages/website/src/components/hooks/useDebouncedToggle.ts
+++ b/packages/website/src/hooks/useDebouncedToggle.ts
@@ -1,6 +1,6 @@
 import { useCallback, useRef, useState } from 'react';
 
-export default function useDebouncedToggle<T>(
+export function useDebouncedToggle<T>(
   value: T,
   timeout = 1000,
 ): [T, (data: T) => void] {
diff --git a/packages/website/src/icons/copy.svg b/packages/website/src/icons/copy.svg
index 573a7c004774..6625354aa3fe 100644
--- a/packages/website/src/icons/copy.svg
+++ b/packages/website/src/icons/copy.svg
@@ -5,5 +5,5 @@
   height="18"
   fill="currentColor"
 >
-  <path d="M3 3v14h2V5h12V3H3zm4 4v14h14V7H7z"/>
+  <path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z" />
 </svg>