feat: add notification popup

cache.patch

@@ -0,0 +1,27 @@
+diff --git a/node_modules/gatsby/cache-dir/create-content-digest-browser-shim.js b/node_modules/gatsby/cache-dir/create-content-digest-browser-shim.js
+index edc673f..cbd390c 100644
+--- a/node_modules/gatsby/cache-dir/create-content-digest-browser-shim.js
++++ b/node_modules/gatsby/cache-dir/create-content-digest-browser-shim.js
+@@ -1 +1 @@
+-exports.createContentDigest = () => ``
++export const createContentDigest = () => ``
+diff --git a/node_modules/gatsby/cache-dir/public-page-renderer.js b/node_modules/gatsby/cache-dir/public-page-renderer.js
+index 6a91ada..e2ee03a 100644
+--- a/node_modules/gatsby/cache-dir/public-page-renderer.js
++++ b/node_modules/gatsby/cache-dir/public-page-renderer.js
+@@ -1,9 +1,11 @@
+ const preferDefault = m => (m && m.default) || m
+
++let renderer = () => null;
++
+ if (process.env.BUILD_STAGE === `develop`) {
+-  module.exports = preferDefault(require(`./public-page-renderer-dev`))
++  renderer = preferDefault(require(`./public-page-renderer-dev`))
+ } else if (process.env.BUILD_STAGE === `build-javascript`) {
+-  module.exports = preferDefault(require(`./public-page-renderer-prod`))
+-} else {
+-  module.exports = () => null
++  renderer = preferDefault(require(`./public-page-renderer-prod`))
+ }
++
++export default renderer;

examples/my-gatsby-site/src/pages/mdx.tsx

@@ -1,8 +1,9 @@
 import {Field, PageConfig, PageProps} from '@atsnek/jaen'
 import {Box} from '@chakra-ui/react'
-import {MdxField} from '@atsnek/jaen-fields-mdx'
+import {MdxField, UncontrolledMdxField} from '@atsnek/jaen-fields-mdx'
 import {Link} from 'gatsby-plugin-jaen'
 import {usePage} from '@atsnek/jaen'
+import {useState} from 'react'
 
 const QASMPlayground: React.FC<{
   playground?: boolean
@@ -26,6 +27,17 @@ const Page: React.FC<PageProps> = ({location, pageContext}) => {
 
   console.log('page:', page)
 
+  const [value, setValue] = useState<any>()
+
+  return (
+    <UncontrolledMdxField
+      components={{QASMPlayground}}
+      value={value}
+      onUpdateValue={setValue}
+      isEditing={true}
+    />
+  )
+
   return (
     <>
       <Link

examples/my-gatsby-site/src/pages/wholesale.tsx

@@ -15,6 +15,6 @@ export const pageConfig: PageConfig = {
   icon: 'FaWarehouse',
   auth: {
     isRequired: true,
-    roles: ['4d84a68f-7b18-4efe-ae73-d6d3dd226110']
+    roles: ['260237544631828483:kassabuch:admin']
   }
 }

packages/gatsby-plugin-jaen/components.json

@@ -12,6 +12,6 @@
   },
   "aliases": {
     "components": "components",
-    "utils": "../../lib/utils"
+    "utils": "utils"
   }
 }

packages/gatsby-plugin-jaen/gatsby/gatsby-node.ts

@@ -168,11 +168,12 @@ export const onPreInit: GatsbyNode['onPreInit'] = async (
 
     if (sentryPlugin) {
       sentryPlugin.pluginOptions.dsn = pluginOptions.sentry.dsn
-    }
 
-    // Write sentry.org and sentry.project to process.env
-    process.env.SENTRY_ORG = pluginOptions.sentry.org
-    process.env.SENTRY_PROJECT = pluginOptions.sentry.project
+      // Write sentry.org and sentry.project to process.env
+      process.env.SENTRY_ORG = pluginOptions.sentry.org
+      process.env.SENTRY_PROJECT = pluginOptions.sentry.project
+      process.env.SENTRY_URL = new URL(pluginOptions.sentry.dsn).origin
+    }
   }
 
   // state.flattenedPlugins[state.flattenedPlugins.indexOf(manifestPlugin)] =

packages/gatsby-plugin-jaen/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-plugin-jaen",
-  "version": "1.0.0-rc.96",
+  "version": "1.0.0-rc.102",
   "main": "index.js",
   "types": "./src/index.ts",
   "files": [
@@ -25,14 +25,26 @@
     "@chakra-ui/react": "^2.8.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@hookform/resolvers": "^3.4.2",
     "@radix-ui/react-avatar": "^1.0.4",
+    "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-toast": "^1.1.5",
+    "@radix-ui/react-toggle": "^1.0.3",
     "@sentry/gatsby": "^7.106.0",
+    "@tiptap/extension-link": "^2.4.0",
+    "@tiptap/extension-underline": "^2.4.0",
+    "@tiptap/pm": "^2.4.0",
+    "@tiptap/react": "^2.4.0",
+    "@tiptap/starter-kit": "^2.4.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
+    "date-fns": "^3.6.0",
     "framer-motion": "^10.13.0",
     "gatsby-plugin-google-gtag": "^5.12.0",
     "gatsby-plugin-image": "^3.13.1",
@@ -47,9 +59,10 @@
     "lucide-react": "^0.358.0",
     "react-beautiful-dnd": "^13.1.1",
     "react-complex-tree": "^2.2.0",
+    "react-day-picker": "^8.10.1",
     "react-dropzone": "^14.2.3",
     "react-filerobot-image-editor": "^4.5.1",
-    "react-hook-form": "^7.45.2",
+    "react-hook-form": "^7.51.5",
     "react-konva": "^18.2.10",
     "react-photo-view": "^1.2.3",
     "react-zoom-pan-pinch": "^3.1.0",
@@ -58,9 +71,11 @@
     "styled-components": "^6.0.5",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7",
-    "use-debounce": "^9.0.4"
+    "use-debounce": "^9.0.4",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
+    "@tailwindcss/typography": "^0.5.13",
     "@types/lodash.throttle": "^4.1.7",
     "@types/react-beautiful-dnd": "^13.1.8",
     "gatsby": "^5.11.0",

packages/gatsby-plugin-jaen/src/components/Popup.tsx

@@ -0,0 +1,93 @@
+import React, {useEffect} from 'react'
+
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from './ui/dialog'
+import {Button} from './ui/button'
+import {useNotificationPopupWidget} from '../hooks/use-notification-popup-widget'
+
+export const Popup: React.FC<{}> = () => {
+  const [{data}] = useNotificationPopupWidget()
+
+  const [consent, setConsent] = React.useState(true)
+
+  useEffect(() => {
+    // The local storage contains the notification popup data so we can check if the user has already seen the notification
+    // When the data is missing or the data is outdated we show the notification
+    const localStorageData = localStorage.getItem('notification-popup')
+
+    if (!localStorageData) {
+      setConsent(false)
+    }
+
+    // String comparison to check if the data is outdated
+    else if (data && localStorageData !== JSON.stringify(data)) {
+      setConsent(false)
+    } else {
+      setConsent(true)
+    }
+  }, [data])
+
+  const handleConsent = () => {
+    localStorage.setItem('notification-popup', JSON.stringify(data))
+    setConsent(true)
+  }
+
+  useEffect(() => {
+    // Skip if the user has already seen the notification
+    if (consent) {
+      return
+    }
+
+    const popup = document.getElementById('notification-popup')
+    if (popup) {
+      // Check if the notification is enabled
+      const isEnabled = data?.isEnabled ?? false
+      const from = data?.from ? new Date(data?.from) : null
+      const to = data?.to ? new Date(data?.to) : null
+
+      if (isEnabled) {
+        const now = new Date()
+
+        let isInTimeRange = true
+        if (from && to) {
+          isInTimeRange = now >= from && now <= to
+        } else if (from) {
+          isInTimeRange = now >= from
+        } else if (to) {
+          isInTimeRange = now <= to
+        }
+
+        if (isInTimeRange) {
+          popup.click()
+        }
+      }
+    }
+  }, [consent, data])
+
+  return (
+    <Dialog>
+      <DialogTrigger id="notification-popup" className="hidden" />
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle className="text-2xl">{data?.title}</DialogTitle>
+        </DialogHeader>
+        <p
+          className="prose"
+          dangerouslySetInnerHTML={{__html: data?.message || ''}}></p>
+
+        <DialogFooter>
+          <DialogClose>
+            <Button onClick={handleConsent}>Gelesen / Read</Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

packages/gatsby-plugin-jaen/src/components/Settings/Settings.tsx

@@ -91,8 +91,6 @@ export const Settings: React.FC<SettingsProps> = props => {
   const query = new URLSearchParams(window.location.search)
   const initialTab = query.get('activeTab') || 'GENERAL' // replace 'GENERAL' with your default tab value
 
-  console.log('settings', props)
-
   const notify = useNotificationsContext()
 
   const [user, setUser] = useState(props.user)

packages/gatsby-plugin-jaen/src/components/cms/Settings/Settings.tsx

@@ -71,8 +71,6 @@ export const Settings: React.FC<SettingsProps> = ({data, onUpdate}) => {
     })
   }, [data])
 
-  console.log('values', getValues())
-
   return (
     <Box id="coco">
       <form

packages/gatsby-plugin-jaen/src/components/shared/Link/Link.tsx

@@ -24,7 +24,7 @@ const Link = <T extends As>(
       return <Wrapper as={GatsbyLink} to={to} {...props} ref={ref} />
     }
 
-    return <Wrapper as="a" href={to} {...props} ref={ref} />
+    return <Wrapper as="a" isExternal href={to} {...props} ref={ref} />
   }
 
   return <Wrapper {...props} ref={ref} />

packages/gatsby-plugin-jaen/src/components/ui/calendar.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react'
+import {ChevronLeft, ChevronRight} from 'lucide-react'
+import {DayPicker} from 'react-day-picker'
+
+import {cn} from '../../lib/utils'
+import {buttonVariants} from './button'
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn('p-3', className)}
+      classNames={{
+        months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
+        month: 'space-y-4',
+        caption: 'flex justify-center pt-1 relative items-center',
+        caption_label: 'text-sm font-medium',
+        nav: 'space-x-1 flex items-center',
+        nav_button: cn(
+          buttonVariants({variant: 'outline'}),
+          'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100'
+        ),
+        nav_button_previous: 'absolute left-1',
+        nav_button_next: 'absolute right-1',
+        table: 'w-full border-collapse space-y-1',
+        head_row: 'flex',
+        head_cell:
+          'text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]',
+        row: 'flex w-full mt-2',
+        cell: 'h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20',
+        day: cn(
+          buttonVariants({variant: 'ghost'}),
+          'h-9 w-9 p-0 font-normal aria-selected:opacity-100'
+        ),
+        day_range_end: 'day-range-end',
+        day_selected:
+          'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
+        day_today: 'bg-accent text-accent-foreground',
+        day_outside:
+          'day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30',
+        day_disabled: 'text-muted-foreground opacity-50',
+        day_range_middle:
+          'aria-selected:bg-accent aria-selected:text-accent-foreground',
+        day_hidden: 'invisible',
+        ...classNames
+      }}
+      components={{
+        IconLeft: ({...props}) => <ChevronLeft className="h-4 w-4" />,
+        IconRight: ({...props}) => <ChevronRight className="h-4 w-4" />
+      }}
+      {...props}
+    />
+  )
+}
+Calendar.displayName = 'Calendar'
+
+export {Calendar}