fluent-styles 1.53.0 → 1.55.0

package/src/portal/PortalRenderer.tsx

@@ -0,0 +1,72 @@
+import React from 'react'
+import { View } from 'react-native'
+import { getPositionStyles } from '../utiles/position'
+import { portalStyles } from '../utiles/styles'
+import type { PortalNode } from './types'
+
+type Props = {
+  portals: PortalNode[]
+}
+
+/**
+ * Renders a list of `PortalNode` objects into the component tree.
+ *
+ * Shared between `PortalManager` (declarative) and `GlobalPortalProvider`
+ * (imperative) so neither duplicates this logic.
+ *
+ * ### Pointer event model
+ *
+ * | Layer              | pointerEvents      | Effect                          |
+ * |--------------------|--------------------|---------------------------------|
+ * | Position wrapper   | box-none           | Wrapper transparent to touches; |
+ * |                    |                    | children still receive them.    |
+ * | Backdrop (colour)  | box-none           | Colour layer is transparent.    |
+ * | Backdrop (touch)   | auto               | Captures backdrop taps.         |
+ * | Portal content     | (default: auto)    | Children handle their own input.|
+ *
+ * The `center` position wrapper fills the entire screen (needed for flexbox
+ * centering) but uses `box-none` so it never blocks the app behind it.
+ */
+export const PortalRenderer: React.FC<Props> = ({ portals }) => (
+  <>
+    {portals.map(({ id, children, options }) => (
+      <React.Fragment key={id}>
+ 
+        {/* ── Backdrop ──────────────────────────────────────────────────── */}
+        {options.backdrop && (
+          <View style={portalStyles.backdrop} pointerEvents="box-none">
+            <View
+              style={portalStyles.backdropTouchable}
+              pointerEvents="auto"
+              onTouchStart={options.onBackdropPress}
+            />
+          </View>
+        )}
+ 
+        {/* ── Positioned wrapper ────────────────────────────────────────── */}
+        {/*
+          * pointerEvents="box-none" means the wrapper View itself is invisible
+          * to touches, but its children (the actual portal content) are not.
+          * This is essential for the `center` case where the wrapper fills the
+          * whole screen — without box-none it would block every touch on the
+          * app behind the dialogue.
+          *
+          * collapsable={false} prevents Android from collapsing this View away
+          * during layout optimisation, which would break absolute positioning.
+        */}
+        <View
+          style={[
+            getPositionStyles(options.position, options.offset),
+            options.style,
+          ]}
+          pointerEvents="box-none"
+          collapsable={false}
+        >
+          {children}
+        </View>
+ 
+      </React.Fragment>
+    ))}
+  </>
+)
+ 

package/src/portal/index.ts

@@ -0,0 +1,60 @@
+/**
+ * @module portal
+ *
+ * A production-grade, dual-mode portal system for React Native.
+ *
+ * ─── Quick-start ─────────────────────────────────────────────────────────────
+ *
+ * **Declarative** (React context / hook):
+ * ```tsx
+ * // 1. Wrap your app
+ * <PortalManager>
+ *   <App />
+ * </PortalManager>
+ *
+ * // 2. Mount portals from any descendant
+ * const { mount, unmount } = usePortal()
+ * const id = mount(<MyModal />, { backdrop: true, position: 'center' })
+ * unmount(id)
+ * ```
+ *
+ * **Imperative** (singleton, usable outside React):
+ * ```tsx
+ * // 1. Wrap your app
+ * <GlobalPortalProvider>
+ *   <App />
+ * </GlobalPortalProvider>
+ *
+ * // 2. Show / hide from anywhere
+ * import { portal } from '@/portal'
+ * const id = portal.show(<Toast />, { position: 'bottom' })
+ * portal.hide(id)
+ * ```
+ *
+ * ─── Exports ─────────────────────────────────────────────────────────────────
+ */
+
+// Providers
+export { PortalManager } from './PortalManager'
+export { GlobalPortalProvider } from './GlobalPortalProvider'
+
+// Hook (declarative API)
+export { usePortal } from './PortalContext'
+
+// Singleton (imperative API)
+export { portal, PortalInstance } from './PortalInstance'
+
+// Shared renderer (useful if you're building a custom provider)
+export { PortalRenderer } from './PortalRenderer'
+
+// Types
+export type {
+  Position,
+  Offset,
+  PortalOptions,
+  PortalNode,
+  PortalContextType,
+} from './types'
+
+// Utilities (exported for consumers who build custom positioning logic)
+export { getPositionStyles } from '../utiles/position'

package/src/portal/portal.test.ts

@@ -0,0 +1,157 @@
+/**
+ * Unit tests for the portal module.
+ *
+ * Run with: jest --testPathPattern=portal
+ *
+ * These tests cover the two independently-testable units:
+ *   1. `PortalInstance` — the imperative singleton logic
+ *   2. `getPositionStyles` — the position-to-style mapping utility
+ */
+
+import { PortalInstance } from './PortalInstance'
+import { getPositionStyles } from '../utiles/position'
+
+// ─── PortalInstance ───────────────────────────────────────────────────────────
+
+describe('PortalInstance', () => {
+  let instance: PortalInstance
+
+  beforeEach(() => {
+    instance = new PortalInstance()
+  })
+
+  it('starts with no portals', () => {
+    expect(instance.getPortals()).toHaveLength(0)
+  })
+
+  it('show() adds a portal and returns a unique id', () => {
+    const id1 = instance.show(null)
+    const id2 = instance.show(null)
+    expect(id1).not.toBe(id2)
+    expect(instance.getPortals()).toHaveLength(2)
+  })
+
+  it('show() stores the supplied options', () => {
+    const id = instance.show(null, { position: 'top', backdrop: true })
+    const portal = instance.getPortals().find(p => p.id === id)
+    expect(portal?.options.position).toBe('top')
+    expect(portal?.options.backdrop).toBe(true)
+  })
+
+  it('update() replaces children and options', () => {
+    const id = instance.show(null, { position: 'top' })
+    instance.update(id, null, { position: 'bottom' })
+    const portal = instance.getPortals().find(p => p.id === id)
+    expect(portal?.options.position).toBe('bottom')
+  })
+
+  it('update() preserves options when none supplied', () => {
+    const id = instance.show(null, { position: 'top' })
+    instance.update(id, null)
+    const portal = instance.getPortals().find(p => p.id === id)
+    expect(portal?.options.position).toBe('top')
+  })
+
+  it('update() is a no-op for unknown ids', () => {
+    instance.update(99999, null)
+    expect(instance.getPortals()).toHaveLength(0)
+  })
+
+  it('hide() removes the portal', () => {
+    const id = instance.show(null)
+    instance.hide(id)
+    expect(instance.getPortals()).toHaveLength(0)
+  })
+
+  it('hide() is safe to call twice', () => {
+    const id = instance.show(null)
+    instance.hide(id)
+    expect(() => instance.hide(id)).not.toThrow()
+  })
+
+  it('hideAll() clears every portal', () => {
+    instance.show(null)
+    instance.show(null)
+    instance.show(null)
+    instance.hideAll()
+    expect(instance.getPortals()).toHaveLength(0)
+  })
+
+  it('notifies subscribers on show', () => {
+    const listener = jest.fn()
+    instance.subscribe(listener)
+    instance.show(null)
+    expect(listener).toHaveBeenCalledTimes(1)
+  })
+
+  it('notifies subscribers on hide', () => {
+    const listener = jest.fn()
+    const id = instance.show(null)
+    instance.subscribe(listener)
+    instance.hide(id)
+    expect(listener).toHaveBeenCalledTimes(1)
+  })
+
+  it('unsubscribe stops notifications', () => {
+    const listener = jest.fn()
+    const unsubscribe = instance.subscribe(listener)
+    unsubscribe()
+    instance.show(null)
+    expect(listener).not.toHaveBeenCalled()
+  })
+
+  it('hideAll() does not notify when already empty', () => {
+    const listener = jest.fn()
+    instance.subscribe(listener)
+    instance.hideAll()
+    expect(listener).not.toHaveBeenCalled()
+  })
+})
+
+// ─── getPositionStyles ────────────────────────────────────────────────────────
+
+describe('getPositionStyles', () => {
+  it('returns position:absolute for all variants', () => {
+    const positions = ['top', 'bottom', 'center', 'top-left', 'top-right', 'bottom-left', 'bottom-right'] as const
+    positions.forEach(pos => {
+      expect(getPositionStyles(pos).position).toBe('absolute')
+    })
+  })
+
+  it('top spans full width', () => {
+    const styles = getPositionStyles('top')
+    expect(styles.left).toBe(0)
+    expect(styles.right).toBe(0)
+    expect(styles.top).toBe(0)
+  })
+
+  it('bottom spans full width', () => {
+    const styles = getPositionStyles('bottom')
+    expect(styles.left).toBe(0)
+    expect(styles.right).toBe(0)
+    expect(styles.bottom).toBe(0)
+  })
+
+  it('top-right uses right/top anchors', () => {
+    const styles = getPositionStyles('top-right')
+    expect(styles.right).toBeDefined()
+    expect(styles.top).toBeDefined()
+    expect((styles as any).left).toBeUndefined()
+  })
+
+  it('applies x offset to top-left', () => {
+    const styles = getPositionStyles('top-left', { x: 16, y: 0 })
+    expect(styles.left).toBe(16)
+  })
+
+  it('applies y offset to bottom', () => {
+    const styles = getPositionStyles('bottom', { x: 0, y: 24 })
+    expect(styles.bottom).toBe(24)
+  })
+
+  it('defaults to center when no position given', () => {
+    const styles = getPositionStyles()
+    expect(styles.top).toBe('50%')
+    expect(styles.left).toBe('50%')
+  })
+})

package/src/portal/types.ts

@@ -0,0 +1,49 @@
+import type { ViewStyle } from 'react-native'
+import type React from 'react'
+
+// ─── Position ────────────────────────────────────────────────────────────────
+
+export type Position =
+  | 'top'
+  | 'center'
+  | 'bottom'
+  | 'top-left'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-right'
+
+export type Offset = {
+  x: number
+  y: number
+}
+
+// ─── Portal Options ───────────────────────────────────────────────────────────
+
+export type PortalOptions = {
+  /** Where the portal should be anchored on screen. Defaults to `'center'`. */
+  position?: Position
+  /** Pixel offset applied after positional anchoring. */
+  offset?: Offset
+  /** Additional styles applied to the portal wrapper `View`. */
+  style?: ViewStyle
+  /** Whether to render a semi-transparent backdrop behind the portal. */
+  backdrop?: boolean
+  /** Called when the user taps the backdrop (requires `backdrop: true`). */
+  onBackdropPress?: () => void
+}
+
+// ─── Portal Node ──────────────────────────────────────────────────────────────
+
+export type PortalNode = {
+  id: number
+  children: React.ReactNode
+  options: PortalOptions
+}
+
+// ─── Context Shape ────────────────────────────────────────────────────────────
+
+export type PortalContextType = {
+  mount: (children: React.ReactNode, options?: PortalOptions) => number
+  update: (id: number, children: React.ReactNode, options?: PortalOptions) => void
+  unmount: (id: number) => void
+}

package/src/pressable/index.tsx

@@ -0,0 +1,19 @@
+
+import { Pressable, PressableProps } from 'react-native';
+import { styled } from '../utiles/styled';
+import { ViewStyle } from '../utiles/viewStyleProps';
+import { viewStyleStringVariants } from '../utiles/viewStyleVariants';
+
+type StyledPressableProps = PressableProps & ViewStyle;
+
+const StyledPressable = styled<StyledPressableProps>(Pressable, {
+    base: {
+        position: 'relative',
+    } as ViewStyle,
+    variants: {
+        ...viewStyleStringVariants
+    } as any
+});
+
+export { StyledPressable };
+export type { StyledPressableProps };