myshell-react-lib 0.1.0

package/src/components/input.tsx

@@ -0,0 +1,118 @@
+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

@@ -0,0 +1,26 @@
+'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

@@ -0,0 +1,123 @@
+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

@@ -0,0 +1,15 @@
+.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

@@ -0,0 +1,220 @@
+/* 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 default Marquee;

package/src/components/masonry.tsx

@@ -0,0 +1,138 @@
+'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 default Masonry;