myshell-react-lib 0.1.5 → 0.1.7

package/src/components/secondary-navigation-bar.tsx

@@ -1,328 +0,0 @@
-/* eslint-disable react/jsx-no-useless-fragment */
-import { ArrowLeftIcon } from '@heroicons/react/24/outline';
-import { LucideIcon } from 'lucide-react';
-import { useEffect, useRef, useState } from 'react';
-import { useMedia } from 'react-use';
-
-import { HeroIcon } from '@/common/constants/types/common';
-import { cn } from '@/lib/utils';
-
-import { Avatar } from './avatar';
-import { Button } from './button';
-import { IconButton } from './button/icon-button';
-import { Link } from './link';
-import { SearchBar } from './search-bar';
-import { Separator } from './separator';
-import { Display, Text } from './typography';
-import FilterIcon from './icons/outline/FilterIcon';
-
-type IIcons = {
-  icon: HeroIcon | LucideIcon | React.ElementType;
-  onClick?: () => void;
-};
-type IActions = {
-  label: string;
-  onClick?: () => void;
-  icon?: HeroIcon | LucideIcon | React.ElementType;
-  variant?:
-    | 'primary'
-    | 'secondary'
-    | 'tertiary'
-    | 'static'
-    | 'link'
-    | 'plain'
-    | 'solid';
-  color?: 'default' | 'brand' | 'error';
-};
-type ISecondaryNavigationBar = {
-  /**
-   * 是否展示背景
-   * boolean
-   *
-   * @default true
-   */
-  hasBackground?: boolean;
-  /**
-   * 右侧自定义内容
-   * ReactNode
-   *
-   */
-  children?: React.ReactNode;
-  /**
-   * 导航栏title
-   * string
-   */
-  title?: string;
-  /**
-   * 是否展示搜索框
-   * boolean
-   *
-   * @default false
-   */
-  showSearchBar?: boolean;
-  /**
-   * 搜索框值
-   * string
-   */
-  searchValue?: string;
-  /**
-   * 搜索框占位值
-   * string
-   */
-  searchPlaceholder?: string;
-  /**
-   * 是否显示底部border
-   * boolean
-   */
-  border?: boolean;
-  /**
-   * 返回链接，有配置则显示返回icon
-   * string
-   */
-  backUrl?: string;
-  /**
-   * 是否展示清除按钮
-   * boolean
-   *
-   * @default false
-   */
-  showClear?: boolean;
-  /**
-   * 清除按钮文本
-   * string
-   */
-  clearText?: string;
-  /**
-   * icon按钮配置
-   * IIcons
-   */
-  icons?: IIcons[];
-  /**
-   * 操作按钮配置
-   * IActions
-   */
-  actions?: IActions[];
-  /**
-   * 头像配置
-   * {
-   *  logo: string;
-   *  name?: string;
-   * }
-   */
-  avatar?: {
-    logo: string;
-    name?: string;
-  };
-  onSearchChange?: (value: string) => void;
-  onClear?: () => void;
-  onBack?: () => void;
-};
-
-function SecondaryNavigationBar({
-  showSearchBar = true,
-  searchValue,
-  searchPlaceholder,
-  title,
-  border,
-  backUrl,
-  showClear,
-  clearText,
-  icons,
-  actions,
-  children,
-  hasBackground = true,
-  avatar,
-  onSearchChange,
-  onClear,
-  onBack,
-}: ISecondaryNavigationBar) {
-  const isMobile = useMedia('(max-width: 768px)');
-  const navbarRef = useRef<HTMLDivElement>(null);
-  const [showBackground, setShowBackground] = useState(hasBackground);
-
-  useEffect(() => {
-    if (hasBackground) {
-      setShowBackground(true);
-
-      return;
-    }
-
-    const handleScroll = () => {
-      if (navbarRef.current) {
-        const { height } = navbarRef.current.getBoundingClientRect();
-        setShowBackground(window.scrollY > height);
-      }
-    };
-
-    window.addEventListener('scroll', handleScroll);
-
-    return () => window.removeEventListener('scroll', handleScroll);
-  }, [hasBackground]);
-
-  return (
-    <div
-      ref={navbarRef}
-      className={cn(
-        'w-full flex flex-col md:flex-row justify-center items-center px-4 md:px-6',
-        !isMobile && border && 'border-b border-default',
-        showBackground && 'bg-Colors-Background-Normal-Primary-Default'
-      )}
-    >
-      <div
-        className={cn(
-          'relative w-full flex justify-between items-center h-14 md:h-15'
-        )}
-      >
-        <div
-          className={cn('flex items-center', avatar?.logo && 'min-w-[76px]')}
-        >
-          {(backUrl || onBack) && (
-            <div className="flex justify-start items-center">
-              {backUrl ? (
-                <Link
-                  href={backUrl}
-                  className="flex justify-center items-center"
-                >
-                  <IconButton
-                    variant={!hasBackground ? 'primary' : 'plain'}
-                    color={!hasBackground ? 'gray' : 'brand'}
-                    size="md"
-                    icon={ArrowLeftIcon}
-                  />
-                </Link>
-              ) : (
-                <IconButton
-                  variant={!hasBackground ? 'primary' : 'plain'}
-                  color={!hasBackground ? 'gray' : 'brand'}
-                  size="md"
-                  icon={ArrowLeftIcon}
-                  onClick={onBack}
-                />
-              )}
-
-              {!isMobile && title && (
-                <Separator orientation="vertical" className="h-5 ml-1.5 mr-3" />
-              )}
-            </div>
-          )}
-
-          {title &&
-            (!showSearchBar || !isMobile) &&
-            (!avatar?.logo || !isMobile) && (
-              <div className="flex-1 flex-shrink-0 absolute w-full md:relative md:w-auto flex items-center justify-center md:justify-start">
-                <Display
-                  size={isMobile ? 'xs' : 'sm'}
-                  className={cn(
-                    'max-w-[calc(100%-168px)] md:max-w-fit flex-1 flex-shrink-0 absolute w-full md:relative md:w-auto text-center md:text-left line-clamp-1'
-                  )}
-                >
-                  {title}
-                </Display>
-              </div>
-            )}
-        </div>
-
-        {avatar?.logo && !showSearchBar && (
-          <div className="flex-shrink-0 flex relative px-3 justify-center items-center space-x-1.5">
-            <Avatar size="sm" src={avatar.logo} />
-            {avatar.name && !isMobile && (
-              <Text size="lg" weight="medium">
-                {avatar.name}
-              </Text>
-            )}
-          </div>
-        )}
-
-        <div
-          className={cn(
-            'w-fit flex md:w-auto justify-end',
-            !avatar?.logo && 'flex-1'
-          )}
-        >
-          {children ? (
-            <div className="w-fit">{children}</div>
-          ) : (
-            <>
-              {icons || actions ? (
-                <div
-                  className={cn(
-                    'flex justify-end items-center',
-                    icons && 'space-x-1 min-w-[76px]',
-                    actions && 'space-x-3'
-                  )}
-                >
-                  {icons &&
-                    icons.map((icon, index) => (
-                      <IconButton
-                        key={index}
-                        variant={!hasBackground ? 'tertiary' : 'plain'}
-                        color={!hasBackground ? 'default' : 'brand'}
-                        size="md"
-                        icon={icon.icon}
-                        onClick={icon.onClick}
-                      />
-                    ))}
-                  {actions &&
-                    actions.map((action, index) => (
-                      <Button key={index} size="md" {...action}>
-                        {action.label}
-                      </Button>
-                    ))}
-                </div>
-              ) : (
-                <>
-                  {showClear && !isMobile && (
-                    <Button
-                      aria-label={clearText || 'Clear Filters'}
-                      size="md"
-                      variant="secondary"
-                      color="default"
-                      className="hidden md:flex relative text-sm font-medium ml-2 mr-3 px-4 justify-center items-center"
-                      onClick={onClear}
-                    >
-                      <div className="relative mr-1.5">
-                        <FilterIcon className="w-5 h-5 fill-cc-Button-Secondary-fg-default" />
-                      </div>
-                      <span className="hidden md:block">
-                        {clearText || 'Clear Filters'}
-                      </span>
-                    </Button>
-                  )}
-                  {showSearchBar && (
-                    <div className="relative w-full md:w-60">
-                      <SearchBar
-                        color="gray"
-                        size="xs"
-                        searchValue={searchValue}
-                        placeholder={searchPlaceholder || 'Search'}
-                        onSearchChange={(value) => {
-                          onSearchChange && onSearchChange(value);
-                        }}
-                      />
-                    </div>
-                  )}
-                  {showClear && isMobile && (
-                    <IconButton
-                      className="flex-shrink-0 flex relative text-sm font-medium px-4 justify-center items-center ml-3"
-                      aria-label={clearText || 'Clear Filters'}
-                      size="md"
-                      variant="primary"
-                      color="default"
-                      onClick={onClear}
-                    >
-                      <div className="relative">
-                        <FilterIcon />
-                      </div>
-                    </IconButton>
-                  )}
-                </>
-              )}
-            </>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export { SecondaryNavigationBar };

package/src/components/select.tsx

@@ -1,273 +0,0 @@
-/* eslint-disable @typescript-eslint/no-use-before-define */
-/* eslint-disable react/display-name */
-
-'use client';
-
-import { CheckIcon } from '@heroicons/react/24/outline';
-import * as SelectPrimitive from '@radix-ui/react-select';
-import { ChevronDown, ChevronUp } from 'lucide-react';
-import * as React from 'react';
-
-import { cn } from '@/lib/utils';
-
-export interface ISelectProps extends SelectPrimitive.SelectProps {
-  options?: Array<{
-    value: string;
-    label: string;
-    icon?: React.ReactNode | React.ElementType | string;
-    disabled?: boolean;
-    critical?: boolean;
-  }>;
-  placeholder?: React.ReactNode;
-  triggerClassName?: string;
-}
-
-const Select = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Root>,
-  ISelectProps
->(({ children, placeholder, options, triggerClassName, ...props }, ref) => {
-  // 获取选中选项的图标
-  const icon = options?.find((item) => item.value === props.value)?.icon;
-
-  return (
-    <SelectPrimitive.Root {...props}>
-      {Array.isArray(options) && options.length ? (
-        <>
-          <SelectTrigger className={cn(triggerClassName)}>
-            <div className="flex items-center">
-              <SelectIcon icon={icon} />
-              <SelectValue placeholder={placeholder} />
-            </div>
-          </SelectTrigger>
-          <SelectContent>
-            {options.map((item, i) => (
-              <SelectItem key={`${item.value}_${i}`} {...item}>
-                {item.label}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </>
-      ) : (
-        children
-      )}
-    </SelectPrimitive.Root>
-  );
-});
-
-const SelectGroup = SelectPrimitive.Group;
-
-const SelectValue = SelectPrimitive.Value;
-
-const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      'flex h-10 w-full items-center justify-between rounded-md border border-Colors-Border-Default bg-Colors-Background-Neutral-On-Surface-Default text-Colors-Text-Default text-sm p-3 ring-offset-cc-Focus-Rings-Brand-default focus:shadow-cc-Focus-Rings-Brand-default placeholder:text-Colors-Text-Subtlest focus:outline-none focus:ring-0 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-30 [&>span]:line-clamp-1 [&>.select-chevron]:aria-expanded:rotate-180',
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <SelectPrimitive.Icon asChild>
-      <ChevronDown className="select-chevron h-5 w-5 text-Colors-Foreground-Subtle duration-200" />
-    </SelectPrimitive.Icon>
-  </SelectPrimitive.Trigger>
-));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-
-const SelectScrollUpButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollUpButton
-    ref={ref}
-    className={cn(
-      'flex cursor-default items-center justify-center py-1',
-      className
-    )}
-    {...props}
-  >
-    <ChevronUp className="h-4 w-4" />
-  </SelectPrimitive.ScrollUpButton>
-));
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-
-const SelectScrollDownButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollDownButton
-    ref={ref}
-    className={cn(
-      'flex cursor-default items-center justify-center py-1',
-      className
-    )}
-    {...props}
-  >
-    <ChevronDown className="h-4 w-4" />
-  </SelectPrimitive.ScrollDownButton>
-));
-SelectScrollDownButton.displayName =
-  SelectPrimitive.ScrollDownButton.displayName;
-
-const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = 'popper', ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-      ref={ref}
-      className={cn(
-        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md	border border-opaque bg-Colors-Background-Normal-Primary-Default text-Colors-Text-Default shadow-cc-Shadows-Modal-default data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-        position === 'popper' &&
-          'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
-        className
-      )}
-      position={position}
-      {...props}
-    >
-      <SelectPrimitive.Viewport
-        className={cn(
-          'p-1.5 space-y-1.5',
-          position === 'popper' &&
-            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
-        )}
-      >
-        {children}
-      </SelectPrimitive.Viewport>
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-));
-SelectContent.displayName = SelectPrimitive.Content.displayName;
-
-const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label
-    ref={ref}
-    className={cn(
-      'py-1 px-3 text-sm font-medium text-Colors-Text-Subtler',
-      className
-    )}
-    {...props}
-  />
-));
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
-
-interface ISelectIconProps {
-  icon?: React.ReactNode | React.ElementType | string;
-  critical?: boolean;
-}
-
-function SelectIcon(props: ISelectIconProps) {
-  const { icon, critical } = props;
-
-  if (!icon) {
-    return null;
-  }
-
-  return (
-    <SelectPrimitive.Icon>
-      {typeof icon === 'string' ? (
-        // 如果是字符串URL，作为背景图片显示
-        <div
-          className={cn(
-            'aspect-[20/20] w-5 h-5 relative bg-cover bg-no-repeat rounded-md overflow-hidden mr-1.5',
-            critical && 'text-Colors-Text-Critical-Default'
-          )}
-          style={{ backgroundImage: `url('${icon}')` }}
-        />
-      ) : React.isValidElement(icon) ? (
-        // 如果是React元素，直接渲染
-        <div
-          className={cn(
-            'mr-1.5 w-5 h-5 text-Colors-Foreground-Default',
-            critical && 'text-Colors-Foreground-Critical-Default'
-          )}
-        >
-          {icon}
-        </div>
-      ) : (
-        // 如果是组件类型，创建元素
-        <div
-          className={cn(
-            'mr-1.5 w-5 h-5 text-Colors-Foreground-Default',
-            critical && 'text-Colors-Foreground-Critical-Default'
-          )}
-        >
-          {React.createElement(icon as React.ElementType, {
-            className: cn(
-              'w-5 h-5 text-Colors-Foreground-Default',
-              critical && 'text-Colors-Foreground-Critical-Default'
-            ),
-          })}
-        </div>
-      )}
-    </SelectPrimitive.Icon>
-  );
-}
-
-SelectIcon.displayName = SelectPrimitive.Icon.displayName;
-
-interface ISelectItemProps
-  extends SelectPrimitive.SelectItemProps,
-    ISelectIconProps {}
-
-const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  ISelectItemProps
->(({ className, children, icon, critical, ...props }, ref) => (
-  <SelectPrimitive.Item
-    ref={ref}
-    className={cn(
-      'relative flex justify-between w-full text-sm cursor-pointer select-none items-center rounded-md py-1 px-1.5 outline-none',
-      'bg-Colors-Background-Normal-Secondary-Alt hover:bg-Colors-Background-Normal-Primary-Hover focus:bg-Colors-Background-Neutral-Primary-Default data-[disabled]:opacity-30 data-[disabled]:cursor-not-allowed',
-      critical
-        ? 'text-Colors-Text-Critical-Default'
-        : 'focus:text-Colors-Text-Default',
-      className
-    )}
-    {...props}
-  >
-    <span className="flex items-center grow">
-      <SelectIcon icon={icon} critical={critical} />
-      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-    </span>
-    <span className="flex h-4 w-4 items-center justify-center">
-      <SelectPrimitive.ItemIndicator>
-        <CheckIcon className="h-4 w-4 text-Colors-Foreground-Subtle stroke-[2px]" />
-      </SelectPrimitive.ItemIndicator>
-    </span>
-  </SelectPrimitive.Item>
-));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
-
-const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator
-    ref={ref}
-    className={cn('-mx-1 my-1 h-px bg-border-default', className)}
-    {...props}
-  />
-));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
-
-export {
-  Select,
-  SelectGroup,
-  SelectIcon,
-  SelectValue,
-  SelectTrigger,
-  SelectContent,
-  SelectLabel,
-  SelectItem,
-  SelectSeparator,
-  SelectScrollUpButton,
-  SelectScrollDownButton,
-};

package/src/components/separator.tsx

@@ -1,31 +0,0 @@
-'use client';
-
-import * as SeparatorPrimitive from '@radix-ui/react-separator';
-import * as React from 'react';
-
-import { cn } from '@/lib/utils';
-
-const Separator = React.forwardRef<
-  React.ElementRef<typeof SeparatorPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(
-  (
-    { className, orientation = 'horizontal', decorative = true, ...props },
-    ref
-  ) => (
-    <SeparatorPrimitive.Root
-      ref={ref}
-      decorative={decorative}
-      orientation={orientation}
-      className={cn(
-        'shrink-0 border-Colors-Alpha-Black-8',
-        orientation === 'horizontal' ? 'w-full border-b' : 'h-full border-r',
-        className
-      )}
-      {...props}
-    />
-  )
-);
-Separator.displayName = SeparatorPrimitive.Root.displayName;
-
-export { Separator };