ywana-core8 0.1.80 → 0.1.81

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ywana-core8",
-  "version": "0.1.80",
+  "version": "0.1.81",
   "description": "ywana-core8",
   "homepage": "https://ywana.github.io/workspace",
   "author": "Ernesto Roldan Garcia",

package/src/html/button.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback } from 'react'
+import React, { useEffect, useState, useCallback, useMemo } from 'react'
 import PropTypes from 'prop-types'
 import { Icon } from './icon'
 import { Text } from './text'
@@ -88,6 +88,24 @@ export const Button = (props) => {
         'aria-describedby': tooltip ? `${id}-tooltip` : undefined
     }
 
+    // Label text - support both string and React components
+    const labelElement = useMemo(() => {
+        if (!label) return null
+
+        // If label is already a React element, use it directly
+        if (React.isValidElement(label)) {
+            return label
+        }
+
+        // If label is a string, wrap it in Text component
+        if (typeof label === 'string') {
+            return <Text>{label}</Text>
+        }
+
+        // Fallback for other types (convert to string)
+        return <Text>{String(label)}</Text>
+    }, [label])
+
     // Icon configuration
     const iconProps = {
         icon: loading ? 'hourglass_empty' : icon,
@@ -111,7 +129,7 @@ export const Button = (props) => {
             {...restProps}
         >
             {(icon || loading) && <Icon {...iconProps} />}
-            {label && <Text>{label}</Text>}
+            {labelElement}
             {loading && !icon && <span className="loading-text">Loading...</span>}
         </button>
     )
@@ -207,8 +225,8 @@ export const ActionButton = (props) => {
 Button.propTypes = {
     /** Unique identifier for the button */
     id: PropTypes.string,
-    /** Button text label */
-    label: PropTypes.string,
+    /** Button text label - can be string or React element */
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
     /** Icon name for Material Icons */
     icon: PropTypes.string,
     /** Click handler function */

package/src/html/header.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Icon } from './icon';
 import { Text } from './text';
 import './header.css';
@@ -18,11 +18,28 @@ export const Header = (props) => {
 
     const style = props.img ? { backgroundImage: `url(${props.img })` } : {}
 
-    const title=<Text>{props.title}</Text>
+    // Title element - support both string and React components
+    const titleElement = useMemo(() => {
+        if (!props.title) return null
+
+        // If title is already a React element, use it directly
+        if (React.isValidElement(props.title)) {
+            return props.title
+        }
+
+        // If title is a string, wrap it in Text component
+        if (typeof props.title === 'string') {
+            return <Text>{props.title}</Text>
+        }
+
+        // Fallback for other types (convert to string)
+        return <Text>{String(props.title)}</Text>
+    }, [props.title])
+
     return (
         <header className={`header ${caption} ${prominent} ${dense} ${theme} ${props.className}`} style={style}>
             {icon}
-            {props.title ? <label>{title}</label> : null }
+            {props.title ? <label>{titleElement}</label> : null }
             <span className="actions">{props.children}</span>
         </header>
     )

package/src/html/textfield.js

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from 'react'
+import React, { useContext, useEffect, useState, useMemo } from 'react'
 import { SiteContext } from '../site/siteContext'
 import { Icon } from './icon'
 import { TEXTFORMATS, Text } from './text'
@@ -59,7 +59,25 @@ export const TextField = (props) => {
     const labelStyle = label ? "" : "no-label"
     const labelPositionStyle = labelPosition == 'left' ? "label-left" : "label-top"
     const style = `${labelStyle} ${labelPositionStyle} ${borderStyle} textfield-${type}`
-    const labelTxt = <Text>{label}</Text>
+
+    // Label text - support both string and React components
+    const labelTxt = useMemo(() => {
+        if (!label) return null
+
+        // If label is already a React element, use it directly
+        if (React.isValidElement(label)) {
+            return label
+        }
+
+        // If label is a string, wrap it in Text component
+        if (typeof label === 'string') {
+            return <Text>{label}</Text>
+        }
+
+        // Fallback for other types (convert to string)
+        return <Text>{String(label)}</Text>
+    }, [label])
+
     const placeholderTxt = site.translate ? site.translate(placeholder) : placeholder
 
     return (
@@ -110,10 +128,26 @@ export const TextArea = (props) => {
         if (onChange) onChange(id, "")
     }
 
-    const borderStyle = outlined ? "textarea-outlined" : "textarea"
     const labelStyle = label ? "" : "no-label"
     const style = `textarea ${labelStyle} textarea-${type}`
-    const labelTxt = <Text>{label}</Text>
+
+    // Label text - support both string and React components
+    const labelTxt = useMemo(() => {
+        if (!label) return null
+
+        // If label is already a React element, use it directly
+        if (React.isValidElement(label)) {
+            return label
+        }
+
+        // If label is a string, wrap it in Text component
+        if (typeof label === 'string') {
+            return <Text>{label}</Text>
+        }
+
+        // Fallback for other types (convert to string)
+        return <Text>{String(label)}</Text>
+    }, [label])
 
     const placeholderTxt = site.translate ? site.translate(placeholder) : placeholder
 
@@ -222,7 +256,7 @@ export const DropDown = (props) => {
  */
 export const DateRange = (props) => {
 
-    const { id, label, value, onChange } = props
+    const { id, label, onChange } = props
     const [form, setForm] = useState({})
 
     useEffect(() => {
@@ -237,7 +271,23 @@ export const DateRange = (props) => {
         setForm(next)
     }
 
-    const labelTxt = label ?  <Text>{label}</Text> : null
+    // Label text - support both string and React components
+    const labelTxt = useMemo(() => {
+        if (!label) return null
+
+        // If label is already a React element, use it directly
+        if (React.isValidElement(label)) {
+            return label
+        }
+
+        // If label is a string, wrap it in Text component
+        if (typeof label === 'string') {
+            return <Text>{label}</Text>
+        }
+
+        // Fallback for other types (convert to string)
+        return <Text>{String(label)}</Text>
+    }, [label])
 
     return (
         <div className="date-range">
@@ -257,7 +307,23 @@ export const PasswordField = (props) => {
         setShow(!show)
     }
 
-    const labelTxt = label ?  <Text>{label}</Text> : null
+    // Label text - support both string and React components
+    const labelTxt = useMemo(() => {
+        if (!label) return null
+
+        // If label is already a React element, use it directly
+        if (React.isValidElement(label)) {
+            return label
+        }
+
+        // If label is a string, wrap it in Text component
+        if (typeof label === 'string') {
+            return <Text>{label}</Text>
+        }
+
+        // Fallback for other types (convert to string)
+        return <Text>{String(label)}</Text>
+    }, [label])
 
     return (
         <div className="password-field">

package/src/html/textfield2.js

@@ -204,8 +204,23 @@ export const TextField2 = (props) => {
         ...restProps
     }
 
-    // Label text
-    const labelTxt = label ? <Text>{label}</Text> : null
+    // Label text - support both string and React components
+    const labelTxt = useMemo(() => {
+        if (!label) return null
+
+        // If label is already a React element, use it directly
+        if (React.isValidElement(label)) {
+            return label
+        }
+
+        // If label is a string, wrap it in Text component
+        if (typeof label === 'string') {
+            return <Text>{label}</Text>
+        }
+
+        // Fallback for other types (convert to string)
+        return <Text>{String(label)}</Text>
+    }, [label])
     const placeholderTxt = site?.translate ? site.translate(placeholder) : placeholder
 
     // Error/helper text
@@ -304,8 +319,8 @@ TextField2.propTypes = {
     type: PropTypes.oneOf(['text', 'email', 'password', 'number', 'tel', 'url', 'search', 'date', 'time', 'datetime-local', 'month', 'week', 'textarea']),
     /** Additional CSS classes */
     className: PropTypes.string,
-    /** Field label */
-    label: PropTypes.string,
+    /** Field label - can be string or React element */
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
     /** Label position */
     labelPosition: PropTypes.oneOf(['top', 'left']),
     /** Placeholder text */

package/src/html/tooltip.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useMemo } from 'react'
 import { Text } from './text'
 import './tooltip.css'
 
@@ -11,11 +11,29 @@ export const Tooltip = (props) => {
 
     const style = { top, left }
 
+    // Text element - support both string and React components
+    const textElement = useMemo(() => {
+        if (!text) return null
+
+        // If text is already a React element, use it directly
+        if (React.isValidElement(text)) {
+            return text
+        }
+
+        // If text is a string, wrap it in Text component
+        if (typeof text === 'string') {
+            return <Text>{text}</Text>
+        }
+
+        // Fallback for other types (convert to string)
+        return <Text>{String(text)}</Text>
+    }, [text])
+
     return (
         <div className="tooltip" >
-            <span className="tooltip-text" style={style}><Text>{text}</Text></span>
+            <span className="tooltip-text" style={style}>{textElement}</span>
             {props.children}
         </div>
     )
 
-} 
+}

package/src/widgets/login/LoginBox.css

@@ -6,6 +6,7 @@
   padding: 1rem 1rem 0 1rem;
   display: flex;
   flex-direction: column;
+  gap: 1rem
 }
 
 .login-box .message {

package/src/widgets/login/LoginBox.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Icon , Button, Text, TextField } from '../../html'
+import { Icon , Button, Text, TextField2 as TextField } from '../../html'
 import './LoginBox.css'
 
 /**
@@ -24,23 +24,46 @@ export const LoginBox = ({
         if (onOK && canOK()) onOK(user, forcedPwd || password)
     }
 
+    // Helper function for backward compatibility
+    // TextField2 now supports both strings and React elements
     function tx(txt) {
+        // For TextField2, we can pass strings directly for better performance
+        // But keep this function for backward compatibility with other components
         return <Text>{txt}</Text>
     }
 
-    function changeUser(id, value) {
+    function changeUser(_, value) {
         setUser(value)
     }
-    
-    function changePassword(id, value) {
+
+    function changePassword(_, value) {
         setPassword(value)
     }
 
     return (
         <div className="login-box">
             <main>
-                <TextField label={tx(userLabel)} value={user} onChange={changeUser} onEnter={ok} outlined autoComplete="on" />
-                <TextField id="loginbox-password" label={tx(passwordLabel)} value={password} onChange={changePassword} onEnter={ok} type="password" outlined autoComplete="on" />
+                <TextField
+                    id="loginbox-user"
+                    label={tx(userLabel)}
+                    value={user}
+                    onChange={changeUser}
+                    onEnter={ok}
+                    outlined
+                    autoComplete="username"
+                    required
+                />
+                <TextField
+                    id="loginbox-password"
+                    label={tx(passwordLabel)}
+                    value={password}
+                    onChange={changePassword}
+                    onEnter={ok}
+                    type="password"
+                    outlined
+                    autoComplete="current-password"
+                    required
+                />
             </main>
             <footer>
                 { loading ? <div className="load-box"><Icon icon="refresh" /></div> : null }