ywana-core8 0.1.75 → 0.1.77

package/src/html/button.js

@@ -1,99 +1,279 @@
 import React, { useEffect, useState, useCallback } from 'react'
+import PropTypes from 'prop-types'
 import { Icon } from './icon'
 import { Text } from './text'
 import './button.css'
 
 /**
- * HTML Button
+ * Button component with enhanced features and accessibility
  */
-export const Button = ({ label, icon, action, disabled = false, outlined, raised, className, progress = 0 }) => {
+export const Button = (props) => {
+    const {
+        id,
+        label,
+        icon,
+        action,
+        disabled = false,
+        loading = false,
+        outlined = false,
+        raised = false,
+        size = 'normal',
+        type = 'button',
+        className,
+        ariaLabel,
+        tooltip,
+        form,
+        onClick,
+        onFocus,
+        onBlur,
+        onKeyDown,
+        ...restProps
+    } = props
+
+    // Validate required props
+    if (!label && !icon && !ariaLabel) {
+        console.warn('Button component: label, icon, or ariaLabel prop is required for accessibility')
+    }
 
     const click = useCallback((event) => {
-        if (!disabled) {
-            event.stopPropagation();
-            event.preventDefault();
-            if (action) action()
+        if (!disabled && !loading) {
+            // Don't prevent default for form submissions
+            if (type !== 'submit') {
+                event.stopPropagation()
+                event.preventDefault()
+            }
+
+            if (action) action(event)
+            if (onClick) onClick(event)
+        }
+    }, [disabled, loading, action, onClick, type])
+
+    // Handle keyboard events for accessibility
+    const handleKeyDown = useCallback((event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            if (type === 'button') {
+                event.preventDefault()
+                click(event)
+            }
         }
-    }, [disabled, action]);
+        if (onKeyDown) onKeyDown(event)
+    }, [click, onKeyDown, type])
+
+    const handleFocus = useCallback((event) => {
+        if (onFocus) onFocus(event)
+    }, [onFocus])
+
+    const handleBlur = useCallback((event) => {
+        if (onBlur) onBlur(event)
+    }, [onBlur])
+
+    // Generate CSS classes
+    const variant = raised ? 'raised' : outlined ? 'outlined' : 'normal'
+    const state = disabled ? 'disabled' : loading ? 'loading' : ''
+    const safeClassName = className || ''
+
+    const cssClasses = [
+        'btn',
+        variant,
+        size,
+        state,
+        safeClassName
+    ].filter(Boolean).join(' ')
+
+    // Accessibility attributes
+    const ariaAttributes = {
+        'aria-label': ariaLabel || (icon && !label ? `${icon} button` : undefined),
+        'aria-disabled': disabled || loading,
+        'aria-busy': loading,
+        'aria-describedby': tooltip ? `${id}-tooltip` : undefined
+    }
+
+    // Icon configuration
+    const iconProps = {
+        icon: loading ? 'hourglass_empty' : icon,
+        size: size === 'small' ? 'small' : size === 'large' ? 'normal' : 'small',
+        disabled: disabled || loading,
+        className: loading ? 'loading-icon' : ''
+    }
 
-    let style = raised ? 'raised' : outlined ? 'outlined' : 'normal'
-    if (disabled) style = `${style} disabled`
     return (
-        <button className={`btn ${style} ${className}`} onClick={click}>
-            {icon && <Icon icon={icon} size="small" clickable action={click} /> }
-            <Text>{label}</Text>
+        <button
+            id={id}
+            type={type}
+            form={form}
+            className={cssClasses}
+            onClick={click}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            onKeyDown={handleKeyDown}
+            disabled={disabled || loading}
+            {...ariaAttributes}
+            {...restProps}
+        >
+            {(icon || loading) && <Icon {...iconProps} />}
+            {label && <Text>{label}</Text>}
+            {loading && !icon && <span className="loading-text">Loading...</span>}
         </button>
     )
 }
 
 /**
- * Action Button
+ * ActionButton component for handling multi-state button workflows
  */
 export const ActionButton = (props) => {
+    const {
+        states,
+        state,
+        className,
+        disabled = false,
+        onStateChange,
+        ...restProps
+    } = props
 
-    const { states, state, className } = props
+    const [currentState, setCurrentState] = useState(state)
+    const [isExecuting, setIsExecuting] = useState(false)
 
-    const [_state, setState] = useState()
+    // Validate required props
+    if (!states || typeof states !== 'object') {
+        console.warn('ActionButton component: states prop is required and must be an object')
+        return null
+    }
 
+    if (!state) {
+        console.warn('ActionButton component: state prop is required')
+        return null
+    }
+
+    // Sync with external state
     useEffect(() => {
-        setState(state)
+        setCurrentState(state)
     }, [state])
 
+    // Auto-execute when state changes
     useEffect(() => {
-        if (states[_state] && states[_state].autoexec) execute()
-    }, [_state])
+        if (states[currentState] && states[currentState].autoexec && !isExecuting) {
+            execute()
+        }
+    }, [currentState, states, isExecuting])
 
     async function execute() {
-        if (states[_state]) {
-            const newState = await states[_state].action()
-            if (newState) setState(newState)
+        if (disabled || isExecuting) return
+
+        const stateConfig = states[currentState]
+        if (!stateConfig) return
+
+        try {
+            setIsExecuting(true)
+
+            if (stateConfig.action) {
+                const newState = await stateConfig.action()
+                if (newState && states[newState]) {
+                    setCurrentState(newState)
+                    if (onStateChange) onStateChange(newState)
+                }
+            }
+        } catch (error) {
+            console.error('ActionButton execution error:', error)
+            // Try to transition to error state if it exists
+            if (states.error) {
+                setCurrentState('error')
+                if (onStateChange) onStateChange('error')
+            }
+        } finally {
+            setIsExecuting(false)
         }
     }
 
-    if (!_state) return null
-    const { icon, label } = states[_state]
+    if (!currentState || !states[currentState]) return null
+
+    const stateConfig = states[currentState]
+    const { icon, label, disabled: stateDisabled } = stateConfig
+    const safeClassName = className || ''
 
     return (
-        <Button {...props} icon={icon} label={label} action={execute} className={`${className} action-btn ${_state}`} />
+        <Button
+            {...restProps}
+            icon={icon}
+            label={label}
+            action={execute}
+            disabled={disabled || stateDisabled || isExecuting}
+            loading={isExecuting && currentState === 'running'}
+            className={`${safeClassName} action-btn ${currentState}`}
+        />
     )
+}
 
+// PropTypes para Button
+Button.propTypes = {
+    /** Unique identifier for the button */
+    id: PropTypes.string,
+    /** Button text label */
+    label: PropTypes.string,
+    /** Icon name for Material Icons */
+    icon: PropTypes.string,
+    /** Click handler function */
+    action: PropTypes.func,
+    /** Whether the button is disabled */
+    disabled: PropTypes.bool,
+    /** Whether the button is in loading state */
+    loading: PropTypes.bool,
+    /** Whether the button has outlined style */
+    outlined: PropTypes.bool,
+    /** Whether the button has raised style */
+    raised: PropTypes.bool,
+    /** Size variant of the button */
+    size: PropTypes.oneOf(['small', 'normal', 'large']),
+    /** Button type for forms */
+    type: PropTypes.oneOf(['button', 'submit', 'reset']),
+    /** Additional CSS classes */
+    className: PropTypes.string,
+    /** Accessibility label for screen readers */
+    ariaLabel: PropTypes.string,
+    /** Tooltip configuration */
+    tooltip: PropTypes.string,
+    /** Form ID for submit buttons */
+    form: PropTypes.string,
+    /** Click event handler */
+    onClick: PropTypes.func,
+    /** Focus event handler */
+    onFocus: PropTypes.func,
+    /** Blur event handler */
+    onBlur: PropTypes.func,
+    /** KeyDown event handler */
+    onKeyDown: PropTypes.func
 }
 
-const ActionButtonTest = (props) => {
-
-    const states = {
-        normal: {
-            icon: "add",
-            label: "Create Job",
-            action: () => { 
-                return "running"
-            },
-        },
-        running: {
-            icon: "rotate_right",
-            label: "Creating Job",
-            autoexec: true,
-            action: () => { 
-                console.log("Creating Job")
-                return new Promise((resolve, reject) => {
-                    setTimeout(() => {
-                        resolve("success")
-                    }, 5000)
-                })
-            },
-        },
-        success: {
-            icon: "task_alt",
-            label: "Job Created"
-
-        },
-        error: {
-            icon: "error",
-            label: "Error"
-        }
-    }
+Button.defaultProps = {
+    disabled: false,
+    loading: false,
+    outlined: false,
+    raised: false,
+    size: 'normal',
+    type: 'button',
+    className: ''
+}
 
-    return (
-        <ActionButton states={states} state="normal" raised/>
-    )
+// PropTypes para ActionButton
+ActionButton.propTypes = {
+    /** Object defining button states and their configurations */
+    states: PropTypes.objectOf(PropTypes.shape({
+        icon: PropTypes.string,
+        label: PropTypes.string,
+        action: PropTypes.func,
+        autoexec: PropTypes.bool,
+        disabled: PropTypes.bool
+    })).isRequired,
+    /** Current state key */
+    state: PropTypes.string.isRequired,
+    /** Whether the button is disabled */
+    disabled: PropTypes.bool,
+    /** Additional CSS classes */
+    className: PropTypes.string,
+    /** State change callback */
+    onStateChange: PropTypes.func
+}
+
+ActionButton.defaultProps = {
+    disabled: false,
+    className: ''
 }