@xipkg/button 0.0.2 → 1.0.0

package/Button.tsx

@@ -1,152 +1,48 @@
-import 'pkg.config.muidts';
-
-import { Typography, Button as MuiButton, darken, useTheme } from '@mui/material';
-import React, { FC, MouseEvent } from 'react';
-
-import { ButtonProps } from './types';
-
-import {
-  buttonVariantsColor,
-  buttonSizes,
-  getButtonPadding,
-  buttonDisabledStyle,
-  getActionButtonStyle,
-  typographyVariants,
-  clickedPadding,
-  buttonBorderStyle,
-} from './styles';
-import { ButtonSnackbar } from './ButtonSnackbar';
-import { IconContainer } from './IconContainer';
-import { Loading } from './Loading';
-
-declare module '@mui/material/Typography' {
-  export interface TypographyPropsVariantOverrides {
-    xl: true;
-    l: true;
-    m: true;
-    s: true;
-    xs: true;
-    xxs: true;
-  }
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@xipkg/utils';
+
+export const buttonVariants = cva(
+  'inline-flex items-center w-fit justify-center ring-offset-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'text-gray-0 dark:text-gray-100 bg-brand-80 hover:bg-brand-100 active:bg-brand-100 focus:bg-brand-100',
+        secondary: 'bg-gray-0 text-gray-100 border-gray-30 border-2 hover:bg-gray-5 active:bg-gray-5 focus:bg-gray-5',
+        ghost: 'text-gray-100 bg-gray-0 border-0 hover:bg-gray-5 active:bg-gray-5 focus:bg-gray-5',
+        error: 'bg-red-80 text-gray-0 hover:bg-red-100 active:bg-red-100 focus:bg-red-100',
+        success: 'bg-green-80 text-gray-0 hover:bg-green-100 active:bg-green-100 focus:bg-green-100'
+      },
+      size: {
+        l: 'h-14 px-8 rounded-xl text-[20px]',
+        m: 'h-12 px-6 rounded-lg text-[16px]',
+        s: 'h-8 px-4 rounded-md text-[14px]',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'l',
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
 }
 
-export const Button: FC<ButtonProps> = ({
-  status = 'idle',
-  size = 'medium',
-  loadingPosition = 'center',
-  variant = 'contained',
-  color = 'primary',
-  children,
-  startIcon,
-  endIcon,
-  isSnackbar,
-  snackbarText,
-  isSnackbarIconStart,
-  isSnackbarIconEnd,
-  snackbarLoadingPosition,
-  snackbarPosition,
-  ...props
-}) => {
-  const { sx, onClick, ...otherButtonProps } = props;
-
-  const theme = useTheme();
-
-  const actionButtonStyle = getActionButtonStyle(
-    variant,
-    color === 'grayscale' ? 'grayscale' : darken(theme.palette[color].dark, 0.2),
-  );
-
-  const buttonPadding = getButtonPadding(!!children, !!startIcon, !!endIcon);
-
-  const buttonBorder = variant === 'outlined' ? buttonBorderStyle[size] : 'none';
-  const buttonDisabled = status !== 'completed' ? buttonDisabledStyle[variant] : actionButtonStyle;
-
-  const onButtonClick = (e: MouseEvent<HTMLButtonElement>) => {
-    if (status === 'completed') return;
-
-    if (onClick) {
-      onClick(e);
-    }
-  };
-
-  return (
-    <MuiButton
-      onClick={onButtonClick}
-      disabled={status === 'pending' || status === 'completed'}
-      size={size}
-      disableRipple
-      disableElevation
-      sx={{
-        textTransform: 'none',
-        position: 'relative',
-        minWidth: 0,
-        border: buttonBorder,
-        '&:hover': {
-          ...actionButtonStyle,
-        },
-        '&:disabled': {
-          ...buttonDisabled,
-        },
-        '&:active': {
-          ...actionButtonStyle,
-          pt: clickedPadding[size].pt,
-          pb: clickedPadding[size].pb,
-        },
-        ...buttonSizes[size],
-        ...buttonVariantsColor[variant][color],
-        ...buttonPadding[size],
-        ...sx,
-      }}
-      {...otherButtonProps}
-    >
-      {startIcon && (
-        <IconContainer
-          Icon={startIcon}
-          size={size}
-          order={0}
-          status={status}
-          isLoadingIcon={loadingPosition !== 'center'}
-        />
-      )}
-      {endIcon && (
-        <IconContainer
-          Icon={endIcon}
-          size={size}
-          order={2}
-          status={status}
-          isLoadingIcon={loadingPosition !== 'center'}
-        />
-      )}
-
-      {children && (
-        <Typography
-          order={1}
-          variant={typographyVariants[size]}
-          sx={{
-            color: 'inherit',
-            opacity: loadingPosition === 'center' && status === 'pending' ? 0 : 1,
-          }}
-        >
-          {children}
-        </Typography>
-      )}
-
-      {status === 'pending' && loadingPosition === 'center' && (
-        <Loading top="50%" left="50%" transform="translate(-50%,-50%)" size={size} />
-      )}
-
-      {isSnackbar && status !== 'idle' && (
-        <ButtonSnackbar
-          size={size}
-          variant={variant}
-          status={status}
-          snackbarText={snackbarText}
-          isSnackbarIconStart={isSnackbarIconStart}
-          isSnackbarIconEnd={isSnackbarIconEnd}
-          snackbarLoadingPosition={snackbarLoadingPosition}
-          snackbarPosition={snackbarPosition}
-        />
-      )}
-    </MuiButton>
-  );
-};
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, children, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props}>
+        {children}
+      </Comp>
+    );
+  },
+);
+
+Button.displayName = 'Button';

package/index.ts

@@ -1,2 +1,2 @@
-export { Button } from './Button';
-export type { ButtonProps } from './types';
+export { Button, buttonVariants } from './Button';
+export type { ButtonProps } from './Button';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xipkg/button",
-  "version": "0.0.2",
+  "version": "1.0.0",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",
@@ -11,24 +11,25 @@
     "lint": "eslint \"**/*.ts*\""
   },
   "dependencies": {
-    "@emotion/react": "^11.11.1",
-    "@emotion/styled": "^11.11.0",
-    "@mui/material": "^5.14.0",
-    "@xipkg/icons": "^0.4.3",
+    "class-variance-authority": "^0.7.0",
+    "@xipkg/utils": "*",
+    "@radix-ui/react-slot": "^1.0.2",
     "react": "^18.2.0"
   },
   "devDependencies": {
     "@types/node": "^17.0.12",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
-    "@xipkg/eslint": "^0.0.2",
+    "@xipkg/eslint": "^0.0.3",
     "@xipkg/typescript": "^0.0.0",
     "eslint": "^7.32.0",
-    "typescript": "^5.1.3"
+    "typescript": "^5.1.3",
+    "tailwindcss": "^3.3.2"
   },
   "publishConfig": {
     "access": "public"
   },
   "author": "xi.effect",
-  "description": ""
+  "description": "",
+  "gitHead": "0ee562e7c7723699c85daf61b493d6a57b7c1f08"
 }

package/ButtonSnackbar.tsx

@@ -1,104 +0,0 @@
-import { Typography, Stack } from '@mui/material';
-import React, { FC } from 'react';
-
-import {
-  buttonSizes,
-  typographyVariants,
-  buttonDisabledStyle,
-  getButtonPadding,
-  getSnackbarCurrentPosition,
-  buttonBorderStyle,
-} from './styles';
-import { LoadingPosition, Size, SnackbarPosition, Status, Variant } from './types';
-import { IconContainer } from './IconContainer';
-import { Loading } from './Loading';
-
-export const ButtonSnackbar: FC<ButtonSnackbarProps> = ({
-  size,
-  variant,
-  status,
-  snackbarText,
-  isSnackbarIconStart,
-  isSnackbarIconEnd,
-  snackbarLoadingPosition = 'center',
-  snackbarPosition = 'right',
-}) => {
-  const snackbarRef = React.useRef<HTMLDivElement | null>(null);
-  const [snackbarSize, setSnackbarSize] = React.useState(0);
-  const snackbarCurrentPosition = getSnackbarCurrentPosition(snackbarSize, snackbarPosition);
-
-  const buttonBorder = variant === 'outlined' ? buttonBorderStyle[size] : 'none';
-
-  const snackbarPadding = getButtonPadding(
-    !!snackbarText,
-    !!isSnackbarIconStart,
-    !!isSnackbarIconEnd,
-  );
-
-  React.useLayoutEffect(() => {
-    if (!snackbarRef?.current) return;
-    if (snackbarPosition === 'left' || snackbarPosition === 'right') {
-      setSnackbarSize(snackbarRef.current.clientWidth);
-    }
-    if (snackbarPosition === 'top' || snackbarPosition === 'bottom') {
-      setSnackbarSize(snackbarRef.current.clientHeight);
-    }
-  }, [snackbarPosition, size, snackbarText]);
-
-  return (
-    <Stack
-      ref={snackbarRef}
-      direction="row"
-      alignItems="center"
-      sx={{
-        position: 'absolute',
-        border: buttonBorder,
-        ...snackbarCurrentPosition,
-        ...buttonSizes[size],
-        ...snackbarPadding[size],
-        ...buttonDisabledStyle[variant],
-      }}
-    >
-      {status === 'pending' && snackbarLoadingPosition === 'center' && (
-        <Loading top="50%" left="50%" transform="translate(-50%,-50%)" size={size} />
-      )}
-      {isSnackbarIconStart && (
-        <IconContainer
-          size={size}
-          order={0}
-          status={status}
-          isLoadingIcon={snackbarLoadingPosition !== 'center'}
-        />
-      )}
-      {isSnackbarIconEnd && (
-        <IconContainer
-          size={size}
-          order={2}
-          status={status}
-          isLoadingIcon={snackbarLoadingPosition !== 'center'}
-        />
-      )}
-
-      {snackbarText && (
-        <Typography
-          color="inherit"
-          sx={{ opacity: snackbarLoadingPosition === 'center' && status === 'pending' ? 0 : 1 }}
-          variant={typographyVariants[size]}
-        >
-          {snackbarText}
-        </Typography>
-      )}
-    </Stack>
-  );
-};
-
-type ButtonSnackbarProps = {
-  size: Size;
-  variant: Variant;
-  status: Status;
-  snackbarText?: string;
-  isSnackbarIconStart?: boolean;
-  isSnackbarIconEnd?: boolean;
-  snackbarLoadingPosition?: LoadingPosition;
-  snackbarPosition?: SnackbarPosition;
-};

package/IconContainer.tsx

@@ -1,52 +0,0 @@
-import { Stack } from '@mui/material';
-import { Check } from 'pkg.icons';
-import { FC } from 'react';
-import { Loading } from './Loading';
-import { iconSizes } from './styles';
-import { Size, Status } from './types';
-
-export const IconContainer: FC<IconComponentProps> = ({
-  order,
-  Icon,
-  size,
-  status,
-  isLoadingIcon,
-}) => (
-  <Stack order={order} sx={{ position: 'relative', ...iconSizes[size] }}>
-    {!!Icon && (
-      <Icon
-        sx={{
-          opacity: status === 'idle' ? 1 : 0,
-          color: 'inherit',
-          ...iconSizes[size],
-        }}
-      />
-    )}
-    <Check
-      sx={{
-        opacity: status === 'completed' ? 1 : 0,
-        position: 'absolute',
-        top: '50%',
-        transform: 'translateY(-50%)',
-        color: 'inherit',
-        ...iconSizes[size],
-      }}
-    />
-    {isLoadingIcon && (
-      <Loading
-        size={size}
-        top="50%"
-        transform="translateY(-50%)"
-        opacity={status === 'pending' ? 1 : 0}
-      />
-    )}
-  </Stack>
-);
-
-type IconComponentProps = {
-  Icon?: any;
-  order: number;
-  size: Size;
-  status: Status;
-  isLoadingIcon: boolean;
-};

package/Loading.tsx

@@ -1,18 +0,0 @@
-import { FC } from 'react';
-import { CircularProgress, Stack, SxProps } from '@mui/material';
-import { iconSizes, spinnerSizes } from './styles';
-import { Size } from './types';
-
-export const Loading: FC<LoadingProps> = ({ size, ...props }) => (
-  <Stack
-    sx={{
-      position: 'absolute',
-      ...iconSizes[size],
-      ...props,
-    }}
-  >
-    <CircularProgress size={spinnerSizes[size]} color="inherit" />
-  </Stack>
-);
-
-type LoadingProps = { size: Size } & SxProps;

package/styles.ts

@@ -1,191 +0,0 @@
-import { SnackbarPosition, Variant } from './types';
-
-export const buttonSizes = {
-  large: {
-    height: '56px',
-    borderRadius: '12px',
-    gap: '16px',
-  },
-  medium: {
-    height: '48px',
-    borderRadius: '8px',
-    gap: '8px',
-  },
-  small: {
-    height: '32px',
-    borderRadius: '6px',
-    gap: '6px',
-  },
-};
-
-export const buttonVariantsColor = {
-  contained: {
-    primary: {
-      bgcolor: 'brand.80',
-      color: 'petersburg.0',
-    },
-    success: {
-      bgcolor: 'ekaterinburg.80',
-      color: 'petersburg.0',
-    },
-    error: {
-      bgcolor: 'moscow.80',
-      color: 'petersburg.0',
-    },
-    grayscale: {
-      bgcolor: 'petersburg.40',
-      color: 'petersburg.100',
-    },
-  },
-  outlined: {
-    primary: {
-      borderColor: 'brand.80',
-      color: 'brand.80',
-    },
-    success: {
-      borderColor: 'ekaterinburg.80',
-      color: 'ekaterinburg.80',
-    },
-    error: {
-      borderColor: 'moscow.80',
-      color: 'moscow.80',
-    },
-    grayscale: {
-      color: 'petersburg.100',
-      borderColor: 'petersburg.40',
-    },
-  },
-  text: {
-    primary: { color: 'brand.80' },
-    success: { color: 'ekaterinburg.80' },
-    error: { color: 'moscow.80' },
-    grayscale: { color: 'petersburg.100' },
-  },
-};
-
-export const buttonDisabledStyle = {
-  contained: {
-    backgroundColor: 'petersburg.10',
-    color: 'petersburg.40',
-  },
-  outlined: {
-    border: '1px solid',
-    borderColor: 'petersburg.10',
-    color: 'petersburg.40',
-  },
-  text: {
-    color: 'petersburg.40',
-  },
-};
-
-export const buttonBorderStyle = {
-  large: '2px solid',
-  medium: '2px solid',
-  small: '1px solid',
-};
-
-export const clickedPadding = {
-  large: { pt: '14px', pb: '12px' },
-  medium: { pt: '13px', pb: '11px' },
-  small: { pt: '9px', pb: '7px' },
-};
-
-export const typographyVariants = {
-  large: 'l' as 'l',
-  medium: 'm' as 'm',
-  small: 's' as 's',
-};
-
-export const iconSizes = {
-  large: {
-    width: '32px',
-    height: '32px',
-  },
-  medium: {
-    width: '24px',
-    height: '24px',
-  },
-  small: {
-    width: '16px',
-    height: '16px',
-  },
-};
-
-export const spinnerSizes = {
-  large: 32,
-  medium: 24,
-  small: 16,
-};
-
-export const getButtonPadding = (isText: boolean, startIcon: boolean, endIcon: boolean) => {
-  const isTextIconButton = isText && (startIcon || endIcon);
-  const isIconButton = !isText && (startIcon || endIcon);
-
-  const style = {
-    large: {
-      padding: '13px 32px',
-    },
-    medium: {
-      padding: '12px 24px',
-    },
-    small: {
-      padding: '8px 16px',
-    },
-  };
-
-  if (isTextIconButton) {
-    if (startIcon) {
-      style.large.padding = '13px 24px 13px 12px';
-      style.medium.padding = '12px 16px 12px 12px';
-      style.small.padding = '8px 12px 8px 8px';
-      return style;
-    }
-    if (endIcon) {
-      style.large.padding = '13px 12px 13px 24px';
-      style.medium.padding = '12px 12px 12px 16px';
-      style.small.padding = '8px 8px 8px 12px';
-      return style;
-    }
-  }
-
-  if (isIconButton) {
-    style.large.padding = '13px 12px';
-    style.medium.padding = '12px 12px';
-    style.small.padding = '8px 8px';
-    return style;
-  }
-
-  return style;
-};
-
-export const getSnackbarCurrentPosition = (snackbarSize: number, position: SnackbarPosition) => {
-  switch (position) {
-    case 'top':
-      return { top: `-${snackbarSize + 8}px`, right: '50%', transform: 'translateX(50%)' };
-    case 'bottom':
-      return { bottom: `-${snackbarSize + 8}px`, right: '50%', transform: 'translateX(50%)' };
-    case 'left':
-      return { left: `-${snackbarSize + 16}px`, top: 0 };
-    default: {
-      return { right: `-${snackbarSize + 16}px` };
-    }
-  }
-};
-
-export const getActionButtonStyle = (variant: Variant, color: string) => {
-  if (color === 'grayscale') {
-    return { bgcolor: 'petersburg.5', color: 'petersburg.100' };
-  }
-
-  switch (variant) {
-    case 'contained':
-      return { bgcolor: color, color: 'petersburg.0' };
-    case 'outlined':
-      return { bgcolor: 'petersburg.5', borderColor: color, color };
-    default:
-      return {
-        bgcolor: 'petersburg.5',
-        color,
-      };
-  }
-};

package/types.ts

@@ -1,38 +0,0 @@
-import { ButtonProps as MuiButtonProps } from '@mui/material';
-
-export type Status = 'idle' | 'pending' | 'completed';
-export type Size = 'small' | 'medium' | 'large';
-export type Variant = 'contained' | 'outlined' | 'text';
-export type Color = 'primary' | 'success' | 'error' | 'grayscale';
-export type LoadingPosition = 'icon' | 'center';
-export type SnackbarPosition = 'left' | 'right' | 'top' | 'bottom';
-
-export type ButtonProps = {
-  // button status: pending = spinner appears, completed button disabled with active color
-  // completed and startIcon or endIcon or only icon without text appears check
-  status?: Status;
-  size?: Size; // button size
-  // button spinner position: icon above icon and center
-  loadingPosition?: LoadingPosition;
-  // button variant
-  variant?: Variant;
-  // button color
-  color?: Color;
-  // start or end button icon if icon without text, icon position will be center
-  startIcon?: any;
-  endIcon?: any;
-  // whether to display snackbar
-  isSnackbar?: boolean;
-  // snackbar text
-  snackbarText?: string;
-  // start or end snackbar icon if icon without text, icon position will be center
-  isSnackbarIconStart?: boolean;
-  isSnackbarIconEnd?: boolean;
-  // snackbar spinner position: icon above icon and center
-  snackbarLoadingPosition?: LoadingPosition;
-  // snackbar position: default right
-  snackbarPosition?: SnackbarPosition;
-  // styles
-  sx?: any;
-  // you can also pass default mui button attributes
-} & Omit<MuiButtonProps, 'startIcon' | 'endIcon' | 'color'>;