@xipkg/button 0.0.0 → 0.0.3

package/.turbo/turbo-build.log

@@ -0,0 +1,49 @@
+
+> @xipkg/button@0.0.2 build
+> tsup index.ts --format cjs --dts
+
+CLI Building entry: index.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v6.7.0
+CLI Target: es6
+CJS Build start
+CJS dist\index.js 2.50 KB
+CJS ⚡️ Build success in 37ms
+DTS Build start
+Button.tsx(17,11): error TS2769: No overload matches this call.
+  Overload 1 of 3, '(props: { href: string; } & { children?: ReactNode; classes?: Partial<ButtonClasses> | undefined; color?: "primary" | "success" | "error" | "inherit" | "secondary" | "info" | "warning" | undefined; ... 9 more ...; variant?: "contained" | ... 2 more ... | undefined; } & Omit<...> & CommonProps & Omit<...>): Element', gave the following error.
+    Type '{ children: ReactNode; status?: Status | undefined; size?: "small" | "medium" | "large" | undefined; loadingPosition?: LoadingPosition | undefined; ... 302 more ...; component?: ElementType<...> | undefined; }' is not assignable to type '{ href: string; }'.
+      Types of property 'href' are incompatible.
+        Type 'string | undefined' is not assignable to type 'string'.
+          Type 'undefined' is not assignable to type 'string'.
+  Overload 2 of 3, '(props: { component: ElementType<any>; } & { children?: ReactNode; classes?: Partial<ButtonClasses> | undefined; color?: "primary" | ... 6 more ... | undefined; ... 9 more ...; variant?: "contained" | ... 2 more ... | undefined; } & Omit<...> & CommonProps & Omit<...>): Element | null', gave the following error.
+    Type '{ children: ReactNode; status?: Status | undefined; size?: "small" | "medium" | "large" | undefined; loadingPosition?: LoadingPosition | undefined; ... 302 more ...; component?: ElementType<...> | undefined; }' is not assignable to type '{ component: ElementType<any>; }'.
+      Types of property 'component' are incompatible.
+        Type 'ElementType<any> | undefined' is not assignable to type 'ElementType<any>'.
+          Type 'undefined' is not assignable to type 'ElementType<any>'.
+  Overload 3 of 3, '(props: DefaultComponentProps<ExtendButtonBaseTypeMap<ButtonTypeMap<{}, "button">>>): Element | null', gave the following error.
+    Type '{ children: ReactNode; status?: Status | undefined; size?: "small" | "medium" | "large" | undefined; loadingPosition?: LoadingPosition | undefined; ... 302 more ...; component?: ElementType<...> | undefined; }' is not assignable to type '{ children?: ReactNode; classes?: Partial<ButtonClasses> | undefined; color?: "primary" | "success" | "error" | "inherit" | "secondary" | "info" | "warning" | undefined; ... 9 more ...; variant?: "contained" | ... 2 more ... | undefined; }'.
+      Types of property 'color' are incompatible.
+        Type 'Color | undefined' is not assignable to type '"primary" | "success" | "error" | "inherit" | "secondary" | "info" | "warning" | undefined'.
+          Type '"gray"' is not assignable to type '"primary" | "success" | "error" | "inherit" | "secondary" | "info" | "warning" | undefined'.
+
+Error: error occured in dts build
+    at Worker.<anonymous> (C:\Users\igorb\OneDrive\Рабочий стол\xi.kit\node_modules\tsup\dist\index.js:2281:26)
+    at Worker.emit (node:events:513:28)
+    at MessagePort.<anonymous> (node:internal/worker:243:53)
+    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:737:20)
+    at exports.emitMessage (node:internal/per_context/messageport:23:28)
+DTS Build error
+RollupError: Failed to compile. Check the logs above.
+    at error (C:\Users\igorb\OneDrive\Рабочий стол\xi.kit\node_modules\rollup\dist\shared\rollup.js:349:30)
+    at Object.error (C:\Users\igorb\OneDrive\Рабочий стол\xi.kit\node_modules\rollup\dist\shared\rollup.js:1716:20)
+    at Object.error (C:\Users\igorb\OneDrive\Рабочий стол\xi.kit\node_modules\rollup\dist\shared\rollup.js:25501:42)
+    at generateDtsFromTs (C:\Users\igorb\OneDrive\Рабочий стол\xi.kit\node_modules\tsup\dist\rollup.js:7498:22)
+    at C:\Users\igorb\OneDrive\Рабочий стол\xi.kit\node_modules\tsup\dist\rollup.js:7505:59
+    at _nullishCoalesce (C:\Users\igorb\OneDrive\Рабочий стол\xi.kit\node_modules\tsup\dist\rollup.js:1:198)
+    at Object.transform (C:\Users\igorb\OneDrive\Рабочий стол\xi.kit\node_modules\tsup\dist\rollup.js:7505:18)
+    at C:\Users\igorb\OneDrive\Рабочий стол\xi.kit\node_modules\rollup\dist\shared\rollup.js:1909:40
+npm ERR! Lifecycle script `build` failed with error: 
+npm ERR! Error: command failed 
+npm ERR!   in workspace: @xipkg/button@0.0.2 
+npm ERR!   at location: C:\Users\igorb\OneDrive\Рабочий стол\xi.kit\packages\pkg.button 

package/Button.tsx

@@ -1,8 +1,18 @@
-import { ComponentProps } from 'react';
+import { Button as MuiButton } from '@mui/material';
 
-export type ButtonProps = {} & ComponentProps<'button'>;
+import { ButtonProps } from './types';
 
-export const Button = ({ type = 'button' }: ButtonProps) => {
-  console.log('Button');
-  return <button type={type}>Button</button>;
+declare module '@mui/material/Typography' {
+  export interface TypographyPropsVariantOverrides {
+    xl: true;
+    l: true;
+    m: true;
+    s: true;
+    xs: true;
+    xxs: true;
+  }
+}
+
+export const Button = ({ children, ...props }: ButtonProps) => {
+  return <MuiButton {...props}>{children}</MuiButton>;
 };

package/ButtonSnackbar.tsx

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

@@ -0,0 +1,52 @@
+import { Stack } from '@mui/material';
+import { Check } from '@xipkg/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

@@ -0,0 +1,18 @@
+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/dist/index.d.ts

@@ -0,0 +1,39 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ButtonProps as ButtonProps$1 } from '@mui/material';
+
+type Status = 'idle' | 'pending' | 'completed';
+type Size = 'small' | 'medium' | 'large';
+type Variant = 'contained' | 'outlined' | 'text';
+type Color = 'primary' | 'success' | 'error' | 'gray';
+type LoadingPosition = 'icon' | 'center';
+type SnackbarPosition = 'left' | 'right' | 'top' | 'bottom';
+type ButtonProps = {
+    status?: Status;
+    size?: Size;
+    loadingPosition?: LoadingPosition;
+    variant?: Variant;
+    color?: Color;
+    startIcon?: any;
+    endIcon?: any;
+    isSnackbar?: boolean;
+    snackbarText?: string;
+    isSnackbarIconStart?: boolean;
+    isSnackbarIconEnd?: boolean;
+    snackbarLoadingPosition?: LoadingPosition;
+    snackbarPosition?: SnackbarPosition;
+    sx?: any;
+} & Omit<ButtonProps$1, 'startIcon' | 'endIcon' | 'color'>;
+
+declare module '@mui/material/Typography' {
+    interface TypographyPropsVariantOverrides {
+        xl: true;
+        l: true;
+        m: true;
+        s: true;
+        xs: true;
+        xxs: true;
+    }
+}
+declare const Button: ({ children, ...props }: ButtonProps) => react_jsx_runtime.JSX.Element;
+
+export { Button, ButtonProps };

package/dist/index.js

@@ -0,0 +1,66 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// index.ts
+var pkg_exports = {};
+__export(pkg_exports, {
+  Button: () => Button
+});
+module.exports = __toCommonJS(pkg_exports);
+
+// Button.tsx
+var import_material = require("@mui/material");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Button = (_a) => {
+  var _b = _a, { children } = _b, props = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.Button, __spreadProps(__spreadValues({}, props), { children }));
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button
+});

package/index.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xipkg/button",
-  "version": "0.0.0",
+  "version": "0.0.3",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "license": "MIT",
@@ -11,18 +11,18 @@
     "lint": "eslint \"**/*.ts*\""
   },
   "dependencies": {
-    "@xipkg/icons": "^0.3.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@mui/material": "^5.14.0",
+    "@xipkg/icons": "^0.4.4",
     "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.3",
     "@xipkg/typescript": "^0.0.0",
-    "@xipkg/eslint": "^0.0.0",
     "eslint": "^7.32.0",
     "typescript": "^5.1.3"
   },
@@ -30,5 +30,6 @@
     "access": "public"
   },
   "author": "xi.effect",
-  "description": ""
+  "description": "",
+  "gitHead": "0ee562e7c7723699c85daf61b493d6a57b7c1f08"
 }

package/styles.ts

@@ -0,0 +1,191 @@
+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: 'var(--xi-brand-80)',
+      color: 'var(--xi-gray-0)',
+    },
+    success: {
+      bgcolor: 'var(--xi-green-80)',
+      color: 'var(--xi-gray-0)',
+    },
+    error: {
+      bgcolor: 'var(--xi-red-80)',
+      color: 'var(--xi-gray-0)',
+    },
+    gray: {
+      bgcolor: 'var(--xi-gray-40)',
+      color: 'var(--xi-gray-100)',
+    },
+  },
+  outlined: {
+    primary: {
+      borderColor: 'var(--xi-brand-80)',
+      color: 'var(--xi-brand-80)',
+    },
+    success: {
+      borderColor: 'var(--xi-green-80)',
+      color: 'var(--xi-green-80)',
+    },
+    error: {
+      borderColor: 'var(--xi-red-80)',
+      color: 'var(--xi-red-80)',
+    },
+    gray: {
+      color: 'var(--xi-gray-100)',
+      borderColor: 'var(--xi-gray-40)',
+    },
+  },
+  text: {
+    primary: { color: 'var(--xi-brand-80)' },
+    success: { color: 'var(--xi-green-80)' },
+    error: { color: 'var(--xi-red-80)' },
+    gray: { color: 'var(--xi-gray-100)' },
+  },
+};
+
+export const buttonDisabledStyle = {
+  contained: {
+    backgroundColor: 'var(--xi-gray-10)',
+    color: 'var(--xi-gray-40)',
+  },
+  outlined: {
+    border: '1px solid',
+    borderColor: 'var(--xi-gray-10)',
+    color: 'var(--xi-gray-40)',
+  },
+  text: {
+    color: 'var(--xi-gray-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,
+};
+
+const style = {
+  large: {
+    padding: '13px 32px',
+  },
+  medium: {
+    padding: '12px 24px',
+  },
+  small: {
+    padding: '8px 16px',
+  },
+};
+
+export const getButtonPadding = (isText: boolean, startIcon: boolean, endIcon: boolean) => {
+  const isTextIconButton = isText && (startIcon || endIcon);
+  const isIconButton = !isText && (startIcon || endIcon);
+
+  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 === 'gray') {
+    return { bgcolor: 'var(--xi-gray-5)', color: 'var(--xi-gray-100)' };
+  }
+
+  switch (variant) {
+    case 'contained':
+      return { bgcolor: color, color: 'var(--xi-gray-0)' };
+    case 'outlined':
+      return { bgcolor: 'var(--xi-gray-5)', borderColor: color, color };
+    default:
+      return {
+        bgcolor: 'var(--xi-gray-5)',
+        color,
+      };
+  }
+};

package/types.ts

@@ -0,0 +1,38 @@
+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' | 'gray';
+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'>;