@seed-design/lynx-react 0.2.0-alpha.3 → 0.3.0

package/src/utils/styled.ts

@@ -0,0 +1,442 @@
+import type { CSSProperties } from "@lynx-js/types";
+import type {
+  Dimension,
+  FontSize,
+  FontWeight,
+  LineHeight,
+  Radius,
+  ScopedColorBanner,
+  ScopedColorBg,
+  ScopedColorFg,
+  ScopedColorPalette,
+  ScopedColorStroke,
+  SpacingX,
+  SpacingY,
+} from "@seed-design/lynx-css/vars";
+import { vars } from "@seed-design/lynx-css/vars";
+
+import { useSafeArea } from "../hooks/useSafeArea";
+
+export function handleColor(color: string | undefined) {
+  if (!color) {
+    return undefined;
+  }
+  const [type, value] = color.split(".");
+  // @ts-expect-error token category is derived from the public string contract.
+  return vars.$color[type]?.[value] ?? color;
+}
+
+export function handleDimension(dimension: number | string | undefined): string | undefined {
+  if (dimension == null) {
+    return undefined;
+  }
+
+  if (typeof dimension === "number") {
+    return `${dimension}px`;
+  }
+
+  if (dimension === "full") {
+    return "100%";
+  }
+
+  const [type, value] = dimension.split(".");
+
+  // @ts-expect-error token category is derived from the public string contract.
+  return vars.$dimension[dimension] ?? vars.$dimension[type]?.[value] ?? dimension;
+}
+
+export function resolveFlexValue(
+  value: number | string | boolean | undefined,
+): number | string | undefined {
+  if (value === true) return 1;
+  if (value === false) return 0;
+  return value;
+}
+
+function handleBorderWidth(width: 0 | 1 | (string & {}) | undefined) {
+  if (width == null) {
+    return undefined;
+  }
+
+  if (typeof width === "number") {
+    return `${width}px`;
+  }
+
+  return width;
+}
+
+export function handlePaddingWithSafeArea(
+  padding: string | 0 | undefined,
+  safeAreaInset: string,
+): string | undefined {
+  if (padding === "safeArea") {
+    return safeAreaInset;
+  }
+
+  return handleDimension(padding);
+}
+
+export function handleRadius(radius: string | 0 | undefined) {
+  if (radius == null) {
+    return undefined;
+  }
+  // @ts-expect-error token category is derived from the public string contract.
+  return vars.$radius[radius] ?? radius;
+}
+
+function handleDisplay(display: string | undefined) {
+  if (!display) {
+    return undefined;
+  }
+
+  return (
+    {
+      flex: "flex",
+      none: "none",
+    }[display] ?? display
+  );
+}
+
+function handleFlexDirection(flexDirection: string | undefined) {
+  if (!flexDirection) {
+    return undefined;
+  }
+
+  return (
+    {
+      row: "row",
+      column: "column",
+      rowReverse: "row-reverse",
+      columnReverse: "column-reverse",
+    }[flexDirection] ?? flexDirection
+  );
+}
+
+function handleJustifyContent(justifyContent: string | undefined) {
+  if (!justifyContent) {
+    return undefined;
+  }
+
+  return (
+    {
+      flexStart: "flex-start",
+      flexEnd: "flex-end",
+      center: "center",
+      spaceBetween: "space-between",
+      spaceAround: "space-around",
+    }[justifyContent] ?? justifyContent
+  );
+}
+
+function handleAlignItems(alignItems: string | undefined) {
+  if (!alignItems) {
+    return undefined;
+  }
+
+  return (
+    {
+      flexStart: "flex-start",
+      flexEnd: "flex-end",
+      center: "center",
+      stretch: "stretch",
+    }[alignItems] ?? alignItems
+  );
+}
+
+export function handleFontWeight(fontWeight: string | undefined) {
+  if (!fontWeight) {
+    return undefined;
+  }
+  // @ts-expect-error token category is derived from the public string contract.
+  return vars.$fontWeight[fontWeight] ?? fontWeight;
+}
+
+export function handleFontSize(size: string | undefined) {
+  if (!size) {
+    return undefined;
+  }
+  // @ts-expect-error token category is derived from the public string contract.
+  return vars.$fontSize[size] ?? size;
+}
+
+export function handleLineHeight(lineHeight: string | undefined) {
+  if (!lineHeight) {
+    return undefined;
+  }
+  // @ts-expect-error token category is derived from the public string contract.
+  return vars.$lineHeight[lineHeight] ?? lineHeight;
+}
+
+export interface StyleProps {
+  bg?: ScopedColorBg | ScopedColorPalette | ScopedColorBanner | (string & {});
+  background?: ScopedColorBg | ScopedColorPalette | ScopedColorBanner | (string & {});
+  color?: ScopedColorFg | ScopedColorPalette | (string & {});
+  borderColor?: ScopedColorStroke | ScopedColorPalette | (string & {});
+  borderWidth?: 0 | 1 | (string & {});
+  borderTopWidth?: 0 | 1 | (string & {});
+  borderRightWidth?: 0 | 1 | (string & {});
+  borderBottomWidth?: 0 | 1 | (string & {});
+  borderLeftWidth?: 0 | 1 | (string & {});
+  borderRadius?: Radius | 0 | (string & {});
+  borderTopLeftRadius?: Radius | 0 | (string & {});
+  borderTopRightRadius?: Radius | 0 | (string & {});
+  borderBottomRightRadius?: Radius | 0 | (string & {});
+  borderBottomLeftRadius?: Radius | 0 | (string & {});
+  width?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {});
+  minWidth?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {});
+  maxWidth?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {});
+  height?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {});
+  minHeight?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {});
+  maxHeight?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | "full" | (string & {});
+  top?: 0 | (string & {});
+  left?: 0 | (string & {});
+  right?: 0 | (string & {});
+  bottom?: 0 | (string & {});
+  padding?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+  p?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+  paddingX?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+  px?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+  paddingY?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+  py?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+  paddingTop?:
+    | Dimension
+    | `spacingX.${SpacingX}`
+    | `spacingY.${SpacingY}`
+    | 0
+    | "safeArea"
+    | (string & {});
+  pt?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "safeArea" | (string & {});
+  paddingRight?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+  pr?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+  paddingBottom?:
+    | Dimension
+    | `spacingX.${SpacingX}`
+    | `spacingY.${SpacingY}`
+    | 0
+    | "safeArea"
+    | (string & {});
+  pb?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "safeArea" | (string & {});
+  paddingLeft?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+  pl?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+  display?: "flex" | "none" | (string & {});
+  position?: "relative" | "absolute" | "fixed" | (string & {});
+  overflowX?: "visible" | "hidden" | (string & {});
+  overflowY?: "visible" | "hidden" | (string & {});
+  zIndex?: CSSProperties["zIndex"];
+  flexGrow?: CSSProperties["flexGrow"] | boolean;
+  flexShrink?: CSSProperties["flexShrink"] | boolean;
+  flexDirection?: "row" | "column" | "rowReverse" | "columnReverse" | (string & {});
+  flexWrap?: "nowrap" | "wrap" | boolean;
+  justifyContent?:
+    | "flexStart"
+    | "flexEnd"
+    | "center"
+    | "spaceBetween"
+    | "spaceAround"
+    | (string & {});
+  justifySelf?: CSSProperties["justifySelf"];
+  alignItems?: "flexStart" | "flexEnd" | "center" | "stretch" | (string & {});
+  alignContent?: "flexStart" | "flexEnd" | "center" | "stretch" | (string & {});
+  alignSelf?: "flexStart" | "flexEnd" | "center" | "stretch" | (string & {});
+  gap?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+}
+
+interface UseStyleProps extends StyleProps {
+  style?: CSSProperties;
+}
+
+export function useStyleProps<T extends UseStyleProps>(
+  props: T,
+): {
+  style: CSSProperties;
+  restProps: Omit<T, keyof UseStyleProps>;
+} {
+  const {
+    background,
+    bg,
+    color,
+    borderColor,
+    borderWidth,
+    borderTopWidth,
+    borderRightWidth,
+    borderBottomWidth,
+    borderLeftWidth,
+    borderRadius,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomRightRadius,
+    borderBottomLeftRadius,
+    width,
+    minWidth,
+    maxWidth,
+    height,
+    minHeight,
+    maxHeight,
+    padding,
+    paddingX,
+    paddingY,
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft,
+    p,
+    px,
+    py,
+    pt,
+    pr,
+    pb,
+    pl,
+    bottom,
+    left,
+    right,
+    top,
+    display,
+    position,
+    overflowX,
+    overflowY,
+    zIndex,
+    flexGrow,
+    flexShrink,
+    flexDirection,
+    flexWrap,
+    justifyContent,
+    justifySelf,
+    alignItems,
+    alignContent,
+    alignSelf,
+    gap,
+    style,
+    ...restProps
+  } = props;
+  const { safeAreaInsetTop, safeAreaInsetBottom } = useSafeArea();
+
+  const backgroundValue = handleColor(background ?? bg);
+  const paddingValue = handleDimension(padding ?? p);
+  const paddingXValue = handleDimension(paddingX ?? px) ?? paddingValue;
+  const paddingYValue = handleDimension(paddingY ?? py) ?? paddingValue;
+  const paddingTopValue =
+    handlePaddingWithSafeArea(paddingTop ?? pt, safeAreaInsetTop) ?? paddingYValue;
+  const paddingRightValue = handleDimension(paddingRight ?? pr) ?? paddingXValue;
+  const paddingBottomValue =
+    handlePaddingWithSafeArea(paddingBottom ?? pb, safeAreaInsetBottom) ?? paddingYValue;
+  const paddingLeftValue = handleDimension(paddingLeft ?? pl) ?? paddingXValue;
+  const hasBorderStyle =
+    borderColor != null ||
+    borderWidth != null ||
+    borderTopWidth != null ||
+    borderRightWidth != null ||
+    borderBottomWidth != null ||
+    borderLeftWidth != null;
+
+  return {
+    style: {
+      background: backgroundValue,
+      color: handleColor(color),
+      borderStyle: hasBorderStyle ? "solid" : undefined,
+      borderColor: handleColor(borderColor),
+      borderWidth: handleBorderWidth(borderWidth),
+      borderTopWidth: handleBorderWidth(borderTopWidth),
+      borderRightWidth: handleBorderWidth(borderRightWidth),
+      borderBottomWidth: handleBorderWidth(borderBottomWidth),
+      borderLeftWidth: handleBorderWidth(borderLeftWidth),
+      borderRadius: handleRadius(borderRadius),
+      borderTopLeftRadius: handleRadius(borderTopLeftRadius),
+      borderTopRightRadius: handleRadius(borderTopRightRadius),
+      borderBottomRightRadius: handleRadius(borderBottomRightRadius),
+      borderBottomLeftRadius: handleRadius(borderBottomLeftRadius),
+      width: handleDimension(width),
+      minWidth: handleDimension(minWidth),
+      maxWidth: handleDimension(maxWidth),
+      height: handleDimension(height),
+      minHeight: handleDimension(minHeight),
+      maxHeight: handleDimension(maxHeight),
+      paddingTop: paddingTopValue,
+      paddingRight: paddingRightValue,
+      paddingBottom: paddingBottomValue,
+      paddingLeft: paddingLeftValue,
+      top: handleDimension(top),
+      left: handleDimension(left),
+      right: handleDimension(right),
+      bottom: handleDimension(bottom),
+      gap: handleDimension(gap),
+      display: handleDisplay(display),
+      position,
+      overflowX,
+      overflowY,
+      zIndex,
+      flexGrow: resolveFlexValue(flexGrow),
+      flexShrink: resolveFlexValue(flexShrink),
+      flexDirection: handleFlexDirection(flexDirection),
+      flexWrap: flexWrap === true ? "wrap" : flexWrap === false ? "nowrap" : flexWrap,
+      justifyContent: handleJustifyContent(justifyContent),
+      justifySelf,
+      alignItems: handleAlignItems(alignItems),
+      alignContent: handleAlignItems(alignContent),
+      alignSelf: handleAlignItems(alignSelf),
+      ...style,
+    } as CSSProperties,
+    restProps,
+  };
+}
+
+export type TextStyle =
+  | "screenTitle"
+  | "articleBody"
+  | "articleNote"
+  | "t1Regular"
+  | "t1Medium"
+  | "t1Bold"
+  | "t2Regular"
+  | "t2Medium"
+  | "t2Bold"
+  | "t3Regular"
+  | "t3Medium"
+  | "t3Bold"
+  | "t4Regular"
+  | "t4Medium"
+  | "t4Bold"
+  | "t5Regular"
+  | "t5Medium"
+  | "t5Bold"
+  | "t6Regular"
+  | "t6Medium"
+  | "t6Bold"
+  | "t7Regular"
+  | "t7Medium"
+  | "t7Bold"
+  | "t8Bold"
+  | "t9Bold"
+  | "t10Bold"
+  | "t1StaticRegular"
+  | "t1StaticMedium"
+  | "t1StaticBold"
+  | "t2StaticRegular"
+  | "t2StaticMedium"
+  | "t2StaticBold"
+  | "t3StaticRegular"
+  | "t3StaticMedium"
+  | "t3StaticBold"
+  | "t4StaticRegular"
+  | "t4StaticMedium"
+  | "t4StaticBold"
+  | "t5StaticRegular"
+  | "t5StaticMedium"
+  | "t5StaticBold"
+  | "t6StaticRegular"
+  | "t6StaticMedium"
+  | "t6StaticBold"
+  | "t7StaticRegular"
+  | "t7StaticMedium"
+  | "t7StaticBold"
+  | "t8StaticBold"
+  | "t9StaticBold"
+  | "t10StaticBold";
+
+export interface TextStyleProps {
+  color?: ScopedColorFg | ScopedColorPalette | (string & {});
+  fontSize?: FontSize | (string & {});
+  lineHeight?: LineHeight | (string & {});
+  fontWeight?: FontWeight;
+  textStyle?: TextStyle;
+  align?: "left" | "center" | "right";
+}

package/lib/components/ActionButton/index.js

@@ -1 +0,0 @@
-export { ActionButton } from "./ActionButton";

package/lib/components/BottomSheet/index.js

@@ -1,2 +0,0 @@
-export { BottomSheetBackdrop, BottomSheetBody, BottomSheetContent, BottomSheetDescription, BottomSheetFooter, BottomSheetHandle, BottomSheetHeader, BottomSheetPositioner, BottomSheetRoot, BottomSheetTitle, BottomSheetTrigger, } from "./BottomSheet";
-export * as BottomSheet from "./BottomSheet.namespace";

package/lib/components/Checkbox/index.js

@@ -1,2 +0,0 @@
-export { CheckboxRoot, CheckboxControl, CheckboxIndicator, CheckboxLabel, CheckboxGroup, } from "./Checkbox";
-export * as Checkbox from "./Checkbox.namespace";

package/lib/components/ProgressCircle/index.js

@@ -1,2 +0,0 @@
-export { ProgressCircleRange, ProgressCircleRoot, } from "./ProgressCircle";
-export * as ProgressCircle from "./ProgressCircle.namespace";

package/lib/components/RadioGroup/index.js

@@ -1,2 +0,0 @@
-export { RadioGroupRoot, RadioGroupItem, RadioGroupItemControl, RadioGroupItemIndicator, RadioGroupItemLabel, } from "./RadioGroup";
-export * as RadioGroup from "./RadioGroup.namespace";

package/lib/components/Switch/index.js

@@ -1,2 +0,0 @@
-export { SwitchRoot, SwitchControl, SwitchThumb, SwitchLabel, } from "./Switch";
-export * as Switch from "./Switch.namespace";

package/lib/components/TagGroup/index.js

@@ -1,2 +0,0 @@
-export { TagGroupRoot, TagGroupItem, TagGroupItemLabel, } from "./TagGroup";
-export * as TagGroup from "./TagGroup.namespace";

package/lib/components/index.js

@@ -1,7 +0,0 @@
-export * from "./ActionButton";
-export * from "./BottomSheet";
-export * from "./Checkbox";
-export * from "./ProgressCircle";
-export * from "./RadioGroup";
-export * from "./Switch";
-export * from "./TagGroup";

package/lib/hooks/index.js

@@ -1,3 +0,0 @@
-export * from "./useControllableState";
-export * from "./useIconColor";
-export * from "./usePressTap";

package/lib/utils/index.js

@@ -1,4 +0,0 @@
-export * from "./create-slot-recipe-context";
-export * from "./get-seed-class-name";
-export * from "./resolve-recipe-token";
-export * from "./split-multiple-variants-props";

package/src/components/ActionButton/__tests__/ActionButton.test.tsx

@@ -1,35 +0,0 @@
-import "@testing-library/jest-dom";
-import { getQueriesForElement, render } from "@lynx-js/react/testing-library";
-import { describe, expect, it } from "vitest";
-
-import { ActionButton } from "../ActionButton";
-
-function getRenderedQueries() {
-  return getQueriesForElement(getRenderedRoot());
-}
-
-function getRenderedRoot() {
-  const root = elementTree.root;
-
-  if (!root) {
-    throw new Error("Expected Lynx render root to exist.");
-  }
-
-  return root;
-}
-
-describe("ActionButton", () => {
-  it("keeps the original label in the text slot while loading", () => {
-    render(<ActionButton loading>Submit</ActionButton>);
-
-    const { getByText } = getRenderedQueries();
-    const label = getByText("Submit");
-    const root = getRenderedRoot();
-
-    expect(label).toHaveClass("seed-action-button__text");
-    expect(label).toHaveClass("seed-action-button__text--size_medium-layout_withText");
-    expect(root.querySelector(".seed-action-button__content")).toBeInTheDocument();
-    expect(root.querySelector(".seed-action-button__loadingIndicator")).toBeInTheDocument();
-    expect(root.querySelector(".seed-progress-circle__root")).toBeInTheDocument();
-  });
-});

package/src/components/BottomSheet/__tests__/BottomSheet.test.tsx

@@ -1,119 +0,0 @@
-import { fireEvent, render } from "@lynx-js/react/testing-library";
-import { beforeEach, describe, expect, it, vi } from "vitest";
-
-const sheetMocks = vi.hoisted(() => ({
-  contentProps: [] as Array<Record<string, unknown>>,
-  rootRef: {
-    open: vi.fn(),
-  },
-}));
-
-vi.mock("@lynx-js/lynx-ui-sheet", async () => {
-  const React = await vi.importActual<typeof import("@lynx-js/react")>("@lynx-js/react");
-
-  const SheetRoot = React.forwardRef<unknown, { children?: React.ReactNode }>((props, ref) => {
-    React.useImperativeHandle(ref, () => sheetMocks.rootRef);
-    return <>{props.children}</>;
-  });
-  SheetRoot.displayName = "MockSheetRoot";
-
-  const SheetView = React.forwardRef<unknown, { children?: React.ReactNode }>((props) => {
-    return <>{props.children}</>;
-  });
-  SheetView.displayName = "MockSheetView";
-
-  const SheetContent = React.forwardRef<unknown, Record<string, unknown>>((props) => {
-    sheetMocks.contentProps.push(props);
-    return <>{props.children as React.ReactNode}</>;
-  });
-  SheetContent.displayName = "MockSheetContent";
-
-  const passthrough = (displayName: string) => {
-    const Component = React.forwardRef<unknown, { children?: React.ReactNode }>((props) => {
-      return <>{props.children}</>;
-    });
-    Component.displayName = displayName;
-    return Component;
-  };
-
-  return {
-    SheetBackdrop: passthrough("MockSheetBackdrop"),
-    SheetContent,
-    SheetHandle: passthrough("MockSheetHandle"),
-    SheetRoot,
-    SheetView,
-  };
-});
-
-import * as BottomSheet from "../BottomSheet.namespace";
-
-describe("BottomSheet", () => {
-  beforeEach(() => {
-    sheetMocks.contentProps = [];
-    sheetMocks.rootRef.open.mockClear();
-  });
-
-  it("skips motion-engine animations when Root has skipAnimation", () => {
-    render(
-      <BottomSheet.Root skipAnimation>
-        <BottomSheet.Content />
-      </BottomSheet.Root>,
-    );
-
-    expect(sheetMocks.contentProps.at(-1)).toMatchObject({
-      snapAnimation: { type: "tween", duration: 0 },
-      enterAnimation: { type: "tween", duration: 0 },
-      exitAnimation: { type: "tween", duration: 0 },
-    });
-  });
-
-  it("preserves user-provided animations when Root has skipAnimation", () => {
-    const snapAnimation = { type: "tween", duration: 120 };
-    const enterAnimation = { type: "tween", duration: 140 };
-    const exitAnimation = { type: "tween", duration: 90 };
-
-    render(
-      <BottomSheet.Root skipAnimation>
-        <BottomSheet.Content
-          snapAnimation={snapAnimation}
-          enterAnimation={enterAnimation}
-          exitAnimation={exitAnimation}
-        />
-      </BottomSheet.Root>,
-    );
-
-    expect(sheetMocks.contentProps.at(-1)).toMatchObject({
-      snapAnimation,
-      enterAnimation,
-      exitAnimation,
-    });
-  });
-
-  it("opens with default animation when Root does not skip animation", () => {
-    const { getByText } = render(
-      <BottomSheet.Root>
-        <BottomSheet.Trigger>
-          <text>Open sheet</text>
-        </BottomSheet.Trigger>
-      </BottomSheet.Root>,
-    );
-
-    fireEvent.tap(getByText("Open sheet").parentElement!);
-
-    expect(sheetMocks.rootRef.open).toHaveBeenCalledWith();
-  });
-
-  it("opens without animation when Trigger is tapped inside a skipping Root", () => {
-    const { getByText } = render(
-      <BottomSheet.Root skipAnimation>
-        <BottomSheet.Trigger>
-          <text>Open sheet</text>
-        </BottomSheet.Trigger>
-      </BottomSheet.Root>,
-    );
-
-    fireEvent.tap(getByText("Open sheet").parentElement!);
-
-    expect(sheetMocks.rootRef.open).toHaveBeenCalledWith({ animate: false });
-  });
-});

package/src/components/__tests__/ProgressCircle.test.ts

@@ -1,33 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { readFileSync } from "node:fs";
-import { dirname, join } from "node:path";
-import { fileURLToPath } from "node:url";
-
-const currentDir = dirname(fileURLToPath(import.meta.url));
-const progressCircleSource = readFileSync(
-  join(currentDir, "..", "ProgressCircle", "ProgressCircle.tsx"),
-  "utf8",
-);
-
-function readEffectDependencies(marker: string): string {
-  const markerIndex = progressCircleSource.indexOf(marker);
-  expect(markerIndex).toBeGreaterThanOrEqual(0);
-
-  const dependencyStart = progressCircleSource.indexOf("}, [", markerIndex);
-  expect(dependencyStart).toBeGreaterThanOrEqual(0);
-
-  const dependencyEnd = progressCircleSource.indexOf("]);", dependencyStart);
-  expect(dependencyEnd).toBeGreaterThanOrEqual(0);
-
-  return progressCircleSource.slice(dependencyStart, dependencyEnd);
-}
-
-describe("ProgressCircle", () => {
-  it("restarts indeterminate animation when size changes", () => {
-    expect(readEffectDependencies("runOnMainThread(startLoop)")).toContain("numSize");
-  });
-
-  it("restarts determinate transition when size changes", () => {
-    expect(readEffectDependencies("runOnMainThread(startAnimation)")).toContain("numSize");
-  });
-});