@12-apps/ui 1.0.0

package/src/components/data-display/AlertDialog/AlertDialog.tsx

@@ -0,0 +1,273 @@
+import { Close, Error, Info } from '@mui/icons-material';
+import type { ButtonProps } from '@mui/material';
+import {
+  alpha,
+  Button,
+  CircularProgress,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  IconButton,
+  keyframes,
+  Typography,
+} from '@mui/material';
+import { styled } from '@mui/material/styles';
+import React from 'react';
+
+import type { AlertDialogProps } from './AlertDialog.types';
+
+// Define pulse animation
+const pulseAnimation = keyframes`
+  0% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 1;
+  }
+  70% {
+    box-shadow: 0 0 0 15px currentColor;
+    opacity: 0;
+  }
+  100% {
+    box-shadow: 0 0 0 0 currentColor;
+    opacity: 0;
+  }
+`;
+
+const StyledDialog = styled(Dialog, {
+  shouldForwardProp: (prop) => 
+    !['customVariant', 'glow', 'pulse'].includes(prop as string),
+})<{ 
+  customVariant?: string; 
+  glow?: boolean; 
+  pulse?: boolean; 
+}>(({ theme, customVariant, glow, pulse }) => ({
+  '& .MuiDialog-paper': {
+    borderRadius: theme.spacing(2),
+    transition: 'all 0.3s ease',
+    position: 'relative',
+    overflow: 'hidden',
+
+    // Variant styles
+    ...(customVariant === 'default' && {
+      backgroundColor: theme.palette.background.paper,
+      border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+    }),
+
+    ...(customVariant === 'destructive' && {
+      backgroundColor: alpha(theme.palette.error.main, 0.05),
+      border: `1px solid ${alpha(theme.palette.error.main, 0.2)}`,
+    }),
+
+    ...(customVariant === 'glass' && {
+      backgroundColor: alpha(theme.palette.background.paper, 0.1),
+      backdropFilter: 'blur(20px)',
+      border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
+    }),
+
+    // Glow effect
+    ...(glow && !pulse && {
+      boxShadow: `0 0 30px 10px ${alpha(theme.palette.primary.main, 0.3)} !important`,
+      filter: 'brightness(1.05)',
+    }),
+
+    // Pulse animation
+    ...(pulse && !glow && {
+      position: 'relative',
+      '&::after': {
+        content: '""',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        borderRadius: 'inherit',
+        backgroundColor: theme.palette.primary.main,
+        opacity: 0.1,
+        animation: `${pulseAnimation} 2s infinite`,
+        pointerEvents: 'none',
+        zIndex: -1,
+      },
+    }),
+
+    // Both glow and pulse
+    ...(glow && pulse && {
+      position: 'relative',
+      boxShadow: `0 0 30px 10px ${alpha(theme.palette.primary.main, 0.3)} !important`,
+      filter: 'brightness(1.05)',
+      '&::after': {
+        content: '""',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        borderRadius: 'inherit',
+        backgroundColor: theme.palette.primary.main,
+        opacity: 0.1,
+        animation: `${pulseAnimation} 2s infinite`,
+        pointerEvents: 'none',
+        zIndex: -1,
+      },
+    }),
+  },
+}));
+
+const StyledDialogTitle = styled(DialogTitle)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: theme.spacing(1.5),
+  paddingRight: theme.spacing(6), // Space for close button
+  '& .MuiTypography-root': {
+    fontWeight: 600,
+    fontSize: '1.25rem',
+  },
+}));
+
+const StyledDialogContent = styled(DialogContent)(({ theme }) => ({
+  paddingTop: theme.spacing(1),
+  paddingBottom: theme.spacing(2),
+}));
+
+const StyledDialogActions = styled(DialogActions)(({ theme }) => ({
+  padding: theme.spacing(2, 3, 3, 3),
+  gap: theme.spacing(1),
+}));
+
+const CloseButton = styled(IconButton)(({ theme }) => ({
+  position: 'absolute',
+  right: theme.spacing(1),
+  top: theme.spacing(1),
+  color: theme.palette.grey[500],
+}));
+
+export const AlertDialog = React.forwardRef<HTMLDivElement, AlertDialogProps>(
+  ({
+    variant = 'default',
+    glow = false,
+    pulse = false,
+    title,
+    description,
+    icon,
+    cancelText = 'Cancel',
+    confirmText = 'Confirm',
+    onCancel,
+    onConfirm,
+    showCancel = true,
+    loading = false,
+    confirmDisabled = false,
+    children,
+    onClose,
+    'data-testid': dataTestId = 'alert-dialog',
+    ...props
+  }, ref) => {
+    
+    const handleCancel = () => {
+      onCancel?.();
+      onClose?.({}, 'backdropClick');
+    };
+
+    const handleConfirm = () => {
+      onConfirm?.();
+    };
+
+    const getVariantIcon = () => {
+      if (icon) return icon;
+      
+      switch (variant) {
+        case 'destructive':
+          return <Error color="error" />;
+        default:
+          return <Info color="primary" />;
+      }
+    };
+
+    const getConfirmButtonVariant = (): ButtonProps['variant'] => {
+      switch (variant) {
+        case 'destructive':
+          return 'contained';
+        default:
+          return 'contained';
+      }
+    };
+
+    const getConfirmButtonColor = () => {
+      switch (variant) {
+        case 'destructive':
+          return 'error';
+        default:
+          return 'primary';
+      }
+    };
+
+    return (
+      <StyledDialog
+        ref={ref}
+        customVariant={variant}
+        glow={glow}
+        pulse={pulse}
+        onClose={onClose}
+        data-testid={dataTestId}
+        {...props}
+      >
+        <CloseButton
+          aria-label="close"
+          onClick={handleCancel}
+          size="small"
+          data-testid={`${dataTestId}-close-button`}
+        >
+          <Close />
+        </CloseButton>
+
+        {title && (
+          <StyledDialogTitle data-testid={`${dataTestId}-title`}>
+            {(icon !== null) && (
+              <span data-testid={`${dataTestId}-icon`}>
+                {getVariantIcon()}
+              </span>
+            )}
+            <Typography variant="h6" component="span">
+              {title}
+            </Typography>
+          </StyledDialogTitle>
+        )}
+
+        <StyledDialogContent data-testid={`${dataTestId}-content`}>
+          {description && (
+            <DialogContentText data-testid={`${dataTestId}-description`}>
+              {description}
+            </DialogContentText>
+          )}
+          {children}
+        </StyledDialogContent>
+
+        <StyledDialogActions data-testid={`${dataTestId}-actions`}>
+          {showCancel && (
+            <Button
+              onClick={handleCancel}
+              variant="outlined"
+              color="inherit"
+              disabled={loading}
+              data-testid={`${dataTestId}-cancel-button`}
+            >
+              {cancelText}
+            </Button>
+          )}
+          <Button
+            onClick={handleConfirm}
+            variant={getConfirmButtonVariant()}
+            color={getConfirmButtonColor()}
+            disabled={confirmDisabled || loading}
+            startIcon={loading ? <CircularProgress size={16} color="inherit" data-testid={`${dataTestId}-loading-spinner`} /> : undefined}
+            autoFocus
+            data-testid={`${dataTestId}-confirm-button`}
+          >
+            {confirmText}
+          </Button>
+        </StyledDialogActions>
+      </StyledDialog>
+    );
+  }
+);
+
+AlertDialog.displayName = 'AlertDialog';

package/src/components/data-display/AlertDialog/AlertDialog.types.ts

@@ -0,0 +1,74 @@
+import type { DialogProps as MuiDialogProps } from '@mui/material';
+import type React from 'react';
+
+export interface AlertDialogProps extends Omit<MuiDialogProps, 'variant'> {
+  /**
+   * The variant of the alert dialog
+   */
+  variant?: 'default' | 'destructive' | 'glass';
+
+  /**
+   * Whether the dialog should have a glow effect
+   */
+  glow?: boolean;
+
+  /**
+   * Whether the dialog should have a pulse animation
+   */
+  pulse?: boolean;
+
+  /**
+   * Title of the dialog
+   */
+  title?: string;
+
+  /**
+   * Description text
+   */
+  description?: string;
+
+  /**
+   * Icon to display in the dialog
+   */
+  icon?: React.ReactNode;
+
+  /**
+   * Text for the cancel button
+   */
+  cancelText?: string;
+
+  /**
+   * Text for the confirm button
+   */
+  confirmText?: string;
+
+  /**
+   * Callback when cancel is clicked
+   */
+  onCancel?: () => void;
+
+  /**
+   * Callback when confirm is clicked
+   */
+  onConfirm?: () => void;
+
+  /**
+   * Whether to show the cancel button
+   */
+  showCancel?: boolean;
+
+  /**
+   * Whether the confirm action is loading
+   */
+  loading?: boolean;
+
+  /**
+   * Whether the confirm button is disabled
+   */
+  confirmDisabled?: boolean;
+
+  /**
+   * Optional data-testid attribute for testing
+   */
+  'data-testid'?: string;
+}

package/src/components/data-display/AlertDialog/index.ts

@@ -0,0 +1,2 @@
+export { AlertDialog } from './AlertDialog';
+export type { AlertDialogProps } from './AlertDialog.types';

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

@@ -0,0 +1,230 @@
+import { Box, Typography } from '@mui/material';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { fn } from 'storybook/test';
+
+import { EmptyState } from '../EmptyState/EmptyState';
+
+import { AsyncStateContainer } from './AsyncStateContainer';
+import { ErrorState } from '../ErrorState/ErrorState';
+import { LoadingState } from '../LoadingState/LoadingState';
+
+const meta: Meta<typeof AsyncStateContainer> = {
+  title: 'DataDisplay/AsyncStates/AsyncStateContainer',
+  component: AsyncStateContainer,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: `
+A composition-based wrapper component for handling async data states consistently.
+
+## Features
+- **Priority-based rendering**: loading > error > empty > children
+- **Composition pattern**: Pass custom components for each state
+- **Render props**: Alternatively use render functions for more control
+- **Accessible**: Proper ARIA attributes and semantic markup
+
+## Usage Patterns
+
+### Component Props (Composition)
+\`\`\`tsx
+<AsyncStateContainer
+  isLoading={isLoading}
+  error={error}
+  isEmpty={data.length === 0}
+  loadingComponent={<LoadingState variant="skeleton" />}
+  errorComponent={<ErrorState message={error} onRetry={refetch} />}
+  emptyComponent={<EmptyState title="No items" onCreate={handleCreate} />}
+>
+  <DataGrid data={data} />
+</AsyncStateContainer>
+\`\`\`
+
+### Render Props
+\`\`\`tsx
+<AsyncStateContainer
+  isLoading={isLoading}
+  error={error}
+  isEmpty={data.length === 0}
+  renderLoading={() => <CustomLoader />}
+  renderError={(error) => <CustomError error={error} />}
+  renderEmpty={() => <CustomEmpty />}
+>
+  <DataGrid data={data} />
+</AsyncStateContainer>
+\`\`\`
+        `,
+      },
+    },
+  },
+  tags: ['autodocs', 'component:AsyncStateContainer'],
+  argTypes: {
+    isLoading: {
+      control: 'boolean',
+      description: 'Whether the container is in a loading state',
+    },
+    error: {
+      control: 'text',
+      description: 'Error message or object',
+    },
+    isEmpty: {
+      control: 'boolean',
+      description: 'Whether the data is empty',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const SampleContent = () => (
+  <Box
+    sx={{
+      p: 4,
+      bgcolor: 'background.paper',
+      border: '1px solid',
+      borderColor: 'divider',
+      borderRadius: 2,
+    }}
+  >
+    <Typography variant="h6" gutterBottom>
+      Data Loaded Successfully!
+    </Typography>
+    <Typography variant="body2" color="text.secondary">
+      This is the actual content that displays when data is available.
+    </Typography>
+  </Box>
+);
+
+export const SuccessState: Story = {
+  name: 'Success State (Children)',
+  args: {
+    isLoading: false,
+    error: null,
+    isEmpty: false,
+    children: <SampleContent />,
+  },
+};
+
+export const LoadingStateDefault: Story = {
+  name: 'Loading State (Default)',
+  args: {
+    isLoading: true,
+    error: null,
+    isEmpty: false,
+    children: <SampleContent />,
+  },
+};
+
+export const LoadingStateCustom: Story = {
+  name: 'Loading State (Custom Component)',
+  args: {
+    isLoading: true,
+    error: null,
+    isEmpty: false,
+    loadingComponent: <LoadingState variant="skeleton" message="Fetching your data..." />,
+    children: <SampleContent />,
+  },
+};
+
+export const ErrorStateDefault: Story = {
+  name: 'Error State (Default)',
+  args: {
+    isLoading: false,
+    error: 'Failed to load data from the server',
+    isEmpty: false,
+    children: <SampleContent />,
+  },
+};
+
+export const ErrorStateCustom: Story = {
+  name: 'Error State (Custom Component)',
+  args: {
+    isLoading: false,
+    error: 'Network connection failed',
+    isEmpty: false,
+    errorComponent: (
+      <ErrorState
+        title="Connection Error"
+        message="Network connection failed"
+        onRetry={fn()}
+        retryLabel="Reconnect"
+      />
+    ),
+    children: <SampleContent />,
+  },
+};
+
+export const EmptyStateDefault: Story = {
+  name: 'Empty State (Default)',
+  args: {
+    isLoading: false,
+    error: null,
+    isEmpty: true,
+    children: <SampleContent />,
+  },
+};
+
+export const EmptyStateCustom: Story = {
+  name: 'Empty State (Custom Component)',
+  args: {
+    isLoading: false,
+    error: null,
+    isEmpty: true,
+    emptyComponent: (
+      <EmptyState
+        title="No projects found"
+        description="Get started by creating your first project"
+        onCreate={fn()}
+        createLabel="New Project"
+        onRefresh={fn()}
+      />
+    ),
+    children: <SampleContent />,
+  },
+};
+
+export const WithRenderProps: Story = {
+  name: 'Using Render Props',
+  args: {
+    isLoading: true,
+    error: null,
+    isEmpty: false,
+    renderLoading: () => (
+      <Box sx={{ textAlign: 'center', py: 4 }}>
+        <Typography variant="h6" color="primary">
+          🔄 Custom loading via render prop...
+        </Typography>
+      </Box>
+    ),
+    children: <SampleContent />,
+  },
+};
+
+export const PriorityDemonstration: Story = {
+  name: 'Priority: Loading > Error > Empty',
+  args: {
+    isLoading: true,
+    error: 'This error should not show',
+    isEmpty: true,
+    children: <SampleContent />,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Demonstrates priority order: when isLoading is true, loading state is shown even if error and isEmpty are also set.',
+      },
+    },
+  },
+};
+
+export const ErrorWithObject: Story = {
+  name: 'Error with Error Object',
+  args: {
+    isLoading: false,
+    error: new Error('TypeError: Cannot read property of undefined'),
+    isEmpty: false,
+    children: <SampleContent />,
+  },
+};