react-native-tinyui 0.1.1

package/package.json

@@ -0,0 +1,175 @@
+{
+  "name": "react-native-tinyui",
+  "version": "0.1.1",
+  "description": "Dependency-free native iOS Menu and Popover components for React Native",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "react-native-tinyui-source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./menu": {
+      "react-native-tinyui-source": "./src/Menu.tsx",
+      "types": "./lib/typescript/src/Menu.d.ts",
+      "default": "./lib/module/Menu.js"
+    },
+    "./popover": {
+      "react-native-tinyui-source": "./src/Popover.tsx",
+      "types": "./lib/typescript/src/Popover.d.ts",
+      "default": "./lib/module/Popover.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "ios",
+    "*.podspec",
+    "!ios/build",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace react-native-tinyui-example",
+    "clean": "del-cli example/ios/build lib",
+    "prepare": "bob build",
+    "typecheck": "tsc",
+    "release": "release-it --only-version",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "test": "jest"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "menu",
+    "popover",
+    "fabric"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/luoxuhai/react-native-tinyui.git"
+  },
+  "author": "Darkce <15186743693@163.com> (https://github.com/luoxuhai)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/luoxuhai/react-native-tinyui/issues"
+  },
+  "homepage": "https://github.com/luoxuhai/react-native-tinyui#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@eslint/compat": "^2.1.0",
+    "@eslint/eslintrc": "^3.3.5",
+    "@eslint/js": "^10.0.1",
+    "@jest/globals": "^29.7.0",
+    "@react-native/babel-preset": "0.85.0",
+    "@react-native/eslint-config": "0.85.0",
+    "@react-native/jest-preset": "0.85.0",
+    "@release-it/conventional-changelog": "^11.0.1",
+    "@types/react": "^19.2.0",
+    "del-cli": "^7.0.0",
+    "eslint": "^9.39.4",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-ft-flow": "^3.0.11",
+    "eslint-plugin-prettier": "^5.5.6",
+    "jest": "^29.7.0",
+    "prettier": "^3.8.3",
+    "react": "19.2.3",
+    "react-native": "0.85.0",
+    "react-native-builder-bob": "^0.43.0",
+    "release-it": "^20.2.0",
+    "turbo": "^2.9.16",
+    "typescript": "^6.0.3"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@4.11.0",
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "codegenConfig": {
+    "name": "TinyuiSpec",
+    "type": "all",
+    "jsSrcsDir": "src",
+    "ios": {
+      "modules": {
+        "Tinyui": {
+          "className": "Tinyui"
+        }
+      },
+      "components": {
+        "TinyuiMenuView": {
+          "className": "TinyuiMenuView"
+        },
+        "TinyuiPopoverView": {
+          "className": "TinyuiPopoverView"
+        }
+      }
+    }
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
+        }
+      }
+    }
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "jest": {
+    "preset": "@react-native/jest-preset",
+    "testEnvironmentOptions": {
+      "customExportConditions": [
+        "require",
+        "react-native",
+        "<%- project.sourceCondition -%>"
+      ]
+    },
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  }
+}

package/src/Menu.tsx

@@ -0,0 +1,52 @@
+import { forwardRef, type ComponentRef } from 'react';
+import { View } from 'react-native';
+
+import { assertComponentEnabled } from './getNativeTinyui';
+import type { MenuComponent, MenuProps } from './Menu.types';
+import NativeMenuView from './MenuNativeComponent';
+import { serializeMenuOptions } from './MenuOptions';
+
+const MenuRoot = forwardRef<ComponentRef<typeof View>, MenuProps>(function Menu(
+  {
+    accessibilityLabel,
+    children,
+    disabled,
+    onPrimaryAction,
+    options,
+    testID,
+    ...viewProps
+  },
+  ref
+) {
+  assertComponentEnabled('Menu');
+
+  const { config, callbacks } = serializeMenuOptions(options);
+
+  return (
+    <View {...viewProps} ref={ref} collapsable={false}>
+      <NativeMenuView
+        accessibilityLabel={accessibilityLabel}
+        disabled={disabled}
+        hasPrimaryAction={onPrimaryAction != null}
+        menuConfig={config}
+        onItemPress={(event) => callbacks.get(event.nativeEvent.id)?.()}
+        onPrimaryAction={onPrimaryAction}
+        testID={testID}
+      >
+        <View collapsable={false}>{children}</View>
+      </NativeMenuView>
+    </View>
+  );
+});
+
+export const Menu = MenuRoot as MenuComponent;
+
+export type {
+  MenuActionOption,
+  MenuDividerOption,
+  MenuItemState,
+  MenuOption,
+  MenuProps,
+  MenuSectionOption,
+  MenuSubmenuOption,
+} from './Menu.types';

package/src/Menu.types.ts

@@ -0,0 +1,77 @@
+import type {
+  ComponentRef,
+  ForwardRefExoticComponent,
+  ReactNode,
+  RefAttributes,
+} from 'react';
+import type { ColorValue, View, ViewProps } from 'react-native';
+
+export type MenuItemState = 'off' | 'on' | 'mixed';
+
+interface MenuOptionLabel {
+  title: string;
+  subtitle?: string;
+  /** SF Symbol name. */
+  systemImage?: string;
+  /** Image name from the containing app's asset catalog. Takes precedence over `systemImage`. */
+  icon?: string;
+  /** Tint applied to `icon` or `systemImage`. */
+  iconColor?: ColorValue;
+  /** Foreground color applied to the option title. */
+  titleColor?: ColorValue;
+}
+
+export interface MenuActionOption extends MenuOptionLabel {
+  /** Actions are the default option type, so this can be omitted. */
+  type?: 'action';
+  /** Stable identifier returned by the native selection event. */
+  id?: string;
+  state?: MenuItemState;
+  destructive?: boolean;
+  disabled?: boolean;
+  hidden?: boolean;
+  /** Keep the menu visible after selection on iOS 16 and newer. */
+  keepOpen?: boolean;
+  onSelect?: () => void;
+}
+
+export interface MenuSubmenuOption extends MenuOptionLabel {
+  type: 'submenu';
+  /** Marks the submenu and its children as destructive. */
+  destructive?: boolean;
+  /** Prevents the submenu from being opened. */
+  disabled?: boolean;
+  /** Removes the submenu from the rendered menu. */
+  hidden?: boolean;
+  /** Displays the children inline instead of opening a nested menu. */
+  displayInline?: boolean;
+  options: readonly MenuOption[];
+}
+
+export interface MenuSectionOption {
+  type: 'section';
+  title?: string;
+  options: readonly MenuOption[];
+}
+
+export interface MenuDividerOption {
+  type: 'divider';
+}
+
+export type MenuOption =
+  MenuActionOption | MenuSubmenuOption | MenuSectionOption | MenuDividerOption;
+
+export interface MenuProps extends Omit<ViewProps, 'children'> {
+  /** The trigger element. */
+  children: ReactNode;
+  /** Native menu actions, submenus, sections, and dividers. */
+  options: readonly MenuOption[];
+  /** Prevents the trigger from opening the menu. */
+  disabled?: boolean;
+  /** Called on a normal tap. When set, a long press opens the menu. */
+  onPrimaryAction?: () => void;
+}
+
+export interface MenuComponent extends ForwardRefExoticComponent<
+  MenuProps & RefAttributes<ComponentRef<typeof View>>
+> {}

package/src/MenuNativeComponent.ts

@@ -0,0 +1,14 @@
+import { codegenNativeComponent, type ViewProps } from 'react-native';
+import type { DirectEventHandler } from 'react-native/Libraries/Types/CodegenTypes';
+
+export interface NativeMenuProps extends ViewProps {
+  menuConfig: string;
+  disabled?: boolean;
+  hasPrimaryAction?: boolean;
+  onItemPress?: DirectEventHandler<Readonly<{ id: string }>>;
+  onPrimaryAction?: DirectEventHandler<null>;
+}
+
+export default codegenNativeComponent<NativeMenuProps>('TinyuiMenuView', {
+  excludedPlatforms: ['android'],
+});

package/src/MenuOptions.ts

@@ -0,0 +1,146 @@
+import { processColor, type ColorValue } from 'react-native';
+
+import type { MenuOption } from './Menu.types';
+
+type NativeMenuColor = ReturnType<typeof processColor>;
+
+interface NativeMenuLabel {
+  title: string;
+  subtitle?: string;
+  systemImage?: string;
+  icon?: string;
+  iconColor?: NativeMenuColor;
+  titleColor?: NativeMenuColor;
+}
+
+interface NativeMenuAction extends NativeMenuLabel {
+  type: 'action';
+  id: string;
+  state: 'off' | 'on' | 'mixed';
+  destructive: boolean;
+  disabled: boolean;
+  hidden: boolean;
+  keepOpen: boolean;
+}
+
+interface NativeMenuSubmenu extends NativeMenuLabel {
+  type: 'submenu';
+  destructive: boolean;
+  disabled: boolean;
+  hidden: boolean;
+  displayInline: boolean;
+  children: NativeMenuElement[];
+}
+
+interface NativeMenuSection {
+  type: 'section';
+  title?: string;
+  children: NativeMenuElement[];
+}
+
+interface NativeMenuSeparator {
+  type: 'separator';
+}
+
+type NativeMenuElement =
+  | NativeMenuAction
+  | NativeMenuSubmenu
+  | NativeMenuSection
+  | NativeMenuSeparator;
+
+export interface SerializedMenuOptions {
+  config: string;
+  callbacks: Map<string, () => void>;
+}
+
+function serializeColor(color: ColorValue | undefined): NativeMenuColor {
+  return color === undefined ? undefined : processColor(color);
+}
+
+export function serializeMenuOptions(
+  options: readonly MenuOption[]
+): SerializedMenuOptions {
+  const callbacks = new Map<string, () => void>();
+  const items = serializeOptions(options, callbacks, new Set(), 'root');
+
+  return {
+    callbacks,
+    config: JSON.stringify({ items }),
+  };
+}
+
+function serializeOptions(
+  options: readonly MenuOption[],
+  callbacks: Map<string, () => void>,
+  usedIds: Set<string>,
+  path: string
+): NativeMenuElement[] {
+  return options.map((option, index) => {
+    const optionPath = `${path}.${index}`;
+
+    if (option.type === 'divider') {
+      return { type: 'separator' };
+    }
+
+    if (option.type === 'submenu') {
+      return {
+        type: 'submenu',
+        title: option.title,
+        subtitle: option.subtitle,
+        systemImage: option.systemImage,
+        icon: option.icon,
+        iconColor: serializeColor(option.iconColor),
+        titleColor: serializeColor(option.titleColor),
+        destructive: option.destructive ?? false,
+        disabled: option.disabled ?? false,
+        hidden: option.hidden ?? false,
+        displayInline: option.displayInline ?? false,
+        children: serializeOptions(
+          option.options,
+          callbacks,
+          usedIds,
+          `${optionPath}.submenu`
+        ),
+      };
+    }
+
+    if (option.type === 'section') {
+      return {
+        type: 'section',
+        title: option.title,
+        children: serializeOptions(
+          option.options,
+          callbacks,
+          usedIds,
+          `${optionPath}.section`
+        ),
+      };
+    }
+
+    const id = option.id ?? `item.${optionPath}`;
+    if (usedIds.has(id)) {
+      throw new Error(`Menu option id "${id}" must be unique within a menu.`);
+    }
+    usedIds.add(id);
+
+    if (option.onSelect) {
+      callbacks.set(id, option.onSelect);
+    }
+
+    return {
+      type: 'action',
+      id,
+      title: option.title,
+      subtitle: option.subtitle,
+      systemImage: option.systemImage,
+      icon: option.icon,
+      iconColor: serializeColor(option.iconColor),
+      titleColor: serializeColor(option.titleColor),
+      state: option.state ?? 'off',
+      destructive: option.destructive ?? false,
+      disabled: option.disabled ?? false,
+      hidden: option.hidden ?? false,
+      keepOpen: option.keepOpen ?? false,
+    };
+  });
+}

package/src/NativeTinyui.ts

@@ -0,0 +1,12 @@
+import type { TurboModule } from 'react-native';
+import { TurboModuleRegistry } from 'react-native';
+
+export interface Spec extends TurboModule {
+  /**
+   * Returns the names of the native components compiled into the app,
+   * based on the `react-native-tinyui.components` array in package.json.
+   */
+  getEnabledComponents(): ReadonlyArray<string>;
+}
+
+export default TurboModuleRegistry.get<Spec>('Tinyui');

package/src/Popover.tsx

@@ -0,0 +1,92 @@
+import { forwardRef, useCallback, useState, type ComponentRef } from 'react';
+import type { ReactNode } from 'react';
+import { PlatformColor, Pressable, StyleSheet, View } from 'react-native';
+
+import { assertComponentEnabled } from './getNativeTinyui';
+import { PopoverClose } from './PopoverPrimitives';
+import type {
+  PopoverComponent,
+  PopoverContentRenderArgs,
+  PopoverContent as PopoverContentType,
+  PopoverProps,
+} from './Popover.types';
+import NativePopoverView from './PopoverNativeComponent';
+
+const PopoverRoot = forwardRef<ComponentRef<typeof View>, PopoverProps>(
+  function Popover(
+    {
+      children,
+      content,
+      open,
+      defaultOpen = false,
+      onOpenChange,
+      attachmentAnchor = 'center',
+      arrowEdge = 'none',
+      ...viewProps
+    },
+    ref
+  ) {
+    assertComponentEnabled('Popover');
+
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const isControlled = open !== undefined;
+    const isOpen = isControlled ? open : uncontrolledOpen;
+
+    const setOpen = useCallback(
+      (nextOpen: boolean) => {
+        if (!isControlled) {
+          setUncontrolledOpen(nextOpen);
+        }
+        onOpenChange?.(nextOpen);
+      },
+      [isControlled, onOpenChange]
+    );
+
+    const close = useCallback(() => setOpen(false), [setOpen]);
+
+    const renderedContent = renderContent(content, { close });
+
+    return (
+      <View {...viewProps} ref={ref} collapsable={false}>
+        <NativePopoverView
+          attachmentAnchor={attachmentAnchor}
+          arrowEdge={arrowEdge}
+          isPresented={isOpen}
+          onIsPresentedChange={(event) => {
+            if (!event.nativeEvent.isPresented && isOpen) {
+              setOpen(false);
+            }
+          }}
+        >
+          <Pressable onPress={() => setOpen(true)}>{children}</Pressable>
+          <View style={styles.content} pointerEvents="box-none">
+            {renderedContent}
+          </View>
+        </NativePopoverView>
+      </View>
+    );
+  }
+);
+
+function renderContent(
+  content: PopoverContentType,
+  args: PopoverContentRenderArgs
+): ReactNode {
+  return typeof content === 'function' ? content(args) : content;
+}
+
+const styles = StyleSheet.create({
+  content: {
+    position: 'absolute',
+    backgroundColor: PlatformColor('systemBackground'),
+    overflow: 'hidden',
+  },
+});
+
+export const Popover = Object.assign(PopoverRoot, {
+  Close: PopoverClose,
+}) as PopoverComponent & {
+  Close: typeof PopoverClose;
+};
+
+export { PopoverClose };

package/src/Popover.types.ts

@@ -0,0 +1,49 @@
+import type {
+  ComponentRef,
+  ForwardRefExoticComponent,
+  RefAttributes,
+} from 'react';
+import type { ReactNode } from 'react';
+import type { PressableProps, View, ViewProps } from 'react-native';
+
+export type PopoverAttachmentAnchor =
+  'leading' | 'trailing' | 'center' | 'top' | 'bottom';
+
+export type PopoverArrowEdge =
+  'leading' | 'trailing' | 'top' | 'bottom' | 'none';
+
+/** Arguments passed to a render-function `content`. */
+export interface PopoverContentRenderArgs {
+  /** Dismisses the popover. */
+  close: () => void;
+}
+
+export type PopoverContent =
+  ReactNode | ((args: PopoverContentRenderArgs) => ReactNode);
+
+export interface PopoverProps extends Omit<ViewProps, 'children'> {
+  /** The trigger element. Tapping it opens the popover. */
+  children: ReactNode;
+  /**
+   * Content shown inside the popover. Pass a node, or a render function that
+   * receives `{ close }` to dismiss the popover from within the content.
+   */
+  content: PopoverContent;
+  /** Controlled presentation state. */
+  open?: boolean;
+  /** Initial state when `open` is not controlled. */
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  attachmentAnchor?: PopoverAttachmentAnchor;
+  arrowEdge?: PopoverArrowEdge;
+}
+
+export interface PopoverComponent extends ForwardRefExoticComponent<
+  PopoverProps & RefAttributes<ComponentRef<typeof View>>
+> {}
+
+/** Props for the `Popover.Close` helper button. */
+export interface PopoverCloseProps extends PressableProps {
+  /** Dismisses the popover. Pass the `close` callback from the content render args. */
+  close: () => void;
+}

package/src/PopoverNativeComponent.ts

@@ -0,0 +1,13 @@
+import { codegenNativeComponent, type ViewProps } from 'react-native';
+import type { DirectEventHandler } from 'react-native/Libraries/Types/CodegenTypes';
+
+export interface NativePopoverProps extends ViewProps {
+  isPresented?: boolean;
+  attachmentAnchor?: string;
+  arrowEdge?: string;
+  onIsPresentedChange?: DirectEventHandler<Readonly<{ isPresented: boolean }>>;
+}
+
+export default codegenNativeComponent<NativePopoverProps>('TinyuiPopoverView', {
+  excludedPlatforms: ['android'],
+});

package/src/PopoverPrimitives.tsx

@@ -0,0 +1,36 @@
+import type { ReactNode } from 'react';
+import { Pressable } from 'react-native';
+
+import type { PopoverCloseProps } from './Popover.types';
+
+/**
+ * A button that dismisses the popover. Render it inside the `content` prop
+ * and pass the `close` callback from the render-function arguments:
+ *
+ * ```tsx
+ * <Popover
+ *   content={({ close }) => (
+ *     <Popover.Close close={close}>Done</Popover.Close>
+ *   )}
+ * >
+ *   <Button title="Open" />
+ * </Popover>
+ * ```
+ */
+export function PopoverClose({
+  close,
+  onPress,
+  ...props
+}: PopoverCloseProps): ReactNode {
+  return (
+    <Pressable
+      {...props}
+      onPress={(event) => {
+        onPress?.(event);
+        close();
+      }}
+    />
+  );
+}
+
+PopoverClose.displayName = 'Popover.Close';