@12-apps/ui 1.0.0 → 1.3.0

package/src/components/data-display/Badge/Badge.variants.ts

@@ -0,0 +1,106 @@
+import type { CSSObject, Theme } from '@mui/material';
+import { alpha } from '@mui/material';
+
+import type { BadgePalette, BadgeSizeStyles } from './Badge.styles';
+
+const BADGE_VARIANTS: Record<
+  string,
+  (theme: Theme, colorPalette: BadgePalette, sizeStyles: BadgeSizeStyles) => CSSObject
+> = {
+  default: (theme, colorPalette, sizeStyles) => ({
+        backgroundColor: colorPalette.main,
+        color:
+          colorPalette.contrastText || theme.palette.getContrastText?.(colorPalette.main) || '#fff',
+        minWidth: sizeStyles.minWidth,
+        height: sizeStyles.height,
+        fontSize: sizeStyles.fontSize,
+        padding: sizeStyles.padding,
+        borderRadius: sizeStyles.height / 2 }),
+  dot: (theme, colorPalette, sizeStyles) => ({
+        backgroundColor: colorPalette.main,
+        width: sizeStyles.dotSize,
+        height: sizeStyles.dotSize,
+        minWidth: sizeStyles.dotSize,
+        borderRadius: '50%',
+        padding: 0 }),
+  count: (theme, colorPalette, sizeStyles) => ({
+        backgroundColor: colorPalette.main,
+        color:
+          colorPalette.contrastText || theme.palette.getContrastText?.(colorPalette.main) || '#fff',
+        minWidth: sizeStyles.minWidth,
+        height: sizeStyles.height,
+        fontSize: sizeStyles.fontSize,
+        padding: sizeStyles.padding,
+        borderRadius: '50%' }),
+  gradient: (theme, colorPalette, sizeStyles) => ({
+        background: `linear-gradient(135deg, ${colorPalette.main} 0%, ${colorPalette.dark || colorPalette.main} 100%)`,
+        color: '#fff',
+        minWidth: sizeStyles.minWidth,
+        height: sizeStyles.height,
+        fontSize: sizeStyles.fontSize,
+        padding: sizeStyles.padding,
+        borderRadius: sizeStyles.height / 2 }),
+  glass: (theme, colorPalette, sizeStyles) => ({
+        backgroundColor: alpha(colorPalette.main, 0.1),
+        backdropFilter: 'blur(10px) saturate(200%)',
+        WebkitBackdropFilter: 'blur(10px) saturate(200%)',
+        border: `1px solid ${alpha(colorPalette.main, 0.2)}`,
+        color: colorPalette.main,
+        minWidth: sizeStyles.minWidth,
+        height: sizeStyles.height,
+        fontSize: sizeStyles.fontSize,
+        padding: sizeStyles.padding,
+        borderRadius: sizeStyles.height / 2,
+        boxShadow: `inset 0 1px 1px ${alpha(theme.palette.common.white, 0.1)}` }),
+  outline: (theme, colorPalette, sizeStyles) => ({
+        backgroundColor: 'transparent',
+        border: `2px solid ${colorPalette.main}`,
+        color: colorPalette.main,
+        minWidth: sizeStyles.minWidth,
+        height: sizeStyles.height,
+        fontSize: sizeStyles.fontSize,
+        padding: sizeStyles.padding,
+        borderRadius: sizeStyles.height / 2 }),
+  secondary: (theme, colorPalette, sizeStyles) => ({
+        backgroundColor: alpha(colorPalette.main, 0.15),
+        color: colorPalette.main,
+        border: `1px solid ${alpha(colorPalette.main, 0.3)}`,
+        minWidth: sizeStyles.minWidth,
+        height: sizeStyles.height,
+        fontSize: sizeStyles.fontSize,
+        padding: sizeStyles.padding,
+        borderRadius: sizeStyles.height / 2 }),
+  destructive: (theme, colorPalette, sizeStyles) => ({
+        backgroundColor: theme.palette.error.main,
+        color: theme.palette.error.contrastText,
+        minWidth: sizeStyles.minWidth,
+        height: sizeStyles.height,
+        fontSize: sizeStyles.fontSize,
+        padding: sizeStyles.padding,
+        borderRadius: sizeStyles.height / 2,
+        fontWeight: 700 }),
+  success: (theme, colorPalette, sizeStyles) => ({
+        backgroundColor: theme.palette.success.main,
+        color: theme.palette.success.contrastText,
+        minWidth: sizeStyles.minWidth,
+        height: sizeStyles.height,
+        fontSize: sizeStyles.fontSize,
+        padding: sizeStyles.padding,
+        borderRadius: sizeStyles.height / 2 }),
+  warning: (theme, colorPalette, sizeStyles) => ({
+        backgroundColor: theme.palette.warning.main,
+        color: theme.palette.warning.contrastText,
+        minWidth: sizeStyles.minWidth,
+        height: sizeStyles.height,
+        fontSize: sizeStyles.fontSize,
+        padding: sizeStyles.padding,
+        borderRadius: sizeStyles.height / 2 }) };
+
+export const badgeVariantStyles = (
+  theme: Theme,
+  colorPalette: BadgePalette,
+  sizeStyles: BadgeSizeStyles,
+  customVariant?: string,
+): CSSObject =>
+  customVariant ? (BADGE_VARIANTS[customVariant]?.(theme, colorPalette, sizeStyles) ?? {}) : {};
+

package/src/components/data-display/Badge/BadgeContent.tsx

@@ -0,0 +1,107 @@
+import CloseIcon from '@mui/icons-material/Close';
+import { IconButton } from '@mui/material';
+import type { FC, ReactNode } from 'react';
+import React from 'react';
+
+import { getSizeStyles } from './Badge.styles';
+import type { BadgeSize } from './Badge.types';
+
+// CLOSE_ICON_SIZES already exists in Badge.tsx; the size lookup lives here now.
+const CLOSE_ICON_SIZES: Record<string, string> = {
+  xs: '0.5rem',
+  sm: '0.625rem',
+  md: '0.75rem',
+  lg: '0.875rem',
+};
+
+const makeTestId =
+  (dataTestId?: string) =>
+  (suffix: string): string =>
+    dataTestId ? `${dataTestId}-${suffix}` : `badge-${suffix}`;
+
+const BadgeIcon: FC<{ icon: ReactNode; size: BadgeSize; testId: string }> = ({
+  icon,
+  size,
+  testId,
+}) => (
+  <span
+    key="icon"
+    data-testid={testId}
+    style={{
+      fontSize: getSizeStyles(size).iconSize,
+      display: 'inline-flex',
+      alignItems: 'center',
+    }}
+  >
+    {icon}
+  </span>
+);
+
+const BadgeCloseButton: FC<{ size: BadgeSize; testId: string; onClose: (e: React.MouseEvent) => void }> = ({
+  size,
+  testId,
+  onClose,
+}) => (
+  <IconButton
+    key="close"
+    size="small"
+    onClick={onClose}
+    data-testid={testId}
+    sx={{
+      p: 0,
+      ml: 0.5,
+      color: 'inherit',
+      '& svg': { fontSize: CLOSE_ICON_SIZES[size] ?? CLOSE_ICON_SIZES.lg },
+      '&:hover': { opacity: 0.8 },
+    }}
+  >
+    <CloseIcon />
+  </IconButton>
+);
+
+// The badge's inner run: optional icon, the content itself, optional close
+// button. A dot badge shows none of it.
+export const buildBadgeContent = ({
+  variant,
+  size,
+  icon,
+  closable,
+  dataTestId,
+  baseContent,
+  onClose,
+}: {
+  variant: string;
+  size: BadgeSize;
+  icon?: ReactNode;
+  closable?: boolean;
+  dataTestId?: string;
+  baseContent: ReactNode;
+  onClose: (e: React.MouseEvent) => void;
+}): ReactNode => {
+  if (variant === 'dot') return '';
+
+  const testId = makeTestId(dataTestId);
+  const parts: ReactNode[] = [];
+
+  if (icon) parts.push(<BadgeIcon key="icon" icon={icon} size={size} testId={testId('icon')} />);
+
+  if (baseContent !== null && baseContent !== undefined) {
+    parts.push(
+      <span key="content" data-testid={testId('content')}>
+        {baseContent}
+      </span>,
+    );
+  }
+
+  if (closable && !variant.includes('dot')) {
+    parts.push(
+      <BadgeCloseButton key="close" size={size} testId={testId('close')} onClose={onClose} />,
+    );
+  }
+
+  if (parts.length === 0) return null;
+
+  return (
+    <span style={{ display: 'inline-flex', alignItems: 'center', gap: '2px' }}>{parts}</span>
+  );
+};

package/src/components/data-display/Banner/Banner.stories.tsx

@@ -1,4 +1,8 @@
-import { Cookie, Payment, Security, Star, Update } from '@mui/icons-material';
+import Cookie from '@mui/icons-material/Cookie';
+import Payment from '@mui/icons-material/Payment';
+import Security from '@mui/icons-material/Security';
+import Star from '@mui/icons-material/Star';
+import Update from '@mui/icons-material/Update';
 import { Box, Container, Stack, Typography } from '@mui/material';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import React from 'react';

package/src/components/data-display/Banner/Banner.styles.ts

@@ -0,0 +1,120 @@
+import { alpha, keyframes } from '@mui/material';
+import type { CSSObject, PaletteColor, Theme } from '@mui/material/styles';
+
+import type { BannerVariant } from './Banner.types';
+
+// Animations
+export const fadeInSlide = keyframes`
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+
+const pulseAnimation = keyframes`
+  0% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 0.7;
+  }
+  70% {
+    box-shadow: 0 0 0 8px currentColor;
+    opacity: 0;
+  }
+  100% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 0;
+  }
+`;
+
+export const getVariantColor = (theme: Theme, variant: BannerVariant) => {
+  const colorMap = {
+    info: theme.palette.info,
+    success: theme.palette.success,
+    warning: theme.palette.warning,
+    critical: theme.palette.error,
+  };
+  return colorMap[variant];
+};
+
+export const bannerPartStyles = (theme: Theme, colorPalette: PaletteColor): CSSObject => ({
+  // Icon container
+  '.banner-icon': {
+    flexShrink: 0,
+    marginTop: theme.spacing(0.25),
+    color: colorPalette.main,
+    fontSize: '1.25rem',
+    display: 'flex',
+    alignItems: 'center',
+    position: 'relative',
+
+    '&::before': {
+      content: '""',
+      position: 'absolute',
+      inset: -4,
+      borderRadius: '50%',
+      background: alpha(colorPalette.main, 0.1),
+      animation: `${pulseAnimation} 3s infinite`,
+    },
+  },
+
+  // Content area
+  '.banner-content': {
+    flex: 1,
+    minWidth: 0, // Prevents flex item overflow
+  },
+
+  // Title styles
+  '.banner-title': {
+    fontWeight: 600,
+    fontSize: '1rem',
+    lineHeight: 1.4,
+    marginBottom: theme.spacing(0.5),
+    color: colorPalette.dark || colorPalette.main,
+  },
+
+  // Description styles  
+  '.banner-description': {
+    fontSize: '0.875rem',
+    lineHeight: 1.5,
+    opacity: 0.9,
+    color: 'inherit',
+  },
+
+  // Actions area
+  '.banner-actions': {
+    display: 'flex',
+    flexShrink: 0,
+    gap: theme.spacing(1),
+    alignItems: 'center',
+    marginTop: theme.spacing(1),
+
+    [theme.breakpoints.up('sm')]: {
+      marginTop: 0,
+      marginLeft: theme.spacing(2),
+    },
+  },
+
+  // Dismiss button
+  '.banner-dismiss': {
+    color: 'inherit',
+    opacity: 0.7,
+    marginLeft: theme.spacing(1),
+    flexShrink: 0,
+
+    '&:hover': {
+      opacity: 1,
+      backgroundColor: alpha(colorPalette.main, 0.1),
+      transform: 'rotate(90deg)',
+    },
+
+    '&:focus': {
+      opacity: 1,
+      outline: `2px solid ${colorPalette.main}`,
+      outlineOffset: '2px',
+    },
+  },
+});