From 0233ae0427762116c49db43f8be875bd71aa94d8 Mon Sep 17 00:00:00 2001 From: lajbel Date: Thu, 17 Oct 2024 12:19:30 -0300 Subject: [PATCH] chore: config version --- package.json | 1 + pnpm-lock.yaml | 8 +++ src/App.tsx | 1 + src/components/Config/ConfigDialog.tsx | 60 ++++++++++-------- src/components/Config/ConfigProject.tsx | 51 +++++++++++++++ .../Config/Sections/EditorConfig.tsx | 63 ------------------- src/components/FileTree/FileTree.tsx | 6 +- src/components/UI/Dialog.tsx | 42 +++++++++++++ src/components/UI/View.tsx | 12 +++- src/data/examples.ts | 3 +- src/stores/project.ts | 5 +- src/styles/index.css | 1 + src/util/compiler.ts | 2 +- 13 files changed, 156 insertions(+), 99 deletions(-) create mode 100644 src/components/Config/ConfigProject.tsx delete mode 100644 src/components/Config/Sections/EditorConfig.tsx create mode 100644 src/components/UI/Dialog.tsx diff --git a/package.json b/package.json index 95b7342..fc1d754 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "dev:bin": "node scripts/cli.js --examples=fakeExamples" }, "dependencies": { + "@fontsource-variable/rubik": "^5.1.0", "@formkit/drag-and-drop": "^0.0.38", "@kaplayjs/crew": "^1.6.1", "@monaco-editor/react": "^4.6.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0cfe511..0c1df28 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -8,6 +8,9 @@ importers: .: dependencies: + '@fontsource-variable/rubik': + specifier: ^5.1.0 + version: 5.1.0 '@formkit/drag-and-drop': specifier: ^0.0.38 version: 0.0.38 @@ -443,6 +446,9 @@ packages: '@floating-ui/utils@0.2.8': resolution: {integrity: sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==} + '@fontsource-variable/rubik@5.1.0': + resolution: {integrity: sha512-gmh3xts3ARd0ktWW/VX+MVxhJr6TxHVeGLsQEaQXDVxvuNjn5WRucfKfXK3EVN2BcgRxUe1Fctv/v9zgEd0DUg==} + '@formkit/drag-and-drop@0.0.38': resolution: {integrity: sha512-3uJFcqz1xL7x/5pClDnyqEDfyFRDFH+75MFpJYXnVF17oekxLrwbUaOBN7ttKGn1jW2MdojRw4WMnSN1iLryvw==} @@ -2034,6 +2040,8 @@ snapshots: '@floating-ui/utils@0.2.8': {} + '@fontsource-variable/rubik@5.1.0': {} + '@formkit/drag-and-drop@0.0.38': {} '@isaacs/cliui@8.0.2': diff --git a/src/App.tsx b/src/App.tsx index 014190f..6a0e5e5 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,6 +4,7 @@ import "allotment/dist/style.css"; import "./styles/index.css"; import "./styles/toast.css"; import "./util/hotkeys.js"; +import "@fontsource-variable/rubik"; export const App = () => { return ; diff --git a/src/components/Config/ConfigDialog.tsx b/src/components/Config/ConfigDialog.tsx index 5fbc064..9b3078e 100644 --- a/src/components/Config/ConfigDialog.tsx +++ b/src/components/Config/ConfigDialog.tsx @@ -1,32 +1,42 @@ -import { Tooltip } from "react-tooltip"; -import { EditorConfig } from "./Sections/EditorConfig"; +import { useProject } from "../../hooks/useProject"; +import { debug } from "../../util/logs"; +import { Dialog } from "../UI/Dialog"; +import { ConfigProject } from "./ConfigProject"; const ConfigDialog = () => { - return ( - -
- -
- -
+ const { setProject } = useProject(); + + const handleDeleteAllData = () => { + if (confirm("Are you sure you want to delete all data?")) { + localStorage.clear(); + location.reload(); + } + }; + + const handleSave = () => { + const versionEl = document.querySelector( + "#version-selector", + ); -
-
-
- -
-
-
-
-
+ +
+

Misc configuration

+ - -
+ Delete All Data + + ); }; diff --git a/src/components/Config/ConfigProject.tsx b/src/components/Config/ConfigProject.tsx new file mode 100644 index 0000000..37bda3d --- /dev/null +++ b/src/components/Config/ConfigProject.tsx @@ -0,0 +1,51 @@ +import { type Packument } from "query-registry"; +import { useEffect, useState } from "react"; + +async function getPackageInfo(name: string): Promise { + const endpoint = `https://registry.npmjs.org/${name}`; + const res = await fetch(endpoint); + const data = await res.json(); + return data; +} + +export const ConfigProject = () => { + const [packageInfo, setPackageInfo] = useState( + null, + ); + + useEffect(() => { + async function fetchPackageInfo() { + const info = await getPackageInfo("kaplay"); + setPackageInfo(info); + } + + fetchPackageInfo(); + }, []); + + return ( + <> +

Project configuration

+ + + + ); +}; diff --git a/src/components/Config/Sections/EditorConfig.tsx b/src/components/Config/Sections/EditorConfig.tsx deleted file mode 100644 index 8ad34b9..0000000 --- a/src/components/Config/Sections/EditorConfig.tsx +++ /dev/null @@ -1,63 +0,0 @@ -import { type Packument } from "query-registry"; -import { useEffect, useState } from "react"; - -async function getPackageInfo(name: string): Promise { - const endpoint = `https://registry.npmjs.org/${name}`; - const res = await fetch(endpoint); - const data = await res.json(); - return data; -} - -export const VersionSelector = () => { - const [packageInfo, setPackageInfo] = useState( - null, - ); - - useEffect(() => { - async function fetchPackageInfo() { - const info = await getPackageInfo("kaplay"); - setPackageInfo(info); - console.log(info.versions); - } - - fetchPackageInfo(); - }, []); - - return ( - - ); -}; - -// Configurations of the editor -export const EditorConfig = () => { - const handleDeleteAllData = () => { - if (confirm("Are you sure you want to delete all data?")) { - localStorage.clear(); - location.reload(); - } - }; - - return ( -
-
-

Editor Configuration

-
- -
- -
-
- ); -}; diff --git a/src/components/FileTree/FileTree.tsx b/src/components/FileTree/FileTree.tsx index d6243ab..e2a819a 100644 --- a/src/components/FileTree/FileTree.tsx +++ b/src/components/FileTree/FileTree.tsx @@ -3,8 +3,8 @@ import { FileFold } from "./FileFold"; export const FileTree = () => { return ( - - + + { /> - +