WIP: convert to panda

netsnek · Apr 28, 2024 · 05e0e00 · 05e0e00
1 parent 7e3619a
commit 05e0e00
Show file tree

Hide file tree

Showing 73 changed files with 159 additions and 301 deletions.
diff --git a/package.json b/package.json
@@ -21,14 +21,9 @@
     "@ark-ui/react": "1.3.0",
     "@atsnek/jaen": "^1.0.0-rc.70",
     "@atsnek/jaen-fields-mdx": "^1.0.0-rc.14", 
-    "@chakra-ui/icons": "^2.1.0",
-    "@chakra-ui/react": "^2.8.1",
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
     "@reach/router": "^1.3.4",
     "@snek-functions/origin": "^0.9.8",
     "flexsearch": "^0.7.43",
-    "framer-motion": "^10.16.1",
     "gatsby": "^5.11.0",
     "gatsby-jaen-mailpress": "0.0.6",
     "gatsby-plugin-cloudflare-pages": "^1.0.2",

diff --git a/src/components/AppLayout/AppLayout.tsx b/src/components/AppLayout/AppLayout.tsx
@@ -1,16 +1,18 @@
-import { Box, Flex, useDisclosure } from '@chakra-ui/react';
+import {
+  Box
+} from 'styled-system/jsx';
 import React, { FC, ReactNode, useMemo } from 'react';
-import TopNav from '../navigation/TopNav';
-import AltTopNav from '../navigation/AltTopNav';
+// import TopNav from '../navigation/TopNav';
+// import AltTopNav from '../navigation/AltTopNav';
 
 import { useAuth, useCMSManagementContext } from '@atsnek/jaen';
 import { useLocation } from '@reach/router';
 import { MenuStructureContext } from '../../contexts/menu-structure';
 import { createPageTree } from '../../utils/navigation';
 import CommunityLayout from './CommunityLayout';
 import DocsLayout from './DocsLayout';
-import Footer from './Footer';
-import { GridPattern } from '../GridPattern';
+// import Footer from './Footer';
+//import { GridPattern } from '../GridPattern';
 
 interface AppLayoutProps {
   children?: React.ReactNode;
@@ -26,7 +28,7 @@ interface AppLayoutProps {
 const AppLayout: FC<AppLayoutProps> = ({ children, isDocs, path, footer }) => {
   const cmsManager = useCMSManagementContext();
   const location = useLocation();
-  const topNavDisclosure = useDisclosure(); // for the top nav mobile drawer
+  // const topNavDisclosure = useDisclosure(); // for the top nav mobile drawer
   const { isAuthenticated } = useAuth();
   const currentUserId = '1';
 
@@ -36,7 +38,7 @@ const AppLayout: FC<AppLayoutProps> = ({ children, isDocs, path, footer }) => {
     [cmsManager, path]
   );
 
-  const FooterComp = footer ?? Footer;
+  // const FooterComp = footer ?? Footer;
 
   let childrenElmnt: ReactNode = null;
 
@@ -58,35 +60,13 @@ const AppLayout: FC<AppLayoutProps> = ({ children, isDocs, path, footer }) => {
     <>
       <MenuStructureContext.Provider value={{ menuStructure }}>
       <Box
-          as="main"
           minW="210px"
           h="max(100%, 100vh)"
           minH="100vh">
-            {path === "/" && <GridPattern
-              position="absolute"
-              insetX="0"
-              top="-14" // In Chakra UI the values are in base 4 pixels, '-14' here might not directly translate. Adjust accordingly.
-              zIndex={-10}
-              h="1000px" // It's preferable to use responsive units or percentages depending on your design.
-              w="full"
-              bgColor="white"
-              fill="rgba(149, 156, 177, 0.1)"
-              // Stroke and mask-image are not directly supported through Chakra props. Consider inline styles or additional CSS.
-              sx={{
-                // This demonstrates how to apply more complex styles not directly available as Chakra props:
-                stroke: "rgba(149, 156, 177, 0.1)", // example variable, adjust as necessary
-                maskImage:
-                  "linear-gradient(to bottom left, white 40%, transparent 50%)",
-              }}
-              yOffset={-96}
-              interactive
-            />}
-          {!isAuthenticated && path !== "/" && <TopNav path={path} />}
-          {!isAuthenticated && path === "/" && <AltTopNav path={path} />}
           {childrenElmnt}
         </Box>
       </MenuStructureContext.Provider>
-      <FooterComp />
+      {/* <FooterComp /> */}
     </>
   );
 };

diff --git a/src/components/ProductContent.tsx b/src/components/ProductContent.tsx
@@ -1,28 +1,22 @@
-import { FC } from "react";
+import React, { FC } from "react";
 import {
   Box,
-  Button,
   Center,
   Flex,
-  Heading,
   HStack,
-  Icon,
-  NumberDecrementStepper,
-  NumberIncrementStepper,
-  NumberInput,
-  NumberInputField,
-  NumberInputStepper,
   Stack,
-  StackDivider,
-  Text,
-  Tooltip,
-  useClipboard,
-  useColorModeValue,
   VStack,
   Wrap,
-  WrapItem,
-} from "@chakra-ui/react";
-import React from "react";
+} from 'styled-system/jsx';
+
+import {
+  Button,
+  Heading,
+  Icon,
+  NumberInput,
+  Text,
+  Tooltip
+} from '~/components/ui'
 
 import { FaShare } from "@react-icons/all-files/fa/FaShare";
 import { FaShoppingBasket } from "@react-icons/all-files/fa/FaShoppingBasket";
@@ -81,8 +75,7 @@ const SliderItem = connectBlock(
   () => {
     return (
       <Box display={"flex"} justifyContent="center">
-        <Box
-          as={Field.Image}
+        <Field.Image
           name="image"
           m="0"
           h="200px"
@@ -109,18 +102,18 @@ export const ProductContent: FC<IProductContentProps> = () => {
 
   return (
     <>
-      <VStack mb={8} spacing={12} w="100%">
+      <VStack mb={8} gap={12} w="100%">
         <Flex direction={{ base: "column", lg: "row" }} w="100%">
           <Stack
             direction={{ base: "column", lg: "row" }}
-            spacing="14"
+            gap="14"
             w="100%"
           >
             <Box pos="relative" w="100%">
               <Field.Section
-                as={Stack}
+                // as={Stack}
                 props={{
-                  spacing: 4,
+                  gap: 4,
                   my: "8",
                   py: "0",
                   bg: "white",
@@ -132,7 +125,7 @@ export const ProductContent: FC<IProductContentProps> = () => {
               />
             </Box>
             <Stack
-              spacing="8"
+              gap="8"
               w="100%"
               position={{ base: "relative", lg: "sticky" }}
               top={{
@@ -244,7 +237,7 @@ const ProductDetail = (props: {
   //   props.product.variants[0].availableForSale
 
   return (
-    <VStack align="left" spacing="4" divider={<StackDivider />}>
+    <VStack alignItems="start" gap="4">
       <Stack>
         <Field.Text
           as={Heading}
@@ -287,7 +280,7 @@ const ProductDetail = (props: {
       </Text>
 
       <Stack>
-        <Stack spacing="4" mt="4">
+        <Stack gap="4" mt="4">
           <HStack>
             {/* <Price prices={prices} /> */}
             100,00 €
@@ -312,23 +305,23 @@ const ProductDetail = (props: {
               defaultValue={minQuantity}
               min={minQuantity}
               value={quantity}
-              onChange={(valueString) => {
-                setQuantity(parseInt(valueString));
-              }}
+              // onChange={(valueString) => {
+              //   setQuantity(parseInt(valueString));
+              // }}
             >
-              <NumberInputField />
+              {/* <NumberInputField />
               <NumberInputStepper>
                 <NumberIncrementStepper />
                 <NumberDecrementStepper />
-              </NumberInputStepper>
+              </NumberInputStepper> */}
             </NumberInput>
             <Button
               // display={{
               //   base: 'none',
               //   md: 'flex'
               // }}
               size="lg"
-              isDisabled={!availableForSale}
+              disabled={!availableForSale}
               fontWeight="semibold"
               textTransform="uppercase"
               onClick={addProductToBasket}
@@ -352,27 +345,28 @@ const ProductDetail = (props: {
 function ShareText() {
   const value = typeof window !== "undefined" ? window.location.href : "";
 
-  const { hasCopied, onCopy } = useClipboard(value);
+  // const { hasCopied, onCopy } = useClipboard(value);
 
   return (
-    <Center
-      color={hasCopied ? "red.500" : undefined}
-      _hover={{
-        color: hasCopied ? "red.400" : "red.300",
-      }}
-      verticalAlign="center"
-      cursor="pointer"
-    >
-      <Icon as={FaShare} mr="2" />
-      <Text fontWeight="semibold" onClick={onCopy}>
-        Teilen
-        {hasCopied && (
-          <Text ml="2" fontWeight="thin">
-            (Kopiert!)
-          </Text>
-        )}
-      </Text>
-    </Center>
+    <Box></Box>
+    // <Center
+    //   color={hasCopied ? "red.500" : undefined}
+    //   _hover={{
+    //     color: hasCopied ? "red.400" : "red.300",
+    //   }}
+    //   verticalAlign="center"
+    //   cursor="pointer"
+    // >
+    //   <Icon as={FaShare} mr="2" />
+    //   <Text fontWeight="semibold" onClick={onCopy}>
+    //     Teilen
+    //     {hasCopied && (
+    //       <Text ml="2" fontWeight="thin">
+    //         (Kopiert!)
+    //       </Text>
+    //     )}
+    //   </Text>
+    // </Center>
   );
 }
 

diff --git a/src/components/icons/HideSidebar.tsx b/src/components/icons/HideSidebar.tsx
@@ -1,5 +1,4 @@
-import { Icon, IconProps } from '@chakra-ui/icons';
-import React, { FC } from 'react';
+import { Icon, IconProps } from '~/components/ui';
 
 /**
  * Hide sidebar icon.

diff --git a/src/components/icons/bootstrap/BsFileEarmark.tsx b/src/components/icons/bootstrap/BsFileEarmark.tsx
@@ -1,5 +1,4 @@
-import { Icon, IconProps } from '@chakra-ui/react';
-import React from 'react';
+import { Icon, IconProps } from '~/components/ui';
 
 /**
  * Bootstrap icon for a blank file.

diff --git a/src/components/icons/bootstrap/BsFiletypeCs.tsx b/src/components/icons/bootstrap/BsFiletypeCs.tsx
@@ -1,5 +1,4 @@
-import { Icon, IconProps } from '@chakra-ui/react';
-import React from 'react';
+import { Icon, IconProps } from '~/components/ui';
 
 /**
  * Bootstrap icon for a .cs file.

diff --git a/src/components/icons/bootstrap/BsFiletypeCss.tsx b/src/components/icons/bootstrap/BsFiletypeCss.tsx
@@ -1,5 +1,4 @@
-import { Icon, IconProps } from '@chakra-ui/react';
-import React from 'react';
+import { Icon, IconProps } from '~/components/ui';
 
 /**
  * Bootstrap icon for a .css file.

diff --git a/src/components/icons/bootstrap/BsFiletypeCsv.tsx b/src/components/icons/bootstrap/BsFiletypeCsv.tsx
@@ -1,5 +1,4 @@
-import { Icon, IconProps } from '@chakra-ui/react';
-import React from 'react';
+import { Icon, IconProps } from '~/components/ui';
 
 /**
  * Bootstrap icon for a .csv file.

diff --git a/src/components/icons/bootstrap/BsFiletypeExe.tsx b/src/components/icons/bootstrap/BsFiletypeExe.tsx
@@ -1,5 +1,4 @@
-import { Icon, IconProps } from '@chakra-ui/react';
-import React from 'react';
+import { Icon, IconProps } from '~/components/ui';
 
 /**
  * Bootstrap icon for a .exe file.

diff --git a/src/components/icons/bootstrap/BsFiletypeGif.tsx b/src/components/icons/bootstrap/BsFiletypeGif.tsx
@@ -1,5 +1,4 @@
-import { Icon, IconProps } from '@chakra-ui/react';
-import React from 'react';
+import { Icon, IconProps } from '~/components/ui';
 
 /**
  * Bootstrap icon for a .gif file.

diff --git a/src/components/icons/bootstrap/BsFiletypeHtml.tsx b/src/components/icons/bootstrap/BsFiletypeHtml.tsx
@@ -1,5 +1,4 @@
-import { Icon, IconProps } from '@chakra-ui/react';
-import React from 'react';
+import { Icon, IconProps } from '~/components/ui';
 
 /**
  * Bootstrap icon for a .html file.

diff --git a/src/components/icons/bootstrap/BsFiletypeJava.tsx b/src/components/icons/bootstrap/BsFiletypeJava.tsx
@@ -1,5 +1,4 @@
-import { Icon, IconProps } from '@chakra-ui/react';
-import React from 'react';
+import { Icon, IconProps } from '~/components/ui';
 
 /**
  * Bootstrap icon for a .java file.

diff --git a/src/components/icons/bootstrap/BsFolder.tsx b/src/components/icons/bootstrap/BsFolder.tsx
@@ -1,5 +1,4 @@
-import { Icon, IconProps } from '@chakra-ui/react';
-import React from 'react';
+import { Icon, IconProps } from '~/components/ui';
 
 /**
  * Bootstrap icon for a (closed) folder.

diff --git a/src/components/icons/bootstrap/BsFolder2Open.tsx b/src/components/icons/bootstrap/BsFolder2Open.tsx
@@ -1,5 +1,4 @@
-import { Icon, IconProps } from '@chakra-ui/react';
-import React from 'react';
+import { Icon, IconProps } from '~/components/ui';
 
 /**
  * Bootstrap (v2) icon for an open folder.

diff --git a/src/components/icons/brands/GitHub.tsx b/src/components/icons/brands/GitHub.tsx
@@ -1,5 +1,4 @@
-import { Icon, IconProps } from '@chakra-ui/icons';
-import React, { FC } from 'react';
+import { Icon, IconProps } from '~/components/ui';
 
 /**
  * GitHub icon.

diff --git a/src/components/icons/feather/FeatherFile.tsx b/src/components/icons/feather/FeatherFile.tsx
@@ -1,5 +1,4 @@
-import { Icon, IconProps } from '@chakra-ui/react';
-import React from 'react';
+import { Icon, IconProps } from '~/components/ui';
 
 /**
  * Feather icon for a file.

diff --git a/src/components/icons/feather/FeatherFolder.tsx b/src/components/icons/feather/FeatherFolder.tsx
@@ -1,5 +1,4 @@
-import { Icon, IconProps } from '@chakra-ui/react';
-import React from 'react';
+import { Icon, IconProps } from '~/components/ui';
 
 /**
  * Feather icon for a folder.

diff --git a/src/components/icons/feather/FeatherInbox.tsx b/src/components/icons/feather/FeatherInbox.tsx
@@ -1,4 +1,4 @@
-import { Icon, IconProps } from '@chakra-ui/react';
+import { Icon, IconProps } from '~/components/ui';
 
 const FeatherInbox = (props: IconProps) => {
   return (

diff --git a/src/components/icons/fontawesome/FaHashtag.tsx b/src/components/icons/fontawesome/FaHashtag.tsx
@@ -1,5 +1,4 @@
-import { Icon, IconProps } from '@chakra-ui/react';
-import React from 'react';
+import { Icon, IconProps } from '~/components/ui';
 
 /**
  * Fontawesome icon for a hash tag.

diff --git a/src/components/icons/fontawesome/FaRegFile.tsx b/src/components/icons/fontawesome/FaRegFile.tsx
@@ -1,5 +1,4 @@
-import { Icon, IconProps } from '@chakra-ui/react';
-import React from 'react';
+import { Icon, IconProps } from '~/components/ui';
 
 /**
  * Fontawesome regular icon for a file.

diff --git a/src/components/icons/fontawesome/FaRegFileAlt.tsx b/src/components/icons/fontawesome/FaRegFileAlt.tsx
@@ -1,5 +1,4 @@
-import { Icon, IconProps } from '@chakra-ui/react';
-import React from 'react';
+import { Icon, IconProps } from '~/components/ui';
 
 /**
  * Fontawesome regular icon for a file.