x-ui-design 0.1.0

package/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

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/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "x-ui-design",
+  "version": "0.1.0",
+  "author": "Gabriel Boyajyan",
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "antd": "^5.24.3",
+    "classcat": "^5.0.5",
+    "next": "15.2.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "15.2.0",
+    "typescript": "^5"
+  }
+}

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

@@ -0,0 +1,90 @@
+import React, { useState, useEffect, FC, MouseEvent } from "react";
+import { CheckboxProps } from "@/app/types/checkbox";
+import { prefixClsCheckbox } from "@/app/utils";
+import { SyntheticBaseEvent } from "@/app/types";
+import cc from "classcat";
+import "./style.css";
+
+const Checkbox: FC<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
+}) => {
+    const isChecked = checked !== undefined ? checked : defaultChecked || value;
+    const [internalChecked, setInternalChecked] = useState(isChecked);
+
+    const handleClick = (e: MouseEvent<HTMLInputElement> & SyntheticBaseEvent) => {
+        e.stopPropagation()
+        
+        if (disabled) {
+            return;
+        }
+
+        setInternalChecked(!internalChecked);
+        e.target.value = !internalChecked;
+
+        onClick?.(e);
+        onChange?.(e);
+    };
+
+    useEffect(() => {
+        if (checked !== undefined) {
+            setInternalChecked(checked);
+        }
+    }, [checked]);
+
+    return (
+        <div
+            style={style}
+            onClick={handleClick}
+            className={cc([
+                prefixCls,
+                className,
+                {
+                    [`${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>
+
+            {children && <span className={`${prefixCls}-label`}>{children}</span>}
+        </div>
+    );
+};
+
+export { Checkbox };

package/src/app/components/Checkbox/style.css

@@ -0,0 +1,88 @@
+.xUi-checkbox-wrapper {
+    cursor: pointer;
+    font-size: var(--font-size-md);
+    align-items: center;
+    display: inline-flex;
+}
+
+.xUi-checkbox {
+    width: 14px;
+    height: 14px;
+    position: relative;
+    border-radius: var(--border-radius-sm);
+    transition: all 0.3s;
+    display: inline-block;
+    background-color: var(--background-color);
+    border: 1px solid var(--border-color);
+}
+
+.xUi-checkbox.xUi-checkbox-checked {
+    border-color: var(--main-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(--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(--main-color);
+    background-color: var(--main-color);
+}
+
+.xUi-checkbox-check::after {
+    top: 1px;
+    left: 4px;
+    width: 3px;
+    height: 7px;
+    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(--color-disabled);
+    border-color: var(--border-color) !important;
+}
+
+.xUi-checkbox-label {
+    margin-left: 8px;
+    user-select: none;
+}
+
+.xUi-checkbox:hover:not(.disabled),
+.xUi-checkbox:focus:not(.disabled) {
+    border-color: var(--main-color);
+    cursor: pointer;
+}
+
+.xUi-checkbox.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}

package/src/app/components/Empty/index.tsx

@@ -0,0 +1,31 @@
+import { prefixClsEmpty } from "@/app/utils"
+import { EmptyContentProps } from "@/app/types/empty"
+import './style.css'
+
+const EmptyContent = ({
+    icon,
+    style = {},
+    className = '',
+    title = 'No Data',
+    description = 'No data',
+    prefixCls = prefixClsEmpty,
+}: EmptyContentProps) => (
+    <div style={style} className={`${prefixCls} ${prefixCls}-normal ${prefixCls}-small ${className}`}>
+        <div className={`${prefixCls}-image`}>
+            {icon || <svg width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg">
+                <title>{title}</title>
+                <g transform="translate(0 1)" fill="none">
+                    <ellipse fill="#f5f5f5" cx="32" cy="33" rx="32" ry="7"></ellipse>
+                    <g stroke="#d9d9d9">
+                        <path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path>
+                        <path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" fill="#fafafa"></path>
+                    </g>
+                </g>
+            </svg>}
+        </div>
+        <div className={`${prefixCls}-description`}>{description}</div>
+    </div>
+)
+
+
+export { EmptyContent }

package/src/app/components/Empty/style.css

@@ -0,0 +1,12 @@
+.xUi-empty {
+    gap: 4px;
+    display: grid;
+    padding: 14px 0px;
+    align-items: center;
+    justify-content: center;
+}
+
+.xUi-empty-description {
+    text-align: center;
+    color: var(--text-color);
+}

package/src/app/components/Form/Item/index.tsx

@@ -0,0 +1,63 @@
+import { cloneElement, FC, useContext, useEffect, useMemo } from 'react';
+import { FormContext } from '..';
+import { prefixClsFormItem } from '@/app/utils';
+import { OptionProps } from '@/app/types/select';
+import { SyntheticBaseEvent, RuleType } from '@/app/types';
+import { FormItemProps } from '@/app/types/form';
+import './style.css';
+
+export const FormItem: FC<FormItemProps> = ({
+  prefixCls = prefixClsFormItem,
+  name,
+  label,
+  rules = [],
+  children,
+  className = '',
+  layout = 'horizontal',
+  style = {},
+  ...props
+}) => {
+  const formContext = useContext(FormContext);
+
+  if (!formContext) {
+    throw new Error('FormItem must be used within a Form');
+  }
+
+  const { registerField, getFieldValue, setFieldValue, getFieldError } =
+    formContext;
+
+  useEffect(() => {
+    registerField(name, rules);
+  }, [name, registerField, rules]);
+
+  const isRequired = useMemo(() => rules.some(rule => rule.required), [rules]);
+  
+  return (
+    <div style={style} className={`${prefixCls} ${className} ${layout}`}>
+      <label className={`${prefixCls}-label`} htmlFor={name}>
+        {layout === 'horizontal' ? `${label}: ` : label} {isRequired && <span className={`${prefixCls}-required`}>*</span>}
+      </label>
+
+      {cloneElement(children, {
+        ...props,
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-expect-error
+        size: children.props.size || props.size,
+        error: !!getFieldError(name).length,
+        value: getFieldValue(name) ?? children.props.value,
+        onChange: (e: SyntheticBaseEvent, option?: OptionProps) => {
+          const value: RuleType | SyntheticBaseEvent = e.target ? e.target.value : e;
+
+          setFieldValue(name, value as RuleType)
+
+          const childOnChange = (children.props as { onChange?: (e: SyntheticBaseEvent, option?: OptionProps) => void }).onChange;
+          childOnChange?.(e, option);
+        }
+      })}
+
+      {getFieldError(name).length ? (
+        <span className={`${prefixCls}-error`}>{getFieldError(name)[0]}</span>
+      ) : null}
+    </div>
+  );
+};

package/src/app/components/Form/Item/style.css

@@ -0,0 +1,46 @@
+.xUi-form-item {
+    display: flex;
+    margin-bottom: 22px;
+    position: relative;
+}
+
+.xUi-form-item-label {
+    font-weight: 500;
+    margin-bottom: 4px;
+    display: flex;
+    align-items: center;
+    font-size: var(--font-size-md);
+}
+
+.xUi-form-item-error {
+    right: 0;
+    bottom: -18px;
+    font-size: var(--font-size-xs);
+    margin-top: 4px;
+    position: absolute;
+    color: var(--error-text-color);
+    user-select: none;
+}
+
+.xUi-form-item-required {
+    line-height: 1;
+    font-size: var(--font-size-md);
+    margin-left: 4px;
+    margin-right: 4px;
+    display: inline-block;
+    color: var(--error-text-color);
+}
+
+.xUi-form-item.horizontal {
+    gap: 4px;
+    flex-direction: row;
+}
+
+.xUi-form-item.vertical {
+    flex-direction: column;
+}
+
+.xUi-form-item .xUi-input-container,
+.xUi-form-item .xUi-select {
+    width: -webkit-fill-available;
+}

package/src/app/components/Form/index.tsx

@@ -0,0 +1,74 @@
+import { Children, cloneElement, createContext, FC, isValidElement, SyntheticEvent, useEffect, useRef } from 'react';
+import { FormInstance, FormItemProps, FormProps } from '@/app/types/form';
+import { useForm } from '@/app/hooks/useForm';
+import { FormItem } from './Item';
+import { prefixClsForm } from '@/app/utils';
+
+export const FormContext = createContext<FormInstance | null>(null);
+
+const Form: FC<FormProps> & { Item: FC<FormItemProps> } = ({
+  children,
+  form,
+  style = {},
+  prefixCls = prefixClsForm,
+  className = '',
+  onFinish,
+  onFinishFailed,
+  initialValues = {},
+  onValuesChange,
+  onFieldsChange,
+  layout = 'horizontal',
+  ...rest
+}) => {
+  const internalForm = useForm(initialValues, onFieldsChange, onValuesChange);
+  const formInstance = form || internalForm;
+  const formRef = useRef<HTMLFormElement>(null);
+
+  const handleSubmit = async (e: SyntheticEvent) => {
+    e.preventDefault();
+
+    if (await formInstance.validateFields()) {
+      onFinish?.(formInstance.getFieldsValue());
+    } else if (onFinishFailed) {
+      const errorFields = formInstance.getFieldsError();
+      onFinishFailed({ values: formInstance.getFieldsValue(), errorFields });
+    }
+  };
+
+  useEffect(() => {
+    if (onFieldsChange) {
+      formInstance.onFieldsChange = onFieldsChange;
+    }
+
+    if (onValuesChange) {
+      formInstance.onValuesChange = onValuesChange;
+    }
+  }, [formInstance, onFieldsChange, onValuesChange]);
+
+  useEffect(() => {
+
+  }, [])
+
+  return (
+    <FormContext.Provider value={formInstance}>
+      <form style={style} className={`${prefixCls} ${className}`} ref={formRef} onSubmit={handleSubmit} {...rest}>
+        {Children.map(children, (child) => {
+          if (isValidElement(child)) {
+            return cloneElement(child, {
+              ...rest,
+              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+              // @ts-expect-error
+              layout: child.props.layout || layout
+            });
+          }
+
+          return child;
+        })}
+      </form>
+    </FormContext.Provider>
+  );
+};
+
+Form.Item = FormItem
+
+export { Form };

package/src/app/components/Input/index.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import { ForwardedRef, forwardRef, KeyboardEvent, MouseEvent, useState } from "react";
+import { prefixClsInput } from "@/app/utils";
+import { SyntheticBaseEvent, TargetProps } from "@/app/types";
+import { InputProps } from "@/app/types/input";
+import cc from "classcat";
+import "./style.css";
+
+const Input = forwardRef(({
+	size = "middle",
+	error,
+	suffix,
+	prefix,
+	addonAfter,
+	addonBefore,
+	onPressEnter,
+	disabled = false,
+	allowClear = false,
+	prefixCls = prefixClsInput,
+	className = '',
+	value = undefined,
+	...props
+}: InputProps,
+	ref: ForwardedRef<HTMLInputElement>
+) => {
+	const [internalValue, setInternalValue] = useState(value ?? '');
+
+	const handleChange = (e: SyntheticBaseEvent) => {
+		setInternalValue(e.target.value as string);
+
+		props.onChange?.({
+			target: e?.target,
+			currentTarget: e.currentTarget
+		});
+	};
+
+	const handleClear = (e: MouseEvent<HTMLSpanElement> & TargetProps) => {
+		setInternalValue("");
+
+		e.target.value = ''
+
+		props.onChange?.({
+			target: e?.target,
+			currentTarget: e.currentTarget
+		});
+	};
+
+	const handleOnKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+		if (e.key === "Enter" && onPressEnter) {
+			onPressEnter(e);
+		}
+	}
+
+	return (
+		<div
+			className={cc([
+				`${prefixCls}-container`,
+				{
+					[`${prefixCls}-error`]: error,
+					[`${prefixCls}-disabled`]: disabled,
+					[`${prefixCls}-${size}`]: size,
+				},
+				className
+			])}
+			style={props.style}
+		>
+			{addonBefore && <span className={`${prefixCls}-addon ${prefixCls}-before`}>{addonBefore}</span>}
+
+			<div className={`${prefixCls}-wrapper`}>
+				{prefix && <span className={`${prefixCls}-prefix`}>{prefix}</span>}
+
+				<input
+					ref={ref}
+					{...props}
+					disabled={disabled}
+					value={internalValue}
+					onChange={handleChange}
+					onKeyDown={handleOnKeyDown}
+					className={cc([prefixCls, className])}
+				/>
+
+				{allowClear && (internalValue) && (
+					<span className={`${prefixCls}-clear`} onClick={handleClear}>
+						&#x2715;
+					</span>
+				)}
+
+				{suffix && <span className={`${prefixCls}-suffix`}>{suffix}</span>}
+			</div>
+
+			{addonAfter && <span className={`${prefixCls}-addon ${prefixCls}-after`}>{addonAfter}</span>}
+		</div>
+	);
+});
+
+Input.displayName = "Input";
+
+export { Input };

package/src/app/components/Input/style.css

@@ -0,0 +1,80 @@
+.xUi-input-container {
+    display: flex;
+    align-items: center;
+    border: 1px solid #ccc;
+    border-radius: var(--border-radius-sm);
+    transition: border 0.3s;
+}
+
+.xUi-input-container.xUi-input-error {
+    border-color: red;
+}
+
+.xUi-input-wrapper {
+    display: flex;
+    gap: 6px;
+    height: inherit;
+    padding: 0 2px;
+    align-items: center;
+    flex-grow: 1;
+}
+
+.xUi-input {
+    flex: 1;
+    padding: 0;
+    border: none;
+    outline: none;
+}
+
+.xUi-input-prefix,
+.xUi-input-suffix {
+    margin: 0 6px;
+}
+
+.xUi-input-clear {
+    cursor: pointer;
+    margin: 0 2px;
+    color: #ccc;
+}
+
+.xUi-input-disabled {
+    background-color: var(--color-disabled);
+    cursor: not-allowed;
+}
+
+.xUi-input-small {
+    height: 22px;
+}
+
+.xUi-input-large .xUi-input-clear,
+.xUi-input-small .xUi-input {
+    font-size: var(--font-size-md);
+}
+
+.xUi-input-middle {
+    height: 30px;
+    border-radius: var(--border-radius-md);
+}
+
+.xUi-input-large .xUi-input-clear,
+.xUi-input-middle .xUi-input {
+    font-size: var(--font-size-md);
+}
+
+.xUi-input-large {
+    height: 40px;
+    border-radius: var(--border-radius-lg);
+}
+
+.xUi-input-large .xUi-input-clear,
+.xUi-input-large .xUi-input {
+    font-size: var(--font-size-lg);
+}
+
+.xUi-input-middle {
+    padding: 0 12px;
+}
+
+.xUi-input-large {
+    padding: 0 10px;
+}