@unicity/design-system
Version:
A comprehensive React component library built on Material-UI with advanced theming capabilities including neumorphism design support
37 lines • 6.93 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { Box, Typography, Card, CardContent, Grid, Button, TextField, Chip, Switch, Slider, Rating, Badge, Avatar, IconButton, Fab, LinearProgress, Divider, } from '@mui/material';
import { Star, Settings, Add, NotificationsActive, } from '@mui/icons-material';
import { ThemeSelector } from '../ThemeSelector/ThemeSelector';
import { styled } from '@mui/material/styles';
import { useTheme } from '../../theme/ThemeProvider';
const DemoContainer = styled(Box)(({ theme }) => ({
padding: theme.spacing(3),
minHeight: '100vh',
backgroundColor: theme.palette.background.default,
transition: 'all 0.3s ease-in-out',
}));
const NeumorphicCard = styled(Card)(({ theme }) => ({
transition: 'all 0.3s ease-in-out',
'&:hover': {
transform: 'translateY(-2px)',
},
}));
export const ThemeDemo = ({ showThemeSelector = true, }) => {
const { mode } = useTheme();
const [sliderValue, setSliderValue] = React.useState(30);
const [switchValue, setSwitchValue] = React.useState(true);
const [ratingValue, setRatingValue] = React.useState(4);
const isNeumorphism = mode.includes('neumorphism');
return (_jsxs(DemoContainer, { children: [showThemeSelector && (_jsxs(Box, { mb: 4, children: [_jsx(Typography, { variant: "h4", gutterBottom: true, children: "Design System Theme Demo" }), _jsx(Typography, { variant: "body1", color: "textSecondary", paragraph: true, children: "Switch between different themes to see how they affect the components. The neumorphism themes provide a soft, extruded plastic look with subtle shadows." }), _jsx(Box, { mb: 3, children: _jsx(ThemeSelector, { variant: "dropdown" }) }), _jsx(Divider, {})] })), _jsxs(Grid, { container: true, spacing: 3, children: [_jsx(Grid, { item: true, xs: 12, md: 6, children: _jsx(NeumorphicCard, { children: _jsxs(CardContent, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: "Typography & Colors" }), _jsx(Typography, { variant: "h1", gutterBottom: true, sx: { fontSize: '2rem' }, children: "Heading 1" }), _jsx(Typography, { variant: "h2", gutterBottom: true, sx: { fontSize: '1.75rem' }, children: "Heading 2" }), _jsxs(Typography, { variant: "body1", paragraph: true, children: ["This is body text that demonstrates how readable text appears in the current theme.", isNeumorphism && ' Notice the soft, muted colors in neumorphism mode.'] }), _jsx(Typography, { variant: "body2", color: "textSecondary", children: "Secondary text with reduced opacity for hierarchy." })] }) }) }), _jsx(Grid, { item: true, xs: 12, md: 6, children: _jsx(NeumorphicCard, { children: _jsxs(CardContent, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: "Interactive Elements" }), _jsx(Box, { mb: 2, children: _jsx(TextField, { label: "Sample Input", variant: "outlined", fullWidth: true, placeholder: "Type something..." }) }), _jsxs(Box, { display: "flex", gap: 1, mb: 2, flexWrap: "wrap", children: [_jsx(Button, { variant: "contained", color: "primary", children: "Primary" }), _jsx(Button, { variant: "outlined", color: "secondary", children: "Secondary" }), _jsx(Button, { variant: "text", children: "Text" })] }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(Typography, { variant: "body2", children: "Switch:" }), _jsx(Switch, { checked: switchValue, onChange: (e) => setSwitchValue(e.target.checked) })] })] }) }) }), _jsx(Grid, { item: true, xs: 12, md: 6, children: _jsx(NeumorphicCard, { children: _jsxs(CardContent, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: "Chips & Badges" }), _jsxs(Box, { mb: 2, display: "flex", gap: 1, flexWrap: "wrap", children: [_jsx(Chip, { label: "Default" }), _jsx(Chip, { label: "Primary", color: "primary" }), _jsx(Chip, { label: "Secondary", color: "secondary" }), _jsx(Chip, { label: "Success", color: "success" }), _jsx(Chip, { label: "Error", color: "error" })] }), _jsxs(Box, { display: "flex", gap: 2, alignItems: "center", children: [_jsx(Badge, { badgeContent: 4, color: "primary", children: _jsx(NotificationsActive, {}) }), _jsx(Badge, { badgeContent: 99, color: "secondary", children: _jsx(Avatar, { sx: { width: 32, height: 32 }, children: "U" }) }), _jsx(Badge, { variant: "dot", color: "error", children: _jsx(IconButton, { children: _jsx(Settings, {}) }) })] })] }) }) }), _jsx(Grid, { item: true, xs: 12, md: 6, children: _jsx(NeumorphicCard, { children: _jsxs(CardContent, { children: [_jsx(Typography, { variant: "h6", gutterBottom: true, children: "Sliders & Progress" }), _jsxs(Box, { mb: 3, children: [_jsxs(Typography, { variant: "body2", gutterBottom: true, children: ["Slider Value: ", sliderValue] }), _jsx(Slider, { value: sliderValue, onChange: (_, value) => setSliderValue(value), min: 0, max: 100, valueLabelDisplay: "auto" })] }), _jsxs(Box, { mb: 2, children: [_jsx(Typography, { variant: "body2", gutterBottom: true, children: "Progress" }), _jsx(LinearProgress, { variant: "determinate", value: sliderValue })] }), _jsxs(Box, { children: [_jsx(Typography, { variant: "body2", gutterBottom: true, children: "Rating" }), _jsx(Rating, { value: ratingValue, onChange: (_, value) => setRatingValue(value), icon: _jsx(Star, {}), emptyIcon: _jsx(Star, {}) })] })] }) }) }), _jsx(Grid, { item: true, xs: 12, children: _jsx(NeumorphicCard, { children: _jsxs(CardContent, { children: [_jsxs(Typography, { variant: "h6", gutterBottom: true, children: ["Current Theme: ", mode.charAt(0).toUpperCase() + mode.slice(1).replace('-', ' ')] }), _jsx(Typography, { variant: "body1", paragraph: true, children: isNeumorphism
? `Neumorphism design creates a soft, tactile experience with subtle shadows and
highlights. Elements appear to be gently extruded from the background surface,
providing depth without harsh contrasts.`
: `Classic ${mode} theme with traditional Material Design principles. Clean,
modern interface with clear visual hierarchy.` }), isNeumorphism && (_jsxs(Box, { mt: 2, children: [_jsx(Typography, { variant: "subtitle2", gutterBottom: true, children: "Neumorphism Features:" }), _jsxs("ul", { style: { margin: 0, paddingLeft: '20px' }, children: [_jsx("li", { children: "Soft, dual-tone shadows for depth" }), _jsx("li", { children: "Rounded corners for organic feel" }), _jsx("li", { children: "Subtle color gradients" }), _jsx("li", { children: "Tactile, touchable appearance" }), _jsx("li", { children: "Minimal contrast for eye comfort" })] })] }))] }) }) })] }), _jsx(Fab, { color: "primary", sx: {
position: 'fixed',
bottom: 16,
right: 16,
}, children: _jsx(Add, {}) })] }));
};
//# sourceMappingURL=ThemeDemo.js.map