From 7f416c4150c2711dbd7b3b467261224ab9b3a711 Mon Sep 17 00:00:00 2001 From: jaipaljadeja Date: Sat, 23 Mar 2024 17:42:58 +0530 Subject: [PATCH 1/5] 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, ) => 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(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 = ({ -
- - - {isExampleSelectorOpen && ( -
    -
  • - Cairo Examples -
  • - {examplesOptions.map((option, idx) => ( -
  • - e.key === 'Enter' && onExampleSelectorItemClick(option) - } - onClick={() => onExampleSelectorItemClick(option)} - > -
    -

    {option.label}

    -
    -
  • - ))} -
- )} -
+
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 ( + { executionState, executionPanicMessage, compileCairoCode, - cairoLangCompilerVersion, serializedOutput, casmInstructions, activeCasmInstructionIndex, @@ -339,14 +333,15 @@ const Editor = ({ readOnly = false }: Props) => { return ( <>
{ isThreeColumnLayout && 'md:w-1/3', )} > -
- {isFullScreen && ( -
- cairovm - cairo - codes -
- )} +
setCodeType(value)} + withLogo={isFullScreen} />
-
+
{codeType === CodeType.CASM ? ( {
@@ -442,43 +428,7 @@ const Editor = ({ readOnly = false }: Props) => {
-
-
- - {cairoLangCompilerVersion !== '' - ? `Cairo Compiler v${cairoLangCompilerVersion}` - : ' '} - -
- {isFullScreen && ( -
-
- - - - -
- - Made with ❤️ by{' '} - - Walnut - - -
- )} -
+
{ - const { isFullScreen } = useContext(AppUiContext) - const { tracerData, breakPoints, @@ -171,36 +168,33 @@ export const Tracer = () => { return ( <> -
+
-
- {tracerData && currentTraceEntry && trace && breakPoints && ( - <> -
- -
- - )} -
-
+ + {tracerData && currentTraceEntry && trace && breakPoints && ( +
+ +
+ )} + +
-
+
{selectedConsoleTab === IConsoleTab.Console && } {selectedConsoleTab === IConsoleTab.DebugInfo && ( diff --git a/components/layouts/Footer.tsx b/components/layouts/Footer.tsx index f51b53d..19b9b93 100644 --- a/components/layouts/Footer.tsx +++ b/components/layouts/Footer.tsx @@ -1,63 +1,53 @@ -import { useContext } from 'react' - -import { AppUiContext } from 'context/appUiContext' - import { GITHUB_REPO_URL } from 'util/constants' import { Container } from 'components/ui/Container' const Footer = () => { - const { isFullScreen } = useContext(AppUiContext) - return ( - <> - {!isFullScreen && ( - - )} - + ) } diff --git a/components/layouts/Home.tsx b/components/layouts/Home.tsx index e9155b7..a4df1a4 100644 --- a/components/layouts/Home.tsx +++ b/components/layouts/Home.tsx @@ -1,6 +1,7 @@ import { useContext, PropsWithChildren } from 'react' import { GoogleAnalytics } from '@next/third-parties/google' +import cn from 'classnames' import type { NextPage } from 'next' import Head from 'next/head' @@ -33,13 +34,11 @@ const HomeLayout: NextPage = ({ children }) => {
-
diff --git a/components/layouts/Nav.tsx b/components/layouts/Nav.tsx index baa797c..1393031 100644 --- a/components/layouts/Nav.tsx +++ b/components/layouts/Nav.tsx @@ -1,10 +1,6 @@ -import { useContext } from 'react' - import cn from 'classnames' import Link from 'next/link' -import { AppUiContext } from 'context/appUiContext' - import { GITHUB_REPO_URL } from 'util/constants' import KBarButton from 'components/KBar/Button' @@ -15,13 +11,9 @@ import ToggleThreeColumnLayout from 'components/ToggleThreeColumnLayout' import { Container, Logo } from 'components/ui' const Nav = () => { - const { isFullScreen } = useContext(AppUiContext) - return (