myshell-react-lib 0.1.5 → 0.1.7

package/src/components/swiper/index.tsx

@@ -1,319 +0,0 @@
-/* eslint-disable import/order */
-
-'use client';
-
-import { cva } from 'class-variance-authority';
-import { useEffect, useMemo, useRef, useState } from 'react';
-import type { Swiper as SwiperType } from 'swiper';
-import { useRouter } from 'next/navigation';
-import {
-  Autoplay,
-  Navigation,
-  FreeMode,
-  Scrollbar,
-  Mousewheel,
-  Grid,
-} from 'swiper/modules';
-import { Swiper as SwiperComponent, SwiperSlide } from 'swiper/react';
-import type { AutoplayOptions } from 'swiper/types';
-
-/* eslint-disable import/no-unassigned-import */
-import 'swiper/css';
-// import 'swiper/swiper-bundle.css';
-import 'swiper/css/navigation';
-import 'swiper/css/free-mode';
-import 'swiper/css/grid';
-import 'swiper/css/pagination';
-// import 'swiper/css/scrollbar';
-
-import { cn } from '@/lib/utils';
-import styles from './index.module.scss';
-
-const swiperVariants = 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',
-    },
-  },
-  defaultVariants: {
-    rounded: 'none',
-  },
-});
-
-export interface SwiperProps {
-  /**
-   * 轮播间隔延迟毫秒
-   */
-  delay?: number;
-  /**
-   * 是否自动播放
-   */
-  autoplay?: boolean;
-  /**
-   * 是否循环
-   */
-  loop?: boolean;
-  /**
-   * 一屏显示slider数量,number|'auto'
-   */
-  slidesPerView?: number | 'auto';
-  /**
-   * 轮播数据
-   */
-  dataList: any;
-  /**
-   * 轮播类型 ，目前是特殊的'banner' | 'featured'，其他自由配置
-   */
-  swiperType: 'default' | 'banner' | 'featured' | 'grid';
-  /**
-   * 行数，仅在swiperType为'grid'时生效
-   */
-  gridRows?: number;
-  /**
-   * 轮播子组件
-   */
-  component?: React.ElementType;
-  /**
-   * Swiperbox样式覆盖
-   */
-  className?: string;
-  /**
-   * Swiper item样式覆盖
-   */
-  componentClassName?: string;
-  /**
-   * Swiper Slide item样式覆盖
-   */
-  slideClassName?: string;
-  // todo del
-  rounded?:
-    | 'none'
-    | 'sm'
-    | 'default'
-    | 'md'
-    | 'lg'
-    | 'xl'
-    | '2xl'
-    | '3xl'
-    | 'full';
-  /**
-   * 从哪里来，点击跳转时带在url上
-   */
-  from?: string;
-
-  /**
-   * 是否居中显示
-   */
-  centeredSlides?: boolean;
-
-  // 间距
-  spaceBetween?: number;
-  /**
-   * 是否是移动端
-   */
-  isMobile?: boolean;
-}
-
-export function Swiper(props: SwiperProps) {
-  const {
-    className,
-    componentClassName,
-    slideClassName,
-    rounded = 'none',
-    delay = 4000,
-    loop = true,
-    slidesPerView = 1,
-    dataList = [],
-    swiperType = 'default',
-    from = '',
-    component,
-    autoplay,
-    spaceBetween = 12,
-    centeredSlides = true,
-    gridRows = 3,
-    isMobile = false,
-  } = props;
-  const isBanner = swiperType === 'banner';
-  const isFeatured = swiperType === 'featured';
-  const isGrid = swiperType === 'grid';
-  const router = useRouter();
-  const Com = component || 'div';
-  const swiperList = useMemo(() => {
-    const { length } = dataList;
-    if (length < 2 || isGrid || isFeatured) {
-      return dataList;
-    }
-
-    // 抽出最后一个元素放在开头，确保UI逻辑正确
-    const newList = dataList.slice(0);
-    const last = newList.pop()!;
-    newList.unshift(last);
-
-    return newList;
-  }, [dataList]);
-
-  const autoPlayOptions: AutoplayOptions = {
-    delay,
-  };
-
-  const swiperRef = useRef<SwiperType>();
-  const fgconfigs = {
-    0: {
-      slidesPerView: 1.014,
-      spaceBetween: 12,
-    },
-    590: {
-      slidesPerView: 2.1,
-      slidesPerGroup: 2,
-    },
-    768: {
-      slidesPerView: 1,
-    },
-    1024: {
-      slidesPerView: 2,
-      slidesPerGroup: 2,
-    },
-    1280: {
-      slidesPerView: 3,
-      slidesPerGroup: 3,
-    },
-    1536: {
-      slidesPerView: 4,
-      slidesPerGroup: 4,
-    },
-  };
-  const breakpoints = {
-    default: {},
-    banner: {
-      769: {
-        spaceBetween: 20,
-      },
-    },
-    featured: fgconfigs,
-    grid: fgconfigs,
-  };
-  const swiperConfigs = {
-    spaceBetween: isFeatured ? 20 : isGrid ? 0 : spaceBetween,
-    autoplay:
-      swiperList?.length > 1 && (autoplay || isBanner)
-        ? autoPlayOptions
-        : false,
-    loop: !isFeatured && !isGrid && swiperList?.length > 1 ? loop : false,
-    slidesPerView: isBanner ? 'auto' : slidesPerView,
-    centeredSlides: isGrid || isFeatured ? false : centeredSlides,
-    initialSlide: isBanner ? 1 : 0,
-    navigation: !isGrid,
-    freeMode: (isFeatured || isGrid) && !isMobile,
-    scrollbar: (isFeatured || isGrid) && !isMobile,
-
-    ...((isFeatured || isGrid) && !isMobile
-      ? {
-          mousewheel: {
-            forceToAxis: true, // 仅水平滚动
-          },
-        }
-      : {}),
-    ...(isGrid ? { grid: { rows: gridRows } } : {}),
-    modules: [Autoplay, Navigation, FreeMode, Scrollbar, Mousewheel, Grid],
-  };
-
-  const [animate, setAnimate] = useState(false);
-  useEffect(() => {
-    // delay transition animation.
-    // because swiper.js add `.swiper-slide-prev`/`.swiper-slide-next` in a delay,
-    // which will introduced an unexpected animated when first load.
-    setTimeout(() => {
-      setAnimate(true);
-    }, 200);
-  }, []);
-
-  const handleSlideItemClick = (
-    e: React.MouseEvent<HTMLDivElement>,
-    gotoUrl: string,
-    index: number
-  ) => {
-    const swiper = swiperRef.current;
-    if (!swiper) {
-      return;
-    }
-    if (swiper.realIndex === index) {
-      const hasParam = gotoUrl.includes('?') ? '&' : '?';
-      // goToHandle?.(`${gotoUrl}${hasParam}from=Explore_Banner`);
-      const fromParam = from ? `from=${from}` : '';
-      const url = `${gotoUrl}${hasParam}${fromParam}`;
-      if (!(url.startsWith('https') || url.startsWith('http'))) {
-        router.push(url);
-      } else {
-        window.open(url);
-      }
-    } else if (e.target) {
-      const rect = (e.target as HTMLElement)?.getBoundingClientRect();
-      const screenWidth = window.innerWidth;
-      if (rect.left < screenWidth / 2 && rect.right < screenWidth / 2) {
-        // 元素离左边屏幕更近
-        swiper.slidePrev();
-      } else if (rect.left > screenWidth / 2 && rect.right > screenWidth / 2) {
-        // 元素离右边屏幕更近
-        swiper.slideNext();
-      }
-    }
-  };
-
-  return (
-    <div className={styles.swiperBox}>
-      <SwiperComponent
-        observer
-        observeParents
-        {...swiperConfigs}
-        breakpoints={breakpoints[swiperType]}
-        className={cn(
-          'w-[100vw] md:w-full h-auto flex-shrink-0',
-          isBanner && 'banner-swiper h-[220px] md:h-auto',
-          isFeatured && 'feature-swiper !pl-4 !pr-3 md:!px-4',
-          isGrid && 'grid-swiper h-full !ml-auto !mr-auto !pl-4 !pr-3 md:!px-0',
-          animate && styles.animate,
-          className
-        )}
-        onInit={(swiper) => {
-          swiperRef.current = swiper;
-        }}
-      >
-        {swiperList.map((item: any, index: number) => (
-          <SwiperSlide
-            /* eslint-disable-next-line react/no-array-index-key */
-            key={index}
-            className={cn(
-              isBanner &&
-                'banner-swiper-slide !w-[90%] md:!w-[98%] h-[220px] md:h-auto max-w-[1200px] aspect-[4/1] rounded-2xl opacity-30',
-              isFeatured && 'rounded-2xl !w-[100%-32px] md:!w-[100%-72px]',
-              isGrid &&
-                'grid-swiper-slide !w-[100%-32px] md:!w-[100%-72px] !h-[100%/3] flex justify-center items-center rounded-2xl',
-              'text-clip',
-              slideClassName
-            )}
-          >
-            <Com
-              item={item}
-              index={index}
-              onClick={handleSlideItemClick}
-              className={cn(
-                swiperVariants({ rounded }),
-                (isBanner || isFeatured) && 'rounded-2xl',
-                componentClassName
-              )}
-              isLine={gridRows && (index + 1) % gridRows !== 0}
-            />
-          </SwiperSlide>
-        ))}
-      </SwiperComponent>
-    </div>
-  );
-}

package/src/components/switch.tsx

@@ -1,67 +0,0 @@
-'use client';
-
-import * as SwitchPrimitives from '@radix-ui/react-switch';
-import { cva, type VariantProps } from 'class-variance-authority';
-import * as React from 'react';
-
-import { cn } from '@/lib/utils';
-
-const switchSize = {
-  sm: 'w-7 h-4',
-  md: 'w-[34px] h-5',
-  lg: 'w-10 h-6',
-} as const;
-
-const switchRootVariants = cva(
-  'peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-cc-Focus-Rings-Brand-default focus-visible:ring-offset-2 data-[state=unchecked]:focus-visible:bg-cc-Switch-bg-default disabled:cursor-not-allowed disabled:opacity-30 data-[state="checked"]:bg-cc-Switch-bg-on data-[state="unchecked"]:bg-cc-Switch-bg-default',
-  {
-    variants: {
-      size: switchSize,
-    },
-    defaultVariants: {
-      size: 'lg',
-    },
-  }
-);
-
-const switchThumbVariants = cva(
-  'pointer-events-none block rounded-full bg-cc-Switch-fg-on ring-0 transition-transform data-[state=unchecked]:translate-x-0',
-  {
-    variants: {
-      size: {
-        sm: 'w-3 h-3 data-[state=checked]:translate-x-3',
-        md: 'w-4 h-4 data-[state=checked]:translate-x-[14px]',
-        lg: 'w-5 h-5 data-[state=checked]:translate-x-4',
-      },
-    },
-    defaultVariants: {
-      size: 'lg',
-    },
-  }
-);
-
-const Switch = React.forwardRef<
-  React.ElementRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root> &
-    VariantProps<typeof switchRootVariants> & {
-      label?: string;
-      labelClassName?: string;
-    }
->(({ className, size, label, labelClassName, ...props }, ref) => {
-  const Component = label ? 'div' : React.Fragment;
-  return (
-    <Component className="flex items-center justify-center space-x-1.5 text-Colors-Text-Default">
-      <SwitchPrimitives.Root
-        className={cn(switchRootVariants({ size }), className, '')}
-        {...props}
-        ref={ref}
-      >
-        <SwitchPrimitives.Thumb className={cn(switchThumbVariants({ size }))} />
-      </SwitchPrimitives.Root>
-      {label && <span className={cn('text-sm', labelClassName)}>{label}</span>}
-    </Component>
-  );
-});
-Switch.displayName = SwitchPrimitives.Root.displayName;
-
-export { Switch };

package/src/components/tabs.tsx

@@ -1,325 +0,0 @@
-'use client';
-
-import * as TabsPrimitive from '@radix-ui/react-tabs';
-import { cva } from 'class-variance-authority';
-import * as React from 'react';
-
-import { cn } from '@/lib/utils';
-
-import { Badge } from './badge';
-import { Icon } from './icon';
-import Link from './link';
-import { Tooltip } from './tooltip';
-import { Text } from './typography';
-
-type TItems = {
-  label?: string;
-  value: string;
-  count?: number | string;
-  tooltip?: {
-    description?: string;
-    open?: boolean;
-    variant?: 'default' | 'info' | 'message';
-  };
-  icon?: React.ElementType;
-  disabled?: boolean;
-  link?: string;
-  hasUnRead?: boolean;
-  children?: string | React.ReactNode;
-  className?: string;
-  onClickCallback?: (value: string) => void;
-};
-
-const tabListVariants = cva(
-  'relative inline-flex items-center justify-center overflow-hidden',
-  {
-    variants: {
-      size: {
-        sm: 'h-6',
-        md: 'h-9',
-        lg: 'h-12',
-      },
-      variant: {
-        button:
-          'w-full border border-Colors-Border-Default bg-Colors-Background-Neutral-Primary-Default p-0.5',
-        underline: 'border-b border-Colors-Border-Default space-x-6',
-        icon: 'border border-Colors-Border-Default bg-Colors-Background-Neutral-Primary-Default p-0.5',
-      },
-      rounded: {
-        default: '',
-        full: 'rounded-full',
-      },
-    },
-    compoundVariants: [
-      {
-        variant: 'button',
-        size: 'lg',
-        className: 'min-w-[320px]',
-      },
-      {
-        variant: 'button',
-        size: 'md',
-        className: 'min-w-[218px]',
-      },
-      {
-        variant: 'button',
-        size: 'sm',
-        className: 'min-w-[180px]',
-      },
-      {
-        variant: 'underline',
-        size: 'lg',
-        className: 'h-8',
-      },
-      {
-        variant: 'underline',
-        size: 'md',
-        className: 'h-7',
-      },
-      {
-        variant: 'underline',
-        size: 'sm',
-        className: 'h-6',
-      },
-      {
-        rounded: 'default',
-        size: 'lg',
-        className: 'rounded-xl',
-      },
-      {
-        rounded: 'default',
-        size: 'md',
-        className: 'rounded-lg',
-      },
-      {
-        rounded: 'default',
-        size: 'sm',
-        className: 'rounded-md',
-      },
-    ],
-    defaultVariants: {
-      size: 'lg',
-      variant: 'button',
-      rounded: 'default',
-    },
-  }
-);
-
-const tabVariants = cva(
-  'relative inline-flex w-full h-full items-center justify-center overflow-hidden whitespace-nowrap font-medium text-Colors-Text-Subtler aria-[selected=true]:text-Colors-Text-Brand-Default aria-[selected=true]:bg-Colors-Background-Normal-Primary-Active aria-[selected=true]:shadow-background-default [&>div>span]:hover:text-Colors-Text-Brand-Default disabled:pointer-events-none disabled:text-Colors-Text-Disabled [&>div>span]:disabled:text-Colors-Text-Disabled data-[state=active]:text-Colors-Text-Brand-Default',
-  {
-    variants: {
-      size: {
-        sm: 'text-xs',
-        md: 'text-sm',
-        lg: 'text-base',
-      },
-      variant: {
-        button:
-          'px-3 py-2.5 flex-1 rounded-full transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-Colors-Background-Normal-Primary-Active data-[state=active]:shadow-background-default ',
-        underline:
-          'flex items-baseline pb-2 rounded-none data-[state=active]:border-b-2 data-[state=active]:border-b-brand',
-        icon: 'px-4',
-      },
-      rounded: {
-        default: '',
-        full: 'rounded-full',
-      },
-    },
-    compoundVariants: [
-      {
-        rounded: 'default',
-        size: 'lg',
-        className: 'rounded-xl',
-      },
-      {
-        rounded: 'default',
-        size: 'md',
-        className: 'rounded-lg',
-      },
-      {
-        rounded: 'default',
-        size: 'sm',
-        className: 'rounded-md',
-      },
-    ],
-    defaultVariants: {
-      size: 'lg',
-      variant: 'button',
-      rounded: 'default',
-    },
-  }
-);
-
-const Tabs = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {
-    variant?: 'button' | 'underline' | 'icon';
-    size?: 'sm' | 'md' | 'lg';
-    rounded?: 'default' | 'full';
-    /**
-     * 是否为链接
-     */
-    isLink?: boolean;
-    listClassName?: string;
-    items?: TItems[];
-  }
->(
-  (
-    {
-      className,
-      listClassName,
-      variant = 'button',
-      size,
-      isLink = false,
-      rounded = 'default',
-      items,
-      ...props
-    },
-    ref
-  ) => (
-    <TabsPrimitive.Root ref={ref} className={cn(className)} {...props}>
-      <div className="w-full flex justify-center items-center">
-        <TabsPrimitive.List
-          ref={ref}
-          className={cn(
-            '',
-            tabListVariants({ variant, size, rounded }),
-            listClassName
-          )}
-          {...props}
-        >
-          {items?.map((item) => {
-            return (
-              <Tab
-                key={item.value}
-                isLink={isLink}
-                variant={variant}
-                size={size}
-                rounded={rounded}
-                {...item}
-              />
-            );
-          })}
-        </TabsPrimitive.List>
-      </div>
-      {!isLink && (
-        <div className="w-full">
-          {items?.map((item) => {
-            return (
-              <TabsContent value={item.value}>{item.children}</TabsContent>
-            );
-          })}
-        </div>
-      )}
-    </TabsPrimitive.Root>
-  )
-);
-Tabs.displayName = TabsPrimitive.Root.displayName;
-
-const Tab = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
-    variant?: 'button' | 'underline' | 'icon';
-    size?: 'sm' | 'md' | 'lg';
-    rounded?: 'default' | 'full';
-    isLink?: boolean;
-    link?: string;
-    count?: number | string;
-    label?: string;
-    icon?: React.ElementType;
-    tooltip?: {
-      description?: string;
-      open?: boolean;
-      variant?: 'default' | 'info' | 'message';
-    };
-    hasUnRead?: boolean;
-    onClickCallback?: (value: string) => void;
-  }
->(
-  (
-    {
-      className,
-      variant,
-      size,
-      isLink,
-      link,
-      count,
-      label,
-      icon,
-      tooltip,
-      hasUnRead,
-      rounded = 'default',
-      onClickCallback,
-      ...props
-    },
-    ref
-  ) => {
-    return (
-      <Tooltip triggerClassName="w-full h-full flex-1" {...tooltip}>
-        <TabsPrimitive.Trigger
-          ref={ref}
-          className={cn(
-            'tabtrigger min-w-fit',
-            tabVariants({ variant, size, rounded }),
-            className
-          )}
-          {...props}
-          onClick={(e) => {
-            e.stopPropagation();
-            onClickCallback?.(props.value);
-          }}
-        >
-          {isLink && link ? (
-            <Link
-              prefetch
-              href={link}
-              className={cn(
-                'relative h-full w-full flex justify-center items-center'
-              )}
-              onClick={(e) => () => {
-                e.preventDefault();
-              }}
-            >
-              {label}
-              {hasUnRead && <Badge className="-mt-2.5" />}
-            </Link>
-          ) : (
-            <div className="relative flex justify-center items-center">
-              {label && <Text className="text-inherit">{label}</Text>}
-              {icon && (
-                <Icon component={icon} size="md" className="text-inherit" />
-              )}
-              {count ? (
-                <Text size="sm" className="ml-1 text-Colors-Text-Subtlest">
-                  {count}
-                </Text>
-              ) : null}
-              {hasUnRead && <Badge className="-mt-2.5" />}
-            </div>
-          )}
-        </TabsPrimitive.Trigger>
-      </Tooltip>
-    );
-  }
-);
-Tab.displayName = TabsPrimitive.Trigger.displayName;
-
-const TabsContent = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
->(({ className, ...props }, ref) => {
-  return (
-    <TabsPrimitive.Content
-      ref={ref}
-      className={cn(
-        'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0',
-        className
-      )}
-      {...props}
-    />
-  );
-});
-TabsContent.displayName = TabsPrimitive.Content.displayName;
-
-export { Tabs, Tab, TabsContent };