myshell-react-lib 0.1.0

package/src/components/swiper/index.tsx

@@ -0,0 +1,319 @@
+/* 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

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

@@ -0,0 +1,325 @@
+'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 };