myshell-react-lib 0.1.4 → 0.1.6

package/src/components/input.tsx

@@ -1,118 +0,0 @@
-import { cva } from 'class-variance-authority';
-import * as React from 'react';
-
-import { cn } from '@/lib/utils';
-
-export type InputProps = Omit<
-  React.InputHTMLAttributes<HTMLInputElement>,
-  'size'
-> & {
-  rounded?:
-    | 'default'
-    | 'none'
-    | 'sm'
-    | 'md'
-    | 'lg'
-    | 'xl'
-    | '2xl'
-    | '3xl'
-    | 'full'
-    | null
-    | undefined;
-  size?: 'xs' | 'sm' | 'md' | 'lg' | null | undefined;
-  isFull?: boolean;
-  border?: 'none' | 'default' | null | undefined;
-  shadow?: 'none' | 'default' | null | undefined;
-  outline?: 'none' | 'default' | null | undefined;
-  background?: 'none' | 'default' | null | undefined;
-};
-
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  (
-    {
-      className,
-      type,
-      autoComplete = 'off',
-      isFull = true,
-      rounded = 'lg',
-      size = 'sm',
-      border = 'default',
-      outline = 'default',
-      background = 'default',
-      shadow = 'default',
-      ...props
-    },
-    ref
-  ) => {
-    const { readOnly } = props;
-
-    const inputVariants = cva('', {
-      variants: {
-        rounded: {
-          none: 'rounded-none',
-          sm: 'rounded-sm',
-          default: 'rounded',
-          md: 'rounded-md',
-          lg: 'rounded-lg',
-          xl: 'rounded-xl',
-          '2xl': 'rounded-2xl',
-          '3xl': 'rounded-3xl',
-          full: 'rounded-full',
-        },
-        size: {
-          lg: 'h-14',
-          md: 'h-11',
-          sm: 'h-10',
-          xs: 'h-9',
-        },
-        border: {
-          none: 'border-none shadow-none',
-          default: 'border border-cc-Input-border-default ',
-        },
-        outline: {
-          none: 'outline-none',
-          default:
-            'focus-visible:outline-none aria-[invalid=true]:focus-visible:ring-error focus-visible:ring-2 focus-visible:ring-cc-Focus-Rings-Brand-default focus-visible:ring-offset-0',
-        },
-        background: {
-          none: 'bg-transparent',
-          default:
-            'bg-cc-Input-bg-default hover:bg-cc-Input-bg-hover disabled:bg-cc-Input-bg-disabled',
-        },
-        shadow: {
-          none: 'shadow-none',
-          default: '',
-        },
-      },
-      defaultVariants: {
-        rounded: 'lg',
-        size: 'sm',
-        border: 'default',
-        outline: 'default',
-        background: 'default',
-      },
-    });
-
-    return (
-      <input
-        type={type}
-        className={cn(
-          'flex space-x-2 p-3 text-base text-Colors-Text-Default placeholder:text-Colors-Text-Subtlest ring-offset-cc-Focus-Rings-Brand-default',
-          'aria-[invalid=true]:border-Colors-Border-Critical aria-[invalid=true]:hover:bg-Colors-Background-Critical-Subtle',
-          'file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-30',
-          inputVariants({ rounded, size, border, outline, background, shadow }),
-          readOnly &&
-            'focus-visible:ring-offset-0 focus-visible:ring-transparent',
-          isFull && 'w-full',
-          className
-        )}
-        autoComplete={autoComplete}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
-);
-Input.displayName = 'Input';
-
-export { Input };

package/src/components/label.tsx

@@ -1,26 +0,0 @@
-'use client';
-
-import * as LabelPrimitive from '@radix-ui/react-label';
-import { cva, type VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-
-import { cn } from '@/lib/utils';
-
-const labelVariants = cva(
-  'text-sm font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-30'
-);
-
-const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
-    VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root
-    ref={ref}
-    className={cn(labelVariants(), className)}
-    {...props}
-  />
-));
-Label.displayName = LabelPrimitive.Root.displayName;
-
-export { Label };

package/src/components/link.tsx

@@ -1,123 +0,0 @@
-import LinkComponent from 'next/link';
-import { useMemo } from 'react';
-
-import { useNativeBridge } from '@/common/hooks/useNativeBridge';
-import { isClient, isIosApp } from '@/common/utils/common-helper';
-
-import { UrlObject } from 'url';
-import { useMedia } from 'react-use';
-
-export interface LinkProps {
-  /**
-   * 跳转地址
-   * '/about'  
-   * {
-   *    pathname: '/about',
-        query: { name: 'test' },
-   * }
-   */
-  href: string | UrlObject;
-  /**
-   * 图像宽度
-   * string | number
-   */
-  scroll?: boolean;
-
-  /**
-   * 替换url
-   */
-  replace?: boolean;
-  /**
-   * true:进入视区预先获取herf数据
-   * false:进入视区不获取，悬浮时获取
-   */
-  prefetch?: boolean;
-  /**
-   * Forces `Link` to send the `href` property to its child.
-   *
-   * @defaultValue `false`
-   */
-  passHref?: boolean;
-  /**
-   * 样式覆盖
-   */
-  className?: string;
-  /**
-   * 是否是返回link
-   */
-  back?: boolean;
-  onClick?: (e: any) => void;
-  children?: React.ReactNode;
-  [key: string]: any;
-}
-
-export function Link({
-  className,
-  href,
-  scroll = false,
-  replace = false,
-  prefetch = true,
-  back = false,
-  children,
-  onClick,
-  ...props
-}: LinkProps) {
-  const path = typeof href === 'string' ? href : `${href.pathname}`;
-  // ref：外链添加nofollow,noreferrer,告诉搜索引擎不要抓取以免降低自身站点权重;内链添加dofollow标签，保证权重的传递
-  const externalLink = /^(https?:\/\/)/.test(path);
-  const { getIosUrl, nativeGoBack } = useNativeBridge();
-  const isIos = isClient() && isIosApp();
-  const isMobile = useMedia('(max-width: 768px)');
-
-  // 通过url是否有platform参数判断是否是ios
-  const pathname = useMemo(() => {
-    // 站外链接直接返回
-    if (externalLink) return path;
-    // 白名单直接返回
-    // if (
-    //   NotMatchWhitelist.some((whitelist: string) => path.startsWith(whitelist))
-    // ) {
-    //   return path;
-    // }
-
-    let formatPath = path;
-    // 统一做m&pc路由跳转优化
-    const isMobPath = path.startsWith('/m/');
-    if (isMobile) {
-      formatPath = isMobPath ? path : `/m${path}`;
-    } else {
-      formatPath = isMobPath ? path.slice(2) : path;
-    }
-
-    return isIos ? getIosUrl(formatPath) || formatPath : formatPath;
-  }, [path]);
-
-  // 此处兼容ios跳转返回后失效问题
-  const Com = isIos ? 'a' : LinkComponent;
-
-  return (
-    <Com
-      href={pathname}
-      scroll={scroll}
-      replace={replace}
-      prefetch={prefetch}
-      onClick={(e) => {
-        if (isIos && back) {
-          e.stopPropagation();
-          e.preventDefault();
-          nativeGoBack();
-        } else {
-          onClick?.(e);
-        }
-      }}
-      className={className}
-      rel={externalLink ? 'nofollow,noreferrer' : 'dofollow'}
-      target={externalLink ? '_blank' : undefined}
-      {...props}
-    >
-      {children}
-    </Com>
-  );
-}
-
-export default Link;

package/src/components/marquee/index.css

@@ -1,15 +0,0 @@
-.ms-marquee-pause-hover:hover div{
-  animation-play-state: paused !important;
-}
-.ms-marquee-pause-running:hover div{
-  animation-play-state: running !important;
-}
-
-@keyframes scroll {
-  0% {
-    transform: translateX(0%);
-  }
-  100% {
-    transform: translateX(-100%);
-  }
-}

package/src/components/marquee/marquee.tsx

@@ -1,220 +0,0 @@
-/* eslint-disable import/no-unassigned-import */
-import React, {
-  Fragment,
-  useEffect,
-  useState,
-  useRef,
-  useCallback,
-  useMemo,
-  ReactNode,
-  CSSProperties,
-  FC,
-  forwardRef,
-  Children,
-  MutableRefObject,
-  RefAttributes,
-} from 'react';
-
-import { cn } from '@/lib/utils';
-
-import './index.css';
-
-type MarqueeProps = {
-  style?: CSSProperties;
-  className?: string;
-  autoFill?: boolean;
-  play?: boolean;
-  pauseOnHover?: boolean;
-  direction?: 'left' | 'right' | 'up' | 'down';
-  speed?: number;
-  delay?: number;
-  loop?: number;
-  onFinish?: () => void;
-  onCycleComplete?: () => void;
-  children?: ReactNode;
-} & RefAttributes<HTMLDivElement>;
-
-const Marquee: FC<MarqueeProps> = forwardRef(function Marquee(
-  {
-    style = {},
-    className = '',
-    autoFill = false,
-    play = true,
-    pauseOnHover = false,
-    direction = 'left',
-    speed = 50,
-    delay = 0,
-    loop = 0,
-    onFinish,
-    onCycleComplete,
-    children,
-  },
-  ref
-) {
-  const [containerWidth, setContainerWidth] = useState(0);
-  const [marqueeWidth, setMarqueeWidth] = useState(0);
-  const [multiplier, setMultiplier] = useState(1);
-  const [isMounted, setIsMounted] = useState(false);
-  const rootRef = useRef<HTMLDivElement>(null);
-  const containerRef = (ref as MutableRefObject<HTMLDivElement>) || rootRef;
-  const marqueeRef = useRef<HTMLDivElement>(null);
-
-  const calculateWidth = useCallback(() => {
-    if (marqueeRef.current && containerRef.current) {
-      const containerRect = containerRef.current.getBoundingClientRect();
-      const marqueeRect = marqueeRef.current.getBoundingClientRect();
-      let containerWidth = containerRect.width;
-      let marqueeWidth = marqueeRect.width;
-
-      if (direction === 'up' || direction === 'down') {
-        containerWidth = containerRect.height;
-        marqueeWidth = marqueeRect.height;
-      }
-
-      if (autoFill && containerWidth && marqueeWidth) {
-        setMultiplier(
-          marqueeWidth < containerWidth
-            ? Math.ceil(containerWidth / marqueeWidth)
-            : 1
-        );
-      } else {
-        setMultiplier(1);
-      }
-
-      setContainerWidth(containerWidth);
-      setMarqueeWidth(marqueeWidth);
-    }
-  }, [autoFill, containerRef, direction]);
-
-  useEffect(() => {
-    if (!isMounted) return;
-
-    calculateWidth();
-    if (marqueeRef.current && containerRef.current) {
-      const resizeObserver = new ResizeObserver(() => calculateWidth());
-      resizeObserver.observe(containerRef.current);
-      resizeObserver.observe(marqueeRef.current);
-
-      return () => {
-        if (!resizeObserver) return;
-        resizeObserver.disconnect();
-      };
-    }
-  }, [calculateWidth, containerRef, isMounted]);
-
-  useEffect(() => {
-    calculateWidth();
-  }, [calculateWidth, children]);
-
-  useEffect(() => {
-    setIsMounted(true);
-  }, []);
-
-  // Animation duration
-  const duration = useMemo(() => {
-    if (autoFill) {
-      return (marqueeWidth * multiplier) / speed;
-    } else {
-      return marqueeWidth < containerWidth
-        ? containerWidth / speed
-        : marqueeWidth / speed;
-    }
-  }, [autoFill, containerWidth, marqueeWidth, multiplier, speed]);
-
-  const containerStyle = useMemo(
-    () => ({
-      ...style,
-      width: direction === 'up' || direction === 'down' ? `100vh` : '100%',
-      transform:
-        direction === 'up'
-          ? 'rotate(-90deg)'
-          : direction === 'down'
-          ? 'rotate(90deg)'
-          : 'none',
-    }),
-    [style, play, pauseOnHover, direction]
-  );
-
-  const marqueeStyle = useMemo(
-    () => ({
-      flex: '0 0 auto',
-      animationDuration: `${duration}s`,
-      animationDirection: direction === 'left' ? 'normal' : 'reverse',
-      animationDelay: `${delay}s`,
-      animation: !!loop
-        ? `scroll ${duration}s linear ${delay}s ${loop}`
-        : `scroll ${duration}s linear ${delay}s infinite`,
-      minWidth: autoFill ? `auto` : '100%',
-    }),
-    [play, direction, duration, delay, loop, autoFill]
-  );
-
-  const childStyle = useMemo(
-    () => ({
-      transform:
-        direction === 'up'
-          ? 'rotate(90deg)'
-          : direction === 'down'
-          ? 'rotate(-90deg)'
-          : 'none',
-    }),
-    [direction]
-  );
-
-  // Render {multiplier} number of children
-  const multiplyChildren = useCallback(
-    (multiplier: number) => {
-      return [
-        ...Array(
-          Number.isFinite(multiplier) && multiplier >= 0 ? multiplier : 0
-        ),
-      ].map((_, i) => (
-        <Fragment key={i}>
-          {Children.map(children, (child) => {
-            return (
-              <div key={`children${i}`} style={childStyle} className="ms-child">
-                {child}
-              </div>
-            );
-          })}
-        </Fragment>
-      ));
-    },
-    [childStyle, children]
-  );
-
-  return !isMounted ? null : (
-    <div
-      ref={containerRef}
-      style={containerStyle}
-      className={cn(
-        `ms-marquee-container overflow-x-hidden flex flex-row relative${className}`,
-        !play || pauseOnHover ? 'ms-marquee-pause-hover' : ''
-      )}
-    >
-      <div
-        className={cn(' z-[1] flex flex-row items-center')}
-        style={marqueeStyle}
-        onAnimationIteration={onCycleComplete}
-        onAnimationEnd={onFinish}
-      >
-        <div
-          className="flex flex-row items-center min-w-[auto]"
-          ref={marqueeRef}
-        >
-          {Children.map(children, (child) => {
-            return (
-              <div style={childStyle} className="ms-child">
-                {child}
-              </div>
-            );
-          })}
-        </div>
-        {multiplyChildren(multiplier - 1)}
-      </div>
-      <div style={marqueeStyle}>{multiplyChildren(multiplier)}</div>
-    </div>
-  );
-});
-
-export { Marquee };

package/src/components/masonry.tsx

@@ -1,138 +0,0 @@
-'use client';
-
-import { indexOf, min } from 'lodash-es';
-import React, { Children, useEffect, useState } from 'react';
-
-import { cn } from '@/lib/utils';
-
-interface BreakpointColsObject {
-  default: number;
-  [key: number]: number;
-}
-
-interface MasonryProps {
-  breakpointCols?: number | BreakpointColsObject;
-  className?: string;
-  columnClassName?: string;
-  children?: React.ReactNode;
-  columnAttrs?: React.HTMLAttributes<HTMLDivElement>;
-  heights?: number[];
-}
-
-const Masonry: React.FC<MasonryProps> = ({
-  breakpointCols = {
-    default: 0,
-    3280: 5,
-    1919: 4,
-    1439: 3,
-    1199: 2,
-  },
-  className = '',
-  columnClassName = '',
-  children,
-  columnAttrs = {},
-  heights,
-}) => {
-  const [columnCount, setColumnCount] = useState<number>(
-    typeof breakpointCols === 'number' ? breakpointCols : breakpointCols.default
-  );
-
-  const reCalculateColumnCount = () => {
-    const windowWidth = window?.innerWidth || Infinity;
-    let newColumnCount = columnCount;
-
-    if (typeof breakpointCols === 'object') {
-      let matchedBreakpoint = Infinity;
-
-      for (const breakpoint in breakpointCols) {
-        const optBreakpoint = parseInt(breakpoint);
-        const isCurrentBreakpoint =
-          optBreakpoint > 0 && windowWidth <= optBreakpoint;
-
-        if (isCurrentBreakpoint && optBreakpoint < matchedBreakpoint) {
-          matchedBreakpoint = optBreakpoint;
-          newColumnCount = breakpointCols[breakpoint];
-        }
-      }
-
-      newColumnCount = Math.max(1, newColumnCount || 1);
-    }
-
-    if (columnCount !== newColumnCount) {
-      setColumnCount(newColumnCount);
-    }
-  };
-
-  useEffect(() => {
-    const handleResize = () => {
-      reCalculateColumnCount();
-    };
-
-    window.addEventListener('resize', handleResize);
-
-    // Invoke immediately to set the initial column count
-    handleResize();
-
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, [breakpointCols, columnCount]);
-
-  const itemsInColumns = () => {
-    const columns = new Array<React.ReactNode[]>(columnCount);
-    const totals = new Array<number>(columnCount).fill(0);
-    const items = Children.toArray(children);
-
-    if (heights) {
-      for (let i = 0; i < items.length; i++) {
-        const columnIndex = indexOf(totals, min(totals));
-
-        if (!columns[columnIndex]) {
-          columns[columnIndex] = [];
-        }
-        columns[columnIndex].push(items[i]);
-        totals[columnIndex] += heights[i];
-      }
-    } else {
-      for (let i = 0; i < items.length; i++) {
-        const columnIndex = i % columnCount;
-        if (!columns[columnIndex]) {
-          columns[columnIndex] = [];
-        }
-        columns[columnIndex].push(items[i]);
-      }
-    }
-
-    return columns;
-  };
-
-  const renderColumns = () => {
-    const childrenInColumns = itemsInColumns();
-    const columnWidth = `${100 / childrenInColumns.length}%`;
-
-    return childrenInColumns.map((items, i) => (
-      <div
-        {...columnAttrs}
-        style={{ ...columnAttrs.style, width: columnWidth }}
-        className={cn(
-          'space-y-2 bg-clip-padding pl-2 md:space-y-5 md:pl-5',
-          columnClassName
-        )}
-        key={i}
-      >
-        {items}
-      </div>
-    ));
-  };
-
-  return (
-    <div
-      {...columnAttrs}
-      className={cn('mr-4 flex w-auto md:mr-6', className || 'my-masonry-grid')}
-    >
-      {columnCount > 0 && renderColumns()}
-    </div>
-  );
-};
-
-export { Masonry };