@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.
561 lines (531 loc) • 27.4 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tamyla React UI Components - Complete Showcase</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>
<script src="https://unpkg.com/redux@4.2.1/dist/redux.min.js"></script>
<script src="https://unpkg.com/react-redux@8.1.3/dist/react-redux.min.js"></script>
<script src="https://unpkg.com/@reduxjs/toolkit@1.9.7/dist/redux-toolkit.umd.min.js"></script>
<script src="https://unpkg.com/styled-components@6.1.8/dist/styled-components.min.js"></script>
<script src="https://unpkg.com/framer-motion@10.16.16/dist/framer-motion.min.js"></script>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
margin: 0;
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
}
.showcase-container {
max-width: 1200px;
margin: 0 auto;
background: white;
border-radius: 12px;
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
overflow: hidden;
}
.showcase-header {
background: linear-gradient(135deg, #2D1B69 0%, #11998e 100%);
color: white;
padding: 40px;
text-align: center;
}
.showcase-header h1 {
margin: 0;
font-size: 2.5rem;
font-weight: 700;
}
.showcase-header p {
margin: 10px 0 0;
opacity: 0.9;
font-size: 1.1rem;
}
.component-section {
padding: 40px;
border-bottom: 1px solid #eee;
}
.component-section:last-child {
border-bottom: none;
}
.section-title {
font-size: 1.8rem;
font-weight: 600;
margin-bottom: 20px;
color: #2D1B69;
display: flex;
align-items: center;
gap: 10px;
}
.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-title {
font-weight: 600;
margin-bottom: 15px;
color: #495057;
}
.error-boundary {
border: 2px dashed #ff6b6b;
border-radius: 8px;
padding: 20px;
background: #fff5f5;
color: #c92a2a;
text-align: center;
}
.loading-state {
display: flex;
align-items: center;
justify-content: center;
min-height: 100px;
color: #666;
}
.integration-showcase {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 40px;
text-align: center;
}
.factory-bridge-demo {
background: white;
color: #333;
border-radius: 12px;
padding: 30px;
margin: 20px 0;
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
</style>
</head>
<body>
<div class="showcase-container">
<div class="showcase-header">
<h1>🎨 Tamyla React UI Components</h1>
<p>Comprehensive showcase of React components with Factory Bridge integration</p>
<p><strong>Version:</strong> 1.0.0 | <strong>React:</strong> 18 | <strong>TypeScript:</strong> ✅</p>
</div>
<!-- Loading State -->
<div id="loading" class="loading-state">
<div>🔄 Loading React components and Factory Bridge...</div>
</div>
<!-- Main React App Container -->
<div id="react-app" style="display: none;"></div>
</div>
<!-- React Application -->
<script type="text/babel">
const { useState, useEffect, createContext, useContext, useReducer } = React;
const { Provider, useSelector, useDispatch } = ReactRedux;
const { configureStore, createSlice } = RTK;
const styled = window.styled;
// Mock Tamyla UI Components (simulating the ui-components library)
const TamylaUIComponents = {
Button: ({ children, variant = 'primary', size = 'medium', onClick, ...props }) => (
React.createElement('button', {
onClick,
style: {
background: variant === 'primary' ? '#2D1B69' : variant === 'secondary' ? '#11998e' : '#6c757d',
color: 'white',
border: 'none',
borderRadius: '6px',
padding: size === 'small' ? '8px 16px' : size === 'large' ? '16px 32px' : '12px 24px',
fontSize: size === 'small' ? '14px' : size === 'large' ? '18px' : '16px',
cursor: 'pointer',
fontWeight: '500',
transition: 'all 0.2s ease',
...props.style
},
...props
}, children)
),
Card: ({ children, ...props }) => (
React.createElement('div', {
style: {
background: 'white',
borderRadius: '8px',
padding: '20px',
boxShadow: '0 2px 10px rgba(0,0,0,0.1)',
border: '1px solid #e1e5e9',
...props.style
},
...props
}, children)
),
Input: ({ placeholder, value, onChange, type = 'text', ...props }) => (
React.createElement('input', {
type,
placeholder,
value,
onChange,
style: {
width: '100%',
padding: '12px',
border: '1px solid #ced4da',
borderRadius: '6px',
fontSize: '16px',
transition: 'border-color 0.2s ease',
...props.style
},
...props
})
),
Avatar: ({ src, alt, size = 40 }) => (
React.createElement('div', {
style: {
width: size,
height: size,
borderRadius: '50%',
background: src ? `url(${src})` : 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
backgroundSize: 'cover',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: 'white',
fontWeight: 'bold',
fontSize: size / 2.5
}
}, !src && (alt ? alt.charAt(0).toUpperCase() : 'U'))
),
Badge: ({ children, variant = 'primary' }) => (
React.createElement('span', {
style: {
background: variant === 'success' ? '#28a745' : variant === 'warning' ? '#ffc107' : variant === 'danger' ? '#dc3545' : '#2D1B69',
color: variant === 'warning' ? '#212529' : 'white',
padding: '4px 8px',
borderRadius: '12px',
fontSize: '12px',
fontWeight: '500'
}
}, children)
)
};
// Factory Bridge (simulating the bridge pattern)
const createFactoryComponent = (VanillaComponent) => {
return (props) => {
return React.createElement(VanillaComponent, props);
};
};
// React wrapped components using Factory Bridge
const ReactButton = createFactoryComponent(TamylaUIComponents.Button);
const ReactCard = createFactoryComponent(TamylaUIComponents.Card);
const ReactInput = createFactoryComponent(TamylaUIComponents.Input);
const ReactAvatar = createFactoryComponent(TamylaUIComponents.Avatar);
const ReactBadge = createFactoryComponent(TamylaUIComponents.Badge);
// Redux Store Setup
const themeSlice = createSlice({
name: 'theme',
initialState: {
mode: 'light',
primaryColor: '#2D1B69'
},
reducers: {
toggleTheme: (state) => {
state.mode = state.mode === 'light' ? 'dark' : 'light';
},
setPrimaryColor: (state, action) => {
state.primaryColor = action.payload;
}
}
});
const authSlice = createSlice({
name: 'auth',
initialState: {
user: null,
isAuthenticated: false,
token: null
},
reducers: {
loginSuccess: (state, action) => {
state.user = action.payload.user;
state.token = action.payload.token;
state.isAuthenticated = true;
},
logout: (state) => {
state.user = null;
state.token = null;
state.isAuthenticated = false;
}
}
});
const store = configureStore({
reducer: {
theme: themeSlice.reducer,
auth: authSlice.reducer
}
});
// Styled Components Examples
const StyledContainer = styled.div`
background: ${props => props.theme.mode === 'dark' ? '#1a1a1a' : 'white'};
color: ${props => props.theme.mode === 'dark' ? 'white' : '#333'};
padding: 20px;
border-radius: 8px;
transition: all 0.3s ease;
`;
// Component Sections
const AtomicDesignShowcase = () => {
const [inputValue, setInputValue] = useState('');
const [count, setCount] = useState(0);
const dispatch = useDispatch();
const theme = useSelector(state => state.theme);
const auth = useSelector(state => state.auth);
const handleLogin = () => {
dispatch(authSlice.actions.loginSuccess({
user: { name: 'Demo User', email: 'demo@tamyla.com' },
token: 'demo-token-123'
}));
};
const handleLogout = () => {
dispatch(authSlice.actions.logout());
};
return (
<>
{/* Atoms Section */}
<div className="component-section">
<h2 className="section-title">⚛️ Atoms - Basic Building Blocks</h2>
<div className="component-grid">
<div className="component-demo">
<div className="component-title">Buttons with Factory Bridge</div>
<div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
<ReactButton variant="primary" onClick={() => setCount(count + 1)}>
Primary ({count})
</ReactButton>
<ReactButton variant="secondary" size="small">
Secondary
</ReactButton>
<ReactButton variant="danger" size="large">
Large Danger
</ReactButton>
</div>
</div>
<div className="component-demo">
<div className="component-title">Input Components</div>
<ReactInput
placeholder="Type something..."
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>
<div style={{ marginTop: '10px', fontSize: '14px', color: '#666' }}>
Value: "{inputValue}"
</div>
</div>
<div className="component-demo">
<div className="component-title">Avatars & Badges</div>
<div style={{ display: 'flex', alignItems: 'center', gap: '15px', marginBottom: '15px' }}>
<ReactAvatar alt="John Doe" size={50} />
<ReactAvatar alt="Jane Smith" size={40} />
<ReactAvatar alt="Mike Wilson" size={30} />
</div>
<div style={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
<ReactBadge variant="success">Success</ReactBadge>
<ReactBadge variant="warning">Warning</ReactBadge>
<ReactBadge variant="danger">Danger</ReactBadge>
<ReactBadge variant="primary">Primary</ReactBadge>
</div>
</div>
</div>
</div>
{/* Molecules Section */}
<div className="component-section">
<h2 className="section-title">🧬 Molecules - Composite Components</h2>
<div className="component-grid">
<div className="component-demo">
<ReactCard>
<div className="component-title">User Profile Card</div>
<div style={{ display: 'flex', alignItems: 'center', gap: '15px', marginBottom: '15px' }}>
<ReactAvatar alt="Demo User" size={60} />
<div>
<div style={{ fontWeight: 'bold', fontSize: '18px' }}>Demo User</div>
<div style={{ color: '#666' }}>demo@tamyla.com</div>
<ReactBadge variant="success">Active</ReactBadge>
</div>
</div>
<ReactButton variant="primary" style={{ width: '100%' }}>
View Profile
</ReactButton>
</ReactCard>
</div>
<div className="component-demo">
<ReactCard>
<div className="component-title">Search Form</div>
<div style={{ marginBottom: '15px' }}>
<ReactInput
placeholder="Search components..."
type="search"
/>
</div>
<div style={{ display: 'flex', gap: '10px' }}>
<ReactButton variant="primary" size="small">Search</ReactButton>
<ReactButton variant="secondary" size="small">Clear</ReactButton>
</div>
</ReactCard>
</div>
<div className="component-demo">
<ReactCard>
<div className="component-title">Settings Panel</div>
<div style={{ marginBottom: '15px' }}>
<div style={{ marginBottom: '10px' }}>
<label style={{ display: 'block', marginBottom: '5px', fontWeight: '500' }}>Theme:</label>
<ReactButton
variant={theme.mode === 'light' ? 'primary' : 'secondary'}
size="small"
onClick={() => dispatch(themeSlice.actions.toggleTheme())}
>
{theme.mode === 'light' ? '🌞 Light' : '🌙 Dark'}
</ReactButton>
</div>
</div>
</ReactCard>
</div>
</div>
</div>
{/* Organisms Section */}
<div className="component-section">
<h2 className="section-title">🦠 Organisms - Complex UI Sections</h2>
<div className="component-demo">
<ReactCard>
<div className="component-title">Trading Dashboard Header</div>
<div style={{
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
padding: '20px',
background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
borderRadius: '8px',
color: 'white'
}}>
<div>
<h3 style={{ margin: '0 0 5px 0' }}>Trading Portal</h3>
<p style={{ margin: 0, opacity: 0.9 }}>Welcome back, {auth.user?.name || 'Guest'}</p>
</div>
<div style={{ display: 'flex', alignItems: 'center', gap: '15px' }}>
<ReactBadge variant="success">Online</ReactBadge>
<ReactAvatar alt={auth.user?.name || 'Guest'} size={40} />
{auth.isAuthenticated ? (
<ReactButton variant="danger" size="small" onClick={handleLogout}>
Logout
</ReactButton>
) : (
<ReactButton variant="success" size="small" onClick={handleLogin}>
Login
</ReactButton>
)}
</div>
</div>
</ReactCard>
</div>
</div>
{/* Applications Section */}
<div className="component-section">
<h2 className="section-title">🏗️ Applications - Full Layouts</h2>
<div className="component-demo">
<ReactCard>
<div className="component-title">Complete Trading Interface</div>
<div style={{
display: 'grid',
gridTemplateColumns: '1fr 300px',
gap: '20px',
minHeight: '300px'
}}>
<div>
<h4>Market Data</h4>
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '10px' }}>
<ReactCard style={{ padding: '15px' }}>
<div style={{ fontWeight: 'bold' }}>BTC/USD</div>
<div style={{ fontSize: '18px', color: '#28a745' }}>$45,234.56</div>
<ReactBadge variant="success">+2.34%</ReactBadge>
</ReactCard>
<ReactCard style={{ padding: '15px' }}>
<div style={{ fontWeight: 'bold' }}>ETH/USD</div>
<div style={{ fontSize: '18px', color: '#dc3545' }}>$2,834.12</div>
<ReactBadge variant="danger">-1.23%</ReactBadge>
</ReactCard>
</div>
</div>
<div>
<h4>Quick Actions</h4>
<div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
<ReactButton variant="primary" style={{ width: '100%' }}>Buy</ReactButton>
<ReactButton variant="secondary" style={{ width: '100%' }}>Sell</ReactButton>
<ReactButton variant="outline" style={{ width: '100%' }}>Portfolio</ReactButton>
</div>
</div>
</div>
</ReactCard>
</div>
</div>
</>
);
};
// Integration Showcase
const IntegrationShowcase = () => {
return (
<div className="integration-showcase">
<h2>🔗 Factory Bridge Integration</h2>
<p>Demonstrating seamless integration between vanilla ui-components and React</p>
<div className="factory-bridge-demo">
<h3>🏭 Factory Bridge Pattern</h3>
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '20px', marginTop: '20px' }}>
<div style={{ textAlign: 'center', padding: '20px', background: '#f8f9fa', borderRadius: '8px' }}>
<div style={{ fontSize: '24px', marginBottom: '10px' }}>⚛️</div>
<div style={{ fontWeight: 'bold' }}>Vanilla Components</div>
<div style={{ fontSize: '14px', color: '#666' }}>@tamyla/ui-components</div>
</div>
<div style={{ textAlign: 'center', padding: '20px', background: '#e3f2fd', borderRadius: '8px' }}>
<div style={{ fontSize: '24px', marginBottom: '10px' }}>🌉</div>
<div style={{ fontWeight: 'bold' }}>Factory Bridge</div>
<div style={{ fontSize: '14px', color: '#666' }}>createFactoryComponent()</div>
</div>
<div style={{ textAlign: 'center', padding: '20px', background: '#e8f5e8', borderRadius: '8px' }}>
<div style={{ fontSize: '24px', marginBottom: '10px' }}>⚛️</div>
<div style={{ fontWeight: 'bold' }}>React Components</div>
<div style={{ fontSize: '14px', color: '#666' }}>@tamyla/ui-components-react</div>
</div>
</div>
<div style={{ marginTop: '30px', textAlign: 'left' }}>
<h4>✨ Benefits:</h4>
<ul style={{ textAlign: 'left', maxWidth: '600px', margin: '0 auto' }}>
<li>🔄 Code reusability between vanilla JS and React</li>
<li>🎯 Consistent design system across frameworks</li>
<li>⚡ Performance optimization through shared components</li>
<li>🛠️ Easy maintenance and updates</li>
<li>📦 Type safety with TypeScript integration</li>
</ul>
</div>
</div>
</div>
);
};
// Main App Component
const App = () => {
const [isLoaded, setIsLoaded] = useState(false);
useEffect(() => {
// Simulate loading time
setTimeout(() => {
setIsLoaded(true);
document.getElementById('loading').style.display = 'none';
document.getElementById('react-app').style.display = 'block';
}, 1000);
}, []);
if (!isLoaded) return null;
return (
<Provider store={store}>
<AtomicDesignShowcase />
<IntegrationShowcase />
</Provider>
);
};
// Render the app
ReactDOM.render(<App />, document.getElementById('react-app'));
</script>
</body>
</html>