chore(website): [playground] add tabs to ast viewer and update design (…

…#6735)

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

@@ -1,7 +1,4 @@
 .searchContainer {
   display: flex;
   margin: 0 0 0.5rem 0;
-  position: sticky;
-  top: 0;
-  left: 0;
 }

packages/website/src/components/OptionsSelector.tsx

@@ -22,13 +22,6 @@ export interface OptionsSelectorParams {
   readonly isLoading: boolean;
 }
 
-const ASTOptions = [
-  { value: false, label: 'Disabled' },
-  { value: 'es', label: 'ESTree' },
-  { value: 'ts', label: 'TypeScript' },
-  { value: 'scope', label: 'Scope' },
-] as const;
-
 function OptionsSelectorContent({
   state,
   setState,
@@ -109,15 +102,6 @@ function OptionsSelectorContent({
             className={styles.optionCheckbox}
           />
         </label>
-        <label className={styles.optionLabel}>
-          AST Viewer
-          <Dropdown
-            name="showAST"
-            value={state.showAST}
-            onChange={(e): void => setState({ showAST: e })}
-            options={ASTOptions}
-          />
-        </label>
         <label className={styles.optionLabel}>
           Source type
           <Dropdown

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

@@ -45,39 +45,17 @@
   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);
+.playgroundInfoHeader {
+  position: sticky;
+  top: 0;
+  left: 0;
+  z-index: 1;
 }
 
 .tabCode {
   height: calc(100% - 32px);
 }
 
-.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;

packages/website/src/components/Playground.tsx

@@ -1,13 +1,3 @@
-import ASTViewerScope from '@site/src/components/ASTViewerScope';
-import ConfigEslint from '@site/src/components/config/ConfigEslint';
-import ConfigTypeScript from '@site/src/components/config/ConfigTypeScript';
-import {
-  defaultEslintConfig,
-  defaultTsConfig,
-} from '@site/src/components/config/utils';
-import EditorTabs from '@site/src/components/EditorTabs';
-import { ErrorsViewer, ErrorViewer } from '@site/src/components/ErrorsViewer';
-import { ESQueryFilter } from '@site/src/components/ESQueryFilter';
 import type { TSESTree } from '@typescript-eslint/utils';
 import clsx from 'clsx';
 import type * as ESQuery from 'esquery';
@@ -17,10 +7,18 @@ import type { SourceFile } from 'typescript';
 
 import { useMediaQuery } from '../hooks/useMediaQuery';
 import ASTViewerESTree from './ASTViewerESTree';
+import ASTViewerScope from './ASTViewerScope';
 import ASTViewerTS from './ASTViewerTS';
+import { detailTabs } from './config';
+import ConfigEslint from './config/ConfigEslint';
+import ConfigTypeScript from './config/ConfigTypeScript';
+import { defaultEslintConfig, defaultTsConfig } from './config/utils';
 import { EditorEmbed } from './editor/EditorEmbed';
 import { LoadingEditor } from './editor/LoadingEditor';
+import { ErrorsViewer, ErrorViewer } from './ErrorsViewer';
+import { ESQueryFilter } from './ESQueryFilter';
 import useHashState from './hooks/useHashState';
+import EditorTabs from './layout/EditorTabs';
 import Loader from './layout/Loader';
 import { shallowEqual } from './lib/shallowEqual';
 import OptionsSelector from './OptionsSelector';
@@ -138,8 +136,9 @@ function Playground(): JSX.Element {
               {isLoading && <Loader />}
               <EditorTabs
                 tabs={['code', 'tsconfig', 'eslintrc']}
-                activeTab={activeTab}
+                active={activeTab}
                 change={setTab}
+                showVisualEditor={activeTab !== 'code'}
                 showModal={(): void => setShowModal(activeTab)}
               />
               <div className={styles.tabCode}>
@@ -165,12 +164,20 @@ function Playground(): JSX.Element {
               />
             </div>
             <div className={styles.astViewer}>
-              {state.showAST === 'es' && (
-                <ESQueryFilter
-                  onChange={setEsQueryFilter}
-                  onError={setEsQueryError}
+              <div className={styles.playgroundInfoHeader}>
+                <EditorTabs
+                  tabs={detailTabs}
+                  active={state.showAST ?? false}
+                  change={(v): void => setState({ showAST: v })}
                 />
-              )}
+                {state.showAST === 'es' && (
+                  <ESQueryFilter
+                    onChange={setEsQueryFilter}
+                    onError={setEsQueryError}
+                  />
+                )}
+              </div>
+
               {(state.showAST === 'ts' && tsAst && (
                 <ASTViewerTS
                   value={tsAst}

packages/website/src/components/config.ts

@@ -0,0 +1,6 @@
+export const detailTabs = [
+  { value: false as const, label: 'Errors' },
+  { value: 'es' as const, label: 'ESTree' },
+  { value: 'ts' as const, label: 'TypeScript' },
+  { value: 'scope' as const, label: 'Scope' },
+];

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

@@ -1,5 +1,5 @@
 import Dropdown from '@site/src/components/inputs/Dropdown';
-import Modal from '@site/src/components/modals/Modal';
+import Modal from '@site/src/components/layout/Modal';
 import clsx from 'clsx';
 import React, { useCallback, useEffect, useReducer, useState } from 'react';
 

packages/website/src/components/layout/EditorTabs.module.css

@@ -0,0 +1,30 @@
+.tabContainer {
+  display: flex;
+  justify-content: space-between;
+  background: var(--playground-main-color);
+  border-bottom: 1px solid var(--ifm-color-emphasis-200);
+}
+
+.tabStyle {
+  --ifm-button-padding-horizontal: 1rem;
+  --ifm-button-background-color: var(--ifm-background-surface-color);
+  --ifm-button-color: var(--ifm-color-emphasis-700);
+  --ifm-button-border-color: var(--ifm-color-emphasis-200);
+
+  font-size: 0.75rem;
+}
+
+.tabStyle svg {
+  margin-left: 0.3rem;
+}
+
+.tabStyle:hover {
+  --ifm-button-background-color: var(--playground-secondary-color);
+}
+
+.tabStyle:disabled {
+  --ifm-button-background-color: var(--playground-secondary-color);
+  --ifm-button-color: var(--ifm-color-emphasis-900);
+
+  opacity: 1;
+}

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

@@ -0,0 +1,55 @@
+import EditIcon from '@site/src/icons/edit.svg';
+import clsx from 'clsx';
+import React from 'react';
+
+import styles from './EditorTabs.module.css';
+
+export interface EditorTabsProps<T extends string | boolean> {
+  readonly tabs: ({ value: T; label: string } | T)[];
+  readonly active: T;
+  readonly showVisualEditor?: boolean;
+  readonly change: (name: T) => void;
+  readonly showModal?: (name: T) => void;
+}
+
+function EditorTabs<T extends string | boolean>({
+  tabs,
+  active,
+  showVisualEditor,
+  change,
+  showModal,
+}: EditorTabsProps<T>): JSX.Element {
+  const tabsWithLabels = tabs.map(tab =>
+    typeof tab !== 'object' ? { value: tab, label: String(tab) } : tab,
+  );
+
+  return (
+    <div className={clsx(styles.tabContainer, 'padding--xs')}>
+      <div role="tablist" className="button-group">
+        {tabsWithLabels.map(item => (
+          <button
+            role="tab"
+            className={clsx(styles.tabStyle, 'button')}
+            key={item.label}
+            aria-selected={active === item.value}
+            disabled={active === item.value}
+            onClick={(): void => change(item.value)}
+          >
+            {item.label}
+          </button>
+        ))}
+      </div>
+      {showVisualEditor && (
+        <button
+          className={clsx(styles.tabStyle, 'button')}
+          onClick={(): void => showModal?.(active)}
+        >
+          Visual Editor
+          <EditIcon width={12} height={12} />
+        </button>
+      )}
+    </div>
+  );
+}
+
+export default EditorTabs;

packages/website/src/components/modals/Modal.module.css → packages/website/src/components/layout/Modal.module.css

@@ -1,14 +1,14 @@
 .modal {
   display: none;
   position: fixed;
-  z-index: 1;
+  z-index: 2;
   padding-top: 100px;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   overflow: auto;
-  background-color: rgba(0, 0, 0, 0.4);
+  background-color: rgb(0 0 0 / 40%);
 }
 
 .modal.open {
@@ -32,6 +32,7 @@
     top: -30rem;
     opacity: 0;
   }
+
   to {
     top: 0;
     opacity: 1;