@rific/auto-paper 0.10.3 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rific/auto-paper",
-  "version": "0.10.3",
+  "version": "0.12.0",
   "description": "Adaptive react-native-paper theming: triadic palette from a seed color + system/light/dark appearance",
   "keywords": [
     "react-native",
@@ -68,10 +68,11 @@
     "esbuild": "0.28.1"
   },
   "devDependencies": {
-    "@infinitetoken/eslint-config": "^0.1.8",
-    "@infinitetoken/jest-config": "^0.2.0",
-    "@infinitetoken/tsconfig": "^0.3.0",
+    "@infinitetoken/eslint-config": "0.2.0",
+    "@infinitetoken/jest-config": "^0.4.0",
+    "@infinitetoken/tsconfig": "^0.5.0",
     "@reduxjs/toolkit": "^2.0.0",
+    "@rific/core": "^0.2.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.0.0",
     "@types/jest": "^30.0.0",
@@ -93,6 +94,7 @@
     "typescript": "^6.0.3"
   },
   "peerDependencies": {
+    "@rific/core": ">=0.1.1",
     "expo-blur": ">=56.0.0",
     "expo-navigation-bar": ">=56.0.0",
     "react": ">=19.0.0",

package/src/ThemeProvider.tsx

@@ -1,4 +1,4 @@
-import { createContext, type ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
+import { createContext, type ReactNode, useContext, useEffect, useMemo, useRef } from 'react'
 import { StatusBar, type StatusBarProps, type StyleProp, StyleSheet, View, type ViewStyle } from 'react-native'
 import { configureFonts, Provider as PaperProvider } from 'react-native-paper'
 
@@ -6,7 +6,7 @@ import type { ExpoBlurModule } from './components/BlurView'
 import type { ReanimatedModule } from './components/Dialog'
 import type { ExpoNavigationBarModule } from './navigation-bar'
 import { type PaperDefaults, PaperDefaultsContext } from './PaperDefaultsContext'
-import { defaultThemeSettings, type ThemeSettings, ThemeSettingsContext } from './ThemeSettingsContext'
+import { type ThemeSettings, themeSettingsProvider, useThemeSettingsInternal } from './ThemeSettingsContext'
 import { useComputedTheme } from './useComputedTheme'
 
 // expo-navigation-bar/expo-blur are no longer auto-detected via require() - Metro doesn't
@@ -47,24 +47,28 @@ export type ProviderProps = {
   style?: StyleProp<ViewStyle>
 }
 
+// createSettingsContext's generated Provider only exposes `settings` to descendants (via its
+// generated useSettings()) — it can't itself also compute the theme/gate mounting on it being
+// ready, since that logic needs `settings` in scope. Provider (below) is just this thin outer
+// wrapper for the settings half; ThemeProviderBody (an actual descendant, reached via
+// useThemeSettingsInternal()) does all the theme-computation/gating work the single combined
+// component used to do directly.
 export function Provider({ children, defaults, expoBlur, fontFamily, initialValue, navigationBar, onChange, onNavBarChange, onReady, reanimated, statusBarProps, style }: ProviderProps) {
-  const [settings, setSettings] = useState<ThemeSettings>(() => ({ ...defaultThemeSettings, ...initialValue }))
+  return (
+    <ThemeSettingsProvider initialValue={initialValue} onChange={onChange}>
+      <ThemeProviderBody defaults={defaults} expoBlur={expoBlur} fontFamily={fontFamily} navigationBar={navigationBar} onNavBarChange={onNavBarChange} onReady={onReady} reanimated={reanimated} statusBarProps={statusBarProps} style={style}>
+        {children}
+      </ThemeProviderBody>
+    </ThemeSettingsProvider>
+  )
+}
 
-  const set = useCallback((patch: Partial<ThemeSettings>) => {
-    setSettings((prev) => ({ ...prev, ...patch }))
-  }, [])
+const ThemeSettingsProvider = themeSettingsProvider
 
-  const onChangeRef = useRef(onChange)
-  useEffect(() => {
-    onChangeRef.current = onChange
-  })
-  const prevSettings = useRef(settings)
-  useEffect(() => {
-    if (prevSettings.current !== settings) {
-      prevSettings.current = settings
-      onChangeRef.current?.(settings)
-    }
-  }, [settings])
+type ThemeProviderBodyProps = Omit<ProviderProps, 'initialValue' | 'onChange'>
+
+function ThemeProviderBody({ children, defaults, expoBlur, fontFamily, navigationBar, onNavBarChange, onReady, reanimated, statusBarProps, style }: ThemeProviderBodyProps) {
+  const { settings } = useThemeSettingsInternal()
 
   const computedTheme = useComputedTheme(settings.appearance, settings.color, settings.harmony)
   // Layered on top of useComputedTheme's own output rather than folded into it — that hook only
@@ -89,20 +93,18 @@ export function Provider({ children, defaults, expoBlur, fontFamily, initialValu
   if (!theme) return null
 
   return (
-    <ThemeSettingsContext.Provider value={{ settings, set }}>
-      <PaperProvider theme={theme}>
-        <StatusBar backgroundColor={theme.colors.background} barStyle={theme.dark ? 'light-content' : 'dark-content'} {...statusBarProps} />
-        <PaperDefaultsContext.Provider value={defaults ?? {}}>
-          <NavBarContext.Provider value={{ navigationBar, onNavBarChange }}>
-            <BlurModuleContext.Provider value={expoBlur}>
-              <ReanimatedModuleContext.Provider value={reanimated}>
-                <View style={[styles.flex, { backgroundColor: theme.colors.background }, style]}>{children}</View>
-              </ReanimatedModuleContext.Provider>
-            </BlurModuleContext.Provider>
-          </NavBarContext.Provider>
-        </PaperDefaultsContext.Provider>
-      </PaperProvider>
-    </ThemeSettingsContext.Provider>
+    <PaperProvider theme={theme}>
+      <StatusBar backgroundColor={theme.colors.background} barStyle={theme.dark ? 'light-content' : 'dark-content'} {...statusBarProps} />
+      <PaperDefaultsContext.Provider value={defaults ?? {}}>
+        <NavBarContext.Provider value={{ navigationBar, onNavBarChange }}>
+          <BlurModuleContext.Provider value={expoBlur}>
+            <ReanimatedModuleContext.Provider value={reanimated}>
+              <View style={[styles.flex, { backgroundColor: theme.colors.background }, style]}>{children}</View>
+            </ReanimatedModuleContext.Provider>
+          </BlurModuleContext.Provider>
+        </NavBarContext.Provider>
+      </PaperDefaultsContext.Provider>
+    </PaperProvider>
   )
 }
 

package/src/ThemeSettingsContext.ts

@@ -1,4 +1,4 @@
-import { createContext } from 'react'
+import { createSettingsContext, type SettingsContextValue } from '@rific/core'
 
 import type { ThemeAppearance } from './useComputedTheme'
 import type { ColorHarmony, TriadicPalette } from './utils/getTriadicPalette'
@@ -19,12 +19,13 @@ export const defaultThemeSettings: ThemeSettings = {
   harmony: 'split-complementary'
 }
 
-export type ThemeSettingsContextType = {
-  settings: ThemeSettings
-  set: (patch: Partial<ThemeSettings>) => void
-}
+export type ThemeSettingsContextType = SettingsContextValue<ThemeSettings>
+
+// Single createSettingsContext() call, shared by ThemeProvider.tsx and useThemeSettings.ts (each
+// just re-exports the relevant piece under its original name) so there's exactly one Context
+// instance backing all three files, same as before this migration.
+const themeSettingsContext = createSettingsContext<ThemeSettings>(defaultThemeSettings)
 
-export const ThemeSettingsContext = createContext<ThemeSettingsContextType>({
-  settings: defaultThemeSettings,
-  set: () => {}
-})
+export const ThemeSettingsContext = themeSettingsContext.Context
+export const themeSettingsProvider = themeSettingsContext.Provider
+export const useThemeSettingsInternal = themeSettingsContext.useSettings

package/src/components/PalettePicker.tsx

@@ -119,8 +119,8 @@ const styles = StyleSheet.create({
   harmonyRow: { marginBottom: 4 },
   innerRotator: { height: '100%', left: '-100%', overflow: 'hidden', position: 'absolute', top: 0, width: '200%' },
   pie: { overflow: 'hidden' },
-  rotator: { height: '100%', left: 0, overflow: 'hidden', position: 'absolute', top: 0, width: '100%' },
   ring: { alignItems: 'center', bottom: 0, justifyContent: 'center', left: 0, position: 'absolute', right: 0, top: 0 },
+  rotator: { height: '100%', left: 0, overflow: 'hidden', position: 'absolute', top: 0, width: '100%' },
   swatch: { alignItems: 'center', justifyContent: 'center' },
   swatches: { flexDirection: 'row', flexWrap: 'wrap', gap: SWATCH_GRID_GAP, paddingTop: 12 },
   trigger: { alignItems: 'center', alignSelf: 'flex-start', borderRadius: SIZE / 2, height: SIZE, justifyContent: 'center', width: SIZE },

package/src/index.ts

@@ -35,6 +35,8 @@ export { defaultThemeSettings, ThemeSettingsContext } from './ThemeSettingsConte
 export type { AutoPaperTheme, SemanticColorRoles, ThemeAppearance } from './useComputedTheme'
 export { SEMANTIC_BASE_COLORS, useComputedTheme } from './useComputedTheme'
 export { useAutoPaperTheme } from './useTheme'
+export type { ThemeBridgeProps } from './useThemeBridgeProps'
+export { useThemeBridgeProps } from './useThemeBridgeProps'
 export { useThemeSettings } from './useThemeSettings'
 export { getBlendedColor } from './utils/getBlendedColor'
 export type { ColorRoles } from './utils/getColorRoles'

package/src/redux/themeSlice.ts

@@ -1,3 +1,5 @@
+import { createSettingsSlice } from '@rific/core'
+
 import { ThemeAppearance } from '../useComputedTheme'
 import type { ColorHarmony, TriadicPalette } from '../utils/getTriadicPalette'
 
@@ -17,43 +19,20 @@ const defaultInitialState: ThemeState = {
   harmony: 'split-complementary'
 }
 
-// Hand-rolled slice (no @reduxjs/toolkit dependency). Action types and creator
-// behavior match the previous createSlice implementation exactly, so this works
-// with RTK stores, vanilla Redux, or any reducer-based state container.
-type PayloadAction<P> = { payload: P; type: string }
-
-const createAction = <P>(type: string) => {
-  const actionCreator = (payload: P): PayloadAction<P> => ({ payload, type })
-  actionCreator.type = type
-  actionCreator.match = (action: { type: string }): action is PayloadAction<P> => action.type === type
-  return actionCreator
-}
-
-const initialize = createAction<Partial<ThemeState>>('theme/initialize')
-const setAppearance = createAction<ThemeAppearance>('theme/setAppearance')
-const setBlur = createAction<boolean>('theme/setBlur')
-const setColor = createAction<string | TriadicPalette>('theme/setColor')
-const setHarmony = createAction<ColorHarmony>('theme/setHarmony')
-
-export const themeActions = { initialize, setAppearance, setBlur, setColor, setHarmony }
-
-const reduce = (state: ThemeState, action: { type: string }): ThemeState => {
-  if (initialize.match(action)) return { ...state, ...action.payload }
-  if (setAppearance.match(action)) return { ...state, appearance: action.payload }
-  if (setBlur.match(action)) return { ...state, blur: action.payload }
-  if (setColor.match(action)) return { ...state, color: action.payload }
-  if (setHarmony.match(action)) return { ...state, harmony: action.payload }
-  return state
-}
-
-export function createThemeReducer(initialState?: Partial<ThemeState>) {
-  const initial = { ...defaultInitialState, ...initialState }
-  return (state: ThemeState = initial, action: { type: string }): ThemeState => reduce(state, action)
-}
-
-export const themeReducer = (state: ThemeState = defaultInitialState, action: { type: string }): ThemeState => reduce(state, action)
-
-export const selectThemeAppearance = (state: ThemeState) => state.appearance
-export const selectThemeBlur = (state: ThemeState) => state.blur
-export const selectThemeColor = (state: ThemeState) => state.color
-export const selectThemeHarmony = (state: ThemeState) => state.harmony
+const themeSlice = createSettingsSlice('theme', {
+  initialState: defaultInitialState,
+  initializeMode: 'merge' as const,
+  selectors: ['appearance', 'blur', 'color', 'harmony'] as const
+})
+
+export const themeActions = themeSlice.actions
+export const themeReducer = themeSlice.reducer
+export const createThemeReducer = themeSlice.createReducer
+
+// This package's existing public selector names carry a `Theme` infix the factory's generic
+// select${Field} naming doesn't produce - remapped explicitly rather than teaching the factory a
+// one-off naming convention only this package wants.
+export const selectThemeAppearance = themeSlice.selectors.selectAppearance
+export const selectThemeBlur = themeSlice.selectors.selectBlur
+export const selectThemeColor = themeSlice.selectors.selectColor
+export const selectThemeHarmony = themeSlice.selectors.selectHarmony

package/src/useThemeBridgeProps.ts

@@ -0,0 +1,48 @@
+import { useMemo } from 'react'
+
+import type { ProviderProps } from './ThemeProvider'
+
+/**
+ * The subset of ProviderProps a consuming app's own Redux-backed "Theme" component is responsible
+ * for supplying. Every field here has an identically-named counterpart on ProviderProps itself
+ * (see ThemeProvider.tsx) - deliberately not renamed, so wiring this up needs no new vocabulary
+ * beyond the provider's own.
+ */
+export type ThemeBridgeProps = Pick<ProviderProps, 'initialValue' | 'onChange' | 'onReady'>
+
+/**
+ * Reshapes an app's own Redux-sourced theme state and callbacks into the exact prop object
+ * `<Provider>` expects, so a consuming app's own "Theme" component - every game in the fleet
+ * defines one, reading `state.theme` from its own store via `useSelector(..., shallowEqual)` and
+ * dispatching `themeActions.initialize` on change - can hand its own `useSelector`/`dispatch`
+ * results straight to this hook instead of re-deriving the same three-prop shape by hand in every
+ * app:
+ *
+ * ```tsx
+ * export function Theme({ children }: Props) {
+ *   const settings = useSelector((state: RootState) => state.theme, shallowEqual)
+ *   const dispatch = useDispatch()
+ *   const onChange = useCallback((next: ThemeSettings) => dispatch(themeActions.initialize(next)), [dispatch])
+ *   const onReady = useCallback(() => markSplashReady('theme'), [])
+ *   const bridgeProps = useThemeBridgeProps({ initialValue: settings, onChange, onReady })
+ *   return <Provider {...bridgeProps}>{children}</Provider>
+ * }
+ * ```
+ *
+ * Deliberately takes plain values and callbacks rather than a `dispatch` function or any
+ * Redux-specific type: this package has no opinion on any app's own RootState shape, or even that
+ * state management is Redux at all - the app does its own `useSelector`/`dispatch` wiring and
+ * passes just the results in.
+ *
+ * `onReady` is threaded through completely unchanged, never recomputed or wrapped here - it fires
+ * exactly once, the first time `<Provider>` itself reports its computed theme is ready, which is
+ * the timing a consuming app's own splash-gate mark depends on. A wrong `onReady` callback (e.g.
+ * one that marks the gate ready before `<Provider>` actually is) is a bug in the app's own
+ * callback, not something this hook can catch or fix - see BoxHockey's and LightCycles' own history
+ * of hand-fixing exactly that "marked ready before Provider was actually ready" bug in their own
+ * Theme.tsx before this hook existed.
+ */
+export function useThemeBridgeProps(props: ThemeBridgeProps): ThemeBridgeProps {
+  const { initialValue, onChange, onReady } = props
+  return useMemo(() => ({ initialValue, onChange, onReady }), [initialValue, onChange, onReady])
+}

package/src/useThemeSettings.ts

@@ -1,5 +1,3 @@
-import { useContext } from 'react'
+import { useThemeSettingsInternal } from './ThemeSettingsContext'
 
-import { ThemeSettingsContext } from './ThemeSettingsContext'
-
-export const useThemeSettings = () => useContext(ThemeSettingsContext)
+export const useThemeSettings = useThemeSettingsInternal