myshell-react-lib 0.1.4 → 0.1.6

package/src/components/number-input.tsx

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

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

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

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

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

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

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