chore(website): add playground to website

packages/website/.eslintrc.js

@@ -8,7 +8,11 @@ module.exports = {
   plugins: ['jsx-a11y', 'react', 'react-hooks'],
   overrides: [
     {
-      files: ['./src/pages/*.tsx'],
+      files: [
+        './src/pages/*.tsx',
+        './src/components/**/*.tsx',
+        './src/components/hooks/*.ts',
+      ],
       rules: {
         'import/no-default-export': 'off',
       },
@@ -17,7 +21,8 @@ module.exports = {
   rules: {
     'react/jsx-no-target-blank': 'off',
     'react/no-unescaped-entities': 'off',
-    'react-hooks/exhaustive-deps': 'error',
+    '@typescript-eslint/internal/prefer-ast-types-enum': 'off',
+    'react-hooks/exhaustive-deps': 'off', // TODO: enable it later
   },
   settings: {
     react: {

packages/website/src/components/OptionsSelector.module.css

@@ -16,6 +16,11 @@
     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 {

packages/website/src/components/OptionsSelector.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/label-has-associated-control */
 import React, { useCallback, useState } from 'react';
 
 import ConfigEslint from './config/ConfigEslint';
@@ -22,7 +23,7 @@ import type {
   RulesRecord,
 } from './types';
 
-interface OptionsSelectorParams {
+export interface OptionsSelectorParams {
   readonly ruleOptions: RuleDetails[];
   readonly state: ConfigModel;
   readonly setState: (cfg: Partial<ConfigModel>) => void;
@@ -148,38 +149,41 @@ function OptionsSelector({
             options={['script', 'module']}
           />
         </label>
-        <label
+        <button
           className={styles.optionLabel}
           onClick={(): void => setEslintModal(true)}
         >
           Eslint Config
           <EditIcon className={styles.clickableIcon} />
-        </label>
-        <label
+        </button>
+        <button
           className={styles.optionLabel}
           onClick={(): void => setTypeScriptModal(true)}
         >
           TypeScript Config
           <EditIcon className={styles.clickableIcon} />
-        </label>
+        </button>
       </Expander>
       <Expander label="Actions">
-        <label className={styles.optionLabel} onClick={copyLinkToClipboard}>
+        <button className={styles.optionLabel} onClick={copyLinkToClipboard}>
           Copy Link
           <Tooltip open={copyLink} text="Copied" close={setCopyLink}>
             <CopyIcon className={styles.clickableIcon} />
           </Tooltip>
-        </label>
-        <label className={styles.optionLabel} onClick={copyMarkdownToClipboard}>
+        </button>
+        <button
+          className={styles.optionLabel}
+          onClick={copyMarkdownToClipboard}
+        >
           Copy Markdown
           <Tooltip open={copyMarkdown} text="Copied" close={setCopyMarkdown}>
             <CopyIcon className={styles.clickableIcon} />
           </Tooltip>
-        </label>
-        <label className={styles.optionLabel} onClick={openIssue}>
+        </button>
+        <button className={styles.optionLabel} onClick={openIssue}>
           Report Issue
           <CopyIcon className={styles.clickableIcon} />
-        </label>
+        </button>
       </Expander>
     </>
   );

packages/website/src/components/ast/PropertyName.tsx

@@ -9,6 +9,7 @@ export default function PropertyName(props: {
   onMouseEnter?: (e: SyntheticEvent) => void;
 }): JSX.Element {
   return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
     <span onClick={props.onClick} onMouseEnter={props.onMouseEnter}>
       {props.propName && (
         <span className={clsx(styles.propName, styles.clickable)}>

packages/website/src/components/config/ConfigEditor.tsx

@@ -87,6 +87,7 @@ function reducerObject(
           }
         }
       } catch {
+        // eslint-disable-next-line no-console
         console.error('ERROR parsing json');
       }
       return state;

packages/website/src/components/editor/LoadedEditor.tsx

@@ -37,6 +37,7 @@ export const LoadedEditor: React.FC<LoadedEditorProps> = ({
 
   useEffect(
     debounce(() => {
+      // eslint-disable-next-line no-console
       console.info('[Editor] linting triggered');
       const [markers, fatalMessage, codeActions] = lintCode(
         webLinter,
@@ -78,6 +79,7 @@ export const LoadedEditor: React.FC<LoadedEditorProps> = ({
         debounce(() => {
           const position = sandboxInstance.editor.getPosition();
           if (position) {
+            // eslint-disable-next-line no-console
             console.info('[Editor] updating cursor', position);
             onSelect(position);
           }
@@ -118,6 +120,7 @@ export const LoadedEditor: React.FC<LoadedEditorProps> = ({
     if (modelValue === code) {
       return;
     }
+    // eslint-disable-next-line no-console
     console.info('[Editor] updating editor model');
     sandboxInstance.editor.executeEdits(modelValue, [
       {

packages/website/src/components/hooks/useHashState.ts

@@ -45,6 +45,7 @@ const parseStateFromUrl = (hash: string): ConfigModel | undefined => {
         : undefined,
     };
   } catch (e) {
+    // eslint-disable-next-line no-console
     console.warn(e);
   }
   return undefined;
@@ -69,6 +70,7 @@ const writeStateToUrl = (newState: ConfigModel): string => {
       .map(item => `${encodeURIComponent(item[0])}=${item[1]}`)
       .join('&');
   } catch (e) {
+    // eslint-disable-next-line no-console
     console.warn(e);
   }
   return '';
@@ -141,6 +143,7 @@ function useHashState(
 
   const onHashChange = (): void => {
     const newHash = window.location.hash;
+    // eslint-disable-next-line no-console
     console.info('[State] hash change detected', newHash);
     setHash(newHash);
   };
@@ -153,6 +156,7 @@ function useHashState(
   }, []);
 
   const _setState = useCallback((cfg: Partial<ConfigModel>) => {
+    // eslint-disable-next-line no-console
     console.info('[State] updating config diff', cfg);
     setTmpState(cfg);
   }, []);

packages/website/src/components/inputs/Text.tsx

@@ -8,6 +8,7 @@ export interface DropdownProps {
   readonly type?: 'text' | 'search';
 }
 
+// eslint-disable-next-line react/display-name
 const Text = React.forwardRef((props: DropdownProps, ref): JSX.Element => {
   return (
     <input

packages/website/src/components/inputs/Tooltip.tsx

@@ -2,14 +2,14 @@ import React, { useEffect } from 'react';
 import styles from './Tooltip.module.css';
 import clsx from 'clsx';
 
-export interface CopyProps {
+export interface TooltipProps {
   readonly children: JSX.Element | (JSX.Element | false)[];
   readonly text: string;
   readonly open?: boolean;
   readonly close: (status: boolean) => void;
 }
 
-function Tooltip(props: CopyProps): JSX.Element {
+function Tooltip(props: TooltipProps): JSX.Element {
   useEffect(() => {
     if (props.open) {
       setTimeout(() => {

packages/website/src/components/layout/Expander.tsx

@@ -3,16 +3,16 @@ import styles from './Expander.module.css';
 
 import ArrowIcon from '../icons/ArrowIcon';
 
-interface MyProps {
+export interface ExpanderProps {
   readonly children?: React.ReactNode;
   readonly className?: string;
   readonly label: string;
 }
 
-export default function Expander(props: MyProps): JSX.Element {
+function Expander(props: ExpanderProps): JSX.Element {
   const [isExpanded, setIsExpanded] = useState<boolean>(true);
 
-  const handleToggle = () => {
+  const handleToggle = (): void => {
     setIsExpanded(!isExpanded);
   };
 
@@ -31,3 +31,5 @@ export default function Expander(props: MyProps): JSX.Element {
     </div>
   );
 }
+
+export default Expander;

packages/website/src/components/modals/Modal.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */
 import React from 'react';
 import clsx from 'clsx';
 import styles from './Modal.module.css';