myshell-react-lib 0.1.0

package/src/components/number-input.tsx

@@ -0,0 +1,143 @@
+import { Decimal } from 'decimal.js';
+import React from 'react';
+
+import { cn } from '@/lib/utils';
+
+import { Input } from './input';
+
+export type INumberInputProps = 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;
+  controls?: boolean;
+};
+
+enum Operation {
+  minus = 'minus',
+  plus = 'plus',
+}
+
+const NumberInput = React.forwardRef<HTMLInputElement, INumberInputProps>(
+  ({ className, type, controls, ...props }, ref) => {
+    const inputRef = React.useRef<HTMLInputElement>(null);
+    const { min, max, step = 1, onChange } = props;
+    const hideControls = controls === false;
+    const updateValue = (event: any, operation?: Operation) => {
+      event.stopPropagation();
+      event.preventDefault();
+      const inputElement = inputRef.current;
+      const decimalValue = new Decimal(inputElement?.value || 0);
+      const decimalStep = new Decimal(step);
+      const newValue = (
+        operation ? decimalValue[operation](decimalStep) : decimalValue
+      ).toNumber();
+
+      // Validate against min and max values if defined
+      if (
+        (min !== undefined && newValue < Number(min)) ||
+        (max !== undefined && newValue > Number(max))
+      ) {
+        return;
+      }
+
+      if (inputElement) {
+        if (operation) {
+          inputElement.value = newValue.toString();
+        }
+        onChange?.({
+          target: { value: Number(inputElement.value) },
+        } as unknown as React.ChangeEvent<HTMLInputElement>);
+      }
+    };
+
+    const onBlur = (e: any) => {
+      const newValue = e.target.value;
+      const inputElement = inputRef.current;
+      if (!inputElement) {
+        return;
+      }
+      if (min !== undefined && newValue < Number(min)) {
+        inputElement.value = String(min);
+      } else if (max !== undefined && newValue > Number(max)) {
+        inputElement.value = String(max);
+      } else {
+        inputElement.value = String(Number(inputElement.value));
+      }
+      onChange?.({
+        target: { value: Number(inputElement.value) },
+      } as unknown as React.ChangeEvent<HTMLInputElement>);
+    };
+
+    const handleIncrement = (e: any) => updateValue(e, Operation.plus);
+    const handleDecrement = (e: any) => updateValue(e, Operation.minus);
+
+    return (
+      <div className={cn('relative w-full', className)}>
+        <Input
+          type="number"
+          ref={inputRef}
+          {...props}
+          value={props.value}
+          onChange={updateValue}
+          className={`${hideControls ? 'text-center' : 'pr-10'}`}
+          onBlur={onBlur}
+        />
+        {hideControls ? null : (
+          <div className="absolute top-0 right-3 py-2.5 h-full flex flex-col items-center justify-center space-y-0.5">
+            <div
+              className="text-Colors-Text-Default bg-surface-accent-gray-subtler rounded-full w-[22px] h-[14px] cursor-pointer flex justify-center items-center"
+              onClick={handleIncrement}
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="20"
+                height="14"
+                viewBox="0 0 20 14"
+                fill="none"
+              >
+                <path
+                  d="M6.90169 9H13.0983C13.8493 9 14.27 8.24649 13.806 7.7324L10.7077 4.29945C10.3474 3.90018 9.65265 3.90018 9.29231 4.29945L6.19399 7.7324C5.73001 8.24649 6.15069 9 6.90169 9Z"
+                  fill="#414345"
+                />
+              </svg>
+            </div>
+            <div
+              className="text-Colors-Text-Default bg-surface-accent-gray-subtler rounded-full w-[22px] h-[14px] cursor-pointer flex justify-center items-center"
+              onClick={handleDecrement}
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="20"
+                height="14"
+                viewBox="0 0 20 14"
+                fill="none"
+              >
+                <path
+                  d="M13.0983 5L6.90169 5C6.15069 5 5.73001 5.75351 6.19399 6.2676L9.29231 9.70055C9.65265 10.0998 10.3474 10.0998 10.7077 9.70055L13.806 6.2676C14.27 5.75351 13.8493 5 13.0983 5Z"
+                  fill="#414345"
+                />
+              </svg>
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+NumberInput.displayName = 'NumberInput';
+
+export { NumberInput };

package/src/components/page-content.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import { cn } from '@/lib/utils';
+
+function PageContent({ children }: { children: React.ReactNode }) {
+  return (
+    <section
+      className={cn(
+        'page-content relative h-full flex-1 flex flex-col overflow-hidden bg-Colors-Background-Normal-Primary-Default text-Colors-Text-Default rounded-none md:rounded-2xl'
+      )}
+    >
+      {children}
+    </section>
+  );
+}
+export default PageContent;

package/src/components/popover.tsx

@@ -0,0 +1,191 @@
+/* eslint-disable react/require-default-props */
+
+'use client';
+
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+import { Description } from './typography';
+
+// const Popover = ({
+//   disabled = false,
+//   open,
+//   ...props
+// }: React.ComponentProps<typeof PopoverPrimitive.Root> & { disabled?: boolean }) => (
+//   <PopoverPrimitive.Root open={disabled ? false : open} {...props} />
+// );
+
+const PopoverRoot = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverAnchor = PopoverPrimitive.Anchor;
+const PopoverClose = PopoverPrimitive.Close;
+
+export interface PopoverContentExs {
+  /**
+   * 是否展示箭头
+   */
+  showArrow?: boolean;
+  /**
+   * 消息类型
+   */
+  variant?: 'default' | 'info' | 'message';
+  /**
+   * 气泡方向
+   */
+  side?: 'top' | 'right' | 'bottom' | 'left';
+  /**
+   * 气泡箭头位置
+   */
+  align?: 'start' | 'center' | 'end';
+  modal?: boolean;
+  container?: HTMLElement | null;
+}
+
+/**
+ * PopoverContent
+ */
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> &
+    PopoverContentExs
+>(
+  (
+    {
+      className,
+      align = 'center',
+      variant = 'default',
+      side = 'top',
+      sideOffset = 4,
+      alignOffset = 0,
+      arrowPadding = 0,
+      showArrow = true,
+      children,
+      container,
+      ...props
+    },
+    ref
+  ) => (
+    <PopoverPrimitive.Portal container={container}>
+      <PopoverPrimitive.Content
+        ref={ref}
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        arrowPadding={arrowPadding}
+        side={side}
+        forceMount
+        className={cn(
+          'relative z-[49] mx-4 w-fit max-w-72 rounded-lg border border-opaque p-3 text-left text-xs shadow-modal-default outline-none 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 [&[data-state=open]>span]:animate-none',
+          variant === 'default'
+            ? 'bg-alpha-100 text-Colors-Text-Default'
+            : variant === 'info'
+            ? 'bg-surface-accent-yellow-subtle text-Colors-Text-Warning-Bolder'
+            : 'bg-Colors-Utility-Lake-Blue-50 text-Colors-Text-Static-White',
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showArrow && (
+          <PopoverPrimitive.Arrow
+            width={16}
+            height={6}
+            className={cn(
+              'visible',
+              variant === 'default'
+                ? 'fill-alpha-100'
+                : variant === 'info'
+                ? 'fill-surface-accent-yellow-subtle'
+                : 'fill-Colors-Utility-Lake-Blue-50'
+            )}
+          />
+        )}
+      </PopoverPrimitive.Content>
+    </PopoverPrimitive.Portal>
+  )
+);
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+const Popover = ({
+  disabled = false,
+  open,
+  title,
+  content,
+  anchor,
+  children,
+  className,
+  triggerClassName,
+  hasOpenState = false,
+  isMTooltip = false,
+  modal = false,
+  openChangeCallback,
+  ...props
+}: Omit<React.ComponentProps<typeof PopoverPrimitive.Content>, 'content'> &
+  PopoverContentExs & {
+    open?: boolean;
+    disabled?: boolean;
+    triggerClassName?: string;
+    title?: string;
+    // pop内容 string或者node
+    content?: string | React.ReactNode;
+    anchor?: React.ReactNode;
+    hasOpenState?: boolean;
+    isMTooltip?: boolean;
+    openChangeCallback?: (open: boolean) => void;
+  }) => {
+  return (
+    <PopoverRoot
+      open={disabled ? false : open}
+      modal={modal}
+      onOpenChange={openChangeCallback}
+      {...props}
+    >
+      {anchor}
+      {content && (
+        <>
+          <div
+            className={cn(
+              hasOpenState && 'data-[state=open]:bg-surface-hovered',
+              triggerClassName
+            )}
+            onClick={(e) => {
+              if (isMTooltip) {
+                e.preventDefault();
+                e.stopPropagation();
+              }
+            }}
+          >
+            <PopoverTrigger asChild>
+              <div
+                className={cn(
+                  hasOpenState && 'data-[state=open]:bg-surface-hovered',
+                  triggerClassName
+                )}
+              >
+                {children}
+              </div>
+            </PopoverTrigger>
+          </div>
+          <PopoverContent
+            {...props}
+            className={cn('w-fit max-w-[324px]', className)}
+            onCloseAutoFocus={(e) => e.preventDefault()}
+          >
+            {title && (
+              <p className="mb-1">
+                <Description size="lg" weight="medium" className="text-inherit">
+                  {title}
+                </Description>
+              </p>
+            )}
+            {content}
+          </PopoverContent>
+        </>
+      )}
+      {!content && children}
+    </PopoverRoot>
+  );
+};
+
+export { Popover, PopoverAnchor, PopoverContent, PopoverRoot };

package/src/components/progress.tsx

@@ -0,0 +1,80 @@
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+
+import { clamp } from '../common/utils/common-helper';
+import { cn } from '@/lib/utils';
+
+export type ProgressProps = {
+  /**
+   * 进度条的当前值
+   */
+  value: number;
+  /**
+   * 进度条的最大值
+   */
+  max: number;
+  /**
+   * 进度条的自定义类名
+   */
+  className?: string;
+  /**
+   * 进度条指示器的自定义类名
+   */
+  indicatorClassName?: string;
+  /**
+   * 进度条的标签内容
+   */
+  label?: React.ReactNode;
+  /**
+   * 进度条的高度
+   */
+  height?: number;
+  /**
+   * 进度条的宽度
+   */
+  width?: number;
+  /**
+   * 进度条最小宽度
+   */
+  minWidth?: number;
+  /**
+   * 进度条最大宽度
+   */
+  maxWidth?: number;
+};
+
+export const Progress = ({
+  value,
+  max,
+  className,
+  indicatorClassName,
+  label,
+  height = 20,
+  width = 75,
+  minWidth = 60,
+  maxWidth = 220,
+}: ProgressProps) => {
+  const widthValue = `${clamp(
+    width + (Math.max(max, value).toString().length - 3) * 12,
+    minWidth,
+    maxWidth
+  )}px`;
+
+  return (
+    <ProgressPrimitive.Root
+      value={value}
+      max={Math.max(value, max)}
+      className={cn('relative overflow-hidden', className)}
+      style={{ height: `${height}px`, width: widthValue }}
+    >
+      <ProgressPrimitive.Indicator
+        className={cn('h-full transition-all', indicatorClassName)}
+        style={{ width: `${(value / max) * 100}%` }}
+      />
+      {label && (
+        <div className="absolute inset-0 flex items-center justify-center px-1">
+          {label}
+        </div>
+      )}
+    </ProgressPrimitive.Root>
+  );
+};

package/src/components/radio-group.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { Circle } from 'lucide-react';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn('grid gap-2', className)}
+      {...props}
+      ref={ref}
+    />
+  );
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        'aspect-square h-5 w-5 rounded-full border-[1.5px] border-pressed text-transparent aria-checked:border-[6px] aria-checked:border-Colors-Utility-Lake-Blue-40 ring-offset-cc-Focus-Rings-Brand-default focus:outline-none focus-visible:ring-2 focus-visible:ring-cc-Focus-Rings-Brand-default focus-visible:ring-offset-1 disabled:cursor-not-allowed disabled:opacity-30',
+        className
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-2 w-2 fill-current text-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+export { RadioGroup, RadioGroupItem };

package/src/components/scroll-area.tsx

@@ -0,0 +1,49 @@
+'use client';
+
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const ScrollArea = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root
+    ref={ref}
+    className={cn('relative overflow-hidden', className)}
+    type="always"
+    {...props}
+  >
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {children}
+    </ScrollAreaPrimitive.Viewport>
+    <ScrollBar />
+    <ScrollAreaPrimitive.Corner />
+  </ScrollAreaPrimitive.Root>
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
+
+const ScrollBar = React.forwardRef<
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+>(({ className, orientation = 'vertical', ...props }, ref) => (
+  <ScrollAreaPrimitive.ScrollAreaScrollbar
+    ref={ref}
+    orientation={orientation}
+    className={cn(
+      'flex touch-none select-none transition-colors',
+      orientation === 'vertical' &&
+        'h-full w-2 border-l border-l-transparent p-[1px]',
+      orientation === 'horizontal' &&
+        'h-2 flex-col border-t border-t-transparent p-[1px]',
+      className
+    )}
+    {...props}
+  >
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border-hovered hover:bg-border-pressed" />
+  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+
+export { ScrollArea, ScrollBar };

package/src/components/search-bar.tsx

@@ -0,0 +1,140 @@
+import MagnifyingGlassIcon from '@heroicons/react/24/outline/esm/MagnifyingGlassIcon';
+import XMarkIcon from '@heroicons/react/24/outline/esm/XMarkIcon';
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+import { useEffect } from 'react';
+
+import { cn } from '@/lib/utils';
+
+import { Icon } from './icon';
+import { IconButton } from './button/icon-button';
+import { Input } from './input';
+
+export type SearchInputProps = React.InputHTMLAttributes<HTMLInputElement>;
+export type SearchBarProps = {
+  /**
+   * searchBar样式覆盖
+   */
+  className?: string;
+  /**
+   * input样式覆盖
+   */
+  inputClassName?: string;
+  /*
+   * 外部传入的值
+   */
+  searchValue?: string;
+  /**
+   * 点击或键盘按下回车时触发回调函数
+   */
+  onSearchChange: (value: string) => void;
+  /**
+   * placeholder值
+   */
+  placeholder?: string;
+  /**
+   * 大小 sm(default) | md
+   *
+   * @default sm
+   */
+  size?: 'md' | 'sm' | 'xs';
+
+  /**
+   * 是否圆角
+   */
+  roundedFill?: boolean;
+  /**
+   * 值改变时触发回调函数
+   */
+  onValueChange?: (value: string) => void;
+} & Omit<SearchInputProps, 'size'>;
+
+const searchBarVariants = cva('rounded-md', {
+  variants: {
+    size: {
+      md: 'h-11',
+      sm: 'h-10',
+      xs: 'h-9',
+    },
+  },
+  defaultVariants: {
+    size: 'sm',
+  },
+});
+
+function SearchBar({
+  className,
+  inputClassName,
+  placeholder,
+  type,
+  size,
+  readOnly,
+  searchValue,
+  roundedFill,
+  onSearchChange,
+  onValueChange,
+  ...props
+}: SearchBarProps) {
+  const [value, setValue] = React.useState('');
+  useEffect(() => {
+    setValue(searchValue || '');
+  }, [searchValue]);
+
+  return (
+    <div
+      className={cn('relative w-full', searchBarVariants({ size }), className)}
+    >
+      <Icon
+        component={MagnifyingGlassIcon}
+        size="lg"
+        className="absolute top-1/2 -translate-y-1/2 left-3 z-10 text-Colors-Foreground-Subtlest cursor-pointer"
+        onClick={() => {
+          onSearchChange(value);
+        }}
+      />
+      <Input
+        type={type}
+        placeholder={placeholder}
+        rounded={roundedFill ? 'full' : 'md'}
+        size={size}
+        className={cn(
+          'relative w-full px-9 flex space-x-2 text-base shadow-none placeholder:text-Colors-Text-Subtlest',
+          {
+            'focus-visible:ring-transparent': readOnly,
+          },
+          'border-cc-Search-Bar-border-default bg-cc-Search-Bar-bg-default hover:bg-cc-Search-Bar-bg-hover focus-visible:shadow-cc-Focus-Rings-Brand-default',
+          className
+        )}
+        value={value}
+        onChange={(e) => {
+          setValue(e.target.value);
+          onValueChange?.(e.target.value);
+        }}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' && !(e.shiftKey || e.altKey)) {
+            (e.target as HTMLInputElement).blur();
+            onSearchChange(value);
+          }
+        }}
+        {...props}
+      />
+      {value && (
+        <IconButton
+          className="absolute top-1/2 -translate-y-1/2 right-1.5 z-10 rounded-full text-Colors-Foreground-Subtle"
+          onClick={() => {
+            onSearchChange('');
+            setValue('');
+            onValueChange?.('');
+          }}
+          size="sm"
+          variant="plain"
+          icon={XMarkIcon}
+        />
+      )}
+    </div>
+  );
+}
+
+SearchBar.displayName = 'SearchBar';
+
+export { SearchBar };