x-ui-design 0.1.78 → 0.1.79

package/lib/components/Button/Button.tsx

@@ -1,7 +1,104 @@
+import { ReactElement } from 'react';
+import { clsx } from '../../helpers';
 import { ButtonProps } from '../../types/button';
-import { ButtonClient } from './ButtonClient';
+import { prefixClsButton } from '../../utils';
+import './style.css';
 
-export const Button = (props: ButtonProps) => {
-  // Server component can handle initial props processing if needed
-  return <ButtonClient {...props} />;
-};
+const Button = ({
+  type = 'default',
+  variant = 'solid',
+  color = 'default',
+  shape = 'default',
+  size = 'middle',
+  htmlType = 'button',
+  className,
+  rootClassName,
+  classNames: customClassNames = {},
+  styles = {},
+  prefixCls = prefixClsButton,
+  icon,
+  iconPosition = 'start',
+  loading = false,
+  disabled = false,
+  ghost = false,
+  danger = false,
+  block = false,
+  children,
+  href,
+  ...restProps
+}: ButtonProps): ReactElement => {
+  const innerLoading = typeof loading === 'object' ? !!loading : Boolean(loading);
+
+  const classes = clsx(
+    prefixCls,
+    rootClassName,
+    `${prefixCls}-${type}`,
+    `${prefixCls}-${variant}`,
+    `${prefixCls}-${color}`,
+    `${prefixCls}-${shape}`,
+    `${prefixCls}-size-${size}`,
+    {
+      [`${prefixCls}-block`]: block,
+      [`${prefixCls}-ghost`]: ghost,
+      [`${prefixCls}-danger`]: danger,
+      [`${prefixCls}-loading`]: innerLoading,
+      [`${prefixCls}-disabled`]: disabled
+    },
+    className
+  );
+
+  const iconNode = innerLoading
+    ? (typeof loading === 'object' && loading.icon) || (
+        <span className={`${prefixCls}-spinner`}></span>
+      )
+    : icon;
+
+  const content = (
+    <>
+      {iconNode && iconPosition === 'start' && (
+        <span
+          className={clsx(`${prefixCls}-icon`, customClassNames.icon)}
+          style={styles.icon}
+        >
+          {iconNode}
+        </span>
+      )}
+      <span className={`${prefixCls}-content`}>{children}</span>
+      {iconNode && iconPosition === 'end' && (
+        <span
+          className={clsx(`${prefixCls}-icon`, customClassNames.icon)}
+          style={styles.icon}
+        >
+          {iconNode}
+        </span>
+      )}
+    </>
+  );
+
+  const mergedDisabled = disabled || innerLoading;
+
+  if (href) {
+    return (
+      <a
+        className={classes}
+        href={mergedDisabled ? undefined : href}
+        aria-disabled={mergedDisabled}
+      >
+        {content}
+      </a>
+    );
+  }
+
+  return (
+    <button
+      type={htmlType}
+      className={classes}
+      disabled={mergedDisabled}
+      {...restProps}
+    >
+      {content}
+    </button>
+  );
+};
+
+export default Button;

package/lib/components/Button/index.ts

@@ -1 +1 @@
-export { Button } from './Button'
+export { default as Button } from './Button'

package/lib/index.ts

@@ -27,7 +27,7 @@ import './styles/global.css';
 // export { default as SkeletonButton } from "./components/Skeleton/Button/Button";
 
 // export { default as Empty } from "./components/Empty/Empty";
-export { Button } from "./components/Button/Button";
+export { default as Button } from "./components/Button/Button";
 // export { default as Upload } from "./components/Upload/Upload";
 // export { default as Checkbox } from "./components/Checkbox/Checkbox";
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x-ui-design",
-  "version": "0.1.78",
+  "version": "0.1.79",
   "license": "ISC",
   "author": "Gabriel Boyajyan",
   "main": "dist/index.js",

package/lib/components/Button/ButtonClient.tsx

@@ -1,119 +0,0 @@
-'use client'
-
-import { ReactElement, useEffect, useMemo, useState } from 'react';
-import { clsx } from '../../helpers';
-import { ButtonProps } from '../../types/button';
-import { prefixClsButton } from '../../utils';
-import './style.css';
-
-export const ButtonClient = ({
-  type = 'default',
-  variant = 'solid',
-  color = 'default',
-  shape = 'default',
-  size = 'middle',
-  htmlType = 'button',
-  className,
-  rootClassName,
-  classNames: customClassNames = {},
-  styles = {},
-  prefixCls = prefixClsButton,
-  icon,
-  iconPosition = 'start',
-  loading = false,
-  disabled = false,
-  ghost = false,
-  danger = false,
-  block = false,
-  children,
-  href,
-  ...restProps
-}: ButtonProps): ReactElement => {
-  const [innerLoading, setInnerLoading] = useState(false);
-
-  useEffect(() => {
-    if (typeof loading === 'boolean') {
-      setInnerLoading(loading);
-    } else if (typeof loading === 'object' && loading.delay) {
-      const timeout = setTimeout(() => setInnerLoading(true), loading.delay);
-      return () => clearTimeout(timeout);
-    } else {
-      setInnerLoading(!!loading);
-    }
-  }, [loading]);
-
-  const classes = clsx(
-    prefixCls,
-    rootClassName,
-    `${prefixCls}-${type}`,
-    `${prefixCls}-${variant}`,
-    `${prefixCls}-${color}`,
-    `${prefixCls}-${shape}`,
-    `${prefixCls}-size-${size}`,
-    {
-      [`${prefixCls}-block`]: block,
-      [`${prefixCls}-ghost`]: ghost,
-      [`${prefixCls}-danger`]: danger,
-      [`${prefixCls}-loading`]: innerLoading,
-      [`${prefixCls}-disabled`]: disabled
-    },
-    className
-  );
-
-  const iconNode = useMemo(() => {
-    return innerLoading
-      ? (typeof loading === 'object' && loading.icon) || (
-          <span className={`${prefixCls}-spinner`}></span>
-        )
-      : icon;
-  }, [icon, innerLoading, loading, prefixCls]);
-
-  const content = useMemo(() => {
-    return (
-      <>
-        {iconNode && iconPosition === 'start' && (
-          <span
-            className={clsx(`${prefixCls}-icon`, customClassNames.icon)}
-            style={styles.icon}
-          >
-            {iconNode}
-          </span>
-        )}
-        <span className={`${prefixCls}-content`}>{children}</span>
-        {iconNode && iconPosition === 'end' && (
-          <span
-            className={clsx(`${prefixCls}-icon`, customClassNames.icon)}
-            style={styles.icon}
-          >
-            {iconNode}
-          </span>
-        )}
-      </>
-    );
-  }, [children, customClassNames.icon, iconNode, iconPosition, prefixCls, styles.icon]);
-
-  const mergedDisabled = disabled || innerLoading;
-
-  if (href) {
-    return (
-      <a
-        className={classes}
-        href={mergedDisabled ? undefined : href}
-        aria-disabled={mergedDisabled}
-      >
-        {content}
-      </a>
-    );
-  }
-
-  return (
-    <button
-      type={htmlType}
-      className={classes}
-      disabled={mergedDisabled}
-      {...restProps}
-    >
-      {content}
-    </button>
-  );
-};