feat(create-modal): search for templates (#6954)

* feat: style search box

* feat: search state management and cleanup

* fix: type reference

* fix: reset search query only on explicit tab state change

* fix: address comments on search semantics

* fix: grid split

Author: alexnm

packages/app/src/app/components/CreateNewSandbox/CreateSandbox/CreateSandbox.tsx

@@ -7,7 +7,7 @@ import {
   ThemeProvider,
 } from '@codesandbox/components';
 import { useActions, useAppState } from 'app/overmind';
-import React, { ReactNode, useState } from 'react';
+import React, { ReactNode, useState, useEffect } from 'react';
 import { TabStateReturn, useTabState } from 'reakit/Tab';
 import slugify from '@codesandbox/common/lib/utils/slugify';
 import { getTemplateIcon } from '@codesandbox/common/lib/utils/getTemplateIcon';
@@ -31,6 +31,8 @@ import { useOfficialTemplates } from './useOfficialTemplates';
 import { useTeamTemplates } from './useTeamTemplates';
 import { CloudBetaBadge } from '../../CloudBetaBadge';
 import { CreateSandboxParams } from './types';
+import { SearchBox } from './SearchBox';
+import { SearchResults } from './SearchResults';
 
 export const COLUMN_MEDIA_THRESHOLD = 1600;
 
@@ -80,6 +82,8 @@ export const CreateSandbox: React.FC<CreateSandboxProps> = ({
   const { hasLogIn, activeTeamInfo, user } = useAppState();
   const actions = useActions();
   const isSyncedSandboxesPage = location.pathname.includes('/synced-sandboxes');
+  const defaultSelectedTab =
+    initialTab || isSyncedSandboxesPage ? 'import' : 'quickstart';
   const isUser = user?.username === activeTeamInfo?.name;
 
   /**
@@ -131,14 +135,21 @@ export const CreateSandbox: React.FC<CreateSandboxProps> = ({
 
   const tabState = useTabState({
     orientation: 'vertical',
-    selectedId: initialTab || isSyncedSandboxesPage ? 'import' : 'quickstart',
+    selectedId: defaultSelectedTab,
   });
 
   const [viewState, setViewState] = useState<
-    'initial' | 'fromTemplate' | 'fork' /* | 'search' */
+    'initial' | 'fromTemplate' | 'fork'
   >('initial');
   // ❗️ We could combine viewState with selectedtemplate to limit the amout of states.
   const [selectedTemplate, setSelectedTemplate] = useState<TemplateFragment>();
+  const [searchQuery, setSearchQuery] = useState<string>('');
+
+  useEffect(() => {
+    if (searchQuery && tabState.selectedId) {
+      setSearchQuery('');
+    }
+  }, [tabState.selectedId]);
 
   const createFromTemplate = (
     template: TemplateFragment,
@@ -189,10 +200,21 @@ export const CreateSandbox: React.FC<CreateSandboxProps> = ({
           </HeaderInformation>
 
           {viewState === 'initial' ? (
-            <div>
-              {/* ❗️ TODO: Search */}
-              search
-            </div>
+            <SearchBox
+              value={searchQuery}
+              onChange={e => {
+                const query = e.target.value;
+                if (query) {
+                  // Reset tab panel when typing in the search query box
+                  tabState.select(null);
+                } else {
+                  // Restore the default tab when search query is removed
+                  tabState.select(defaultSelectedTab);
+                }
+
+                setSearchQuery(query);
+              }}
+            />
           ) : null}
 
           {/* isModal is undefined on /s/ page */}
@@ -280,66 +302,74 @@ export const CreateSandbox: React.FC<CreateSandboxProps> = ({
           </ModalSidebar>
 
           <ModalContent>
-            {viewState === 'initial' ? (
-              <>
-                <Panel tab={tabState} id="quickstart">
-                  <TemplateCategoryList
-                    title="Start from a template"
-                    templates={quickStartTemplates}
-                    onSelectTemplate={selectTemplate}
-                  />
-                </Panel>
-
-                <Panel tab={tabState} id="import">
-                  <Import />
-                </Panel>
-
-                {showTeamTemplates ? (
-                  <Panel tab={tabState} id="team-templates">
+            {viewState === 'initial' &&
+              (searchQuery ? (
+                <SearchResults
+                  search={searchQuery}
+                  onSelectTemplate={selectTemplate}
+                />
+              ) : (
+                <>
+                  <Panel tab={tabState} id="quickstart">
                     <TemplateCategoryList
-                      title={`${isUser ? 'My' : activeTeamInfo.name} templates`}
-                      templates={teamTemplates}
+                      title="Start from a template"
+                      templates={quickStartTemplates}
                       onSelectTemplate={selectTemplate}
                     />
                   </Panel>
-                ) : null}
-
-                <Panel tab={tabState} id="cloud-templates">
-                  <TemplateCategoryList
-                    title="Cloud templates"
-                    showBetaTag
-                    templates={officialTemplates.filter(
-                      template => template.sandbox.isV2
-                    )}
-                    onSelectTemplate={selectTemplate}
-                  />
-                </Panel>
-
-                <Panel tab={tabState} id="official-templates">
-                  <TemplateCategoryList
-                    title="Official templates"
-                    templates={officialTemplates}
-                    onSelectTemplate={selectTemplate}
-                  />
-                </Panel>
-
-                {essentialState.state === 'success'
-                  ? essentialState.essentials.map(essential => (
-                      <Panel
-                        key={essential.key}
-                        tab={tabState}
-                        id={slugify(essential.title)}
-                      >
-                        <TemplateCategoryList
-                          title={essential.title}
-                          templates={essential.templates}
-                          onSelectTemplate={selectTemplate}
-                        />
-                      </Panel>
-                    ))
-                  : null}
-              </>
-            ) : null}
+
+                  <Panel tab={tabState} id="import">
+                    <Import />
+                  </Panel>
+
+                  {showTeamTemplates ? (
+                    <Panel tab={tabState} id="team-templates">
+                      <TemplateCategoryList
+                        title={`${
+                          isUser ? 'My' : activeTeamInfo.name
+                        } templates`}
+                        templates={teamTemplates}
+                        onSelectTemplate={selectTemplate}
+                      />
+                    </Panel>
+                  ) : null}
+
+                  <Panel tab={tabState} id="cloud-templates">
+                    <TemplateCategoryList
+                      title="Cloud templates"
+                      showBetaTag
+                      templates={officialTemplates.filter(
+                        template => template.sandbox.isV2
+                      )}
+                      onSelectTemplate={selectTemplate}
+                    />
+                  </Panel>
+
+                  <Panel tab={tabState} id="official-templates">
+                    <TemplateCategoryList
+                      title="Official templates"
+                      templates={officialTemplates}
+                      onSelectTemplate={selectTemplate}
+                    />
+                  </Panel>
+
+                  {essentialState.state === 'success'
+                    ? essentialState.essentials.map(essential => (
+                        <Panel
+                          key={essential.key}
+                          tab={tabState}
+                          id={slugify(essential.title)}
+                        >
+                          <TemplateCategoryList
+                            title={essential.title}
+                            templates={essential.templates}
+                            onSelectTemplate={selectTemplate}
+                          />
+                        </Panel>
+                      ))
+                    : null}
+                </>
+              ))}
 
             {viewState === 'fromTemplate' ? (
               <FromTemplate