myshell-react-lib 0.1.0

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

@@ -0,0 +1,307 @@
+/* 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/button';
+import { Icon, IconComponent } from './icon';
+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 | IconComponent | React.ElementType;
+  onClick?: () => void;
+};
+type IActions = {
+  label: string;
+  onClick?: () => void;
+  icon?: HeroIcon | LucideIcon | IconComponent | React.ElementType;
+  variant?: 'primary' | 'secondary' | 'static' | 'link' | 'plain';
+  color?: 'default' | 'brand' | 'error' | 'chat';
+};
+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;
+};
+
+function SecondaryNavigationBar({
+  showSearchBar = true,
+  searchValue,
+  searchPlaceholder,
+  title,
+  border,
+  backUrl,
+  showClear,
+  clearText,
+  icons,
+  actions,
+  children,
+  hasBackground = true,
+  avatar,
+  onSearchChange,
+  onClear,
+}: 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]);
+  const currentClearText = clearText || 'Clear Filters';
+
+  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-Colors-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 && (
+            <div className="flex justify-start items-center">
+              <Link href={backUrl} className="flex justify-center items-center">
+                <IconButton
+                  variant={!hasBackground ? 'primary' : 'plain'}
+                  color={!hasBackground ? 'gray' : 'brand'}
+                  size="md"
+                  icon={ArrowLeftIcon}
+                />
+              </Link>
+              {!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 ? 'primary' : 'plain'}
+                        color={!hasBackground ? 'gray' : '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={currentClearText}
+                      size="md"
+                      variant="primary"
+                      color="default"
+                      className="hidden md:flex relative text-sm blue-30 text-blue-30 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" />
+                      </div>
+                      <span className="hidden md:block">
+                        {currentClearText}
+                      </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={currentClearText}
+                      size="md"
+                      variant="primary"
+                      color="default"
+                      onClick={onClear}
+                    >
+                      <div className="relative">
+                        <FilterIcon />
+                      </div>
+                    </IconButton>
+                  )}
+                </>
+              )}
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export { SecondaryNavigationBar };

package/src/components/select.tsx

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

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