x-ui-design 1.0.31-gamma.1 → 1.0.31

package/eslint.config.mjs

@@ -0,0 +1,16 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+];
+
+export default eslintConfig;

package/lib/components/Button/Button.tsx

@@ -0,0 +1,136 @@
+import React, { ReactElement, useEffect, useMemo, useState } from 'react';
+import { clsx } from '../../helpers';
+import { ButtonProps } from '../../types/button';
+import { prefixClsButton, prefixClsButtonV3 } from '../../utils';
+import './style.css';
+
+const ButtonComponent = ({
+  type = 'default',
+  variant = 'solid',
+  color = 'default',
+  shape = 'default',
+  size = 'middle',
+  htmlType = 'button',
+  className,
+  rootClassName,
+  classNames: customClassNames = {},
+  styles = {},
+  prefixCls = prefixClsButton,
+  prefixClsV3 = prefixClsButtonV3,
+  icon,
+  iconPosition = 'start',
+  loading = false,
+  disabled = false,
+  ghost = false,
+  danger = false,
+  block = false,
+  children,
+  href,
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  __injected,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  child,
+  ...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 = useMemo(() => {
+    return clsx([...new Set([
+      prefixCls,
+      prefixClsV3,
+      rootClassName,
+      `${prefixCls}-${type}`,
+      `${prefixCls}-variant-${variant}`,
+      `${prefixCls}-color-${color}`,
+      `${prefixCls}-shape-${shape}`,
+      `${prefixCls}-size-${size}`,
+      `${prefixClsV3}-${type}`,
+      `${prefixClsV3}-variant-${variant}`,
+      `${prefixClsV3}-color-${color}`,
+      `${prefixClsV3}-shape-${shape}`,
+      `${prefixClsV3}-size-${size}`,
+      {
+        [`${prefixCls}-block`]: block,
+        [`${prefixCls}-ghost`]: ghost,
+        [`${prefixCls}-danger`]: danger,
+        [`${prefixCls}-loading`]: innerLoading,
+        [`${prefixCls}-disabled`]: disabled,
+        [`${prefixClsV3}-block`]: block,
+        [`${prefixClsV3}-ghost`]: ghost,
+        [`${prefixClsV3}-danger`]: danger,
+        [`${prefixClsV3}-loading`]: innerLoading,
+        [`${prefixClsV3}-disabled`]: disabled
+      },
+      className
+    ])])
+  }, [block, className, color, danger, disabled, ghost, innerLoading, prefixCls, prefixClsV3, rootClassName, shape, size, type, variant]);
+
+  const iconNode = innerLoading
+    ? (typeof loading === 'object' && loading.icon) || (
+      <span className={`${prefixCls}-spinner ${prefixClsV3}-spinner`} />
+    )
+    : icon;
+
+  const content = (
+    <>
+      {iconNode && iconPosition === 'start' && (
+        <span
+          className={clsx(`${prefixCls}-icon ${prefixClsV3}-icon`, customClassNames.icon)}
+          style={styles.icon}
+        >
+          {iconNode}
+        </span>
+      )}
+      <span className={`${prefixCls}-content ${prefixClsV3}-content`}>{children}</span>
+      {iconNode && iconPosition === 'end' && (
+        <span
+          className={clsx(`${prefixCls}-icon ${prefixClsV3}-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 ButtonComponent

package/lib/components/Button/index.ts

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

package/lib/components/Button/style.css

@@ -0,0 +1,197 @@
+html .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;
+}
+
+html .xUi-button-content {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+html .xUi-button-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 0;
+    margin-right: 0.5em;
+}
+
+html .xUi-button-icon:last-child {
+    margin-right: 0;
+    margin-left: 0.5em;
+}
+
+html .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);
+    }
+}
+
+html .xUi-button-size-small {
+    padding: 4px 12px;
+    font-size: 12px;
+    height: 24px;
+}
+
+html .xUi-button-size-middle {
+    padding: 0 16px;
+    font-size: 14px;
+    height: 32px;
+}
+
+html .xUi-button-size-large {
+    padding: 8px 20px;
+    font-size: 16px;
+    height: 44px;
+}
+
+html .xUi-button-shape-circle {
+    padding: 0;
+    border-radius: 50%;
+    justify-content: center;
+}
+
+html .xUi-button-shape-circle .xUi-button-size-small {
+    width: 24px;
+    height: 24px;
+}
+
+html .xUi-button-shape-circle .xUi-button-size-large {
+    width: 44px;
+    height: 44px;
+}
+
+html .xUi-button-shape-round {
+    border-radius: 9999px;
+}
+
+html .xUi-button-default {
+    background-color: #fff;
+    border-color: var(--xui-border-color);
+    color: rgba(0, 0, 0, 0.85);
+}
+
+html .xUi-button-default:hover {
+    border-color: var(--xui-primary-color);
+    color: var(--xui-primary-color);
+}
+
+html .xUi-button-primary {
+    background-color: var(--xui-primary-color);
+    border-color: var(--xui-primary-color);
+    color: #fff;
+}
+
+html .xUi-button-primary:hover {
+    background-color: var(--xui-primary-color-hover);
+    border-color: var(--xui-primary-color-hover);
+    color: #fff;
+}
+
+html .xUi-button-variant-dashed {
+    border-style: dashed;
+    background-color: #fff;
+    color: rgba(0, 0, 0, 0.85);
+    border-color: var(--xui-border-color);
+}
+
+html .xUi-button-variant-dashed:hover {
+    border-color: var(--xui-primary-color);
+    color: var(--xui-primary-color);
+}
+
+html .xUi-button-variant-text {
+    background-color: transparent;
+    border-color: transparent !important;
+    color: rgba(0, 0, 0, 0.88);
+}
+
+html .xUi-button-variant-text:hover {
+    color: rgba(0, 0, 0, 0.88);
+    border-color: transparent;
+    background-color: rgba(0, 0, 0, 0.04);
+}
+
+html .xUi-button-variant-link {
+    background-color: transparent;
+    border-color: transparent !important;
+    color: var(--xui-primary-color);
+}
+
+html .xUi-button-variant-link:hover {
+    border-color: transparent;
+    color: var(--xui-primary-color-light);
+}
+
+html .xUi-button-variant-outlined {
+    background-color: transparent;
+    border-color: var(--xui-border-color);
+    color: #fff;
+}
+
+html .xUi-button-variant-filled {
+    background-color: transparent;
+    color: var(--xui-text-color);
+    border-color: var(--xui-border-color);
+}
+
+html .xUi-button-danger {
+    background-color: transparent;
+    border-color: var(--xui-error-color);
+    color: var(--xui-error-color);
+}
+
+html .xUi-button-danger:hover {
+    color: var(--xui-error-color-light);
+    border-color: var(--xui-error-color-light);
+}
+
+html .xUi-button-ghost {
+    opacity: 0;
+}
+
+html .xUi-button-ghost:hover {
+    opacity: 1;
+}
+
+html .xUi-button-block {
+    display: flex;
+    width: 100%;
+}
+
+html .xUi-button-disabled,
+html .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;
+}
+
+html .xUi-button-loading {
+    background-color: transparent
+}

package/lib/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,131 @@
+"use client"
+
+import React, {
+  MouseEvent,
+  ReactElement,
+  useEffect,
+  useRef,
+  useState
+} from 'react';
+import { clsx } from '../../../lib/helpers';
+import { SyntheticBaseEvent } from '../../types';
+import { CheckboxProps } from '../../types/checkbox';
+import { prefixClsCheckbox, prefixClsCheckboxV3 } from '../../../lib/utils';
+import './style.css';
+
+const Checkbox = ({
+  prefixCls = prefixClsCheckbox,
+  prefixClsV3 = prefixClsCheckboxV3,
+  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,
+  titleClick,
+  ref,
+  controlled = false
+}: CheckboxProps,
+): ReactElement => {
+  const isChecked = checked !== undefined ? checked : defaultChecked || value;
+  const [internalChecked, setInternalChecked] = useState(isChecked);
+
+  const checkboxRef = useRef<HTMLInputElement | null>(null);
+
+  const handleClick = (
+    e: MouseEvent<HTMLInputElement> & SyntheticBaseEvent
+  ) => {
+    if (disabled) {
+      e.stopPropagation();
+
+      return;
+    }
+
+    if (checkboxRef.current) {
+      if (!controlled) {
+        e.target.value = !internalChecked;
+        setInternalChecked(!internalChecked);
+        checkboxRef.current.checked = !internalChecked
+      } else {
+        e.target.value = !checked;
+        checkboxRef.current.checked = !checked
+      }
+    }
+
+    onClick?.(e);
+    onChange?.(e);
+  };
+
+  useEffect(() => {
+    if (checked !== undefined) {
+      setInternalChecked(checked);
+    }
+  }, [checked]);
+
+  return (
+    <div className={`${prefixCls}-wrapper ${prefixClsV3}-wrapper`}>
+      <div
+        ref={ref}
+        tabIndex={0}
+        role="button"
+        style={style}
+        onClick={handleClick}
+        className={clsx([
+          prefixCls,
+          prefixClsV3,
+          className,
+          {
+            noStyle: noStyle,
+            [`${prefixCls}-disabled ${prefixClsV3}-disabled`]: disabled,
+            [`${prefixCls}-checked ${prefixClsV3}-checked`]: internalChecked
+          }
+        ])}
+      >
+        <input
+          id={id}
+          type={type}
+          name={name}
+          ref={checkboxRef}
+          disabled={disabled}
+          tabIndex={tabIndex}
+          required={required}
+          autoFocus={autoFocus}
+          onKeyDown={onKeyDown}
+          onKeyPress={onKeyPress}
+          onMouseEnter={onMouseEnter}
+          onMouseLeave={onMouseLeave}
+        />
+
+        <span className={`${prefixCls}-box ${prefixClsV3}-box`}>
+          <span
+            className={`${prefixCls}-check ${prefixClsV3}-check`}
+            style={{ opacity: internalChecked ? 1 : 0 }}
+          />
+        </span>
+      </div>
+
+      {titleClick
+        ? <div onClick={handleClick}>{children}</div>
+        : children && <span className={`${prefixCls}-label ${prefixClsV3}-label`}>{children}</span>
+      }
+    </div>
+  );
+};
+
+Checkbox.displayName = 'Checkbox';
+
+export default Checkbox;

package/lib/components/Checkbox/index.ts

@@ -0,0 +1 @@
+export { default as Checkbox } from './Checkbox'

package/lib/components/Checkbox/style.css

@@ -0,0 +1,95 @@
+.xUi-checkbox-wrapper {
+    cursor: pointer;
+    font-size: var(--xui-font-size-md);
+    align-items: center;
+    display: inline-flex;
+    color: var(--xui-main-color);
+    margin: 16px 0;
+
+    &:has([tabindex="0"]:focus-visible) {
+        border-color: var(--xui-primary-color);
+    }
+}
+
+.xUi-checkbox {
+    width: 14px;
+    height: 14px;
+    position: relative;
+    border-radius: var(--xui-border-radius-sm);
+    transition: all 0.3s;
+    display: inline-block;
+    background-color: transparent;
+    border: 1px solid var(--xui-border-color);
+}
+
+.xUi-checkbox.xUi-checkbox-checked {
+    border-color: var(--xui-primary-color);
+    background-color: #f0f5ff;
+}
+
+.xUi-checkbox input {
+    inset: 0;
+    opacity: 0;
+    cursor: pointer;
+    position: absolute;
+}
+
+.xUi-checkbox-inner {
+    top: 50%;
+    left: 50%;
+    width: 10px;
+    height: 6px;
+    border-top: 0;
+    border-left: 0;
+    position: absolute;
+    border: 2px solid var(--xui-background-color);
+    transform: rotate(45deg) scale(0);
+    transition: transform 0.2s ease-in-out;
+}
+
+.xUi-checkbox-check {
+    width: 100%;
+    height: 100%;
+    display: block;
+    position: relative;
+    transition: 0.1s ease;
+    border-color: var(--xui-primary-color);
+    background-color: var(--xui-primary-color);
+}
+
+.xUi-checkbox-check::after {
+    top: 1px;
+    left: 3px;
+    width: 5px;
+    height: 8px;
+    content: "";
+    position: absolute;
+    border: solid white;
+    transform: rotate(45deg);
+    border-width: 0 2px 2px 0;
+}
+
+.xUi-checkbox-disabled,
+.xUi-checkbox-disabled .xUi-checkbox-check {
+    opacity: 0.5;
+    cursor: not-allowed;
+    background-color: var(--xui-color-disabled);
+    border-color: var(--xui-border-color) !important;
+}
+
+.xUi-checkbox-label {
+    margin-left: 8px;
+    user-select: none;
+    font-size: 14px;
+}
+
+.xUi-checkbox:hover:not(.disabled),
+.xUi-checkbox:focus:not(.disabled) {
+    border-color: var(--xui-primary-color);
+    cursor: pointer;
+}
+
+.xUi-checkbox.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}

package/lib/components/ConditionalWrapper/index.tsx

@@ -0,0 +1,12 @@
+import { FC, PropsWithChildren, ReactElement } from 'react';
+
+type Props = {
+  condition: boolean;
+  wrapper: (children: PropsWithChildren['children']) => ReactElement;
+} & PropsWithChildren;
+
+export const ConditionalWrapper: FC<Props> = ({
+  condition,
+  wrapper,
+  children
+}) => (condition ? wrapper(children) : children);