chore: add a ? button to display a modal explaining how to use the ar…

…guments input field
walnuthq · Feb 13, 2024 · 37d8d3e · 37d8d3e
1 parent 5526e77
commit 37d8d3e
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 4 deletions.
diff --git a/components/Editor/EditorControls.tsx b/components/Editor/EditorControls.tsx
@@ -1,9 +1,9 @@
-import { useRef } from 'react'
+import { useRef, useState } from 'react'
 
-import { RiLinksLine } from '@remixicon/react'
+import { RiLinksLine, RiQuestionLine } from '@remixicon/react'
 import cn from 'classnames'
 
-import { Button, Input } from 'components/ui'
+import { Button, Input, Modal } from 'components/ui'
 
 type EditorControlsProps = {
   isCompileDisabled: boolean
@@ -23,6 +23,68 @@ const EditorControls = ({
   onProgramArgumentsUpdate,
 }: EditorControlsProps) => {
   const inputRef = useRef<HTMLInputElement>(null)
+  const [showArgumentsHelper, setShowArgumentsHelper] = useState(false)
+
+  const argumentHelperModal = (
+    <Modal
+      title="Program arguments helper"
+      visible={showArgumentsHelper}
+      setVisible={setShowArgumentsHelper}
+    >
+      <div
+        className="text-sm md:text-md lg:text-lg text-gray-900 dark:text-gray-900"
+        role="button"
+        tabIndex={0}
+        onClick={(e) => e.stopPropagation()}
+        onKeyDown={(e) => e.stopPropagation()}
+      >
+        <p className="my-2">
+          This input field accepts a list of program arguments separated by a{' '}
+          <span className="font-semibold">whitespace</span>.
+        </p>
+        <p className="my-2">Each argument could be:</p>
+        <ul className="list-disc ml-4">
+          <li>
+            a <span className="font-semibold">single</span>
+            <code className="mx-1 text-orange-600">felt252</code>,
+          </li>
+          <li>
+            an <span className="font-semibold">array</span> of
+            <code className="mx-1 text-orange-600">felt252</code> where items
+            are also separated by a{' '}
+            <span className="font-semibold">whitespace</span>.
+          </li>
+        </ul>
+        <p className="mt-2 italic">
+          Note that only decimal values are supported for{' '}
+          <code className="mx-1 text-orange-600">felt252</code>. That means
+          neither hexadecimal value nor short string are supported yet.
+        </p>
+        <p className="mt-4">
+          Of course, the signature of your{' '}
+          <code className="mx-1 text-orange-600">main()</code> function must be
+          adapted accordingly.
+        </p>
+        <p className="mt-6">
+          For example,{' '}
+          <code className="px-1 bg-gray-200 text-orange-600">1 [3 4 5] 9</code>{' '}
+          contains 3 parameters and the corresponding main function should be{' '}
+          <code className="mx-1 text-orange-600">
+            main(x: felt252, y: Array&lt;felt252&gt;, z: felt252)
+          </code>
+          .
+        </p>
+      </div>
+    </Modal>
+  )
+  const argumentHelperIcon = (
+    <>
+      <button onClick={() => setShowArgumentsHelper(true)}>
+        <RiQuestionLine size={24} className="text-indigo-500" />
+      </button>
+      {showArgumentsHelper && argumentHelperModal}
+    </>
+  )
 
   return (
     <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-x-4 px-4 py-4 md:py-2 md:border-r border-gray-200 dark:border-black-500">
@@ -42,6 +104,7 @@ const EditorControls = ({
 
       <Input
         ref={inputRef}
+        rightIcon={argumentHelperIcon}
         onChange={(e) => {
           onProgramArgumentsUpdate(e.target.value)
         }}
@@ -56,7 +119,6 @@ const EditorControls = ({
           'text-red-500': !areProgramArgumentsValid,
         })}
       />
-
       <div>
         <Button
           onClick={onCompileRun}

diff --git a/components/ui/Input.tsx b/components/ui/Input.tsx
@@ -5,6 +5,7 @@ import cn from 'classnames'
 type Props = {
   searchable?: boolean
   ref?: ForwardedRef<HTMLInputElement>
+  rightIcon?: JSX.Element
   className?: string
   inputClassName?: string
   readOnly?: boolean
@@ -14,6 +15,7 @@ export const Input: React.FC<Props> = forwardRef(
   (
     {
       searchable = false,
+      rightIcon = null,
       onFocus,
       onBlur,
       className,
@@ -68,6 +70,7 @@ export const Input: React.FC<Props> = forwardRef(
             )}
           </>
         )}
+        {rightIcon && rightIcon}
       </div>
     )
   },

diff --git a/components/ui/Modal.tsx b/components/ui/Modal.tsx
@@ -0,0 +1,36 @@
+export type ModalProps = {
+  title: string
+  visible: boolean
+  setVisible: (_visible: boolean) => void
+  children: React.ReactNode
+}
+
+export const Modal = ({
+  title,
+  visible,
+  setVisible,
+  children,
+}: ModalProps): JSX.Element => {
+  return visible ? (
+    <div
+      className="flex fixed top-0 left-0 z-80 w-screen h-screen bg-gray-800/30 dark:bg-gray-800/50 justify-center items-center"
+      role="button"
+      tabIndex={0}
+      onClick={() => setVisible(false)}
+      onKeyDown={() => setVisible(false)}
+    >
+      <div className="fixed inset-0 z-50 overflow-auto bg-black/80 flex">
+        <div className="max-w-lg lg:max-w-3xl relative p-4 bg-white w-full m-auto flex-col flex rounded-lg">
+          <div className="flex flex-row justify-between pb-2 border-b border-slate-300 mb-4">
+            <h2 className="text-sm md:text-md lg:text-lg text-gray-900 dark:text-gray-900 font-semibold">
+              {title}
+            </h2>
+          </div>
+          {children}
+        </div>
+      </div>
+    </div>
+  ) : (
+    <></>
+  )
+}
diff --git a/components/ui/index.ts b/components/ui/index.ts
@@ -9,3 +9,4 @@ export * from './Message'
 export * from './Radio'
 export * from './RelativeLink'
 export * from './StackBox'
+export * from './Modal'