myshell-react-lib 0.1.0

package/src/common/constants/constants.ts

@@ -0,0 +1,24 @@
+/**
+ * 通用白名单
+ */
+
+export const NotMatchWhitelist = [
+  '/privacy-policy',
+  '/tos',
+  '/connect/tg',
+  '/browser',
+  '/upload',
+  '/shadcn-playground',
+  '/sc-did',
+  '/mainpage',
+  '/sitemap',
+  '/chatpage',
+  '/widgetpage',
+  '/postpage',
+  '/articlepage',
+  '/gallerypage',
+  '/botimage',
+  '/galleryimage',
+  '/robots.txt',
+  '/favicon.ico',
+];

package/src/common/constants/types/common.ts

@@ -0,0 +1,10 @@
+/**
+ * 通用类型定义
+ */
+
+export type HeroIcon = React.ForwardRefExoticComponent<
+  React.PropsWithoutRef<React.SVGProps<SVGSVGElement>> & {
+    title?: string;
+    titleId?: string;
+  } & React.RefAttributes<SVGSVGElement>
+>;

package/src/common/hooks/useAudioPlayer.tsx

@@ -0,0 +1,198 @@
+import {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useLayoutEffect,
+  useRef,
+} from 'react';
+
+import { useDevice } from './useDevice';
+
+declare global {
+  interface Window {
+    webkitAudioContext: typeof AudioContext;
+  }
+}
+
+type AudioAPI = {
+  play(arrayBuffer: ArrayBuffer, start: number): void;
+  pause(): void;
+};
+
+let audioAPI: AudioAPI | null = null;
+
+const getAudioAPI = (): AudioAPI => {
+  if (audioAPI) return audioAPI;
+
+  // make it crossbrowser, vendor prefix implement is supported from 6.14 (Released 2012-09-10)
+  const AudioContext = window.AudioContext || window.webkitAudioContext;
+  const context = new AudioContext();
+  const gainNode = context.createGain();
+  // set volume to 100%
+  gainNode.gain.value = 1;
+
+  let currentSourceNode: AudioBufferSourceNode | null = null;
+
+  // unlock the audio context
+  window.addEventListener(
+    'touchstart',
+    () => {
+      // target to play an empty audio
+      const buffer = context.createBuffer(1, 1, 22050);
+      const source = context.createBufferSource();
+      source.buffer = buffer;
+      source.connect(context.destination);
+      source.start(0);
+    },
+    { once: true }
+  );
+
+  audioAPI = {
+    play(arrayBuffer: ArrayBuffer, start: number) {
+      // call slice to clone, avoid disposing the input array buffer
+      context.decodeAudioData(arrayBuffer.slice(0), (audioBuffer) => {
+        if (context.state === 'suspended') {
+          if (currentSourceNode) {
+            currentSourceNode.stop();
+          }
+
+          context.resume();
+        }
+
+        if (gainNode.gain.value === 0) {
+          gainNode.gain.value = 1;
+        }
+        const source = context.createBufferSource();
+        source.buffer = audioBuffer;
+        source.connect(context.destination);
+        currentSourceNode = source;
+
+        source.start(0, start);
+      });
+    },
+    pause() {
+      // if (context.state === 'running') {
+      //   context.suspend();
+      // }
+      // 不能判定状态，否则在 iOS 端，若录制声音，然后再继续播放，会有两条音轨播放
+      context.suspend();
+    },
+  };
+
+  return audioAPI;
+};
+
+const IosAudioPlayer = forwardRef(
+  (
+    props: React.DetailedHTMLProps<
+      React.AudioHTMLAttributes<HTMLAudioElement>,
+      HTMLAudioElement
+    >,
+    ref
+  ) => {
+    const audioRef = useRef<HTMLAudioElement>(null);
+    const audioApi = getAudioAPI();
+    const loadTask = useRef<Promise<ArrayBuffer | void>>();
+
+    useLayoutEffect(() => {
+      return () => {
+        audioApi.pause();
+        if (audioRef.current) {
+          audioRef.current!.pause();
+        }
+      };
+    }, []);
+
+    const handlePlay = useCallback(async () => {
+      if (!audioRef.current?.paused) return Promise.reject();
+
+      if (props.src && loadTask.current) {
+        const arrayBuffer = await loadTask.current;
+        if (arrayBuffer) {
+          return audioApi.play(arrayBuffer, audioRef.current!.currentTime);
+        }
+      }
+
+      return Promise.resolve();
+    }, []);
+
+    const handleLoad = useCallback(async () => {
+      if (props.src) {
+        try {
+          loadTask.current = window
+            .fetch(props.src)
+            .then((response) => response.arrayBuffer())
+            .catch((error) => {
+              console.error(error);
+            });
+        } catch (error) {
+          console.error(error);
+        }
+      }
+    }, []);
+
+    // expose same ref interface as audio element, delegate to muted <audio /> besides real audio play implement
+    useImperativeHandle(
+      ref,
+      () => {
+        return {
+          play: () =>
+            handlePlay()
+              .then(() => {
+                console.log('audioCompPlay');
+
+                return audioRef.current!.play();
+              })
+              .catch(() => {
+                // playing
+              }),
+          pause: () => {
+            audioAPI?.pause();
+
+            return audioRef.current!.pause();
+          },
+          load: () => {
+            // loading the audio array buffer
+            handleLoad();
+
+            return audioRef.current!.load();
+          },
+          addEventListener: (
+            type: 'play' | 'pause',
+            listener: (this: HTMLAudioElement, ev: Event) => any,
+            options?: boolean | AddEventListenerOptions | undefined
+          ) => {
+            return audioRef.current!.addEventListener(type, listener, options);
+          },
+          get currentTime() {
+            return audioRef.current!.currentTime;
+          },
+          set currentTime(value) {
+            audioRef.current!.currentTime = value;
+          },
+          get duration() {
+            return audioRef.current!.duration;
+          },
+          get paused() {
+            return audioRef.current!.paused;
+          },
+        };
+      },
+      [handlePlay, handleLoad]
+    );
+
+    // iOS allows muted audio played without a user gesture, use this silent <audio /> to reflect the current audio status.
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return <audio {...props} muted ref={audioRef} />;
+  }
+);
+
+IosAudioPlayer.displayName = 'IosAudioPlayer';
+
+const useAudioPlayer = (): React.ComponentType | 'audio' => {
+  const { isIos } = useDevice();
+
+  return !isIos ? 'audio' : IosAudioPlayer;
+};
+
+export default useAudioPlayer;

package/src/common/hooks/useDevice.ts

@@ -0,0 +1,26 @@
+import isMobile from 'ismobilejs';
+import { useState, useEffect } from 'react';
+
+import { useWindowWidth } from './useWindowWidth';
+
+export const useDevice = () => {
+  const [device, setDevice] = useState(isMobile());
+  const [isWeixin, setIsWeixin] = useState<boolean>(false);
+  useEffect(() => {
+    const device = isMobile();
+    setDevice(device);
+    setIsWeixin(
+      navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1
+    );
+  }, []);
+
+  return {
+    isMobile: device.phone || device.tablet,
+    isIos: device.apple.phone || device.apple.tablet || device.apple.ipod,
+    isWeixin,
+  };
+};
+
+export const useIsMobileByWindowWidth = () => {
+  return useWindowWidth() <= 768;
+};

package/src/common/hooks/useNativeBridge.ts

@@ -0,0 +1,42 @@
+/**
+ * 与原生应用交互的钩子
+ */
+
+import { useCallback } from 'react';
+import { isIosApp } from '../utils/common-helper';
+
+export function useNativeBridge() {
+  const callNative = useCallback((action: string, data?: any) => {
+    if (isIosApp() && window.webkit?.messageHandlers?.reactNative) {
+      window.webkit.messageHandlers.reactNative.postMessage({
+        action,
+        data,
+      });
+    }
+
+    // 安卓交互逻辑
+    if (typeof window !== 'undefined' && (window as any).ReactNativeWebView) {
+      (window as any).ReactNativeWebView.postMessage(
+        JSON.stringify({
+          action,
+          data,
+        })
+      );
+    }
+  }, []);
+
+  const getIosUrl = useCallback((path: string) => {
+    // 简单实现，实际可能需要更复杂的逻辑
+    return path;
+  }, []);
+
+  const nativeGoBack = useCallback(() => {
+    callNative('goBack');
+  }, [callNative]);
+
+  return {
+    callNative,
+    getIosUrl,
+    nativeGoBack,
+  };
+}

package/src/common/hooks/useNotification.tsx

@@ -0,0 +1,179 @@
+import CustomNotification from '@/components/custom-notification';
+import { useCallback } from 'react';
+import { toast, ToastOptions } from 'react-hot-toast';
+
+export type ToastType = 'success' | 'info' | 'warning' | 'error';
+
+export interface CustomToasterProps {
+  id?: string;
+  type?: ToastType;
+  title?: string;
+  content: string;
+  isClosable?: boolean;
+  translateInToast?: boolean;
+  reason?: string;
+  action?: React.ReactNode;
+  loading?: boolean;
+}
+
+export function useNotification() {
+  const addToast = useCallback(
+    (config: CustomToasterProps, duration?: number) => {
+      // 如果显式指定 id 的，则同时只能有一条显示
+      if (config.id) {
+        toast.remove(config.id);
+      }
+      toast.custom(
+        (t: ToastOptions) => {
+          return (
+            <CustomNotification
+              tProps={{ ...t, duration }}
+              customProps={config}
+            />
+          );
+        },
+        {
+          id: config.id,
+          duration,
+        }
+      );
+    },
+    []
+  );
+
+  const message = useCallback(
+    (config: CustomToasterProps, duration?: number) =>
+      addToast(
+        {
+          ...config,
+        },
+        duration
+      ),
+    []
+  );
+
+  const success = useCallback(
+    (config: CustomToasterProps, duration?: number) =>
+      addToast(
+        {
+          ...config,
+          type: 'success',
+        },
+        duration
+      ),
+    []
+  );
+
+  const error = useCallback(
+    (config: CustomToasterProps, duration?: number) =>
+      addToast(
+        {
+          ...config,
+          type: 'error',
+        },
+        duration
+      ),
+    []
+  );
+
+  const warning = useCallback(
+    (config: CustomToasterProps, duration?: number) =>
+      addToast(
+        {
+          ...config,
+          type: 'warning',
+        },
+        duration
+      ),
+    []
+  );
+
+  const info = useCallback(
+    (config: CustomToasterProps, duration?: number) =>
+      addToast(
+        {
+          ...config,
+          type: 'info',
+        },
+        duration
+      ),
+    []
+  );
+
+  const close = useCallback((id: string) => {
+    toast.dismiss(id);
+  }, []);
+
+  return { addToast, success, error, warning, info, close, message };
+}
+
+export class Message {
+  private static _toast(config: CustomToasterProps, duration?: number) {
+    if (config.id) {
+      toast.remove(config.id);
+    }
+
+    const addToast = () => {
+      toast.custom(
+        (t: ToastOptions) => {
+          return (
+            <CustomNotification
+              tProps={{ ...t, duration }}
+              customProps={config}
+            />
+          );
+        },
+        {
+          id: config.id,
+          duration,
+        }
+      );
+    };
+
+    addToast();
+  }
+
+  static success(config: CustomToasterProps, duration?: number) {
+    return this._toast(
+      {
+        ...config,
+        type: 'success',
+      },
+      duration
+    );
+  }
+
+  static error(config: CustomToasterProps, duration?: number) {
+    return this._toast(
+      {
+        ...config,
+        type: 'error',
+      },
+      duration
+    );
+  }
+
+  static info(config: CustomToasterProps, duration?: number) {
+    return this._toast(
+      {
+        ...config,
+        type: 'info',
+      },
+      duration
+    );
+  }
+
+  static warning(config: CustomToasterProps, duration?: number) {
+    return this._toast(
+      {
+        ...config,
+        type: 'warning',
+      },
+      duration
+    );
+  }
+
+  static close(id: string) {
+    toast.dismiss(id);
+  }
+}

package/src/common/hooks/useWindowWidth.ts

@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react';
+
+export const useWindowWidth = () => {
+  const [windowWidth, setWindowWidth] = useState(0);
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowWidth(window.innerWidth);
+    };
+    window.addEventListener('resize', handleResize);
+    handleResize();
+
+    // 在组件卸载时移除事件监听
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  return windowWidth;
+};

package/src/common/utils/common-helper.ts

@@ -0,0 +1,81 @@
+export const CDN_URL = 'https://www.myshellstatic.com/';
+/**
+ * 通用工具函数
+ */
+
+/**
+ * 获取资源URL
+ */
+
+export function getAssetsUrl(url: string | any) {
+  if (!isString(url) || !(url || '').trim()) {
+    return url;
+  }
+  if (url.startsWith('http')) {
+    return url;
+  }
+
+  return `${CDN_URL}${url}`;
+}
+
+/**
+ * 格式化时长
+ */
+export function durationFormatter(seconds: number): string {
+  const minutes = Math.floor(seconds / 60);
+  const remainingSeconds = Math.floor(seconds % 60);
+  return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
+}
+
+/**
+ * 获取百分比
+ */
+export function getPercent(value: number, total: number): number {
+  if (total === 0) return 0;
+  return (value / total) * 100;
+}
+
+/**
+ * 限制数值在指定范围内
+ */
+export function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max);
+}
+
+/**
+ * 检查是否为客户端环境
+ */
+export function isClient(): boolean {
+  return typeof window !== 'undefined';
+}
+
+/**
+ * 为Window添加webkit属性的类型定义
+ */
+declare global {
+  interface Window {
+    webkit?: {
+      messageHandlers?: {
+        reactNative?: {
+          postMessage: (message: any) => void;
+        };
+      };
+    };
+  }
+}
+
+/**
+ * 检查是否为iOS应用环境
+ */
+export function isIosApp(): boolean {
+  return (
+    isClient() &&
+    typeof navigator !== 'undefined' &&
+    /iPhone|iPad|iPod/i.test(navigator.userAgent) &&
+    !!window.webkit
+  );
+}
+
+export function isString(str: any): str is string {
+  return typeof str === 'string' || str instanceof String;
+}

package/src/components/ItemDemo.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import React from 'react';
+
+const ItemDemo: React.FC = () => {
+  console.log('a');
+
+  return (
+    <div className="text-lg text-Colors-Text-Brand-Default">
+      Yes. this is ItemDemo children.
+    </div>
+  );
+};
+
+export default ItemDemo;