diff --git a/cache.patch b/cache.patch new file mode 100644 index 00000000..73b6b78c --- /dev/null +++ b/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; diff --git a/examples/my-gatsby-site/src/pages/mdx.tsx b/examples/my-gatsby-site/src/pages/mdx.tsx index 041289ad..0258f494 100644 --- a/examples/my-gatsby-site/src/pages/mdx.tsx +++ b/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 = ({location, pageContext}) => { console.log('page:', page) + const [value, setValue] = useState() + + return ( + + ) + return ( <> = () => { + 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 ( + + + + + {data?.title} + +

+ + + + + + + + + ) +} diff --git a/packages/gatsby-plugin-jaen/src/components/Settings/Settings.tsx b/packages/gatsby-plugin-jaen/src/components/Settings/Settings.tsx index 58af1296..42133ff9 100644 --- a/packages/gatsby-plugin-jaen/src/components/Settings/Settings.tsx +++ b/packages/gatsby-plugin-jaen/src/components/Settings/Settings.tsx @@ -91,8 +91,6 @@ export const Settings: React.FC = 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) diff --git a/packages/gatsby-plugin-jaen/src/components/cms/Settings/Settings.tsx b/packages/gatsby-plugin-jaen/src/components/cms/Settings/Settings.tsx index a352be4f..45d4e7b9 100644 --- a/packages/gatsby-plugin-jaen/src/components/cms/Settings/Settings.tsx +++ b/packages/gatsby-plugin-jaen/src/components/cms/Settings/Settings.tsx @@ -71,8 +71,6 @@ export const Settings: React.FC = ({data, onUpdate}) => { }) }, [data]) - console.log('values', getValues()) - return (
( return } - return + return } return diff --git a/packages/gatsby-plugin-jaen/src/components/ui/calendar.tsx b/packages/gatsby-plugin-jaen/src/components/ui/calendar.tsx new file mode 100644 index 00000000..602098aa --- /dev/null +++ b/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 + +function Calendar({ + className, + classNames, + showOutsideDays = true, + ...props +}: CalendarProps) { + return ( + , + IconRight: ({...props}) => + }} + {...props} + /> + ) +} +Calendar.displayName = 'Calendar' + +export {Calendar} diff --git a/packages/gatsby-plugin-jaen/src/components/ui/card.tsx b/packages/gatsby-plugin-jaen/src/components/ui/card.tsx new file mode 100644 index 00000000..5ff854d6 --- /dev/null +++ b/packages/gatsby-plugin-jaen/src/components/ui/card.tsx @@ -0,0 +1,79 @@ +import * as React from 'react' + +import {cn} from '../../lib/utils' + +const Card = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({className, ...props}, ref) => ( +
+)) +Card.displayName = 'Card' + +const CardHeader = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({className, ...props}, ref) => ( +
+)) +CardHeader.displayName = 'CardHeader' + +const CardTitle = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({className, ...props}, ref) => ( +

+)) +CardTitle.displayName = 'CardTitle' + +const CardDescription = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({className, ...props}, ref) => ( +

+)) +CardDescription.displayName = 'CardDescription' + +const CardContent = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({className, ...props}, ref) => ( +

+)) +CardContent.displayName = 'CardContent' + +const CardFooter = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({className, ...props}, ref) => ( +
+)) +CardFooter.displayName = 'CardFooter' + +export {Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent} diff --git a/packages/gatsby-plugin-jaen/src/components/ui/checkbox.tsx b/packages/gatsby-plugin-jaen/src/components/ui/checkbox.tsx new file mode 100644 index 00000000..a4dbef42 --- /dev/null +++ b/packages/gatsby-plugin-jaen/src/components/ui/checkbox.tsx @@ -0,0 +1,26 @@ +import * as React from 'react' +import * as CheckboxPrimitive from '@radix-ui/react-checkbox' +import {Check} from 'lucide-react' + +import {cn} from '../../lib/utils' + +const Checkbox = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({className, ...props}, ref) => ( + + + + + +)) +Checkbox.displayName = CheckboxPrimitive.Root.displayName + +export {Checkbox} diff --git a/packages/gatsby-plugin-jaen/src/components/ui/dialog.tsx b/packages/gatsby-plugin-jaen/src/components/ui/dialog.tsx new file mode 100644 index 00000000..574af07e --- /dev/null +++ b/packages/gatsby-plugin-jaen/src/components/ui/dialog.tsx @@ -0,0 +1,119 @@ +import * as React from 'react' +import * as DialogPrimitive from '@radix-ui/react-dialog' +import {X} from 'lucide-react' + +import {cn} from '../../lib/utils' + +const Dialog = DialogPrimitive.Root + +const DialogTrigger = DialogPrimitive.Trigger + +const DialogPortal = DialogPrimitive.Portal + +const DialogClose = DialogPrimitive.Close + +const DialogOverlay = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({className, ...props}, ref) => ( + +)) +DialogOverlay.displayName = DialogPrimitive.Overlay.displayName + +const DialogContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({className, children, ...props}, ref) => ( + + + + {children} + + + Close + + + +)) +DialogContent.displayName = DialogPrimitive.Content.displayName + +const DialogHeader = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +DialogHeader.displayName = 'DialogHeader' + +const DialogFooter = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +DialogFooter.displayName = 'DialogFooter' + +const DialogTitle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({className, ...props}, ref) => ( + +)) +DialogTitle.displayName = DialogPrimitive.Title.displayName + +const DialogDescription = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({className, ...props}, ref) => ( + +)) +DialogDescription.displayName = DialogPrimitive.Description.displayName + +export { + Dialog, + DialogPortal, + DialogOverlay, + DialogClose, + DialogTrigger, + DialogContent, + DialogHeader, + DialogFooter, + DialogTitle, + DialogDescription +} diff --git a/packages/gatsby-plugin-jaen/src/components/ui/form.tsx b/packages/gatsby-plugin-jaen/src/components/ui/form.tsx new file mode 100644 index 00000000..132fe18d --- /dev/null +++ b/packages/gatsby-plugin-jaen/src/components/ui/form.tsx @@ -0,0 +1,175 @@ +import * as React from 'react' +import * as LabelPrimitive from '@radix-ui/react-label' +import {Slot} from '@radix-ui/react-slot' +import { + Controller, + ControllerProps, + FieldPath, + FieldValues, + FormProvider, + useFormContext +} from 'react-hook-form' + +import {cn} from '../../lib/utils' +import {Label} from '../ui/label' + +const Form = FormProvider + +type FormFieldContextValue< + TFieldValues extends FieldValues = FieldValues, + TName extends FieldPath = FieldPath +> = { + name: TName +} + +const FormFieldContext = React.createContext( + {} as FormFieldContextValue +) + +const FormField = < + TFieldValues extends FieldValues = FieldValues, + TName extends FieldPath = FieldPath +>({ + ...props +}: ControllerProps) => { + return ( + + + + ) +} + +const useFormField = () => { + const fieldContext = React.useContext(FormFieldContext) + const itemContext = React.useContext(FormItemContext) + const {getFieldState, formState} = useFormContext() + + const fieldState = getFieldState(fieldContext.name, formState) + + if (!fieldContext) { + throw new Error('useFormField should be used within ') + } + + const {id} = itemContext + + return { + id, + name: fieldContext.name, + formItemId: `${id}-form-item`, + formDescriptionId: `${id}-form-item-description`, + formMessageId: `${id}-form-item-message`, + ...fieldState + } +} + +type FormItemContextValue = { + id: string +} + +const FormItemContext = React.createContext( + {} as FormItemContextValue +) + +const FormItem = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({className, ...props}, ref) => { + const id = React.useId() + + return ( + +
+ + ) +}) +FormItem.displayName = 'FormItem' + +const FormLabel = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({className, ...props}, ref) => { + const {error, formItemId} = useFormField() + + return ( +