From 7f416c4150c2711dbd7b3b467261224ab9b3a711 Mon Sep 17 00:00:00 2001
From: jaipaljadeja <jadejajaipal5@gmail.com>
Date: Sat, 23 Mar 2024 17:42:58 +0530
Subject: [PATCH 1/4] Refactor: Example Selector

---
 components/Editor/EditorControls.tsx  | 80 ++-----------------------
 components/Editor/ExampleSelector.tsx | 85 +++++++++++++++++++++++++++
 components/Editor/examples.ts         | 13 +++-
 components/Editor/index.tsx           |  5 +-
 4 files changed, 104 insertions(+), 79 deletions(-)
 create mode 100644 components/Editor/ExampleSelector.tsx

diff --git a/components/Editor/EditorControls.tsx b/components/Editor/EditorControls.tsx
index b6abaf3..1b5fdee 100644
--- a/components/Editor/EditorControls.tsx
+++ b/components/Editor/EditorControls.tsx
@@ -1,13 +1,14 @@
-import { useMemo, useRef, useState } from 'react'
+import { useRef } from 'react'
 
-import { RiLinksLine, RiQuestionLine, RiFileCodeLine } from '@remixicon/react'
+import { RiLinksLine, RiQuestionLine } from '@remixicon/react'
 import cn from 'classnames'
 import { Priority, useRegisterActions } from 'kbar'
 import { OnChangeValue } from 'react-select'
 
-import examples from 'components/Editor/examples'
 import { Button, Input } from 'components/ui'
 
+import ExampleSelector from './ExampleSelector'
+
 type SelectOption = {
   value: number
   label: string
@@ -17,7 +18,6 @@ type EditorControlsProps = {
   isCompileDisabled: boolean
   programArguments: string
   areProgramArgumentsValid: boolean
-  exampleName: number
   handleChangeExampleOption: (
     option: OnChangeValue<SelectOption, false>,
   ) => void
@@ -31,7 +31,6 @@ const EditorControls = ({
   isCompileDisabled,
   programArguments,
   areProgramArgumentsValid,
-  exampleName,
   handleChangeExampleOption,
   onCopyPermalink,
   onCompileRun,
@@ -39,7 +38,6 @@ const EditorControls = ({
   onShowArgumentsHelper,
 }: EditorControlsProps) => {
   const inputRef = useRef<HTMLInputElement>(null)
-  const [isExampleSelectorOpen, setIsExampleSelectorOpen] = useState(false)
 
   const actions = [
     {
@@ -70,27 +68,7 @@ const EditorControls = ({
 
   useRegisterActions(actions, [onCompileRun, onCopyPermalink])
 
-  const CairoNameExamples = useMemo(
-    () => [
-      'Simple',
-      'Variables & mutability',
-      'Type casting',
-      'Control flow',
-      'Functions',
-      'Arrays',
-      'Dictionaries',
-      'Ownership',
-    ],
-    [],
-  )
-
-  const examplesOptions = examples.Cairo.map((example, i) => ({
-    value: i,
-    label: CairoNameExamples[i],
-  }))
-
-  const onExampleSelectorItemClick = (option: SelectOption) => {
-    setIsExampleSelectorOpen(false)
+  const onExampleChange = (option: SelectOption | null) => {
     handleChangeExampleOption(option)
   }
 
@@ -108,53 +86,7 @@ const EditorControls = ({
           <RiLinksLine size={16} />
         </Button>
 
-        <div className="relative">
-          <Button
-            onClick={() => setIsExampleSelectorOpen((prev) => !prev)}
-            transparent
-            padded={false}
-            tooltip="Change Cairo code example"
-            tooltipId="change-cairo-example"
-            className={`p-2 text-indigo-500 hover:text-indigo-600 focus:outline-none ${cn(
-              {
-                'bg-indigo-100': isExampleSelectorOpen,
-              },
-            )}`}
-          >
-            <RiFileCodeLine size={16} />
-          </Button>
-
-          {isExampleSelectorOpen && (
-            <ul
-              className="absolute left-0 bottom-0 z-20 mb-10 w-72 border-0 border-slate-200 origin-top-right overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-gray-200 focus:outline-none"
-              tabIndex={-1}
-              role="listbox"
-              aria-labelledby="listbox-label"
-              aria-activedescendant="listbox-option-0"
-            >
-              <li className="p-4 border-l-2 border-white text-2xs text-gray-400 uppercase dark:text-gray-600">
-                Cairo Examples
-              </li>
-              {examplesOptions.map((option, idx) => (
-                <li
-                  key={option.value}
-                  className="text-gray-900 dark:text-gray-200 border-l-2 border-white cursor-pointer select-none p-4 text-sm hover:bg-gray-50 dark:hover:bg-black-50 hover:border-indigo-500"
-                  id={`listbox-option-${idx}`}
-                  role="option"
-                  aria-selected={option.value === exampleName}
-                  onKeyDown={(e) =>
-                    e.key === 'Enter' && onExampleSelectorItemClick(option)
-                  }
-                  onClick={() => onExampleSelectorItemClick(option)}
-                >
-                  <div className="flex flex-col">
-                    <p>{option.label}</p>
-                  </div>
-                </li>
-              ))}
-            </ul>
-          )}
-        </div>
+        <ExampleSelector onExampleChange={onExampleChange} />
       </div>
 
       <div className="flex flex-row grow gap-x-2 items-center justify-end">
diff --git a/components/Editor/ExampleSelector.tsx b/components/Editor/ExampleSelector.tsx
new file mode 100644
index 0000000..2e6ceb9
--- /dev/null
+++ b/components/Editor/ExampleSelector.tsx
@@ -0,0 +1,85 @@
+import React, { useId } from 'react'
+
+import { RiFileCodeLine } from '@remixicon/react'
+import Select, {
+  components,
+  DropdownIndicatorProps,
+  StylesConfig,
+  GroupBase,
+} from 'react-select'
+
+import { Button } from '../ui'
+
+import { Examples, CairoExampleNames } from './examples'
+
+type SelectOption = {
+  value: number
+  label: string
+}
+
+type Props = {
+  onExampleChange: (option: SelectOption | null) => void
+}
+
+const examplesOptions = Examples.Cairo.map((_, i) => ({
+  value: i,
+  label: CairoExampleNames[i],
+}))
+
+function ExampleSelector({ onExampleChange }: Props) {
+  return (
+    <Select
+      onChange={onExampleChange}
+      options={examplesOptions}
+      components={{
+        DropdownIndicator,
+      }}
+      controlShouldRenderValue={false}
+      classNamePrefix="select"
+      styles={reactSelectStyles}
+      menuPlacement="auto"
+      isSearchable={false}
+      instanceId={useId()}
+    />
+  )
+}
+
+export default ExampleSelector
+
+const reactSelectStyles: StylesConfig<
+  SelectOption,
+  false,
+  GroupBase<SelectOption>
+> = {
+  // as we dont want to show value field in react-select
+  // and just want to show an icon, but input field takes some space
+  // so we hide the valueContainer with css properties
+  // Question: Why not remove the ValueContainer completely from 'components' prop in react-select?
+  // Ans: react-select needs a valuefield
+  //      as many features like click outside to close drop down etc depends on it
+  //      so we just add display none (it doesn't hurt)
+  valueContainer: (styles) => ({
+    ...styles,
+    width: '0',
+    opacity: 0,
+    padding: '0 !important',
+  }),
+}
+
+const DropdownIndicator = (props: DropdownIndicatorProps<SelectOption>) => {
+  return (
+    <div>
+      <components.DropdownIndicator {...props}>
+        <Button
+          transparent
+          padded={false}
+          tooltip="Cairo Examples"
+          tooltipId="cairo-examples"
+          className="p-2 text-indigo-500 hover:text-indigo-600 focus:outline-none"
+        >
+          <RiFileCodeLine size={16} />
+        </Button>
+      </components.DropdownIndicator>
+    </div>
+  )
+}
diff --git a/components/Editor/examples.ts b/components/Editor/examples.ts
index c0af3f8..83ad7a3 100644
--- a/components/Editor/examples.ts
+++ b/components/Editor/examples.ts
@@ -1,6 +1,6 @@
 import { ExampleCode } from './types'
 
-const examples: ExampleCode = {
+export const Examples: ExampleCode = {
   Cairo: [
     `use core::felt252;
 
@@ -410,4 +410,13 @@ ret;
   //   ],
 }
 
-export default examples
+export const CairoExampleNames = [
+  'Simple',
+  'Variables & mutability',
+  'Type casting',
+  'Control flow',
+  'Functions',
+  'Arrays',
+  'Dictionaries',
+  'Ownership',
+]
diff --git a/components/Editor/index.tsx b/components/Editor/index.tsx
index dbac5ee..6a78196 100644
--- a/components/Editor/index.tsx
+++ b/components/Editor/index.tsx
@@ -26,7 +26,7 @@ import { getAbsoluteURL } from 'util/browser'
 import { isArgumentStringValid } from 'util/compiler'
 import { codeHighlight, isEmpty, objToQueryString } from 'util/string'
 
-import examples from 'components/Editor/examples'
+import { Examples } from 'components/Editor/examples'
 import { Tracer } from 'components/Tracer'
 
 import { AppUiContext, CodeType, LogType } from '../../context/appUiContext'
@@ -92,7 +92,7 @@ const Editor = ({ readOnly = false }: Props) => {
         getSetting(Setting.EditorCodeType) || CodeType.Cairo
 
       setCodeType(initialCodeType)
-      setCairoCode(examples[initialCodeType][exampleOption])
+      setCairoCode(Examples[initialCodeType][exampleOption])
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [settingsLoaded && router.isReady, exampleOption])
@@ -391,7 +391,6 @@ const Editor = ({ readOnly = false }: Props) => {
               onProgramArgumentsUpdate={handleProgramArgumentsUpdate}
               onCompileRun={handleCompileRun}
               onShowArgumentsHelper={() => setShowArgumentsHelper(true)}
-              exampleName={exampleOption}
               handleChangeExampleOption={(newExample) =>
                 newExample !== null
                   ? setExampleOption(newExample.value)

From f230eeea613eb8f1a129eca86a8b8328d9ebb724 Mon Sep 17 00:00:00 2001
From: jaipaljadeja <jadejajaipal5@gmail.com>
Date: Sat, 23 Mar 2024 17:53:21 +0530
Subject: [PATCH 2/4] Added: Dropdown open state styles

---
 components/Editor/ExampleSelector.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/components/Editor/ExampleSelector.tsx b/components/Editor/ExampleSelector.tsx
index 2e6ceb9..57601f3 100644
--- a/components/Editor/ExampleSelector.tsx
+++ b/components/Editor/ExampleSelector.tsx
@@ -1,6 +1,7 @@
 import React, { useId } from 'react'
 
 import { RiFileCodeLine } from '@remixicon/react'
+import cn from 'classnames'
 import Select, {
   components,
   DropdownIndicatorProps,
@@ -75,7 +76,12 @@ const DropdownIndicator = (props: DropdownIndicatorProps<SelectOption>) => {
           padded={false}
           tooltip="Cairo Examples"
           tooltipId="cairo-examples"
-          className="p-2 text-indigo-500 hover:text-indigo-600 focus:outline-none"
+          className={cn(
+            'p-2 text-indigo-500 hover:text-indigo-600 focus:outline-none',
+            props.selectProps.menuIsOpen
+              ? 'bg-black-900/5 dark:bg-white/5'
+              : '',
+          )}
         >
           <RiFileCodeLine size={16} />
         </Button>

From 935d72065fbec022d13f0676e21909309bb6553f Mon Sep 17 00:00:00 2001
From: jaipaljadeja <jadejajaipal5@gmail.com>
Date: Sat, 23 Mar 2024 17:59:43 +0530
Subject: [PATCH 3/4] removed unnecessary div

---
 components/Editor/ExampleSelector.tsx | 32 ++++++++++++---------------
 1 file changed, 14 insertions(+), 18 deletions(-)

diff --git a/components/Editor/ExampleSelector.tsx b/components/Editor/ExampleSelector.tsx
index 57601f3..d365678 100644
--- a/components/Editor/ExampleSelector.tsx
+++ b/components/Editor/ExampleSelector.tsx
@@ -69,23 +69,19 @@ const reactSelectStyles: StylesConfig<
 
 const DropdownIndicator = (props: DropdownIndicatorProps<SelectOption>) => {
   return (
-    <div>
-      <components.DropdownIndicator {...props}>
-        <Button
-          transparent
-          padded={false}
-          tooltip="Cairo Examples"
-          tooltipId="cairo-examples"
-          className={cn(
-            'p-2 text-indigo-500 hover:text-indigo-600 focus:outline-none',
-            props.selectProps.menuIsOpen
-              ? 'bg-black-900/5 dark:bg-white/5'
-              : '',
-          )}
-        >
-          <RiFileCodeLine size={16} />
-        </Button>
-      </components.DropdownIndicator>
-    </div>
+    <components.DropdownIndicator {...props}>
+      <Button
+        transparent
+        padded={false}
+        tooltip="Cairo Examples"
+        tooltipId="cairo-examples"
+        className={cn(
+          'p-2 text-indigo-500 hover:text-indigo-600 focus:outline-none',
+          props.selectProps.menuIsOpen ? 'bg-black-900/5 dark:bg-white/5' : '',
+        )}
+      >
+        <RiFileCodeLine size={16} />
+      </Button>
+    </components.DropdownIndicator>
   )
 }

From fd217406edf2def3686f7d45a9651099cee0c94a Mon Sep 17 00:00:00 2001
From: jaipaljadeja <jadejajaipal5@gmail.com>
Date: Mon, 25 Mar 2024 21:09:55 +0530
Subject: [PATCH 4/4] Fix: Open Example Selector Menu on Top

---
 components/Editor/ExampleSelector.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Editor/ExampleSelector.tsx b/components/Editor/ExampleSelector.tsx
index d365678..be44bca 100644
--- a/components/Editor/ExampleSelector.tsx
+++ b/components/Editor/ExampleSelector.tsx
@@ -38,7 +38,7 @@ function ExampleSelector({ onExampleChange }: Props) {
       controlShouldRenderValue={false}
       classNamePrefix="select"
       styles={reactSelectStyles}
-      menuPlacement="auto"
+      menuPlacement="top"
       isSearchable={false}
       instanceId={useId()}
     />