Skip to content

Commit

Permalink
feat: add notification popup (#40)
Browse files Browse the repository at this point in the history
* save

* feat: add notification popup

* fix: jaen update only for jaen:admin

* chore: remove console logs

* fix: useJaenPageIndex handle deleted child pages

Added handling of deleted child pages in useJaenPageIndex function.

---------

Co-authored-by: Nico Schett <[email protected]>
  • Loading branch information
kleberbaum and schettn authored Aug 8, 2024
1 parent 1300357 commit 2526160
Show file tree
Hide file tree
Showing 42 changed files with 2,401 additions and 141 deletions.
27 changes: 27 additions & 0 deletions cache.patch
Original file line number Diff line number Diff line change
@@ -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;
14 changes: 13 additions & 1 deletion examples/my-gatsby-site/src/pages/mdx.tsx
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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
Expand Down
2 changes: 1 addition & 1 deletion examples/my-gatsby-site/src/pages/wholesale.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,6 @@ export const pageConfig: PageConfig = {
icon: 'FaWarehouse',
auth: {
isRequired: true,
roles: ['4d84a68f-7b18-4efe-ae73-d6d3dd226110']
roles: ['260237544631828483:kassabuch:admin']
}
}
2 changes: 1 addition & 1 deletion packages/gatsby-plugin-jaen/components.json
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,6 @@
},
"aliases": {
"components": "components",
"utils": "../../lib/utils"
"utils": "utils"
}
}
9 changes: 5 additions & 4 deletions packages/gatsby-plugin-jaen/gatsby/gatsby-node.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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)] =
Expand Down
21 changes: 18 additions & 3 deletions packages/gatsby-plugin-jaen/package.json
Original file line number Diff line number Diff line change
@@ -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": [
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand Down
93 changes: 93 additions & 0 deletions packages/gatsby-plugin-jaen/src/components/Popup.tsx
Original file line number Diff line number Diff line change
@@ -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>
)
}
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -71,8 +71,6 @@ export const Settings: React.FC<SettingsProps> = ({data, onUpdate}) => {
})
}, [data])

console.log('values', getValues())

return (
<Box id="coco">
<form
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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} />
Expand Down
64 changes: 64 additions & 0 deletions packages/gatsby-plugin-jaen/src/components/ui/calendar.tsx
Original file line number Diff line number Diff line change
@@ -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}
Loading

0 comments on commit 2526160

Please sign in to comment.