ywana-core8 0.1.74 → 0.1.76

package/src/html/text.css

@@ -0,0 +1,375 @@
+/* Enhanced Text Component Styles */
+
+.text {
+    display: inline;
+    font-family: inherit;
+    line-height: inherit;
+    margin: 0;
+    padding: 0;
+    transition: color 0.2s ease;
+}
+
+/* Size variants */
+.text--xs {
+    font-size: 0.75rem;
+    line-height: 1.2;
+}
+
+.text--sm {
+    font-size: 0.875rem;
+    line-height: 1.25;
+}
+
+.text--md {
+    font-size: 1rem;
+    line-height: 1.5;
+}
+
+.text--lg {
+    font-size: 1.125rem;
+    line-height: 1.5;
+}
+
+.text--xl {
+    font-size: 1.25rem;
+    line-height: 1.4;
+}
+
+.text--xxl {
+    font-size: 1.5rem;
+    line-height: 1.3;
+}
+
+/* Weight variants */
+.text--light {
+    font-weight: 300;
+}
+
+.text--normal {
+    font-weight: 400;
+}
+
+.text--medium {
+    font-weight: 500;
+}
+
+.text--semibold {
+    font-weight: 600;
+}
+
+.text--bold {
+    font-weight: 700;
+}
+
+/* Color variants */
+.text--primary {
+    color: var(--primary-color, #2196f3);
+}
+
+.text--secondary {
+    color: var(--secondary-color, #757575);
+}
+
+.text--success {
+    color: var(--success-color, #4caf50);
+}
+
+.text--warning {
+    color: var(--warning-color, #ff9800);
+}
+
+.text--error {
+    color: var(--error-color, #f44336);
+}
+
+.text--muted {
+    color: var(--text-color-light, #666666);
+}
+
+/* Alignment variants */
+.text--left {
+    text-align: left;
+}
+
+.text--center {
+    text-align: center;
+}
+
+.text--right {
+    text-align: right;
+}
+
+.text--justify {
+    text-align: justify;
+}
+
+/* Transform variants */
+.text--capitalize {
+    text-transform: capitalize;
+}
+
+.text--uppercase {
+    text-transform: uppercase;
+}
+
+.text--lowercase {
+    text-transform: lowercase;
+}
+
+/* Decoration variants */
+.text--underline {
+    text-decoration: underline;
+}
+
+.text--line-through {
+    text-decoration: line-through;
+}
+
+/* State variants */
+.text--truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+}
+
+.text--no-select {
+    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+}
+
+.text--copyable {
+    cursor: pointer;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+}
+
+.text--copyable:hover {
+    background-color: var(--hover-color, rgba(0, 0, 0, 0.04));
+    border-radius: 2px;
+    padding: 0.125rem 0.25rem;
+    margin: -0.125rem -0.25rem;
+}
+
+.text--copyable:focus {
+    outline: 2px solid var(--primary-color, #2196f3);
+    outline-offset: 2px;
+    border-radius: 2px;
+}
+
+.text--loading {
+    opacity: 0.7;
+    pointer-events: none;
+}
+
+.text--skeleton {
+    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+    background-size: 200% 100%;
+    animation: skeleton-loading 1.5s infinite;
+    border-radius: 2px;
+    color: transparent;
+    user-select: none;
+}
+
+/* Copy indicator */
+.text__copy-indicator {
+    opacity: 0;
+    transition: opacity 0.2s ease;
+    font-size: 0.8em;
+}
+
+.text--copyable:hover .text__copy-indicator {
+    opacity: 0.6;
+}
+
+/* Skeleton placeholder */
+.text__skeleton {
+    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+    background-size: 200% 100%;
+    animation: skeleton-loading 1.5s infinite;
+    border-radius: 2px;
+    color: transparent;
+    user-select: none;
+    display: inline-block;
+    min-width: 4rem;
+    min-height: 1em;
+}
+
+/* Animations */
+@keyframes skeleton-loading {
+    0% {
+        background-position: 200% 0;
+    }
+    100% {
+        background-position: -200% 0;
+    }
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .text--xs {
+        font-size: 0.7rem;
+    }
+    
+    .text--sm {
+        font-size: 0.8rem;
+    }
+    
+    .text--md {
+        font-size: 0.9rem;
+    }
+    
+    .text--lg {
+        font-size: 1rem;
+    }
+    
+    .text--xl {
+        font-size: 1.1rem;
+    }
+    
+    .text--xxl {
+        font-size: 1.25rem;
+    }
+    
+    .text--copyable:hover {
+        padding: 0.25rem;
+        margin: -0.25rem;
+    }
+}
+
+/* Dark Theme Support */
+@media (prefers-color-scheme: dark) {
+    .text--primary {
+        color: var(--primary-color-dark, #64b5f6);
+    }
+    
+    .text--secondary {
+        color: var(--secondary-color-dark, #bdbdbd);
+    }
+    
+    .text--success {
+        color: var(--success-color-dark, #81c784);
+    }
+    
+    .text--warning {
+        color: var(--warning-color-dark, #ffb74d);
+    }
+    
+    .text--error {
+        color: var(--error-color-dark, #e57373);
+    }
+    
+    .text--muted {
+        color: var(--text-color-light-dark, #cccccc);
+    }
+    
+    .text--copyable:hover {
+        background-color: var(--hover-color-dark, rgba(255, 255, 255, 0.08));
+    }
+    
+    .text--skeleton,
+    .text__skeleton {
+        background: linear-gradient(90deg, #424242 25%, #616161 50%, #424242 75%);
+        background-size: 200% 100%;
+    }
+}
+
+/* High Contrast Mode */
+@media (prefers-contrast: high) {
+    .text--copyable:focus {
+        outline-width: 3px;
+        outline-color: currentColor;
+    }
+    
+    .text--primary,
+    .text--secondary,
+    .text--success,
+    .text--warning,
+    .text--error {
+        font-weight: 600;
+    }
+    
+    .text--underline {
+        text-decoration-thickness: 2px;
+    }
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+    .text {
+        transition: none;
+    }
+    
+    .text--skeleton,
+    .text__skeleton {
+        animation: none;
+        background: #e0e0e0;
+    }
+    
+    .text__copy-indicator {
+        transition: none;
+    }
+}
+
+/* Print Styles */
+@media print {
+    .text {
+        color: black !important;
+        background: transparent !important;
+    }
+    
+    .text--copyable {
+        cursor: default !important;
+    }
+    
+    .text__copy-indicator {
+        display: none !important;
+    }
+    
+    .text--skeleton,
+    .text__skeleton {
+        background: #f0f0f0 !important;
+        animation: none !important;
+    }
+    
+    .text--primary,
+    .text--secondary,
+    .text--success,
+    .text--warning,
+    .text--error,
+    .text--muted {
+        color: black !important;
+    }
+}
+
+/* Focus visible for better accessibility */
+.text--copyable:focus-visible {
+    outline: 2px solid var(--primary-color, #2196f3);
+    outline-offset: 2px;
+}
+
+/* Selection styling */
+.text::selection {
+    background-color: var(--primary-color-light, rgba(33, 150, 243, 0.2));
+    color: inherit;
+}
+
+/* Ensure proper line height for different sizes */
+.text--xs,
+.text--sm {
+    line-height: 1.4;
+}
+
+.text--md {
+    line-height: 1.5;
+}
+
+.text--lg,
+.text--xl,
+.text--xxl {
+    line-height: 1.3;
+}

package/src/html/text.js

@@ -1,5 +1,7 @@
-import React, { useContext } from "react"
+import React, { useContext, useMemo, useCallback } from "react"
+import PropTypes from 'prop-types'
 import { SiteContext } from "../site/siteContext"
+import './text.css'
 
 export const TEXTFORMATS = {
   NONE: '',
@@ -10,39 +12,328 @@ export const TEXTFORMATS = {
   HTML: 'HTML',
   URL: 'URL',
   STRING: 'string',
+  // New formats
+  CURRENCY: 'currency',
+  PERCENTAGE: 'percentage',
+  PHONE: 'phone',
+  CAPITALIZE: 'capitalize',
+  UPPERCASE: 'uppercase',
+  LOWERCASE: 'lowercase',
+  TRUNCATE: 'truncate',
+  MARKDOWN: 'markdown'
 }
 
 /**
- * Text
+ * Enhanced Text component with improved functionality while maintaining 100% compatibility
  */
-export const Text = ({ format = TEXTFORMATS.HTML, children, className }) => {
+export const Text = (props) => {
+  const {
+    // Original props (100% compatible)
+    format = TEXTFORMATS.HTML,
+    children,
+    className,
+    // New enhanced props (all optional for compatibility)
+    size,
+    weight,
+    color,
+    align,
+    transform,
+    decoration,
+    truncate,
+    maxLength,
+    locale,
+    currency = 'USD',
+    minimumFractionDigits,
+    maximumFractionDigits,
+    dateStyle = 'medium',
+    timeStyle = 'medium',
+    fallback = '',
+    loading = false,
+    skeleton = false,
+    copyable = false,
+    selectable = true,
+    as = 'span',
+    style,
+    onClick,
+    ...restProps
+  } = props
 
   const site = useContext(SiteContext)
-  let value = children
 
-  if (site) {
-    const { lang, dictionary = {} } = site
-    const term = dictionary[children]
-    const text = term ? term[lang] : children
-    if (text) value = text
-  }
+  // Memoize formatted value for performance
+  const formattedValue = useMemo(() => {
+    let value = children
+
+    // Handle empty/null values
+    if (children === null || children === undefined || children === '') {
+      return fallback || ''
+    }
+
+    // Internationalization (maintaining original logic)
+    if (site) {
+      const { lang, dictionary = {} } = site
+      const term = dictionary[children]
+      const text = term ? term[lang] : children
+      if (text) value = text
+    }
+
+    // Use provided locale or site locale or browser locale
+    const currentLocale = locale || (site && site.lang) || navigator.language || 'en-US'
+
+    try {
+      switch (format) {
+        case TEXTFORMATS.NUMERIC: {
+          const formatter = new Intl.NumberFormat(currentLocale, {
+            minimumFractionDigits,
+            maximumFractionDigits
+          })
+          return formatter.format(Number(children))
+        }
+
+        case TEXTFORMATS.CURRENCY: {
+          const formatter = new Intl.NumberFormat(currentLocale, {
+            style: 'currency',
+            currency,
+            minimumFractionDigits,
+            maximumFractionDigits
+          })
+          return formatter.format(Number(children))
+        }
+
+        case TEXTFORMATS.PERCENTAGE: {
+          const formatter = new Intl.NumberFormat(currentLocale, {
+            style: 'percent',
+            minimumFractionDigits,
+            maximumFractionDigits
+          })
+          return formatter.format(Number(children) / 100)
+        }
+
+        case TEXTFORMATS.DATE: {
+          const date = new Date(children)
+          if (isNaN(date.getTime())) return String(children)
+          return date.toLocaleDateString(currentLocale, { dateStyle })
+        }
+
+        case TEXTFORMATS.TIME: {
+          const date = new Date(children)
+          if (isNaN(date.getTime())) return String(children)
+          return date.toLocaleTimeString(currentLocale, { timeStyle })
+        }
+
+        case TEXTFORMATS.EMAIL: {
+          return String(value)
+        }
+
+        case TEXTFORMATS.PHONE: {
+          // Basic phone formatting for US numbers
+          const cleaned = String(value).replace(/\D/g, '')
+          if (cleaned.length === 10) {
+            return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3, 6)}-${cleaned.slice(6)}`
+          }
+          return String(value)
+        }
+
+        case TEXTFORMATS.URL: {
+          return String(value)
+        }
+
+        case TEXTFORMATS.CAPITALIZE: {
+          return String(value).charAt(0).toUpperCase() + String(value).slice(1).toLowerCase()
+        }
+
+        case TEXTFORMATS.UPPERCASE: {
+          return String(value).toUpperCase()
+        }
 
-  const formatter = Intl.NumberFormat()
-  switch (format) {
-    case TEXTFORMATS.NUMERIC: value = formatter.format(children); break;
+        case TEXTFORMATS.LOWERCASE: {
+          return String(value).toLowerCase()
+        }
+
+        case TEXTFORMATS.TRUNCATE: {
+          const text = String(value)
+          if (maxLength && text.length > maxLength) {
+            return text.slice(0, maxLength) + '...'
+          }
+          return text
+        }
+
+        case TEXTFORMATS.STRING: {
+          return String(value)
+        }
+
+        case TEXTFORMATS.HTML:
+        default: {
+          return String(value)
+        }
+      }
+    } catch (error) {
+      console.warn('Text formatting error:', error)
+      return String(value)
+    }
+  }, [children, format, site, locale, currency, minimumFractionDigits, maximumFractionDigits, dateStyle, timeStyle, maxLength, fallback])
+
+  // Handle copy functionality
+  const handleCopy = useCallback(async () => {
+    if (!copyable || !formattedValue) return
+
+    try {
+      await navigator.clipboard.writeText(formattedValue)
+      // Could trigger a toast notification here
+    } catch (error) {
+      console.warn('Failed to copy text:', error)
+    }
+  }, [copyable, formattedValue])
+
+  // Handle click
+  const handleClick = useCallback((event) => {
+    if (copyable) {
+      handleCopy()
+    }
+    if (onClick) {
+      onClick(event)
+    }
+  }, [copyable, handleCopy, onClick])
+
+  // Generate CSS classes
+  const cssClasses = [
+    'text',
+    size && `text--${size}`,
+    weight && `text--${weight}`,
+    color && `text--${color}`,
+    align && `text--${align}`,
+    transform && `text--${transform}`,
+    decoration && `text--${decoration}`,
+    truncate && 'text--truncate',
+    loading && 'text--loading',
+    skeleton && 'text--skeleton',
+    copyable && 'text--copyable',
+    !selectable && 'text--no-select',
+    className
+  ].filter(Boolean).join(' ')
+
+  // Generate inline styles
+  const inlineStyle = {
+    ...style
   }
 
-  switch (format) {
-    case TEXTFORMATS.DATE: value = new Date(children).toLocaleDateString(); break;
-    case TEXTFORMATS.TIME: value = new Date(children).toLocaleTimeString(); break;
+  // Handle loading state
+  if (loading || skeleton) {
+    const Component = as
+    return (
+      <Component
+        className={cssClasses}
+        style={inlineStyle}
+        {...restProps}
+      >
+        <span className="text__skeleton">
+          {skeleton ? '████████' : 'Loading...'}
+        </span>
+      </Component>
+    )
   }
 
-  if (!children) return ''
+  // Handle empty content (maintaining original logic)
+  if (!children && !fallback) return ''
 
-  switch (format) {
-    case TEXTFORMATS.STRING: return value
-    default: return <span className={className}>{value}</span>
+  // Return string for STRING format (maintaining original logic)
+  if (format === TEXTFORMATS.STRING) {
+    return formattedValue
   }
 
+  // Render as component
+  const Component = as
+
+  return (
+    <Component
+      className={cssClasses}
+      style={inlineStyle}
+      onClick={handleClick}
+      title={copyable ? 'Click to copy' : undefined}
+      role={copyable ? 'button' : undefined}
+      tabIndex={copyable ? 0 : undefined}
+      {...restProps}
+    >
+      {formattedValue}
+      {copyable && (
+        <span className="text__copy-indicator" aria-hidden="true">
+          📋
+        </span>
+      )}
+    </Component>
+  )
+}
+
+// PropTypes
+Text.propTypes = {
+  /** Text format */
+  format: PropTypes.oneOf(Object.values(TEXTFORMATS)),
+  /** Text content */
+  children: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.node
+  ]),
+  /** Additional CSS classes */
+  className: PropTypes.string,
+  /** Text size */
+  size: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', 'xxl']),
+  /** Font weight */
+  weight: PropTypes.oneOf(['light', 'normal', 'medium', 'semibold', 'bold']),
+  /** Text color */
+  color: PropTypes.oneOf(['primary', 'secondary', 'success', 'warning', 'error', 'muted']),
+  /** Text alignment */
+  align: PropTypes.oneOf(['left', 'center', 'right', 'justify']),
+  /** Text transform */
+  transform: PropTypes.oneOf(['none', 'capitalize', 'uppercase', 'lowercase']),
+  /** Text decoration */
+  decoration: PropTypes.oneOf(['none', 'underline', 'line-through']),
+  /** Enable truncation */
+  truncate: PropTypes.bool,
+  /** Maximum length for truncation */
+  maxLength: PropTypes.number,
+  /** Locale for formatting */
+  locale: PropTypes.string,
+  /** Currency code for currency format */
+  currency: PropTypes.string,
+  /** Minimum fraction digits for numbers */
+  minimumFractionDigits: PropTypes.number,
+  /** Maximum fraction digits for numbers */
+  maximumFractionDigits: PropTypes.number,
+  /** Date formatting style */
+  dateStyle: PropTypes.oneOf(['full', 'long', 'medium', 'short']),
+  /** Time formatting style */
+  timeStyle: PropTypes.oneOf(['full', 'long', 'medium', 'short']),
+  /** Fallback text for empty values */
+  fallback: PropTypes.string,
+  /** Loading state */
+  loading: PropTypes.bool,
+  /** Skeleton placeholder */
+  skeleton: PropTypes.bool,
+  /** Enable copy functionality */
+  copyable: PropTypes.bool,
+  /** Enable text selection */
+  selectable: PropTypes.bool,
+  /** HTML element to render as */
+  as: PropTypes.string,
+  /** Inline styles */
+  style: PropTypes.object,
+  /** Click handler */
+  onClick: PropTypes.func
 }
 
+Text.defaultProps = {
+  format: TEXTFORMATS.HTML,
+  currency: 'USD',
+  dateStyle: 'medium',
+  timeStyle: 'medium',
+  fallback: '',
+  loading: false,
+  skeleton: false,
+  copyable: false,
+  selectable: true,
+  as: 'span'
+}
+
+export default Text
+