From 12013907f8fc9bfa5a4f911be78f06e70978e855 Mon Sep 17 00:00:00 2001 From: Valtteri Karesto Date: Tue, 3 May 2022 14:02:16 +0300 Subject: [PATCH 1/9] Added radix popover --- package.json | 1 + yarn.lock | 21 +++++++++++++++++++++ 2 files changed, 22 insertions(+) diff --git a/package.json b/package.json index 04c4ee3..d8e35ae 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "@radix-ui/react-dropdown-menu": "^0.1.1", "@radix-ui/react-id": "^0.1.1", "@radix-ui/react-label": "^0.1.5", + "@radix-ui/react-popover": "^0.1.6", "@radix-ui/react-tooltip": "^0.1.7", "@stitches/react": "^1.2.6-0", "base64-js": "^1.5.1", diff --git a/yarn.lock b/yarn.lock index 3307d39..bc6bd04 100644 --- a/yarn.lock +++ b/yarn.lock @@ -709,6 +709,27 @@ aria-hidden "^1.1.1" react-remove-scroll "^2.4.0" +"@radix-ui/react-popover@^0.1.6": + version "0.1.6" + resolved "https://registry.yarnpkg.com/@radix-ui/react-popover/-/react-popover-0.1.6.tgz#788e969239d9c55239678e615ab591b6b7ba5cdc" + integrity sha512-zQzgUqW4RQDb0ItAL1xNW4K4olUrkfV3jeEPs9rG+nsDQurO+W9TT+YZ9H1mmgAJqlthyv1sBRZGdBm4YjtD6Q== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/primitive" "0.1.0" + "@radix-ui/react-compose-refs" "0.1.0" + "@radix-ui/react-context" "0.1.1" + "@radix-ui/react-dismissable-layer" "0.1.5" + "@radix-ui/react-focus-guards" "0.1.0" + "@radix-ui/react-focus-scope" "0.1.4" + "@radix-ui/react-id" "0.1.5" + "@radix-ui/react-popper" "0.1.4" + "@radix-ui/react-portal" "0.1.4" + "@radix-ui/react-presence" "0.1.2" + "@radix-ui/react-primitive" "0.1.4" + "@radix-ui/react-use-controllable-state" "0.1.0" + aria-hidden "^1.1.1" + react-remove-scroll "^2.4.0" + "@radix-ui/react-popper@0.1.4": version "0.1.4" resolved "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-0.1.4.tgz" From abb7c2bb28a244bc0ae112bd24d809850fc2db88 Mon Sep 17 00:00:00 2001 From: Valtteri Karesto Date: Tue, 3 May 2022 14:02:26 +0300 Subject: [PATCH 2/9] Add compileoptions to global state --- state/index.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/state/index.ts b/state/index.ts index be0c31e..b54a1da 100644 --- a/state/index.ts +++ b/state/index.ts @@ -74,6 +74,7 @@ export interface IState { mainModalOpen: boolean; mainModalShowed: boolean; accounts: IAccount[]; + compileOptions: '-O0' | '-O1' | '-O2' | '-O3' | '-O4' | '-Os' | '-Oz'; } // let localStorageState: null | string = null; @@ -103,6 +104,7 @@ let initialState: IState = { mainModalOpen: false, mainModalShowed: false, accounts: [], + compileOptions: '-O0' }; let localStorageAccounts: string | null = null; From 5defd12a117ea86610400d45e28b5fcf0c89b065 Mon Sep 17 00:00:00 2001 From: Valtteri Karesto Date: Tue, 3 May 2022 14:02:43 +0300 Subject: [PATCH 3/9] Add popover component --- components/Popover.tsx | 139 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 139 insertions(+) create mode 100644 components/Popover.tsx diff --git a/components/Popover.tsx b/components/Popover.tsx new file mode 100644 index 0000000..344f8ad --- /dev/null +++ b/components/Popover.tsx @@ -0,0 +1,139 @@ +import React, { ReactNode } from "react"; +import * as PopoverPrimitive from "@radix-ui/react-popover"; +import { styled, keyframes } from "../stitches.config"; + +const slideUpAndFade = keyframes({ + "0%": { opacity: 0, transform: "translateY(2px)" }, + "100%": { opacity: 1, transform: "translateY(0)" }, +}); + +const slideRightAndFade = keyframes({ + "0%": { opacity: 0, transform: "translateX(-2px)" }, + "100%": { opacity: 1, transform: "translateX(0)" }, +}); + +const slideDownAndFade = keyframes({ + "0%": { opacity: 0, transform: "translateY(-2px)" }, + "100%": { opacity: 1, transform: "translateY(0)" }, +}); + +const slideLeftAndFade = keyframes({ + "0%": { opacity: 0, transform: "translateX(2px)" }, + "100%": { opacity: 1, transform: "translateX(0)" }, +}); +const StyledContent = styled(PopoverPrimitive.Content, { + borderRadius: 4, + padding: "$3 $3", + fontSize: 12, + lineHeight: 1, + color: "$text", + boxShadow: + "0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2)", + "@media (prefers-reduced-motion: no-preference)": { + animationDuration: "400ms", + animationTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)", + willChange: "transform, opacity", + '&[data-state="open"]': { + '&[data-side="top"]': { animationName: slideDownAndFade }, + '&[data-side="right"]': { animationName: slideLeftAndFade }, + '&[data-side="bottom"]': { animationName: slideUpAndFade }, + '&[data-side="left"]': { animationName: slideRightAndFade }, + }, + }, + ".dark &": { + backgroundColor: "$mauve5", + boxShadow: + "0px 10px 38px -10px rgba(22, 23, 24, 0.85), 0px 10px 20px -15px rgba(22, 23, 24, 0.6)", + }, +}); + +const StyledArrow = styled(PopoverPrimitive.Arrow, { + fill: "$colors$mauve2", + ".dark &": { + fill: "$mauve5", + }, +}); + +const StyledClose = styled(PopoverPrimitive.Close, { + all: "unset", + fontFamily: "inherit", + borderRadius: "100%", + height: 25, + width: 25, + display: "inline-flex", + alignItems: "center", + justifyContent: "center", + color: "$text", + position: "absolute", + top: 5, + right: 5, +}); + +// Exports +export const PopoverRoot = PopoverPrimitive.Root; +export const PopoverTrigger = PopoverPrimitive.Trigger; +export const PopoverContent = StyledContent; +export const PopoverArrow = StyledArrow; +export const PopoverClose = StyledClose; + +// const PopoverDemo = () => ( +// +// +// +// +// Dimensions +// +//
+// +// +//
+//
+// +// +//
+//
+// +// +//
+//
+// +// +//
+// +// +// +// +// +// +// +// ); + +// export default PopoverDemo; + +interface IPopover { + content: string | ReactNode; + open?: boolean; + defaultOpen?: boolean; + onOpenChange?: (open: boolean) => void; +} + +const Popover: React.FC = ({ + children, + content, + open, + defaultOpen = false, + onOpenChange, +}) => ( + + {children} + + {content} + + +); + +export default Popover; From 246e7f137f6f9df49c8989bb3326da19769c4f1a Mon Sep 17 00:00:00 2001 From: Valtteri Karesto Date: Tue, 3 May 2022 14:03:02 +0300 Subject: [PATCH 4/9] Add compile options to compile function --- state/actions/compileCode.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/state/actions/compileCode.ts b/state/actions/compileCode.ts index 92e32c9..712472b 100644 --- a/state/actions/compileCode.ts +++ b/state/actions/compileCode.ts @@ -38,6 +38,7 @@ export const compileCode = async (activeId: number) => { files: [ { type: "c", + options: state.compileOptions || '-O0', name: state.files[activeId].name, src: state.files[activeId].content, }, From 923b689c98ddb81a348e229cfcdb158672a81a0e Mon Sep 17 00:00:00 2001 From: Valtteri Karesto Date: Tue, 3 May 2022 14:03:14 +0300 Subject: [PATCH 5/9] Add compile options to ui --- pages/develop/[[...slug]].tsx | 93 ++++++++++++++++++++++++++++++----- 1 file changed, 82 insertions(+), 11 deletions(-) diff --git a/pages/develop/[[...slug]].tsx b/pages/develop/[[...slug]].tsx index d3de800..364ffb4 100644 --- a/pages/develop/[[...slug]].tsx +++ b/pages/develop/[[...slug]].tsx @@ -1,16 +1,18 @@ +import { Label } from "@radix-ui/react-label"; import type { NextPage } from "next"; import dynamic from "next/dynamic"; -import { Play } from "phosphor-react"; +import { Gear, Play } from "phosphor-react"; import Hotkeys from "react-hot-keys"; import Split from "react-split"; import { useSnapshot } from "valtio"; +import { ButtonGroup, Flex, Input } from "../../components"; import Box from "../../components/Box"; import Button from "../../components/Button"; +import Popover from "../../components/Popover"; import state from "../../state"; import { compileCode } from "../../state/actions"; import { getSplit, saveSplit } from "../../state/actions/persistSplits"; - const HooksEditor = dynamic(() => import("../../components/HooksEditor"), { ssr: false, }); @@ -19,6 +21,66 @@ const LogBox = dynamic(() => import("../../components/LogBox"), { ssr: false, }); +const CompilerSettings = () => { + const snap = useSnapshot(state); + return ( + + + + + + + + + + + + + ); +}; + const Home: NextPage = () => { const snap = useSnapshot(state); @@ -42,12 +104,7 @@ const Home: NextPage = () => { !snap.compiling && snap.files.length && compileCode(snap.active) } > - + + }> + + + )} From e33093f16033ef188a6ac419fdddbc24ba608808 Mon Sep 17 00:00:00 2001 From: Valtteri Karesto Date: Tue, 3 May 2022 14:04:18 +0300 Subject: [PATCH 6/9] Remove console.log --- components/HooksEditor.tsx | 12 ------------ 1 file changed, 12 deletions(-) diff --git a/components/HooksEditor.tsx b/components/HooksEditor.tsx index 47c5bd4..59036b8 100644 --- a/components/HooksEditor.tsx +++ b/components/HooksEditor.tsx @@ -54,18 +54,6 @@ const setMarkers = (monacoE: typeof monaco) => { marker?.code?.includes("hooks-") ); - console.log( - monacoE.editor - .getModelMarkers({}) - // Filter out the markers that are hooks specific - .filter( - (marker) => - typeof marker?.code === "string" && - // Take only markers that starts with "hooks-" - marker?.code?.includes("hooks-") - ) - ); - // Get the active model (aka active file you're editing) // const model = monacoE.editor?.getModel( // monacoE.Uri.parse(`file:///work/c/${state.files?.[state.active]?.name}`) From aa7e1517a29c3a6eef86f5a9a29a307ef7363c6e Mon Sep 17 00:00:00 2001 From: Valtteri Karesto Date: Tue, 3 May 2022 14:07:43 +0300 Subject: [PATCH 7/9] Removed unused import --- pages/develop/[[...slug]].tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/develop/[[...slug]].tsx b/pages/develop/[[...slug]].tsx index 364ffb4..a64ca8c 100644 --- a/pages/develop/[[...slug]].tsx +++ b/pages/develop/[[...slug]].tsx @@ -5,7 +5,7 @@ import { Gear, Play } from "phosphor-react"; import Hotkeys from "react-hot-keys"; import Split from "react-split"; import { useSnapshot } from "valtio"; -import { ButtonGroup, Flex, Input } from "../../components"; +import { ButtonGroup, Flex } from "../../components"; import Box from "../../components/Box"; import Button from "../../components/Button"; import Popover from "../../components/Popover"; From 501b7fefec55df65369c3f107a93c830ae6bc69a Mon Sep 17 00:00:00 2001 From: Valtteri Karesto Date: Tue, 3 May 2022 14:17:36 +0300 Subject: [PATCH 8/9] Removed unnecessary setting --- pages/develop/[[...slug]].tsx | 7 ------- state/index.ts | 2 +- 2 files changed, 1 insertion(+), 8 deletions(-) diff --git a/pages/develop/[[...slug]].tsx b/pages/develop/[[...slug]].tsx index a64ca8c..c3235ba 100644 --- a/pages/develop/[[...slug]].tsx +++ b/pages/develop/[[...slug]].tsx @@ -69,13 +69,6 @@ const CompilerSettings = () => { > -Os - ); diff --git a/state/index.ts b/state/index.ts index b54a1da..91039c8 100644 --- a/state/index.ts +++ b/state/index.ts @@ -74,7 +74,7 @@ export interface IState { mainModalOpen: boolean; mainModalShowed: boolean; accounts: IAccount[]; - compileOptions: '-O0' | '-O1' | '-O2' | '-O3' | '-O4' | '-Os' | '-Oz'; + compileOptions: '-O0' | '-O1' | '-O2' | '-O3' | '-O4' | '-Os'; } // let localStorageState: null | string = null; From 4c42e7568679c6ed629717597ece388171185c44 Mon Sep 17 00:00:00 2001 From: Valtteri Karesto Date: Tue, 3 May 2022 14:46:42 +0300 Subject: [PATCH 9/9] Remove example --- components/Popover.tsx | 34 ---------------------------------- 1 file changed, 34 deletions(-) diff --git a/components/Popover.tsx b/components/Popover.tsx index 344f8ad..0b08537 100644 --- a/components/Popover.tsx +++ b/components/Popover.tsx @@ -76,40 +76,6 @@ export const PopoverContent = StyledContent; export const PopoverArrow = StyledArrow; export const PopoverClose = StyledClose; -// const PopoverDemo = () => ( -// -// -// -// -// Dimensions -// -//
-// -// -//
-//
-// -// -//
-//
-// -// -//
-//
-// -// -//
-// -// -// -// -// -// -// -// ); - -// export default PopoverDemo; - interface IPopover { content: string | ReactNode; open?: boolean;