@symbiote-native/slider 0.1.0

package/src/react/slider/slider.test.tsx

@@ -0,0 +1,203 @@
+// Co-located React-driven test (ADR 0025) for the @symbiote-native/slider React wrapper. Mirrors the Vue
+// wrapper test against the SAME injected codegen-shaped ViewConfig, proving the shared core drives
+// React identically: the native RNCSlider leaf paints inside the centering View, value/disabled/
+// limits fold faithfully to the library, tints process, and the native value/sliding events map
+// onto onValueChange / onSlidingStart / onSlidingComplete. Slider is imported from '.' (NOT the
+// package barrel) so the third-party native-spec side-effect (../register) never loads headless.
+
+import { createElement } from 'react';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { mount, unmount, setNativeViewConfigSource } from '@symbiote-native/react';
+import { installFabric, type IFakeNode } from '@symbiote-native/test-utils';
+import { Slider } from '.';
+
+const ROOT_TAG = 312;
+const SLIDER_VIEW = 'RNCSlider';
+
+const fakeColor = (value: unknown): string => `processed(${value})`;
+
+const RNC_SLIDER_VIEW_CONFIG = {
+  bubblingEventTypes: {
+    topChange: { phasedRegistrationNames: { bubbled: 'onChange', captured: 'onChangeCapture' } },
+    topRNCSliderValueChange: {
+      phasedRegistrationNames: {
+        bubbled: 'onRNCSliderValueChange',
+        captured: 'onRNCSliderValueChangeCapture',
+      },
+    },
+  },
+  directEventTypes: {
+    topRNCSliderSlidingStart: { registrationName: 'onRNCSliderSlidingStart' },
+    topRNCSliderSlidingComplete: { registrationName: 'onRNCSliderSlidingComplete' },
+    topRNCSliderAccessibilityAction: { registrationName: 'onRNCSliderAccessibilityAction' },
+  },
+  validAttributes: {
+    value: true,
+    minimumValue: true,
+    maximumValue: true,
+    step: true,
+    lowerLimit: true,
+    upperLimit: true,
+    inverted: true,
+    disabled: true,
+    minimumTrackTintColor: { process: fakeColor },
+    maximumTrackTintColor: { process: fakeColor },
+    thumbTintColor: { process: fakeColor },
+  },
+};
+
+const fabric = installFabric();
+setNativeViewConfigSource(name => (name === SLIDER_VIEW ? RNC_SLIDER_VIEW_CONFIG : undefined));
+
+beforeEach(() => fabric.reset());
+afterEach(() => unmount(ROOT_TAG));
+
+const tick = (): Promise<void> => new Promise(resolve => setTimeout(resolve, 0));
+
+function findInTree(
+  predicate: (node: IFakeNode) => boolean,
+  nodes = fabric.committed,
+): IFakeNode | undefined {
+  for (const node of nodes) {
+    if (predicate(node)) return node;
+    const child = findInTree(predicate, node.children);
+    if (child) return child;
+  }
+  return undefined;
+}
+
+function sliderNode(): IFakeNode {
+  const node = fabric.find(n => n.viewName === SLIDER_VIEW);
+  if (!node) throw new Error(`no ${SLIDER_VIEW} was created`);
+  return node;
+}
+
+function currentSliderNode(): IFakeNode {
+  const node = findInTree(n => n.viewName === SLIDER_VIEW);
+  if (!node) throw new Error(`no committed ${SLIDER_VIEW} exists`);
+  return node;
+}
+
+function sliderWrapperNode(): IFakeNode {
+  const node = findInTree(
+    n => n.viewName === 'RCTView' && n.children.some(child => child.viewName === SLIDER_VIEW),
+  );
+  if (!node) throw new Error('no committed Slider wrapper exists');
+  return node;
+}
+
+describe('React Slider wrapper', () => {
+  it('paints the raw RNCSlider leaf inside a centering wrapper View', () => {
+    mount(
+      ROOT_TAG,
+      createElement(Slider, { value: 0.5, minimumValue: 0, maximumValue: 1, step: 0.1 }),
+    );
+    const props = sliderNode().props;
+    expect(props.value).toBe(0.5);
+    expect(props.minimumValue).toBe(0);
+    expect(props.maximumValue).toBe(1);
+    expect(props.step).toBe(0.1);
+    expect(fabric.find(n => n.viewName === 'RCTView')).toBeDefined();
+  });
+
+  it('defaults range + limits the way the library wrapper does', () => {
+    mount(ROOT_TAG, createElement(Slider, { value: 0.3 }));
+    const props = sliderNode().props;
+    expect(props.minimumValue).toBe(0);
+    expect(props.maximumValue).toBe(1);
+    expect(props.step).toBe(0);
+    expect(props.lowerLimit).toBe(Number.MIN_SAFE_INTEGER);
+    expect(props.upperLimit).toBe(Number.MAX_SAFE_INTEGER);
+    expect(props.inverted).toBe(false);
+    expect(props.disabled).toBe(false);
+  });
+
+  it('sanitizes a falsy/NaN value to undefined (library passedValue quirk)', () => {
+    mount(ROOT_TAG, createElement(Slider, { value: 0 }));
+    expect(sliderNode().props.value).toBeUndefined();
+    unmount(ROOT_TAG);
+    fabric.reset();
+    mount(ROOT_TAG, createElement(Slider, { value: Number.NaN }));
+    expect(sliderNode().props.value).toBeUndefined();
+  });
+
+  it('measures the wrapper and pins the native slider width in the common non-steps path', async () => {
+    mount(ROOT_TAG, createElement(Slider, { value: 0.5 }));
+    fabric.fireEvent(sliderWrapperNode().instanceHandle, 'topLayout', {
+      layout: { x: 0, y: 0, width: 240, height: 40 },
+    });
+    await tick();
+    expect(currentSliderNode().props.width).toBe(240);
+  });
+
+  it('forwards tint props and runs them through the derived processor', () => {
+    mount(
+      ROOT_TAG,
+      createElement(Slider, {
+        value: 0.2,
+        minimumTrackTintColor: '#ff0000',
+        maximumTrackTintColor: '#00ff00',
+        thumbTintColor: '#0000ff',
+      }),
+    );
+    const props = sliderNode().props;
+    expect(props.minimumTrackTintColor).toBe('processed(#ff0000)');
+    expect(props.maximumTrackTintColor).toBe('processed(#00ff00)');
+    expect(props.thumbTintColor).toBe('processed(#0000ff)');
+  });
+
+  it('maps both native value rails onto onValueChange(value)', () => {
+    let changed: number | undefined;
+    mount(
+      ROOT_TAG,
+      createElement(Slider, { value: 0.2, onValueChange: (v: number) => (changed = v) }),
+    );
+    const node = sliderNode();
+    fabric.fireEvent(node.instanceHandle, 'topChange', { value: 0.7 });
+    expect(changed).toBe(0.7);
+    fabric.fireEvent(node.instanceHandle, 'topRNCSliderValueChange', { value: 0.42 });
+    expect(changed).toBe(0.42);
+  });
+
+  it('maps the direct sliding events onto their callbacks', () => {
+    let startedAt: number | undefined;
+    let completedAt: number | undefined;
+    mount(
+      ROOT_TAG,
+      createElement(Slider, {
+        value: 0.2,
+        onSlidingStart: (v: number) => (startedAt = v),
+        onSlidingComplete: (v: number) => (completedAt = v),
+      }),
+    );
+    const node = sliderNode();
+    fabric.fireEvent(node.instanceHandle, 'topRNCSliderSlidingStart', { value: 0.1 });
+    fabric.fireEvent(node.instanceHandle, 'topRNCSliderSlidingComplete', { value: 0.9 });
+    expect(startedAt).toBe(0.1);
+    expect(completedAt).toBe(0.9);
+  });
+
+  it('resolves disabled from accessibilityState when no explicit boolean', () => {
+    mount(ROOT_TAG, createElement(Slider, { value: 0.2, accessibilityState: { disabled: true } }));
+    expect(sliderNode().props.disabled).toBe(true);
+  });
+
+  it('renders the step indicator when renderStepNumber is set', () => {
+    mount(
+      ROOT_TAG,
+      createElement(Slider, {
+        value: 0.5,
+        minimumValue: 0,
+        maximumValue: 1,
+        step: 0.5,
+        renderStepNumber: true,
+      }),
+    );
+    expect(fabric.find(n => n.props.testID === 'StepsIndicator-Container')).toBeDefined();
+  });
+
+  it('does NOT leak the JS onValueChange callback to the native node as a prop', () => {
+    mount(ROOT_TAG, createElement(Slider, { value: 0.2, onValueChange: () => undefined }));
+    expect(typeof sliderNode().props.onValueChange).not.toBe('function');
+  });
+});

package/src/register.test.tsx

@@ -0,0 +1,89 @@
+// Regression test for the package-level RNCSlider fallback registration. The app/examples still
+// inject RN's ReactNativeViewConfigRegistry when available, but @symbiote-native/slider must be self-
+// contained: importing this package registers RNCSlider's events + tint processors even when the
+// registry lookup misses on a real host.
+
+import { createElement } from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { mount, unmount, setNativeViewConfigSource } from '@symbiote-native/react';
+import { setColorProcessor, type ISymbioteEvent } from '@symbiote-native/engine';
+import { installFabric, type IFakeNode } from '@symbiote-native/test-utils';
+import './register';
+
+vi.mock('@react-native-community/slider/dist/RNCSliderNativeComponent', () => ({}));
+
+const ROOT_TAG = 313;
+const SLIDER_VIEW = 'RNCSlider';
+
+const fabric = installFabric();
+
+function sliderNode(): IFakeNode {
+  const node = fabric.find(n => n.viewName === SLIDER_VIEW);
+  if (!node) throw new Error(`no ${SLIDER_VIEW} was created`);
+  return node;
+}
+
+function numberFromEvent(event: ISymbioteEvent): number | undefined {
+  const value = event.nativeEvent.value;
+  return typeof value === 'number' ? value : undefined;
+}
+
+beforeEach(() => {
+  fabric.reset();
+  setNativeViewConfigSource(() => undefined);
+  setColorProcessor(value => `processed(${String(value)})`);
+});
+
+afterEach(() => {
+  unmount(ROOT_TAG);
+  setColorProcessor(value => value);
+});
+
+describe('RNCSlider package registration', () => {
+  it('processes slider tint colors without RN ViewConfig registry metadata', () => {
+    mount(
+      ROOT_TAG,
+      createElement('RNCSlider', {
+        minimumTrackTintColor: '#ff0000',
+        maximumTrackTintColor: '#00ff00',
+        thumbTintColor: '#0000ff',
+      }),
+    );
+
+    const props = sliderNode().props;
+    expect(props.minimumTrackTintColor).toBe('processed(#ff0000)');
+    expect(props.maximumTrackTintColor).toBe('processed(#00ff00)');
+    expect(props.thumbTintColor).toBe('processed(#0000ff)');
+  });
+
+  it('routes slider native value events without RN ViewConfig registry metadata', () => {
+    let changed: number | undefined;
+    const onChange = (event: ISymbioteEvent): void => {
+      changed = numberFromEvent(event);
+    };
+
+    mount(ROOT_TAG, createElement('RNCSlider', { onChange, onRNCSliderValueChange: onChange }));
+
+    const node = sliderNode();
+    fabric.fireEvent(node.instanceHandle, 'topChange', { value: 0.25 });
+    expect(changed).toBe(0.25);
+    fabric.fireEvent(node.instanceHandle, 'topRNCSliderValueChange', { value: 0.75 });
+    expect(changed).toBe(0.75);
+  });
+
+  it('routes slider direct events without RN ViewConfig registry metadata', () => {
+    let completedAt: number | undefined;
+
+    mount(
+      ROOT_TAG,
+      createElement('RNCSlider', {
+        onRNCSliderSlidingComplete: (event: ISymbioteEvent): void => {
+          completedAt = numberFromEvent(event);
+        },
+      }),
+    );
+
+    fabric.fireEvent(sliderNode().instanceHandle, 'topRNCSliderSlidingComplete', { value: 0.5 });
+    expect(completedAt).toBe(0.5);
+  });
+});

package/src/register.ts

@@ -0,0 +1,59 @@
+// Side-effect: register RNCSlider's ViewConfig in RN's ReactNativeViewConfigRegistry. Evaluating
+// the codegen native-component spec (codegenNativeComponent('RNCSlider', …)) registers the
+// ViewConfig getter the engine reads via setNativeViewConfigSource, so the engine can derive
+// RNCSlider's events and color/image processors on first commit. We pull the codegen SPEC, never
+// the library's default export (Slider.tsx, a React component using hooks) — this module has no
+// hooks, so it is framework-agnostic and shared by every adapter entry (vue / react). Each adapter
+// barrel imports it; the component modules and their headless tests stay free of the spec. See
+// CLAUDE.md <third_party_rn_packages_are_react_only> and ADR 0027.
+
+import '@react-native-community/slider/dist/RNCSliderNativeComponent';
+import { processColor, registerComponent, type IColorValue } from '@symbiote-native/engine';
+import {
+  RNC_SLIDER_VIEW_NAME,
+  SLIDER_ON_CHANGE,
+  SLIDER_ON_VALUE_CHANGE,
+  SLIDER_ON_SLIDING_START,
+  SLIDER_ON_SLIDING_COMPLETE,
+  SLIDER_ON_ACCESSIBILITY_ACTION,
+} from './core';
+
+function listenerName(prop: string): string {
+  return prop.charAt(2).toLowerCase() + prop.slice(3);
+}
+
+function processSliderColor(value: unknown): unknown {
+  return processColor(value as IColorValue);
+}
+
+// Fallback metadata for the native slider. RN's codegen module above normally registers the same
+// ViewConfig into ReactNativeViewConfigRegistry, but relying only on that side effect is brittle on
+// Metro/RN version boundaries: if the registry lookup misses, the slider still mounts, but tint
+// props stay raw and native value events never route back to JS. Keep the explicit fallback here,
+// in the wrapper package that owns RNCSlider, so React/Vue/Angular all inherit the same behavior.
+registerComponent(RNC_SLIDER_VIEW_NAME, {
+  events: [
+    { raw: 'topChange', listener: listenerName(SLIDER_ON_CHANGE) },
+    { raw: 'topRNCSliderValueChange', listener: listenerName(SLIDER_ON_VALUE_CHANGE) },
+    {
+      raw: 'topRNCSliderSlidingStart',
+      listener: listenerName(SLIDER_ON_SLIDING_START),
+      direct: true,
+    },
+    {
+      raw: 'topRNCSliderSlidingComplete',
+      listener: listenerName(SLIDER_ON_SLIDING_COMPLETE),
+      direct: true,
+    },
+    {
+      raw: 'topRNCSliderAccessibilityAction',
+      listener: listenerName(SLIDER_ON_ACCESSIBILITY_ACTION),
+      direct: true,
+    },
+  ],
+  processors: {
+    minimumTrackTintColor: processSliderColor,
+    maximumTrackTintColor: processSliderColor,
+    thumbTintColor: processSliderColor,
+  },
+});

package/src/vue/index.ts

@@ -0,0 +1,11 @@
+// @symbiote-native/slider/vue: the Vue wrapper over the @react-native-community/slider native view.
+// Importing this barrel first registers the native view's ViewConfig (./register, a side-effect
+// import of the codegen spec — never the library's React component), then exposes the platform-
+// split Slider. The public prop type is the agnostic core ISliderProps plus a Vue-only `class`
+// field (see slider/shared.ts); the custom StepMarker is a Vue scoped slot, not a prop. See
+// ADR 0027.
+
+import '../register';
+
+export { Slider } from './slider';
+export type { ISliderProps } from './slider/shared';

package/src/vue/slider/index.android.ts

@@ -0,0 +1,13 @@
+// Slider on Android: the native view sizes itself (no default height), lays out implicit steps at
+// 128-point resolution, and keeps the step row at the top. Mirrors the library's Android branches.
+
+import { createSlider } from './shared';
+import { SLIDER_STEP_RESOLUTION_ANDROID } from '../../core';
+
+const ANDROID_STEPS_CONTAINER_TOP = 0;
+
+export const Slider = createSlider({
+  defaultStyle: {},
+  stepResolution: SLIDER_STEP_RESOLUTION_ANDROID,
+  stepsContainerTop: ANDROID_STEPS_CONTAINER_TOP,
+});

package/src/vue/slider/index.ios.ts

@@ -0,0 +1,14 @@
+// Slider on iOS: the native view has an intrinsic 40pt height (the wrapper applies it as the
+// default), lays out implicit steps at 1000-point resolution, and nudges the step row down 10pt.
+// Also the base (./index re-exports it) for headless. Mirrors the library's iOS branches.
+
+import { createSlider } from './shared';
+import { SLIDER_IOS_DEFAULT_HEIGHT, SLIDER_STEP_RESOLUTION_IOS } from '../../core';
+
+const IOS_STEPS_CONTAINER_TOP = 10;
+
+export const Slider = createSlider({
+  defaultStyle: { height: SLIDER_IOS_DEFAULT_HEIGHT },
+  stepResolution: SLIDER_STEP_RESOLUTION_IOS,
+  stepsContainerTop: IOS_STEPS_CONTAINER_TOP,
+});

package/src/vue/slider/index.ts

@@ -0,0 +1,5 @@
+// Base entry for headless / tsc: re-exports the iOS variant (Metro picks index.ios / index.android
+// per platform via filename selection; this no-suffix file is what tsx/vitest resolve). ADR 0026.
+
+export { Slider } from './index.ios';
+export type { ISliderProps } from './shared';