From 7bfc88ea26cfb5cdd5db03382ab45892573fc7dd Mon Sep 17 00:00:00 2001 From: Nikolaj Frey Date: Mon, 29 Apr 2024 20:44:31 +1000 Subject: [PATCH] Added next and remix main --- next/src/components/Commander/Commander.tsx | 4 +- next/src/components/Commander/CommanderV2.tsx | 6 +- next/src/components/Login/Login.tsx | 2 +- next/src/components/Nav/Footer.tsx | 16 +- next/src/components/Rainbow/Rainbow.tsx | 8 +- next/src/components/Safety/Safe.tsx | 2 +- next/src/components/Splash/Splash.tsx | 2 +- next/src/components/Thingtime/Thingtime.tsx | 14 +- .../src/components/Thingtime/ThingtimeURL.tsx | 51 ++-- .../src/components/Thingtime/useThingtime.tsx | 2 +- next/src/consts/config.tsx | 1 + next/src/layouts/Default.tsx | 8 +- next/src/pages/[...path].tsx | 14 + next/src/pages/_app.tsx | 4 +- next/src/pages/_document.tsx | 2 +- next/src/{remix_routes => pages}/edge.tsx | 0 next/src/pages/index.tsx | 31 +- next/src/{remix_routes => pages}/login.tsx | 2 +- next/src/{remix_routes => pages}/ode.tsx | 12 +- .../rainbow/[text].tsx} | 27 +- .../ThingtimeProvider.tsx | 0 next/src/providers/chakra/ChakraWrapper.tsx | 8 +- next/src/providers/chakra/chakra.tsx | 271 ------------------ .../chakra/colors.tsx | 0 .../chakra/space.tsx | 0 .../chakra/theme.tsx | 0 .../hooks/useIcons.tsx | 0 .../hooks/usePath.tsx | 0 .../hooks/useProps.tsx | 0 .../hooks/useThings.tsx | 0 .../hooks/useTrace.tsx | 0 .../hooks/useUuid.tsx | 0 next/src/providers/providers.tsx | 2 +- .../remix_providers/chakra/ChakraWrapper.tsx | 6 - next/src/remix_routes/$.tsx | 2 +- next/src/remix_routes/_index.tsx | 12 +- next/tsconfig.json | 2 +- package.json | 1 + 38 files changed, 159 insertions(+), 353 deletions(-) create mode 100644 next/src/consts/config.tsx create mode 100644 next/src/pages/[...path].tsx rename next/src/{remix_routes => pages}/edge.tsx (100%) rename next/src/{remix_routes => pages}/login.tsx (84%) rename next/src/{remix_routes => pages}/ode.tsx (86%) rename next/src/{remix_routes/rainbow.$.tsx => pages/rainbow/[text].tsx} (65%) rename next/src/{remix_providers => providers}/ThingtimeProvider.tsx (100%) delete mode 100644 next/src/providers/chakra/chakra.tsx rename next/src/{remix_providers => providers}/chakra/colors.tsx (100%) rename next/src/{remix_providers => providers}/chakra/space.tsx (100%) rename next/src/{remix_providers => providers}/chakra/theme.tsx (100%) rename next/src/{remix_providers => providers}/hooks/useIcons.tsx (100%) rename next/src/{remix_providers => providers}/hooks/usePath.tsx (100%) rename next/src/{remix_providers => providers}/hooks/useProps.tsx (100%) rename next/src/{remix_providers => providers}/hooks/useThings.tsx (100%) rename next/src/{remix_providers => providers}/hooks/useTrace.tsx (100%) rename next/src/{remix_providers => providers}/hooks/useUuid.tsx (100%) delete mode 100644 next/src/remix_providers/chakra/ChakraWrapper.tsx diff --git a/next/src/components/Commander/Commander.tsx b/next/src/components/Commander/Commander.tsx index 919d26b..8a256cc 100644 --- a/next/src/components/Commander/Commander.tsx +++ b/next/src/components/Commander/Commander.tsx @@ -8,8 +8,8 @@ import { Rainbow } from '../Rainbow/Rainbow'; import { Thingtime } from '../Thingtime/Thingtime'; import { useThingtime } from '../Thingtime/useThingtime'; -import { sanitise } from '@/functions/sanitise'; -import { getParentPath } from '@/smarts'; +import { sanitise } from '~/functions/sanitise'; +import { getParentPath } from '~/smarts'; export const Commander = (props: any) => { const { thingtime, setThingtime, getThingtime, thingtimeRef, paths } = useThingtime(); diff --git a/next/src/components/Commander/CommanderV2.tsx b/next/src/components/Commander/CommanderV2.tsx index eb013b0..6dad3b8 100644 --- a/next/src/components/Commander/CommanderV2.tsx +++ b/next/src/components/Commander/CommanderV2.tsx @@ -8,9 +8,9 @@ import { Rainbow } from '../Rainbow/Rainbow'; import { Thingtime } from '../Thingtime/Thingtime'; import { useThingtime } from '../Thingtime/useThingtime'; -import { sanitise } from '@/functions/sanitise'; -import { usePath } from '@/remix_providers/hooks/usePath'; -import { getParentPath } from '@/smarts'; +import { sanitise } from '~/functions/sanitise'; +import { usePath } from '~/providers/hooks/usePath'; +import { getParentPath } from '~/smarts'; export const CommanderV1 = (props: any) => { const { thingtime, setThingtime, getThingtime, thingtimeRef, paths } = useThingtime(); diff --git a/next/src/components/Login/Login.tsx b/next/src/components/Login/Login.tsx index e896077..5203a5e 100644 --- a/next/src/components/Login/Login.tsx +++ b/next/src/components/Login/Login.tsx @@ -2,7 +2,7 @@ import React, { useState } from 'react'; import { Flex, Button, FormControl, Input, Spinner, Link } from '@chakra-ui/react'; import { useFetcher } from '@remix-run/react'; -import { useLogin } from '@/api/v1/login/Login'; +import { useLogin } from '~/api/v1/login/Login'; export const Login = (props: any) => { const [username, setUsername] = useState(''); diff --git a/next/src/components/Nav/Footer.tsx b/next/src/components/Nav/Footer.tsx index 30f9c88..4798834 100644 --- a/next/src/components/Nav/Footer.tsx +++ b/next/src/components/Nav/Footer.tsx @@ -12,6 +12,8 @@ export const Footer = (props: any) => { const investmentEmail = 'invest@thingtime.com'; const contactEmail = 'connect@thingtime.com'; + const [year, setYear] = React.useState(new Date().getFullYear()); + return (
@@ -30,7 +32,7 @@ export const Footer = (props: any) => { - {/* copyright message */}© 2023 Thingtime + {/* copyright message */}© {year} Thingtime )} @@ -42,13 +44,21 @@ export const Footer = (props: any) => { {/* */} - + {contactEmail} - {/* copyright message */}© 2023 Thingtime + + {/* copyright message */}© {year} Thingtime + diff --git a/next/src/components/Rainbow/Rainbow.tsx b/next/src/components/Rainbow/Rainbow.tsx index 61ee46c..63fe167 100644 --- a/next/src/components/Rainbow/Rainbow.tsx +++ b/next/src/components/Rainbow/Rainbow.tsx @@ -1,10 +1,10 @@ import React from 'react'; import { Box, Center } from '@chakra-ui/react'; -import { GradientPath } from '@/gp/GradientPath'; -import { useProps } from '@/remix_providers/hooks/useProps'; -import { useTrace } from '@/remix_providers/hooks/useTrace'; -import { useUuid } from '@/remix_providers/hooks/useUuid'; +import { GradientPath } from '~/gp/GradientPath'; +import { useProps } from '~/providers/hooks/useProps'; +import { useTrace } from '~/providers/hooks/useTrace'; +import { useUuid } from '~/providers/hooks/useUuid'; export const Rainbow = (allProps: any): JSX.Element => { // return allProps.children diff --git a/next/src/components/Safety/Safe.tsx b/next/src/components/Safety/Safe.tsx index 209fbdc..47791ef 100644 --- a/next/src/components/Safety/Safe.tsx +++ b/next/src/components/Safety/Safe.tsx @@ -1,4 +1,4 @@ -import { safe } from '@/functions/safe'; +import { safe } from '~/functions/safe'; export const Safe = (props: any) => { // do not render more than the limit of things to prevent infinite loops diff --git a/next/src/components/Splash/Splash.tsx b/next/src/components/Splash/Splash.tsx index bfa218e..6b059e8 100644 --- a/next/src/components/Splash/Splash.tsx +++ b/next/src/components/Splash/Splash.tsx @@ -1,6 +1,6 @@ import { Flex } from '@chakra-ui/react'; -import { TextAnimation1 } from '@/components/textAnimation1'; +import { TextAnimation1 } from '~/components/textAnimation1'; export const Splash = (props: any) => { return ( diff --git a/next/src/components/Thingtime/Thingtime.tsx b/next/src/components/Thingtime/Thingtime.tsx index 425946f..d86a5eb 100644 --- a/next/src/components/Thingtime/Thingtime.tsx +++ b/next/src/components/Thingtime/Thingtime.tsx @@ -25,8 +25,8 @@ import { Safe } from '../Safety/Safe'; import { SettingsMenu } from './SettingsMenu'; import { useThingtime } from './useThingtime'; -import { useThings } from '@/remix_providers/hooks/useThings'; -import { getThing } from '@/smarts'; +import { useThings } from '~/providers/hooks/useThings'; +import { getThing } from '~/smarts'; export const Thingtime = (props: any) => { // TODO: Add a circular reference seen prop check @@ -166,7 +166,7 @@ export const Thingtime = (props: any) => { }, [props?.fullPath, props?.path, props?.thing]); const parentPath = React.useMemo(() => { - const parentPath = fullPath?.split('.')?.slice(0, -1)?.join('.'); + const parentPath = fullPath?.split?.('.')?.slice?.(0, -1)?.join?.('.'); if (!parentPath) { return 'thingtime'; @@ -180,7 +180,7 @@ export const Thingtime = (props: any) => { }, [parentPath, getThingtime]); React.useEffect(() => { - console.log('thingtime changed in path', props?.fullPath); + console.log('[tt] changed in path', props?.fullPath); createDependancies(); }, [thingtime, props?.fullPath, childrenRef]); @@ -380,14 +380,14 @@ export const Thingtime = (props: any) => { if (chakra) { const ChakraComponent = Chakras[chakra]; - console.log('Thingtime is chakra', fullPath, chakra); + console.log('[tt] is chakra', fullPath, chakra); const rawChildren = thing?.rawChildren; try { if (ChakraComponent) { - console.log('Thingtime found ChakraComponent', fullPath, ChakraComponent); - console.log('Thingtime found thing?.props', fullPath, thing?.props); + console.log('[tt] found ChakraComponent', fullPath, ChakraComponent); + console.log('[tt] found thing?.props', fullPath, thing?.props); const ret = ( diff --git a/next/src/components/Thingtime/ThingtimeURL.tsx b/next/src/components/Thingtime/ThingtimeURL.tsx index 03a4fa8..b1a80c7 100644 --- a/next/src/components/Thingtime/ThingtimeURL.tsx +++ b/next/src/components/Thingtime/ThingtimeURL.tsx @@ -8,16 +8,21 @@ import { useRouter } from 'next/router'; import { Thingtime } from './Thingtime'; import { useThingtime } from './useThingtime'; +import { rootPaths } from '~/consts/config'; +import Link from 'next/link'; export const ThingtimeURL = (props: any) => { + console.log('nik props', props); + const { getThingtime } = useThingtime(); const router = useRouter(); - const location = router; - const { pathname } = location; + const { pathname } = router; const navigate = router.push; + const rawPath = props?.path || router?.query?.path; + // const { pathname } = useLocation(); // const matches = useMatches(); @@ -26,25 +31,27 @@ export const ThingtimeURL = (props: any) => { // }, [matches]); const path = React.useMemo(() => { - console.log('ThingtimeURL location', location); + const path = rawPath instanceof Array ? rawPath.join('.') : rawPath; - // const sanitisation = ["/things", "/edit", "/editor", "/code", "/coder"] + // if path starts with any value in rootPaths, remove it + const adjustedPath = rootPaths.reduce((acc: any, rootPath) => { + if (typeof path === 'string') { + if (path.startsWith(rootPath) && acc === null) { + return path.slice(rootPath.length); + } + } + return acc; + }, null); - // // strip the leading /path1/path2 path1 section from the path - // let pathPartOne = location?.pathname?.split("/")[2] + // remove any leading syntax such as dots or forward slashes + const sanitisedPath = adjustedPath?.replace(/^[./]+/, ''); - // // remove all sanitsation strings from path - // sanitisation.forEach((sanitisationString) => { - // pathPartOne = pathPartOne?.replace(sanitisationString, "") - // }) + console.log('nik path', path); + console.log('nik adjustedPath', adjustedPath); + console.log('nik sanitisedPath', sanitisedPath); - // strip the leading /path1/path2 path1 section from the path - const pathPartOne = location?.pathname?.split('/')[2]; - - const path = pathPartOne?.replace(/\//g, '.'); - - return path || 'thingtime'; - }, [location]); + return sanitisedPath || 'thingtime'; + }, [rawPath]); const thing = React.useMemo(() => { // remove /things/ from path @@ -128,3 +135,13 @@ export const ThingtimeURL = (props: any) => { ); }; + +export async function getServerSideProps(context: any) { + console.log('nik context?.params?.path', context?.params?.path); + + return { + props: { + path: context?.params?.path // Access dynamic route parameters + } + }; +} diff --git a/next/src/components/Thingtime/useThingtime.tsx b/next/src/components/Thingtime/useThingtime.tsx index 658dcff..4ef35ad 100644 --- a/next/src/components/Thingtime/useThingtime.tsx +++ b/next/src/components/Thingtime/useThingtime.tsx @@ -1,6 +1,6 @@ import { useContext } from 'react'; -import { ThingtimeContext } from '@/remix_providers/ThingtimeProvider'; +import { ThingtimeContext } from '~/providers/ThingtimeProvider'; const getGlobal = () => { try { diff --git a/next/src/consts/config.tsx b/next/src/consts/config.tsx new file mode 100644 index 0000000..095fbe3 --- /dev/null +++ b/next/src/consts/config.tsx @@ -0,0 +1 @@ +export const rootPaths = ['things', 'edit', 'editor', 'code', 'coder']; diff --git a/next/src/layouts/Default.tsx b/next/src/layouts/Default.tsx index d17ed42..e25329f 100644 --- a/next/src/layouts/Default.tsx +++ b/next/src/layouts/Default.tsx @@ -1,10 +1,10 @@ import { Box, Flex } from '@chakra-ui/react'; -import { Providers } from '@/providers/providers'; +import { Providers } from '~/providers/providers'; -import { Footer } from '@/components/Nav/Footer'; -import { Nav } from '@/components/Nav/Nav'; -import { ProfileDrawer } from '@/components/Nav/ProfileDrawer'; +import { Footer } from '~/components/Nav/Footer'; +import { Nav } from '~/components/Nav/Nav'; +import { ProfileDrawer } from '~/components/Nav/ProfileDrawer'; export const DefaultLayout = ({ children }: { children: React.ReactNode }) => { return ( diff --git a/next/src/pages/[...path].tsx b/next/src/pages/[...path].tsx new file mode 100644 index 0000000..710a0ad --- /dev/null +++ b/next/src/pages/[...path].tsx @@ -0,0 +1,14 @@ +import { ThingtimeURL } from '~/components/Thingtime/ThingtimeURL'; +export default function Index(props: any) { + console.log('nik 3 props', props); + + return ; +} + +export async function getServerSideProps(context: any) { + return { + props: { + path: context?.params?.path // Access dynamic route parameters + } + }; +} diff --git a/next/src/pages/_app.tsx b/next/src/pages/_app.tsx index 84e5de8..728c53c 100644 --- a/next/src/pages/_app.tsx +++ b/next/src/pages/_app.tsx @@ -1,6 +1,6 @@ -import { DefaultLayout } from '@/layouts/Default'; +import { DefaultLayout } from '~/layouts/Default'; import type { AppProps } from 'next/app'; -import { useIcons } from '@/remix_providers/hooks/useIcons'; +import { useIcons } from '~/providers/hooks/useIcons'; export default function MyApp({ Component, pageProps }: AppProps) { useIcons(); diff --git a/next/src/pages/_document.tsx b/next/src/pages/_document.tsx index 043eeb4..a76cd97 100644 --- a/next/src/pages/_document.tsx +++ b/next/src/pages/_document.tsx @@ -3,7 +3,7 @@ import { Analytics } from '@vercel/analytics/react'; import { Html, Head, Main, NextScript } from 'next/document'; -import { Globals } from '@/globals/GlobalStyles'; +import { Globals } from '~/globals/GlobalStyles'; export default function Document({ children, title = 'Thingtime' }: { children: React.ReactNode; title?: string }) { return ( diff --git a/next/src/remix_routes/edge.tsx b/next/src/pages/edge.tsx similarity index 100% rename from next/src/remix_routes/edge.tsx rename to next/src/pages/edge.tsx diff --git a/next/src/pages/index.tsx b/next/src/pages/index.tsx index fb6dcc7..85e83c2 100644 --- a/next/src/pages/index.tsx +++ b/next/src/pages/index.tsx @@ -1,4 +1,31 @@ -import { ThingtimeURL } from '@/components/Thingtime/ThingtimeURL'; +import { Box, Flex } from '@chakra-ui/react'; + +import { ProfileDrawer } from '~/components/Nav/ProfileDrawer'; +import { Splash } from '~/components/Splash/Splash'; +import { Thingtime } from '~/components/Thingtime/Thingtime'; +import { ThingtimeDemo } from '~/components/Thingtime/ThingtimeDemo'; +import { useThingtime } from '~/components/Thingtime/useThingtime'; +import { GradientPath } from '~/gp/GradientPath'; + export default function Index() { - return ; + const { thingtime } = useThingtime(); + + return ( + + {/* */} + + + + + + + ); } diff --git a/next/src/remix_routes/login.tsx b/next/src/pages/login.tsx similarity index 84% rename from next/src/remix_routes/login.tsx rename to next/src/pages/login.tsx index 3640af1..26bf710 100644 --- a/next/src/remix_routes/login.tsx +++ b/next/src/pages/login.tsx @@ -1,6 +1,6 @@ import { Flex } from '@chakra-ui/react'; -import { Login } from '@/components/Login/Login'; +import { Login } from '~/components/Login/Login'; export default function login() { const template = ( diff --git a/next/src/remix_routes/ode.tsx b/next/src/pages/ode.tsx similarity index 86% rename from next/src/remix_routes/ode.tsx rename to next/src/pages/ode.tsx index 5f384b0..0fbc96b 100644 --- a/next/src/remix_routes/ode.tsx +++ b/next/src/pages/ode.tsx @@ -1,11 +1,11 @@ import { Box, Center, Flex } from '@chakra-ui/react'; -import { ProfileDrawer } from '@/components/Nav/ProfileDrawer'; -import { Splash } from '@/components/Splash/Splash'; -import { Thingtime } from '@/components/Thingtime/Thingtime'; -import { ThingtimeDemo } from '@/components/Thingtime/ThingtimeDemo'; -import { useThingtime } from '@/components/Thingtime/useThingtime'; -import { GradientPath } from '@/gp/GradientPath'; +import { ProfileDrawer } from '~/components/Nav/ProfileDrawer'; +import { Splash } from '~/components/Splash/Splash'; +import { Thingtime } from '~/components/Thingtime/Thingtime'; +import { ThingtimeDemo } from '~/components/Thingtime/ThingtimeDemo'; +import { useThingtime } from '~/components/Thingtime/useThingtime'; +import { GradientPath } from '~/gp/GradientPath'; export default function Index() { const { thingtime } = useThingtime(); diff --git a/next/src/remix_routes/rainbow.$.tsx b/next/src/pages/rainbow/[text].tsx similarity index 65% rename from next/src/remix_routes/rainbow.$.tsx rename to next/src/pages/rainbow/[text].tsx index cee622d..4fb95df 100644 --- a/next/src/remix_routes/rainbow.$.tsx +++ b/next/src/pages/rainbow/[text].tsx @@ -1,25 +1,30 @@ import React from 'react'; import { Flex } from '@chakra-ui/react'; -import { useLocation } from '@remix-run/react'; +import { useRouter } from 'next/router'; -import { Splash } from '@/components/Splash/Splash'; -import { useThingtime } from '@/components/Thingtime/useThingtime'; +import { Splash } from '~/components/Splash/Splash'; +import { useThingtime } from '~/components/Thingtime/useThingtime'; -export default function Index() { - const location = useLocation(); +export default function Index(props: any) { + const text = props?.text; + + const location = useRouter(); const { pathname } = location; + console.log('nik location', location); + const strippedPathname = React.useMemo(() => { // modify /rainbow/* to just * - const ret = pathname.split('/')[2]; + const ret = text; + // const ret = pathname.split('/')[2]; if (ret) { return decodeURI(ret); } return 'rainbow'; - }, [pathname]); + }, [text]); const texts = React.useMemo(() => { const ret = [strippedPathname]; @@ -59,3 +64,11 @@ export default function Index() { ); } + +export async function getServerSideProps(context: any) { + return { + props: { + text: context?.params?.text // Access dynamic route parameters + } + }; +} diff --git a/next/src/remix_providers/ThingtimeProvider.tsx b/next/src/providers/ThingtimeProvider.tsx similarity index 100% rename from next/src/remix_providers/ThingtimeProvider.tsx rename to next/src/providers/ThingtimeProvider.tsx diff --git a/next/src/providers/chakra/ChakraWrapper.tsx b/next/src/providers/chakra/ChakraWrapper.tsx index 5874e26..317b904 100644 --- a/next/src/providers/chakra/ChakraWrapper.tsx +++ b/next/src/providers/chakra/ChakraWrapper.tsx @@ -1,6 +1,6 @@ -import { ChakraProvider } from "@chakra-ui/react" +import { ChakraProvider } from '@chakra-ui/react'; -import { theme } from "./chakra" +import { theme } from './theme'; export const ChakraWrapper = (props: any) => { - return {props.children} -} + return {props.children}; +}; diff --git a/next/src/providers/chakra/chakra.tsx b/next/src/providers/chakra/chakra.tsx deleted file mode 100644 index 962f054..0000000 --- a/next/src/providers/chakra/chakra.tsx +++ /dev/null @@ -1,271 +0,0 @@ -import { - Button, - extendTheme, - Input, - NumberDecrementStepper, - NumberIncrementStepper, - NumberInput, - NumberInputField, - NumberInputStepper, - Select, - Switch, - Textarea -} from "@chakra-ui/react" - -import hexgba from "hex-to-rgba" - -const space: any = {} - -const start = 0 -const end = 9999 - -for (let i = start; i <= end; i++) { - space[i] = `${i * 0.25}rem` -} - -const greys = { - light: "#F1F1F3", - lightt: "#E7E6E8", - medium: "#E0E0E0", - dark: "#BDBDBD" -} - -const grey = "#F1F1F3" - -const Grey = { - gray: grey, - grey, - grays: greys, - greys -} - -// for bad spellers -Grey.gray = Grey.grey -Grey.grays = Grey.greys - -export const colors: any = { - white: "#FFFFFF", - offwhite: "#F9F9F9", - black: "#000000", - subheading: "#4A4A4A", - ...Grey, - bright: { - red: "#C62828", - opaqueRed: "rgba(198, 40, 40, 0.5)", - orange: "#FF7043", - yellow: "#FFEE58", - green: "#66BB6A", - blue: "#42A5F5", - indigo: "#5C6BC0", - violet: "#AB47BC" - }, - dark: { - red: "#8E0000", - orange: "#E65100", - yellow: "#FDD835", - green: "#33691E", - blue: "#1E88E5", - indigo: "#3949AB", - violet: "#6A1B9A" - }, - // all colors of the rainbow - rainbow: { - red: "#FF0000", - orange: "#FF7F00", - yellow: "#FFFF00", - green: "#00FF00", - blue: "#0000FF", - indigo: "#4B0082", - violet: "#8F00FF" - } -} - -// recursively add rgba(hex, 0.5) versions for all colours - -function addRgba(obj: any, parentKey: string, opacity = 0.5) { - for (const key in obj) { - // return early if key includes "-"" already - - if (key.includes("-")) { - return - } - - const value = obj[key] - if (typeof value === "object") { - addRgba(value, key) - } else { - obj[`${key}-${opacity}`] = hexgba(value, opacity) - } - } -} - -// run for all opacities 0 - 1 with steps of 0.05 - -// const opacities = Array.from({ length: 21 }, (_, i) => i / 20) - -// opacities.forEach((opacity) => { -// addRgba(colors, "", opacity) -// }) - -addRgba(colors, "", 0) -addRgba(colors, "", 0.25) -addRgba(colors, "", 0.5) -addRgba(colors, "", 0.75) -addRgba(colors, "", 1) - -export const theme = extendTheme({ - colors, - space, - styles: { - global: { - // make all elements padding and margin animate - "*": { - transition: "padding 0.2s ease, margin 0.2s ease-out" - } - // // make all elements have a transparent focus border - // "input:focus": { - // boxShadow: "none !important", - // borderColor: "transparent !important" - // }, - // // make all elements have a transparent focus border - // "textarea:focus": { - // boxShadow: "none !important", - // borderColor: "transparent !important" - // }, - // // make all elements have a transparent focus border - // "select:focus": { - // boxShadow: "none !important", - // borderColor: "transparent !important" - // }, - // // make all elements have a transparent focus border - // "button:focus": { - // boxShadow: "none !important", - // borderColor: "transparent !important" - // }, - // // make all elements have a transparent focus border - // "div:focus": { - // boxShadow: "none !important", - // borderColor: "transparent !important" - // }, - // // make all elements have a transparent focus border - // "a:focus": { - // boxShadow: "none !important", - // borderColor: "transparent !important" - // }, - // // make all elements have a transparent focus border - // "span:focus": { - // boxShadow: "none !important", - // borderColor: "transparent !important" - // } - } - }, - components: { - Input: { - defaultProps: {}, - baseStyle: { - field: {} - } - }, - Select: { - baseStyle: { - field: {}, - icon: { - width: "14px" - } - } - }, - Switch: { - baseStyle: { - track: { - background: "greys.medium", - _checked: { - background: "bright.blue" - } - } - } - }, - NumberInput: { - baseStyle: { - field: { - width: "auto" - } - } - } - } -}) - -const formBg = { - bg: "offwhite" -} - -const formBorder = { - borderColor: "black-0" -} - -const formColours = { - ...formBg, - ...formBorder -} - -const formInputProps = { - ...formColours, - py: 6 -} - -Input.defaultProps = { - ...formInputProps -} - -Textarea.defaultProps = { - py: 3.5, - ...formColours -} - -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" - } -} - -NumberInput.defaultProps = { - ...NumberInput.defaultProps -} - -NumberInputField.defaultProps = { - ...NumberInputField.defaultProps, - height: "100%", - pr: 3, - fontSize: "inherit" -} - -NumberInputStepper.defaultProps = { - ...NumberInputStepper.defaultProps, - border: "none", - color: "grays.medium" -} - -NumberIncrementStepper.defaultProps = { - ...NumberIncrementStepper.defaultProps, - border: "none" -} -NumberDecrementStepper.defaultProps = { - ...NumberDecrementStepper.defaultProps, - border: "none" -} - -Button.defaultProps = { - ...Button.defaultProps, - bg: "offwhite" -} diff --git a/next/src/remix_providers/chakra/colors.tsx b/next/src/providers/chakra/colors.tsx similarity index 100% rename from next/src/remix_providers/chakra/colors.tsx rename to next/src/providers/chakra/colors.tsx diff --git a/next/src/remix_providers/chakra/space.tsx b/next/src/providers/chakra/space.tsx similarity index 100% rename from next/src/remix_providers/chakra/space.tsx rename to next/src/providers/chakra/space.tsx diff --git a/next/src/remix_providers/chakra/theme.tsx b/next/src/providers/chakra/theme.tsx similarity index 100% rename from next/src/remix_providers/chakra/theme.tsx rename to next/src/providers/chakra/theme.tsx diff --git a/next/src/remix_providers/hooks/useIcons.tsx b/next/src/providers/hooks/useIcons.tsx similarity index 100% rename from next/src/remix_providers/hooks/useIcons.tsx rename to next/src/providers/hooks/useIcons.tsx diff --git a/next/src/remix_providers/hooks/usePath.tsx b/next/src/providers/hooks/usePath.tsx similarity index 100% rename from next/src/remix_providers/hooks/usePath.tsx rename to next/src/providers/hooks/usePath.tsx diff --git a/next/src/remix_providers/hooks/useProps.tsx b/next/src/providers/hooks/useProps.tsx similarity index 100% rename from next/src/remix_providers/hooks/useProps.tsx rename to next/src/providers/hooks/useProps.tsx diff --git a/next/src/remix_providers/hooks/useThings.tsx b/next/src/providers/hooks/useThings.tsx similarity index 100% rename from next/src/remix_providers/hooks/useThings.tsx rename to next/src/providers/hooks/useThings.tsx diff --git a/next/src/remix_providers/hooks/useTrace.tsx b/next/src/providers/hooks/useTrace.tsx similarity index 100% rename from next/src/remix_providers/hooks/useTrace.tsx rename to next/src/providers/hooks/useTrace.tsx diff --git a/next/src/remix_providers/hooks/useUuid.tsx b/next/src/providers/hooks/useUuid.tsx similarity index 100% rename from next/src/remix_providers/hooks/useUuid.tsx rename to next/src/providers/hooks/useUuid.tsx diff --git a/next/src/providers/providers.tsx b/next/src/providers/providers.tsx index 49ed289..71498ca 100644 --- a/next/src/providers/providers.tsx +++ b/next/src/providers/providers.tsx @@ -1,6 +1,6 @@ // app/providers.tsx -import { ThingtimeProvider } from '@/remix_providers/ThingtimeProvider'; +import { ThingtimeProvider } from '~/providers/ThingtimeProvider'; import { ChakraWrapper } from './chakra/ChakraWrapper'; import { Suspense } from 'react'; diff --git a/next/src/remix_providers/chakra/ChakraWrapper.tsx b/next/src/remix_providers/chakra/ChakraWrapper.tsx deleted file mode 100644 index 317b904..0000000 --- a/next/src/remix_providers/chakra/ChakraWrapper.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import { ChakraProvider } from '@chakra-ui/react'; - -import { theme } from './theme'; -export const ChakraWrapper = (props: any) => { - return {props.children}; -}; diff --git a/next/src/remix_routes/$.tsx b/next/src/remix_routes/$.tsx index 31ec061..fd6c456 100644 --- a/next/src/remix_routes/$.tsx +++ b/next/src/remix_routes/$.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { ThingtimeURL } from '@/components/Thingtime/ThingtimeURL'; +import { ThingtimeURL } from '~/components/Thingtime/ThingtimeURL'; export default function Index() { return ; diff --git a/next/src/remix_routes/_index.tsx b/next/src/remix_routes/_index.tsx index f64b489..85e83c2 100644 --- a/next/src/remix_routes/_index.tsx +++ b/next/src/remix_routes/_index.tsx @@ -1,11 +1,11 @@ import { Box, Flex } from '@chakra-ui/react'; -import { ProfileDrawer } from '@/components/Nav/ProfileDrawer'; -import { Splash } from '@/components/Splash/Splash'; -import { Thingtime } from '@/components/Thingtime/Thingtime'; -import { ThingtimeDemo } from '@/components/Thingtime/ThingtimeDemo'; -import { useThingtime } from '@/components/Thingtime/useThingtime'; -import { GradientPath } from '@/gp/GradientPath'; +import { ProfileDrawer } from '~/components/Nav/ProfileDrawer'; +import { Splash } from '~/components/Splash/Splash'; +import { Thingtime } from '~/components/Thingtime/Thingtime'; +import { ThingtimeDemo } from '~/components/Thingtime/ThingtimeDemo'; +import { useThingtime } from '~/components/Thingtime/useThingtime'; +import { GradientPath } from '~/gp/GradientPath'; export default function Index() { const { thingtime } = useThingtime(); diff --git a/next/tsconfig.json b/next/tsconfig.json index 7b28589..659c45e 100644 --- a/next/tsconfig.json +++ b/next/tsconfig.json @@ -18,7 +18,7 @@ } ], "paths": { - "@/*": ["./src/*"] + "~/*": ["./src/*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], diff --git a/package.json b/package.json index 405a483..78044ca 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "description": "Thing Time", "main": "none", "scripts": { + "app": "npm run remix", "remix": "npm run dev --prefix remix", "next": "npm run dev --prefix next", "api": "npm run dev --prefix api",