@rakeyshgidwani/roger-ui-bank-theme-stan-design 0.2.25 → 0.2.27

package/src/components/ui/feedback/progress.tsx

@@ -2,18 +2,8 @@
 
 import * as React from 'react';
 import { useEffect, useState } from 'react';;
-import { useTheme } from '../../../themes/useTheme.js';
 import { ProgressProps, ProgressStep } from './types.js';
 
-// Default color fallbacks for when theme is not available
-const getDefaultColors = () => ({
-  surface: { background: '#ffffff', surface: '#f3f4f6', border: '#d1d5db', divider: '#e5e7eb' },
-  text: { primary: '#111827', secondary: '#6b7280', muted: '#9ca3af', inverse: '#ffffff', onPrimary: '#ffffff', onSecondary: '#ffffff', onSurface: '#111827' },
-  interactive: { hover: '#f3f4f6', active: '#e5e7eb', focus: '#3b82f6', disabled: '#d1d5db' },
-  primary: { 500: '#3b82f6' },
-  semantic: { success: '#10b981', warning: '#f59e0b', error: '#ef4444', info: '#3b82f6' }
-});
-
 // Linear Progress Component
 const LinearProgress: React.FC<ProgressProps> = ({
   value,
@@ -48,13 +38,11 @@ const CircularProgress: React.FC<ProgressProps> = ({
   color,
   size = 'md',
   thickness = 4,
-  trackColor,
-  progressColor,
+  trackColor: _trackColor,
+  progressColor: _progressColor,
   className = ''
 }) => {
-  const { getTheme } = useTheme();
-  const themeConfig = getTheme('stan-design');
-  const colors = themeConfig?.colors || getDefaultColors();
+  // Note: theme colors not needed as we're using semantic CSS classes
 
   const percentage = Math.min(Math.max(((value - min) / (max - min)) * 100, 0), 100);
   const radius = 50 - (thickness / 2);
@@ -71,7 +59,6 @@ const CircularProgress: React.FC<ProgressProps> = ({
           cy="50"
           r={radius}
           className="progress__circle-track"
-          stroke={trackColor || colors.surface.border}
           strokeWidth={thickness}
         />
         {/* Progress */}
@@ -79,8 +66,7 @@ const CircularProgress: React.FC<ProgressProps> = ({
           cx="50"
           cy="50"
           r={radius}
-          className={`progress__circle-progress ${animated ? 'progress__circle-progress--animated' : ''}`}
-          stroke={progressColor || color || colors.primary[500]}
+          className={`progress__circle-progress ${animated ? 'progress__circle-progress--animated' : ''} ${color ? `progress__circle-progress--${color}` : ''}`}
           strokeWidth={thickness}
           strokeDasharray={strokeDasharray}
           strokeDashoffset={strokeDashoffset}
@@ -185,16 +171,14 @@ export const Progress: React.FC<ProgressProps> = ({
   size = 'md',
   variant = 'linear',
   thickness,
-  trackColor,
-  progressColor,
+  trackColor: _trackColor,
+  progressColor: _progressColor,
   indeterminate = false,
   onComplete,
   className = '',
   theme = 'stan-design'
 }) => {
-  const { getTheme } = useTheme();
-  const themeConfig = getTheme(theme);
-  const colors = themeConfig?.colors || getDefaultColors();
+  // Note: theme colors not needed as we're using semantic CSS classes
   
   const [currentValue, setCurrentValue] = useState(value);
 
@@ -231,8 +215,8 @@ export const Progress: React.FC<ProgressProps> = ({
             color={color}
             size={size}
             thickness={thickness}
-            trackColor={trackColor}
-            progressColor={progressColor}
+            trackColor={_trackColor}
+            progressColor={_progressColor}
             className={className}
           />
         );
@@ -258,8 +242,8 @@ export const Progress: React.FC<ProgressProps> = ({
             color={color}
             size={size}
             thickness={thickness}
-            trackColor={trackColor}
-            progressColor={progressColor}
+            trackColor={_trackColor}
+            progressColor={_progressColor}
             className={className}
           />
         );
@@ -267,17 +251,17 @@ export const Progress: React.FC<ProgressProps> = ({
   };
 
   return (
-    <div className="w-full">
+    <div className={`progress__wrapper progress__wrapper--${theme} ${className}`}>
       {/* Label and Value Display */}
       {(showLabel || showValue || showPercentage) && (
-        <div className="flex justify-between items-center mb-2">
+        <div className="progress__header">
           {showLabel && label && (
-            <span className="text-sm font-medium" style={{ color: colors.text.primary }}>
+            <span className="progress__label">
               {label}
             </span>
           )}
           {(showValue || showPercentage) && (
-            <span className="text-sm" style={{ color: colors.text.secondary }}>
+            <span className="progress__value">
               {showValue && `${currentValue}/${max}`}
               {showValue && showPercentage && ' - '}
               {showPercentage && `${Math.round(((currentValue - min) / (max - min)) * 100)}%`}
@@ -285,7 +269,7 @@ export const Progress: React.FC<ProgressProps> = ({
           )}
         </div>
       )}
-      
+
       {/* Progress Component */}
       {renderProgress()}
     </div>

package/src/components/ui/feedback/status-alert-example.ts

@@ -0,0 +1,71 @@
+// StatusAlertData Usage Example
+import { StatusAlertData } from './types.js';
+
+// Simple StatusAlertData examples
+export const statusAlertExamples: StatusAlertData[] = [
+  {
+    id: 'success-alert',
+    title: 'Success',
+    message: 'Your changes have been saved successfully.',
+    type: 'success',
+    dismissible: true,
+    onDismiss: () => console.log('Success alert dismissed'),
+    showIcon: true,
+    closable: true,
+    size: 'md',
+    variant: 'default'
+  },
+  {
+    id: 'warning-alert',
+    title: 'Warning',
+    message: 'Please review your settings before proceeding.',
+    type: 'warning',
+    dismissible: true,
+    actions: [
+      {
+        label: 'Review Settings',
+        onClick: () => console.log('Review settings clicked'),
+        variant: 'primary'
+      },
+      {
+        label: 'Dismiss',
+        onClick: () => console.log('Dismissed'),
+        variant: 'secondary'
+      }
+    ],
+    showIcon: true,
+    size: 'md',
+    variant: 'bordered'
+  },
+  {
+    id: 'error-alert',
+    title: 'Error',
+    message: 'An error occurred while processing your request.',
+    type: 'error',
+    dismissible: true,
+    onDismiss: () => console.log('Error alert dismissed'),
+    actions: [
+      {
+        label: 'Retry',
+        onClick: () => console.log('Retry clicked'),
+        variant: 'primary'
+      }
+    ],
+    showIcon: true,
+    closable: true,
+    size: 'lg',
+    variant: 'filled'
+  },
+  {
+    id: 'info-alert',
+    title: 'Information',
+    message: 'System maintenance is scheduled for tonight.',
+    type: 'info',
+    dismissible: false,
+    persistent: true,
+    showIcon: true,
+    size: 'md',
+    variant: 'default',
+    theme: 'stan-design'
+  }
+];

package/src/components/ui/feedback/types.ts

@@ -1,15 +1,17 @@
 import * as React from 'react';;
+import { ThemeName } from '../../../themes/types.js';
 
 // Base props for all feedback components
 export interface FeedbackBaseProps {
   className?: string;
-  theme?: 'stan-design' | 'harvey';
+  theme?: ThemeName;
 }
 
 // Alert Component Types
 export interface AlertProps extends FeedbackBaseProps {
   title?: string;
-  message: string;
+  message?: string;
+  children?: React.ReactNode;
   type: 'success' | 'warning' | 'error' | 'info';
   dismissible?: boolean;
   onDismiss?: () => void;
@@ -29,6 +31,25 @@ export interface AlertAction {
   size?: 'sm' | 'md' | 'lg';
 }
 
+// Status Alert Data Interface
+export interface StatusAlertData {
+  id?: string;
+  title?: string;
+  message?: string;
+  children?: React.ReactNode;
+  type: 'success' | 'warning' | 'error' | 'info';
+  dismissible?: boolean;
+  onDismiss?: () => void;
+  icon?: React.ReactNode;
+  actions?: AlertAction[];
+  showIcon?: boolean;
+  closable?: boolean;
+  persistent?: boolean;
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'default' | 'bordered' | 'filled';
+  theme?: ThemeName;
+}
+
 // Toast Component Types
 export interface ToastProps extends FeedbackBaseProps {
   id: string;
@@ -65,7 +86,7 @@ export interface ToastContainerProps {
   draggable?: boolean;
   progress?: boolean;
   className?: string;
-  theme?: 'stan-design' | 'harvey';
+  theme?: ThemeName;
 }
 
 // Progress Component Types

package/src/index.ts

@@ -7,7 +7,7 @@
  * - 67 custom hooks
  * - 6 utility functions
  * - 29 theme system components
- * - 131 TypeScript types
+ * - 133 TypeScript types
  * - 4 design tokens
  * - 0 build plugins
  * - Complete CSS system (61+ files)
@@ -200,6 +200,7 @@ export type { NavigationAccessibility } from './components/ui/navigation/types.j
 export type { FeedbackBaseProps } from './components/ui/feedback/types.js';
 export type { AlertProps } from './components/ui/feedback/types.js';
 export type { AlertAction } from './components/ui/feedback/types.js';
+export type { StatusAlertData } from './components/ui/feedback/types.js';
 export type { ToastProps } from './components/ui/feedback/types.js';
 export type { ToastAction } from './components/ui/feedback/types.js';
 export type { ToastContainerProps } from './components/ui/feedback/types.js';
@@ -255,6 +256,7 @@ export type { PopoverContentProps } from './components/ui/overlay/types.js';
 export type { PopoverHeaderProps } from './components/ui/overlay/types.js';
 export type { PopoverBodyProps } from './components/ui/overlay/types.js';
 export type { PopoverFooterProps } from './components/ui/overlay/types.js';
+export type { ThemeName } from './themes/types.js';
 export type { MultiThemeConfig } from './themes/types.js';
 export type { FontThemeConfig } from './themes/types.js';
 export type { FontConfig } from './themes/types.js';

package/src/styles/components/feedback/progress.css

@@ -109,6 +109,22 @@
   background-color: var(--cs-colors-primary-500);
 }
 
+/* ============================================================================ */
+/* PROGRESS WRAPPER */
+/* ============================================================================ */
+
+.progress__wrapper {
+  width: 100%;
+}
+
+
+.progress__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: var(--cs-spacing-scale-2);
+}
+
 /* ============================================================================ */
 /* PROGRESS LABEL */
 /* ============================================================================ */
@@ -214,6 +230,23 @@
   font-size: var(--cs-fonts-primary-sizes-lg);
 }
 
+/* Circular progress colors */
+.progress__circle-progress--success {
+  stroke: var(--cs-colors-semantic-success-500);
+}
+
+.progress__circle-progress--warning {
+  stroke: var(--cs-colors-semantic-warning-500);
+}
+
+.progress__circle-progress--error {
+  stroke: var(--cs-colors-semantic-error-500);
+}
+
+.progress__circle-progress--info {
+  stroke: var(--cs-colors-primary-500);
+}
+
 /* ============================================================================ */
 /* STEPPED PROGRESS */
 /* ============================================================================ */

package/src/themes/types.ts

@@ -1,6 +1,10 @@
 // Multi-Theme System Type Definitions
 // This file defines the core interfaces for theme configuration
 
+// Theme Name Type - extensible for new themes
+// Note: 'enterprise' is used in tests but may not have a full theme implementation
+export type ThemeName = 'default' | 'stan-design' | 'harvey' | 'enterprise' | string;
+
 export interface MultiThemeConfig {
   fonts: FontThemeConfig;
   colors: ColorThemeConfig;

package/src/types.ts

@@ -1,6 +1,10 @@
 // Multi-Theme System Type Definitions
 // This file defines the core interfaces for theme configuration
 
+// Theme Name Type - extensible for new themes
+// Note: 'enterprise' is used in tests but may not have a full theme implementation
+export type ThemeName = 'default' | 'stan-design' | 'harvey' | 'enterprise' | string;
+
 export interface MultiThemeConfig {
   fonts: FontThemeConfig;
   colors: ColorThemeConfig;