) => {
+
+ // @ts-ignore
+ const props = ButtonProps.applyDefaults(rawProps)
+ const { text, children } = props
+
+ // State
+ const [didMount, setDidMount] = useState(false)
+
+ // Hooks
+ const router = useRouter()
+
+ // Vars
+ const buttonText = typeof children === 'string' ? children : text
+
+ // Flags
+ const isPressable = !!props.onPress && !didMount
+ const asLink = !!props.href && !isPressable && !props.disabled
+ const hasLabel = !!buttonText || !!children
+ const hasLeftIcon = !!props.iconLeft
+ const hasRightIcon = !!props.iconRight
+ const isLeftIconImg = props.iconLeft?.startsWith('http')
+ const isRightIconImg = props.iconRight?.startsWith('http')
+
+ // -- Styles --
+
+ const buttonClassNames = cn(
+ 'relative flex flex-row items-center justify-center rounded-md no-underline',
+ 'web:ring-offset-background web:transition-colors web:focus-visible:outline-none web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2',
+ props.type === 'primary' && 'bg-primary web:hover:opacity-90 active:opacity-90',
+ props.type === 'secondary' && 'bg-secondary-foreground web:hover:opacity-80 active:opacity-80',
+ props.type === 'outline' && 'bg-transparent border border-input web:hover:bg-accent web:hover:text-accent-foreground active:bg-accent',
+ props.type === 'link' && 'bg-transparent border-none web:hover:bg-transparent active:bg-transparent',
+ props.type === 'warn' && 'bg-warn web:hover:opacity-90 active:opacity-90',
+ props.type === 'danger' && 'bg-danger web:hover:opacity-90 active:opacity-90',
+ props.type === 'info' && 'bg-info web:hover:opacity-90 active:opacity-90',
+ props.type === 'success' && 'bg-success web:hover:opacity-90 active:opacity-90',
+ props.size === 'sm' && 'py-2 px-3',
+ props.size === 'md' && 'p-3',
+ props.size === 'lg' && 'p-4',
+ props.type === 'link' && 'p-0 justify-start',
+ props.disabled && 'opacity-75 cursor-not-allowed',
+ props.fullWidth ? 'w-full' : 'self-start',
+ props.className,
+ )
+
+ const textClassNames = cn(
+ 'no-underline',
+ props.type === 'primary' && 'text-primary-foreground',
+ props.type === 'secondary' && 'text-secondary',
+ props.type === 'outline' && 'text-primary',
+ props.type === 'link' && 'text-link',
+ props.type === 'warn' && 'text-primary-foreground',
+ props.type === 'danger' && 'text-primary-foreground',
+ props.type === 'info' && 'text-primary-foreground',
+ props.type === 'success' && 'text-primary-foreground',
+ props.size === 'sm' && 'text-sm',
+ props.size === 'md' && 'text-base',
+ props.size === 'lg' && 'text-lg',
+ props.disabled && 'text-muted cursor-not-allowed',
+ props.textClassName,
+ hasLeftIcon && 'pl-2',
+ hasRightIcon && 'pr-2',
+ )
+
+ const iconClassNames = cn(
+ props.type === 'primary' && 'text-primary-foreground',
+ props.type === 'secondary' && 'text-secondary',
+ props.type === 'outline' && 'text-primary',
+ props.type === 'link' && 'text-link',
+ props.type === 'warn' && 'text-primary-foreground',
+ props.type === 'danger' && 'text-primary-foreground',
+ props.type === 'info' && 'text-primary-foreground',
+ props.type === 'success' && 'text-primary-foreground',
+ props.disabled && 'text-muted',
+ )
+
+ const colorPrimaryInverse = useThemeColor('--primary-foreground')
+ const colorPrimary = useThemeColor('--primary')
+ const colorLink = useThemeColor('--link')
+ const colorMuted = useThemeColor('--muted')
+
+ let iconColor = colorPrimaryInverse as string
+ if (props.type === 'secondary') iconColor = colorPrimary
+ if (props.type === 'outline') iconColor = colorPrimary
+ if (props.type === 'link') iconColor = colorLink
+ if (props.type === 'warn') iconColor = colorPrimaryInverse
+ if (props.type === 'danger') iconColor = colorPrimaryInverse
+ if (props.type === 'info') iconColor = colorPrimaryInverse
+ if (props.type === 'success') iconColor = colorPrimaryInverse
+ if (props.disabled) iconColor = colorMuted
+
+ let iconSize = props.iconSize
+ if (props.size === 'sm') iconSize = 12
+ if (props.size === 'lg') iconSize = 18
+
+ // -- Handlers --
+
+ const onButtonPress = (evt: any$TooComplex) => {
+ // Ignore?
+ if (props.disabled) return
+ // Call event handler?
+ props.onPress?.(evt)
+ // If link behaviour is already handled by the Link component, skip it here
+ if (asLink) return
+ // Open in new tab?
+ const isWebBlankLink = isWeb && props.href && props.target === '_blank'
+ if (isWebBlankLink) return window.open(props.href, '_blank')
+ // Navigate?
+ if (props.href && props.replace) return router.replace(props.href)
+ if (props.href && props.push) return router.push(props.href)
+ if (props.href) router.navigate(props.href)
+ }
+
+ // -- Effects --
+
+ useEffect(() => { setDidMount(true) }, [])
+
+ // -- Content --
+
+ const buttonContent = (
+ <>
+ {hasLeftIcon && (
+
+ {isLeftIconImg ? (
+
+ )}
+ {hasLabel && (
+
+ {!!buttonText ? (
+
+ {buttonText}
+
+ ) : (
+ children
+ )}
+
+ )}
+ {hasRightIcon && (
+
+ {isRightIconImg ? (
+
+ )}
+
+ )
+
+ // -- Render as Link --
+
+ if (asLink) {
+ return (
+ // @ts-ignore
+
+ {buttonContent}
+
+
+ )
+ }
+
+ // -- Render --
+
+ return (
+
+ {buttonContent}
+
+ )
+}
+
+/* --- Documentation --------------------------------------------------------------------------- */
+
+export const getDocumentationProps = ButtonProps.documentationProps('Button')
diff --git a/features/@app-core/components/EfficiencyResults.tsx b/features/@app-core/components/EfficiencyResults.tsx
new file mode 100644
index 0000000..9d55b50
--- /dev/null
+++ b/features/@app-core/components/EfficiencyResults.tsx
@@ -0,0 +1,384 @@
+import { cn, View, Text, H1, H2, H3, P, Link, getThemeColor } from '../components/styled'
+import { calculateEfficiency } from '../utils/calculateEfficiency'
+import { EfficiencyFormState, TECH_KNOWLEDGE } from '../screens/FormsScreen.types'
+import { NumberStepper } from '../forms/NumberStepper.styled'
+import { CheckList } from '../forms/CheckList.styled'
+import { Button } from '../components/Button'
+import { roundUpTo } from '@green-stack/utils/numberUtils'
+import { Icon } from '@green-stack/components/Icon'
+import { uppercaseFirstChar } from '@green-stack/utils/stringUtils'
+
+/* --- Types ----------------------------------------------------------------------------------- */
+
+export type EfficiencyResultsProps = {
+ showBenefits: boolean
+ formState: EfficiencyFormState
+}
+
+/* --- Components ------------------------------------------------------------------------------ */
+
+const Li = ({ children }: { children: string | any$Todo }) => (
+
+ {children}
+
+)
+
+/* ---
+ {`Ship `}
+ {showEfficiencyBoost ? (
+
+ {`${annualAvgEfficiencyBoost}% `}
+
+ ) : (
+
+ {`slightly `}
+
+ )}
+ {`more efficiently`}
+
+
+
+
+
+
+ {formatRelativeTime(annualHoursSaved)}
+ {` of extra value delivered yearly`}
+
+ )}
+
+
+
+ {`project${projectsPerYear > 1 ? 's' : ''} per year`}
+
+
+
+
+ {formatRelativeTime(learningGapHours, roundUpTo, learningGapDecimals)}
+ {` to learn the ropes`}
+
+
+
+ Team Knowledge?
+
+
+
+ formState.handleChange('showBenefits', !showBenefits)}
+ disabled={!formState.values.identifiesWith}
+ fullWidth
+ />
+
+
+
+ {`As a `}
+ {identity}
+ {`, you stand to benefit `}
+ {benefitLevel}
+ {` from the efficiency gains of this starterkit:`}
+
+
+ {`${setupHoursPerProject} hours on setup saved per project`}
+ {`Web + iOS + Android (write-once)`}
+ {!shipsUniversal && (
+ {`= ${(deliveryEfficiency - 1) * 100}% more deliverables / project (roughly)`}
+ )}
+
+
+ {showValueDelivered && (
+ <>
+ {`Only ${formatRelativeTime(learningGapHours, roundUpTo, learningGapDecimals)} to learn the stack`}
+ {`= ${formatRelativeTime(annualHoursSaved)} of setup saved at ${projectsPerYear} ${projects} / year`}
+ {`= ${finalEfficiencyRate}% extra features delivered / year`}
+
+ )}
+
+ {showEfficiencyBoost && (
+ <>
+ {`Resulting in a ${annualAvgEfficiencyBoost}% total yearly value boost`}
+
+ )}
+
+ {/* -- Positioning -- */}
+
+ {showRepositioningBenefits && (
+ <>
+
+ {`This ${beneficial} `}
+
+ {`increase in efficiency and deliverables,`}
+
+ {` grants you `}
+
+ more flexibility
+
+ {` towards clients and projects:`}
+
+
+ {`Reposition as a premium service provider`}
+ {`Gain an edge over competition`}
+ {!shipsUniversal && {`Charge higher for more platforms delivered`} }
+
+ {`Spend time won elsewhere (features / QA / R&D)`}
+ {`Underpromise, automatically overdeliver`}
+
+ )}
+
+ {/* -- Universal Apps -- */}
+
+ {!shipsUniversal && (
+ <>
+
+ {`Software starting as `}
+
+ {`write-once, universal apps`}
+
+ {` have some benefits of their own:`}
+
+
+ {`Be on any device / platform customers prefer`}
+ <>{`More platforms = `}more trust
+ {`More trust = more sales / conversions`}
+
+ <>{`Your app will have `}universal deeplinks
+ {`Whichever page / device, users can share urls`}
+ {`If a recipient has the app, it opens there`}
+ {`If not, the page opens on web instead`}
+
+ {`Organic traffic from web (SEO + cheaper ads)`}
+ {`Higher conversions from mobile`}
+
+ )}
+
+ {/* -- Dev Benefits -- */}
+
+
+
+ {uppercaseFirstChar(convincee)}
+
+ {` might like some docs on the productivity gains from this way of working:`}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {isProvider && (
+ <>
+
+
+
+ )}
+
+ {/* -- Docs Benefits -- */}
+
+
+ {`This starterkit can `}
+
+ {`generate docs`}
+
+ {` as you build. These docs will grow with your ${projects}, meaning:`}
+
+
+ {`Easier onboardings for new devs`}
+ {`Easier handovers ${handover}`}
+ {`Devs can send each other preview urls`}
+
+
+ {`Check out some `}
+
+
+ {isDev &&
+ {`It's a good example of what's possible when you use `}
+
+ )}
+
+ (props: UniversalLinkProps) => {
+ const StyledLink = styled(UniversalLink, '') // @ts-ignore
+ return >, 'className'> & {
+ className?: string
+}
+
+export const TextLink = (props: TextLinkProps) => {
+ const { className, style, children, ...universalLinkProps } = props
+ return (
+
+
+ {children}
+
+
+ )
+}
diff --git a/features/@app-core/constants/testableFeatures.ts b/features/@app-core/constants/testableFeatures.ts
new file mode 100644
index 0000000..3677983
--- /dev/null
+++ b/features/@app-core/constants/testableFeatures.ts
@@ -0,0 +1,15 @@
+
+export const testableFeatures = [
+ {
+ title: 'Test Images?',
+ description: 'Universal Images, platform optimized',
+ link: '/demos/images',
+ icon: 'π·',
+ },
+ {
+ title: 'Test Forms?',
+ description: 'Zod based Form Management',
+ link: '/demos/forms',
+ icon: 'π',
+ },
+]
diff --git a/features/@app-core/forms/CheckList.styled.tsx b/features/@app-core/forms/CheckList.styled.tsx
new file mode 100644
index 0000000..d5b67e7
--- /dev/null
+++ b/features/@app-core/forms/CheckList.styled.tsx
@@ -0,0 +1,144 @@
+import { createContext, useContext, useState, useEffect, ReactNode } from 'react'
+import { z } from '@green-stack/schemas'
+import { Checkbox, CheckboxProps } from './Checkbox.styled'
+import { arrFromSet } from '@green-stack/utils/arrayUtils'
+
+/* --- Context --------------------------------------------------------------------------------- */
+
+export type CheckListContext = {
+ values: string[],
+ toggleValue: (value: string) => void,
+}
+
+export const CheckListContext = createContext(undefined)
+
+export const useCheckListContext = () => {
+ const context = useContext(CheckListContext)
+ if (!context) throw new Error('useCheckListContext() must be used within a CheckListProvider')
+ return context
+}
+
+/* --- CheckListOption Props ------------------------------------------------------------------- */
+
+export const CheckListOptionProps = CheckboxProps
+ .omit({ checked: true })
+ .extendSchema('CheckListOptionProps', {
+ className: z.string().default('mb-4'),
+ value: z.string(),
+ })
+
+export type CheckListOptionProps = z.input
+
+/* --- toggleValue(value)}
+ label={label || value}
+ id={nativeID}
+ {...restProps}
+ className={className}
+ checkboxClassName={checkboxClassName}
+ indicatorClassName={indicatorClassName}
+ />
+ )
+}
+
+/* --- CheckList Props ------------------------------------------------------------------------- */
+
+export const CheckListProps = CheckboxProps
+ .omit({ checked: true, label: true })
+ .extendSchema('CheckListProps', {
+ options: z.record(z.string()),
+ value: z.array(z.string()).default([]),
+ })
+
+export type CheckListProps = z.input & {
+ value: T,
+ children?: ReactNode,
+ onChange: (value: T) => void,
+}
+
+/* --- (rawProps: CheckListProps) => {
+ // Props
+ const props = CheckListProps.applyDefaults(rawProps)
+ const { value: currentItems, options, children, onChange, ...restProps } = props
+
+ // State
+ const [values, setValues] = useState(currentItems)
+
+ // Vars
+ const valuesKey = values?.filter?.(Boolean).join('-')
+ const propValuesKey = currentItems?.filter?.(Boolean).join('-')
+
+ // -- Handlers --
+
+ const toggleValue = (value: string) => {
+ if (props.disabled) return
+ const shouldAdd = !currentItems.includes(value) // @ts-ignore
+ setValues(shouldAdd ? [...currentItems, value] : values.filter((v) => v !== value))
+ }
+
+ // -- Effects --
+
+ useEffect(() => {
+ onChange(arrFromSet(values || []) as T)
+ }, [valuesKey])
+
+ useEffect(() => {
+ if (valuesKey !== propValuesKey) setValues(currentItems)
+ }, [propValuesKey])
+
+ // -- Render --
+
+ return (
+
+ {Object.entries(options).map(([value, label]) => (
+
+ )
+}
+
+/* --- Docs ------------------------------------------------------------------------------------ */
+
+export const getDocumentationProps = CheckListProps.documentationProps('CheckList', {
+ exampleProps: {
+ value: ['web'],
+ options: {
+ 'web': 'Web - Organic traffic on Google',
+ 'ios': 'iOS - Mobile App in App Store',
+ 'android': 'Android - Mobile App in Play Store',
+ }
+ }
+})
+
+/* --- Exports --------------------------------------------------------------------------------- */
+
+export const CheckList = Object.assign(CheckListComponent, {
+ Item: CheckListOption,
+ Option: CheckListOption,
+})
diff --git a/features/@app-core/forms/Checkbox.styled.tsx b/features/@app-core/forms/Checkbox.styled.tsx
new file mode 100644
index 0000000..87ce15e
--- /dev/null
+++ b/features/@app-core/forms/Checkbox.styled.tsx
@@ -0,0 +1,132 @@
+import { forwardRef, ElementRef } from 'react'
+import { CheckboxRoot, CheckboxIndicator } from '@green-stack/forms/Checkbox.primitives'
+import { cn, View, Text, Pressable, getThemeColor } from '../components/styled'
+import { z, schema, PropsOf } from '@green-stack/schemas'
+import { Icon } from '@green-stack/components/Icon'
+import { useFocusedPress } from '@green-stack/hooks/useFocusedPress'
+
+/* --- Props ----------------------------------------------------------------------------------- */
+
+export const CheckboxProps = schema('CheckboxProps', {
+ checked: z.boolean().default(false),
+ label: z.string().optional().eg('Label'),
+ disabled: z.boolean().default(false),
+ hasError: z.boolean().default(false),
+ className: z.string().optional(),
+ checkboxClassName: z.string().optional(),
+ indicatorClassName: z.string().optional(),
+ labelClassName: z.string().optional(),
+ hitSlop: z.number().default(6),
+})
+
+export type CheckboxProps = PropsOf & {
+ children?: React.ReactNode
+}
+
+/* --- ,
+ CheckboxProps
+>((rawProps, ref) => {
+
+ // Props
+ const props = CheckboxProps.applyDefaults(rawProps)
+ const { checked, disabled, hasError, onCheckedChange } = props
+ const label = props.label || props.children
+
+ // Vars
+ const nativeID = props.id || props.nativeID
+ const labelledByFallback = nativeID ? `${nativeID}-label` : undefined
+ const labelledByID = props['aria-labelledby'] || labelledByFallback
+
+ // -- Handlers --
+
+ const onPress = disabled ? () => {} : () => onCheckedChange(!checked)
+
+ const focusedKeyHandlerProps = useFocusedPress(['Enter', ' '], () => onPress())
+
+ // -- Render --
+
+ return (
+
+
+
+
+
+ {checked && (
+
+
+
+
+ {!!label && (
+
+ {label}
+
+ )}
+
+ )
+})
+
+/* --- Docs ------------------------------------------------------------------------------------ */
+
+export const getDocumentationProps = CheckboxProps.documentationProps('Checkbox', {
+ valueProp: 'checked',
+ onChangeProp: 'onCheckedChange',
+})
diff --git a/features/@app-core/forms/NumberStepper.styled.tsx b/features/@app-core/forms/NumberStepper.styled.tsx
new file mode 100644
index 0000000..103e6d3
--- /dev/null
+++ b/features/@app-core/forms/NumberStepper.styled.tsx
@@ -0,0 +1,193 @@
+import { forwardRef, ElementRef, useState, useEffect } from 'react'
+import type { NativeSyntheticEvent, TextInputKeyPressEventData } from 'react-native'
+import { TextInput } from './TextInput.styled'
+import { z, schema } from '@green-stack/schemas'
+import { cn, View, Pressable, getThemeColor } from '../components/styled'
+import { Icon } from '@green-stack/components/Icon'
+import { useFocusedPress } from '@green-stack/hooks/useFocusedPress'
+
+/* --- Schema ---------------------------------------------------------------------------------- */
+
+export const NumberStepperProps = schema('NumberStepperProps', {
+ value: z.number().default(0),
+ min: z.number().default(0),
+ max: z.number().optional(),
+ step: z.number().default(1),
+ placeholder: z.string().optional().example('Enter number...'),
+ disabled: z.boolean().default(false),
+ readOnly: z.boolean().default(false),
+ hasError: z.boolean().default(false),
+ className: z.string().optional(),
+ pressableClassName: z.string().optional(),
+ textInputClassName: z.string().optional(),
+ placeholderClassName: z.string().optional(),
+ placeholderTextColor: z.string().optional(),
+})
+
+export type NumberStepperProps = z.input & {
+ onChange: (value: number) => void
+}
+
+/* --- useNumberStepper() ---------------------------------------------------------------------- */
+
+export const useNumberStepper = (rawProps: NumberStepperProps) => {
+ // Props
+ const props = NumberStepperProps.applyDefaults(rawProps)
+ const { min, max, step, disabled, hasError, onChange, ...restProps } = props
+
+ // State
+ const [value, setValue] = useState(props.value)
+
+ // Helpers
+ const constrainValue = (value: number) => Math.min(Math.max(value, min), max || Infinity)
+
+ // Vars
+ const numberValue = constrainValue(value)
+
+ // Flags
+ const hasMinValue = typeof rawProps.min !== undefined
+ const hasMaxValue = typeof rawProps.max !== undefined
+ const hasReachedMin = hasMinValue && numberValue === min
+ const hasReachedMax = hasMaxValue && numberValue === max
+ const isDecrementDisabled = disabled || hasReachedMin
+ const isIncrementDisabled = disabled || hasReachedMax
+
+ // -- Handlers --
+
+ const onIncrement = () => setValue(constrainValue(numberValue + step))
+
+ const onDecrement = () => setValue(constrainValue(numberValue - step))
+
+ const onKeyPress = ({ nativeEvent }: NativeSyntheticEvent) => {
+ if (nativeEvent.key === 'ArrowUp') return onIncrement()
+ if (nativeEvent.key === 'ArrowDown') return onDecrement()
+ }
+
+ const stepperButtonKeyhandlerProps = useFocusedPress(['ArrowUp', 'ArrowDown'], (key) => {
+ onKeyPress({ nativeEvent: { key } } as NativeSyntheticEvent)
+ })
+
+ const onChangeText = (newValue = '') => {
+ if (disabled) return
+ // Strip non-numeric characters
+ const strippedValue = newValue.replace(/[^0-9]/g, '')
+ // If empty, show placeholder
+ if (!strippedValue) setValue(undefined as unknown as number)
+ // Convert to number
+ const newNumberValue = +strippedValue
+ // @ts-ignore
+ setValue(newNumberValue)
+ }
+
+ // -- Effects --
+
+ useEffect(() => {
+ if (value) onChange(value)
+ }, [value])
+
+ useEffect(() => {
+ if (props.value !== value) setValue(props.value)
+ }, [props.value])
+
+ // -- Resources --
+
+ return {
+ ...restProps,
+ rawProps,
+ restProps,
+ numberValue,
+ value,
+ setValue,
+ min,
+ max,
+ step,
+ disabled,
+ hasError,
+ isDecrementDisabled,
+ isIncrementDisabled,
+ constrainValue,
+ onIncrement,
+ onDecrement,
+ onKeyPress,
+ stepperButtonKeyhandlerProps,
+ onChangeText,
+ }
+}
+
+/* --- ,
+ NumberStepperProps
+>((rawProps, ref) => {
+ // Hooks
+ const stepper = useNumberStepper(rawProps)
+
+ // -- Render --
+
+ return (
+
+
+
+
+
+
+ )
+})
+
+/* --- Docs ------------------------------------------------------------------------------------ */
+
+export const getDocumentationProps = NumberStepperProps.documentationProps('NumberStepper')
diff --git a/features/@app-core/forms/RadioGroup.styled.tsx b/features/@app-core/forms/RadioGroup.styled.tsx
new file mode 100644
index 0000000..380b38d
--- /dev/null
+++ b/features/@app-core/forms/RadioGroup.styled.tsx
@@ -0,0 +1,231 @@
+import type { ReactNode, ElementRef, Dispatch, SetStateAction } from 'react'
+import { createContext, useContext, useState, useEffect, forwardRef } from 'react'
+import { RadioGroupRoot, RadioGroupItem, RadioGroupIndicator } from '@green-stack/forms/RadioGroup.primitives'
+import { cn, View, Text, Pressable } from '../components/styled'
+import { z, schema, PropsOf } from '@green-stack/schemas'
+import { useFocusedPress } from '@green-stack/hooks/useFocusedPress'
+
+/* --- Context --------------------------------------------------------------------------------- */
+
+export type RadioGroupContext = {
+ value: string,
+ setValue: Dispatch>,
+}
+
+export const RadioGroupContext = createContext(undefined)
+
+export const useRadioGroupContext = () => {
+ const context = useContext(RadioGroupContext)
+ if (!context) throw new Error('useRadioGroupContext() must be used within a RadioGroupProvider')
+ return context
+}
+
+/* --- RadioButton Props ----------------------------------------------------------------------- */
+
+export const RadioButtonProps = schema('RadioButtonProps', {
+ value: z.string(),
+ label: z.string(),
+ disabled: z.boolean().default(false),
+ hasError: z.boolean().default(false),
+ className: z.string().default('mb-4'),
+ radioButtonClassName: z.string().optional(),
+ indicatorClassName: z.string().optional(),
+ labelClassName: z.string().optional(),
+ hitSlop: z.number().default(6),
+})
+
+export type RadioButtonProps = Omit<
+ PropsOf,
+ 'aria-labelledby'
+> & {
+ ['aria-labelledby']?: string,
+}
+
+/* --- ,
+ RadioButtonProps
+>((rawProps, ref) => {
+ // Props
+ const props = RadioButtonProps.applyDefaults(rawProps)
+ const { value, label, disabled, hasError } = props
+
+ // Vars
+ const nativeID = props.id || props.nativeID || `radio-option-${value}`
+ const labelledByID = `${nativeID}-label`
+
+ // Context
+ const { value: contextValue, setValue } = useRadioGroupContext()
+ const checked = contextValue === value
+
+ // -- Handlers --
+
+ const onPress = disabled ? () => {} : () => setValue(value)
+
+ const focusedKeyHandlerProps = useFocusedPress(['Enter', ' '], () => onPress())
+
+ // -- Render --
+
+ return (
+
+
+
+ {checked && (
+
+
+
+
+ )}
+
+
+ {!!label && (
+
+ {label}
+
+ )}
+
+ )
+})
+
+RadioButton.displayName = 'RadioButton'
+
+/* --- RadioGroup Props ------------------------------------------------------------------------ */
+
+export const RadioGroupProps = RadioButtonProps
+ .omit({ label: true })
+ .extendSchema('RadioGroupProps', {
+ options: z.record(z.string()),
+ value: z.string().default(''),
+ className: z.string().optional(),
+ radioButtonClassName: z.string().optional(),
+ })
+
+export type RadioGroupProps = Omit<
+ PropsOf,
+ 'onValueChange'
+> & {
+ value?: T,
+ children?: ReactNode,
+ onChange: (value: NonNullableRequired) => void,
+}
+
+/** --- createRadioGroup() --------------------------------------------------------------------- */
+/** -i- Create a Universal Radio Group where you can pass a Generic type to narrow the string `value` & `onChange()` params */
+const createRadioGroup = () => Object.assign(forwardRef<
+ ElementRef,
+ RadioGroupProps
+>((rawProps, ref) => {
+ // Props
+ const props = RadioGroupProps.applyDefaults(rawProps)
+ const { className, options, children, onChange, ...restProps } = props
+
+ // State
+ const [value, setValue] = useState(props.value)
+
+ // -- Effects --
+
+ useEffect(() => {
+ if (value) onChange(value as NonNullableRequired)
+ }, [value])
+
+ // -- Render --
+
+ return (
+
+
+
+ {Object.entries(options).map(([optionValue, label]) => (
+
+
+
+ )
+}), {
+ displayName: 'RadioGroup',
+ Item: RadioButton,
+ Option: RadioButton,
+ /** -i- Create a Universal Radio Group where you can pass a Generic type to narrow the string `value` & `onChange()` params */
+ create: createRadioGroup,
+})
+
+/* --- Docs ------------------------------------------------------------------------------------ */
+
+export const getDocumentationProps = RadioGroupProps.documentationProps('RadioGroup', {
+ exampleProps: {
+ options: {
+ 'full-product-dev': 'Full-Product Universal App Dev',
+ 'front-end-dev': 'Front-End Web Developer',
+ 'back-end-dev': 'Back-End Web Developer',
+ 'mobile-app-dev': 'Mobile App Developer',
+ },
+ value: 'full-product-dev',
+ },
+})
+
+/* --- Exports --------------------------------------------------------------------------------- */
+
+export const RadioGroup = createRadioGroup()
diff --git a/features/@app-core/forms/Select.styled.tsx b/features/@app-core/forms/Select.styled.tsx
new file mode 100644
index 0000000..7971669
--- /dev/null
+++ b/features/@app-core/forms/Select.styled.tsx
@@ -0,0 +1,559 @@
+import type { ReactNode, ElementRef, Dispatch, SetStateAction, LegacyRef } from 'react'
+import { createContext, useContext, useState, useEffect, forwardRef, useRef } from 'react'
+import { Platform, StyleSheet, Dimensions } from 'react-native'
+import Animated, { FadeIn, FadeOut } from 'react-native-reanimated'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import * as SP from '@green-stack/forms/Select.primitives'
+import { cn, View, Text, Pressable, getThemeColor } from '../components/styled'
+import { ChevronDownFilled } from '../icons/ChevronDownFilled'
+import { ChevronUpFilled } from '../icons/ChevronUpFilled'
+import { CheckFilled } from '../icons/CheckFilled'
+import { z, schema, PropsOf } from '@green-stack/schemas'
+
+/* --- Constants ------------------------------------------------------------------------------- */
+
+const isWeb = Platform.OS === 'web'
+const isMobile = ['ios', 'android'].includes(Platform.OS)
+
+/* --- Context --------------------------------------------------------------------------------- */
+
+export type SelectContext = {
+ value: string,
+ setValue: Dispatch>,
+ options: Record,
+ setOptions: Dispatch>>,
+}
+
+export const SelectContext = createContext(undefined)
+
+export const useSelectContext = () => {
+ const context = useContext(SelectContext)
+ if (!context) throw new Error('useSelectContext() must be used within a SelectProvider')
+ return context
+}
+
+/* ---
+
+export const SelectTrigger = forwardRef<
+ ElementRef,
+ SelectTriggerProps
+>((rawProps, ref) => {
+ // Props
+ const props = SelectTriggerProps.applyDefaults(rawProps)
+ const { children, disabled, hasError, ...restProps } = props
+
+ // Hooks
+ const { open, onOpenChange } = SP.useSelectRootContext()
+
+ // -- Render --
+
+ return (
+ span]:line-clamp-1',
+ disabled && 'border-muted web:cursor-not-allowed',
+ hasError && 'border-danger',
+ props.className,
+ )}
+ disabled={disabled}
+ onPress={() => onOpenChange(!open)}
+ asChild
+ >
+
+ {/* @ts-ignore */}
+ <>{children}
+
+
+ )
+})
+
+SelectTrigger.displayName = 'SelectTrigger'
+
+/* ---
+
+ )
+}
+
+/* ---
+
+export const SelectContent = forwardRef<
+ ElementRef,
+ SelectContentProps
+>((rawProps, ref) => {
+ // Props
+ const props = SelectContentProps.applyDefaults(rawProps)
+ const { children, position, portalHost } = props
+
+ // Refs
+ const contentRef = useRef(null)
+
+ // Flags
+ const isPopper = position === 'popper'
+
+ // Context
+ const selectContext = useSelectContext()
+ const { open: isOpen, onOpenChange } = SP.useSelectRootContext()
+
+ // -- Effects --
+
+ useEffect(() => {
+ if (isOpen && isWeb && contentRef.current) {
+ const $content = contentRef.current as HTMLElement
+ const $interactable = $content.querySelector('button, a, input, select, textarea') as HTMLElement
+ if ($interactable) $interactable.focus?.()
+ }
+ }, [isOpen])
+
+ // -- Render --
+
+ return (
+
+
+ onOpenChange(!isOpen)}
+ asChild
+ >
+
+
+
+
+
+ {children}
+
+
+
+
+
+
+
+
+ )
+})
+
+SelectContent.displayName = 'SelectContent'
+
+/* ---
+
+export const SelectLabel = forwardRef<
+ ElementRef,
+ SelectLabelProps
+>((rawProps, ref) => {
+ // Props
+ const props = SelectLabelProps.applyDefaults(rawProps)
+ const { children } = props
+
+ // -- Render --
+
+ return (
+
+ {children}
+
+ )
+})
+
+SelectLabel.displayName = 'SelectLabel'
+
+/* ---
+
+export const SelectItem = forwardRef<
+ ElementRef,
+ SelectItemProps
+>((rawProps, ref) => {
+ // Props
+ const props = SelectItemProps.applyDefaults(rawProps)
+ const { value, label, disabled, hasError, ...restProps } = props
+
+ // Context
+ const selectContext = useSelectContext()
+ const { onOpenChange } = SP.useSelectRootContext()
+
+ // -- Handlers --
+
+ // -i- Fix for mobile view on web
+ const handlePress = () => {
+ selectContext.setValue(value)
+ onOpenChange(false)
+ }
+
+ // -- Effects --
+
+ useEffect(() => {
+ const isRegisteredOption = !!selectContext.options?.[value]
+ if (!isRegisteredOption && value) {
+ selectContext.setOptions((prev) => ({ ...prev, [value]: label }))
+ }
+ }, [value, label])
+
+ // -- Render --
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )
+})
+
+SelectItem.displayName = 'SelectItem'
+
+/* ---
+
+export const SelectSeparator = forwardRef<
+ ElementRef,
+ SelectSeparatorProps
+>((rawProps, ref) => {
+ // Props
+ const props = SelectSeparatorProps.applyDefaults(rawProps)
+
+ // -- Render --
+
+ return (
+ = Omit<
+ PropsOf,
+ 'onValueChange' | 'value' | 'defaultValue'
+> & {
+ value: T,
+ children?: ReactNode,
+ selectTriggerRef?: LegacyRef>,
+ onChange: (value: T) => void,
+}
+
+/** --- createSelect() ------------------------------------------------------------------------- */
+/** -i- Create a Universal Select where you can pass a Generic type to narrow the string `value` & `onChange()` params */
+export const createSelectComponent = () => Object.assign(forwardRef<
+ ElementRef,
+ SelectProps
+>((rawProps, ref) => {
+ // Props
+ const props = SelectProps.applyDefaults(rawProps)
+ const { placeholder, disabled, hasError, children, onChange, ...restProps } = props
+
+ // State
+ const [value, setValue] = useState(props.value)
+ const [options, setOptions] = useState(props.options)
+
+ // Hooks
+ const insets = useSafeAreaInsets()
+ const contentInsets = {
+ top: insets.top,
+ bottom: insets.bottom,
+ left: 12,
+ right: 12,
+ }
+
+ // Vars
+ const optionsKey = Object.keys(options).join('-')
+ const hasPropOptions = Object.keys(props.options || {}).length > 0
+ const selectValueKey = `${optionsKey}-${!!value}-${!!options?.[value]}`
+
+ // -- Effects --
+
+ useEffect(() => {
+ const isValidOption = value && Object.keys(options || {})?.includes?.(value)
+ if (isValidOption) {
+ onChange(value as T)
+ } else if (!value && !restProps.required) {
+ onChange(undefined as unknown as T)
+ }
+ }, [value])
+
+ useEffect(() => {
+ if (props.value !== value) setValue(props.value)
+ }, [props.value])
+
+ // -- Render --
+
+ return (
+
+ setValue(option!.value!)}
+ disabled={disabled}
+ asChild
+ >
+
+
+
+
+ {isWeb && (
+
+ {options?.[value] || placeholder}
+
+ )}
+
+
+
+
+ {hasPropOptions && (
+
+
+ {!!placeholder && {placeholder} }
+ {Object.entries(props.options).map(([value, label]) => (
+
+ {label}
+
+ ))}
+
+
+ )}
+ {children}
+
+
+ {isMobile && (
+
+ {children}
+
+ )}
+
+
+
+
+
+ )
+}), {
+ displayName: 'Select',
+ Option: SelectItem,
+ Item: SelectItem,
+ Separator: SelectSeparator,
+ Group: SP.SelectGroup,
+ Label: SelectLabel,
+ Content: SelectContent,
+ /** -i- Create a Universal Select where you can pass a Generic type to narrow the string `value` & `onChange()` params */
+ create: createSelectComponent,
+})
+
+/* --- Docs ------------------------------------------------------------------------------------ */
+
+export const getDocumentationProps = SelectProps.documentationProps('Select', {
+ exampleProps: {
+ options: {
+ 'write-once': 'Universal - write-once - π πΈ β‘οΈ',
+ 'react-native': 'React Native first - Web later - β³β³',
+ 'web-first': 'Web first - Mobile later - π°π°(π°)',
+ 'ios-first': 'iOS first - Web + Android later - β³β³β³',
+ 'android-first': 'Android first - Web + iOS later - π°π°π°',
+ },
+ placeholder: 'Select a build and release strategy',
+ }
+})
+
+/* --- Exports --------------------------------------------------------------------------------- */
+
+export const Select = createSelectComponent()
diff --git a/features/@app-core/forms/Switch.styled.tsx b/features/@app-core/forms/Switch.styled.tsx
new file mode 100644
index 0000000..e26f73a
--- /dev/null
+++ b/features/@app-core/forms/Switch.styled.tsx
@@ -0,0 +1,217 @@
+import { forwardRef, ElementRef } from 'react'
+import { Platform } from 'react-native'
+import * as SP from '@green-stack/forms/Switch.primitives'
+import { cn, getThemeColor, View, Text, Pressable } from '../components/styled'
+import { z, schema, PropsOf } from '@green-stack/schemas'
+import { useColorScheme } from 'nativewind'
+import Animated, {
+ interpolateColor,
+ useAnimatedStyle,
+ useDerivedValue,
+ withTiming,
+} from 'react-native-reanimated'
+import { useFocusedPress } from '@green-stack/hooks/useFocusedPress'
+
+/* --- Props ----------------------------------------------------------------------------------- */
+
+export const SwitchProps = schema('SwitchProps', {
+ checked: z.boolean().default(false),
+ label: z.string().optional(),
+ disabled: z.boolean().default(false),
+ hasError: z.boolean().default(false),
+ className: z.string().optional(),
+ switchClassName: z.string().optional(),
+ switchThumbClassName: z.string().optional(),
+ labelClassName: z.string().optional(),
+ hitSlop: z.number().default(6),
+})
+
+export type SwitchProps = PropsOf
+
+/* --- ,
+ SwitchProps
+>((rawProps, ref) => {
+ // Props
+ const props = SwitchProps.applyDefaults(rawProps)
+ const { checked, disabled, label, hasError, onCheckedChange } = props
+
+ // -- Handlers --
+
+ const onPress = disabled ? () => {} : () => onCheckedChange(!checked)
+
+ const focusedKeyHandlerProps = useFocusedPress(['Enter', ' '], () => onPress())
+
+ // -- Render --
+
+ return (
+
+
+
+
+
+
+
+ {label && (
+
+ {label}
+
+ )}
+
+ )
+})
+
+SwitchWeb.displayName = 'SwitchWeb'
+
+/* --- ,
+ SwitchProps
+>((rawProps, ref) => {
+ // Props
+ const props = SwitchProps.applyDefaults(rawProps)
+ const { checked, disabled, label, hasError, onCheckedChange } = props
+
+ // -- Animations --
+
+ const { colorScheme } = useColorScheme()
+ const translateX = useDerivedValue(() => (props.checked ? 18 : 0))
+
+ const animatedRootStyle = useAnimatedStyle(() => ({
+ backgroundColor: interpolateColor(
+ translateX.value,
+ [0, 18],
+ [RGB_COLORS[colorScheme!].input, RGB_COLORS[colorScheme!].primary]
+ ),
+ }))
+
+ const animatedThumbStyle = useAnimatedStyle(() => ({
+ transform: [{ translateX: withTiming(translateX.value, { duration: 200 }) }],
+ }))
+
+ // -- Render --
+
+ return (
+ onCheckedChange(!checked)}
+ disabled={disabled}
+ >
+
+
+
+
+
+
+
+
+
+
+ {label && (
+
+ {label}
+
+ )}
+
+ )
+})
+
+SwitchNative.displayName = 'SwitchNative'
+
+/* ---
+
+/* --- ----------------------------------------------------------------------------- */
+
+export const TextArea = forwardRef<
+ ElementRef,
+ TextAreaProps
+>((rawProps, ref) => {
+ // Props
+ const props = TextAreaProps.applyDefaults(rawProps)
+
+ // -- Render --
+
+ return (
+
+
+/* --- ,
+ TextInputProps
+>((rawProps, ref) => {
+
+ // Props
+ const props = TextInputProps.applyDefaults(rawProps)
+
+ // -- Render --
+
+ return (
+
+ JSONObject: ObjectType
+ Date: Date
+ }
+}>()
diff --git a/features/@app-core/graphql/graphqlQuery.ts b/features/@app-core/graphql/graphqlQuery.ts
new file mode 100644
index 0000000..2968a65
--- /dev/null
+++ b/features/@app-core/graphql/graphqlQuery.ts
@@ -0,0 +1,37 @@
+import { print } from 'graphql/language/printer'
+import type { TadaDocumentNode, ResultOf } from 'gql.tada'
+import type { QueryConfig } from './graphqlQuery.types'
+import { appConfig } from '../appConfig'
+
+/** --- graphqlQuery --------------------------------------------------------------------------- */
+/** -i- Isomorphic graphql request, uses the graphql endpoint in browser & mobile, but the executable schema serverside */
+export const graphqlQuery = Object.assign(async >(query: T, config?: QueryConfig) => {
+ // Config
+ const { variables, headers, graphqlEndpoint } = config || {}
+
+ // Vars
+ const queryString = print(query)
+
+ // -- Native: Execute query with fetch --
+
+ try {
+ const { graphURL } = appConfig
+ const fetchURL = graphqlEndpoint || graphURL
+ const res = await fetch(fetchURL, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ ...headers,
+ },
+ body: JSON.stringify({ query: queryString, variables }),
+ })
+ const { data, errors } = await res.json()
+ if (errors) throw new Error(errors[0].message)
+ return data as R
+ } catch (error: any) {
+ throw new Error(error)
+ }
+}, {
+ // -i- Flag to help detect whether it's safe to pass extra context to this fetcher function
+ isUniversalQuery: true,
+})
diff --git a/features/@app-core/graphql/graphqlQuery.types.ts b/features/@app-core/graphql/graphqlQuery.types.ts
new file mode 100644
index 0000000..ed257d3
--- /dev/null
+++ b/features/@app-core/graphql/graphqlQuery.types.ts
@@ -0,0 +1,8 @@
+import type { TadaDocumentNode, VariablesOf } from 'gql.tada'
+
+export type QueryConfig = {
+ variables?: VariablesOf
+ headers?: Record
+ graphqlEndpoint?: string
+ requestContext?: Record
+}
diff --git a/features/@app-core/graphql/graphqlQuery.web.ts b/features/@app-core/graphql/graphqlQuery.web.ts
new file mode 100644
index 0000000..e971f20
--- /dev/null
+++ b/features/@app-core/graphql/graphqlQuery.web.ts
@@ -0,0 +1,71 @@
+import { print } from 'graphql/language/printer'
+import type { TadaDocumentNode, ResultOf } from 'gql.tada'
+import type { QueryConfig } from './graphqlQuery.types'
+import { appConfig, isServer } from '../appConfig'
+
+/** --- graphqlQuery --------------------------------------------------------------------------- */
+/** -i- Isomorphic graphql request, uses the graphql endpoint in browser & mobile, but the executable schema serverside */
+export const graphqlQuery = Object.assign(async >(
+ query: T,
+ config?: QueryConfig,
+) => {
+ // Config
+ const { variables, headers, graphqlEndpoint, requestContext } = config || {}
+
+ // Vars
+ const queryString = print(query)
+
+ // -- Server: Execute query with lazy loaded schema --
+
+ if (isServer) {
+ try {
+ // Lazy imports to avoid build issues
+ const [
+ { graphql },
+ { executableSchema },
+ ] = await Promise.all([
+ import('graphql'),
+ import('./schema'),
+ ])
+
+ // Execute query with the executable schema
+ const { data, errors } = await graphql({
+ schema: executableSchema,
+ source: queryString,
+ variableValues: variables,
+ contextValue: requestContext || {},
+ }) as { data: R, errors: any[] }
+
+ // Throw errors if they exist
+ if (errors) throw new Error(errors[0].message)
+
+ // Return resolver response
+ return data
+ } catch (error: any) {
+ throw new Error(error)
+ }
+ }
+
+ // -- Browser: Execute query with fetch --
+
+ try {
+ const { graphURL } = appConfig
+ const fetchURL = graphqlEndpoint || graphURL
+ const res = await fetch(fetchURL, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ ...headers,
+ },
+ body: JSON.stringify({ query: queryString, variables }),
+ })
+ const { data, errors } = await res.json()
+ if (errors) throw new Error(errors[0].message)
+ return data as R
+ } catch (error: any) {
+ throw new Error(error)
+ }
+}, {
+ // -i- Flag to help detect whether it's safe to pass extra context to this fetcher function
+ isUniversalQuery: true,
+})
diff --git a/features/@app-core/graphql/graphqlServer.ts b/features/@app-core/graphql/graphqlServer.ts
new file mode 100644
index 0000000..6a15563
--- /dev/null
+++ b/features/@app-core/graphql/graphqlServer.ts
@@ -0,0 +1,25 @@
+import { ApolloServer } from '@apollo/server'
+import type { NextRequest } from 'next/server'
+import { startServerAndCreateNextHandler } from '@as-integrations/next'
+import { createRequestContext } from '../middleware/createRequestContext'
+import { schemaBundle } from './schema'
+import { getHeaderContext } from '@green-stack/utils/apiUtils'
+
+/* --- Apollo Server --------------------------------------------------------------------------- */
+
+export const graphqlServer = new ApolloServer({
+ typeDefs: schemaBundle.typeDefs,
+ resolvers: schemaBundle.resolvers,
+ introspection: true,
+})
+
+/** --- createGraphQLServerHandler() ----------------------------------------------------------- */
+/** -i- Create the apollo graphql server handler for Next.js API router and provides context to resolvers */
+export const createGraphQLServerHandler = () => {
+ return startServerAndCreateNextHandler(graphqlServer, {
+ context: async (req: NextRequest) => {
+ const headerContext = getHeaderContext(req)
+ return await createRequestContext({ req, ...headerContext })
+ },
+ })
+}
diff --git a/features/@app-core/graphql/schema.graphql b/features/@app-core/graphql/schema.graphql
new file mode 100644
index 0000000..a0f063d
--- /dev/null
+++ b/features/@app-core/graphql/schema.graphql
@@ -0,0 +1,49 @@
+## -i- This file was generated using the 'npx turbo run @green-stack/core#build:schema' script. Don't modify it manually.
+
+scalar Date
+
+scalar JSON
+
+scalar JSONObject
+
+input HealthCheckInput {
+ echo: String
+ verbose: Boolean
+}
+
+type HealthCheckOutput {
+ echo: String
+ status: String!
+ alive: Boolean!
+ kicking: Boolean!
+ now: String!
+ aliveTime: Float!
+ aliveSince: Date!
+ serverTimezone: String!
+ requestHost: String
+ requestProtocol: String
+ requestURL: String
+ baseURL: String
+ backendURL: String
+ apiURL: String
+ graphURL: String
+ port: Int
+ debugPort: Int
+ nodeVersion: String
+ v8Version: String
+ systemArch: String
+ systemPlatform: String
+ systemRelease: String
+ systemFreeMemory: Float
+ systemTotalMemory: Float
+ systemLoadAverage: [Float]
+ context: JSON
+}
+
+type Query {
+ healthCheck(args: HealthCheckInput): HealthCheckOutput
+}
+
+schema {
+ query: Query
+}
diff --git a/features/@app-core/graphql/schema.ts b/features/@app-core/graphql/schema.ts
new file mode 100644
index 0000000..e22c607
--- /dev/null
+++ b/features/@app-core/graphql/schema.ts
@@ -0,0 +1,60 @@
+import { mergeResolvers } from '@graphql-tools/merge'
+import { makeExecutableSchema } from '@graphql-tools/schema'
+import { GraphQLJSON, GraphQLJSONObject } from 'graphql-type-json'
+import { gql } from 'graphql-tag'
+import { typeDefs } from './typeDefs'
+import * as resolvers from '@app/registries/resolvers.generated'
+import { createGraphSchemaDefs } from '@green-stack/schemas/createGraphSchemaDefs'
+
+/* --- Notes ----------------------------------------------------------------------------------- */
+
+// -i- Workspace package '@green-stack/core' expects this file to be at '/features/app-core/graphql/schema.ts'
+// -i- Please keep it here to avoid issues
+
+/* --- Types ----------------------------------------------------------------------------------- */
+
+export type ResolverFn = (parent: any, args: any, context: any, info: any) => any$Unknown
+
+export type ResolversMap = {
+ Query?: { [queryName: string]: ResolverFn }
+ Mutation?: { [mutationName: string]: ResolverFn }
+}
+
+/* --- Custom Resolvers ------------------------------------------------------------------------ */
+
+const customResolvers: ResolversMap = {
+ // Query: {
+ // healthCheck: resolvers.healthCheck, // -i- Example of a custom resolver
+ // },
+}
+
+/** --- createRootResolver() ------------------------------------------------------------------- */
+/** -i- Combine all custom and other (e.g. injected) resolvers */
+export const createRootResolver = (extraResolvers?: ResolversMap) => mergeResolvers([
+ customResolvers,
+ // Extra resolvers, like from codegen
+ extraResolvers,
+ // Custom scalars
+ {
+ JSON: GraphQLJSON,
+ JSONObject: GraphQLJSONObject,
+ }
+])
+
+/* --- Codegen --------------------------------------------------------------------------------- */
+
+// -i- Create a resolver map from the resolvers created with createResolver() & createGraphResolver()
+const { generatedResolvers } = createGraphSchemaDefs(resolvers)
+
+/* --- Schema ---------------------------------------------------------------------------------- */
+
+export const schemaBundle = {
+ typeDefs: gql`${typeDefs}`,
+ resolvers: createRootResolver(generatedResolvers),
+}
+
+export const executableSchema = makeExecutableSchema(schemaBundle)
+
+/* --- Exports --------------------------------------------------------------------------------- */
+
+export default executableSchema
diff --git a/features/@app-core/graphql/typeDefs.ts b/features/@app-core/graphql/typeDefs.ts
new file mode 100644
index 0000000..028e9d4
--- /dev/null
+++ b/features/@app-core/graphql/typeDefs.ts
@@ -0,0 +1,49 @@
+// -i- This file was generated using the 'npx turbo run @green-stack/core#build:schema' script. Don't modify it manually.
+
+export const typeDefs = `scalar Date
+
+scalar JSON
+
+scalar JSONObject
+
+input HealthCheckInput {
+ echo: String
+ verbose: Boolean
+}
+
+type HealthCheckOutput {
+ echo: String
+ status: String!
+ alive: Boolean!
+ kicking: Boolean!
+ now: String!
+ aliveTime: Float!
+ aliveSince: Date!
+ serverTimezone: String!
+ requestHost: String
+ requestProtocol: String
+ requestURL: String
+ baseURL: String
+ backendURL: String
+ apiURL: String
+ graphURL: String
+ port: Int
+ debugPort: Int
+ nodeVersion: String
+ v8Version: String
+ systemArch: String
+ systemPlatform: String
+ systemRelease: String
+ systemFreeMemory: Float
+ systemTotalMemory: Float
+ systemLoadAverage: [Float]
+ context: JSON
+}
+
+type Query {
+ healthCheck(args: HealthCheckInput): HealthCheckOutput
+}
+
+schema {
+ query: Query
+}`
diff --git a/features/@app-core/icons/AddFilled.tsx b/features/@app-core/icons/AddFilled.tsx
new file mode 100644
index 0000000..720dcee
--- /dev/null
+++ b/features/@app-core/icons/AddFilled.tsx
@@ -0,0 +1,34 @@
+import { Svg, Path, z, iconProps, IconProps, getThemeColor } from '@green-stack/svg'
+
+/* --- Types ----------------------------------------------------------------------------------- */
+
+export const AddFilledProps = iconProps('AddFilled', {
+ color: z.string().default(getThemeColor('--primary', 'light')),
+})
+
+export type AddFilledProps = IconProps
+
+/* ---
+
+ )
+}
diff --git a/features/@app-core/icons/ArrowLeftFilled.tsx b/features/@app-core/icons/ArrowLeftFilled.tsx
new file mode 100644
index 0000000..0c4e669
--- /dev/null
+++ b/features/@app-core/icons/ArrowLeftFilled.tsx
@@ -0,0 +1,36 @@
+import { Svg, Path, z, iconProps, IconProps, getThemeColor } from '@green-stack/svg'
+
+/* --- Types ----------------------------------------------------------------------------------- */
+
+export const ArrowLeftFilledProps = iconProps('ArrowLeftFilled', {
+ color: z.string().default(getThemeColor('--primary')),
+})
+
+export type ArrowLeftFilledProps = IconProps
+
+/* ---
+
+ )
+}
diff --git a/features/@app-core/icons/ArrowRightFilled.tsx b/features/@app-core/icons/ArrowRightFilled.tsx
new file mode 100644
index 0000000..0e8607b
--- /dev/null
+++ b/features/@app-core/icons/ArrowRightFilled.tsx
@@ -0,0 +1,36 @@
+import { Svg, Path, z, iconProps, IconProps, getThemeColor } from '@green-stack/svg'
+
+/* --- Types ----------------------------------------------------------------------------------- */
+
+export const ArrowRightFilledProps = iconProps('ArrowRightFilled', {
+ color: z.string().default(getThemeColor('--primary')),
+})
+
+export type ArrowRightFilledProps = IconProps
+
+/* ---
+
+ )
+}
diff --git a/features/@app-core/icons/CheckFilled.tsx b/features/@app-core/icons/CheckFilled.tsx
new file mode 100644
index 0000000..5d13338
--- /dev/null
+++ b/features/@app-core/icons/CheckFilled.tsx
@@ -0,0 +1,34 @@
+import { Svg, Path, z, iconProps, IconProps, getThemeColor } from '@green-stack/svg'
+
+/* --- Types ----------------------------------------------------------------------------------- */
+
+export const CheckFilledProps = iconProps('CheckFilled', {
+ color: z.string().default(getThemeColor('--primary')),
+})
+
+export type CheckFilledProps = IconProps
+
+/* ---
+
+ )
+}
diff --git a/features/@app-core/icons/ChevronDownFilled.tsx b/features/@app-core/icons/ChevronDownFilled.tsx
new file mode 100644
index 0000000..9d45b2e
--- /dev/null
+++ b/features/@app-core/icons/ChevronDownFilled.tsx
@@ -0,0 +1,28 @@
+import { Svg, Path, z, iconProps, IconProps, getThemeColor } from '@green-stack/svg'
+
+/* --- Types ----------------------------------------------------------------------------------- */
+
+export const ChevronDownFilledProps = iconProps('ChevronDownFilled', {
+ color: z.string().default(getThemeColor('--primary')),
+})
+
+export type ChevronDownFilledProps = IconProps
+
+/* ---
+
+ )
+}
diff --git a/features/@app-core/icons/ChevronUpFilled.tsx b/features/@app-core/icons/ChevronUpFilled.tsx
new file mode 100644
index 0000000..db26e9b
--- /dev/null
+++ b/features/@app-core/icons/ChevronUpFilled.tsx
@@ -0,0 +1,28 @@
+import { Svg, Path, z, iconProps, IconProps, getThemeColor } from '@green-stack/svg'
+
+/* --- Types ----------------------------------------------------------------------------------- */
+
+export const ChevronUpFilledProps = iconProps('ChevronUpFilled', {
+ color: z.string().default(getThemeColor('--primary')),
+})
+
+export type ChevronUpFilledProps = IconProps
+
+/* ---
+
+ )
+}
diff --git a/features/@app-core/icons/CopyIcon.tsx b/features/@app-core/icons/CopyIcon.tsx
new file mode 100644
index 0000000..016ede9
--- /dev/null
+++ b/features/@app-core/icons/CopyIcon.tsx
@@ -0,0 +1,42 @@
+import { Svg, Path, z, iconProps, IconProps, getThemeColor } from '@green-stack/svg'
+
+/* --- Types ----------------------------------------------------------------------------------- */
+
+export const CopyIconProps = iconProps('CopyIcon', {
+ color: z.string().default(getThemeColor('--primary', 'light')),
+})
+
+export type CopyIconProps = IconProps
+
+/* ---
+
+ )
+}
diff --git a/features/@app-core/icons/RemoveFilled.tsx b/features/@app-core/icons/RemoveFilled.tsx
new file mode 100644
index 0000000..839f054
--- /dev/null
+++ b/features/@app-core/icons/RemoveFilled.tsx
@@ -0,0 +1,28 @@
+import { Svg, Path, z, iconProps, IconProps, getThemeColor } from '@green-stack/svg'
+
+/* --- Types ----------------------------------------------------------------------------------- */
+
+export const RemoveFilledProps = iconProps('RemoveFilled', {
+ color: z.string().default(getThemeColor('--primary')),
+})
+
+export type RemoveFilledProps = IconProps
+
+/* ---
+
+ )
+}
diff --git a/features/@app-core/icons/UndoFilled.tsx b/features/@app-core/icons/UndoFilled.tsx
new file mode 100644
index 0000000..4fee7b4
--- /dev/null
+++ b/features/@app-core/icons/UndoFilled.tsx
@@ -0,0 +1,34 @@
+import { Svg, Path, z, iconProps, IconProps, getThemeColor } from '@green-stack/svg'
+
+/* --- Types ----------------------------------------------------------------------------------- */
+
+export const UndoFilledProps = iconProps('UndoFilled', {
+ color: z.string().default(getThemeColor('--primary')),
+})
+
+export type UndoFilledProps = IconProps
+
+/* ---
+
+ )
+}
diff --git a/features/@app-core/icons/index.ts b/features/@app-core/icons/index.ts
new file mode 100644
index 0000000..262fc45
--- /dev/null
+++ b/features/@app-core/icons/index.ts
@@ -0,0 +1,9 @@
+export { AddFilled } from './AddFilled'
+export { ArrowLeftFilled } from './ArrowLeftFilled'
+export { ArrowRightFilled } from './ArrowRightFilled'
+export { CheckFilled } from './CheckFilled'
+export { ChevronDownFilled } from './ChevronDownFilled'
+export { ChevronUpFilled } from './ChevronUpFilled'
+export { RemoveFilled } from './RemoveFilled'
+export { UndoFilled } from './UndoFilled'
+export { CopyIcon } from './CopyIcon'
diff --git a/features/app-core/middleware/createRequestContext.ts b/features/@app-core/middleware/createRequestContext.ts
similarity index 85%
rename from features/app-core/middleware/createRequestContext.ts
rename to features/@app-core/middleware/createRequestContext.ts
index 7e05d6a..ffa1f1c 100644
--- a/features/app-core/middleware/createRequestContext.ts
+++ b/features/@app-core/middleware/createRequestContext.ts
@@ -6,12 +6,22 @@ export type RequestContext = {
// -i- Next.js app API router request and response objects
req: NextRequest,
res: NextResponse,
+ requestUrl?: string,
+ // -i- Geolocation info
+ geolocation?: {
+ ip?: string,
+ country?: string,
+ city?: string,
+ },
// -i- GraphQL context properties
parent?: unknown,
info?: unknown,
// -i- Anything else you might want to attach as context through middleware, e.g.
- // user: ...
- // permissions: ...
+ userId?: string,
+ orgId?: string,
+ sessionId?: string,
+ authToken?: string,
+ // ...
}
export type CreateRequestContextArgs = Partial> & {
diff --git a/features/@app-core/models/Settings.model.ts b/features/@app-core/models/Settings.model.ts
new file mode 100644
index 0000000..c007751
--- /dev/null
+++ b/features/@app-core/models/Settings.model.ts
@@ -0,0 +1,21 @@
+import { z, schema } from '@green-stack/schemas'
+import { createSchemaModel, validateDriverModel } from '@db/driver'
+
+/* --- Schema ---------------------------------------------------------------------------------- */
+
+export const Setting = schema('Setting', {
+ key: z.string().addMeta({ isID: true }),
+ value: z.any()
+})
+
+/* --- Types ----------------------------------------------------------------------------------- */
+
+export type Setting = z.infer
+
+/* --- Model ----------------------------------------------------------------------------------- */
+
+export const SettingsModel = createSchemaModel(Setting)
+
+/* --- Drivers --------------------------------------------------------------------------------- */
+
+export const driverModel = validateDriverModel(SettingsModel.driver)
diff --git a/features/@app-core/models/Users.model.ts b/features/@app-core/models/Users.model.ts
new file mode 100644
index 0000000..b1bd44c
--- /dev/null
+++ b/features/@app-core/models/Users.model.ts
@@ -0,0 +1,11 @@
+import { validateDriverModel } from '@db/driver'
+import { User } from '../schemas/User.schema'
+import { createSchemaModel } from '@db/driver'
+
+/* --- Model ----------------------------------------------------------------------------------- */
+
+export const Users = createSchemaModel(User)
+
+/* --- Drivers --------------------------------------------------------------------------------- */
+
+export const driverModel = validateDriverModel(Users.driver)
diff --git a/features/@app-core/nativewind-env.d.ts b/features/@app-core/nativewind-env.d.ts
new file mode 100644
index 0000000..9583462
--- /dev/null
+++ b/features/@app-core/nativewind-env.d.ts
@@ -0,0 +1,3 @@
+///
+
+export type HealthCheckQueryOutput = ResultOf
+
+/* --- healthCheckFetcher() -------------------------------------------------------------------- */
+
+export const healthCheckFetcher = bridgedFetcher({
+ ...healthCheckBridge,
+ graphqlQuery: healthCheckQuery,
+})
+
+/** --- useHealthCheckQuery() ------------------------------------------------------------- */
+/** -i- React Query hook to update the organisation's plan name, linked github org and slug */
+export const useHealthCheckQuery = (
+ input: HealthCheckQueryInput,
+ options: Omit, 'queryKey' | 'queryFn'> & {
+ queryKey?: QueryKey,
+ }
+) => {
+ return useQuery({
+ queryKey: ['healthCheck', input],
+ queryFn: () => healthCheckFetcher(input),
+ ...options,
+ })
+}
diff --git a/features/app-core/resolvers/healthCheck.ts b/features/@app-core/resolvers/healthCheck.resolver.ts
similarity index 51%
rename from features/app-core/resolvers/healthCheck.ts
rename to features/@app-core/resolvers/healthCheck.resolver.ts
index 14a2dc8..f3edc9c 100644
--- a/features/app-core/resolvers/healthCheck.ts
+++ b/features/@app-core/resolvers/healthCheck.resolver.ts
@@ -1,29 +1,26 @@
import * as OS from 'os'
import type { NextRequest } from 'next/server'
-import type { RequestContext } from '../middleware/createRequestContext'
+import { createResolver } from '@green-stack/schemas/createResolver'
import { appConfig } from '../appConfig'
+import { healthCheckBridge } from './healthCheck.bridge'
+import { Settings } from '@db/models'
+import { DRIVER_KEYS } from '@app/registries/drivers.config'
/* --- Constants ------------------------------------------------------------------------------- */
const ALIVE_SINCE = new Date()
-/* --- Types ----------------------------------------------------------------------------------- */
-
-type HealthCheckArgs = {
- echo?: string
-}
-
-type HealthCheckInputs = {
- args: HealthCheckArgs,
- context: RequestContext
-}
+/** --- Test Links ----------------------------------------------------------------------------- */
+/** -i- http://localhost:3000/api/health */
/** --- healthCheck() -------------------------------------------------------------------------- */
/** -i- Check the health status of the server. Includes relevant urls, server time(zone), versions and more */
-export const healthCheck = async ({ args, context }: HealthCheckInputs) => {
+export const healthCheck = createResolver(async ({ args, withDefaults, req, context }) => {
// Inputs
- const { echo } = args
- const { req } = context
+ const { echo, verbose } = args
+
+ // Context
+ const { req: _, res: __, ...headerContext } = context
// Vars
const now = new Date()
@@ -33,10 +30,50 @@ export const healthCheck = async ({ args, context }: HealthCheckInputs) => {
const r = req as Request
const rn = req as NextRequest
const requestHost = rn?.headers?.get?.('host')
- const requestProtocol = rn?.headers?.get?.['x-forwarded-proto'] ?? 'http'
- const requestURL = r?.url || `${requestProtocol}://${requestHost}/api/health`
+ const requestProtocol = rn?.headers?.get?.('x-forwarded-proto') ?? 'http'
+ const requestUrlFallback = `${requestProtocol}://${requestHost}/api/health`
+ const requestURL = r?.url || headerContext.requestUrl || requestUrlFallback
const { baseURL, backendURL, apiURL, graphURL } = appConfig
+ // -- Context --
+
+ const extraContext = { requestContext: headerContext, drivers: {} } as ObjectType
+
+ const addDriverStatus = (
+ driverName: DRIVER_KEYS,
+ driverType = 'UNKNOWN',
+ status: 'OK' | 'NOK' | 'NONE',
+ ) => {
+ extraContext.drivers[driverName] = {
+ type: driverType,
+ status,
+ }
+ }
+
+ // -- Test DB Driver --
+
+ try {
+
+ const hasDbDriverSetting = !!(await Settings.findMany({ key: 'dbDriver' })).length
+
+ if (!hasDbDriverSetting) {
+ await Settings.createOne({
+ key: 'dbDriver',
+ value: appConfig.drivers.db,
+ })
+ }
+
+ const dbDriverSetting = await Settings.findOne({ key: 'dbDriver' })
+ const dbDriverValue = dbDriverSetting?.value || 'NONE'
+ addDriverStatus('db', dbDriverValue, dbDriverValue ? 'OK' : 'NOK')
+
+ } catch (error) {
+
+ console.error('Error testing DB driver:', error)
+ addDriverStatus('db', appConfig.drivers.db, 'NOK')
+
+ }
+
// -- Respond --
return {
@@ -71,5 +108,7 @@ export const healthCheck = async ({ args, context }: HealthCheckInputs) => {
systemFreeMemory: OS.freemem(),
systemTotalMemory: OS.totalmem(),
systemLoadAverage: OS.loadavg(),
+ // CONTEXT
+ context: verbose ? extraContext : undefined,
}
-}
+}, healthCheckBridge)
diff --git a/features/@app-core/routes/api/graphql/route.ts b/features/@app-core/routes/api/graphql/route.ts
new file mode 100644
index 0000000..2d40793
--- /dev/null
+++ b/features/@app-core/routes/api/graphql/route.ts
@@ -0,0 +1,13 @@
+import type { NextRequest } from 'next/server'
+import { createGraphQLServerHandler } from '../../../graphql/graphqlServer'
+
+/* --- Handler --------------------------------------------------------------------------------- */
+
+const handler = createGraphQLServerHandler()
+
+/* --- /api/graphql ---------------------------------------------------------------------------- */
+/* -i- http://localhost:3000/api/graphql */
+
+export const GET = (req: NextRequest) => handler(req)
+
+export const POST = (req: NextRequest) => handler(req)
diff --git a/features/@app-core/routes/api/health/route.ts b/features/@app-core/routes/api/health/route.ts
new file mode 100644
index 0000000..a7f26fd
--- /dev/null
+++ b/features/@app-core/routes/api/health/route.ts
@@ -0,0 +1,15 @@
+import { createGraphResolver } from '@green-stack/core/schemas/createGraphResolver'
+import { createNextRouteHandler } from '@green-stack/core/schemas/createNextRouteHandler'
+import { healthCheck } from '@app/core/resolvers/healthCheck.resolver'
+
+/* --- Routes ---------------------------------------------------------------------------------- */
+
+export const GET = createNextRouteHandler(healthCheck)
+
+export const POST = createNextRouteHandler(healthCheck)
+
+/* --- GraphQL --------------------------------------------------------------------------------- */
+
+// -i- Picked up by `npm run collect:resolvers` when running dev to add to list of resolvers
+// -i- which `npm run build:schema` will later turn into new GraphQL schema definitions
+export const graphResolver = createGraphResolver(healthCheck)
diff --git a/features/@app-core/routes/demos/forms/index.tsx b/features/@app-core/routes/demos/forms/index.tsx
new file mode 100644
index 0000000..d875cb1
--- /dev/null
+++ b/features/@app-core/routes/demos/forms/index.tsx
@@ -0,0 +1,15 @@
+import { UniversalRouteScreen } from '@green-stack/core/navigation/UniversalRouteScreen'
+import FormsScreen from '../../../screens/FormsScreen'
+
+/* --- /demos/forms ---------------------------------------------------------------------------- */
+
+export default (props: any) => (
+
diff --git a/features/@app-core/schemas/HealthCheckOutput.docs.mdx b/features/@app-core/schemas/HealthCheckOutput.docs.mdx
new file mode 100644
index 0000000..a9f7b02
--- /dev/null
+++ b/features/@app-core/schemas/HealthCheckOutput.docs.mdx
@@ -0,0 +1,15 @@
+### Why this schema?
+
+We included this schema in the starterkit as a reference guide for what schema docs look like.
+
+It's also reused in the [`healthCheck()`](/@app-core/resolvers/healthCheck) resolver, which has it's own auto-generated docs example.
+
+Learn more about how zod schemas work as the [Single Source of Truth](/single-sources-of-truth) for APIs, forms, GraphQL and other automations we consider the "right abstractions".
+
+### Adding your own schemas
+
+If you want to quickly replicate this way of working for setting up schemas with all the side-effects listed above, you can use our schema generator:
+
+```bash copy
+npm run add:schema
+```
diff --git a/features/@app-core/schemas/HealthCheckOutput.ts b/features/@app-core/schemas/HealthCheckOutput.ts
new file mode 100644
index 0000000..2d844da
--- /dev/null
+++ b/features/@app-core/schemas/HealthCheckOutput.ts
@@ -0,0 +1,36 @@
+import { z, schema } from '@green-stack/schemas'
+
+/* --- Schemas --------------------------------------------------------------------------------- */
+
+export const HealthCheckOutput = schema('HealthCheckOutput', {
+ echo: z.string().optional(),
+ status: z.literal('OK'),
+ alive: z.boolean(),
+ kicking: z.boolean(),
+ now: z.string(),
+ aliveTime: z.number(),
+ aliveSince: z.date(),
+ serverTimezone: z.string(),
+ requestHost: z.string().optional(),
+ requestProtocol: z.string().optional(),
+ requestURL: z.string().optional(),
+ baseURL: z.string().optional(),
+ backendURL: z.string().optional(),
+ apiURL: z.string().optional(),
+ graphURL: z.string().optional(),
+ port: z.number().int().nullable(),
+ debugPort: z.number().int().nullable(),
+ nodeVersion: z.string().optional(),
+ v8Version: z.string().optional(),
+ systemArch: z.string().optional(),
+ systemPlatform: z.string().optional(),
+ systemRelease: z.string().optional(),
+ systemFreeMemory: z.number().optional(),
+ systemTotalMemory: z.number().optional(),
+ systemLoadAverage: z.array(z.number()).optional(),
+ context: z.record(z.string(), z.unknown()).nullish(),
+})
+
+/* --- Type Alias ------------------------------------------------------------------------------ */
+
+export type HealthCheckOutput = z.infer
diff --git a/features/@app-core/schemas/User.schema.ts b/features/@app-core/schemas/User.schema.ts
new file mode 100644
index 0000000..1b2709a
--- /dev/null
+++ b/features/@app-core/schemas/User.schema.ts
@@ -0,0 +1,30 @@
+import { z, schema } from '@green-stack/schemas'
+import { partials } from '@app/registries/schemas.partials'
+
+/* --- Description ----------------------------------------------------------------------------- */
+
+const d = "Essential user info"
+
+/** --- User ----------------------------------------------------------------------------------- */
+/** -i- Essential user info */
+export const User = schema('User', {
+
+ userId: z
+ .string()
+ .index()
+ .unique()
+ .describe('Auth provider sub or user ID'),
+ email: z
+ .string()
+ .unique()
+ .describe('Primary Github email used during OAuth'),
+
+ // -i- Partial fields from other modules / features / packages / plugins
+
+ ...partials.User,
+
+}).describe(d)
+
+/* --- Type Alias ------------------------------------------------------------------------------ */
+
+export type User = z.input
diff --git a/features/@app-core/screens/DemoScreen.tsx b/features/@app-core/screens/DemoScreen.tsx
new file mode 100644
index 0000000..a6ed2d2
--- /dev/null
+++ b/features/@app-core/screens/DemoScreen.tsx
@@ -0,0 +1,307 @@
+import React, { useEffect } from 'react'
+import { Dimensions } from 'react-native'
+import { StatusBar } from 'expo-status-bar'
+import { HydratedRouteProps, createQueryBridge } from '@green-stack/navigation'
+import { Pressable, ScrollView, View, Link, Image, P, H1, H3, Text, H2, cn } from '../components/styled'
+import { healthCheckFetcher } from '@app/core/resolvers/healthCheck.query'
+import { Icon } from '@green-stack/components/Icon'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { isMobile } from '@app/config'
+
+/* --- Data Fetching --------------------------------------------------------------------------- */
+
+// -i- Think of a `QueryBridge` as a bridge between the route component and the data-fetching logic.
+// -i- It's a way to fetch data for a route, based on the route's parameters.
+
+// -i- The closest thing you could compare it to is next.js's `getServerSideProps`...
+// -i- Except it also works to fetch data on your Native App instead of just web SSR / CSR.
+
+export const queryBridge = createQueryBridge({
+ routeDataFetcher: healthCheckFetcher,
+ routeParamsToQueryKey: (routeParams) => ['healthCheck', routeParams.echo],
+ routeParamsToQueryInput: (routeParams) => ({ healthCheckArgs: { echo: routeParams.echo, verbose: true } }),
+ fetcherDataToProps: (fetcherData) => ({ serverHealth: fetcherData?.healthCheck }),
+})
+
+/* --- Types ----------------------------------------------------------------------------------- */
+
+type DemoScreenProps = HydratedRouteProps
+
+/* ---
+
+
+
+
+
+ {/* Side Icons */}
+
+
+
+
+
+
+
+
+ {/* Logo & Tagline */}
+
+
+
+
+
+
+ FullProduct.dev β‘οΈ
+
+
+ Your Universal App Starterkit
+
+
+
+
+
+ {/* Learn More */}
+
+
+
+
+ {/* Made by */}
+
+
+
+ By
+
+
+
+
+
+ Thorr β‘οΈ codinsonn.dev
+
+
+
+
+
+
+
+
+
+ {/* Start from */}
+
+
+
+
+
+ )
+}
+
+/* ---
+
+
+ Start from
+ @app/core
+ {` β `}
+ DemoScreen.tsx
+
+
+
+ )
+}
+
+/* ---
+
+
+ {props.title}
+
+ {!!props.titleIcon && (
+ <>
+
+
+ {props.summary ? (
+
+ {props.summary}
+
+ ) : (
+
+ {props.children || 'No summary provided.'}
+
+ )}
+
+)
+
+/* --- Exports --------------------------------------------------------------------------------- */
+
+export default DemoScreen
diff --git a/features/@app-core/screens/FormsScreen.tsx b/features/@app-core/screens/FormsScreen.tsx
new file mode 100644
index 0000000..44b4550
--- /dev/null
+++ b/features/@app-core/screens/FormsScreen.tsx
@@ -0,0 +1,438 @@
+import { useState, useEffect, useRef } from 'react'
+import { StatusBar } from 'expo-status-bar'
+import { useColorScheme } from 'nativewind'
+import { View, Text, H1, H2, H3, Link, ScrollView, KeyboardAvoidingView, cn, getThemeColor } from '../components/styled'
+import BackButton from '../components/BackButton'
+import { TextInput } from '../forms/TextInput.styled'
+import { NumberStepper } from '../forms/NumberStepper.styled'
+import { Checkbox } from '../forms/Checkbox.styled'
+import { useFormState } from '@green-stack/forms/useFormState'
+import { useRouteParams, useRouter } from '@green-stack/navigation'
+import { CheckList } from '../forms/CheckList.styled'
+import { RadioGroup } from '../forms/RadioGroup.styled'
+import { Select } from '../forms/Select.styled'
+import { Switch } from '../forms/Switch.styled'
+import { isEmpty } from '@green-stack/utils/commonUtils'
+import { useScrollToFocusedInput } from '@green-stack/hooks/useScrollToFocusedInput'
+import { TextArea } from '../forms/TextArea.styled'
+import { Button } from '../components/Button'
+import { removeSetItem } from '@green-stack/utils/arrayUtils'
+import { isWeb, isDocs } from '@app/config'
+import { calculateEfficiency } from '../utils/calculateEfficiency'
+import { EfficiencyResults } from '../components/EfficiencyResults'
+import { FormScreenProps, IDENTITIES, FEATURES, PLUGINS } from './FormsScreen.types'
+
+/* --- Disclaimer ------------------------------------------------------------------------------ */
+
+// -i- This demo screen serves multiple purposes -i-
+
+// -1- For how we calculated the efficiency gains with this kit -> See 'utils/calculateEfficiency.ts'
+// -2- For a sense of how to use the form components and hooks -> See the rest of this file
+
+// -i- Feel free to delete this and other example screens manually
+// -i- or through a merge of the 'with/clean-slate' branch (paid version only)
+
+/* --- Components ------------------------------------------------------------------------------ */
+
+const CustomRadioGroup = RadioGroup.create()
+
+/* --- (null)
+ const ageInputRef = useRef(null)
+ const feedbackInputRef = useRef(null)
+
+ // Hooks
+ const inputScrollUtils = useScrollToFocusedInput()
+
+ // State
+ const [validateOnChange, setValidateOnChange] = useState(!!params.validateOnChange)
+
+ // Forms
+ const formState = useFormState(FormScreenProps, {
+ initialValues: { ...props, ...params },
+ validateOnChange,
+ })
+
+ // Vars
+ const { showFormState, showResults, showBenefits, identifiesWith } = formState.values
+ const { excitingFeatures, platformsTargeted = 1 } = formState.values
+ const { currentSetupHoursPerProject, knownTech } = formState.values
+
+ // Theme
+ const scheme = useColorScheme()
+
+ // -- Calculations --
+
+ const results = calculateEfficiency(formState.values)
+ const { shipsWebOnly, shipsMobileOnly } = results
+ const { annualAvgEfficiencyBoost, annualHoursSaved } = results
+ const { deliveryEfficiency, finalEfficiencyRate } = results
+ const { learningGapHours, setupHoursPerProject } = results
+
+ // -- Handlers --
+
+ const submitForm = () => {
+ formState.handleChange('showResults', !showResults)
+ }
+
+ // -- Effects --
+
+ useEffect(() => {
+ if (!validateOnChange && !isEmpty(formState.errors)) formState.updateErrors({})
+ }, [validateOnChange])
+
+ // β¬ Update url params when form values change
+
+ useEffect(() => {
+ if (!formState.isDefaultState) setParams(formState.values)
+ }, [formState.values])
+
+ // β¬ Update projectsPerYear based on identifiesWith
+
+ useEffect(() => {
+ switch (identifiesWith) {
+ case 'full-product-dev': formState.handleChange('projectsPerYear', 3); break
+ case 'freelance-app-dev': formState.handleChange('projectsPerYear', 4); break
+ case 'startup-founder': formState.handleChange('projectsPerYear', 1); break
+ case 'indiehacker': formState.handleChange('projectsPerYear', 5); break
+ case 'studio-lead': formState.handleChange('projectsPerYear', 7); break
+ }
+ }, [identifiesWith])
+
+ // β¬ Update prefill of knownTech based on platformsTargeted
+
+ useEffect(() => {
+
+ let updatedKnownTech = knownTech
+
+ if (shipsWebOnly) {
+ updatedKnownTech = removeSetItem(updatedKnownTech, 'react-native')
+ updatedKnownTech = removeSetItem(updatedKnownTech, 'expo')
+ }
+
+ if (shipsMobileOnly) {
+ updatedKnownTech = removeSetItem(updatedKnownTech, 'nextjs')
+ }
+
+ formState.handleChange('knownTech', updatedKnownTech)
+
+ }, [platformsTargeted])
+
+ // -- Render --
+
+ return (
+
+
+
+ {/* Start of Form */}
+
+
+
+
+ scheme.setColorScheme(scheme.colorScheme !== 'dark' ? 'dark' : 'light')}>
+ ROI Calculator
+
+
+
+ A handy demo for 'Universal Forms'
+
+
+
+ Email
+
+
+
+ Age
+
+
+
+ What role describes you best?
+
+
+
+
+
+
+ What platforms do you typically ship?
+
+
+ {
+ if (targets) formState.handleChange('platformsTargeted', +targets) // @ts-ignore
+ else formState.handleChange('platformsTargeted', undefined)
+ }}
+ >
+
+
+
+ Which DX features excite you?
+
+
+
+ What plugins would you merge?
+
+
+
+ What's missing?
+
+
+
+ Feedback or suggestions appreciated
+
+
+
+
+
+ {/* -- Switch -- */}
+
+ formState.handleChange('showFormState', !showFormState)}
+ />
+
+ {/* -- useFormstate() -- */}
+
+ {showFormState && (
+ <>
+
+
+
+
+
+ {JSON.stringify({
+ ...formState,
+ metadata: {
+ currentSetupHoursPerProject,
+ setupHoursPerProject,
+ learningGapHours,
+ annualHoursSaved,
+ annualAvgEfficiencyBoost,
+ isWeb,
+ deliveryEfficiency,
+ finalEfficiencyRate,
+ results,
+ }
+ }, null, 2)}
+
+
+
+ )}
+
+
+
+
+
+
+ {!isDocs && (
+
+
+ {`π`}
+
+
+
+ )}
+
+
+ )
+}
+
+/* --- Documentation --------------------------------------------------------------------------- */
+
+// export const getDocumentationProps = FormScreenProps.documentationProps('FormScreen')
+
+/* --- Exports --------------------------------------------------------------------------------- */
+
+export default FormsScreen
diff --git a/features/@app-core/screens/FormsScreen.types.ts b/features/@app-core/screens/FormsScreen.types.ts
new file mode 100644
index 0000000..94472f3
--- /dev/null
+++ b/features/@app-core/screens/FormsScreen.types.ts
@@ -0,0 +1,85 @@
+import { useFormState } from '@green-stack/forms/useFormState'
+import { z, schema, inputOptions } from '@green-stack/schemas'
+
+/* --- Disclaimer ------------------------------------------------------------------------------ */
+
+// -i- This demo screen serves multiple purposes -i-
+
+// -1- For how we calculated the efficiency gains with this kit -> See 'utils/calculateEfficiency.ts'
+// -2- For a sense of how to use the form components and hooks -> See the rest of this file
+
+// -i- Feel free to delete this and other example screens manually
+// -i- or through a merge of the 'with/clean-slate' branch (paid version only)
+
+/* --- Constants ------------------------------------------------------------------------------- */
+
+export const oneDay = 8 // One day in work hours
+export const oneWeek = oneDay * 5 // One work week in hours
+
+export const annualWorkDays = 260 // Work days per year
+export const annualWorkHours = annualWorkDays * oneDay // Work hours per year
+
+export const FEATURES = inputOptions({
+ 'universal-starter': 'Write-once workflow for Web, iOS & Android',
+ // 'git-plugins': 'Git based plugin branches & PRs',
+ // 'stack-freedom': 'Choose my own Auth / DB / Mail / plugins',
+ 'zod-query-toolkit': 'Auto typed API\'s + fetching (zod, react-query)',
+ 'generators-scripts': 'Scripts and Generators to skip boilerplate',
+ 'designed-for-copypaste': 'Portable structure for copy-paste features',
+ 'universal-fs-routing': 'Universal file based routing (Expo + Next.js)',
+} as const)
+
+export const IDENTITIES = inputOptions({
+ 'full-product-dev': 'Full-stack web or mobile dev',
+ 'freelance-app-dev': 'Freelance App Developer',
+ 'startup-founder': 'Startup Founder',
+ 'indiehacker': 'Indie Hacker / Solo App Dev',
+ 'studio-lead': 'Studio Lead / CEO / Architect',
+} as const)
+
+export const TECH_KNOWLEDGE = inputOptions({
+ 'typescript': 'TypeScript',
+ 'react': 'React',
+ 'react-native': 'React Native',
+ 'expo': 'Expo',
+ 'nextjs': 'Next.js',
+ 'zod': 'Zod',
+ 'react-query': 'React Query',
+} as const)
+
+export const PLUGINS = inputOptions({
+ 'auth': 'Authentication - Clerk / ...',
+ 'db': 'Database - MongoDB / ...',
+ // -i- Coming Soon
+ // 'mail': 'Mail - Resend / Sendgrid / Mailgun ...',
+ // 'notifications': 'Notifications - OneSignal / Expo ...',
+ // 'payments': 'Payments - Stripe / Lemonsqueezy ...',
+ // 'storage': 'Storage - S3 / Cloudinary / Supabase ...',
+})
+
+/* --- Props ----------------------------------------------------------------------------------- */
+
+export const FormScreenProps = schema('FormScreenProps', {
+ email: z.string().email().optional(),
+ age: z.number().min(1).max(130).optional(),
+ identifiesWith: IDENTITIES.optional(),
+ excitingFeatures: z.array(FEATURES).default([]),
+ pluginsToMerge: z.array(PLUGINS).default([]),
+ feedbackSuggestions: z.string().optional(),
+ platformsTargeted: z.number().optional(),
+ // -- Form Settings --
+ showFormState: z.boolean().default(false),
+ showResults: z.boolean().default(false),
+ showBenefits: z.boolean().default(true),
+ // -- Precalculated --
+ projectsPerYear: z.number().min(1).default(1),
+ currentSetupHoursPerProject: z.number().default(oneWeek),
+ knownTech: z.array(TECH_KNOWLEDGE).default(TECH_KNOWLEDGE.options),
+ minHourlyPrice: z.number().default(50),
+})
+
+export type FormScreenProps = z.input
+
+/* --- Forms ----------------------------------------------------------------------------------- */
+
+export type EfficiencyFormState = ReturnType>
diff --git a/features/@app-core/screens/ImagesScreen.tsx b/features/@app-core/screens/ImagesScreen.tsx
new file mode 100644
index 0000000..c0f4588
--- /dev/null
+++ b/features/@app-core/screens/ImagesScreen.tsx
@@ -0,0 +1,82 @@
+import React from 'react'
+import { StatusBar } from 'expo-status-bar'
+import { View, Text, Image, Link, ScrollView } from '../components/styled'
+import BackButton from '../components/BackButton'
+
+/* --- Images ---------------------------------------------------------------------------------- */
+
+const greenStackLogo = require('../assets/green-stack-logo.png')
+
+/* ---
+
+ {/* - Example 1 - */}
+
+ src=static-require
+ | width: 60 | height: 60
+
+ {/* - Example 2 - */}
+
+ src=external-url
+ | width: 60 | height: 60
+
+ {/* - Example 3 - */}
+
+
+
+ wrapper=50x80,
+ relative | fill=true
+
+ {/* - Example 4 - */}
+
+
+
+ wrapper=80x60,
+ relative | fill | contentFit=contain
+
+
+
+
+
+ {`π`}
+
+
+
+
+)
+
+/* --- Exports --------------------------------------------------------------------------------- */
+
+export default ImagesScreen
diff --git a/features/@app-core/screens/SlugScreen.tsx b/features/@app-core/screens/SlugScreen.tsx
new file mode 100644
index 0000000..6d89bd2
--- /dev/null
+++ b/features/@app-core/screens/SlugScreen.tsx
@@ -0,0 +1,177 @@
+import React, { Fragment } from 'react'
+import { StatusBar } from 'expo-status-bar'
+import { useRouteParams } from '@green-stack/navigation/useRouteParams'
+import { View, Text, H1, H3, P, Link, ScrollView, H2, cn } from '../components/styled'
+import { useRouter } from '@green-stack/navigation/useRouter'
+import type { UniversalRouteScreenProps } from '@green-stack/navigation/useRouteParams.types'
+import BackButton from '../components/BackButton'
+import { testableFeatures } from '../constants/testableFeatures'
+import { isMobile } from '../appConfig'
+
+/* ---
+
+
+ Universal Nav π π
+
+
+ β /subpages/{decodeURIComponent(slug as string)}
+
+
+ Universal URL routing in FullProduct.dev is built on the Expo & Next.js app routers. File based routes are shared between Web and Native. Enabling things like automatic deeplinks.
+
+
+
+ /subpages/
+ [slug]
+ {!!count && (
+ <>
+ ?count=
+ {count}
+
+ )}
+
+
+
+ {count}
+
+
+
+
+ Whichever device / platforms you're on, you can even save state in the URL, like this counter above us:
+
+ setParams({ count: `${+count + 1}` })}>
+ router.setParams()
+ {` - add to count query param`}
+
+
+ {/* Nav & Routing Tests */}
+
+ navigate('/subpages/navigate')}>
+ router.navigate()
+ {` - Nav to href url`}
+
+ push('/subpages/push')}>
+ router.push()
+ {` - Push new stack on mobile`}
+
+ replace('/subpages/replace')}>
+ router.replace()
+ {` - Nav w/o updating history`}
+
+
+
+ Notice the count is saved per page when navigating between urls. On mobile, screens are pushed onto a stack instead of just URL history.
+ {isMobile && (
+
+ {` (Try swiping back)`}
+
+ )}
+
+
+ {/* Other Tests */}
+
+
+
+
+ {feature.icon}
+
+
+ {feature.icon}
+
+
+ {/*
+
+ {feature.title}
+
+
+ {feature.description}
+
+
+
+ {index < (testableFeatures.length - 1) && (
+
+ ))}
+
+ {/* Try the full startkit? */}
+
+
+ Upgrade your Universal App Setup?
+
+
+
+
+
+ {`π`}
+
+
+
+
+ )
+}
+
+/* --- Exports --------------------------------------------------------------------------------- */
+
+export default SlugScreen
diff --git a/features/@app-core/screens/UniversalAppProviders.tsx b/features/@app-core/screens/UniversalAppProviders.tsx
new file mode 100644
index 0000000..5f197a0
--- /dev/null
+++ b/features/@app-core/screens/UniversalAppProviders.tsx
@@ -0,0 +1,56 @@
+'use client'
+import React from 'react'
+import { CoreContext, CoreContextType } from '@green-stack/context/CoreContext'
+import { UniversalQueryClientProvider } from '@green-stack/context/UniversalQueryClientProvider'
+import { isServer } from '../appConfig'
+
+// -i- This is a regular react client component
+// -i- Use this file for adding universal app providers that work in both Expo and Next.js
+// -i- It will be rendered by 'apps/expo' on mobile from the 'ExpoRootLayout' component
+// -i- It will also be rendered by 'apps/next' on web from the 'NextClientRootLayout' component
+
+/* --- Types ----------------------------------------------------------------------------------- */
+
+type UniversalAppProvidersProps = CoreContextType & {
+ children: React.ReactNode
+}
+
+/* ---
+
+ {children}
+
+
+ )
+}
+
+/* --- Exports --------------------------------------------------------------------------------- */
+
+export default UniversalAppProviders
diff --git a/features/app-core/screens/UniversalRootLayout.tsx b/features/@app-core/screens/UniversalRootLayout.tsx
similarity index 93%
rename from features/app-core/screens/UniversalRootLayout.tsx
rename to features/@app-core/screens/UniversalRootLayout.tsx
index bee3f61..2aed112 100644
--- a/features/app-core/screens/UniversalRootLayout.tsx
+++ b/features/@app-core/screens/UniversalRootLayout.tsx
@@ -1,6 +1,7 @@
'use client'
import React from 'react'
import { View, StyleSheet } from 'react-native'
+import { PortalHost } from '@rn-primitives/portal'
// -i- This is a regular react client component
// -i- Use this file for applying your universal root layout
@@ -18,6 +19,7 @@ type UniversalRootLayoutProps = {
const UniversalRootLayout = ({ children }: UniversalRootLayoutProps) => (
{children}
+
)
diff --git a/features/@app-core/tailwind.config.js b/features/@app-core/tailwind.config.js
new file mode 100644
index 0000000..acf2443
--- /dev/null
+++ b/features/@app-core/tailwind.config.js
@@ -0,0 +1,15 @@
+const { universalTheme } = require('./tailwind.theme.js')
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: [
+ '../../apps/**/*.{js,jsx,ts,tsx,md,mdx}',
+ '../../features/**/*.{js,jsx,ts,tsx,md,mdx}',
+ '../../packages/**/*.{js,jsx,ts,tsx,md,mdx}',
+ ],
+ presets: [require('nativewind/preset')],
+ theme: {
+ ...universalTheme,
+ },
+ plugins: [require('tailwindcss-animate')],
+}
diff --git a/features/@app-core/tailwind.theme.js b/features/@app-core/tailwind.theme.js
new file mode 100644
index 0000000..391f3ea
--- /dev/null
+++ b/features/@app-core/tailwind.theme.js
@@ -0,0 +1,118 @@
+const { hairlineWidth } = require('nativewind/theme')
+
+/** @type {import('tailwindcss').Config['theme']} */
+const universalTheme = {
+ // -i- Extend default tailwind theme here
+ // -i- Reference this theme in the tailwind.config.js files in apps/expo, apps/next, features/app-core and other package or feature folders
+ extend: {
+ colors: {
+ 'background': 'hsl(var(--background))',
+ 'foreground': 'hsl(var(--foreground))',
+ 'primary': 'hsl(var(--primary))',
+ 'primary-foreground': 'hsl(var(--primary-foreground))',
+ 'secondary': 'hsl(var(--secondary))',
+ 'secondary-foreground': 'hsl(var(--secondary-foreground))',
+ 'accent': 'hsl(var(--accent))',
+ 'accent-foreground': 'hsl(var(--accent-foreground))',
+ 'card': 'hsl(var(--card))',
+ 'card-foreground': 'hsl(var(--card-foreground))',
+ 'popover': 'hsl(var(--popover))',
+ 'popover-foreground': 'hsl(var(--popover-foreground))',
+ 'link': 'hsl(var(--link))',
+ 'muted': 'hsl(var(--muted))',
+ 'warn': 'hsl(var(--warn))',
+ 'danger': 'hsl(var(--danger))',
+ 'info': 'hsl(var(--info))',
+ 'success': 'hsl(var(--success))',
+ 'ring': 'hsl(var(--ring))',
+ 'input': 'hsl(var(--input))',
+ },
+ borderColor: (theme) => ({
+ 'background': theme('colors.background'),
+ 'foreground': theme('colors.foreground'),
+ 'primary': theme('colors.primary'),
+ 'primary-foreground': theme('colors.primary-foreground'),
+ 'secondary': theme('colors.secondary'),
+ 'secondary-foreground': theme('colors.secondary-foreground'),
+ 'accent': theme('colors.accent'),
+ 'accent-foreground': theme('colors.accent-foreground'),
+ 'card': theme('colors.card'),
+ 'card-foreground': theme('colors.card-foreground'),
+ 'popover': theme('colors.popover'),
+ 'popover-foreground': theme('colors.popover-foreground'),
+ 'link': theme('colors.link'),
+ 'muted': theme('colors.muted'),
+ 'warn': theme('colors.warn'),
+ 'danger': theme('colors.danger'),
+ 'info': theme('colors.info'),
+ 'success': theme('colors.success'),
+ 'ring': theme('colors.ring'),
+ 'input': theme('colors.input'),
+ }),
+ backgroundColor: (theme) => ({
+ 'background': theme('colors.background'),
+ 'foreground': theme('colors.foreground'),
+ 'primary': theme('colors.primary'),
+ 'primary-foreground': theme('colors.primary-foreground'),
+ 'secondary': theme('colors.secondary'),
+ 'secondary-foreground': theme('colors.secondary-foreground'),
+ 'accent': theme('colors.accent'),
+ 'accent-foreground': theme('colors.accent-foreground'),
+ 'card': theme('colors.card'),
+ 'card-foreground': theme('colors.card-foreground'),
+ 'popover': theme('colors.popover'),
+ 'popover-foreground': theme('colors.popover-foreground'),
+ 'link': theme('colors.link'),
+ 'muted': theme('colors.muted'),
+ 'warn': theme('colors.warn'),
+ 'danger': theme('colors.danger'),
+ 'info': theme('colors.info'),
+ 'success': theme('colors.success'),
+ 'ring': theme('colors.ring'),
+ 'input': theme('colors.input'),
+ }),
+ textColor: (theme) => ({
+ 'background': theme('colors.background'),
+ 'foreground': theme('colors.foreground'),
+ 'primary': theme('colors.primary'),
+ 'primary-foreground': theme('colors.primary-foreground'),
+ 'secondary': theme('colors.secondary'),
+ 'secondary-foreground': theme('colors.secondary-foreground'),
+ 'accent': theme('colors.accent'),
+ 'accent-foreground': theme('colors.accent-foreground'),
+ 'card': theme('colors.card'),
+ 'card-foreground': theme('colors.card-foreground'),
+ 'popover': theme('colors.popover'),
+ 'popover-foreground': theme('colors.popover-foreground'),
+ 'link': theme('colors.link'),
+ 'muted': theme('colors.muted'),
+ 'warn': theme('colors.warn'),
+ 'danger': theme('colors.danger'),
+ 'info': theme('colors.info'),
+ 'success': theme('colors.success'),
+ 'ring': theme('colors.ring'),
+ 'input': theme('colors.input'),
+ }),
+ borderWidth: {
+ hairline: hairlineWidth(),
+ },
+ keyframes: {
+ 'accordion-down': {
+ from: { height: '0' },
+ to: { height: 'var(--radix-accordion-content-height)' },
+ },
+ 'accordion-up': {
+ from: { height: 'var(--radix-accordion-content-height)' },
+ to: { height: '0' },
+ },
+ },
+ animation: {
+ 'accordion-down': 'accordion-down 0.2s ease-out',
+ 'accordion-up': 'accordion-up 0.2s ease-out',
+ },
+ }
+}
+
+/* --- Exports --------------------------------------------------------------------------------- */
+
+module.exports = { universalTheme }
diff --git a/features/@app-core/tsconfig.json b/features/@app-core/tsconfig.json
new file mode 100644
index 0000000..bc832f5
--- /dev/null
+++ b/features/@app-core/tsconfig.json
@@ -0,0 +1,69 @@
+{
+ "compilerOptions": {
+ "lib": [
+ "dom",
+ "dom.iterable",
+ "esnext"
+ ],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "noEmit": true,
+ "incremental": true,
+ "esModuleInterop": true,
+ "module": "esnext",
+ "moduleResolution": "node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "allowImportingTsExtensions": true,
+ "jsx": "preserve",
+ "plugins": [
+ {
+ "name": "@0no-co/graphqlsp",
+ "schema": "./graphql/schema.graphql",
+ "tadaOutputLocation": "./graphql-env.d.ts"
+ }
+ ],
+ "types": ["node", "glob"],
+ "paths": {
+ "@app/config": ["../../features/@app-core/appConfig.ts"],
+ "@app/schemas/*": ["../../features/@app-core/schemas/*"],
+ "@app/utils/*": ["../../features/@app-core/utils/*"],
+ "@app/hooks/*": ["../../features/@app-core/hooks/*"],
+ "@app/primitives": ["../../features/@app-core/components/styled.tsx"],
+ "@app/components/*": ["../../features/@app-core/components/*"],
+ "@app/forms/*": ["../../features/@app-core/forms/*"],
+ "@app/screens/*": ["../../features/@app-core/screens/*"],
+ "@app/assets/*": ["../../features/@app-core/assets/*"],
+ "@app/resolvers/*": ["../../features/@app-core/resolvers/*"],
+ "@app/middleware/*": ["../../features/@app-core/middleware/*"],
+ "@green-stack/schemas": ["../../packages/@green-stack-core/schemas"],
+ "@green-stack/schemas/*": ["../../packages/@green-stack-core/schemas/*"],
+ "@green-stack/navigation": ["../../packages/@green-stack-core/navigation/index.ts"],
+ "@green-stack/navigation/*": ["../../packages/@green-stack-core/navigation/*"],
+ "@green-stack/utils/*": ["../../packages/@green-stack-core/utils/*"],
+ "@green-stack/hooks/*": ["../../packages/@green-stack-core/hooks/*"],
+ "@green-stack/components/*": ["../../packages/@green-stack-core/components/*"],
+ "@green-stack/styles": ["../../packages/@green-stack-core/styles/index.tsx"],
+ "@green-stack/styles/*": ["../../packages/@green-stack-core/styles/*"],
+ "@green-stack/forms/*": ["../../packages/@green-stack-core/forms/*"],
+ "@green-stack/context/*": ["../../packages/@green-stack-core/context/*"],
+ "@green-stack/scripts/*": ["../../packages/@green-stack-core/scripts/*"],
+ "@green-stack/svg": ["../../packages/@green-stack-core/svg/svg.primitives.tsx"],
+ "@db/models": ["../../packages/@db-driver/models.ts"],
+ "@db/mock": ["../../packages/@db-driver/drivers/mock.db.ts"]
+ }
+ },
+ "include": [
+ "../../apps/next/next-env.d.ts",
+ "../../packages/@green-stack-core/global.d.ts",
+ "../../features/@app-core/nativewind-env.d.ts",
+ "../../features/@app-core/appConfig.ts",
+ "**/*.ts",
+ "**/*.tsx"
+ ],
+ "exclude": [
+ "node_modules"
+ ],
+ "extends": "expo/tsconfig.base"
+}
diff --git a/features/@app-core/utils/calculateEfficiency.ts b/features/@app-core/utils/calculateEfficiency.ts
new file mode 100644
index 0000000..90e554d
--- /dev/null
+++ b/features/@app-core/utils/calculateEfficiency.ts
@@ -0,0 +1,223 @@
+import { roundDownTo } from '@green-stack/utils/numberUtils'
+import { FormScreenProps, IDENTITIES, TECH_KNOWLEDGE } from '../screens/FormsScreen.types'
+
+/* --- Constants ------------------------------------------------------------------------------- */
+
+export const oneDay = 8 // One day in work hours
+export const oneWeek = oneDay * 5 // One work week in hours
+
+export const annualWorkDays = 260 // Work days per year
+export const annualWorkHours = annualWorkDays * oneDay // Work hours per year
+
+/* --- calculateEfficiency() ------------------------------------------------------------------- */
+
+export const calculateEfficiency = (rawValues: FormScreenProps) => {
+ // Values
+ const values = FormScreenProps.applyDefaults(rawValues)
+ const { currentSetupHoursPerProject, pluginsToMerge, knownTech, identifiesWith } = values
+ const { excitingFeatures, platformsTargeted = 1, projectsPerYear = 1 } = values
+
+ // Flags
+ const isFullStackDev = identifiesWith === IDENTITIES.enum['full-product-dev']
+ const isFreelanceDev = identifiesWith === IDENTITIES.enum['freelance-app-dev']
+ const isStartupFounder = identifiesWith === IDENTITIES.enum['startup-founder']
+ const isIndieHacker = identifiesWith === IDENTITIES.enum['indiehacker']
+ const isStudioLead = identifiesWith === IDENTITIES.enum['studio-lead']
+
+ const isDev = isFullStackDev || isFreelanceDev || isIndieHacker || isStudioLead
+ const isProvider = isFreelanceDev || isStudioLead
+ const isStartup = isStartupFounder || isIndieHacker
+
+ const shipsWebOnly = platformsTargeted === 1
+ const shipsMobileOnly = platformsTargeted === 2
+ const shipsUniversal = platformsTargeted === 3
+
+ // -- Result Calculation --
+
+ // Starting point = 1 week of setup on average by default (editable)
+ let setupHoursPerProject = currentSetupHoursPerProject || oneWeek
+
+ // β¬ Calculate additional plugin hours saved based on plugins merged
+
+ let pluginHoursSaved = oneDay // Default to 1 day saved for other plugins
+ if (pluginsToMerge.includes('auth')) pluginHoursSaved += oneDay // Auth plugins
+ if (pluginsToMerge.includes('db')) pluginHoursSaved += 5 // DB plugins
+ if (pluginsToMerge.includes('mail')) pluginHoursSaved += oneDay // Mail plugins
+ if (pluginsToMerge.includes('notifications')) pluginHoursSaved += 5 // Notifications plugins
+ if (pluginsToMerge.includes('payments')) pluginHoursSaved += oneDay * 2 // Payments plugins
+ if (pluginsToMerge.includes('storage')) pluginHoursSaved += 4 // Storage plugins
+
+ // β¬ Add additional hours saved per project based on exciting features
+
+ const wantsUniversalStarter = excitingFeatures.includes('universal-starter')
+ const platformSetupHours = oneWeek * (platformsTargeted || 1)
+ setupHoursPerProject += wantsUniversalStarter ? platformSetupHours : oneWeek
+
+ if (excitingFeatures.includes('git-plugins')) setupHoursPerProject += pluginHoursSaved // Additional time saved
+ if (excitingFeatures.includes('stack-freedom')) setupHoursPerProject += oneDay // No time spent removing unknonw tech
+ if (excitingFeatures.includes('zod-query-toolkit')) setupHoursPerProject += 12 // Automating API typing and fetching
+ if (excitingFeatures.includes('generators-scripts')) setupHoursPerProject += oneDay // No more boilerplate code
+ if (excitingFeatures.includes('designed-for-copypaste')) setupHoursPerProject += 16 // Copy paste features from earlier projects
+ if (excitingFeatures.includes('universal-fs-routing')) setupHoursPerProject += oneDay // Universal automated routing + deeplinks
+
+ // β¬ Figure out delivery efficiency based on platforms targeted
+
+ let deliveryEfficiency = 1 // Default to Universal App Delivery
+ if (platformsTargeted === 2) deliveryEfficiency = 1 + 0.75 // From Mobile = 75% more efficient
+ if (platformsTargeted === 1) deliveryEfficiency = 1 + 1.5 // From Web = 150% more efficient
+
+ setupHoursPerProject = setupHoursPerProject * deliveryEfficiency
+
+ // β¬ Subtract the learning gap hours based on known tech
+
+ let learningGapHours = oneDay // 1 day for learning the universal starterkit and way of working
+ if (!knownTech.includes('typescript')) learningGapHours += oneDay * 2 // TS basics
+ if (!knownTech.includes('react')) learningGapHours += oneDay * 4 // React basics
+ if (!knownTech.includes('react-native')) learningGapHours += oneDay * 2 // RN basics
+ if (!knownTech.includes('expo')) learningGapHours += oneDay * 2 // Expo basics
+ if (!knownTech.includes('nextjs')) learningGapHours += oneDay * 3 // Next.js basics
+ if (!knownTech.includes('zod')) learningGapHours += oneDay / 2 // Zod basics
+ if (!knownTech.includes('react-query')) learningGapHours += oneDay // React Query basics
+ if (excitingFeatures.includes('git-plugins')) learningGapHours += 2 * pluginsToMerge.length // Plugin PR Reviews
+
+ // β¬ Add extra learning gap hours based on cumulative team knowledge gap
+
+ const numRequiredTech = Object.keys(TECH_KNOWLEDGE.entries).length
+ const numConceptsKnown = knownTech.length
+ const numConceptsToLearn = Math.max(numRequiredTech - numConceptsKnown, 0)
+ const cumulativeKnowledgeGapModifier = 1 + numConceptsToLearn * 0.15
+
+ learningGapHours = Math.max(1, learningGapHours * cumulativeKnowledgeGapModifier)
+
+ const learningGapDecimals = learningGapHours < (oneWeek * 2) ? 1 : 0
+
+ // β¬ Final efficiency calculation
+
+ const formatRelativeTime = (
+ hoursSaved = annualHoursSaved,
+ roundFn = roundDownTo,
+ decimals = 0,
+ ) => {
+ const daysSaved = roundFn(hoursSaved / 8, decimals)
+ const weeksSaved = roundFn(daysSaved / 5, decimals) // Exclude weekends
+ const monthsSaved = roundFn(weeksSaved / 4, decimals)
+ if (monthsSaved > 1) return `${monthsSaved} month${monthsSaved > 1 ? 's' : ''}`
+ if (weeksSaved >= 1.5) return `${weeksSaved} week${weeksSaved > 1 ? 's' : ''}`
+ if (daysSaved >= 1.5) return `${daysSaved} day${daysSaved > 1 ? 's' : ''}`
+ return `${hoursSaved} hour${hoursSaved > 1 ? 's' : ''}`
+ }
+
+ const estAnnualSetupHoursSaved = setupHoursPerProject * projectsPerYear
+ const annualHoursSaved = roundDownTo(estAnnualSetupHoursSaved - learningGapHours)
+
+ const currentEfficiencyMultiplier = !excitingFeatures.includes('universal-starter') ? 1 : deliveryEfficiency
+ const currentEfficiencyRate = roundDownTo(Math.max(1, currentEfficiencyMultiplier - currentEfficiencyMultiplier / 10))
+
+ const currentAnnualSetupHours = currentSetupHoursPerProject * projectsPerYear / currentEfficiencyRate
+ const annualAvgEfficiencyBoost = roundDownTo((annualHoursSaved / currentAnnualSetupHours) * 10)
+
+ const strAnnualSetupTimeSaved = formatRelativeTime(estAnnualSetupHoursSaved, roundDownTo)
+ const [strSetupTimeUnitsSaved, rawDownRoundedUnit] = strAnnualSetupTimeSaved.split(' ')
+ const numSetupTimeUnitsSaved = +strSetupTimeUnitsSaved
+
+ let annualSetupHoursSaved = numSetupTimeUnitsSaved // Hours
+ if (rawDownRoundedUnit.includes('day')) annualSetupHoursSaved = numSetupTimeUnitsSaved * oneDay
+ if (rawDownRoundedUnit.includes('week')) annualSetupHoursSaved = numSetupTimeUnitsSaved * oneWeek
+ if (rawDownRoundedUnit.includes('month')) annualSetupHoursSaved = numSetupTimeUnitsSaved * oneWeek * 4
+
+ const annualHoursValueProvided = annualWorkHours + annualSetupHoursSaved
+ const finalEfficiencyRate = roundDownTo(((annualHoursValueProvided / annualWorkHours) * 100) - 100)
+
+ // β¬ Determine benefits & breakdown data + highlights
+
+ const efficiencyComparison = Math.max(deliveryEfficiency * 100 - 100, finalEfficiencyRate)
+ const showValueDelivered = efficiencyComparison > 10 && annualHoursSaved > 0
+ const showEfficiencyBoost = efficiencyComparison > 10 && annualAvgEfficiencyBoost > 0
+ const showRepositioningBenefits = isProvider && efficiencyComparison > 34
+
+ // -- Wordings --
+
+ const projects = projectsPerYear > 1 ? 'projects' : 'project'
+
+ let identity:string = IDENTITIES.entries[identifiesWith!] || 'mystery developer'
+
+ if (shipsWebOnly && isFullStackDev) identity = 'Full-stack Web App Developer'
+ if (shipsMobileOnly && isFullStackDev) identity = 'Full-stack Mobile App Developer'
+ if (shipsUniversal && isFullStackDev) identity = 'Full-stack Universal App Developer'
+
+ if (shipsWebOnly && isFreelanceDev) identity = 'Freelance Web App Developer'
+ if (shipsMobileOnly && isFreelanceDev) identity = 'Freelance Mobile App Developer'
+ if (shipsUniversal && isFreelanceDev) identity = 'Freelance Universal App Developer'
+
+ if (isStudioLead) identity = 'Digital Product Studio'
+ if (isStartupFounder) identity = 'Startup Founder'
+ if (isIndieHacker) identity = 'Solo Indie Dev'
+
+ let benefitLevel = 'only slightly'
+ if (efficiencyComparison > 20) benefitLevel = 'moderately'
+ if (efficiencyComparison > 50) benefitLevel = 'significantly'
+ if (efficiencyComparison > 100) benefitLevel = 'immensely'
+
+ let beneficial = 'slight'
+ if (efficiencyComparison > 34) beneficial = 'somewhat significant'
+ if (efficiencyComparison > 50) beneficial = 'significant'
+ if (efficiencyComparison > 100) beneficial = 'immense'
+
+ let convincee = 'you or your devs'
+ if (isStartupFounder) convincee = 'your technical co-founder'
+ if (isIndieHacker) convincee = 'the dev in you'
+ if (isStudioLead) convincee = 'your dev team'
+ if (isFreelanceDev) convincee = `your client's dev team`
+
+ let handover = 'to other dev teams'
+ if (isProvider) handover = 'to your clients'
+ if (isStartup) handover = 'to potential acquirers'
+
+ // -- Results --
+
+ return {
+ isFullStackDev,
+ isFreelanceDev,
+ isStartupFounder,
+ isIndieHacker,
+ isStudioLead,
+ isDev,
+ isProvider,
+ isStartup,
+ shipsWebOnly,
+ shipsMobileOnly,
+ shipsUniversal,
+ setupHoursPerProject,
+ pluginHoursSaved,
+ wantsUniversalStarter,
+ platformSetupHours,
+ deliveryEfficiency,
+ learningGapHours,
+ numRequiredTech,
+ numConceptsKnown,
+ numConceptsToLearn,
+ cumulativeKnowledgeGapModifier,
+ learningGapDecimals,
+ formatRelativeTime,
+ estAnnualSetupHoursSaved,
+ annualHoursSaved,
+ currentEfficiencyMultiplier,
+ currentEfficiencyRate,
+ currentAnnualSetupHours,
+ annualAvgEfficiencyBoost,
+ strAnnualSetupTimeSaved,
+ numSetupTimeUnitsSaved,
+ annualSetupHoursSaved,
+ finalEfficiencyRate,
+ efficiencyComparison,
+ showValueDelivered,
+ showEfficiencyBoost,
+ showRepositioningBenefits,
+ projects,
+ identity,
+ benefitLevel,
+ beneficial,
+ convincee,
+ handover,
+ }
+}
diff --git a/features/@app-core/utils/server/metadata.ts b/features/@app-core/utils/server/metadata.ts
new file mode 100644
index 0000000..24e458d
--- /dev/null
+++ b/features/@app-core/utils/server/metadata.ts
@@ -0,0 +1,18 @@
+import { appConfig } from '@app/config'
+import type { Metadata as NextMetadata } from 'next/types'
+
+/** --- createMetadata() ----------------------------------------------------------------------- */
+/** -i- https://nextjs.org/docs/app/api-reference/functions/generate-metadata#metadata-fields */
+/** -i- Prefills some overwriteable metadata from your `@app/config` at `appConfig.ts` */
+export const createMetadata = (ctx: NextMetadata) => ({
+ title: ctx.title || appConfig.title || appConfig.openGraph?.title,
+ description: ctx.description || appConfig.description || appConfig.openGraph?.description,
+ openGraph: {
+ title: appConfig.title || appConfig.openGraph?.title,
+ description: appConfig.openGraph?.description,
+ url: appConfig.openGraph?.url,
+ siteName: appConfig.openGraph?.siteName,
+ ...ctx.openGraph,
+ },
+ ...ctx,
+})
diff --git a/features/app-core/appConfig.ts b/features/app-core/appConfig.ts
deleted file mode 100644
index 9b645cb..0000000
--- a/features/app-core/appConfig.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import Constants from 'expo-constants'
-import { Platform } from 'react-native'
-
-export const expoDebuggerHost = Constants?.expoGoConfig?.debuggerHost || Constants.manifest2?.extra?.expoGo?.debuggerHost // prettier-ignore
-export const localURL = expoDebuggerHost?.split?.(':').shift()
-
-export const fallbackBaseURL = localURL ? `http://${localURL}:3000` : ''
-
-/** --- appConfig ------------------------------------------------------------------------------ */
-/** -i- App config variables powered by env vars universally, and including some expo contants config on mobile */
-export const appConfig = {
- baseURL: process.env.NEXT_PUBLIC_BASE_URL || process.env.EXPO_PUBLIC_BASE_URL || `${fallbackBaseURL}`, // prettier-ignore
- backendURL: process.env.NEXT_PUBLIC_BACKEND_URL || process.env.EXPO_PUBLIC_BACKEND_URL || `${fallbackBaseURL}`, // prettier-ignore
- apiURL: process.env.NEXT_PUBLIC_API_URL || process.env.EXPO_PUBLIC_API_URL || `${fallbackBaseURL}/api`, // prettier-ignore
- graphURL: process.env.NEXT_PUBLIC_GRAPH_URL || process.env.EXPO_PUBLIC_GRAPH_URL || `${fallbackBaseURL}/api/graphql`, // prettier-ignore
-} as const
-
-/* --- Debug ----------------------------------------------------------------------------------- */
-
-if (Platform.OS !== 'web') {
- if (appConfig.baseURL === '') console.warn('appConfig.baseURL is empty, check your environment variables')
-}
diff --git a/features/app-core/navigation/Link.tsx b/features/app-core/navigation/Link.tsx
deleted file mode 100644
index 6f36026..0000000
--- a/features/app-core/navigation/Link.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { Link as ExpoLink } from 'expo-router'
-import type { UniversalLinkProps } from './Link.types'
-
-/* ---
- {children}
-
- )
-}
-
diff --git a/features/app-core/navigation/Link.web.tsx b/features/app-core/navigation/Link.web.tsx
deleted file mode 100644
index 5a0c8a6..0000000
--- a/features/app-core/navigation/Link.web.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import NextLink from 'next/link'
-import type { ComponentProps } from 'react'
-import type { UniversalLinkProps } from './Link.types'
-
-/* --- ['style']}
- onClick={onPress}
- target={target}
- replace={replace}
- scroll={scroll}
- shallow={shallow}
- passHref={passHref}
- prefetch={prefetch}
- locale={locale}
- as={as}
- >
- {children}
-
- )
-}
diff --git a/features/app-core/package.json b/features/app-core/package.json
deleted file mode 100644
index e04b339..0000000
--- a/features/app-core/package.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
- "name": "@app/core",
- "version": "1.0.0",
- "private": true,
- "dependencies": {},
- "devDependencies": {
- "typescript": "5.3.3"
- },
- "scripts": {}
-}
diff --git a/features/app-core/screens/HomeScreen.tsx b/features/app-core/screens/HomeScreen.tsx
deleted file mode 100644
index 7db3255..0000000
--- a/features/app-core/screens/HomeScreen.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from 'react'
-import { StyleSheet, Text, View } from 'react-native'
-import { Link } from '../navigation/Link'
-import { Image } from '../components/Image'
-
-/* ---
- Expo + Next.js app routing π
- Open HomeScreen.tsx in features/app-core/screens to start working on your app
-
- )
-}
-
-/* --- Styles ---------------------------------------------------------------------------------- */
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- justifyContent: 'center',
- alignItems: 'center',
- },
- title: {
- fontWeight: 'bold',
- fontSize: 16,
- textAlign: 'center',
- },
- subtitle: {
- marginTop: 8,
- fontSize: 16,
- textAlign: 'center',
- },
- link: {
- marginTop: 16,
- fontSize: 16,
- color: 'blue',
- textAlign: 'center',
- textDecorationLine: 'underline',
- },
-})
-
-/* --- Exports --------------------------------------------------------------------------------- */
-
-export default HomeScreen
diff --git a/features/app-core/screens/ImagesScreen.tsx b/features/app-core/screens/ImagesScreen.tsx
deleted file mode 100644
index 81bd68e..0000000
--- a/features/app-core/screens/ImagesScreen.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-import React from 'react'
-import { StyleSheet, Text, View } from 'react-native'
-import { Link } from '../navigation/Link'
-import { Image } from '../components/Image'
-
-/* ---
- src=static-require | width: 60 | height: 60
- {/* - 2 - */}
- src=external-url | width: 60 | height: 60
- {/* - 3 - */}
-
-
- wrapper=50x80, relative | fill=true
- {/* - 4 - */}
-
-
- wrapper=80x60, relative | fill | contentFit=contain
-
- )
-}
-
-/* --- Styles ---------------------------------------------------------------------------------- */
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- justifyContent: 'center',
- alignItems: 'center',
- },
- backButton: {
- position: 'absolute',
- top: 16,
- left: 16,
- },
- subtitle: {
- marginTop: 8,
- marginBottom: 16,
- fontSize: 16,
- textAlign: 'center',
- },
- link: {
- marginTop: 16,
- fontSize: 16,
- color: 'blue',
- textAlign: 'center',
- textDecorationLine: 'underline',
- },
-})
-
-/* --- Exports --------------------------------------------------------------------------------- */
-
-export default ImagesScreen
diff --git a/features/app-core/screens/SlugScreen.tsx b/features/app-core/screens/SlugScreen.tsx
deleted file mode 100644
index c0184ec..0000000
--- a/features/app-core/screens/SlugScreen.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import React from 'react'
-import { StyleSheet, Text, View } from 'react-native'
-import { useRouteParams } from '../navigation/useRouteParams'
-import { Link } from '../navigation/Link'
-import { useRouter } from '../navigation/useRouter'
-
-/* ---
- {showBackButton && (
-
- {`< Back`}
-
- )}
-
- Page slug: {slug}
- {!!count && ` | count: ${count}`}
-
- Need a more robust, Fully-Stacked, Full-Product, Universal App Setup?
- push('/subpages/push')}>
- {`router.push()`}
-
- navigate('/subpages/navigate')}>
- {`router.navigate()`}
-
- replace('/subpages/replace')}>
- {`router.replace()`}
-
- setParams({ count: `${+count + 1}` })}>
- {`router.setParams()`}
-
-
- )
-}
-
-/* --- Styles ---------------------------------------------------------------------------------- */
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- justifyContent: 'center',
- alignItems: 'center',
- },
- backButton: {
- position: 'absolute',
- top: 16,
- left: 16,
- },
- title: {
- fontWeight: 'bold',
- fontSize: 16,
- textAlign: 'center',
- },
- subtitle: {
- marginTop: 8,
- fontSize: 16,
- textAlign: 'center',
- },
- link: {
- marginTop: 16,
- fontSize: 16,
- color: 'blue',
- textAlign: 'center',
- textDecorationLine: 'underline',
- },
-})
-
-/* --- Exports --------------------------------------------------------------------------------- */
-
-export default SlugScreen
diff --git a/features/app-core/screens/UniversalAppProviders.tsx b/features/app-core/screens/UniversalAppProviders.tsx
deleted file mode 100644
index 770f906..0000000
--- a/features/app-core/screens/UniversalAppProviders.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-'use client'
-import React from 'react'
-
-// -i- This is a regular react client component
-// -i- Use this file for adding universal app providers
-// -i- It will be rendered by 'apps/expo' on mobile from the 'ExpoRootLayout' component
-// -i- It will also be rendered by 'apps/next' on web from the 'NextClientRootLayout' component
-
-/* --- Types ----------------------------------------------------------------------------------- */
-
-type UniversalAppProvidersProps = {
- children: React.ReactNode
-}
-
-/* --- >>
diff --git a/packages/@db-driver/driver.signature.ts b/packages/@db-driver/driver.signature.ts
new file mode 100644
index 0000000..4a49d26
--- /dev/null
+++ b/packages/@db-driver/driver.signature.ts
@@ -0,0 +1,21 @@
+import { z } from '@green-stack/schemas'
+
+/* --- DB Driver Shape ------------------------------------------------------------------------- */
+
+// -i- Validation that a given module is a DB Driver, by checking for the presence of specific properties
+export const DbDriverShape = z.object({
+
+ // -i- The ability to create a database model / collection from a Zod schema
+ createSchemaModel: z.function().args(
+ z.instanceof(z.ZodObject),
+ z.string().optional(),
+ ),
+
+ // -i- The base DB entity class that all models can extend from
+ DBEntity: z.instanceof(z.ZodObject),
+
+})
+
+/* --- Types ----------------------------------------------------------------------------------- */
+
+export type DbDriverShape = z.infer
diff --git a/packages/@db-driver/drivers/mock.db.ts b/packages/@db-driver/drivers/mock.db.ts
new file mode 100644
index 0000000..34cb7f2
--- /dev/null
+++ b/packages/@db-driver/drivers/mock.db.ts
@@ -0,0 +1,13 @@
+import { validateDbDriver } from '@db/driver/utils/validateDbDriver.db.ts'
+
+/* --- Import Driver Methods ------------------------------------------------------------------- */
+
+import { createSchemaModel } from '../utils/createSchemaModel.mock'
+import { MockDBEntity } from '../schemas/MockEntity.schema.ts'
+
+/* --- Driver Validation ----------------------------------------------------------------------- */
+
+export const driver = validateDbDriver({
+ createSchemaModel,
+ DBEntity: MockDBEntity,
+})
diff --git a/packages/@db-driver/index.ts b/packages/@db-driver/index.ts
new file mode 100644
index 0000000..bc354da
--- /dev/null
+++ b/packages/@db-driver/index.ts
@@ -0,0 +1,20 @@
+import { dbDrivers } from '@app/registries/drivers/db.drivers.generated'
+import { appConfig } from '@app/config'
+
+/* --- Determine Main DB driver ---------------------------------------------------------------- */
+
+const dbDriver = dbDrivers[appConfig.drivers.db]
+if (!dbDriver) throw new Error(
+ `No DB driver found for key "${appConfig.drivers.db}". ` +
+ `Make sure the driver is installed and the driver key is correct.`,
+)
+
+/* --- Re-export Driver Resources -------------------------------------------------------------- */
+
+export const createSchemaModel = dbDriver['createSchemaModel']
+export const DBEntity = dbDriver['DBEntity']
+
+/* --- Export Driver Helpers ------------------------------------------------------------------- */
+
+export { validateDbDriver } from './utils/validateDbDriver.db.ts'
+export { validateDriverModel } from './utils/validateDriverModel.db.ts'
diff --git a/packages/@db-driver/models.ts b/packages/@db-driver/models.ts
new file mode 100644
index 0000000..97936fa
--- /dev/null
+++ b/packages/@db-driver/models.ts
@@ -0,0 +1,3 @@
+/* --- Re-export Driver Models ----------------------------------------------------------------- */
+
+export * from '@app/registries/models.generated'
diff --git a/packages/@db-driver/package.json b/packages/@db-driver/package.json
new file mode 100644
index 0000000..c6a453b
--- /dev/null
+++ b/packages/@db-driver/package.json
@@ -0,0 +1,16 @@
+{
+ "name": "@db/driver",
+ "version": "0.0.1",
+ "description": "Database Driver & types to create DB drivers with ease. Falls back to mock memory DB if no driver is provided.",
+ "dependencies": {},
+ "scripts": {
+ "collect:models": "npm -w @green-stack/core run run:script ../../packages/@db-driver/scripts/collect-models.ts",
+ "collect:drivers": "npm -w @green-stack/core run run:script ../../packages/@green-stack-core/scripts/collect-drivers.ts"
+ },
+ "stackConfig": {
+ "relatedWorkspaces": [
+ "@app/registries"
+ ],
+ "requiredEnvVars": []
+ }
+}
\ No newline at end of file
diff --git a/packages/@db-driver/schemas/MockEntity.schema.ts b/packages/@db-driver/schemas/MockEntity.schema.ts
new file mode 100644
index 0000000..a51d514
--- /dev/null
+++ b/packages/@db-driver/schemas/MockEntity.schema.ts
@@ -0,0 +1,30 @@
+// @ts-ignore
+import { z, schema } from '@green-stack/schemas'
+
+/* --- Why? ------------------------------------------------------------------------------------ */
+
+// -i- This is an Expo decoy copy until we figure out why `uuid` doesn't work in Expo
+// -i- The real one is in `MockEntity.schema.web.ts` in the same folder
+
+/* --- Schema ---------------------------------------------------------------------------------- */
+
+export const MockDBEntity = schema('MockDBEntity', {
+ id: z
+ .string()
+ .uuid()
+ .describe('Provided or auto-generated UUID (V4)'),
+ createdAt: z
+ .date()
+ .default(() => new Date())
+ .describe('Creation date'),
+ modifiedAt: z
+ .date()
+ .default(() => new Date())
+ .describe('Last modified date'),
+})
+
+/* --- Types ----------------------------------------------------------------------------------- */
+
+export type MockDBEntity<
+ Z extends z.ZodObject = typeof MockDBEntity
+> = Prettify>
diff --git a/packages/@db-driver/schemas/MockEntity.schema.web.ts b/packages/@db-driver/schemas/MockEntity.schema.web.ts
new file mode 100644
index 0000000..981b3f9
--- /dev/null
+++ b/packages/@db-driver/schemas/MockEntity.schema.web.ts
@@ -0,0 +1,27 @@
+// @ts-ignore
+import { v4 as uuidV4 } from 'uuid'
+import { z, schema } from '@green-stack/schemas'
+
+/* --- Schema ---------------------------------------------------------------------------------- */
+
+export const MockDBEntity = schema('MockDBEntity', {
+ id: z
+ .string()
+ .uuid()
+ .default(() => uuidV4())
+ .describe('Provided or auto-generated UUID (V4)'),
+ createdAt: z
+ .date()
+ .default(() => new Date())
+ .describe('Creation date'),
+ modifiedAt: z
+ .date()
+ .default(() => new Date())
+ .describe('Last modified date'),
+})
+
+/* --- Types ----------------------------------------------------------------------------------- */
+
+export type MockDBEntity<
+ Z extends z.ZodObject = typeof MockDBEntity
+> = Prettify>
diff --git a/packages/@db-driver/scripts/collect-models.ts b/packages/@db-driver/scripts/collect-models.ts
new file mode 100644
index 0000000..0ad4ff3
--- /dev/null
+++ b/packages/@db-driver/scripts/collect-models.ts
@@ -0,0 +1,101 @@
+import fs from 'fs'
+import { addSetItem } from '@green-stack/utils/arrayUtils'
+import { parseWorkspaces, globRel, createDivider } from '@green-stack/scripts/helpers/scriptUtils'
+
+/* --- Types ----------------------------------------------------------------------------------- */
+
+type ModelRegistry = {
+ modelImportLines: string[],
+ modelAliasEntryLines: string[],
+}
+
+/** --- createModelsRegistryContent() ---------------------------------------------------------- */
+/** -i- Create the file contents for the model registry */
+export const createModelsRegistryContent = (ctx: {
+ modelImportLines: string[],
+ modelAliasEntryLines: string[],
+}) => [
+
+ `// -i- Auto generated with "npx turbo run @db/driver#collect-models"`,
+ `${ctx.modelImportLines.join('\n')}\n`,
+
+ `${createDivider('Reexports')}\n`,
+
+ `export {`,
+ ctx.modelAliasEntryLines.join(',\n'),
+ `}\n`,
+
+ `${createDivider('Models')}\n`,
+
+ `const dbModels = {`,
+ ctx.modelAliasEntryLines.join(',\n'),
+ `}\n`,
+
+ `${createDivider('Exports')}\n`,
+
+ `export type DB_MODEL = keyof typeof dbModels\n`,
+
+ `export default dbModels\n`,
+
+].join('\n')
+
+/* --- collect-models -------------------------------------------------------------------------- */
+
+const collectModels = () => {
+ try {
+ // Get all model file paths in /features/ & /packages/ workspaces
+ const featureModelPaths = globRel('../../features/**/models/*.model.ts')
+ const packageModelPaths = globRel('../../packages/**/models/*.model.ts')
+ const allModelPaths = [...featureModelPaths, ...packageModelPaths]
+
+ // Figure out import paths from each workspace
+ const { workspaceImports } = parseWorkspaces()
+
+ // Build overview of lines to build model registry files with
+ const modelRegistry = allModelPaths.reduce((acc, modelFilePath) => {
+
+ // Skip if not a valid model
+ const modelFileContents = fs.readFileSync(modelFilePath, 'utf-8')
+ const isValidModel = modelFileContents.includes('export const driverModel = validateDriverModel(')
+ if (!isValidModel) return acc
+
+ // Figure out model workspace from filename
+ const workspaceEntry = Object.entries(workspaceImports).find(([pathKey]) => {
+ return modelFilePath.includes(pathKey)
+ })
+
+ // Figure out model name from filename
+ const [workspacePath, modelWorkspace] = workspaceEntry!
+ const innerModelFilePath = modelFilePath.split(workspacePath)[1]
+ const modelFilename = innerModelFilePath.replace('/models/', '')
+ const modelFileModuleName = modelFilename.replace('.tsx', '').replace('.ts', '')
+ const [modelName] = modelFileModuleName.split('.')
+ const modelImportPath = `${modelWorkspace}/models/${modelFilename}`
+ const modelImportLine = `import { driverModel as ${modelName} } from '${modelImportPath}'` // prettier-ignore
+ const modelModuleAliasLine = ` ${modelName}`
+
+ // Add to the accumulator
+ return {
+ modelImportLines: addSetItem(acc.modelImportLines, modelImportLine),
+ modelAliasEntryLines: addSetItem(acc.modelAliasEntryLines, modelModuleAliasLine),
+ }
+
+ }, {} as ModelRegistry)
+
+ // Build models.generated.ts file
+ const modelsFileContent = createModelsRegistryContent({
+ modelImportLines: modelRegistry.modelImportLines,
+ modelAliasEntryLines: modelRegistry.modelAliasEntryLines,
+ })
+ fs.writeFileSync('../../packages/@registries/models.generated.ts', modelsFileContent)
+
+ } catch (err) {
+ console.log(err)
+ console.error(err)
+ process.exit(1)
+ }
+}
+
+/* --- init ------------------------------------------------------------------------------------ */
+
+collectModels()
diff --git a/packages/@db-driver/tsconfig.json b/packages/@db-driver/tsconfig.json
new file mode 100644
index 0000000..2661269
--- /dev/null
+++ b/packages/@db-driver/tsconfig.json
@@ -0,0 +1,14 @@
+{
+ "extends": "@app/core/tsconfig",
+ "include": [
+ "**/*.ts",
+ "**/*.tsx",
+ "../../apps/next/next-env.d.ts",
+ "../../packages/@green-stack-core/global.d.ts",
+ "../../features/@app-core/nativewind-env.d.ts",
+ "../../features/@app-core/appConfig.ts",
+ "../../features/**/*.ts",
+ "../../features/**/*.tsx",
+ ],
+ "exclude": ["node_modules"]
+}
diff --git a/packages/@db-driver/utils/createSchemaModel.mock.test.ts b/packages/@db-driver/utils/createSchemaModel.mock.test.ts
new file mode 100644
index 0000000..c4b64d4
--- /dev/null
+++ b/packages/@db-driver/utils/createSchemaModel.mock.test.ts
@@ -0,0 +1,524 @@
+// @ts-ignore
+import { test, expect } from 'bun:test'
+import { createSchemaModel } from './createSchemaModel.mock'
+import { z, schema } from '@green-stack/schemas'
+
+/* --- Schemas --------------------------------------------------------------------------------- */
+
+const UserSchema = schema('User', {
+ id: z.string().uuid(),
+ name: z.string(),
+ email: z.string().email(),
+ age: z.number().int().optional(),
+ meta: schema('UserMeta', {
+ version: z.number().int().optional(),
+ }).optional(),
+})
+
+/* --- Tests ----------------------------------------------------------------------------------- */
+
+test('createSchemaModel() creates a new schema model in the memory DB', async () => {
+ const UserModel = createSchemaModel(UserSchema)
+ // Check that the UserModel is created with the correct methods
+ expect(UserModel).toBeDefined()
+ expect(UserModel.insertOne).toBeDefined()
+ expect(UserModel.insertMany).toBeDefined()
+ expect(UserModel.findOne).toBeDefined()
+ expect(UserModel.findMany).toBeDefined()
+ expect(UserModel.updateOne).toBeDefined()
+ expect(UserModel.updateMany).toBeDefined()
+ expect(UserModel.deleteOne).toBeDefined()
+ expect(UserModel.deleteMany).toBeDefined()
+ expect(UserModel.insertOne).toBeInstanceOf(Function)
+ expect(UserModel.insertMany).toBeInstanceOf(Function)
+ expect(UserModel.findOne).toBeInstanceOf(Function)
+ expect(UserModel.findMany).toBeInstanceOf(Function)
+ expect(UserModel.updateOne).toBeInstanceOf(Function)
+ expect(UserModel.updateMany).toBeInstanceOf(Function)
+ expect(UserModel.deleteOne).toBeInstanceOf(Function)
+ expect(UserModel.deleteMany).toBeInstanceOf(Function)
+})
+
+test('createSchemaModel() creates a new schema model with DB driver methods attached', async () => {
+ const UserModel = createSchemaModel(UserSchema)
+ // Check that the UserModel has the correct methods attached
+ expect(UserModel.driver).toBeDefined()
+ expect(UserModel.driver.insertOne).toBeDefined()
+ expect(UserModel.driver.insertMany).toBeDefined()
+ expect(UserModel.driver.findOne).toBeDefined()
+ expect(UserModel.driver.findMany).toBeDefined()
+ expect(UserModel.driver.updateOne).toBeDefined()
+ expect(UserModel.driver.updateMany).toBeDefined()
+ expect(UserModel.driver.deleteOne).toBeDefined()
+ expect(UserModel.driver.deleteMany).toBeDefined()
+ expect(UserModel.driver.insertOne).toBeInstanceOf(Function)
+ expect(UserModel.driver.insertMany).toBeInstanceOf(Function)
+ expect(UserModel.driver.findOne).toBeInstanceOf(Function)
+ expect(UserModel.driver.findMany).toBeInstanceOf(Function)
+ expect(UserModel.driver.updateOne).toBeInstanceOf(Function)
+ expect(UserModel.driver.updateMany).toBeInstanceOf(Function)
+ expect(UserModel.driver.deleteOne).toBeInstanceOf(Function)
+ expect(UserModel.driver.deleteMany).toBeInstanceOf(Function)
+})
+
+test('Model.driver.insertOne() inserts a new record in memory', async () => {
+ const UserModel = createSchemaModel(UserSchema, 'UserInsertOne1')
+ const newUser = await UserModel.driver.insertOne({
+ name: 'Thorr',
+ email: 'thorr@codinsonn.dev',
+ })
+ expect(newUser).toBeDefined()
+ expect(newUser.id).toBeDefined()
+ expect(newUser.name).toBe('Thorr')
+ expect(newUser.email).toBe('thorr@codinsonn.dev')
+})
+
+test('Model.driver.insertOne() throws if inserted record does not match schema', async () => {
+ const UserModel = createSchemaModel(UserSchema, 'UserInsertOne2')
+ // Check that we throw an error when inserting a record with invalid data
+ await expect(UserModel.driver.insertOne({})).rejects.toThrow() // Missing required fields
+ await expect(UserModel.driver.insertOne({ name: 'Thorr' })).rejects.toThrow() // Missing required field email
+ await expect(UserModel.driver.insertOne({ name: 'Thorr', email: '' })).rejects.toThrow() // Missing email
+ await expect(UserModel.driver.insertOne({ name: 'Thorr', email: 'thorr@codinsonn' })).rejects.toThrow() // Invalid email
+})
+
+test('Model.driver.insertMany() inserts multiple records in memory', async () => {
+ const UserModel = createSchemaModel(UserSchema, 'UserInsertMany1')
+ const newUsers = await UserModel.driver.insertMany([
+ {
+ name: 'Thorr',
+ email: 'thorr@codinsonn.dev',
+ },
+ {
+ name: 'Thorr',
+ email: 'thorr@fullproduct.dev',
+ },
+ ])
+ // Check that we can insert multiple records
+ expect(newUsers).toBeDefined()
+ expect(newUsers).toHaveLength(2)
+ expect(newUsers[0].id).toBeDefined()
+ expect(newUsers[0].name).toBe('Thorr')
+ expect(newUsers[1].id).toBeDefined()
+ expect(newUsers[1].name).toBe('Thorr')
+ const newUsersResults = JSON.stringify(newUsers)
+ expect(newUsersResults).toContain('thorr@codinsonn.dev')
+ expect(newUsersResults).toContain('thorr@fullproduct.dev')
+})
+
+test('Model.driver.insertMany() throws if inserted records do not match schema', async () => {
+ const UserModel = createSchemaModel(UserSchema, 'UserInsertMany2')
+ // Check that we throw an error when inserting records with invalid data
+ await expect(UserModel.driver.insertMany([{}])).rejects.toThrow() // Missing required fields
+ await expect(UserModel.driver.insertMany([{ name: 'Thorr' }])).rejects.toThrow() // Missing required field email
+ await expect(UserModel.driver.insertMany([{ name: 'Thorr', email: '' }])).rejects.toThrow() // Missing email
+ await expect(UserModel.driver.insertMany([{ name: 'Thorr', email: 'thorr@codinsonn' }])).rejects.toThrow() // Invalid email
+})
+
+test('Model.driver.findOne() finds a record stored in memory', async () => {
+ const UserModel = createSchemaModel(UserSchema, 'UserFindOne1')
+ const newUser = await UserModel.driver.insertOne({
+ name: 'Thorr',
+ email: 'thorr@codinsonn.dev',
+ })
+ // Check that we can find the record by id
+ const foundById = await UserModel.driver.findOne({ id: newUser.id })
+ expect(foundById).toBeDefined()
+ expect(foundById.id).toBe(newUser.id)
+ expect(foundById.name).toBe('Thorr')
+ expect(foundById.email).toBe('thorr@codinsonn.dev')
+ // Check that we can find the record by name
+ const foundByName = await UserModel.driver.findOne({ name: 'Thorr' })
+ expect(foundByName).toBeDefined()
+ expect(foundByName.id).toBe(newUser.id)
+ expect(foundByName.name).toBe('Thorr')
+ expect(foundById.email).toBe('thorr@codinsonn.dev')
+ // Check that we can find the record by email
+ const foundByEmail = await UserModel.driver.findOne({ email: 'thorr@codinsonn.dev' })
+ expect(foundByEmail).toBeDefined()
+ expect(foundByEmail.id).toBe(newUser.id)
+ expect(foundByEmail.name).toBe('Thorr')
+ expect(foundById.email).toBe('thorr@codinsonn.dev')
+ // Check that we return undefined when no record is found
+ const notFound = await UserModel.driver.findOne({ id: '123' })
+ expect(notFound).toBeUndefined()
+})
+
+test('Model.driver.findMany() finds multiple records stored in memory', async () => {
+ const UserModel = createSchemaModel(UserSchema, 'UserFindMany1')
+ const newUsers = await UserModel.driver.insertMany([
+ {
+ name: 'Thorr',
+ email: 'thorr@codinsonn.dev',
+ },
+ {
+ name: 'Thorr',
+ email: 'thorr@fullproduct.dev',
+ },
+ ])
+ // Check that we can find multiple records by name
+ const foundByName = await UserModel.driver.findMany({ name: 'Thorr' })
+ expect(foundByName).toBeDefined()
+ expect(foundByName).toHaveLength(2)
+ expect(foundByName[0].name).toBe('Thorr')
+ expect(foundByName[1].name).toBe('Thorr')
+ const foundByNameResults = JSON.stringify(foundByName)
+ expect(foundByNameResults).toContain('thorr@codinsonn.dev')
+ expect(foundByNameResults).toContain('thorr@fullproduct.dev')
+})
+
+test('Model.driver.updateOne() updates a record stored in memory', async () => {
+ const UserModel = createSchemaModel(UserSchema, 'UserUpdateOne1')
+ const newUser = await UserModel.driver.insertOne({
+ name: 'Thorr',
+ email: 'thorr@codinsonn.dev',
+ })
+ // Update the record
+ const query = { id: newUser.id }
+ const updatedUser = await UserModel.driver.updateOne(query, { email: 'thorr@fullproduct.dev' })
+ expect(updatedUser).toBeDefined()
+ expect(updatedUser.id).toBe(newUser.id)
+ expect(updatedUser.name).toBe('Thorr')
+ expect(updatedUser.email).toBe('thorr@fullproduct.dev')
+})
+
+test('Model.driver.updateOne() with errorOnUnmatched: true throws if updated record does not match schema', async () => {
+ const UserModel = createSchemaModel(UserSchema, 'UserUpdateOne2')
+ const newUser = await UserModel.driver.insertOne({
+ name: 'Thorr',
+ email: 'thorr@codinsonn.dev',
+ })
+ // Check that we dont throw errors when calling .updateOne() valid data
+ await expect(() => UserModel.driver.updateOne({ id: newUser.id }, {})).not.toThrow() // Should be fine
+ await expect(() => UserModel.driver.updateOne({ id: newUser.id }, { name: 'Thor' })).not.toThrow() // Missing required field email
+ // @ts-ignore
+ await expect(() => UserModel.driver.updateOne({ id: newUser.id }, { id: 'should-be-immutable' }, true)).toThrow()
+ // Check that we throw an error when updating a record with invalid data
+ await expect(() => UserModel.driver.updateOne({ id: newUser.id }, { name: undefined }, true)).toThrow() // Not nullable or optional
+ await expect(() => UserModel.driver.updateOne({ id: newUser.id }, { name: 'Thorr', email: '' }, true)).toThrow() // Missing email
+ await expect(() => UserModel.driver.updateOne({ id: newUser.id }, { name: 'Thorr', email: 'thorr@codinsonn' }, true)).toThrow() // Invalid email
+ // Check that we don't throw an error when updating a record that doesn't exist
+ await expect(() => UserModel.driver.updateOne({ id: '' }, { name: 'Thorr' })).not.toThrow()
+})
+
+test('Model.driver.updateMany() updates multiple records stored in memory', async () => {
+ const UserModel = createSchemaModel(UserSchema, 'UserUpdateMany1')
+ const newUsers = await UserModel.driver.insertMany([
+ {
+ name: 'Thorr',
+ email: 'thorr@codinsonn.dev',
+ },
+ {
+ name: 'Thorr',
+ email: 'thorr@fullproduct.dev',
+ },
+ ])
+ // Check that we can update multiple records
+ const query = { name: 'Thorr' }
+ const updatedUsers = await UserModel.driver.updateMany(query, { name: 'Thor' })
+ expect(updatedUsers).toBeDefined()
+ expect(updatedUsers).toHaveLength(2)
+ expect(updatedUsers[0].name).toBe('Thor')
+ expect(updatedUsers[1].name).toBe('Thor')
+})
+
+test('Model.driver.updateMany() with errorOnUnmatched: true throws if updated records do not match schema', async () => {
+ const UserModel = createSchemaModel(UserSchema, 'UserUpdateMany2')
+ const newUsers = await UserModel.driver.insertMany([
+ {
+ name: 'Thorr',
+ email: 'thorr@codinsonn.dev',
+ },
+ {
+ name: 'Thorr',
+ email: 'thorr@fullproduct.dev',
+ },
+ ])
+ // Check that we throw an error when updating records with invalid data
+ await expect(() => UserModel.driver.updateMany({ name: 'Thorr' }, { name: undefined }, true)).toThrow() // Not nullable or optional
+ await expect(() => UserModel.driver.updateMany({ name: 'Thorr' }, { name: 'Thorr', email: '' }, true)).toThrow() // Missing email
+ // @ts-ignore
+ await expect(() => UserModel.driver.updateMany({ name: 'Thorr' }, { id: 'should-be-immutable' }, true)).toThrow()
+ // Check that we don't throw errors when calling .updateMany() with valid data
+ await expect(() => UserModel.driver.updateMany({}, {})).not.toThrow() // Should be fine
+ await expect(() => UserModel.driver.updateMany({ name: 'Thorr' }, { name: 'Thor' })).not.toThrow() // Should be fine
+ // Check that we don't throw an error when updating records that don't exist
+ await expect(() => UserModel.driver.updateMany({ email: '' }, { name: 'Thorr' })).not.toThrow()
+})
+
+test('Model.driver.upsertOne() inserts a new record if it does not exist', async () => {
+ const UserModel = createSchemaModel(UserSchema, 'UserUpsertOne1')
+ // Check that we can insert a new record
+ const newUser = await UserModel.driver.upsertOne({
+ name: 'Thorr',
+ }, {
+ name: 'Thorr',
+ email: 'thorr@codinsonn.dev',
+ })
+ // Check that the record was inserted
+ expect(newUser).toBeDefined()
+ expect(newUser.id).toBeDefined()
+ expect(newUser.name).toBe('Thorr')
+ expect(newUser.email).toBe('thorr@codinsonn.dev')
+ // Check that we can find the record by id
+ const foundById = await UserModel.driver.findOne({ id: newUser.id })
+ expect(foundById).toBeDefined()
+ expect(foundById.id).toBe(newUser.id)
+ expect(foundById.name).toBe('Thorr')
+ expect(foundById.email).toBe('thorr@codinsonn.dev')
+})
+
+test('Model.driver.upsertOne() updates an existing record if it exists', async () => {
+ const UserModel = createSchemaModel(UserSchema, 'UserUpsertOne2')
+ const onlyUser = await UserModel.driver.insertOne({
+ name: 'Thorr',
+ email: 'thorr@codinsonn.dev',
+ })
+ // Check that we can update an existing record
+ const updatedUser = await UserModel.driver.upsertOne({
+ name: 'Thorr',
+ }, {
+ name: 'Thorr',
+ email: 'thorr@fullproduct.dev',
+ })
+ // Check that the record was updated
+ expect(updatedUser).toBeDefined()
+ expect(updatedUser.id).toBe(onlyUser.id)
+ expect(updatedUser.name).toBe('Thorr')
+ expect(updatedUser.email).toBe('thorr@fullproduct.dev')
+ // Check that we can find the record by id
+ const foundById = await UserModel.driver.findOne({ id: onlyUser.id })
+ expect(foundById).toBeDefined()
+ expect(foundById.id).toBe(onlyUser.id)
+ expect(foundById.name).toBe('Thorr')
+ expect(foundById.email).toBe('thorr@fullproduct.dev')
+ // Check that we can no longer find the record by the old email
+ const notFoundByEmail = await UserModel.driver.findOne({ email: 'thorr@codinsonn.dev' })
+ expect(notFoundByEmail).toBeUndefined()
+})
+
+test('Model.driver.deleteOne() deletes a record stored in memory', async () => {
+ const UserModel = createSchemaModel(UserSchema, 'UserDeleteOne1')
+ const newUsers = await UserModel.driver.insertMany([
+ {
+ name: 'Thorr',
+ email: 'thorr@codinsonn.dev',
+ },
+ {
+ name: 'Thorr',
+ email: 'thorr@fullproduct.dev',
+ },
+ ])
+ // Check that we return the deleted record
+ const deletedUser = await UserModel.driver.deleteOne({ email: 'thorr@codinsonn.dev' })
+ expect(deletedUser).toBeDefined()
+ expect(deletedUser.id).toBeDefined()
+ expect(deletedUser.name).toBe('Thorr')
+ expect(deletedUser.email).toBe('thorr@codinsonn.dev')
+ // Check that the record is no longer in the DB
+ const foundByEmail = await UserModel.driver.findOne({ email: 'thorr@codinsonn.dev' })
+ expect(foundByEmail).toBeUndefined()
+ const foundMany = await UserModel.driver.findMany({ name: 'Thorr' })
+ expect(foundMany).toBeDefined()
+ expect(foundMany).toHaveLength(1)
+ // Check that we don't throw an error when attempting to delete a record that doesn't exist
+ await expect(() => UserModel.driver.deleteOne({ email: '' })).not.toThrow()
+})
+
+test('Model.driver.deleteMany() deletes multiple records stored in memory', async () => {
+ const UserModel = createSchemaModel(UserSchema, 'UserDeleteMany1')
+ const newUsers = await UserModel.driver.insertMany([
+ {
+ name: 'Thorr',
+ email: 'thorr@codinsonn.dev',
+ },
+ {
+ name: 'Thorr',
+ email: 'thorr@fullproduct.dev',
+ },
+ ])
+ // Check that we return the deleted records
+ const deletedUsers = await UserModel.driver.deleteMany({ name: 'Thorr' })
+ expect(deletedUsers).toBeDefined()
+ expect(deletedUsers).toHaveLength(2)
+ expect(deletedUsers[0].name).toBe('Thorr')
+ expect(deletedUsers[1].name).toBe('Thorr')
+ // Check that the records are no longer in the DB
+ const foundMany = await UserModel.driver.findMany({ name: 'Thorr' })
+ expect(foundMany).toBeDefined()
+ expect(foundMany).toHaveLength(0)
+ // Check that we don't throw an error when attempting to delete records that don't exist
+ await expect(() => UserModel.driver.deleteMany({ email: '' })).not.toThrow()
+})
+
+test('Model.driver.deleteMany() returns an empty array by default if no records are found', async () => {
+ const UserModel = createSchemaModel(UserSchema, 'UserDeleteMany2')
+ const newUsers = await UserModel.driver.insertMany([
+ {
+ name: 'Thorr',
+ email: 'thorr@codinsonn.dev',
+ },
+ {
+ name: 'Thorr',
+ email: 'thorr@fullproduct.dev',
+ },
+ ])
+ // Check that we return an empty array when no records are found
+ const deletedUsers = await UserModel.driver.deleteMany({ name: 'Thor' })
+ expect(deletedUsers).toBeDefined()
+ expect(deletedUsers).toHaveLength(0)
+})
+
+test('Model query filters support logical $and, $or, $nor & $not operators', async () => {
+ const UserModel = createSchemaModel(UserSchema, 'UserQueryFilters1')
+ const newUsers = await UserModel.driver.insertMany([
+ {
+ name: 'Thorr',
+ email: 'thorr@codinsonn.dev',
+ },
+ {
+ name: 'Thorr',
+ email: 'thorr@fullproduct.dev',
+ },
+ ])
+ // Check that we can use the $and operator
+ const foundByAnd = await UserModel.driver.findMany({
+ $and: [{ name: 'Thorr' }, { email: 'thorr@codinsonn.dev' }],
+ })
+ expect(foundByAnd).toBeDefined()
+ expect(foundByAnd).toHaveLength(1)
+ expect(foundByAnd[0].name).toBe('Thorr')
+ expect(foundByAnd[0].email).toBe('thorr@codinsonn.dev')
+ // Check that we can use the $or operator
+ const foundByOr = await UserModel.driver.findMany({
+ $or: [{ email: 'thorr@fullproduct.dev' }, { email: 'thorr@codinsonn.dev' }],
+ })
+ expect(foundByOr).toBeDefined()
+ expect(foundByOr).toHaveLength(2)
+ const foundByOrResults = JSON.stringify(foundByOr)
+ expect(foundByOrResults).toContain('thorr@fullproduct.dev')
+ expect(foundByOrResults).toContain('thorr@codinsonn.dev')
+ // Check that we can use the $nor operator
+ const foundByNor = await UserModel.driver.findMany({
+ $nor: [{ email: 'thorr@fullproduct.dev' }, { name: '' }],
+ })
+ expect(foundByNor).toBeDefined()
+ expect(foundByNor).toHaveLength(1)
+ const foundByNorResults = JSON.stringify(foundByNor)
+ expect(foundByNorResults).toContain('thorr@codinsonn.dev')
+ // Check that we can use the $not operator
+ const foundByNot = await UserModel.driver.findMany({
+ $not: { name: 'Thorr' },
+ })
+ expect(foundByNot).toBeDefined()
+ expect(foundByNot).toHaveLength(0)
+})
+
+test('Model query filters support conditional field operators $eq, $ne, $gt, $gte, $lt, $lte, $in, $nin', async () => {
+ const UserModel = createSchemaModel(UserSchema, 'UserQueryFilters2')
+ const newUsers = await UserModel.driver.insertMany([
+ {
+ name: 'Thorr',
+ email: 'thorr@codinsonn.dev',
+ age: 30,
+ },
+ {
+ name: 'Thorr',
+ email: 'thorr@fullproduct.dev',
+ age: 32,
+ },
+ ])
+ // Check that we can use the $eq operator
+ const foundByEq = await UserModel.driver.findMany({
+ name: { $eq: 'Thorr' },
+ })
+ expect(foundByEq).toBeDefined()
+ expect(foundByEq).toHaveLength(2)
+ const foundByEqResults = JSON.stringify(foundByEq)
+ expect(foundByEqResults).toContain('thorr@codinsonn.dev')
+ expect(foundByEqResults).toContain('thorr@fullproduct.dev')
+ // Check that we can use the $ne operator
+ const foundByNe = await UserModel.driver.findMany({
+ email: { $ne: 'thorr@codinsonn.dev' },
+ })
+ expect(foundByNe).toBeDefined()
+ expect(foundByNe).toHaveLength(1)
+ expect(foundByNe[0].email).toBe('thorr@fullproduct.dev')
+ // Check that we can use the $gt operator
+ const foundByGt = await UserModel.driver.findMany({
+ age: { $gt: 30 },
+ })
+ expect(foundByGt).toBeDefined()
+ expect(foundByGt).toHaveLength(1)
+ expect(foundByGt[0].age).toBe(32)
+ expect(foundByGt[0].email).toBe('thorr@fullproduct.dev')
+ // Check that we can use the $gte operator
+ const foundByGte = await UserModel.driver.findMany({
+ age: { $gte: 32 },
+ })
+ expect(foundByGte).toBeDefined()
+ expect(foundByGte).toHaveLength(1)
+ expect(foundByGte[0].age).toBe(32)
+ expect(foundByGte[0].email).toBe('thorr@fullproduct.dev')
+ // Check that we can use the $lt operator
+ const foundByLt = await UserModel.driver.findMany({
+ age: { $lt: 32 },
+ })
+ expect(foundByLt).toBeDefined()
+ expect(foundByLt).toHaveLength(1)
+ expect(foundByLt[0].age).toBe(30)
+ expect(foundByLt[0].email).toBe('thorr@codinsonn.dev')
+ // Check that we can use the $lte operator
+ const foundByLte = await UserModel.driver.findMany({
+ age: { $lte: 30 },
+ })
+ expect(foundByLte).toBeDefined()
+ expect(foundByLte).toHaveLength(1)
+ expect(foundByLte[0].age).toBe(30)
+ expect(foundByLte[0].email).toBe('thorr@codinsonn.dev')
+ // Check that we can use the $in operator
+ const foundByIn = await UserModel.driver.findMany({
+ age: { $in: [30, 31, 32] },
+ })
+ expect(foundByIn).toBeDefined()
+ expect(foundByIn).toHaveLength(2)
+ const foundByInResults = JSON.stringify(foundByIn)
+ expect(foundByInResults).toContain('thorr@codinsonn.dev')
+ expect(foundByInResults).toContain('thorr@fullproduct.dev')
+ // Check that we can use the $nin operator
+ const foundByNin = await UserModel.driver.findMany({
+ age: { $nin: [31] },
+ })
+ expect(foundByNin).toBeDefined()
+ expect(foundByNin).toHaveLength(2)
+ const foundByNinResults = JSON.stringify(foundByNin)
+ expect(foundByNinResults).toContain('thorr@codinsonn.dev')
+ expect(foundByNinResults).toContain('thorr@fullproduct.dev')
+})
+
+test("Model query filters support nested fields", async () => {
+ const UserModel = createSchemaModel(UserSchema, 'UserQueryFilters3')
+ const newUsers = await UserModel.driver.insertMany([
+ {
+ name: 'Thorr',
+ email: 'thorr@codinsonn.dev',
+ meta: {
+ version: 1,
+ },
+ },
+ {
+ name: 'Thorr',
+ email: 'thorr@fullproduct.dev',
+ meta: {
+ version: 2,
+ },
+ },
+ ])
+ // Check that we can use nested fields in query filters
+ const foundByNested = await UserModel.driver.findMany({
+ meta: { version: 1 },
+ })
+ expect(foundByNested).toBeDefined()
+ expect(foundByNested).toHaveLength(1)
+ expect(foundByNested[0].email).toBe('thorr@codinsonn.dev')
+})
diff --git a/packages/@db-driver/utils/createSchemaModel.mock.ts b/packages/@db-driver/utils/createSchemaModel.mock.ts
new file mode 100644
index 0000000..6e003e8
--- /dev/null
+++ b/packages/@db-driver/utils/createSchemaModel.mock.ts
@@ -0,0 +1,433 @@
+// @ts-ignore
+import { v4 as uuidV4 } from 'uuid'
+import { z } from '@green-stack/schemas'
+import { warnOnce } from '@green-stack/utils/commonUtils'
+import { getProperty } from '@green-stack/utils/objectUtils'
+import { memoryDB } from '../constants/memoryDB.mock'
+import { includesAny } from '@green-stack/utils/stringUtils'
+import { arrFromSet } from '@green-stack/utils/arrayUtils'
+import { LOGICAL_OPERATORS, QUERY_OPERATORS, QueryFilterType } from './createSchemaModel.types.ts'
+
+/** --- createSchemaModel() -------------------------------------------------------------------- */
+/** -i- Creates a schema model to interface with the mock memory DB */
+export const createSchemaModel = <
+ S extends z.ZodRawShape,
+ DataType extends Prettify>> = Prettify>>, // prettier-ignore
+ QueryFilter extends QueryFilterType> = QueryFilterType>, // prettier-ignore
+>(
+ schema: z.ZodObject,
+ modelName?: string,
+) => {
+
+ // Apply the schema name as the model key?
+ const schemaMeta = schema.introspect()
+ const modelKey = (modelName || schemaMeta.name) as string
+
+ // Keep track of id fields used in find by ID operations
+ const idFields = arrFromSet([...Object.keys(schemaMeta.schema!).filter(k => {
+ const fieldMeta = schemaMeta.schema![k]
+ return fieldMeta.isID || (fieldMeta.isUnique && fieldMeta.isIndex)
+ })])
+
+ // Keep track of created/modified dates?
+ const createdAtField = Object.keys(schemaMeta.schema!).find(key => {
+ if (!includesAny(key, ['created', 'inserted'])) return false
+ return schemaMeta.schema![key].zodType === 'ZodDate'
+ })
+ const updatedAtField = Object.keys(schemaMeta.schema!).find(key => {
+ if (!includesAny(key, ['updated', 'modified', 'edited'])) return false
+ return schemaMeta.schema![key].zodType === 'ZodDate'
+ })
+
+ // Use softdeletes?
+ const softDeleteField = Object.keys(schemaMeta.schema!).find(key => {
+ if (!includesAny(key, ['deleted', 'removed'])) return false
+ return schemaMeta.schema![key].zodType === 'ZodDate'
+ })
+
+ /** --- matchesCondition() ----------------------------------------------------------------- */
+ /** -i- Checks whether mongo-like condition matching keys `$eq`, `$ne`, `$gt`, `$gte`, `$lt`, `$lte`, `$in`, `$nin` match the query */
+ const matchesCondition = (value: DataType[keyof DataType], condition: QueryFilter[keyof QueryFilter]): boolean => {
+ // Handle query operators
+ const isValidCondition = typeof condition === 'object' && condition !== null
+ if (isValidCondition) {
+ return Object.entries(condition).every(([operator, operatorValue]) => {
+ if (operator === '$eq') return value === operatorValue
+ if (operator === '$ne') return value !== operatorValue
+ if (operator === '$gt') return value > operatorValue
+ if (operator === '$gte') return value >= operatorValue
+ if (operator === '$lt') return value < operatorValue
+ if (operator === '$lte') return value <= operatorValue
+ if (operator === '$in') return operatorValue.includes(value)
+ if (operator === '$nin') return !operatorValue.includes(value)
+ throw new Error(`Unsupported condition operator in query: ${JSON.stringify(condition)}`)
+ })
+ }
+ // Handle simple value comparison
+ // @ts-ignore
+ return value === condition
+ }
+
+ /** --- handleLogicalOperators() ----------------------------------------------------------- */
+ /** -i- Checks whether mongo-like logical query keys `$and`, `$or`, `$nor` and `$not` match the query */
+ const handleLogicalOperators = (record: DataType, operator: string, conditions: QueryFilter[]): boolean => {
+ switch (operator) {
+ case '$and':
+ return conditions.every((condition: QueryFilter) => matchesQuery(record, condition))
+ case '$or':
+ return conditions.some((condition: QueryFilter) => matchesQuery(record, condition))
+ case '$nor':
+ return !conditions.some((condition: QueryFilter) => matchesQuery(record, condition))
+ case '$not':
+ return !matchesQuery(record, conditions as unknown as QueryFilter)
+ default:
+ throw new Error(`Unsupported logical operator "${operator}" in query`)
+ }
+ }
+
+ /** --- matchesQuery() --------------------------------------------------------------------- */
+ /** -i- Checks if a given record in the collection matches the query params */
+ const matchesQuery = (record: DataType, query: QueryFilter): boolean => {
+ return Object.entries(query).every(([key, value]) => {
+ if (LOGICAL_OPERATORS.includes(key)) {
+ return handleLogicalOperators(record, key, value as QueryFilter[])
+ } else {
+ const fieldValue = getProperty(record, key) as DataType[keyof DataType]
+ const queryValue = value as QueryFilter[keyof QueryFilter]
+ // Check if it's a nested query filter or a field operator
+ const isNestedQuery = typeof queryValue === 'object' && queryValue !== null && !Array.isArray(queryValue)
+ const isFieldOperator = isNestedQuery && Object.keys(queryValue).some((operator) => {
+ return QUERY_OPERATORS.includes(operator)
+ })
+ // Handle nested query filters
+ if (isNestedQuery && !isFieldOperator) {
+ return matchesQuery(fieldValue as DataType, queryValue as QueryFilter)
+ }
+ // Handle field operators & simple value comparison
+ return matchesCondition(fieldValue, queryValue)
+ }
+ })
+ }
+
+ /** --- insertOne() ------------------------------------------------------------------------ */
+ /** -i- Create a new record in the collection */
+ const insertOne = async (record: Partial) => {
+ memoryDB[modelKey] = memoryDB[modelKey] || {}
+ try {
+ // Generate a new ID if one is not provided
+ const id = record.id || uuidV4()
+ const newRecord = { ...record, id }
+ // Create a new model key if it does not exist (anymore)
+ // Check that the record to insert is valid
+ schema.parse(schema.applyDefaults(newRecord))
+ // Check that the ID is unique
+ if (memoryDB[modelKey] && memoryDB[modelKey][id]) {
+ throw new Error(`Record with ID "${id}" already exists in model "${modelKey}"`)
+ }
+ // Insert the record into the memory DB
+ memoryDB[modelKey][id] = newRecord
+ // Return the inserted record
+ return memoryDB[modelKey][id] as Prettify
+ } catch (error: any$FixMe) {
+ throw new Error(`Failed to insert record into "${modelKey}" collection: ${error.message}`) // prettier-ignore
+ }
+ }
+
+ /** --- insertMany() ----------------------------------------------------------------------- */
+ /** -i- Create multiple records in the collection */
+ const insertMany = async (records: Partial[]) => {
+ memoryDB[modelKey] = memoryDB[modelKey] || {}
+ try {
+ // Generate new IDs for records that don't have them
+ const newRecords = records.map((record) => {
+ const id = record.id || uuidV4()
+ return { ...record, id }
+ })
+ // Check that the records to insert are valid
+ newRecords.forEach((record) => {
+ schema.parse(schema.applyDefaults(record))
+ })
+ // Check that all IDs are unique
+ newRecords.forEach((record) => {
+ if (memoryDB[modelKey] && memoryDB[modelKey][record.id]) {
+ throw new Error(`Record with ID "${record.id}" already exists in model "${modelKey}"`) // prettier-ignore
+ }
+ })
+ // Insert the records into the memory DB
+ newRecords.forEach((record) => {
+ memoryDB[modelKey][record.id] = record
+ })
+ // Return the inserted records
+ return newRecords as Prettify[]
+ } catch (error: any$FixMe) {
+ throw new Error(`Failed to insert records into "${modelKey}" collection: ${error.message}`) // prettier-ignore
+ }
+ }
+
+ /** --- findOne() -------------------------------------------------------------------------- */
+ /** -i- Finds a single record in the collection based on a query filter */
+ const findOne = async (query: QueryFilter) => {
+ memoryDB[modelKey] = memoryDB[modelKey] || {}
+ try {
+ // @ts-ignore
+ if (softDeleteField) query[softDeleteField] = { $exists: false }
+ // Find the record in the memory DB
+ const result = Object.values(memoryDB[modelKey]).find((record) => {
+ return matchesQuery(record as DataType, query)
+ })
+ // Return the found record
+ return result as DataType
+ } catch (error: any$FixMe) {
+ throw new Error(`Failed to find record in "${modelKey}" collection: ${error.message}`)
+ }
+ }
+
+ /** --- findMany() -------------------------------------------------------------------------- */
+ /** -i- Finds multiple records in the collection based on a query filter */
+ const findMany = async (query: QueryFilter) => {
+ memoryDB[modelKey] = memoryDB[modelKey] || {}
+ try {
+ // @ts-ignore
+ if (softDeleteField) query[softDeleteField] = { $exists: false }
+ // Find the records in the memory DB
+ const result = Object.values(memoryDB[modelKey]).filter((record) => {
+ return matchesQuery(record as DataType, query)
+ })
+ // Return the found records
+ return result as DataType[]
+ } catch (error: any$FixMe) {
+ throw new Error(`Failed to find records in "${modelKey}" collection: ${error.message}`)
+ }
+ }
+
+ /** --- findOrCreate() --------------------------------------------------------------------- */
+ /** -i- Finds an existing record or creates it with the provided data */
+ const findOrCreate = async (query: QueryFilter, record: Partial) => {
+ memoryDB[modelKey] = memoryDB[modelKey] || {}
+ try {
+ // @ts-ignore
+ if (softDeleteField) query[softDeleteField] = { $exists: false }
+ // Find the record to create
+ const recordToCreate = await findOne(query) as DataType
+ if (recordToCreate) {
+ return recordToCreate
+ } else {
+ return insertOne(record)
+ }
+ } catch (error: any$FixMe) {
+ throw new Error(`Failed to find or create record in "${modelKey}" collection: ${error.message}`)
+ }
+ }
+
+ /** --- updateOne() ------------------------------------------------------------------------ */
+ /** -i- Update a record in the collection */
+ const updateOne = async (
+ query: QueryFilter,
+ fieldUpdates: Prettify>>,
+ errorOnUnmatched = false,
+ ) => {
+ memoryDB[modelKey] = memoryDB[modelKey] || {}
+ let recordId = ''
+ try {
+ // @ts-ignore
+ if (softDeleteField) query[softDeleteField] = { $exists: false }
+ // @ts-ignore
+ if (updatedAtField) fieldUpdates[updatedAtField] = new Date()
+ // Find the record to update
+ const recordToUpdate = await findOne(query) as DataType
+ if (!recordToUpdate && errorOnUnmatched) {
+ throw new Error(`No record found to update in "${modelKey}" collection`)
+ } else if (!recordToUpdate) {
+ return recordToUpdate
+ }
+ // Merge the new record data with the existing record
+ const updatedRecord = { ...recordToUpdate, ...fieldUpdates } as DataType
+ // Check that we're not trying to update the ID
+ if (recordToUpdate.id !== updatedRecord.id) {
+ recordId = recordToUpdate.id as string
+ throw new Error(`Cannot update a record's ID. Error while updating record with ID ${recordToUpdate.id} in "${modelKey}" collection`) // prettier-ignore
+ }
+ // Check that the updated record is valid
+ schema.parse(schema.applyDefaults(updatedRecord))
+ // Update the record in the memory DB
+ memoryDB[modelKey][updatedRecord.id as string] = updatedRecord
+ // Return the updated record
+ return memoryDB[modelKey][updatedRecord.id as string] as DataType
+ } catch (error: any$FixMe) {
+ if (recordId) throw new Error(`Error while updating record with ID ${recordId} in "${modelKey}" collection: ${error.message}`) // prettier-ignore
+ else throw new Error(`Failed to update record in "${modelKey}" collection: ${error.message}`) // prettier-ignore
+ }
+ }
+
+ /** --- updateMany() ----------------------------------------------------------------------- */
+ /** -i- Update multiple records in the collection */
+ const updateMany = async (
+ query: QueryFilter,
+ fieldUpdates: Prettify>>,
+ errorOnUnmatched = false,
+ ) => {
+ memoryDB[modelKey] = memoryDB[modelKey] || {}
+ try {
+ // @ts-ignore
+ if (softDeleteField) query[softDeleteField] = { $exists: false }
+ // @ts-ignore
+ if (updatedAtField) fieldUpdates[updatedAtField] = new Date()
+ // Find the records to update
+ const recordsToUpdate = await findMany(query)
+ if (!recordsToUpdate.length && errorOnUnmatched) {
+ throw new Error(`No records found to update in "${modelKey}" collection`)
+ } else if (!recordsToUpdate.length) {
+ return recordsToUpdate
+ }
+ // Update each record
+ const updatedRecords = recordsToUpdate.map((record) => {
+ const updatedRecord = { ...record, ...fieldUpdates } as DataType
+ // Check that the updated record is valid
+ schema.parse(schema.applyDefaults(updatedRecord))
+ // Check that we're not trying to update the ID
+ if (record.id !== updatedRecord.id) {
+ throw new Error(`Cannot update a record's ID. Error while updating record with ID ${record.id} in "${modelKey}" collection`) // prettier-ignore
+ }
+ // Update the record in the memory DB
+ memoryDB[modelKey][updatedRecord.id as string] = updatedRecord
+ return updatedRecord
+ })
+ // Return the updated records
+ return updatedRecords
+ } catch (error: any$FixMe) {
+ throw new Error(`Failed to update records in "${modelKey}" collection: ${error.message}`)
+ }
+ }
+
+ /** --- upsertOne() ------------------------------------------------------------------------ */
+ /** -i- Updates or inserts a single record in the collection */
+ const upsertOne = async (query: QueryFilter, record: Partial) => {
+ memoryDB[modelKey] = memoryDB[modelKey] || {}
+ try {
+ // @ts-ignore
+ if (softDeleteField) query[softDeleteField] = { $exists: false }
+ // Find the record to update
+ const recordToUpdate = await findOne(query) as DataType
+ if (recordToUpdate) {
+ // Update the record
+ return updateOne(query, record as Prettify>>, true)
+ } else {
+ // Insert the record
+ return insertOne(record)
+ }
+ } catch (error: any$FixMe) {
+ throw new Error(`Failed to upsert record in "${modelKey}" collection: ${error.message}`)
+ }
+ }
+
+ /** --- deleteOne() ------------------------------------------------------------------------ */
+ /** -i- Removes a single record from the collection */
+ const deleteOne = async (query: QueryFilter, errorOnUnmatched = false) => {
+ memoryDB[modelKey] = memoryDB[modelKey] || {}
+ try {
+ // @ts-ignore
+ if (softDeleteField) query[softDeleteField] = { $exists: false }
+ // Find the record to delete
+ const recordToDelete = await findOne(query) as DataType
+ if (!recordToDelete && errorOnUnmatched) {
+ throw new Error(`No record found to delete in "${modelKey}" collection`)
+ } else if (!recordToDelete) {
+ return recordToDelete
+ }
+ // Hard delete the record?
+ if (!softDeleteField) {
+ // Delete the record from the memory DB
+ delete memoryDB[modelKey][recordToDelete.id as string]
+ // Return the deleted record
+ return recordToDelete
+ }
+ // Soft delete the record instead
+ // @ts-ignore
+ return updateOne(query, { [softDeleteField]: new Date() }, true)
+ } catch (error: any$FixMe) {
+ throw new Error(`Failed to delete record from "${modelKey}" collection: ${error.message}`)
+ }
+ }
+
+ /** --- deleteMany() ----------------------------------------------------------------------- */
+ /** -i- Removes multiple records from the collection */
+ const deleteMany = async (query: QueryFilter, errorOnUnmatched = false) => {
+ memoryDB[modelKey] = memoryDB[modelKey] || {}
+ try {
+ // @ts-ignore
+ if (softDeleteField) query[softDeleteField] = { $exists: false }
+ // Find the records to delete
+ const recordsToDelete = await findMany(query)
+ if (!recordsToDelete.length && errorOnUnmatched) {
+ throw new Error(`No records found to delete in "${modelKey}" collection`)
+ } else if (!recordsToDelete.length) {
+ return recordsToDelete
+ }
+ // Hard delete the records?
+ if (!softDeleteField) {
+ // Delete the records from the memory DB
+ recordsToDelete.forEach((record) => {
+ delete memoryDB[modelKey][record.id as string]
+ })
+ // Return the deleted records
+ return recordsToDelete
+ }
+ // Soft delete the records instead
+ // @ts-ignore
+ return updateMany(query, { [softDeleteField]: new Date() }, true)
+ } catch (error: any$FixMe) {
+ throw new Error(`Failed to delete records from "${modelKey}" collection: ${error.message}`)
+ }
+ }
+
+ /* --- Return Driver Model ----------------------------------------------------------------- */
+
+ const rawModel = {
+ insert: insertOne,
+ insertOne,
+ insertMany,
+ find: findMany,
+ findOne,
+ findMany,
+ findOrCreate,
+ update: updateOne,
+ updateOne,
+ updateMany,
+ upsertOne,
+ upsert: upsertOne,
+ delete: deleteOne,
+ deleteOne,
+ deleteMany,
+ // - Aliases -
+ create: insertOne,
+ createOne: insertOne,
+ createMany: insertMany,
+ read: findOne,
+ readOne: findOne,
+ readMany: findMany,
+ modify: updateOne,
+ modifyOne: updateOne,
+ modifyMany: updateMany,
+ remove: deleteOne,
+ removeOne: deleteOne,
+ removeMany: deleteMany,
+ }
+
+ const driver = {
+ ...rawModel,
+ // - Metadata -
+ _key: modelKey,
+ _raw: rawModel,
+ _schema: schema,
+ _data: undefined as unknown as DataType,
+ _idFields: idFields,
+ _createdAtField: createdAtField,
+ _updatedAtField: updatedAtField,
+ _softDeleteField: softDeleteField,
+ _dbDriverType: 'mock' as const,
+ }
+
+ return Object.assign(driver, {
+ driver,
+ })
+}
diff --git a/packages/@db-driver/utils/createSchemaModel.types.ts b/packages/@db-driver/utils/createSchemaModel.types.ts
new file mode 100644
index 0000000..66789b8
--- /dev/null
+++ b/packages/@db-driver/utils/createSchemaModel.types.ts
@@ -0,0 +1,34 @@
+
+/* --- Constants ------------------------------------------------------------------------------- */
+
+export const LOGICAL_OPERATORS = ['$and', '$or', '$nor', '$not']
+
+export const QUERY_OPERATORS = ['$eq', '$ne', '$gt', '$gte', '$lt', '$lte', '$in', '$nin']
+
+/* --- Types ----------------------------------------------------------------------------------- */
+
+export type QueryPrimitive = string | number | boolean | Date | null | undefined
+
+export type QueryOperators = {
+ $eq?: T;
+ $ne?: T;
+ $gt?: T;
+ $gte?: T;
+ $lt?: T;
+ $lte?: T;
+ $in?: T[];
+ $nin?: T[];
+}
+
+export type LogicalOperators = {
+ $and?: QueryFilterType[];
+ $or?: QueryFilterType[];
+ $nor?: QueryFilterType[];
+ $not?: QueryFilterType;
+}
+
+export type QueryFilterType = {
+ [P in keyof T]?: T[P] extends QueryPrimitive
+ ? (QueryOperators | T[P])
+ : QueryFilterType
+} & LogicalOperators
diff --git a/packages/@db-driver/utils/validateDbDriver.db.ts b/packages/@db-driver/utils/validateDbDriver.db.ts
new file mode 100644
index 0000000..d497459
--- /dev/null
+++ b/packages/@db-driver/utils/validateDbDriver.db.ts
@@ -0,0 +1,8 @@
+import { DbDriverShape } from '../driver.signature'
+
+/** --- validateDbDriver() --------------------------------------------------------------------- */
+/** -i- Validates whether a DB driver matches the expected methods */
+export const validateDbDriver = (driver: DB_DRIVER) => {
+ DbDriverShape.parse(driver)
+ return driver as DB_DRIVER
+}
diff --git a/packages/@db-driver/utils/validateDriverModel.db.ts b/packages/@db-driver/utils/validateDriverModel.db.ts
new file mode 100644
index 0000000..1dd4b8f
--- /dev/null
+++ b/packages/@db-driver/utils/validateDriverModel.db.ts
@@ -0,0 +1,26 @@
+import { z } from '@green-stack/schemas'
+
+/* --- Schema ---------------------------------------------------------------------------------- */
+
+export const DbModelShape = z.object({
+ insertOne: z.function().args(z.any()).returns(z.promise(z.any())),
+ insertMany: z.function().args(z.array(z.any())).returns(z.promise(z.array(z.any()))),
+ findOne: z.function().args(z.any()).returns(z.promise(z.any())),
+ findMany: z.function().args(z.any()).returns(z.promise(z.array(z.any()))),
+ updateOne: z.function().args(z.any(), z.any(), z.boolean().optional()).returns(z.promise(z.any())),
+ updateMany: z.function().args(z.any(), z.any(), z.boolean().optional()).returns(z.promise(z.array(z.any()))),
+ upsertOne: z.function().args(z.any(), z.any()).returns(z.promise(z.any())),
+ deleteOne: z.function().args(z.any(), z.boolean().optional()).returns(z.promise(z.any())),
+ deleteMany: z.function().args(z.any(), z.boolean().optional()).returns(z.promise(z.array(z.any()))),
+})
+
+/* --- Types ----------------------------------------------------------------------------------- */
+
+export type DbModelShape = z.infer
+
+/** --- validateDriverModel() ----------------------------------------------------------------------- */
+/** -i- Validates whether a DB model matches the expected methods */
+export const validateDriverModel = (model: DB_MODEL) => {
+ DbModelShape.parse(model)
+ return model
+}
diff --git a/packages/@green-stack-core/__mocks__/expo-constants.mock.ts b/packages/@green-stack-core/__mocks__/expo-constants.mock.ts
new file mode 100644
index 0000000..ec4deeb
--- /dev/null
+++ b/packages/@green-stack-core/__mocks__/expo-constants.mock.ts
@@ -0,0 +1,27 @@
+// Mock expo-constants
+export const expoConstants = {
+ expoGoConfig: {
+ debuggerHost: 'localhost:19000',
+ },
+ manifest2: {
+ extra: {
+ expoGo: {
+ debuggerHost: 'localhost:19000',
+ },
+ },
+ },
+ default: {
+ expoGoConfig: {
+ debuggerHost: 'localhost:19000'
+ },
+ manifest2: {
+ extra: {
+ expoGo: {
+ debuggerHost: 'localhost:19000'
+ }
+ }
+ }
+ }
+}
+
+export default expoConstants
diff --git a/packages/@green-stack-core/components/Icon.mock.tsx b/packages/@green-stack-core/components/Icon.mock.tsx
new file mode 100644
index 0000000..83d40ad
--- /dev/null
+++ b/packages/@green-stack-core/components/Icon.mock.tsx
@@ -0,0 +1,25 @@
+import { z, schema } from '@green-stack/core/schemas'
+import { REGISTERED_ICONS } from '@app/registries/icons.registry'
+
+/* --- Constants ------------------------------------------------------------------------------- */
+
+const ICON_KEYS = Object.keys(REGISTERED_ICONS) as [REGISTERED_ICONS, ...REGISTERED_ICONS[]]
+
+/* --- Types ----------------------------------------------------------------------------------- */
+
+export const UniversalIconProps = schema('UniversalIconProps', {
+ name: z.enum(ICON_KEYS).describe('Name of an icon registered in the icon registry'),
+ url: z.string().url().optional().describe('Icon URL, for remote .svg or image icons'),
+ size: z.number().optional().describe('Icon size in pixels, encapsulates both width and height'),
+ fill: z.string().optional().describe('Icon fill color, can also use the color prop'),
+ color: z.string().optional().describe('Icon color, can also use the fill prop'),
+ stroke: z.string().optional().describe('Icon stroke color to use, if stroke is needed'),
+ className: z.string().optional().describe('Icon class name, transformed through nativewind cssInterop'),
+ style: z.record(z.unknown()).optional().describe('Icon styles, combined with nativewind className'),
+})
+
+export type UniversalIconProps = z.input
+
+/* ---
+
+/* ---
+
+ )
+}
+
+/* --- Exports --------------------------------------------------------------------------------- */
+
+export { UniversalIcon as Icon }
diff --git a/packages/@green-stack-core/components/Image.docs.mdx b/packages/@green-stack-core/components/Image.docs.mdx
new file mode 100644
index 0000000..97e964b
--- /dev/null
+++ b/packages/@green-stack-core/components/Image.docs.mdx
@@ -0,0 +1,261 @@
+import { Image } from '@app/primitives'
+import { FileTree, Callout } from 'nextra/components'
+import { TitleWrapper } from '@app/docs/components/Hidden'
+
+
+ ## Usage - `Image`
+
+
+
+
+### Image Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `src` | `string \| StaticImageData` | Required | Image source - can be URL or imported image |
+| `alt` | `string` | `'Alt description missing in image'` | Alt text for accessibility and SEO |
+| `width` | `number \| string` | Required* | Width in pixels or percentage |
+| `height` | `number \| string` | Required* | Height in pixels or percentage |
+| `className` | `string` | - | Tailwind classes for styling |
+| `style` | `StyleProp` | `{}` | Additional styles |
+| `priority` | `'high' \| 'normal'` | `'normal'` | Loading priority - 'high' for LCP elements |
+| `onError` | `(error: any) => void` | - | Called on image loading error |
+| `onLoadEnd` | `() => void` | - | Called when image load completes |
+| `fill` | `boolean` | - | Fill parent container (requires relative positioning) |
+| `contentFit` | `'cover' \| 'contain' \| 'fill' \| 'none' \| 'scale-down'` | `'cover'` | How image fits container |
+| `cachePolicy` | `'none' \| 'disk' \| 'memory' \| 'memory-disk'` | `'disk'` | Image caching strategy |
+| `blurRadius` | `number` | `0` | Blur effect radius in points |
+| `quality` | `number` | `75` | Image quality (1-100) |
+| `sizes` | `string` | - | Responsive image sizes hint |
+| `unoptimized` | `boolean` | `false` | Skip image optimization |
+
+*Required unless using `fill` or static import
+
+
+TypeScript Definition
+
+You can find the TypeScript definition for our Universal `Image` component in `Image.types.ts`:
+
+```typescript filename="Image.types.ts"
+type UniversalImageProps = {
+
+ // -- Universal props --
+
+ /**
+ * Universal, will affect both Expo & Next.js - Must be one of the following:
+ * - A path string like `'/assets/logo.png'`. This can be either an absolute external URL, or an internal path depending on the loader prop.
+ * - A statically imported image file, like `import logo from './logo.png'` or `require('./logo.png')`.
+ *
+ * When using an external URL, you must add it to `remotePatterns` in `next.config.js`.
+ * @platform web, android, ios @framework expo, next.js */
+ src: string | StaticImport
+
+ width?: number | `${number}` | `${number}%`
+ height?: number | `${number}` | `${number}%`
+
+ /** Universal, will affect both Expo & Next.js
+ * - Remember that the required width and height props can interact with your styling. If you use styling to modify an image's width, you should also style its height to auto to preserve its intrinsic aspect ratio, or your image will be distorted. */
+ className?: string
+
+ /** Universal, will affect both Expo & Next.js
+ * - Remember that the required width and height props can interact with your styling. If you use styling to modify an image's width, you should also style its height to auto to preserve its intrinsic aspect ratio, or your image will be distorted. */
+ style?: StyleProp | ExpoImageProps['style']
+
+ alt?: string
+ priority?: "low" | "normal" | "high" | null
+
+ onError?: ((event: ImageErrorEventData) => void)
+ onLoadEnd?: (() => void)
+
+ // -- '@next/image' specific props --
+
+ /** Custom function used to resolve image URLs. A loader is a function returning a URL string for the image, given the following parameters: `src`, `width`, `quality` (`number` from 0 - 1) Alternatively, you can use the [loaderFile](https://nextjs.org/docs/pages/api-reference/components/image#loaderfile) configuration in next.config.js to configure every instance of next/image in your application, without passing a prop. */
+ loader?: ImageLoader
+
+ fill?: boolean
+ sizes?: string
+ quality?: number | `${number}`
+ nextPlaceholder?: PlaceholderValue | 'blur' | 'empty' | `data:image/${string}`
+ loading?: 'lazy' | 'eager'
+ blurDataURL?: string
+ unoptimized?: boolean
+
+ // -- 'expo-image' specific props --
+
+ accessibilityLabel?: string
+ accessible?: boolean
+ allowDownscaling?: boolean
+ autoplay?: boolean
+ blurRadius?: number
+ cachePolicy?: 'none' | 'disk' | 'memory' | 'memory-disk'
+ contentFit?: ImageContentFit | 'cover' | 'contain' | 'fill' | 'none' | 'scale-down'
+ contentPosition?: ImageContentPosition | 'top' | 'bottom' | 'left' | 'right' | 'center' | 'top left' | 'top right' | ...
+ enableLiveTextInteraction?: ExpoImageProps['enableLiveTextInteraction']
+ focusable?: boolean
+ expoPlaceholder?: ExpoImageProps['expoPlaceholder'] | string | StaticImport
+ onLoadStart?: (() => void)
+ onProgress?: ((event: ImageProgressEventData) => void)
+ placeholderContentFit?: ImageContentFit | 'cover' | 'contain' | 'fill' | 'none' | 'scale-down'
+ recyclingKey?: string | null
+ responsivePolicy?: 'static' | 'initial' | 'live'
+}
+```
+
+
+
+
+Zod Schema
+
+```typescript
+import { z } from 'zod'
+
+const UniversalImageSchema = z.object({
+ // Universal props
+ src: z.union([z.string(), z.any()]), // StaticImageData type
+ alt: z.string().optional(),
+ width: z.union([z.number(), z.string()]).optional(),
+ height: z.union([z.number(), z.string()]).optional(),
+ className: z.string().optional(),
+ style: z.any().optional(),
+ priority: z.enum(['high', 'normal']).optional(),
+ onError: z.function().optional(),
+ onLoadEnd: z.function().optional(),
+
+ // Next.js specific
+ loader: z.function().optional(),
+ fill: z.boolean().optional(),
+ sizes: z.string().optional(),
+ quality: z.number().min(1).max(100).optional(),
+ nextPlaceholder: z.enum(['blur', 'empty']).optional(),
+ loading: z.enum(['lazy', 'eager']).optional(),
+ blurDataURL: z.string().optional(),
+ unoptimized: z.boolean().optional(),
+
+ // Expo specific
+ accessibilityLabel: z.string().optional(),
+ accessible: z.boolean().optional(),
+ allowDownscaling: z.boolean().optional(),
+ autoplay: z.boolean().optional(),
+ blurRadius: z.number().optional(),
+ cachePolicy: z.enum(['none', 'disk', 'memory', 'memory-disk']).optional(),
+ contentFit: z.enum(['cover', 'contain', 'fill', 'none', 'scale-down']).optional(),
+ contentPosition: z.string().optional(),
+ enableLiveTextInteraction: z.boolean().optional(),
+ focusable: z.boolean().optional(),
+ expoPlaceholder: z.any().optional(),
+ onLoadStart: z.function().optional(),
+ onProgress: z.function().optional(),
+ placeholderContentFit: z.enum(['cover', 'contain', 'fill', 'none', 'scale-down']).optional(),
+ recyclingKey: z.string().optional(),
+ responsivePolicy: z.enum(['static', 'initial', 'live']).optional(),
+})
+```
+
+
+
+
+
+## React Portability Patterns
+
+Both Next.js and Expo have their own optimized `Image` components. This is why there are also versions specifically for each of those environments:
+
+
+
+
+
+
+
+
+
+
+- `Image.next.tsx` uses `next/image` for web
+- `Image.expo.tsx` uses `expo-image` for mobile
+- `Image.types.ts` ensures there is a shared type for both implementations
+
+Finally, `Image.tsx` will retrieve whichever implementation was provided as `contextImage` to the `` component, which is further passed to `
+ ...
+
+```
+
+```tsx /.next/ /useNextImage/ filename="NextRootLayout.tsx" copy
+import { Image as NextImage } from '@green-stack/components/Image.next'
+
+// ... Later ...
+
+
+ ...
+
+```
+
+### Why this pattern?
+
+The 'React Portability Patterns' used here are designed to ensure that you can easily reuse optimized versions of components across different flavours of writing React.
+
+On the one hand, that means it's already set up to work with both Expo and Next.js in an optimal way.
+
+But, you can actually add your own implementations for other environments, without having to refactor the code that uses the `Image` component.
+
+### Supporting more environments
+
+Just add your own `Image..tsx` file that respects the shared types, and then pass it to the `` component as `contextImage`.
diff --git a/features/app-core/components/Image.tsx b/packages/@green-stack-core/components/Image.expo.tsx
similarity index 77%
rename from features/app-core/components/Image.tsx
rename to packages/@green-stack-core/components/Image.expo.tsx
index 71bf58f..1f32d7b 100644
--- a/features/app-core/components/Image.tsx
+++ b/packages/@green-stack-core/components/Image.expo.tsx
@@ -1,26 +1,41 @@
import { Image as ExpoImage } from 'expo-image'
import { Platform } from 'react-native'
-import { UniversalImageProps, UniversalImageMethods } from './Image.types'
+import { cssInterop } from 'nativewind'
+import { parseNativewindStyles } from '../styles/parseNativewindStyles'
+import { cn } from '../utils/styleUtils'
+import type { UniversalImageProps, UniversalImageMethods } from './Image.types'
+
+/* --- Styles ---------------------------------------------------------------------------------- */
+
+const StyledExpoImage = cssInterop(ExpoImage, {
+ className: 'style',
+})
/* --- & {
+ className?: string
+ src?: string
+}
+
+/* --- , HTMLIFrameElement>) => (
+
+)
diff --git a/packages/@green-stack-core/context/CoreContext.tsx b/packages/@green-stack-core/context/CoreContext.tsx
new file mode 100644
index 0000000..bcab009
--- /dev/null
+++ b/packages/@green-stack-core/context/CoreContext.tsx
@@ -0,0 +1,51 @@
+import React from 'react'
+import { UniversalLinkProps } from '@green-stack/navigation/Link.types'
+import { UniversalRouterMethods } from '@green-stack/navigation/useRouter.types'
+import { UniversalRouteScreenProps } from '@green-stack/navigation/useRouteParams.types'
+import type { useLocalSearchParams } from 'expo-router'
+import type { UniversalImageMethods, UniversalImageProps } from '../components/Image.types'
+import { KnownRoutes } from '@app/registries/routeManifest.generated'
+
+/* --- Notes ----------------------------------------------------------------------------------- */
+
+// -i- This context's only aim is to provide React Portability & Framework Ejection patterns if required
+// -i- By allowing you to provide your own custom Link and Router overrides, you could e.g.:
+// -i- 1) Support Expo for Web by not defaulting to Next.js's Link and Router on web
+// -i- 2) Eject from Next.js entirely and e.g. use another framework's Image / Link / router
+
+/* --- Types ----------------------------------------------------------------------------------- */
+
+export type CoreContextType = {
+ // Components
+ contextImage: ((props: UniversalImageProps) => JSX.Element) & UniversalImageMethods
+ contextLink: (props: UniversalLinkProps) => JSX.Element
+ contextRouter: UniversalRouterMethods
+ // Hooks
+ useContextRouteParams: (routeScreenProps: UniversalRouteScreenProps) => ReturnType
+ // Flags
+ isExpo?: boolean
+ isNext?: boolean
+ isDebugMode?: boolean
+ // Setters
+ setIsDebugMode?: (isDebugMode: boolean) => void
+ // Request Context
+ requestContext?: Record
+}
+
+/* --- Dummy ----------------------------------------------------------------------------------- */
+
+const createDummyComponent = (contextComponentName: string) => () => {
+ throw new Error(`CoreContext was not provided with a ${contextComponentName}. Please provide one in UniversalAppProviders.`)
+}
+
+/* --- Context --------------------------------------------------------------------------------- */
+
+export const CoreContext = React.createContext({
+ contextImage: createDummyComponent('contextImage') as any,
+ contextLink: createDummyComponent('contextLink'),
+ contextRouter: null as unknown as UniversalRouterMethods,
+ useContextRouteParams: () => ({}),
+ isExpo: undefined,
+ isNext: undefined,
+ isDebugMode: false,
+})
diff --git a/packages/@green-stack-core/context/UniversalQueryClientProvider.tsx b/packages/@green-stack-core/context/UniversalQueryClientProvider.tsx
new file mode 100644
index 0000000..c85f3c3
--- /dev/null
+++ b/packages/@green-stack-core/context/UniversalQueryClientProvider.tsx
@@ -0,0 +1,46 @@
+"use client"
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+/* --- Constants ------------------------------------------------------------------------------- */
+
+let clientSideQueryClient: QueryClient | undefined = undefined
+
+/** --- makeQueryClient() ---------------------------------------------------------------------- */
+/** -i- Build a queryclient to be used either client-side or server-side */
+export const makeQueryClient = () => {
+ const oneMinute = 1000 * 60
+ const queryClient = new QueryClient({
+ defaultOptions: {
+ queries: {
+ // With SSR, we usually want to set some default staleTime
+ // above 0 to avoid refetching immediately on the client
+ staleTime: oneMinute,
+ },
+ },
+ })
+ return queryClient
+}
+
+/** --- getQueryClient() ----------------------------------------------------------------------- */
+/** -i- Always makes a new query client on the server, but reuses an existing client if found in browser or mobile */
+export const getQueryClient = () => {
+ // Always create a new query client on the server, so no caching is shared between requests
+ const isServer = typeof window === 'undefined'
+ if (isServer) return makeQueryClient()
+ // On the browser or mobile, make a new client if we don't already have one
+ // This is important so we don't re-make a new client if React suspends during initial render.
+ // Might not be needed if we have a suspense boundary below the creation of the query client though.
+ if (!clientSideQueryClient) clientSideQueryClient = makeQueryClient()
+ return clientSideQueryClient
+}
+
+/** ---
+ {children}
+
+ )
+}
diff --git a/packages/@green-stack-core/esbuild-setup.ts b/packages/@green-stack-core/esbuild-setup.ts
new file mode 100644
index 0000000..1032f07
--- /dev/null
+++ b/packages/@green-stack-core/esbuild-setup.ts
@@ -0,0 +1,32 @@
+import 'esbuild-register/dist/node' // @ts-ignore
+import { addAliases } from 'module-alias'
+
+/* --- Reanimated Fixes ------------------------------------------------------------------------ */
+
+// @ts-ignore
+global.__DEV__ = true // @ts-ignore
+globalThis.__DEV__ = true // -i- Set dev mode for react-native-reanimated
+
+/* --- Aliases --------------------------------------------------------------------------------- */
+
+addAliases({
+ // -i- We need aliases for these as they touch parts of react-native that ship Flow types
+ // -i- ...which our typescript + node esbuild scripts & generators can't deal with.
+ 'expo-constants': '@green-stack/core/__mocks__/expo-constants.mock.ts',
+ 'react-native': 'react-native-web',
+ // -i- Animation Mocks
+ 'react-native-reanimated': 'react-native-reanimated/mock',
+ // -i- Navigation Mocks
+ '@green-stack/navigation/Link.types': '@green-stack/navigation/mock',
+ '@green-stack/navigation/Link.web': '@green-stack/navigation/mock',
+ '@green-stack/navigation/Link': '@green-stack/navigation/mock',
+ '@green-stack/navigation/UseRouter.types': '@green-stack/navigation/mock',
+ '@green-stack/navigation/UseRouteParams.types': '@green-stack/navigation/mock',
+ '@green-stack/navigation': '@green-stack/navigation/mock',
+ // -i- Icons and SVG Mocks
+ 'react-native-svg': '@green-stack/core/svg/svg.mock',
+ '@green-stack/svg': '@green-stack/core/svg/svg.mock',
+ '@green-stack/core/svg/svg.primitives': '@green-stack/core/svg/svg.mock',
+ '@green-stack/core/components/Icon': '@green-stack/core/components/Icon.mock',
+ '@green-stack/components/Icon': '@green-stack/core/components/Icon.mock',
+})
diff --git a/packages/@green-stack-core/forms/Checkbox.primitives.tsx b/packages/@green-stack-core/forms/Checkbox.primitives.tsx
new file mode 100644
index 0000000..f4cdfb2
--- /dev/null
+++ b/packages/@green-stack-core/forms/Checkbox.primitives.tsx
@@ -0,0 +1,5 @@
+import * as CheckboxPrimitive from '@rn-primitives/checkbox'
+import { styled } from '../styles'
+
+export const CheckboxRoot = styled(CheckboxPrimitive.Root)
+export const CheckboxIndicator = styled(CheckboxPrimitive.Indicator)
diff --git a/packages/@green-stack-core/forms/RadioGroup.primitives.tsx b/packages/@green-stack-core/forms/RadioGroup.primitives.tsx
new file mode 100644
index 0000000..f40e756
--- /dev/null
+++ b/packages/@green-stack-core/forms/RadioGroup.primitives.tsx
@@ -0,0 +1,6 @@
+import * as RadioGroup from '@rn-primitives/radio-group'
+import { styled } from '../styles'
+
+export const RadioGroupRoot = styled(RadioGroup.Root)
+export const RadioGroupItem = styled(RadioGroup.Item)
+export const RadioGroupIndicator = styled(RadioGroup.Indicator)
diff --git a/packages/@green-stack-core/forms/Select.primitives.tsx b/packages/@green-stack-core/forms/Select.primitives.tsx
new file mode 100644
index 0000000..d653154
--- /dev/null
+++ b/packages/@green-stack-core/forms/Select.primitives.tsx
@@ -0,0 +1,21 @@
+import * as SelectPrimitive from '@rn-primitives/select'
+import { styled } from '../styles'
+
+export const SelectRoot = styled(SelectPrimitive.Root)
+export const SelectContent = styled(SelectPrimitive.Content)
+export const SelectGroup = styled(SelectPrimitive.Group)
+export const SelectItem = styled(SelectPrimitive.Item)
+export const SelectItemIndicator = styled(SelectPrimitive.ItemIndicator)
+export const SelectItemText = styled(SelectPrimitive.ItemText)
+export const SelectLabel = styled(SelectPrimitive.Label)
+export const SelectOverlay = styled(SelectPrimitive.Overlay)
+export const SelectScrollDownButton = styled(SelectPrimitive.ScrollDownButton)
+export const SelectScrollUpButton = styled(SelectPrimitive.ScrollUpButton)
+export const SelectSeparator = styled(SelectPrimitive.Separator)
+export const SelectTrigger = styled(SelectPrimitive.Trigger)
+export const SelectValue = styled(SelectPrimitive.Value)
+export const SelectPortal = styled(SelectPrimitive.Portal)
+export const SelectViewport = styled(SelectPrimitive.Viewport)
+
+export const useSelectItemContext = SelectPrimitive.useItemContext
+export const useSelectRootContext = SelectPrimitive.useRootContext
diff --git a/packages/@green-stack-core/forms/Switch.primitives.tsx b/packages/@green-stack-core/forms/Switch.primitives.tsx
new file mode 100644
index 0000000..1918cf9
--- /dev/null
+++ b/packages/@green-stack-core/forms/Switch.primitives.tsx
@@ -0,0 +1,5 @@
+import * as SwitchPrimitive from '@rn-primitives/switch'
+import { styled } from '../styles'
+
+export const SwitchRoot = styled(SwitchPrimitive.Root)
+export const SwitchThumb = styled(SwitchPrimitive.Thumb)
diff --git a/packages/@green-stack-core/forms/TextInput.primitives.tsx b/packages/@green-stack-core/forms/TextInput.primitives.tsx
new file mode 100644
index 0000000..e61ed45
--- /dev/null
+++ b/packages/@green-stack-core/forms/TextInput.primitives.tsx
@@ -0,0 +1,18 @@
+import { styled } from '../styles'
+import { TextInput as RNTextInput } from 'react-native'
+import { cssInterop } from 'nativewind'
+
+export const TextInput = styled(cssInterop(RNTextInput, {
+ className: {
+ target: "style", // map className->style
+ nativeStyleToProp: {
+ textAlign: true, // extract `textAlign` styles and pass them to the `textAlign` prop
+ },
+ },
+ placeholderClassName: {
+ target: false, // Don't pass this as a prop
+ nativeStyleToProp: {
+ color: "placeholderTextColor", // extract `color` and pass it to the `placeholderTextColor` prop
+ },
+ },
+}))
diff --git a/packages/@green-stack-core/forms/tests/useFormState.test.ts b/packages/@green-stack-core/forms/tests/useFormState.test.ts
new file mode 100644
index 0000000..9d06712
--- /dev/null
+++ b/packages/@green-stack-core/forms/tests/useFormState.test.ts
@@ -0,0 +1,368 @@
+// @ts-ignore
+import { expect, test } from 'bun:test'
+import { renderHook, act } from '@testing-library/react'
+import { useFormState } from '../useFormState'
+import { z, schema } from '../../schemas'
+
+/* --- Test Data ------------------------------------------------------------------------------- */
+
+const User = schema('User', {
+ name: z.string().default('Thorr'),
+ age: z.number().default(31),
+})
+
+type User = z.infer
+
+/* --- Form State Essentials ------------------------------------------------------------------- */
+
+test('passing `initialValues` to useFormState() should apply the correct initial values', () => {
+ // Hook
+ const { result } = renderHook(() => useFormState(User, {
+ initialValues: { name: 'Loki', age: 29 },
+ }))
+
+ // Expect
+ expect(result.current.values).toEqual({ name: 'Loki', age: 29 })
+})
+
+test('formState.values should apply the correct defaults from the zod schema if no initialValues were provided', () => {
+ // Hook
+ const { result } = renderHook(() => useFormState(User))
+
+ // Expect
+ expect(result.current.values).toEqual({ name: 'Thorr', age: 31 })
+})
+
+test('formState.setValues() should update the entire form state', () => {
+ // Hook
+ const { result } = renderHook(() => useFormState(User))
+
+ // Act
+ act(() => {
+ result.current.setValues({ name: 'Loki', age: 29 })
+ })
+
+ // Expect
+ expect(result.current.values).toEqual({ name: 'Loki', age: 29 })
+})
+
+test('formState.getValue() should return the correct value for the given form field', () => {
+ // Hook
+ const { result } = renderHook(() => useFormState(User))
+
+ // Act
+ act(() => {
+ result.current.setValues({ name: 'Loki', age: 29 })
+ })
+
+ // Expect
+ const name = result.current.getValue('name')
+ expect(name).toEqual('Loki')
+ const age = result.current.getValue('age')
+ expect(age).toEqual(29)
+})
+
+test('formState.handleChange() should update the correct value for the given form field', () => {
+ // Hook
+ const { result } = renderHook(() => useFormState(User))
+
+ // Act
+ act(() => {
+ result.current.handleChange('name', 'Loki')
+ })
+
+ // Expect
+ expect(result.current.values).toEqual({ name: 'Loki', age: 31 })
+})
+
+test('formState.getChangeHandler() should return the correct handler for the given form field', () => {
+ // Hook
+ const { result } = renderHook(() => useFormState(User))
+
+ // Act
+ const changeName = result.current.getChangeHandler('name')
+ act(() => {
+ changeName('Loki')
+ })
+
+ // Expect
+ expect(result.current.values).toEqual({ name: 'Loki', age: 31 })
+})
+
+test('formState.validate() should return the correct validation result', () => {
+ // Hook
+ const { result, rerender } = renderHook(() => useFormState(User))
+
+ const changeName = result.current.getChangeHandler('name')
+
+ // @ts-expect-error
+ changeName(2)
+
+ rerender()
+
+ // Validate
+ const isValid = result.current.validate()
+
+ rerender()
+
+ // Expect
+ expect(isValid).toBe(false)
+ expect(result.current.errors.age).toBeUndefined()
+ expect(result.current.errors.name).toBeDefined()
+ expect(result.current.errors.name).toHaveLength(1)
+})
+
+test('formState.validate() should populate errors with our custom error messages if provided', () => {
+ // Custom error messages
+ const errNoName = 'Please fill in a name'
+ const errNoAge = 'Please provide your age'
+
+ // Schema with custom error messages
+ const User2 = schema('User', {
+ name: z.string({ message: errNoName }).default('Thorr'),
+ age: z.number({ message: errNoAge }).default(31),
+ })
+
+ // Hook
+ const { result, rerender } = renderHook(() => useFormState(User2))
+
+ const changeName = result.current.getChangeHandler('name')
+ const changeAge = result.current.getChangeHandler('age')
+
+ // @ts-expect-error
+ changeName(0)
+
+ // @ts-expect-error
+ changeAge('')
+
+ // Validate
+ rerender()
+ result.current.validate()
+ rerender()
+
+ // Expect
+ expect(result.current.errors).toEqual({
+ name: [errNoName],
+ age: [errNoAge],
+ })
+})
+
+test('passing `validateOnChange: true` to useFormState() should update validation errors on every change', () => {
+ // Hook
+ const { result, rerender } = renderHook(() => useFormState(User, { validateOnChange: true }))
+
+ const changeName = result.current.getChangeHandler('name') // @ts-expect-error
+ changeName(2)
+ rerender()
+
+ // Expect
+ expect(result.current.errors.name).toBeDefined()
+ expect(result.current.errors.name).toHaveLength(1)
+})
+
+test('formState.hasError() should return the correct error status for the given form field', () => {
+ // Hook
+ const { result, rerender } = renderHook(() => useFormState(User))
+
+ // @ts-expect-error
+ result.current.handleChange('name', 2)
+ rerender()
+
+ // Validate
+ result.current.validate()
+ rerender()
+
+ // Expect
+ expect(result.current.hasError('name')).toBe(true)
+ expect(result.current.hasError('age')).toBe(false)
+})
+
+test('formState.updateErrors() should update the errors for the entire form state', () => {
+ // Hook
+ const { result } = renderHook(() => useFormState(User))
+
+ // Act
+ act(() => {
+ result.current.updateErrors({ name: ['Please fill in a name'] })
+ })
+
+ // Expect
+ expect(result.current.errors).toEqual({ name: ['Please fill in a name'] })
+})
+
+test('formState.getErrors() should return the correct errors for the given form field', () => {
+ // Hook
+ const { result } = renderHook(() => useFormState(User))
+
+ // Act
+ act(() => {
+ result.current.updateErrors({ name: ['Please fill in a name'] })
+ })
+
+ // Expect
+ expect(result.current.getErrors('name')).toEqual(['Please fill in a name'])
+ expect(result.current.getErrors('age')).toEqual([])
+})
+
+test('formState.isValid should return the correct form validation status without needing to validate first', () => {
+ // Hook
+ const { result } = renderHook(() => useFormState(User))
+
+ // -- Unhappy path --
+
+ const changeName = result.current.getChangeHandler('name')
+
+ act(() => {
+ // @ts-expect-error
+ changeName(2)
+ })
+
+ expect(result.current.isValid).toBe(false)
+
+ // -- Happy path --
+
+ act(() => {
+ changeName('Loki')
+ })
+
+ expect(result.current.isValid).toBe(true)
+})
+
+test('formState.isUnsaved should return the correct form unsaved status', () => {
+ // Hook
+ const { result } = renderHook(() => useFormState(User))
+
+ // -- Start --
+
+ expect(result.current.isUnsaved).toBe(false)
+
+ // -- Edits made --
+
+ act(() => {
+ result.current.handleChange('name', 'Loki')
+ })
+
+ expect(result.current.isUnsaved).toBe(true)
+
+ // -- Reverted --
+
+ act(() => {
+ result.current.setValues({ name: 'Thorr', age: 31 })
+ })
+
+ expect(result.current.isUnsaved).toBe(false)
+})
+
+test('formState.clearErrors() should clear all errors until validated again', () => {
+ // Hook
+ const { result } = renderHook(() => useFormState(User))
+
+ // Act
+ act(() => {
+ result.current.updateErrors({ name: ['Please fill in a name'] })
+ })
+
+ // Expect
+ expect(result.current.errors.name).toBeDefined()
+
+ // Act
+ act(() => {
+ result.current.clearErrors()
+ })
+
+ // Expect
+ expect(result.current.errors.name).toBeUndefined()
+})
+
+test('formState.clearForm() should clear the form values, applying only the schema defaults', () => {
+ // Hook
+ const { result } = renderHook(() => useFormState(
+ User, // Has age: 31 as default
+ { initialValues: { age: 29 } }, // Should be ignored when using clearForm()
+ ))
+
+ // Act
+ act(() => {
+ result.current.setValues((prev) => ({ ...prev, name: 'Loki' }))
+ })
+
+ // Expect
+ expect(result.current.values).toEqual({ name: 'Loki', age: 29 })
+
+ // Act
+ act(() => {
+ result.current.clearForm()
+ })
+
+ // Expect
+ expect(result.current.values).toEqual({ name: 'Thorr', age: 31 })
+})
+
+test('formState.resetForm() should reset the form to its original state using initialValues & schema defaults', () => {
+ // Hook
+ const { result } = renderHook(() => useFormState(User, {
+ initialValues: { name: 'Loki', age: 29 },
+ }))
+
+ // Act
+ act(() => {
+ result.current.setValues({ name: 'Hulk', age: 34 })
+ })
+
+ // Expect
+ expect(result.current.values).toEqual({ name: 'Hulk', age: 34 })
+
+ // Act
+ act(() => {
+ result.current.resetForm()
+ })
+
+ // Expect
+ expect(result.current.values).toEqual({ name: 'Loki', age: 29 })
+})
+
+test('formState.getInputProps() should return value, error state and handlers for the given form field', () => {
+ // Hook
+ const { result } = renderHook(() => useFormState(User))
+
+ // Act
+ const nameInputProps = result.current.getInputProps('name')
+
+ // Act
+ act(() => {
+ nameInputProps.onChange('Loki')
+ })
+
+ // Expect
+ expect(result.current.values.name).toEqual('Loki')
+ expect(result.current.getInputProps('name')).toEqual({
+ value: 'Loki',
+ onChange: expect.any(Function),
+ onBlur: expect.any(Function),
+ onFocus: expect.any(Function),
+ hasError: false,
+ })
+})
+
+test('formState.getTextInputProps() should return text value, error state and handlers for the given text input field', () => {
+ // Hook
+ const { result } = renderHook(() => useFormState(User))
+
+ // Act
+ const nameInputProps = result.current.getTextInputProps('name')
+
+ // Act
+ act(() => {
+ nameInputProps.onChangeText('Loki')
+ })
+
+ // Expect
+ expect(result.current.values.name).toEqual('Loki')
+ expect(result.current.getTextInputProps('name')).toEqual({
+ value: 'Loki',
+ onChangeText: expect.any(Function),
+ onBlur: expect.any(Function),
+ onFocus: expect.any(Function),
+ hasError: false,
+ })
+})
diff --git a/packages/@green-stack-core/forms/useFormState.ts b/packages/@green-stack-core/forms/useFormState.ts
new file mode 100644
index 0000000..1c716e7
--- /dev/null
+++ b/packages/@green-stack-core/forms/useFormState.ts
@@ -0,0 +1,216 @@
+import { useState, useMemo, useEffect } from 'react'
+import { z } from '@green-stack/schemas'
+import { isEmpty } from '../utils/commonUtils'
+import { createKey } from '../utils/objectUtils'
+
+/** --- useFormState() ------------------------------------------------------------------------- */
+/** -i- Returns a set of form management tools to handle form state, including validation, errors and even the required props to add to inputs */
+export const useFormState = <
+ S extends z.ZodRawShape,
+ T extends z.infer> = z.infer>,
+ K extends keyof z.infer> = keyof z.infer>,
+ E extends Partial> = Partial>
+>(
+ schema: z.ZodObject,
+ options: {
+ initialValues?: Partial,
+ validateOnBlur?: boolean,
+ validateOnChange?: boolean,
+ syncFromPropsKey?: string,
+ } = {},
+) => {
+
+ // Props
+ const { validateOnBlur, validateOnChange, syncFromPropsKey = 'none' } = options
+ const initialValues = (options.initialValues || {}) as T
+ const initialValuesKey = createKey(initialValues)
+
+ // Initial
+ const initialState = useMemo(() => {
+ return schema.applyDefaults(initialValues, { stripUnknown: true }) as T
+ }, [schema, initialValuesKey])
+
+ // State
+ const [values, setValues] = useState(initialState)
+ const [errors, updateErrors] = useState({} as E)
+
+ // Vars
+ const defaultsKey = createKey(initialState)
+ const valuesKey = createKey(values)
+
+ // -- Memos --
+
+ const isDefaultState = useMemo(() => {
+ return valuesKey === defaultsKey
+ }, [valuesKey, defaultsKey])
+
+ // -- Validation --
+
+ const validate = (showErrors = true) => {
+ // Parse values
+ const validationResult = schema.safeParse(values)
+ const validationError = validationResult.error
+ // Set errors if invalid
+ if (showErrors && validationError) {
+ const zodIssues = validationError.issues.flat()
+ const fieldErrors = zodIssues.reduce((acc, issue) => {
+ const key = issue.path.join('.') as K
+ const message = issue.message
+ return { ...acc, [key]: [...(acc[key] || []), message] }
+ }, {} as E)
+ updateErrors(fieldErrors)
+ }
+ // Clear errors if valid
+ const shouldUpdateErrors = !validationError && !isEmpty(errors) && showErrors
+ if (shouldUpdateErrors) updateErrors({} as E)
+ // Return state validity
+ return validationResult.success
+ }
+
+ // -- Handlers --
+
+ const handleChange = (key: KEY, value: T[KEY]) => {
+ setValues((prev) => ({ ...prev, [key]: value }))
+ }
+
+ const resetForm = () => {
+ setValues(initialState)
+ updateErrors({} as E)
+ }
+
+ const clearForm = () => {
+ setValues(schema.applyDefaults({}) as T)
+ updateErrors({} as E)
+ }
+
+ const clearErrors = () => updateErrors({} as E)
+
+ // -- Methods --
+
+ const hasError = (key: KEY) => !isEmpty(errors[key])
+
+ const getValue = (key: KEY) => values[key]
+
+ const getErrors = (key: KEY) => errors[key] || ([] as string[])
+
+ const getChangeHandler = (key: KEY) => {
+ return (value: VAL) => handleChange(key, value)
+ }
+
+ // -- Connectors --
+
+ const getInputProps = (key: KEY, ) => ({
+ value: values[key],
+ onChange: getChangeHandler(key),
+ onBlur: () => validateOnBlur && validate(),
+ onFocus: () => validateOnBlur && validate(),
+ hasError: hasError(key),
+ })
+
+ const getTextInputProps = (key: KEY) => {
+ const { onChange, value, ...inputProps } = getInputProps(key)
+ return { ...inputProps, value: value || '', onChangeText: onChange }
+ }
+
+ const getNumberTextInputProps = (key: KEY) => {
+ const { onChange, ...inputProps } = getInputProps(key)
+ return {
+ ...inputProps,
+ value: inputProps.value ? `${values[key]}` : '',
+ onChangeText: (value = '') => {
+ // Strip non-numeric characters
+ const strippedValue = value.replace(/[^0-9]/g, '')
+ // If empty, show placeholder
+ if (!strippedValue) return onChange(undefined as T[KEY])
+ // Convert to number
+ const numberValue = +strippedValue
+ // @ts-ignore
+ onChange(numberValue)
+ },
+ }
+ }
+
+ const getSelectInputProps = (key: KEY) => {
+ const { onChange, ...inputProps } = getInputProps(key)
+ return {
+ ...inputProps,
+ onChange: (value: string) => onChange(value as T[KEY]),
+ }
+ }
+
+ const getCheckableInputProps = (key: KEY) => {
+ const { onChange, value, ...inputProps } = getInputProps(key)
+ return {
+ ...inputProps,
+ checked: !!value,
+ onCheckedChange: (checked: boolean) => onChange(checked as T[KEY]),
+ }
+ }
+
+ // -- Flags --
+
+ const isValid = validate(false)
+ const isUnsaved = !isDefaultState
+
+ // -- Effects --
+
+ useEffect(() => {
+ if (validateOnChange) validate()
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [valuesKey])
+
+ useEffect(() => {
+ setValues(schema.applyDefaults(initialState, { stripUnknown: true }) as T)
+ }, [syncFromPropsKey])
+
+ // -- Return --
+
+ return {
+ /** -i- The current values of the form */
+ values,
+ /** -i- Sets the entire form state to the provided values */
+ setValues,
+ /** -i- Gets the form value for the provided field key */
+ getValue,
+ /** -i- Sets the form value for the provided field key */
+ setValue: handleChange,
+ /** -i- Sets the form value for the provided field key */
+ handleChange,
+ /** -i- Gets the change handler for the provided field key */
+ getChangeHandler,
+ /** -i- Validates the form state, sets errors if not, and returns whether it is valid or not */
+ validate,
+ /** -i- Whether the form is valid */
+ isValid,
+ /** -i- Whether the form is unsaved */
+ isUnsaved,
+ /** -i- Whether the form is in its default state */
+ isDefaultState,
+ /** -i- The current errors of the form */
+ errors,
+ /** -i- Sets the errors for the form */
+ updateErrors,
+ /** -i- Gets the errors for the provided field key */
+ getErrors,
+ /** -i- Whether the provided field key has an error */
+ hasError,
+ /** -i- Clears all errors until validated again */
+ clearErrors,
+ /** -i- Clears the form values, applying only the schema defaults */
+ clearForm,
+ /** -i- Resets the form to its original state using initialValues & schema defaults */
+ resetForm,
+ /** -i- The props to add to an input to manage its state */
+ getInputProps,
+ /** -i- The props to add to a text input to manage its state, uses `onTextChange` instead */
+ getTextInputProps,
+ /** -i- The props to add to a number input to manage its state, uses `onTextChange` instead */
+ getNumberTextInputProps,
+ /** -i- The props to add to a select input to manage its state */
+ getSelectInputProps,
+ /** -i- The props to add to a toggle / radio / checkbox input to manage its state, uses `onCheckedChange` instead */
+ getCheckableInputProps,
+ /** -i- The key of the current form values, good for use in hook dependencies to trigger recalculations */
+ valuesKey,
+ }
+}
diff --git a/packages/@green-stack-core/generators/add-dependencies.docs.mdx b/packages/@green-stack-core/generators/add-dependencies.docs.mdx
new file mode 100644
index 0000000..cbd0411
--- /dev/null
+++ b/packages/@green-stack-core/generators/add-dependencies.docs.mdx
@@ -0,0 +1,56 @@
+import { FileTree } from 'nextra/components'
+import { Image } from '@app/primitives'
+import { TitleWrapper } from '@app/docs/components/Hidden'
+
+
+ ## `add-dependencies` - Script
+
+
+
+```
+
+```md copy
+npx turbo gen dependencies --args
+```
+
+Less of a generator and more of a utility script, this generator **installs Expo SDK compatible versions** of the specified dependencies in the selected workspace's `package.json`.
+
+
+
+
+
+
+
+
+
+
+
+
+### Prompt Arguments
+
+| Argument | Type | Question / Description |
+|---------------|--------------|-----------------------------------------------------------------------------------------------------------|
+| workspacePath | autocomplete | Where would you like to install these dependencies?
+
+### Resulting File Changes
+
+```bash
+# Installs dependencies in the selected workspace's package.json βοΈ
+```
+
+
diff --git a/packages/@green-stack-core/generators/add-dependencies.ts b/packages/@green-stack-core/generators/add-dependencies.ts
new file mode 100644
index 0000000..0463c36
--- /dev/null
+++ b/packages/@green-stack-core/generators/add-dependencies.ts
@@ -0,0 +1,116 @@
+/* eslint-disable import/no-anonymous-default-export */
+import { PlopTypes } from '@turbo/gen'
+import { parseWorkspaces, a } from '../scripts/helpers/scriptUtils'
+import { createPrompts } from '../scripts/helpers/scriptUtils'
+import { execSync } from 'child_process'
+import fs from 'fs'
+
+/* --- Disclaimer ------------------------------------------------------------------------------ */
+
+// -i- Learn more about Turborepo Generators at:
+// -i- https://turbo.build/repo/docs/core-concepts/monorepos/code-generation
+
+/* --- Usage ----------------------------------------------------------------------------------- */
+
+// -i- npm run add:dependencies -- --args
+// -i- npx turbo gen dependencies --args
+
+/* --- Constants ------------------------------------------------------------------------------- */
+
+const { workspacePackages } = parseWorkspaces('./', true)
+
+/* --- Prompts --------------------------------------------------------------------------------- */
+
+export const gen = createPrompts({
+
+ workspacePkg: {
+ type: 'autocomplete',
+ message: `Where would you like to install these dependencies?`, // @ts-ignore
+ choices: workspacePackages,
+ },
+ dependencies: {
+ type: 'input',
+ message: `Which dependencies should we install the Expo SDK compatible versions for? ${a.muted('(separated by spaces)')}`,
+ },
+
+}, {
+
+ compute: {
+ dependencies: {
+ validate: (value) => !!value,
+ },
+ },
+
+ parser: (answers) => {
+
+ // Args
+ const { workspacePkg } = answers!
+
+ // -- Vars --
+
+ const dependencies = answers!.dependencies.split(' ')
+ const depList = dependencies.join(' ')
+
+ // -- Return --
+
+ return {
+ workspacePkg,
+ dependencies,
+ depList,
+ }
+
+ },
+
+})
+
+/* --- Types ----------------------------------------------------------------------------------- */
+
+type Answers = typeof gen._values
+type Context = typeof gen._parsed
+
+/** --- Dependency Installer ------------------------------------------------------------------- */
+/** -i- Install Expo SDK compatible dependencies in a workspace */
+export const registerDependencyGenerator = (plop: PlopTypes.NodePlopAPI) => {
+ plop.setGenerator('add-dependencies', {
+ description: 'Install Expo SDK compatible dependencies in a workspace',
+ prompts: gen.prompts,
+ actions: (data: GenAnswers) => {
+
+ // Args
+ const ctx = gen.parseAnswers(data)
+
+ // Log out the dependencies
+ console.log('\n', `> Installing Expo SDK compatible packages ${ctx.depList} in '${ctx.workspacePkg}' workspace`) // prettier-ignore
+
+ // Read the @app/expo package json
+ const originalExpoPackageJsonFile = fs.readFileSync(`apps/expo/package.json`, 'utf-8')
+ const originalExpoPackageJson = JSON.parse(originalExpoPackageJsonFile) // prettier-ignore
+ const originalDeps = originalExpoPackageJson.dependencies
+
+ // Install the new dependencies in @app/expo
+ const output = execSync(`npm -w @app/expo run add-dependencies ${ctx.depList}`) // prettier-ignore
+ const loggableOutput = output.toString().split('\n').slice(0, 9).join('\n')
+ console.log(loggableOutput)
+
+ // Extract the new dependencies from the package json
+ const newExpoPackageJson = JSON.parse(fs.readFileSync(`apps/expo/package.json`, 'utf-8')) // prettier-ignore
+ const newDeps = Object.entries(newExpoPackageJson.dependencies).filter(([pkg]) => !originalDeps[pkg]) // prettier-ignore
+
+ // Restore the old package json
+ fs.writeFileSync(`apps/expo/package.json`, originalExpoPackageJsonFile)
+
+ // Add the new dependencies to the chosen workspace
+ const installStatements = newDeps.map(([pkg, v]) => `${pkg}@${v}`).join(' ')
+ console.log(`> Moving ${installStatements} to '${ctx.workspacePkg}' workspace`)
+ execSync(`npm -w ${ctx.workspacePkg} install ${installStatements} --force`)
+ console.log(`> Install successfull`, '\n')
+
+ // Log out the dependency list
+ const lsOutput = execSync(`npm ls ${ctx.depList}`)
+ console.log(lsOutput.toString())
+
+ // Actions
+ return []
+ },
+ })
+}
diff --git a/packages/@green-stack-core/generators/add-form.docs.mdx b/packages/@green-stack-core/generators/add-form.docs.mdx
new file mode 100644
index 0000000..41af0e8
--- /dev/null
+++ b/packages/@green-stack-core/generators/add-form.docs.mdx
@@ -0,0 +1,57 @@
+import { FileTree } from 'nextra/components'
+import { Image } from '@app/primitives'
+import { TitleWrapper } from '@app/docs/components/Hidden'
+
+
+ ## `add-form` - Generator
+
+
+
+```
+
+```md copy
+npx turbo gen add-form --args
+```
+
+
+
+
+
+
+
+
+
+
+
+
+### Prompt Arguments
+
+| Argument | Type | Question / Description |
+|---------------|--------------|-----------------------------------------------------------------------------------|
+| workspacePath | autocomplete | Where would you like to add this form?
+
+### Resulting File Changes
+
+```bash
+/{workspacePath}/ # <- e.g. 'features/@app-core/' or 'packages/some-package/'
+ βββ hooks/
+ βββ {formHookName}.ts βοΈ # <- Will integrate with chosen / new schema
+```
+
+
diff --git a/packages/@green-stack-core/generators/add-form.ts b/packages/@green-stack-core/generators/add-form.ts
new file mode 100644
index 0000000..0618576
--- /dev/null
+++ b/packages/@green-stack-core/generators/add-form.ts
@@ -0,0 +1,47 @@
+/* eslint-disable import/no-anonymous-default-export */
+import { PlopTypes } from '@turbo/gen'
+import { a, createPrompts } from '@green-stack/core/scripts/helpers/scriptUtils'
+import open from 'open'
+
+/* --- Disclaimer ------------------------------------------------------------------------------ */
+
+// -i- Learn more about Turborepo Generators at:
+// -i- https://turbo.build/repo/docs/core-concepts/monorepos/code-generation
+
+/* --- Prompts --------------------------------------------------------------------------------- */
+
+export const gen = createPrompts({
+
+ upgrade: {
+ type: 'confirm',
+ message: [
+ `${a.bold('This generator is a premium feature', true)}.\n`,
+ `--------------------------------------------------------------------------------------`,
+ `π Upgrade to ${a.green('FullProduct.dev')} to unlock all generators, git plugins and support?`,
+ `--------------------------------------------------------------------------------------\n\n`,
+ ].join('\n'),
+ }
+
+})
+
+/** --- Form Generator ------------------------------------------------------------------------- */
+/** -i- Add a new form */
+export const registerFormGenerator = (plop: PlopTypes.NodePlopAPI) => {
+ plop.setGenerator('form', {
+ description: 'Add a new form',
+ prompts: gen.prompts,
+ actions: (data: GenAnswers) => {
+
+ // Args
+ const ctx = gen.parseAnswers(data)
+
+ // -- Actions --
+
+ if (ctx.upgrade) open('https://fullproduct.dev?v=demo-gen-add-form')
+
+ // -- Generate --
+
+ return [] as PlopTypes.ActionType[]
+ },
+ })
+}
diff --git a/packages/@green-stack-core/generators/add-generator.docs.mdx b/packages/@green-stack-core/generators/add-generator.docs.mdx
new file mode 100644
index 0000000..b30256f
--- /dev/null
+++ b/packages/@green-stack-core/generators/add-generator.docs.mdx
@@ -0,0 +1,58 @@
+import { FileTree } from 'nextra/components'
+import { Image } from '@app/primitives'
+import { TitleWrapper } from '@app/docs/components/Hidden'
+
+
+ ## `add-generator` - Generator
+
+
+
+```
+
+```md copy
+npx turbo gen generator --args
+```
+
+
+
+
+
+
+
+
+
+
+
+
+### Prompt Arguments
+
+| Argument | Type | Question / Description |
+|-----------------|--------------|--------------------------------------------------------------------------------|
+| workspacePath | autocomplete | Where would you like to add this generator?
+
+### Resulting File Changes
+
+```bash
+/{workspacePath}/ # <- e.g. 'features/@app-core/' or 'packages/some-package/'
+ βββ generators/
+ βββ add-{generatedEntity}.ts βοΈ
+
+package.json β # <- adds a root package.json script as well
+```
+
+
diff --git a/packages/@green-stack-core/generators/add-generator.ts b/packages/@green-stack-core/generators/add-generator.ts
new file mode 100644
index 0000000..ba08445
--- /dev/null
+++ b/packages/@green-stack-core/generators/add-generator.ts
@@ -0,0 +1,47 @@
+/* eslint-disable import/no-anonymous-default-export */
+import { PlopTypes } from '@turbo/gen'
+import { a, createPrompts } from '../scripts/helpers/scriptUtils'
+import open from 'open'
+
+/* --- Disclaimer ------------------------------------------------------------------------------ */
+
+// -i- Learn more about Turborepo Generators at:
+// -i- https://turbo.build/repo/docs/core-concepts/monorepos/code-generation
+
+/* --- Prompts --------------------------------------------------------------------------------- */
+
+export const gen = createPrompts({
+
+ upgrade: {
+ type: 'confirm',
+ message: [
+ `${a.bold('This generator is a premium feature', true)}.\n`,
+ `--------------------------------------------------------------------------------------`,
+ `π Upgrade to ${a.green('FullProduct.dev')} to unlock all generators, git plugins and support?`,
+ `--------------------------------------------------------------------------------------\n\n`,
+ ].join('\n'),
+ }
+
+})
+
+/** --- Generator Generator -------------------------------------------------------------------- */
+/** -i- Add a new turborepo generator to a workspace */
+export const registerGeneratorGenerator = (plop: PlopTypes.NodePlopAPI) => {
+ plop.setGenerator('generator', {
+ description: 'Add a new turborepo generator to a workspace',
+ prompts: gen.prompts,
+ actions: (data: GenAnswers) => {
+
+ // Args
+ const ctx = gen.parseAnswers(data)
+
+ // -- Actions --
+
+ if (ctx.upgrade) open('https://fullproduct.dev?v=demo-gen-add-generator')
+
+ // -- Generate --
+
+ return [] as PlopTypes.ActionType[]
+ },
+ })
+}
diff --git a/packages/@green-stack-core/generators/add-resolver.docs.mdx b/packages/@green-stack-core/generators/add-resolver.docs.mdx
new file mode 100644
index 0000000..f9c5e77
--- /dev/null
+++ b/packages/@green-stack-core/generators/add-resolver.docs.mdx
@@ -0,0 +1,75 @@
+import { FileTree } from 'nextra/components'
+import { Image } from '@app/primitives'
+import { TitleWrapper } from '@app/docs/components/Hidden'
+
+
+ ## `add-resolver` - Generator
+
+
+ ...
+```
+
+```md copy
+npx turbo gen resolver --args ...
+```
+
+
+
+
+
+
+
+
+
+
+
+
+### Prompt Arguments
+
+| Argument | Type | Question / Description |
+|---------------------|--------------|------------------------------------------------------------------------------------------------------------------------------|
+| workspacePath | autocomplete | Where would you like to add this resolver?
+
+### Resulting File Changes
+
+```bash
+/apps/next/
+ βββ app/(generated)/{routePath}/route.ts βοΈ # <- e.g. '/api/some/endpoint/with/[params]/' (Next.js route handler)
+
+/{workspacePath}/ # <- e.g. 'features/@app-core/' or 'packages/some-package/'
+ βββ resolvers/
+ βββ {resolverName}.bridge.ts βοΈ # <- Bridge Metadata file for the resolver and API
+ βββ {resolverName}.resolver.ts βοΈ # <- Reusable Fn with Business logic (server only)
+ βββ {resolverName}.{resolverType}.ts βοΈ # <- e.g. `query` / `mutation` fetcher
+ βββ routes/
+ βββ {apiPath}/ βοΈ # <- e.g. '/api/some/endpoint/with/[params]/'
+ βββ route.ts βοΈ # <- If `GET` / `POST` / `PUT` / `DELETE` / `GRAPHQL` was selected
+ βββ hooks/
+ βββ {formHookFileName}.ts βοΈ # <- If `formHook` selected, e.g. `useResolverFormState.ts`
+```
+
+
diff --git a/packages/@green-stack-core/generators/add-resolver.ts b/packages/@green-stack-core/generators/add-resolver.ts
new file mode 100644
index 0000000..131bbc2
--- /dev/null
+++ b/packages/@green-stack-core/generators/add-resolver.ts
@@ -0,0 +1,47 @@
+/* eslint-disable import/no-anonymous-default-export */
+import { PlopTypes } from '@turbo/gen'
+import { a, createPrompts } from '../scripts/helpers/scriptUtils'
+import open from 'open'
+
+/* --- Disclaimer ------------------------------------------------------------------------------ */
+
+// -i- Learn more about Turborepo Generators at:
+// -i- https://turbo.build/repo/docs/core-concepts/monorepos/code-generation
+
+/* --- Prompts --------------------------------------------------------------------------------- */
+
+export const gen = createPrompts({
+
+ upgrade: {
+ type: 'confirm',
+ message: [
+ `${a.bold('This generator is a premium feature', true)}.\n`,
+ `--------------------------------------------------------------------------------------`,
+ `π Upgrade to ${a.green('FullProduct.dev')} to unlock all generators, git plugins and support?`,
+ `--------------------------------------------------------------------------------------\n\n`,
+ ].join('\n'),
+ }
+
+})
+
+/** --- Resolver Generator --------------------------------------------------------------------- */
+/** -i- Add a new resolver */
+export const registerResolverGenerator = (plop: PlopTypes.NodePlopAPI) => {
+ plop.setGenerator('resolver', {
+ description: 'Add a new resolver',
+ prompts: gen.prompts,
+ actions: (data: GenAnswers) => {
+
+ // Args
+ const ctx = gen.parseAnswers(data)
+
+ // -- Actions --
+
+ if (ctx.upgrade) open('https://fullproduct.dev?v=demo-gen-add-resolver')
+
+ // -- Generate --
+
+ return [] as PlopTypes.ActionType[]
+ },
+ })
+}
diff --git a/packages/@green-stack-core/generators/add-route.docs.mdx b/packages/@green-stack-core/generators/add-route.docs.mdx
new file mode 100644
index 0000000..029426e
--- /dev/null
+++ b/packages/@green-stack-core/generators/add-route.docs.mdx
@@ -0,0 +1,66 @@
+import { FileTree } from 'nextra/components'
+import { Image } from '@app/primitives'
+import { TitleWrapper } from '@app/docs/components/Hidden'
+
+
+ ## `add-route` - Generator
+
+
+
+```
+
+```md copy
+npx turbo gen route --args
+```
+
+
+
+
+
+
+
+
+
+
+
+
+### Prompt Arguments
+
+| Argument | Type | Question / Description |
+|------------------|--------------|--------------------------------------------------------------------------------|
+| workspacePath | autocomplete | Where would you like to add this route?
+
+### Resulting File Changes
+
+```bash
+/apps/expo/
+ βββ app/(generated)/{routePath}/index.tsx βοΈ # <- e.g. '/posts/[slug]/' (expo-router)
+/apps/next/
+ βββ app/(generated)/{routePath}/page.tsx βοΈ # <- e.g. '/posts/[slug]/' (Next.js app router)
+
+/{workspacePath}/ # <- e.g. 'features/@app-core/' or 'packages/some-package/'
+ βββ screens/
+ βββ {ScreenName}.tsx βοΈ
+ βββ routes/
+ βββ {routePath}/ βοΈ # <- e.g. '/posts/[slug]/'
+ βββ index.tsx βοΈ # -> re-exported to `@app/next` and `@app/expo`
+```
+
+
diff --git a/packages/@green-stack-core/generators/add-route.ts b/packages/@green-stack-core/generators/add-route.ts
new file mode 100644
index 0000000..f799cf7
--- /dev/null
+++ b/packages/@green-stack-core/generators/add-route.ts
@@ -0,0 +1,47 @@
+/* eslint-disable import/no-anonymous-default-export */
+import { PlopTypes } from '@turbo/gen'
+import { a, createPrompts } from '@green-stack/core/scripts/helpers/scriptUtils'
+import open from 'open'
+
+/* --- Disclaimer ------------------------------------------------------------------------------ */
+
+// -i- Learn more about Turborepo Generators at:
+// -i- https://turbo.build/repo/docs/core-concepts/monorepos/code-generation
+
+/* --- Prompts --------------------------------------------------------------------------------- */
+
+export const gen = createPrompts({
+
+ upgrade: {
+ type: 'confirm',
+ message: [
+ `${a.bold('This generator is a premium feature', true)}.\n`,
+ `--------------------------------------------------------------------------------------`,
+ `π Upgrade to ${a.green('FullProduct.dev')} to unlock all generators, git plugins and support?`,
+ `--------------------------------------------------------------------------------------\n\n`,
+ ].join('\n'),
+ }
+
+})
+
+/** --- Route Generator ------------------------------------------------------------------------ */
+/** -i- Add a new route */
+export const registerRouteGenerator = (plop: PlopTypes.NodePlopAPI) => {
+ plop.setGenerator('route', {
+ description: 'Add a new route',
+ prompts: gen.prompts,
+ actions: (data: GenAnswers) => {
+
+ // Args
+ const ctx = gen.parseAnswers(data)
+
+ // -- Actions --
+
+ if (ctx.upgrade) open('https://fullproduct.dev?v=demo-gen-add-route')
+
+ // -- Generate --
+
+ return [] as PlopTypes.ActionType[]
+ },
+ })
+}
diff --git a/packages/@green-stack-core/generators/add-schema.docs.mdx b/packages/@green-stack-core/generators/add-schema.docs.mdx
new file mode 100644
index 0000000..22cf1aa
--- /dev/null
+++ b/packages/@green-stack-core/generators/add-schema.docs.mdx
@@ -0,0 +1,57 @@
+import { FileTree } from 'nextra/components'
+import { Image } from '@app/primitives'
+import { TitleWrapper } from '@app/docs/components/Hidden'
+
+
+ ## `add-schema` - Generator
+
+
+
+```
+
+```md copy
+npx turbo gen schema --args
+```
+
+
+
+
+
+
+
+
+
+
+
+
+### Prompt Arguments
+
+| Argument | Type | Question / Description |
+|------------------|--------------|---------------------------------------------------------------------------------------|
+| workspacePath | autocomplete | Where would you like to add this schema?
+
+### Resulting File Changes
+
+```bash
+/{workspacePath}/ # <- e.g. 'features/@app-core/' or 'packages/some-package/'
+ βββ schemas/
+ βββ {schemaName}.schema.ts βοΈ
+```
+
+
diff --git a/packages/@green-stack-core/generators/add-schema.ts b/packages/@green-stack-core/generators/add-schema.ts
new file mode 100644
index 0000000..ae5764f
--- /dev/null
+++ b/packages/@green-stack-core/generators/add-schema.ts
@@ -0,0 +1,148 @@
+/* eslint-disable import/no-anonymous-default-export */
+import { PlopTypes } from '@turbo/gen'
+import { validateNonEmptyNoSpaces, getWorkspaceOptions, createDivider, a, createAutocompleteSource, parseWorkspaces } from '../scripts/helpers/scriptUtils'
+import { createPrompts } from '../scripts/helpers/scriptUtils'
+
+/* --- Disclaimer ------------------------------------------------------------------------------ */
+
+// -i- Learn more about Turborepo Generators at:
+// -i- https://turbo.build/repo/docs/core-concepts/monorepos/code-generation
+
+/* --- Usage ----------------------------------------------------------------------------------- */
+
+// -i- npm run add:schema -- --args
+// -i- npx turbo gen schema --args
+
+/* --- Constants ------------------------------------------------------------------------------- */
+
+const { PATH_PKGS } = parseWorkspaces('./')
+const workspaceOptions = getWorkspaceOptions('./')
+
+/* --- Prompts --------------------------------------------------------------------------------- */
+
+export const gen = createPrompts({
+
+ workspacePath: {
+ type: 'autocomplete',
+ message: 'Where would you like to add this schema?', // @ts-ignore
+ choices: workspaceOptions,
+ },
+ schemaName: {
+ type: 'input',
+ message: 'What is the schema name?',
+ },
+ schemaDescription:{
+ type: 'input',
+ message: 'Optional description: What data structure does this schema describe?',
+ },
+
+}, {
+
+ compute: {
+ schemaName: {
+ validate: validateNonEmptyNoSpaces,
+ },
+ },
+
+ parser: (answers) => {
+
+ // Args
+ const { workspacePath, schemaName, schemaDescription } = answers!
+
+ // -- Vars --
+
+ const workspacePkg = PATH_PKGS[workspacePath]
+ const descriptions = [] as string[]
+ const schemaFields = [] as string[]
+
+ let jsDocDescription = ''
+ let jsDocTitle = ''
+ let describeStatement = ''
+
+ // -- Optionals --
+
+ if (schemaDescription) {
+ descriptions.push(`${schemaName}: \`${schemaDescription}\`,`)
+ jsDocDescription = `/** -i- ${schemaDescription} */`
+ jsDocTitle = createDivider(schemaName, true)
+ describeStatement = `.describe(d)`
+ } else {
+ jsDocTitle = createDivider(schemaName, false)
+ }
+
+ // -- Return --
+
+ return {
+ ...answers,
+ workspacePkg,
+ descriptions,
+ schemaFields,
+ jsDocDescription,
+ jsDocTitle,
+ describeStatement,
+ }
+
+ }
+
+})
+
+/* --- Types ----------------------------------------------------------------------------------- */
+
+type Answers = typeof gen._values
+type Context = typeof gen._parsed
+
+/** --- createSchemaContent() ------------------------------------------------------------------ */
+/** -i- Builds the file contents for a new schema based on passed metadata */
+export const createSchemaContent = (ctx: Context) => [
+
+ `import { z, schema } from '@green-stack/schemas'\n`,
+
+ `${createDivider('Description')}\n`,
+
+ `const d = "${ctx.schemaDescription}"\n`,
+
+ [ctx.jsDocTitle, ctx.jsDocDescription].filter(Boolean).join('\n'),
+ `export const ${ctx.schemaName} = schema('${ctx.schemaName}', {`,
+ ctx.schemaFields.map((l) => ` ${l}`).join('\n'),
+ `})${ctx.describeStatement}\n`,
+
+ `${createDivider('Type Alias')}\n`,
+
+ `export type ${ctx.schemaName} = z.input\n`,
+
+].join('\n')
+
+/** --- Schema Generator ----------------------------------------------------------------------- */
+/** -i- Add a new zod schema as a single source of truth */
+export const registerSchemaGenerator = (plop: PlopTypes.NodePlopAPI) => {
+ plop.setGenerator('schema', {
+ description: 'Add a new zod schema as a single source of truth',
+ prompts: gen.prompts,
+ actions: (answers: GenAnswers) => {
+
+ const ctx = gen.parseAnswers(answers)
+
+ // -- Build schema --
+
+ const schemaContent = createSchemaContent(ctx)
+
+ // -- Actions --
+
+ const actions = [
+ {
+ type: 'add',
+ path: `${ctx.workspacePath}/schemas/${ctx.schemaName}.schema.ts`,
+ template: schemaContent,
+ },
+ {
+ type: 'open-files-in-vscode',
+ paths: [`${ctx.workspacePath}/schemas/${ctx.schemaName}.schema.ts`],
+ },
+ ] as PlopTypes.ActionType[]
+
+ // -- Generate --
+
+ return actions
+ },
+ })
+}
diff --git a/packages/@green-stack-core/generators/add-script.docs.mdx b/packages/@green-stack-core/generators/add-script.docs.mdx
new file mode 100644
index 0000000..b8e54c7
--- /dev/null
+++ b/packages/@green-stack-core/generators/add-script.docs.mdx
@@ -0,0 +1,61 @@
+import { FileTree } from 'nextra/components'
+import { Image } from '@app/primitives'
+import { TitleWrapper } from '@app/docs/components/Hidden'
+
+
+ ## `add-script` - Generator
+
+
+
+```
+
+```md copy
+npx turbo gen script --args
+```
+
+
+
+
+
+
+
+
+
+
+
+
+### Prompt Arguments
+
+| Argument | Type | Question / Description |
+|-----------------|--------------|-------------------------------------------------------------------------------|
+| workspacePath | autocomplete | Where would you like to add this script?
+
+### Resulting File Changes
+
+```bash
+/{workspacePath}/ # <- e.g. 'features/@app-core/' or 'packages/some-package/'
+ βββ scripts/
+ βββ {scriptFileName}.ts βοΈ
+ βββ package.json β # <- adds the script to the package.json scripts section
+
+package.json β # <- adds a root package.json script as well
+turbo.json β # <- adds a turbo.json monorepo script config entry
+```
+
+
diff --git a/packages/@green-stack-core/generators/add-script.ts b/packages/@green-stack-core/generators/add-script.ts
new file mode 100644
index 0000000..58648c1
--- /dev/null
+++ b/packages/@green-stack-core/generators/add-script.ts
@@ -0,0 +1,47 @@
+/* eslint-disable import/no-anonymous-default-export */
+import { PlopTypes } from '@turbo/gen'
+import { a, createPrompts } from '@green-stack/core/scripts/helpers/scriptUtils'
+import open from 'open'
+
+/* --- Disclaimer ------------------------------------------------------------------------------ */
+
+// -i- Learn more about Turborepo Generators at:
+// -i- https://turbo.build/repo/docs/core-concepts/monorepos/code-generation
+
+/* --- Prompts --------------------------------------------------------------------------------- */
+
+export const gen = createPrompts({
+
+ upgrade: {
+ type: 'confirm',
+ message: [
+ `${a.bold('This generator is a premium feature', true)}.\n`,
+ `--------------------------------------------------------------------------------------`,
+ `π Upgrade to ${a.green('FullProduct.dev')} to unlock all generators, git plugins and support?`,
+ `--------------------------------------------------------------------------------------\n\n`,
+ ].join('\n'),
+ }
+
+})
+
+/** --- Script Generator ----------------------------------------------------------------------- */
+/** -i- Add a new script */
+export const registerScriptGenerator = (plop: PlopTypes.NodePlopAPI) => {
+ plop.setGenerator('script', {
+ description: 'Add a new script',
+ prompts: gen.prompts,
+ actions: (data: GenAnswers) => {
+
+ // Args
+ const ctx = gen.parseAnswers(data)
+
+ // -- Actions --
+
+ if (ctx.upgrade) open('https://fullproduct.dev?v=demo-gen-add-script')
+
+ // -- Generate --
+
+ return [] as PlopTypes.ActionType[]
+ },
+ })
+}
diff --git a/packages/@green-stack-core/generators/add-workspace.docs.mdx b/packages/@green-stack-core/generators/add-workspace.docs.mdx
new file mode 100644
index 0000000..1769a65
--- /dev/null
+++ b/packages/@green-stack-core/generators/add-workspace.docs.mdx
@@ -0,0 +1,61 @@
+import { FileTree } from 'nextra/components'
+import { Image } from '@app/primitives'
+import { TitleWrapper } from '@app/docs/components/Hidden'
+
+
+ ## `add-workspace` - Generator
+
+
+
+```
+
+```md copy
+npx turbo gen add-workspace --args
+```
+
+
+
+
+
+
+
+
+
+
+
+
+### Prompt Arguments
+
+| Argument | Type | Question / Description |
+|--------------------|-----------|----------------------------------------------------------------------------------------------------------------------------------|
+| workspaceType | radio | What type of workspace would you like to generate?
+
+### Resulting Files
+
+```bash
+/{workspaceType}/ # <- e.g. packages/ or features/
+ βββ {folderName}/ βοΈ
+ βββ {workspaceStructure}/ βοΈ # <- e.g. schemas/, resolvers/, components/, ...
+ βββ package.json βοΈ
+ βββ tsconfig.json βοΈ
+```
+
+
diff --git a/packages/@green-stack-core/generators/add-workspace.ts b/packages/@green-stack-core/generators/add-workspace.ts
new file mode 100644
index 0000000..8aa890d
--- /dev/null
+++ b/packages/@green-stack-core/generators/add-workspace.ts
@@ -0,0 +1,178 @@
+/* eslint-disable import/no-anonymous-default-export */
+import { PlopTypes } from '@turbo/gen'
+import { a, validateNonEmptyNoSpaces } from '../scripts/helpers/scriptUtils'
+import { createPrompts } from '../scripts/helpers/scriptUtils'
+
+/* --- Disclaimer ------------------------------------------------------------------------------ */
+
+// -i- Learn more about Turborepo Generators at:
+// -i- https://turbo.build/repo/docs/core-concepts/monorepos/code-generation
+
+/* --- Usage ----------------------------------------------------------------------------------- */
+
+// -i- npm run add:workspace -- --args
+// -i- npx turbo gen add-workspace --args
+
+/* --- Constants ------------------------------------------------------------------------------- */
+
+const WORKSPACE_FOLDER_MAPPER = {
+ feature: 'features',
+ package: 'packages',
+} as const
+
+/* --- Prompts --------------------------------------------------------------------------------- */
+
+export const gen = createPrompts({
+
+ workspaceType: {
+ type: 'list',
+ message: 'What type of workspace would you like to generate?',
+ choices: Object.keys(WORKSPACE_FOLDER_MAPPER),
+ default: 'feature',
+ },
+ folderName: {
+ type: 'input',
+ message: 'What foldername do you want to give this workspace?',
+ },
+ packageName: {
+ type: 'input',
+ message: `What package name would you like to import from? ${a.muted('(used for package.json)')}`,
+ },
+ workspaceStructure: {
+ type: 'checkbox',
+ message: `Optional: What will this workspace contain? ${a.muted('(optional extra folder setup)')}`,
+ choices: ['schemas', 'resolvers', 'components', 'hooks', 'screens', 'routes', 'utils'],
+ },
+ packageDescription: {
+ type: 'input',
+ message: `Optional: How would you shortly describe the package? ${a.muted('(used for package.json)')}`,
+ default: 'todo: add description',
+ },
+
+}, {
+
+ compute: {
+ folderName: {
+ validate: validateNonEmptyNoSpaces,
+ },
+ packageName: {
+ validate: validateNonEmptyNoSpaces,
+ },
+ },
+
+ parser: (answers) => {
+
+ // Args
+ const { workspaceType, folderName, packageName } = answers
+
+ // -- Vars --
+
+ const workspaceFolder = WORKSPACE_FOLDER_MAPPER[workspaceType as keyof typeof WORKSPACE_FOLDER_MAPPER] // prettier-ignore
+ const workspacePath = `${workspaceFolder}/${folderName}`
+ const isFeature = workspaceType === 'feature'
+
+ const usesCustomLicense = ['green-stack'].some((word) => packageName.includes(word))
+ let packageLicense = isFeature ? 'MIT' : 'UNLICENSED'
+ if (usesCustomLicense) packageLicense = 'SEE LICENSE IN LICENSE.md'
+ const isPrivate = isFeature || usesCustomLicense
+ const privateLine = isPrivate ? '\n "private": true,' : ''
+
+ // -- Return --
+
+ return {
+ ...answers,
+ workspaceFolder,
+ workspacePath,
+ isFeature,
+ isPrivate,
+ usesCustomLicense,
+ packageLicense,
+ privateLine,
+ }
+ },
+
+})
+
+/* --- Types ----------------------------------------------------------------------------------- */
+
+type Answers = typeof gen._values
+type Context = typeof gen._parsed
+
+/* --- Templates ------------------------------------------------------------------------------- */
+
+const tsConfigTemplate = `{
+ "extends": "@app/core/tsconfig",
+ "include": [
+ "**/*.ts",
+ "**/*.tsx",
+ "../../apps/next/next-env.d.ts",
+ "../../packages/@green-stack-core/global.d.ts",
+ "../../features/@app-core/nativewind-env.d.ts",
+ "../../features/@app-core/appConfig.ts",
+ "../../features/**/*.ts",
+ "../../features/**/*.tsx",
+ ],
+ "exclude": ["node_modules"]
+}`
+
+/** --- Workspace Generator -------------------------------------------------------------------- */
+/** -i- Simple generator to add a new feature or package workspace */
+export const registerWorkspaceGenerator = (plop: PlopTypes.NodePlopAPI) => {
+ plop.setGenerator('add-workspace', {
+ description: 'Create a new feature or package workspace',
+ prompts: gen.prompts,
+ actions: (data: GenAnswers) => {
+
+ // Context
+ const ctx = gen.parseAnswers(data)
+
+ // -- Actions --
+
+ const actions = [
+ {
+ type: 'add',
+ path: `${ctx.workspacePath}/package.json`,
+ templateFile: '../../packages/@green-stack-core/generators/templates/package-json.hbs',
+ data: ctx,
+ },
+ {
+ type: 'add',
+ path: `${ctx.workspacePath}/tsconfig.json`,
+ template: tsConfigTemplate,
+ }
+ ] as PlopTypes.ActionType[]
+
+ // -- Helpers --
+
+ const addOptionalStructure = (folderName: string, file: string) => {
+ if (ctx.workspaceStructure.includes(folderName)) {
+ actions.push({
+ type: 'add',
+ path: `${ctx.workspacePath}/${folderName}/${file}`,
+ })
+ }
+ }
+
+ // -- Optionals --
+
+ addOptionalStructure('schemas', '.gitkeep')
+ addOptionalStructure('resolvers', '.gitkeep')
+ addOptionalStructure('components', '.gitkeep')
+ addOptionalStructure('hooks', '.gitkeep')
+ addOptionalStructure('screens', '.gitkeep')
+ addOptionalStructure('routes', '.gitkeep')
+ addOptionalStructure('utils', '.gitkeep')
+
+ // -- Generate --
+
+ return [
+ ...actions,
+ {
+ type: 'open-files-in-vscode',
+ paths: [`${ctx.workspacePath}/package.json`],
+ },
+ { type: 'install' },
+ ]
+ },
+ })
+}
diff --git a/packages/@green-stack-core/generators/templates/package-json.hbs b/packages/@green-stack-core/generators/templates/package-json.hbs
new file mode 100644
index 0000000..38e723e
--- /dev/null
+++ b/packages/@green-stack-core/generators/templates/package-json.hbs
@@ -0,0 +1,7 @@
+{
+ "name": "{{packageName}}",
+ "version": "0.0.1",{{{privateLine}}}
+ "description": "{{packageDescription}}",
+ "scripts": {},
+ "dependencies": {}
+}
\ No newline at end of file
diff --git a/packages/@green-stack-core/global.d.ts b/packages/@green-stack-core/global.d.ts
new file mode 100644
index 0000000..00232e8
--- /dev/null
+++ b/packages/@green-stack-core/global.d.ts
@@ -0,0 +1,85 @@
+type DeepPartial = { [P in keyof T]?: DeepPartial }
+
+type DeepNullable = { [P in keyof T]: DeepNullable | null }
+
+type DeepNullish = { [P in keyof T]?: DeepNullish 
+- 
+- 
+- 
+- 
+
+Across a number of international projects, countries and industries:
+
+
+
+Now, I'm glad to share my learnings to help others build their own universal apps faster, with less manual boilerplate, and more code reusability than ever before.
+
+[](https://codinsonn.dev/resume?v=gh-demo-readme)
+
+> **Support the project** - *Please keep this entire collapsible section in your README* π
+
+- [FullProduct.dev Docs π](https://fullproduct.dev/docs?v=gh-demo-readme) - to learn / send to your lead architect
+- [FullProduct.dev Landing Page](https://fullproduct.dev?v=gh-demo-readme) - upgrade / send to your boss
+- [Read + Share the Blog](https://fullproduct.dev/blog?v=gh-demo-readme) or [Sponsor me](https://github.com/sponsors/codinsonn) π
+
+[](https://fullproduct.dev/blog/maximize-efficiency-building-universal-apps?v=gh-demo-readme)
+
+> βοΈ Follow me for updates, tips and tricks:
+
+- [codinsonn.dev](https://codinsonn.dev?v=gh-demo-readme) - Personal Website + social links
+- Find me as [@codinsonn](https://twitter.com/codinsonn) - e.g. [GitHub](https://github.com/codinsonn) / [Twitter](https://twitter.com/codinsonn) / [LinkedIn](https://www.linkedin.com/in/thorr-stevens/)
+
+