@nebula-rn/components 0.0.1

package/dist/Swiper/pagination.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+export const DefaultPagination = (props) => {
+    const { current, vertical, count, dotStyle, dotActiveStyle } = props;
+    const positionStyle = vertical ? 'paginationY' : 'paginationX';
+    const flexDirection = vertical ? 'column' : 'row';
+    const arr = [];
+    for (let i = 0; i < count; i++) {
+        arr.push(<View key={`dot-${i}`} style={[
+                styles.pointStyle,
+                styles.spaceStyle,
+                dotStyle,
+                i === current && styles.pointActiveStyle,
+                i === current && dotActiveStyle,
+            ]}/>);
+    }
+    return (<View style={[styles.pagination, styles[positionStyle]]}>
+      <View style={{ flexDirection }}>{arr}</View>
+    </View>);
+};
+const styles = StyleSheet.create({
+    pagination: {
+        position: 'absolute',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    paginationX: {
+        bottom: 10,
+        left: 0,
+        right: 0,
+    },
+    paginationY: {
+        right: 10,
+        top: 0,
+        bottom: 0,
+    },
+    pointStyle: {
+        width: 8,
+        height: 8,
+        borderRadius: 8,
+        backgroundColor: '#999',
+    },
+    pointActiveStyle: {
+        backgroundColor: '#333',
+    },
+    spaceStyle: {
+        marginHorizontal: 2.5,
+        marginVertical: 3,
+    },
+});

package/dist/Video/index.d.ts

@@ -0,0 +1,42 @@
+import { FC, ReactNode } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+export interface VideoTimeUpdateEvent {
+    currentTime: number;
+    duration: number;
+}
+export interface VideoFullscreenChangeEvent {
+    direction: 'vertical' | 'horizontal';
+    fullScreen: boolean;
+}
+export interface VideoMetaDataEvent {
+    width: number;
+    height: number;
+    duration: number;
+    durationMillis?: number;
+}
+export interface VideoErrorEvent {
+    errMsg: string;
+}
+export interface VideoProps {
+    src: string;
+    duration?: number;
+    controls?: boolean;
+    autoplay?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+    initialTime?: number;
+    objectFit?: 'contain' | 'fill' | 'cover';
+    poster?: string;
+    showCenterPlayBtn?: boolean;
+    style?: StyleProp<ViewStyle>;
+    children?: ReactNode;
+    onLoad?: () => void;
+    onPlay?: () => void;
+    onPause?: () => void;
+    onEnded?: () => void;
+    onError?: (event: VideoErrorEvent) => void;
+    onTimeUpdate?: (event: VideoTimeUpdateEvent) => void;
+    onFullscreenChange?: (event: VideoFullscreenChangeEvent) => void;
+    onLoadedMetaData?: (event: VideoMetaDataEvent) => void;
+}
+export declare const Video: FC<VideoProps>;

package/dist/Video/index.js

@@ -0,0 +1,168 @@
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { Image, Pressable, StyleSheet, Text, View, } from 'react-native';
+import RNCamera, { ResizeMode, } from 'react-native-video';
+import { formatTime } from './utils';
+export const Video = props => {
+    const { src = '', autoplay = false, style, initialTime = 0, loop = false, muted = false, objectFit = 'contain', poster, controls = true, showCenterPlayBtn = true, duration: durationProp, onLoad, onPlay, onPause, onEnded, onError, onLoadedMetaData, onFullscreenChange, onTimeUpdate, children, } = props;
+    const videoRef = useRef(null);
+    const [isFullScreen, setIsFullScreen] = useState(false);
+    const [isPlaying, setIsPlaying] = useState(autoplay);
+    const [isFirst, setIsFirst] = useState(true);
+    const [durationMs, setDurationMs] = useState(null);
+    const onLoadHandler = useCallback((data) => {
+        const loadedDurationMs = data.duration * 1000;
+        setDurationMs(loadedDurationMs);
+        if (initialTime > 0) {
+            videoRef.current?.seek(initialTime / 1000);
+        }
+        if (onLoad) {
+            onLoad();
+        }
+        if (onLoadedMetaData) {
+            onLoadedMetaData({
+                width: data.naturalSize.width,
+                height: data.naturalSize.height,
+                duration: loadedDurationMs,
+                durationMillis: loadedDurationMs,
+            });
+        }
+    }, [initialTime, onLoad, onLoadedMetaData]);
+    const onProgressHandler = useCallback((data) => {
+        if (onTimeUpdate) {
+            onTimeUpdate({
+                currentTime: data.currentTime * 1000,
+                duration: durationMs || data.seekableDuration * 1000,
+            });
+        }
+    }, [durationMs, onTimeUpdate]);
+    const onErrorHandler = useCallback((error) => {
+        if (onError) {
+            onError({
+                errMsg: error.error?.localizedDescription || 'Video Error',
+            });
+        }
+    }, [onError]);
+    const onEndedHandler = useCallback(() => {
+        if (onEnded) {
+            onEnded();
+        }
+    }, [onEnded]);
+    const onPlaybackStateHandler = useCallback(({ isPlaying: playing }) => {
+        setIsPlaying(playing);
+        if (playing) {
+            setIsFirst(false);
+            if (onPlay)
+                onPlay();
+        }
+        else if (!isFirst) {
+            if (onPause)
+                onPause();
+        }
+    }, [isFirst, onPlay, onPause]);
+    const onFullscreenWillPresentHandler = useCallback(() => {
+        setIsFullScreen(true);
+        if (onFullscreenChange) {
+            onFullscreenChange({
+                fullScreen: true,
+                direction: 'vertical',
+            });
+        }
+    }, [onFullscreenChange]);
+    const onFullscreenWillDismissHandler = useCallback(() => {
+        setIsFullScreen(false);
+        if (onFullscreenChange) {
+            onFullscreenChange({
+                fullScreen: false,
+                direction: 'vertical',
+            });
+        }
+    }, [onFullscreenChange]);
+    const onPlayVideoHandler = useCallback(() => {
+        setIsPlaying(true);
+        setIsFirst(false);
+    }, []);
+    const resizeMode = useMemo(() => {
+        const map = {
+            contain: ResizeMode.CONTAIN,
+            cover: ResizeMode.COVER,
+            fill: ResizeMode.STRETCH,
+        };
+        return map[objectFit] || ResizeMode.CONTAIN;
+    }, [objectFit]);
+    const computedDuration = formatTime(durationProp || durationMs || 0);
+    const showPlayBtn = (isFirst || showCenterPlayBtn) && !isPlaying;
+    return (<View style={[styles.video, style]}>
+      <View style={[
+            styles.videoContainer,
+            isFullScreen && styles.videoTypeFullscreen,
+        ]}>
+        <RNCamera ref={videoRef} source={{ uri: src }} style={styles.fullSize} paused={!isPlaying} repeat={loop} muted={muted} controls={controls} resizeMode={resizeMode} onLoad={onLoadHandler} onProgress={onProgressHandler} onEnd={onEndedHandler} onError={onErrorHandler} onPlaybackStateChanged={onPlaybackStateHandler} onFullscreenPlayerWillPresent={onFullscreenWillPresentHandler} onFullscreenPlayerWillDismiss={onFullscreenWillDismissHandler} progressUpdateInterval={250}/>
+
+        {showPlayBtn && (<View style={styles.videoCover}>
+            {poster && isFirst && (<Image source={{ uri: poster }} style={styles.videoPoster}/>)}
+            <Pressable onPress={onPlayVideoHandler}>
+              <Image source={require('../assets/video/play.png')} style={styles.videoCoverPlayButton}/>
+            </Pressable>
+            {computedDuration && (<Text style={styles.videoCoverDuration}>{computedDuration}</Text>)}
+          </View>)}
+        {children}
+      </View>
+    </View>);
+};
+const styles = StyleSheet.create({
+    fullSize: {
+        width: '100%',
+        height: '100%',
+    },
+    video: {
+        width: '100%',
+        height: 225,
+        overflow: 'hidden',
+        position: 'relative',
+    },
+    videoContainer: {
+        width: '100%',
+        height: '100%',
+        backgroundColor: '#000',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        overflow: 'hidden',
+    },
+    videoTypeFullscreen: {
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        zIndex: 999,
+    },
+    videoCover: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        bottom: 0,
+        right: 0,
+        width: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: 'rgba(1, 1, 1, 0.5)',
+        zIndex: 1,
+    },
+    videoPoster: {
+        position: 'absolute',
+        width: '100%',
+        height: '100%',
+    },
+    videoCoverPlayButton: {
+        width: 30,
+        height: 30,
+    },
+    videoCoverDuration: {
+        color: '#fff',
+        fontSize: 16,
+        marginTop: 10,
+    },
+});

package/dist/Video/utils.d.ts

@@ -0,0 +1,3 @@
+export declare const formatTime: (time: number) => string;
+export declare const calcDist: (x: number, y: number) => number;
+export declare const normalizeNumber: (number: number) => number;

package/dist/Video/utils.js

@@ -0,0 +1,13 @@
+export const formatTime = (time) => {
+    if (time === null)
+        return '';
+    const sec = Math.round((time / 1000) % 60);
+    const min = Math.floor((time - sec) / 1000 / 60);
+    return `${min < 10 ? `0${min}` : min}:${sec < 10 ? `0${sec}` : sec}`;
+};
+export const calcDist = (x, y) => {
+    return Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
+};
+export const normalizeNumber = (number) => {
+    return Math.max(-1, Math.min(number, 1));
+};

package/dist/WebView/index.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { WebViewProps as RNWebViewProps } from 'react-native-webview';
+export interface WebViewProps extends Partial<RNWebViewProps> {
+    style?: StyleProp<ViewStyle>;
+    src?: string;
+    html?: string;
+}
+export declare const WebView: FC<WebViewProps>;

package/dist/WebView/index.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { WebView as RNWebView, } from 'react-native-webview';
+export const WebView = ({ style, src, html, ...rest }) => {
+    const source = html ? { html } : { uri: src || '' };
+    return (<RNWebView {...rest} source={source} style={style} originWhitelist={['*']}/>);
+};

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export * from './Camera';
+export * from './Map';
+export * from './Progress';
+export * from './RichText';
+export * from './Slider';
+export * from './Swiper';
+export * from './Video';
+export * from './WebView';

package/dist/index.js

@@ -0,0 +1,10 @@
+// Thanks to the Taro project for the inspiration that helped shape this component library.
+// https://github.com/NervJS/taro.git
+export * from './Camera';
+export * from './Map';
+export * from './Progress';
+export * from './RichText';
+export * from './Slider';
+export * from './Swiper';
+export * from './Video';
+export * from './WebView';

package/dist/utils/index.d.ts

@@ -0,0 +1,4 @@
+export declare const omit: (obj?: any, fields?: string[]) => {
+    [key: string]: any;
+};
+export declare const noop: (..._args: any[]) => void;

package/dist/utils/index.js

@@ -0,0 +1,8 @@
+export const omit = (obj = {}, fields = []) => {
+    const shallowCopy = { ...obj };
+    fields.forEach(key => {
+        delete shallowCopy[key];
+    });
+    return shallowCopy;
+};
+export const noop = (..._args) => { };

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@nebula-rn/components",
+  "version": "0.0.1",
+  "description": "Nebula UI Components for React Native",
+  "author": "Hector Zhuang",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Hector-Zhuang/nebula.git",
+    "directory": "packages/components"
+  },
+  "bugs": {
+    "url": "https://github.com/Hector-Zhuang/nebula/issues"
+  },
+  "homepage": "https://github.com/Hector-Zhuang/nebula/tree/main/packages/components#readme",
+  "keywords": ["nebula", "superapp", "miniapp", "react-native", "components"],
+  "main": "./dist/index.js",
+  "react-native": "./src/index.ts",
+  "source": "./src/index.ts",
+  "types": "./dist/index.d.ts",
+  "files": ["dist", "src", "README.md"],
+  "publishConfig": { "access": "public" },
+  "scripts": {
+    "build": "tsc && npm run assets",
+    "assets": "cpy 'src/**/*.png' '!src/__tests__/*' dist",
+    "clean": "rimraf ./dist",
+    "prebuild": "npm run clean",
+    "prepack": "npm run build",
+    "dev": "npm run assets && tsc --watch",
+    "lint": "eslint src --ext .js,.jsx,.ts,.tsx",
+    "test": "jest --silent",
+    "test:ci": "jest --ci -i --coverage --silent",
+    "test:dev": "jest --watch",
+    "test:coverage": "jest --coverage"
+  },
+  "engines": {
+    "node": ">= 18"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.4",
+    "@babel/preset-env": "^7.24.4",
+    "@react-native/babel-preset": "^0.73.18",
+    "cpy-cli": "^5.0.0",
+    "dpdm": "^3.14.0"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-native": ">=0.83"
+  },
+  "dependencies": {
+    "react-native-gesture-handler": "^2.30.0",
+    "react-native-nitro-modules": "^0.35.2",
+    "react-native-reanimated": "~4.2.3",
+    "react-native-reanimated-carousel": "^4.0.3",
+    "react-native-video": "^6.19.1",
+    "react-native-vision-camera": "^4.7.3"
+  }
+}

package/src/Camera/index.tsx

@@ -0,0 +1,179 @@
+import React, {
+  useEffect,
+  useCallback,
+  FC,
+  useMemo,
+  PropsWithChildren,
+} from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import {
+  Camera as RNCamera,
+  useCameraDevice,
+  useCameraPermission,
+  useCodeScanner,
+  Code,
+  CodeType,
+} from 'react-native-vision-camera';
+
+export interface CameraInitEventDetail {
+  maxZoom: number;
+}
+
+export interface CameraScanCodeEventDetail {
+  charSet: string;
+  rawData: string;
+  type: CodeType | 'unknown';
+  result: string;
+  fullResult: string;
+}
+
+export interface CameraError {
+  message: string;
+  code?: string;
+  nativeError?: unknown;
+}
+
+export interface CameraProps {
+  id?: string;
+  className?: string;
+  style?: any;
+  mode?: 'normal' | 'scanCode';
+  resolution?: 'low' | 'medium' | 'high';
+  devicePosition?: 'front' | 'back';
+  flash?: 'auto' | 'on' | 'off' | 'torch';
+  onInitDone?: (event: CameraInitEventDetail) => void;
+  onReady?: (event: CameraInitEventDetail) => void;
+  onScanCode?: (event: CameraScanCodeEventDetail) => void;
+  onError?: (error: CameraError) => void;
+}
+
+export const Camera: FC<PropsWithChildren<CameraProps>> = props => {
+  const {
+    devicePosition = 'back',
+    style,
+    mode,
+    flash,
+    onScanCode,
+    onError,
+    onInitDone,
+  } = props;
+
+  const { hasPermission, requestPermission } = useCameraPermission();
+  const device = useCameraDevice(devicePosition);
+
+  useEffect(() => {
+    onHandlePermissionRequest();
+  }, []);
+
+  const onHandlePermissionRequest = useCallback(async () => {
+    if (!hasPermission) {
+      try {
+        const granted = await requestPermission();
+        if (!granted && onError) {
+          onError({
+            message: 'Camera permission denied',
+            code: 'PERMISSION_DENIED',
+          });
+        }
+      } catch (error) {
+        if (onError) {
+          onError({
+            message: error instanceof Error ? error.message : 'Unknown error',
+            code: 'PERMISSION_ERROR',
+            nativeError: error,
+          });
+        }
+      }
+    }
+  }, [hasPermission, requestPermission, onError]);
+
+  const onHandleCodeScanned = useCallback(
+    (codes: Code[]) => {
+      if (mode === 'scanCode' && codes.length > 0 && onScanCode) {
+        const code = codes[0];
+        onScanCode({
+          result: code.value || '',
+          type: code.type,
+          charSet: '',
+          rawData: code.value || '',
+          fullResult: code.value || '',
+        });
+      }
+    },
+    [mode, onScanCode],
+  );
+
+  const codeScanner = useCodeScanner({
+    codeTypes: ['qr', 'ean-13'],
+    onCodeScanned: onHandleCodeScanned,
+  });
+
+  const onHandleError = useCallback(
+    (error: unknown) => {
+      if (onError) {
+        if (error && typeof error === 'object' && 'message' in error) {
+          onError({ message: (error as any).message, nativeError: error });
+        } else {
+          onError({ message: 'Unknown error', nativeError: error });
+        }
+      }
+    },
+    [onError],
+  );
+
+  const onHandleInitialized = useCallback(() => {
+    if (onInitDone) {
+      onInitDone({ maxZoom: device?.maxZoom ?? 1 });
+    }
+  }, [onInitDone, device]);
+
+  const torchState = useMemo(() => {
+    if (flash === 'on' || flash === 'torch') return 'on';
+    return 'off';
+  }, [flash]);
+
+  if (!hasPermission) {
+    return (
+      <View style={styles.center}>
+        <Text>No access to camera</Text>
+      </View>
+    );
+  }
+
+  if (!device) {
+    return (
+      <View style={styles.center}>
+        <Text>No camera device found</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={[styles.container, style]}>
+      <RNCamera
+        style={StyleSheet.absoluteFill}
+        device={device}
+        isActive
+        codeScanner={mode === 'scanCode' ? codeScanner : undefined}
+        torch={torchState}
+        onError={onHandleError}
+        onInitialized={onHandleInitialized}
+      />
+      {props.children}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: 300,
+    height: 300,
+    overflow: 'hidden',
+    backgroundColor: 'black',
+  },
+  center: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});