diff --git a/remix/.eslintrc.js b/remix/.eslintrc.js index d5a4569..3b51f1b 100644 --- a/remix/.eslintrc.js +++ b/remix/.eslintrc.js @@ -37,6 +37,8 @@ module.exports = { "error", { props: "never", children: "never" }, ], + "direct-eval/direct-eval": "off", + "no-eval": "off", "no-async-promise-executor": "off", "react/prop-types": "off", "react/display-name": "off", diff --git a/remix/app/Providers/Chakra/theme.tsx b/remix/app/Providers/Chakra/theme.tsx index b44a762..43567f3 100644 --- a/remix/app/Providers/Chakra/theme.tsx +++ b/remix/app/Providers/Chakra/theme.tsx @@ -1,5 +1,6 @@ -import { extendTheme } from '@chakra-ui/react' -import { colors } from './colors' +import { extendTheme, Select, Switch } from "@chakra-ui/react" + +import { colors } from "./colors" export const theme = extendTheme({ colors, @@ -7,51 +8,100 @@ export const theme = extendTheme({ styles: { global: { // make all elements padding and margin animate - '*': { - transition: 'padding 0.2s ease, margin 0.2s ease' + "*": { + transition: "padding 0.2s ease, margin 0.2s ease", }, // make all elements have a transparent focus border - 'input:focus': { - boxShadow: 'none !important', - borderColor: 'transparent !important' + "input:focus": { + boxShadow: "none !important", + borderColor: "transparent !important", }, // make all elements have a transparent focus border - 'textarea:focus': { - boxShadow: 'none !important', - borderColor: 'transparent !important' + "textarea:focus": { + boxShadow: "none !important", + borderColor: "transparent !important", }, // make all elements have a transparent focus border - 'select:focus': { - boxShadow: 'none !important', - borderColor: 'transparent !important' + "select:focus": { + boxShadow: "none !important", + borderColor: "transparent !important", }, // make all elements have a transparent focus border - 'button:focus': { - boxShadow: 'none !important', - borderColor: 'transparent !important' + "button:focus": { + boxShadow: "none !important", + borderColor: "transparent !important", }, // make all elements have a transparent focus border - 'div:focus': { - boxShadow: 'none !important', - borderColor: 'transparent !important' + "div:focus": { + boxShadow: "none !important", + borderColor: "transparent !important", }, // make all elements have a transparent focus border - 'a:focus': { - boxShadow: 'none !important', - borderColor: 'transparent !important' + "a:focus": { + boxShadow: "none !important", + borderColor: "transparent !important", }, // make all elements have a transparent focus border - 'span:focus': { - boxShadow: 'none !important', - borderColor: 'transparent !important' - } - } + "span:focus": { + boxShadow: "none !important", + borderColor: "transparent !important", + }, + }, }, components: { Input: { defaultProps: { - focusBorderColor: 'transparent' - } - } - } + // focusBorderColor: "transparent", + // outline: "0px solid", + // border: "0px solid", + }, + baseStyle: { + // "padding-inline-start": "0px", + field: { + // "padding-inline-start": "0px", + }, + }, + }, + Select: { + baseStyle: { + field: { + // "padding-inline-start": "0px", + }, + icon: { + // height: "8px", + width: "14px", + }, + }, + }, + Switch: { + baseStyle: { + track: { + background: "grays.medium", + _checked: { + background: "chakras.throat", + }, + }, + }, + }, + }, }) + +console.log("nik Select", Select) + +Switch.defaultProps = { + ...Switch.defaultProps, + as: "div", +} + +Select.defaultProps = { + ...Select.defaultProps, + focusBorderColor: "transparent", + outline: "0px solid", + border: "none", + ps: "0px", + px: "0px", + sx: { + paddingInlineStart: "0px", + paddingInlineEnd: "24px", + }, +} diff --git a/remix/app/Providers/ThingtimeProvider.tsx b/remix/app/Providers/ThingtimeProvider.tsx index 40fae90..7ac29c2 100644 --- a/remix/app/Providers/ThingtimeProvider.tsx +++ b/remix/app/Providers/ThingtimeProvider.tsx @@ -105,10 +105,15 @@ export const ThingtimeProvider = (props: any): JSX.Element => { ...prevThingtime, } + newThingtime.tt = newThingtime + newThingtime.thingtime = newThingtime + // check if first characters of path starts with thingtime or tt and strip from path // path = sanitise(path) + console.log("nik setting newThingtime value at path", path, value) + smarts.setsmart(newThingtime, path, value) // subtract last path part from dot delimitted path @@ -118,6 +123,7 @@ export const ThingtimeProvider = (props: any): JSX.Element => { const parentPath = pathParts.join(".") if (parentPath?.length) { + console.log("nik updating parentPath dependancies", parentPath) const parent = smarts.getsmart(newThingtime, parentPath) const newParent = Array.isArray(parent) ? [...parent] : { ...parent } @@ -127,7 +133,7 @@ export const ThingtimeProvider = (props: any): JSX.Element => { set(newThingtime) }, - [thingtime] + [thingtime, set] ) const getThingtime = React.useCallback( @@ -137,6 +143,7 @@ export const ThingtimeProvider = (props: any): JSX.Element => { // do we need to sanitise? // const path = sanitise(rawPath) console.log("Getting thingtime at path", path) + // console.trace("Getting thingtime at path", path) return smarts.getsmart(thingtime, path) }, [thingtime] @@ -221,10 +228,10 @@ export const ThingtimeProvider = (props: any): JSX.Element => { } else { try { console.log("Setting thingtime to localStorage", thingtime) - setTimeout(() => { - const stringified = stringify(thingtime) - window.localStorage.setItem("thingtime", stringified) - }, 600) + // setTimeout(() => { + const stringified = stringify(thingtime) + window.localStorage.setItem("thingtime", stringified) + // }, 600) } catch (err) { console.error("There was an error saving thingtime to localStorage") } diff --git a/remix/app/components/Commander/Commander.tsx b/remix/app/components/Commander/Commander.tsx index f3b94f9..d0bd627 100644 --- a/remix/app/components/Commander/Commander.tsx +++ b/remix/app/components/Commander/Commander.tsx @@ -197,11 +197,13 @@ export const Commander = (props) => { const closeCommander = React.useCallback( (e?: any) => { - console.log("nik e", e) - if (thingtime?.settings?.commanderActive) { - console.log("nik commander closing commander") - console.log("nik setting commanderActive to false") - setThingtime("settings.commanderActive", false) + if (!e?.defaultPrevented) { + console.log("nik 123123 commander event closeCommander ", e) + if (thingtime?.settings?.commanderActive) { + console.log("nik commander closing commander") + console.log("nik setting commanderActive to false") + setThingtime("settings.commanderActive", false) + } } }, [setThingtime, thingtime?.settings?.commanderActive] @@ -267,18 +269,46 @@ export const Commander = (props) => { if (commandIsAction) { // nothing try { - const fn = `() => { return ${escapedCommandValue} }` + // first try to execute literal javscript + const fn = `() => { return ${commandValue} }` const evalFn = eval(fn) const realVal = evalFn() const prevVal = getThingtime(commandPath) const parentPath = getParentPath(commandPath) + console.log("nik realVal", realVal) + console.log("nik prevVal", prevVal) + console.log("nik parentPath", parentPath) + console.log("nik commandPath", commandPath) setThingtime(commandPath, realVal) if (!prevVal) { setContextPath(parentPath) setShowContext(true, "commandIsAction check") } } catch (err) { - console.log("setThingtime errored in Commander", err) + console.log( + "Caught error after trying to execute literal javascript", + err + ) + + // likely literaly javascript wasn't valid + try { + const fn = `() => { return ${escapedCommandValue} }` + const evalFn = eval(fn) + const realVal = evalFn() + const prevVal = getThingtime(commandPath) + const parentPath = getParentPath(commandPath) + setThingtime(commandPath, realVal) + if (!prevVal) { + setContextPath(parentPath) + setShowContext(true, "commandIsAction check") + } + } catch { + // something very bad went wrong + console.log( + "Caught error after trying to execute escaped literal javascript", + err + ) + } } } else if (commandContainsPath) { // const prevValue = getThingtime(commandPath) @@ -305,6 +335,7 @@ export const Commander = (props) => { commandIsAction, commandContainsPath, commandPath, + commandValue, escapedCommandValue, getThingtime, setThingtime, diff --git a/remix/app/components/Icon/Icon.tsx b/remix/app/components/Icon/Icon.tsx index d226308..6211597 100644 --- a/remix/app/components/Icon/Icon.tsx +++ b/remix/app/components/Icon/Icon.tsx @@ -1,22 +1,59 @@ import React from "react" import { Center } from "@chakra-ui/react" -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome" export const Icon = (props) => { - const icon = React.useMemo(() => { - if (props?.name === "gear") { - return { - prefix: "fas", - iconName: props?.name, - } - } + const name = props?.name - return props?.name - }, [props?.name]) + const icon = React.useMemo(() => { + // nothing + if (["gear", "cog"]?.includes(name)) { + return "⚙️" + } + if (["crystal"]?.includes(name)) { + return "🔮" + } + if (["sparke", "magic"]?.includes(name)) { + return "✨" + } + if (["box", "thing", "object"]?.includes(name)) { + return "📦" + } + if (["book", "books"]?.includes(name)) { + return "📚" + } + if (["book-open", "books-open"]?.includes(name)) { + return "📖" + } + if (["book-reader", "books-reader"]?.includes(name)) { + return "👩🏫" + } + if (["number", "hundred"]?.includes(name)) { + return "💯" + } + if (["heart"]?.includes(name)) { + return "❤️" + } + if (["heart-broken"]?.includes(name)) { + return "💔" + } + if (["heart-pulse"]?.includes(name)) { + return "💗" + } + if (["string", "text"]?.includes(name)) { + return "💬" + } + if (["array", "list"]?.includes(name)) { + return "📚" + } + if (["boolean", "bool"]?.includes(name)) { + return "🌗" + // return "⚖️" + } + }, [name]) return ( -