@astryxdesign/core 0.7.6-canary.f73623d → 0.7.6-canary.f899313

package/src/motion/roles.test.ts

@@ -1,273 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file roles.test.ts
- * @input roles.ts and the shared UIKit tables (registered by this test)
- * @output Proof that the registered roles are exactly the ones spec:AST-094
- *   FR4 names, each by its table path; that every other table value, a
- *   component's measured spring included, is no role; and that a role's CSS
- *   value reads back as the same motion
- * @position Testing for /packages/core/src/motion/roles.ts
- */
-
-import {readFileSync} from 'node:fs';
-import {resolve} from 'node:path';
-import {describe, expect, it} from 'vitest';
-import {
-  formatMotionRoleValue,
-  isMotionRoleId,
-  listMotionRoles,
-  motionRoleIn,
-  motionRoleOf,
-  motionRoleVariable,
-  parseMotionRoleValue,
-  registerMotionTable,
-} from './roles';
-import {dampingRatioOf, naturalFrequency, toSpring} from './spring';
-import {navigation, scroll, springs, timing} from './uikit';
-import {
-  motionTableFiles,
-  REGISTER_EXPORT,
-} from '../../../../scripts/motion-table-files.mjs';
-
-// Every table the role list is generated from, registered the way the
-// generator does: through each module's register<Name>Table.
-for (const file of motionTableFiles(resolve(__dirname, '..'))) {
-  const module = (await import(file)) as Record<string, unknown>;
-  for (const [name, value] of Object.entries(module)) {
-    if (REGISTER_EXPORT.test(name) && typeof value === 'function') {
-      (value as () => void)();
-    }
-  }
-}
-// The tables that discovery registered, before any test adds a fixture.
-const DISCOVERED = new Set(
-  listMotionRoles().map(role => role.id.split('.')[0]),
-);
-
-describe('motion roles', () => {
-  it('names a role by its table path, and its CSS variable in kebab case', () => {
-    expect(isMotionRoleId('sheet.present')).toBe(true);
-    expect(isMotionRoleId('timing.curves.move')).toBe(true);
-    expect(isMotionRoleId('sheet')).toBe(false);
-    expect(isMotionRoleId('Sheet.present')).toBe(false);
-    expect(motionRoleVariable('springs.sheetDetent')).toBe(
-      '--motion-springs-sheet-detent',
-    );
-    expect(motionRoleVariable('timing.curves.move')).toBe(
-      '--motion-timing-curves-move',
-    );
-    expect(() => motionRoleVariable('sheet')).toThrow(/dotted table path/);
-  });
-
-  it('leaves a table value FR4 does not name an internal constant', () => {
-    const shared = {response: 0.4, dampingRatio: 0.9};
-    const table = {
-      present: shared,
-      dismiss: shared,
-      fadeMs: 200,
-      curves: {out: [0, 0, 0.58, 1] as const},
-    };
-    registerMotionTable('fixture', table);
-    // No role, no CSS variable, and the table is untouched.
-    expect(motionRoleOf(table.present)).toBeUndefined();
-    expect(table.dismiss).toBe(table.present);
-    expect(motionRoleIn(table, 'fadeMs')).toBeUndefined();
-    expect(motionRoleOf(table.curves.out)).toBeUndefined();
-    expect(listMotionRoles().some(role => role.id.startsWith('fixture.'))).toBe(
-      false,
-    );
-  });
-
-  it('has exactly the roles spec:AST-094 FR4 names', () => {
-    const spec = readFileSync(
-      resolve(
-        __dirname,
-        '../../../../docs/specs/AST-094-touch-presentations/spec.md',
-      ),
-      'utf8',
-    );
-    const fr4 = spec.slice(spec.indexOf('**FR4'), spec.indexOf('**FR5'));
-    const named = [...fr4.matchAll(/^\s*\| `([a-z][\w.]*)`\s*\|/gm)].map(
-      match => match[1],
-    );
-    expect(named.length).toBeGreaterThan(0);
-    // Every table registered, the roles are exactly FR4's (other tests
-    // here register a fixture, which lists none).
-    expect(new Set(listMotionRoles().map(role => role.id))).toEqual(
-      new Set(named),
-    );
-  });
-
-  it('names the shared roles for their use, as spec:AST-094 FR4 does', () => {
-    expect(
-      [
-        springs.fingerTracking,
-        springs.emphasis,
-        springs.settle,
-        springs.quickChange,
-        springs.viewChange,
-        springs.timedChange,
-        springs.stateChange,
-        springs.directChange,
-        springs.menuOpen,
-        springs.menuClose,
-        timing.curves.viewChange,
-        timing.curves.exit,
-        timing.curves.entrance,
-        timing.curves.move,
-      ].map(leaf => motionRoleOf(leaf)?.id),
-    ).toEqual([
-      'springs.fingerTracking',
-      'springs.emphasis',
-      'springs.settle',
-      'springs.quickChange',
-      'springs.viewChange',
-      'springs.timedChange',
-      'springs.stateChange',
-      'springs.directChange',
-      'springs.menuOpen',
-      'springs.menuClose',
-      'timing.curves.viewChange',
-      'timing.curves.exit',
-      'timing.curves.entrance',
-      'timing.curves.move',
-    ]);
-    expect(motionRoleIn(timing, 'stateChangeMs')?.id).toBe(
-      'timing.stateChangeMs',
-    );
-    // A preset or curve-shape name is no role id.
-    for (const old of [
-      'springs.smooth',
-      'springs.bouncy',
-      'timing.curves.easeInOut',
-      'timing.implicitAnimationMs',
-    ]) {
-      expect(listMotionRoles().map(role => role.id)).not.toContain(old);
-    }
-  });
-
-  it("leaves the keyboard's motion out: it rides the keyboard (FR4)", () => {
-    expect(motionRoleOf(springs.keyboard)).toBeUndefined();
-    expect(motionRoleIn(timing, 'keyboardNotificationMs')).toBeUndefined();
-  });
-
-  it('refuses a spring that never settles', () => {
-    expect(() =>
-      formatMotionRoleValue('spring', {duration: 0.5, bounce: 1}),
-    ).toThrow(/must settle/);
-    expect(() =>
-      formatMotionRoleValue('spring', {response: 0.5, dampingRatio: 0}),
-    ).toThrow(/must settle/);
-    expect(parseMotionRoleValue('spring', '0.5s 1')).toBeNull();
-  });
-
-  it('makes the roles of the shared tables, and keeps every other value internal', () => {
-    expect(motionRoleOf(springs.viewChange)?.id).toBe('springs.viewChange');
-    expect(motionRoleOf(timing.curves.move)?.kind).toBe('curve');
-    expect(motionRoleIn(timing, 'stateChangeMs')?.kind).toBe('duration');
-    // A component's measured value is an internal constant, not a role.
-    expect(motionRoleOf(springs.sheetPresent)).toBeUndefined();
-    expect(springs.sheetPresent).toEqual(springs.viewChange);
-    expect(motionRoleOf(scroll.bounce)).toBeUndefined();
-    expect(motionRoleIn(timing.press, 'flashMs')).toBeUndefined();
-    expect(motionRoleIn(navigation, 'transitionMs')).toBeUndefined();
-    // The Reduced Motion fade, UIKit's menu spring under Reduce Motion, the
-    // thresholds and the arbitration timings are not motion roles either.
-    expect(motionRoleIn(timing, 'reducedMotionCrossFadeMs')).toBeUndefined();
-    expect(motionRoleOf(springs.menuReducedMotion)).toBeUndefined();
-    // Nor is the keyboard's motion: it rides the keyboard's own spring and
-    // notification duration, not a role (spec:AST-094 FR4).
-    expect(motionRoleIn(springs, 'keyboard')).toBeUndefined();
-    expect(motionRoleIn(timing, 'keyboardNotificationMs')).toBeUndefined();
-    expect(motionRoleIn(timing.press, 'scrollBrakeMs')).toBeUndefined();
-    expect(motionRoleIn(scroll, 'delaysContentTouchesMs')).toBeUndefined();
-    expect(motionRoleIn(navigation, 'parallax')).toBeUndefined();
-    const ids = listMotionRoles().map(role => role.id);
-    expect(ids.some(id => id.startsWith('gestures.'))).toBe(false);
-    // Every role has its own CSS variable.
-    const variables = listMotionRoles().map(role => role.variable);
-    expect(new Set(variables).size).toBe(variables.length);
-  });
-
-  it('registers exactly the roles spec:AST-094 FR4 names, internally', () => {
-    // Every table discovery registered (other tests here add fixtures).
-    const discovered = listMotionRoles().filter(role =>
-      DISCOVERED.has(role.id.split('.')[0]),
-    );
-    expect(
-      Object.fromEntries(discovered.map(role => [role.id, role.kind])),
-    ).toEqual({
-      'springs.directChange': 'spring',
-      'springs.emphasis': 'spring',
-      'springs.fingerTracking': 'spring',
-      'springs.menuClose': 'spring',
-      'springs.menuOpen': 'spring',
-      'springs.quickChange': 'spring',
-      'springs.settle': 'spring',
-      'springs.stateChange': 'spring',
-      'springs.subMenuBack': 'spring',
-      'springs.subMenuOpen': 'spring',
-      'springs.timedChange': 'spring',
-      'springs.viewChange': 'spring',
-      'timing.curves.entrance': 'curve',
-      'timing.curves.exit': 'curve',
-      'timing.curves.move': 'curve',
-      'timing.curves.viewChange': 'curve',
-      'timing.stateChangeMs': 'duration',
-    });
-  });
-
-  it('writes every table value in CSS form and reads back the same motion', () => {
-    for (const role of listMotionRoles()) {
-      const text = formatMotionRoleValue(role.kind, role.value);
-      const back = parseMotionRoleValue(role.kind, text);
-      expect(back, `${role.id}: ${text}`).not.toBeNull();
-      if (role.kind === 'spring') {
-        const a = toSpring(role.value as Parameters<typeof toSpring>[0]);
-        const b = toSpring(back as Parameters<typeof toSpring>[0]);
-        expect(naturalFrequency(b) / naturalFrequency(a)).toBeCloseTo(1, 5);
-        expect(dampingRatioOf(b)).toBeCloseTo(dampingRatioOf(a), 5);
-      } else {
-        expect(back).toEqual(role.value);
-      }
-    }
-    expect(
-      formatMotionRoleValue('spring', {response: 0.5, dampingRatio: 0.85}),
-    ).toBe('0.5s 0.15');
-    expect(formatMotionRoleValue('duration', 250)).toBe('250ms');
-    expect(formatMotionRoleValue('curve', [0.42, 0, 0.58, 1])).toBe(
-      'cubic-bezier(0.42, 0, 0.58, 1)',
-    );
-  });
-
-  it('refuses invalid values and reads malformed CSS as unset', () => {
-    expect(() => formatMotionRoleValue('duration', -1)).toThrow(/≥ 0/);
-    expect(() => formatMotionRoleValue('curve', [2, 0, 0.5, 1])).toThrow(
-      /x1 and x2/,
-    );
-    expect(() => formatMotionRoleValue('spring', {response: 0.5})).toThrow(
-      /spring is/,
-    );
-    // A spring with no damping never settles.
-    for (const never of [
-      {duration: 0.5, bounce: 1},
-      {duration: 0.5, bounce: 1.5},
-      {response: 0.5, dampingRatio: 0},
-      {mass: 1, stiffness: 100, damping: 0},
-    ]) {
-      expect(() => formatMotionRoleValue('spring', never)).toThrow(
-        /must settle/,
-      );
-    }
-    expect(parseMotionRoleValue('spring', '0.5s 1')).toBeNull();
-    expect(parseMotionRoleValue('spring', '')).toBeNull();
-    expect(parseMotionRoleValue('spring', 'fast')).toBeNull();
-    expect(parseMotionRoleValue('spring', '0.4s 0.2')).toEqual({
-      duration: 0.4,
-      bounce: 0.2,
-    });
-    expect(parseMotionRoleValue('duration', ' 0.3s ')).toBe(300);
-    expect(parseMotionRoleValue('curve', 'ease-in')).toBeNull();
-  });
-});

package/src/motion/rubberBand.test.ts

@@ -1,88 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-/**
- * @file rubberBand.test.ts
- * @input vitest, the rubber-band functions
- * @output Checks the formula against a published device measurement of
- *   UIScrollView, its slope, inverse and clamp round trips
- * @position Testing; validates rubberBand.ts without a browser
- */
-
-import {describe, expect, it} from 'vitest';
-import {
-  rubberBand,
-  rubberBandClamp,
-  rubberBandInverse,
-  rubberBandSlope,
-  rubberBandUnclamp,
-} from './rubberBand';
-
-describe('rubberBand', () => {
-  it('reproduces the published UIScrollView measurement (812 pt view)', () => {
-    // Finger 500 / 1000 / 1500 pt past the edge displayed 205 / 328 / 409 pt
-    // (I. Lobanov, "How UIScrollView works").
-    expect(Math.abs(rubberBand(500, 812) - 205)).toBeLessThan(0.5);
-    expect(Math.abs(rubberBand(1000, 812) - 328)).toBeLessThan(0.5);
-    expect(Math.abs(rubberBand(1500, 812) - 409)).toBeLessThan(0.5);
-  });
-
-  it('is (1 − 1 ÷ (x·c ÷ d + 1))·d with c = 0.55', () => {
-    for (const x of [0, 1, 10, 80, 300, 2000]) {
-      expect(rubberBand(x, 600)).toBeCloseTo(
-        (1 - 1 / ((x * 0.55) / 600 + 1)) * 600,
-        9,
-      );
-    }
-    expect(rubberBand(100, 600, 0.3)).toBeCloseTo(
-      (1 - 1 / ((100 * 0.3) / 600 + 1)) * 600,
-      9,
-    );
-  });
-
-  it('keeps the sign, never reaches the dimension, starts at slope c', () => {
-    expect(rubberBand(-120, 700)).toBeCloseTo(-rubberBand(120, 700), 12);
-    expect(rubberBand(1e9, 700)).toBeLessThan(700);
-    expect(rubberBandSlope(0, 700)).toBeCloseTo(0.55, 12);
-    for (const x of [0, 50, 400, 3000]) {
-      const h = 1e-4;
-      const numeric =
-        (rubberBand(x + h, 700) - rubberBand(x - h, 700)) / (2 * h);
-      expect(rubberBandSlope(x, 700)).toBeCloseTo(numeric, 6);
-    }
-  });
-
-  it('inverts exactly', () => {
-    for (const x of [-900, -40, 0, 3, 75, 640, 5000]) {
-      expect(rubberBandInverse(rubberBand(x, 812), 812)).toBeCloseTo(x, 6);
-    }
-    expect(rubberBandInverse(812, 812)).toBe(Infinity);
-    expect(rubberBandInverse(-900, 812)).toBe(-Infinity);
-  });
-
-  it('a degenerate dimension bands nothing', () => {
-    expect(rubberBand(50, 0)).toBe(0);
-    expect(rubberBandInverse(50, 0)).toBe(0);
-    expect(rubberBandSlope(50, 0)).toBe(0);
-  });
-});
-
-describe('rubberBandClamp', () => {
-  it('passes values inside the range through and bands past either edge', () => {
-    expect(rubberBandClamp(120, 0, 500, 800)).toBe(120);
-    expect(rubberBandClamp(-100, 0, 500, 800)).toBeCloseTo(
-      rubberBand(-100, 800),
-      12,
-    );
-    expect(rubberBandClamp(650, 0, 500, 800)).toBeCloseTo(
-      500 + rubberBand(150, 800),
-      12,
-    );
-  });
-
-  it('round-trips through rubberBandUnclamp (a grab mid-bounce resumes in place)', () => {
-    for (const raw of [-600, -12, 0, 250, 500, 510, 1400]) {
-      const shown = rubberBandClamp(raw, 0, 500, 800);
-      expect(rubberBandUnclamp(shown, 0, 500, 800)).toBeCloseTo(raw, 6);
-    }
-  });
-});

package/src/motion/selectPage.test.ts

@@ -1,31 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-import {describe, expect, it} from 'vitest';
-import {selectPage} from './selectPage';
-
-describe('selectPage', () => {
-  it('lands on a real page when the current page is past the end', () => {
-    const result = selectPage({
-      position: 400,
-      velocity: 0,
-      pageSize: 100,
-      pageCount: 3,
-      currentPage: 4,
-    });
-    expect(result.value).toBeDefined();
-    expect(result.index).toBeGreaterThanOrEqual(0);
-    expect(result.index).toBeLessThanOrEqual(2);
-  });
-
-  it('moves at most one page per release', () => {
-    const page = (position: number, velocity: number, currentPage: number) =>
-      selectPage({position, velocity, pageSize: 390, pageCount: 6, currentPage})
-        .index;
-    expect(page(390, 0, 1)).toBe(1);
-    expect(page(430, 8000, 1)).toBe(2);
-    expect(page(350, -8000, 1)).toBe(0);
-    // A slow drag past half a page settles on the next page.
-    expect(page(600, 0, 1)).toBe(2);
-    expect(page(1950, 9000, 5)).toBe(5);
-  });
-});