@tamyla/ui-components-react
Version:
React-based UI component library with Factory Bridge pattern - integrates seamlessly with @tamyla/ui-components. Enhanced AI agent discoverability with structured component registry, comprehensive Storybook (8 components), and detailed guides.
427 lines (398 loc) • 23.1 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Visual Component Test - UI Components React</title>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
margin: 0;
padding: 20px;
background: linear-gradient(135deg, #2D1B69 0%, #11998e 100%);
min-height: 100vh;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: white;
border-radius: 12px;
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
overflow: hidden;
}
.header {
background: linear-gradient(135deg, #2D1B69 0%, #11998e 100%);
color: white;
padding: 30px;
text-align: center;
}
.section {
padding: 30px;
border-bottom: 1px solid #eee;
}
.section:last-child {
border-bottom: none;
}
.section-title {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 20px;
color: #2D1B69;
}
.component-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-top: 20px;
}
.component-demo {
border: 1px solid #e1e5e9;
border-radius: 8px;
padding: 20px;
background: #f8f9fa;
}
.component-name {
font-weight: bold;
margin-bottom: 15px;
color: #495057;
}
.demo-content {
min-height: 60px;
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>🎨 Visual Component Test</h1>
<p>See how each React component actually renders</p>
</div>
<div id="react-app"></div>
</div>
<script type="text/babel">
const { useState, useEffect } = React;
// Actual component implementations that will render
const Button = ({ children, variant = 'primary', size = 'medium', onClick, disabled = false, ...props }) => {
const baseStyles = {
border: 'none',
borderRadius: '6px',
cursor: disabled ? 'not-allowed' : 'pointer',
fontWeight: '500',
transition: 'all 0.2s ease',
opacity: disabled ? 0.6 : 1,
fontFamily: 'inherit'
};
const variants = {
primary: { background: '#2D1B69', color: 'white' },
secondary: { background: '#11998e', color: 'white' },
danger: { background: '#dc3545', color: 'white' },
success: { background: '#28a745', color: 'white' },
warning: { background: '#ffc107', color: '#212529' },
outline: { background: 'transparent', color: '#2D1B69', border: '2px solid #2D1B69' }
};
const sizes = {
small: { padding: '6px 12px', fontSize: '14px' },
medium: { padding: '10px 20px', fontSize: '16px' },
large: { padding: '14px 28px', fontSize: '18px' }
};
const style = {
...baseStyles,
...variants[variant],
...sizes[size],
...props.style
};
return React.createElement('button', { onClick, disabled, style }, children);
};
const Input = ({ placeholder = 'Enter text...', type = 'text', value, onChange, disabled = false, ...props }) => {
const style = {
width: '100%',
maxWidth: '250px',
padding: '10px 12px',
border: '1px solid #ced4da',
borderRadius: '6px',
fontSize: '16px',
fontFamily: 'inherit',
transition: 'border-color 0.2s ease',
backgroundColor: disabled ? '#f8f9fa' : 'white',
cursor: disabled ? 'not-allowed' : 'text',
...props.style
};
return React.createElement('input', {
type,
placeholder,
value,
onChange,
disabled,
style
});
};
const Card = ({ children, shadow = true, ...props }) => {
const style = {
background: 'white',
borderRadius: '8px',
padding: '20px',
boxShadow: shadow ? '0 2px 10px rgba(0,0,0,0.1)' : 'none',
border: '1px solid #e1e5e9',
...props.style
};
return React.createElement('div', { style }, children);
};
const Avatar = ({ initials = 'U', size = 40, variant = 'circle' }) => {
const style = {
width: size,
height: size,
borderRadius: variant === 'circle' ? '50%' : '8px',
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: 'white',
fontWeight: 'bold',
fontSize: size / 2.5,
fontFamily: 'inherit'
};
return React.createElement('div', { style }, initials);
};
const Badge = ({ children, variant = 'primary', size = 'medium' }) => {
const variants = {
primary: { background: '#2D1B69', color: 'white' },
success: { background: '#28a745', color: 'white' },
warning: { background: '#ffc107', color: '#212529' },
danger: { background: '#dc3545', color: 'white' },
info: { background: '#17a2b8', color: 'white' }
};
const sizes = {
small: { padding: '2px 6px', fontSize: '10px' },
medium: { padding: '4px 8px', fontSize: '12px' },
large: { padding: '6px 12px', fontSize: '14px' }
};
const style = {
borderRadius: '12px',
fontWeight: '500',
display: 'inline-block',
fontFamily: 'inherit',
...variants[variant],
...sizes[size]
};
return React.createElement('span', { style }, children);
};
const Alert = ({ children, variant = 'info', dismissible = false, onDismiss }) => {
const variants = {
success: { bg: '#d4edda', border: '#c3e6cb', color: '#155724' },
warning: { bg: '#fff3cd', border: '#ffeaa7', color: '#856404' },
danger: { bg: '#f8d7da', border: '#f5c6cb', color: '#721c24' },
info: { bg: '#cce8f4', border: '#b3d9ed', color: '#0c5460' }
};
const style = {
padding: '12px 16px',
borderRadius: '6px',
border: `1px solid ${variants[variant].border}`,
backgroundColor: variants[variant].bg,
color: variants[variant].color,
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
fontFamily: 'inherit'
};
return React.createElement('div', { style }, [
React.createElement('span', { key: 'content' }, children),
dismissible && React.createElement('button', {
key: 'dismiss',
onClick: onDismiss,
style: {
background: 'none',
border: 'none',
color: variants[variant].color,
cursor: 'pointer',
fontSize: '18px',
padding: '0',
marginLeft: '10px'
}
}, '×')
]);
};
// Component showcase
const ComponentShowcase = () => {
const [inputValue, setInputValue] = useState('Sample text');
const [alertVisible, setAlertVisible] = useState(true);
return React.createElement('div', null, [
// Buttons Section
React.createElement('div', { key: 'buttons', className: 'section' }, [
React.createElement('div', { key: 'title', className: 'section-title' }, '🔘 Buttons'),
React.createElement('div', { key: 'grid', className: 'component-grid' }, [
React.createElement('div', { key: 'primary', className: 'component-demo' }, [
React.createElement('div', { key: 'name', className: 'component-name' }, 'Primary Buttons'),
React.createElement('div', { key: 'content', className: 'demo-content' }, [
React.createElement(Button, { key: 'small', size: 'small' }, 'Small'),
React.createElement(Button, { key: 'medium' }, 'Medium'),
React.createElement(Button, { key: 'large', size: 'large' }, 'Large')
])
]),
React.createElement('div', { key: 'variants', className: 'component-demo' }, [
React.createElement('div', { key: 'name', className: 'component-name' }, 'Button Variants'),
React.createElement('div', { key: 'content', className: 'demo-content' }, [
React.createElement(Button, { key: 'primary', variant: 'primary' }, 'Primary'),
React.createElement(Button, { key: 'secondary', variant: 'secondary' }, 'Secondary'),
React.createElement(Button, { key: 'success', variant: 'success' }, 'Success'),
React.createElement(Button, { key: 'danger', variant: 'danger' }, 'Danger'),
React.createElement(Button, { key: 'warning', variant: 'warning' }, 'Warning')
])
]),
React.createElement('div', { key: 'states', className: 'component-demo' }, [
React.createElement('div', { key: 'name', className: 'component-name' }, 'Button States'),
React.createElement('div', { key: 'content', className: 'demo-content' }, [
React.createElement(Button, { key: 'normal' }, 'Normal'),
React.createElement(Button, { key: 'disabled', disabled: true }, 'Disabled'),
React.createElement(Button, { key: 'outline', variant: 'outline' }, 'Outline')
])
])
])
]),
// Inputs Section
React.createElement('div', { key: 'inputs', className: 'section' }, [
React.createElement('div', { key: 'title', className: 'section-title' }, '📝 Input Components'),
React.createElement('div', { key: 'grid', className: 'component-grid' }, [
React.createElement('div', { key: 'basic', className: 'component-demo' }, [
React.createElement('div', { key: 'name', className: 'component-name' }, 'Text Inputs'),
React.createElement('div', { key: 'content', className: 'demo-content', style: { flexDirection: 'column', alignItems: 'flex-start' } }, [
React.createElement(Input, {
key: 'text',
placeholder: 'Enter your name',
value: inputValue,
onChange: (e) => setInputValue(e.target.value)
}),
React.createElement('div', { key: 'value', style: { marginTop: '10px', fontSize: '14px', color: '#666' } },
`Current value: "${inputValue}"`)
])
]),
React.createElement('div', { key: 'types', className: 'component-demo' }, [
React.createElement('div', { key: 'name', className: 'component-name' }, 'Input Types'),
React.createElement('div', { key: 'content', className: 'demo-content', style: { flexDirection: 'column', alignItems: 'flex-start', gap: '10px' } }, [
React.createElement(Input, { key: 'email', type: 'email', placeholder: 'Enter email' }),
React.createElement(Input, { key: 'password', type: 'password', placeholder: 'Enter password' }),
React.createElement(Input, { key: 'number', type: 'number', placeholder: 'Enter number' })
])
]),
React.createElement('div', { key: 'disabled', className: 'component-demo' }, [
React.createElement('div', { key: 'name', className: 'component-name' }, 'Disabled Input'),
React.createElement('div', { key: 'content', className: 'demo-content' }, [
React.createElement(Input, { key: 'disabled', disabled: true, placeholder: 'Disabled input' })
])
])
])
]),
// Avatars Section
React.createElement('div', { key: 'avatars', className: 'section' }, [
React.createElement('div', { key: 'title', className: 'section-title' }, '👤 Avatars'),
React.createElement('div', { key: 'grid', className: 'component-grid' }, [
React.createElement('div', { key: 'sizes', className: 'component-demo' }, [
React.createElement('div', { key: 'name', className: 'component-name' }, 'Avatar Sizes'),
React.createElement('div', { key: 'content', className: 'demo-content' }, [
React.createElement(Avatar, { key: 'small', initials: 'S', size: 30 }),
React.createElement(Avatar, { key: 'medium', initials: 'M', size: 40 }),
React.createElement(Avatar, { key: 'large', initials: 'L', size: 50 }),
React.createElement(Avatar, { key: 'xl', initials: 'XL', size: 60 })
])
]),
React.createElement('div', { key: 'variants', className: 'component-demo' }, [
React.createElement('div', { key: 'name', className: 'component-name' }, 'Avatar Variants'),
React.createElement('div', { key: 'content', className: 'demo-content' }, [
React.createElement(Avatar, { key: 'circle', initials: 'C', variant: 'circle' }),
React.createElement(Avatar, { key: 'square', initials: 'S', variant: 'square' })
])
])
])
]),
// Badges Section
React.createElement('div', { key: 'badges', className: 'section' }, [
React.createElement('div', { key: 'title', className: 'section-title' }, '🏷️ Badges'),
React.createElement('div', { key: 'grid', className: 'component-grid' }, [
React.createElement('div', { key: 'variants', className: 'component-demo' }, [
React.createElement('div', { key: 'name', className: 'component-name' }, 'Badge Variants'),
React.createElement('div', { key: 'content', className: 'demo-content' }, [
React.createElement(Badge, { key: 'primary', variant: 'primary' }, 'Primary'),
React.createElement(Badge, { key: 'success', variant: 'success' }, 'Success'),
React.createElement(Badge, { key: 'warning', variant: 'warning' }, 'Warning'),
React.createElement(Badge, { key: 'danger', variant: 'danger' }, 'Danger'),
React.createElement(Badge, { key: 'info', variant: 'info' }, 'Info')
])
]),
React.createElement('div', { key: 'sizes', className: 'component-demo' }, [
React.createElement('div', { key: 'name', className: 'component-name' }, 'Badge Sizes'),
React.createElement('div', { key: 'content', className: 'demo-content' }, [
React.createElement(Badge, { key: 'small', size: 'small' }, 'Small'),
React.createElement(Badge, { key: 'medium', size: 'medium' }, 'Medium'),
React.createElement(Badge, { key: 'large', size: 'large' }, 'Large')
])
])
])
]),
// Cards Section
React.createElement('div', { key: 'cards', className: 'section' }, [
React.createElement('div', { key: 'title', className: 'section-title' }, '🃏 Cards'),
React.createElement('div', { key: 'grid', className: 'component-grid' }, [
React.createElement('div', { key: 'basic', className: 'component-demo' }, [
React.createElement('div', { key: 'name', className: 'component-name' }, 'Basic Card'),
React.createElement('div', { key: 'content', className: 'demo-content' }, [
React.createElement(Card, { key: 'card' }, [
React.createElement('h4', { key: 'title', style: { margin: '0 0 10px 0' } }, 'Card Title'),
React.createElement('p', { key: 'text', style: { margin: '0', color: '#666' } }, 'This is a card with shadow and border.')
])
])
]),
React.createElement('div', { key: 'no-shadow', className: 'component-demo' }, [
React.createElement('div', { key: 'name', className: 'component-name' }, 'Card Without Shadow'),
React.createElement('div', { key: 'content', className: 'demo-content' }, [
React.createElement(Card, { key: 'card', shadow: false }, [
React.createElement('h4', { key: 'title', style: { margin: '0 0 10px 0' } }, 'No Shadow'),
React.createElement('p', { key: 'text', style: { margin: '0', color: '#666' } }, 'This card has no shadow.')
])
])
])
])
]),
// Alerts Section
React.createElement('div', { key: 'alerts', className: 'section' }, [
React.createElement('div', { key: 'title', className: 'section-title' }, '⚠️ Alerts'),
React.createElement('div', { key: 'grid', className: 'component-grid' }, [
React.createElement('div', { key: 'variants', className: 'component-demo' }, [
React.createElement('div', { key: 'name', className: 'component-name' }, 'Alert Variants'),
React.createElement('div', { key: 'content', className: 'demo-content', style: { flexDirection: 'column', gap: '10px' } }, [
React.createElement(Alert, { key: 'success', variant: 'success' }, 'Success: Operation completed!'),
React.createElement(Alert, { key: 'warning', variant: 'warning' }, 'Warning: Please check your input.'),
React.createElement(Alert, { key: 'danger', variant: 'danger' }, 'Error: Something went wrong.'),
React.createElement(Alert, { key: 'info', variant: 'info' }, 'Info: Here\'s some information.')
])
]),
React.createElement('div', { key: 'dismissible', className: 'component-demo' }, [
React.createElement('div', { key: 'name', className: 'component-name' }, 'Dismissible Alert'),
React.createElement('div', { key: 'content', className: 'demo-content' }, [
alertVisible && React.createElement(Alert, {
key: 'alert',
variant: 'info',
dismissible: true,
onDismiss: () => setAlertVisible(false)
}, 'Click × to dismiss this alert'),
!alertVisible && React.createElement(Button, {
key: 'restore',
onClick: () => setAlertVisible(true),
size: 'small'
}, 'Show Alert Again')
])
])
])
])
]);
};
// Render the app
ReactDOM.render(React.createElement(ComponentShowcase), document.getElementById('react-app'));
</script>
</body>
</html>