x-ui-design 0.1.2 → 0.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "x-ui-design",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "license": "ISC",
   "author": "Gabriel Boyajyan",
   "scripts": {

package/src/app/globals.css

@@ -10,6 +10,7 @@
     --xui-text-color-light: rgba(0, 0, 0, 0.5);
 
     --xui-error-color: #ff4d4f;
+    --xui-error-color-light: #ff6668;
     --xui-success-color: #52c41a;
 
     --xui-background-color: #ffffff;

package/src/app/page.tsx

@@ -1,18 +1,150 @@
 'use client'
 
-import Upload from "@/xUiDesign/components/Upload";
+import Button from "@/xUiDesign/components/Button"
+import { Button as AntButton, Flex } from "antd"
 
 export default function Home() {
     return (
-        <>
-            <Upload
-                action="https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload"
-                listType="picture"
-                multiple
-                onChange={(e) => console.log(e)}
-            >
-                <button>Select File</button>
-            </Upload>
-        </>
+        <div style={{ display: 'flex', gap: '100px' }}>
+            <div>
+                <h2>xUiDesign Button</h2>
+                <Flex gap="small" align="flex-start" vertical>
+                    <Flex gap="small">
+                        <Button type="primary">Primary</Button>
+                        <Button type="primary" disabled>
+                            Primary(disabled)
+                        </Button>
+                    </Flex>
+                    <Flex gap="small">
+                        <Button>Default</Button>
+                        <Button disabled>Default(disabled)</Button>
+                    </Flex>
+                    <Flex gap="small">
+                        <Button type="dashed">Dashed</Button>
+                        <Button type="dashed" disabled>
+                            Dashed(disabled)
+                        </Button>
+                    </Flex>
+                    <Flex gap="small">
+                        <Button type="text">Text</Button>
+                        <Button type="text" disabled>
+                            Text(disabled)
+                        </Button>
+                    </Flex>
+                    <Flex gap="small">
+                        <Button href="https://vran.am" type="link">Link</Button>
+                        <Button href="https://vran.am" type="link" disabled>
+                            Link(disabled)
+                        </Button>
+                    </Flex>
+                    <Flex gap="small">
+                        <Button type="primary" href="https://ant.design/index-cn">
+                            Href Primary
+                        </Button>
+                        <Button type="primary" href="https://ant.design/index-cn" disabled>
+                            Href Primary(disabled)
+                        </Button>
+                    </Flex>
+                    <Flex gap="small">
+                        <Button danger>Danger Default</Button>
+                        <Button danger disabled>
+                            Danger Default(disabled)
+                        </Button>
+                    </Flex>
+                    <Flex gap="small">
+                        <Button danger type="text">
+                            Danger Text
+                        </Button>
+                        <Button danger type="text" disabled>
+                            Danger Text(disabled)
+                        </Button>
+                    </Flex>
+                    <Flex gap="small">
+                        <Button href="https://vran.am" type="link" danger>
+                            Danger Link
+                        </Button>
+                        <Button href="https://vran.am" type="link" danger disabled>
+                            Danger Link(disabled)
+                        </Button>
+                    </Flex>
+                    <Flex gap="small" className="site-button-ghost-wrapper">
+                        <Button ghost>Ghost</Button>
+                        <Button ghost disabled>
+                            Ghost(disabled)
+                        </Button>
+                    </Flex>
+                </Flex>
+            </div>
+
+            <div>
+                <h2>Ant Design Button</h2>
+                <Flex gap="small" align="flex-start" vertical>
+                    <Flex gap="small">
+                        <AntButton type="primary">Primary</AntButton>
+                        <AntButton type="primary" disabled>
+                            Primary(disabled)
+                        </AntButton>
+                    </Flex>
+                    <Flex gap="small">
+                        <AntButton>Default</AntButton>
+                        <AntButton disabled>Default(disabled)</AntButton>
+                    </Flex>
+                    <Flex gap="small">
+                        <AntButton type="dashed">Dashed</AntButton>
+                        <AntButton type="dashed" disabled>
+                            Dashed(disabled)
+                        </AntButton>
+                    </Flex>
+                    <Flex gap="small">
+                        <AntButton type="text">Text</AntButton>
+                        <AntButton type="text" disabled>
+                            Text(disabled)
+                        </AntButton>
+                    </Flex>
+                    <Flex gap="small">
+                        <AntButton href="https://vran.am" type="link">Link</AntButton>
+                        <AntButton href="https://vran.am" type="link" disabled>
+                            Link(disabled)
+                        </AntButton>
+                    </Flex>
+                    <Flex gap="small">
+                        <AntButton type="primary" href="https://ant.design/index-cn">
+                            Href Primary
+                        </AntButton>
+                        <AntButton type="primary" href="https://ant.design/index-cn" disabled>
+                            Href Primary(disabled)
+                        </AntButton>
+                    </Flex>
+                    <Flex gap="small">
+                        <AntButton danger>Danger Default</AntButton>
+                        <AntButton danger disabled>
+                            Danger Default(disabled)
+                        </AntButton>
+                    </Flex>
+                    <Flex gap="small">
+                        <AntButton danger type="text">
+                            Danger Text
+                        </AntButton>
+                        <AntButton danger type="text" disabled>
+                            Danger Text(disabled)
+                        </AntButton>
+                    </Flex>
+                    <Flex gap="small">
+                        <AntButton href="https://vran.am" type="link" danger>
+                            Danger Link
+                        </AntButton>
+                        <AntButton href="https://vran.am" type="link" danger disabled>
+                            Danger Link(disabled)
+                        </AntButton>
+                    </Flex>
+                    <Flex gap="small" className="site-Antbutton-ghost-wrapper">
+                        <AntButton ghost>Ghost</AntButton>
+                        <AntButton ghost disabled>
+                            Ghost(disabled)
+                        </AntButton>
+                    </Flex>
+                </Flex>
+            </div>
+        </div>
     )
 }

package/src/xUiDesign/components/Button/index.tsx

@@ -0,0 +1,114 @@
+import { ReactElement, useEffect, useState } from 'react';
+import { clsx } from '@/xUiDesign/helpers';
+import { ButtonProps } from '@/xUiDesign/types/button';
+import { prefixClsButton } from '@/xUiDesign/utils';
+import './style.css';
+
+export const ButtonComponent = ({
+  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 = innerLoading
+    ? (typeof loading === 'object' && loading.icon) || (
+        <span className={`${prefixCls}-spinner`} />
+      )
+    : 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>
+  );
+};

package/src/xUiDesign/components/Button/style.css

@@ -0,0 +1,197 @@
+.xUi-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 400;
+    white-space: nowrap;
+    vertical-align: middle;
+    user-select: none;
+    border: 1px solid transparent;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    border-radius: 6px;
+    line-height: 1.5715;
+}
+
+.xUi-button-content {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.xUi-button-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 0;
+    margin-right: 0.5em;
+}
+
+.xUi-button-icon:last-child {
+    margin-right: 0;
+    margin-left: 0.5em;
+}
+
+.xUi-button-spinner {
+    width: 1em;
+    height: 1em;
+    border: 1px solid transparent;
+    border-top-color: var(--xui-text-color);
+    border-radius: 50%;
+    animation: xUi-spin 1s linear infinite;
+}
+
+@keyframes xUi-spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+.xUi-button-size-small {
+    padding: 4px 12px;
+    font-size: 12px;
+    height: 24px;
+}
+
+.xUi-button-size-middle {
+    padding: 0 16px;
+    font-size: 14px;
+    height: 32px;
+}
+
+.xUi-button-size-large {
+    padding: 8px 20px;
+    font-size: 16px;
+    height: 40px;
+}
+
+.xUi-button-circle {
+    padding: 0;
+    border-radius: 50%;
+    justify-content: center;
+}
+
+.xUi-button-circle.xUi-button-size-small {
+    width: 24px;
+    height: 24px;
+}
+
+.xUi-button-circle.xUi-button-size-large {
+    width: 40px;
+    height: 40px;
+}
+
+.xUi-button-round {
+    border-radius: 9999px;
+}
+
+.xUi-button-default {
+    background-color: #fff;
+    border-color: var(--xui-border-color);
+    color: rgba(0, 0, 0, 0.85);
+}
+
+.xUi-button-default:hover {
+    border-color: var(--xui-primary-color);
+    color: var(--xui-primary-color);
+}
+
+.xUi-button-primary {
+    background-color: var(--xui-primary-color);
+    border-color: var(--xui-primary-color);
+    color: #fff;
+}
+
+.xUi-button-primary:hover {
+    background-color: var(--xui-primary-color-light);
+    border-color: var(--xui-primary-color-light);
+    color: #fff;
+}
+
+.xUi-button-dashed {
+    border-style: dashed;
+    background-color: #fff;
+    color: rgba(0, 0, 0, 0.85);
+    border-color: var(--xui-border-color);
+}
+
+.xUi-button-dashed:hover {
+    border-color: var(--xui-primary-color);
+    color: var(--xui-primary-color);
+}
+
+.xUi-button-text {
+    background-color: transparent;
+    border-color: transparent !important;
+    color: rgba(0, 0, 0, 0.88);
+}
+
+.xUi-button-text:hover {
+    color: rgba(0, 0, 0, 0.88);
+    border-color: transparent;
+    background-color: rgba(0, 0, 0, 0.04);
+}
+
+.xUi-button-link {
+    background-color: transparent;
+    border-color: transparent !important;
+    color: var(--xui-primary-color);
+}
+
+.xUi-button-link:hover {
+    border-color: transparent;
+    color: var(--xui-primary-color-light);
+}
+
+.xUi-button-outlined {
+    background-color: transparent;
+    border-color: var(--xui-border-color);
+    color: #fff;
+}
+
+.xUi-button-filled {
+    background-color: transparent;
+    color: var(--xui-text-color);
+    border-color: var(--xui-border-color);
+}
+
+.xUi-button-danger {
+    background-color: transparent;
+    border-color: var(--xui-error-color);
+    color: var(--xui-error-color);
+}
+
+.xUi-button-danger:hover {
+    color: var(--xui-error-color-light);
+    border-color: var(--xui-error-color-light);
+}
+
+.xUi-button-ghost {
+    opacity: 0;
+}
+
+.xUi-button-ghost:hover {
+    opacity: 1;
+}
+
+.xUi-button-block {
+    display: flex;
+    width: 100%;
+}
+
+.xUi-button-disabled,
+.xUi-button-loading {
+    cursor: not-allowed;
+    opacity: 0.5;
+    color: var(--xui-text-color);
+    border-color: var(--xui-border-color);
+    background-color: var(--xui-color-disabled);
+    pointer-events: none;
+}
+
+.xUi-button-loading {
+    background-color: transparent
+}

package/src/xUiDesign/components/Checkbox/index.tsx

@@ -1,4 +1,4 @@
-"use client"
+'use client';
 
 import {
   ForwardedRef,
@@ -8,103 +8,108 @@ import {
   useEffect,
   useState
 } from 'react';
+import { clsx } from '@/xUiDesign/helpers';
 import { SyntheticBaseEvent } from '@/xUiDesign/types';
 import { CheckboxProps } from '@/xUiDesign/types/checkbox';
 import { prefixClsCheckbox } from '@/xUiDesign/utils';
 import './style.css';
-import { clsx } from '@/xUiDesign/helpers';
 
-const Checkbox = forwardRef<HTMLDivElement, CheckboxProps>(({
-  prefixCls = prefixClsCheckbox,
-  className = '',
-  defaultChecked = false,
-  checked,
-  style,
-  disabled = false,
-  onChange,
-  onClick,
-  onMouseEnter,
-  onMouseLeave,
-  onKeyPress,
-  onKeyDown,
-  tabIndex,
-  name,
-  children,
-  id,
-  autoFocus,
-  type = 'checkbox',
-  value = false,
-  required = false,
-  noStyle
-}, ref: ForwardedRef<HTMLDivElement>): ReactElement => {
-  const isChecked = checked !== undefined ? checked : defaultChecked || value;
-  const [internalChecked, setInternalChecked] = useState(isChecked);
+const Checkbox = forwardRef<HTMLDivElement, CheckboxProps>(
+  (
+    {
+      prefixCls = prefixClsCheckbox,
+      className = '',
+      defaultChecked = false,
+      checked,
+      style,
+      disabled = false,
+      onChange,
+      onClick,
+      onMouseEnter,
+      onMouseLeave,
+      onKeyPress,
+      onKeyDown,
+      tabIndex,
+      name,
+      children,
+      id,
+      autoFocus,
+      type = 'checkbox',
+      value = false,
+      required = false,
+      noStyle
+    },
+    ref: ForwardedRef<HTMLDivElement>
+  ): ReactElement => {
+    const isChecked = checked !== undefined ? checked : defaultChecked || value;
+    const [internalChecked, setInternalChecked] = useState(isChecked);
 
-  const handleClick = (
-    e: MouseEvent<HTMLInputElement> & SyntheticBaseEvent
-  ) => {
-    e.stopPropagation();
+    const handleClick = (
+      e: MouseEvent<HTMLInputElement> & SyntheticBaseEvent
+    ) => {
+      e.stopPropagation();
 
-    if (disabled) {
-      return;
-    }
+      if (disabled) {
+        return;
+      }
 
-    setInternalChecked(!internalChecked);
-    e.target.value = !internalChecked;
+      setInternalChecked(!internalChecked);
+      e.target.value = !internalChecked;
 
-    onClick?.(e);
-    onChange?.(e);
-  };
+      onClick?.(e);
+      onChange?.(e);
+    };
 
-  useEffect(() => {
-    if (checked !== undefined) {
-      setInternalChecked(checked);
-    }
-  }, [checked]);
+    useEffect(() => {
+      if (checked !== undefined) {
+        setInternalChecked(checked);
+      }
+    }, [checked]);
 
-  return (
-    <div className={`${prefixCls}-wrapper`}>
-    <div
-      ref={ref}
-      style={style}
-      onClick={handleClick}
-      className={clsx([
-        prefixCls,
-        className,
-        {
-          'noStyle': noStyle,
-          [`${prefixCls}-disabled`]: disabled,
-          [`${prefixCls}-checked`]: internalChecked
-        }
-      ])}
-    >
-      <input
-        id={id}
-        type={type}
-        name={name}
-        disabled={disabled}
-        tabIndex={tabIndex}
-        required={required}
-        autoFocus={autoFocus}
-        onKeyDown={onKeyDown}
-        onKeyPress={onKeyPress}
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-      />
+    return (
+      <div className={`${prefixCls}-wrapper`}>
+        <div
+          ref={ref}
+          style={style}
+          onClick={handleClick}
+          className={clsx([
+            prefixCls,
+            className,
+            {
+              noStyle: noStyle,
+              [`${prefixCls}-disabled`]: disabled,
+              [`${prefixCls}-checked`]: internalChecked
+            }
+          ])}
+        >
+          <input
+            id={id}
+            type={type}
+            name={name}
+            disabled={disabled}
+            tabIndex={tabIndex}
+            required={required}
+            autoFocus={autoFocus}
+            onKeyDown={onKeyDown}
+            onKeyPress={onKeyPress}
+            onMouseEnter={onMouseEnter}
+            onMouseLeave={onMouseLeave}
+          />
 
-      <span className={`${prefixCls}-box`}>
-        <span
-          className={`${prefixCls}-check`}
-          style={{ opacity: Number(internalChecked) }}
-        />
-      </span>
-      </div>
+          <span className={`${prefixCls}-box`}>
+            <span
+              className={`${prefixCls}-check`}
+              style={{ opacity: Number(internalChecked) }}
+            />
+          </span>
+        </div>
 
-      {children && <span className={`${prefixCls}-label`}>{children}</span>}
-    </div>
-  );
-});
+        {children && <span className={`${prefixCls}-label`}>{children}</span>}
+      </div>
+    );
+  }
+);
 
-Checkbox.displayName = "Checkbox"
+Checkbox.displayName = 'Checkbox';
 
 export { Checkbox };