typescript-eslint · bradzacher · May 30, 2022 · May 26, 2022 · May 26, 2022 · May 26, 2022
diff --git a/packages/website/src/components/ASTViewerESTree.tsx b/packages/website/src/components/ASTViewerESTree.tsx
@@ -1,30 +1,25 @@
-import React, { useEffect, useState } from 'react';
+import React, { useMemo } from 'react';
 
 import ASTViewer from './ast/ASTViewer';
-import type { ASTViewerBaseProps, ASTViewerModelMap } from './ast/types';
+import type { ASTViewerBaseProps } from './ast/types';
 import type { TSESTree } from '@typescript-eslint/utils';
+
 import { serialize } from './ast/serializer/serializer';
 import { createESTreeSerializer } from './ast/serializer/serializerESTree';
 
 export interface ASTESTreeViewerProps extends ASTViewerBaseProps {
-  readonly value: TSESTree.BaseNode | string;
+  readonly value: TSESTree.BaseNode;
 }
 
 export default function ASTViewerESTree({
   value,
   position,
   onSelectNode,
 }: ASTESTreeViewerProps): JSX.Element {
-  const [model, setModel] = useState<string | ASTViewerModelMap>('');
-
-  useEffect(() => {
-    if (typeof value === 'string') {
-      setModel(value);
-    } else {
-      const astSerializer = createESTreeSerializer();
-      setModel(serialize(value, astSerializer));
-    }
-  }, [value]);
+  const model = useMemo(
+    () => serialize(value, createESTreeSerializer()),
+    [value],
+  );
 
   return (
     <ASTViewer value={model} position={position} onSelectNode={onSelectNode} />

diff --git a/packages/website/src/components/ASTViewerScope.tsx b/packages/website/src/components/ASTViewerScope.tsx
@@ -1,29 +1,23 @@
-import React, { useEffect, useState } from 'react';
+import React, { useMemo } from 'react';
 
 import ASTViewer from './ast/ASTViewer';
-import type { ASTViewerBaseProps, ASTViewerModelMap } from './ast/types';
+import type { ASTViewerBaseProps } from './ast/types';
 
 import { serialize } from './ast/serializer/serializer';
 import { createScopeSerializer } from './ast/serializer/serializerScope';
 
 export interface ASTScopeViewerProps extends ASTViewerBaseProps {
-  readonly value: Record<string, unknown> | string;
+  readonly value: Record<string, unknown>;
 }
 
 export default function ASTViewerScope({
   value,
   onSelectNode,
 }: ASTScopeViewerProps): JSX.Element {
-  const [model, setModel] = useState<string | ASTViewerModelMap>('');
-
-  useEffect(() => {
-    if (typeof value === 'string') {
-      setModel(value);
-    } else {
-      const scopeSerializer = createScopeSerializer();
-      setModel(serialize(value, scopeSerializer));
-    }
-  }, [value]);
+  const model = useMemo(
+    () => serialize(value, createScopeSerializer()),
+    [value],
+  );
 
   return <ASTViewer value={model} onSelectNode={onSelectNode} />;
 }
diff --git a/packages/website/src/components/ASTViewerTS.tsx b/packages/website/src/components/ASTViewerTS.tsx
@@ -7,7 +7,7 @@ import { serialize } from './ast/serializer/serializer';
 import { createTsSerializer } from './ast/serializer/serializerTS';
 
 export interface ASTTsViewerProps extends ASTViewerBaseProps {
-  readonly value: SourceFile | string;
+  readonly value: SourceFile;
 }
 
 function extractEnum(
@@ -41,22 +41,18 @@ export default function ASTViewerTS({
   const [typeFlags] = useState(() => extractEnum(window.ts.TypeFlags));
 
   useEffect(() => {
-    if (typeof value === 'string') {
-      setModel(value);
-    } else {
-      const scopeSerializer = createTsSerializer(
-        value,
-        syntaxKind,
-        ['NodeFlags', nodeFlags],
-        ['TokenFlags', tokenFlags],
-        ['ModifierFlags', modifierFlags],
-        ['ObjectFlags', objectFlags],
-        ['SymbolFlags', symbolFlags],
-        ['FlowFlags', flowFlags],
-        ['TypeFlags', typeFlags],
-      );
-      setModel(serialize(value, scopeSerializer));
-    }
+    const scopeSerializer = createTsSerializer(
+      value,
+      syntaxKind,
+      ['NodeFlags', nodeFlags],
+      ['TokenFlags', tokenFlags],
+      ['ModifierFlags', modifierFlags],
+      ['ObjectFlags', objectFlags],
+      ['SymbolFlags', symbolFlags],
+      ['FlowFlags', flowFlags],
+      ['TypeFlags', typeFlags],
+    );
+    setModel(serialize(value, scopeSerializer));
   }, [value, syntaxKind]);
 
   return (

diff --git a/packages/website/src/components/EditorTabs.tsx b/packages/website/src/components/EditorTabs.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import type { TabType } from './types';
+import styles from './Playground.module.css';
+import EditIcon from '@site/src/icons/edit.svg';
+
+export interface FileTabsProps {
+  readonly tabs: TabType[];
+  readonly activeTab: TabType;
+  readonly change: (tab: TabType) => void;
+  readonly showModal: () => void;
+}
+
+export default function EditorTabs({
+  tabs,
+  activeTab,
+  change,
+  showModal,
+}: FileTabsProps): JSX.Element {
+  return (
+    <div className={styles.tabContainer}>
+      <div role="tablist">
+        {tabs.map(item => {
+          return (
+            <button
+              role="tab"
+              className={styles.tabStyle}
+              key={item}
+              aria-selected={activeTab === item}
+              disabled={activeTab === item}
+              onClick={(): void => change(item)}
+            >
+              {item}
+            </button>
+          );
+        })}
+      </div>
+      {activeTab !== 'code' && (
+        <button className={styles.tabStyle} onClick={showModal}>
+          Visual Editor
+          <EditIcon width={12} height={12} />
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/packages/website/src/components/ErrorsViewer.tsx b/packages/website/src/components/ErrorsViewer.tsx
@@ -19,7 +19,7 @@ function severityClass(severity: Monaco.MarkerSeverity): string {
     case 8:
       return 'danger';
     case 4:
-      return 'caution';
+      return 'warning';
     case 2:
       return 'note';
   }

diff --git a/packages/website/src/components/OptionsSelector.tsx b/packages/website/src/components/OptionsSelector.tsx
@@ -1,27 +1,21 @@
 /* eslint-disable jsx-a11y/label-has-associated-control */
-import React, { useCallback, useState } from 'react';
+import React, { useCallback } from 'react';
 
-import ConfigEslint from './config/ConfigEslint';
-import ConfigTypeScript from './config/ConfigTypeScript';
 import Expander from './layout/Expander';
 import Dropdown from './inputs/Dropdown';
 import Checkbox from './inputs/Checkbox';
 import Tooltip from './inputs/Tooltip';
-import EditIcon from '@site/src/icons/edit.svg';
 import CopyIcon from '@site/src/icons/copy.svg';
 
 import useDebouncedToggle from './hooks/useDebouncedToggle';
 
 import { createMarkdown, createMarkdownParams } from './lib/markdown';
 
-import type { RuleDetails } from './types';
-
 import styles from './OptionsSelector.module.css';
 
-import type { CompilerFlags, ConfigModel, RulesRecord } from './types';
+import type { ConfigModel } from './types';
 
 export interface OptionsSelectorParams {
-  readonly ruleOptions: RuleDetails[];
   readonly state: ConfigModel;
   readonly setState: (cfg: Partial<ConfigModel>) => void;
   readonly tsVersions: readonly string[];
@@ -36,14 +30,11 @@ const ASTOptions = [
 ] as const;
 
 function OptionsSelector({
-  ruleOptions,
   state,
   setState,
   tsVersions,
   isLoading,
 }: OptionsSelectorParams): JSX.Element {
-  const [eslintModal, setEslintModal] = useState<boolean>(false);
-  const [typeScriptModal, setTypeScriptModal] = useState<boolean>(false);
   const [copyLink, setCopyLink] = useDebouncedToggle<boolean>(false);
   const [copyMarkdown, setCopyMarkdown] = useDebouncedToggle<boolean>(false);
 
@@ -54,26 +45,6 @@ function OptionsSelector({
     [setState],
   );
 
-  const updateRules = useCallback(
-    (rules?: RulesRecord) => {
-      if (rules) {
-        setState({ rules: rules });
-      }
-      setEslintModal(false);
-    },
-    [setState],
-  );
-
-  const updateTsConfig = useCallback(
-    (config?: CompilerFlags) => {
-      if (config) {
-        setState({ tsConfig: config });
-      }
-      setTypeScriptModal(false);
-    },
-    [setState],
-  );
-
   const copyLinkToClipboard = useCallback(() => {
     void navigator.clipboard
       .writeText(document.location.toString())
@@ -107,19 +78,6 @@ function OptionsSelector({
 
   return (
     <>
-      {state.rules && ruleOptions.length > 0 && (
-        <ConfigEslint
-          isOpen={eslintModal}
-          ruleOptions={ruleOptions}
-          rules={state.rules}
-          onClose={updateRules}
-        />
-      )}
-      <ConfigTypeScript
-        isOpen={typeScriptModal}
-        config={state.tsConfig}
-        onClose={updateTsConfig}
-      />
       <Expander label="Info">
         <label className={styles.optionLabel}>
           TypeScript
@@ -170,20 +128,6 @@ function OptionsSelector({
             options={['script', 'module']}
           />
         </label>
-        <button
-          className={styles.optionLabel}
-          onClick={(): void => setEslintModal(true)}
-        >
-          Eslint Config
-          <EditIcon />
-        </button>
-        <button
-          className={styles.optionLabel}
-          onClick={(): void => setTypeScriptModal(true)}
-        >
-          TypeScript Config
-          <EditIcon />
-        </button>
       </Expander>
       <Expander label="Actions">
         <button className={styles.optionLabel} onClick={copyLinkToClipboard}>

diff --git a/packages/website/src/components/Playground.module.css b/packages/website/src/components/Playground.module.css
@@ -1,13 +1,18 @@
+:root {
+  --playground-main-color: var(--ifm-background-surface-color);
+  --playground-secondary-color: var(--ifm-color-emphasis-100);
+}
+
 .options {
   width: 20rem;
-  background: var(--ifm-background-surface-color);
+  background: var(--playground-main-color);
   overflow: auto;
 }
 
 .sourceCode {
   height: 100%;
   width: 50%;
-  border: 1px solid var(--ifm-color-emphasis-100);
+  border: 1px solid var(--playground-secondary-color);
 }
 
 .codeBlocks {
@@ -20,7 +25,7 @@
 .astViewer {
   height: 100%;
   width: 50%;
-  border: 1px solid var(--ifm-color-emphasis-100);
+  border: 1px solid var(--playground-secondary-color);
   padding: 0;
   overflow: auto;
   word-wrap: initial;
@@ -37,3 +42,67 @@
   top: var(--ifm-navbar-height);
   z-index: calc(var(--ifm-z-index-fixed) - 1);
 }
+
+.tabContainer {
+  display: flex;
+  justify-content: space-between;
+  background: var(--playground-main-color);
+  border-bottom: 1px solid var(--playground-secondary-color);
+}
+
+.tabCode {
+  height: calc(100%);
+}
+
+.tabStyle {
+  border: none;
+  border-right: 1px solid var(--playground-secondary-color);
+  background: var(--playground-main-color);
+  color: var(--ifm-color-emphasis-700);
+  padding: 0.5rem 1rem;
+  cursor: pointer;
+}
+
+.tabStyle svg {
+  margin-left: 0.3rem;
+}
+
+.tabStyle:hover {
+  background: var(--playground-secondary-color);
+}
+
+.tabStyle:disabled {
+  background: var(--playground-secondary-color);
+  color: var(--ifm-color-emphasis-900);
+}
+
+@media only screen and (max-width: 996px) {
+  .codeContainer {
+    display: block;
+    width: 100%;
+    position: static;
+  }
+  .codeBlocks {
+    display: block;
+    width: 100%;
+  }
+
+  .options {
+    width: 100%;
+  }
+
+  .tabCode {
+    height: calc(30rem - 3.2rem);
+  }
+
+  .astViewer,
+  .sourceCode {
+    height: 30rem;
+    width: 100%;
+  }
+
+  .astViewer {
+    height: auto;
+    max-height: 30rem;
+  }
+}