aix 0.0.14 → 0.1.0-alpha.1

package/src/fade-in/index.tsx

@@ -0,0 +1,97 @@
+import {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated'
+import { createUsePool } from './createUsePool'
+import { createUseStaggered } from './createUseStaggered'
+import Animated from 'react-native-reanimated'
+import { Children, memo, useState } from 'react'
+
+const useIsAnimatedInPool = createUsePool()
+const useStaggeredAnimation = createUseStaggered(32)
+
+function FadeIn({
+  children,
+  onFadedIn,
+  Component = Animated.Text as any,
+}: {
+  children: React.ReactNode
+  onFadedIn: () => void
+  Component?: React.ComponentType<any>
+}) {
+  const progress = useSharedValue(0)
+
+  const startAnimation = () => {
+    progress.set(withTiming(1, { duration: 500 }))
+    setTimeout(onFadedIn, 500)
+  }
+
+  useStaggeredAnimation(startAnimation)
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: progress.get(),
+  }))
+
+  return <Component style={animatedStyle}>{children}</Component>
+}
+
+const AnimatedFadeInText = memo(function AnimatedFadeInText(props: {
+  text: string
+}) {
+  const chunks = props.text.split(' ')
+
+  return chunks.map((chunk, i) => {
+    if (i < chunks.length - 1) chunk += ' '
+
+    return <TextFadeInStaggered key={i} text={chunk} />
+  })
+})
+
+export const TextFadeInStaggeredIfStreaming = memo(
+  function TextFadeInStaggeredIfStreaming({
+    children: childrenProp,
+    disabled,
+  }: {
+    children: React.ReactNode
+    disabled: boolean
+  }) {
+    const [enabled] = useState(!disabled)
+
+    let children = childrenProp
+    if (enabled && children) {
+      if (Array.isArray(children)) {
+        children = Children.map(children, (child, i) =>
+          typeof child === 'string' ? (
+            <AnimatedFadeInText key={i} text={child} />
+          ) : (
+            child
+          )
+        )
+      } else if (typeof children === 'string') {
+        children = <AnimatedFadeInText text={children} />
+      }
+    }
+
+    return children
+  }
+)
+
+const TextFadeInStaggered = memo(function TextFadeInStaggered({
+  text,
+}: {
+  text: string
+}) {
+  const { isActive, evict } = useIsAnimatedInPool()
+  return isActive ? (
+    <FadeIn
+      onFadedIn={() => {
+        evict()
+      }}
+    >
+      {text}
+    </FadeIn>
+  ) : (
+    text
+  )
+})

package/src/footer.tsx

@@ -0,0 +1,30 @@
+import { getHostComponent } from 'react-native-nitro-modules'
+import AixComposerConfig from '../nitrogen/generated/shared/json/AixComposerConfig.json'
+import type { AixComposerProps } from './views/aix.nitro'
+import { StyleSheet } from 'react-native'
+
+const AixFooterInternal = getHostComponent<AixComposerProps, {}>(
+  'AixComposer',
+  () => AixComposerConfig
+)
+
+export function AixFooter(
+  props: React.ComponentProps<typeof AixFooterInternal>
+) {
+  if (__DEV__) {
+    const flat = StyleSheet.flatten(props.style)
+    const broken = Object.keys({
+      paddingBottom: flat.paddingBottom,
+      padding: flat.padding,
+    }).filter((key) => flat[key as keyof typeof flat] !== undefined)
+
+    if (broken.length) {
+      console.error(
+        `<AixFooter /> You used ${broken.join(
+          ', '
+        )} in the style prop. Vertical padding is not supported on AixFooter directly. Please apply it to a child view instead.`
+      )
+    }
+  }
+  return <AixFooterInternal {...props} />
+}

package/src/index.ts

@@ -1,16 +1,20 @@
-export { DeferredIterable } from "./deferredIterable";
-export { restToIterable } from "./restToIterable";
-export { merge } from "./merge";
-export { lookahead } from "./lookahead";
-export { toCallbacks } from "./toCallbacks";
-export { iteratorToIterable } from "./iteratorToIterable";
-export { map } from "./map";
-export { flatMap } from "./flatMap";
-export { interval } from "./interval";
-export { insert } from "./insert";
-export { zip } from "./zip";
-export { iterableToArray } from "./iterableToArray";
-export { filter } from "./filter";
-export { concat } from "./concat";
-export { fromEvent } from "./fromEvent";
-export { tap } from "./tap";
+import { getHostComponent, type HybridRef } from 'react-native-nitro-modules'
+import AixCellViewConfig from '../nitrogen/generated/shared/json/AixCellViewConfig.json'
+import type { AixCellViewProps } from './views/aix.nitro'
+import { useRef } from 'react'
+import type { AixRef } from './aix'
+export * from './fade-in'
+
+export { Aix, type AixRef } from './aix'
+export { AixFooter } from './footer'
+
+export const AixCell = getHostComponent<AixCellViewProps, {}>(
+  'AixCellView',
+  () => AixCellViewConfig
+)
+
+export type AixCellViewRef = HybridRef<AixCellViewProps, {}>
+
+export function useAixRef() {
+  return useRef<AixRef | null>(null)
+}

package/src/views/aix.nitro.ts

@@ -0,0 +1,148 @@
+import type {
+  HybridView,
+  HybridViewProps,
+  HybridViewMethods,
+} from 'react-native-nitro-modules'
+
+export interface AixAdditionalContentInsets {
+  whenKeyboardOpen: number
+  whenKeyboardClosed: number
+}
+
+export interface AixAdditionalContentInsetsProp {
+  top?: AixAdditionalContentInsets
+  bottom?: AixAdditionalContentInsets
+}
+
+export interface AixScrollIndicatorInsetValue {
+  whenKeyboardOpen: number
+  whenKeyboardClosed: number
+}
+
+export interface AixScrollIndicatorInsets {
+  top?: AixScrollIndicatorInsetValue
+  bottom?: AixScrollIndicatorInsetValue
+}
+
+export interface AixScrollOnFooterSizeUpdate {
+  /**
+   * Whether to scroll on footer size update.
+   *
+   * Default: true
+   */
+  enabled: boolean
+  /**
+   * The number of pixels from the bottom of the scroll view to the end of the content that is considered "scrolled near the end".
+   *
+   * Default: 100
+   */
+  scrolledToEndThreshold?: number
+  /**
+   * Whether to animate the scroll.
+   *
+   * Default: false
+   */
+  animated?: boolean
+}
+
+export interface AixProps extends HybridViewProps {
+  shouldStartAtEnd: boolean
+  /**
+   * Control the behavior of scrolling the content when footer size changes.
+   *
+   * By default, changing the height of the footer will shift content up in the scroll view.
+   *
+   * Default: { enabled: true, scrolledToEndThreshold: 100, animated: false }
+   */
+  scrollOnFooterSizeUpdate?: AixScrollOnFooterSizeUpdate
+  /**
+   * The number of pixels from the bottom of the scroll view to the end of the content that is considered "near the end".
+   *
+   * If the scroll view is scrolled to the end of the content, and the content is less than this threshold, the content will be shifted up when the keyboard is opened.
+   *
+   * By default, it will be the greater of the current blank size, or 200.
+   *
+   * TODO make this a more adaptive prop, like { strategy: 'blank-size', min: 200 } | { strategy: 'fixed', value: 200 }
+   *
+   */
+  scrollEndReachedThreshold?: number
+  /**
+   * Scroll end blank size threshold.
+   *
+   * If the blank size is less than this threshold, then the content will collapse to the keyboard when the keyboard is opened.
+   *
+   * You likely don't need to customize this much.
+   *
+   * Default: 0
+   *
+   * TODO we might want to implement this, but i'm not sure.
+   *
+   * By default, the content will collapse to the keyboard on opening if the blank size is less than half the size of the scroll view parent, and greater than the keyboard height.
+   */
+
+  additionalContentInsets?: AixAdditionalContentInsetsProp
+
+  /**
+   * Additional insets for the scroll indicator, added to existing safe area insets.
+   * Applied to verticalScrollIndicatorInsets on iOS.
+   */
+  additionalScrollIndicatorInsets?: AixScrollIndicatorInsets
+
+  /**
+   * The nativeID of the scroll view to use.
+   *
+   * If provided, will search for a scroll view with this accessibilityIdentifier.
+   * If not provided or not found, falls back to the default subview iteration logic.
+   */
+  mainScrollViewID?: string
+
+  /**
+   * Used to index of the second-to-last message.
+   *
+   * For AI chat apps, it should correspond to the index of the last user message.
+   *
+   * By default, it will simply be the seccond-to-last item. Specifically, it will correspond to the Cell index before the <Cell isLast />.
+   *
+   * However, if you use custom message types, you can override it with this prop.
+   *
+   * For example, if you use a "<Timestamp />" row in your LegendList or FlashList implementation, then you can set this value.
+   *
+   * This indicates which message will be scrolled into view.
+   *
+   */
+  penultimateCellIndex?: number
+}
+
+export interface AixMethods extends HybridViewMethods {
+  scrollToEnd(animated?: boolean): void
+  scrollToIndexWhenBlankSizeReady(
+    index: number,
+    animated?: boolean,
+    waitForKeyboardToEnd?: boolean
+  ): void
+}
+
+export type Aix = HybridView<
+  AixProps,
+  AixMethods,
+  { ios: 'swift'; android: 'kotlin' }
+>
+
+export interface AixCellViewProps extends HybridViewProps {
+  isLast: boolean
+  index: number
+}
+
+export type AixCellView = HybridView<
+  AixCellViewProps,
+  {},
+  { ios: 'swift'; android: 'kotlin' }
+>
+
+export interface AixComposerProps extends HybridViewProps {}
+
+export type AixComposer = HybridView<
+  AixComposerProps,
+  {},
+  { ios: 'swift'; android: 'kotlin' }
+>

package/docs/API.md

@@ -1,193 +0,0 @@
-# Aix API Reference
-
-## Classes
-
-- [DeferredIterable](#deferrediterable)
-    - [DeferredIterable.callback](#deferrediterablecallback)
-    - [DeferredIterable.iterable](#deferrediterableiterable)
-    - [DeferredIterable.finally](#deferrediterablefinally)
-    - [DeferredIterable.value](#deferrediterablevalue)
-    - [DeferredIterable.finish](#deferrediterablefinish)
-
-## Functions
-
-- [of](#of)
-- [map](#map)
-- [filter](#filter)
-- [flatMap](#flatMap)
-- [concat](#concat)
-
-# Classes
-
-## DeferredIterable
-
-`DeferredIterable` makes it easy to turn stream of events into an interable.
-
-You typically interact with `DeferredIterable` in 2 ways:
-
-- To send data into the `DeferredIterable` call the `callback` function to send an `IteratorResult`
-- To read data from the `DeferredIterable` use the `iterable` property.
-
-### Example
-
-```javascript
-import { DeferredIterable } from "aix/deferredIterable";
-
-const deferredIterable = new DeferredIterable();
-
-// set up a callback that calls value on the deferredIterable
-const callback = value => deferredIterable.value(value);
-
-// attach the callback to the click event
-document.addEventListener('click', callback);
-
-// remove the callback when / if the iterable stops
-deferredIterable.finally(() => document.removeEventListener('click', deferredIterable.value));
-
-// go through all the click events
-for await (const click of deferredIterable.iterable) {
-    console.log('a button was clicked');
-}
-```
-
-### DeferredIterable.callback
-
-The callback to call to send a `IteratorResult` into the `DeferredIterable`. An `IteratorResult`
-has a `done` boolean property and a `value` property.
-
-```javascript
-import { DeferredIterable } from "aix/deferredIterable";
-
-const deferredIterable = new DeferredIterable();
-deferredIterable.callback({ done: false, value: 1 });
-deferredIterable.callback({ done: false, value: 2 });
-deferredIterable.callback({ done: false, value: 3 });
-deferredIterable.callback({ done: true });
-
-for await (const item of deferredIterable.iterable) {
-    console.log(item); // prints 1, 2, 3
-}
-```
-
-### DeferredIterable.iterable
-
-An ```AsyncIterable``` that returns values supplied by calling ```callback```.
-
-```javascript
-import { DeferredIterable } from "aix/deferredIterable";
-
-const deferredIterable = new DeferredIterable();
-deferredIterable.callback({ done: false, value: 1 });
-deferredIterable.callback({ done: false, value: 2 });
-deferredIterable.callback({ done: false, value: 3 });
-deferredIterable.callback({ done: true });
-
-for await (const item of deferredIterable.iterable) {
-    console.log(item); // prints 1, 2, 3
-}
-```
-
-### DeferredIterable.finally
-
-The callback supplied to ```finally``` is called when the iterable finishes either 
-because it's run out of values, it has returned or an error was thrown.
-
-### DeferredIterable.value
-
-A helper method to pass a value to the DeferredIterable. Calling
-```deferredIterable.value('test')``` is the same as calling 
-```deferredIterable.callback({ done: false, value: 'test'} )```.
-
-### DeferredIterable.finish
-
-A helper method to signal the last value to DeferredIterable. Calling
-```deferredIterable.finish()``` is the same as calling 
-```deferredIterable.callback({ done: true} )```.
-
-# Functions
-
-## of
-
-Construct a new async iterable from a series
-of values.
-
-```javascript
-import { of } from "aix/of";
-
-const values = of(1, 2, 3);
-
-for await(const item of mapped) {
-    console.log(item); // outputs 1, 2, 3
-}
-```
-
-## map
-
-Go through each item in the iterable and run a mapping function. The result will be a new
-iterable with the transformed values.
-
-```javascript
-import { map } from "aix/map";
-import { of } from "aix/of";
-
-const mapped = map(value => value * 2)(of(1, 2, 3));
-
-for await(const item of mapped) {
-    console.log(item); // outputs 2, 4, 6
-}
-```
-
-## flatMap
-
-Go through each item in the iterable and run a mapping function that returns an async iterable. The
-result is then flattened.
-
-```javascript
-import { flatMap } from "aix/flatMap";
-import { of } from "aix/of";
-
-const mapped = flatMap(
-    async function* (value) {
-        yield value;
-        yield value;
-    }
-)(of(1, 2, 3);
-
-for await(const item of mapped) {
-    console.log(item); // outputs 1, 1, 2, 2, 3, 3
-}
-```
-
-## filter
-
-Filter an iterable based on some criteria.
-
-```javascript
-import { filter } from "aix/filter";
-import { of } from "aix/of";
-
-const filtered = filter(
-    value => value % 2 === 0
-)(of(1, 2, 3, 4, 5, 6);
-
-for await(const item of filtered) {
-    console.log(item); // outputs 2, 4, 6
-}
-```
-
-## concat
-
-Concatenate 2 iterables in order
-
-```javascript
-import { concat } from "aix/concat";
-import { of } from "aix/of";
-
-const concatted = concat(
-    of(1, 2)
-)(of(3, 4);
-
-for await(const item of concatted) {
-    console.log(item); // outputs 1, 2, 3, 4
-}
-```

package/jest.config.js

@@ -1,17 +0,0 @@
-module.exports = {
-    "roots": [
-      "<rootDir>/src"
-    ],
-    "transform": {
-      "^.+\\.tsx?$": "ts-jest"
-    },
-    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",
-    "moduleFileExtensions": [
-      "ts",
-      "tsx",
-      "js",
-      "jsx",
-      "json",
-      "node"
-    ],
-  }

package/lib/__tests__/deferredIterable.test.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/__tests__/deferredIterable.test.js

@@ -1,111 +0,0 @@
-"use strict";
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-var __asyncValues = (this && this.__asyncValues) || function (o) {
-    if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
-    var m = o[Symbol.asyncIterator], i;
-    return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
-    function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
-    function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-var _this = this;
-Object.defineProperty(exports, "__esModule", { value: true });
-var deferredIterable_1 = __importDefault(require("../deferredIterable"));
-test("DeferredIterable", function () { return __awaiter(_this, void 0, void 0, function () {
-    var e_1, _a, d, result, _b, _c, item, e_1_1;
-    return __generator(this, function (_d) {
-        switch (_d.label) {
-            case 0:
-                d = new deferredIterable_1.default();
-                d.value(1);
-                d.value(2);
-                d.value(3);
-                d.close();
-                result = [];
-                _d.label = 1;
-            case 1:
-                _d.trys.push([1, 6, 7, 12]);
-                _b = __asyncValues(d.iterator);
-                _d.label = 2;
-            case 2: return [4 /*yield*/, _b.next()];
-            case 3:
-                if (!(_c = _d.sent(), !_c.done)) return [3 /*break*/, 5];
-                item = _c.value;
-                result.push(item);
-                _d.label = 4;
-            case 4: return [3 /*break*/, 2];
-            case 5: return [3 /*break*/, 12];
-            case 6:
-                e_1_1 = _d.sent();
-                e_1 = { error: e_1_1 };
-                return [3 /*break*/, 12];
-            case 7:
-                _d.trys.push([7, , 10, 11]);
-                if (!(_c && !_c.done && (_a = _b.return))) return [3 /*break*/, 9];
-                return [4 /*yield*/, _a.call(_b)];
-            case 8:
-                _d.sent();
-                _d.label = 9;
-            case 9: return [3 /*break*/, 11];
-            case 10:
-                if (e_1) throw e_1.error;
-                return [7 /*endfinally*/];
-            case 11: return [7 /*endfinally*/];
-            case 12:
-                expect(result).toEqual([1, 2, 3]);
-                return [2 /*return*/];
-        }
-    });
-}); });
-test("DeferredIterable", function () { return __awaiter(_this, void 0, void 0, function () {
-    var d, iterator, _a, _b, value, done;
-    return __generator(this, function (_c) {
-        switch (_c.label) {
-            case 0:
-                d = new deferredIterable_1.default();
-                iterator = d.iterator;
-                return [4 /*yield*/, Promise.all([d.value(1), iterator.next()])];
-            case 1:
-                _a = _c.sent(), _b = _a[1], value = _b.value, done = _b.done;
-                expect(done).toBeFalsy();
-                expect(value).toBe(1);
-                return [2 /*return*/];
-        }
-    });
-}); });

package/lib/__tests__/filter.test.d.ts

@@ -1 +0,0 @@
-export {};