@etus/ui 0.1.0

package/src/components/workflow/ReportGenerator/ReportGenerator.types.ts

@@ -0,0 +1,321 @@
+import type { ReportGeneratorVariantProps } from "./ReportGenerator.variants"
+import type { ReactNode } from "react"
+
+/**
+ * Column type for formatting
+ */
+export type ColumnType = "boolean" | "currency" | "date" | "number" | "text"
+
+/**
+ * Aggregate function type
+ */
+export type AggregateFunction = "avg" | "count" | "max" | "min" | "sum"
+
+/**
+ * Filter operator types
+ */
+export type FilterOperator =
+  | "between"
+  | "contains"
+  | "equals"
+  | "greater_than"
+  | "in"
+  | "less_than"
+
+/**
+ * Chart types
+ */
+export type ChartType = "area" | "bar" | "line" | "pie"
+
+/**
+ * Export format types
+ */
+export type ExportFormat = "csv" | "json" | "pdf" | "print" | "xlsx"
+
+/**
+ * Schedule frequency types
+ */
+export type ScheduleFrequency = "daily" | "monthly" | "weekly"
+
+/**
+ * Data source types
+ */
+export type DataSourceType = "api" | "query" | "static"
+
+/**
+ * Report generator states
+ */
+export type ReportGeneratorState =
+  | "configuring"
+  | "error"
+  | "exporting"
+  | "generating"
+  | "idle"
+  | "preview"
+
+/**
+ * Column definition for report templates
+ */
+export interface ColumnDefinition {
+  aggregate?: AggregateFunction
+  field: string
+  filterable?: boolean
+  format?: string
+  id: string
+  label: string
+  sortable?: boolean
+  type: ColumnType
+  visible?: boolean
+  width?: number
+}
+
+/**
+ * Filter configuration
+ */
+export interface Filter {
+  field: string
+  operator: FilterOperator
+  value: unknown
+}
+
+/**
+ * Sort configuration
+ */
+export interface SortConfig {
+  direction: "asc" | "desc"
+  field: string
+}
+
+/**
+ * Chart configuration for reports
+ */
+export interface ReportChartConfig {
+  series?: string[]
+  title: string
+  type: ChartType
+  xAxis: string
+  yAxis: string
+}
+
+/**
+ * Report template definition
+ */
+export interface ReportTemplate {
+  category: string
+  charts?: ReportChartConfig[]
+  columns: ColumnDefinition[]
+  defaultFilters?: Filter[]
+  defaultSort?: SortConfig
+  description: string
+  icon?: ReactNode
+  id: string
+  name: string
+}
+
+/**
+ * Data source configuration
+ */
+export interface DataSource {
+  data?: unknown[]
+  endpoint?: string
+  params?: Record<string, unknown>
+  query?: string
+  type: DataSourceType
+}
+
+/**
+ * Report configuration
+ */
+export interface ReportConfig {
+  columns: string[]
+  dateRange?: { from: Date; to: Date }
+  description?: string
+  filters: Filter[]
+  groupBy?: string
+  includeCharts?: boolean
+  includeSummary?: boolean
+  sort?: SortConfig
+  templateId: string
+  title: string
+}
+
+/**
+ * Schedule configuration
+ */
+export interface ScheduleConfig {
+  format: ExportFormat
+  frequency: ScheduleFrequency
+  recipients: string[]
+  time: string
+}
+
+/**
+ * Branding configuration
+ */
+export interface BrandingConfig {
+  companyName?: string
+  footerTemplate?: string
+  headerTemplate?: string
+  logo?: string
+  primaryColor?: string
+}
+
+/**
+ * Event payload for onGenerate
+ */
+export interface GeneratePayload {
+  config: ReportConfig
+}
+
+/**
+ * Event payload for onExport
+ */
+export interface ReportExportPayload {
+  data: Blob
+  format: ExportFormat
+}
+
+/**
+ * Event payload for onSchedule
+ */
+export interface SchedulePayload {
+  schedule: ScheduleConfig
+}
+
+/**
+ * Event payload for onError
+ */
+export interface ReportErrorPayload {
+  error: Error
+}
+
+/**
+ * Event payload for onConfigChange
+ */
+export interface ConfigChangePayload {
+  config: ReportConfig
+}
+
+/**
+ * ReportGenerator component props
+ */
+export interface ReportGeneratorProps extends ReportGeneratorVariantProps {
+  /**
+   * Branding configuration
+   */
+  branding?: BrandingConfig
+
+  /**
+   * Additional CSS classes
+   */
+  className?: string
+
+  /**
+   * Data source configuration
+   */
+  dataSource: DataSource
+
+  /**
+   * Default template ID to select
+   */
+  defaultTemplate?: string
+
+  /**
+   * Available export formats
+   * @default ['pdf', 'xlsx', 'csv']
+   */
+  exportFormats?: ExportFormat[]
+
+  /**
+   * Maximum number of rows to export
+   * @default 10000
+   */
+  maxRows?: number
+
+  /**
+   * Callback when configuration changes
+   */
+  onConfigChange?: (data: ConfigChangePayload) => void
+
+  /**
+   * Callback when report generation starts
+   */
+  onGenerate?: (data: GeneratePayload) => void
+
+  /**
+   * Callback when error occurs
+   */
+  onReportError?: (data: ReportErrorPayload) => void
+
+  /**
+   * Callback when export completes
+   */
+  onReportExport?: (data: ReportExportPayload) => void
+
+  /**
+   * Callback when schedule is created
+   */
+  onSchedule?: (data: SchedulePayload) => void
+
+  /**
+   * Enable preview before export
+   * @default true
+   */
+  showPreview?: boolean
+
+  /**
+   * Enable scheduling feature
+   * @default false
+   */
+  showSchedule?: boolean
+
+  /**
+   * Available report templates
+   */
+  templates: ReportTemplate[]
+}
+
+/**
+ * Step indicator props for internal use
+ */
+export interface StepIndicatorProps {
+  currentStep: number
+  onStepClick?: (step: number) => void
+  steps: {
+    description?: string
+    label: string
+  }[]
+}
+
+/**
+ * Template selector props for internal use
+ */
+export interface TemplateSelectorProps {
+  onSelect: (templateId: string) => void
+  selectedTemplate?: string
+  templates: ReportTemplate[]
+}
+
+/**
+ * Configuration form props for internal use
+ */
+export interface ConfigurationFormProps {
+  config: Partial<ReportConfig>
+  onBack: () => void
+  onChange: (config: Partial<ReportConfig>) => void
+  onSubmit: () => void
+  template: ReportTemplate
+}
+
+/**
+ * Preview panel props for internal use
+ */
+export interface PreviewPanelProps {
+  branding?: BrandingConfig
+  columns: ColumnDefinition[]
+  config: ReportConfig
+  data: unknown[]
+  exportFormats: ExportFormat[]
+  onBack: () => void
+  onReportExport: (format: ExportFormat) => void
+}

package/src/components/workflow/ReportGenerator/ReportGenerator.variants.ts

@@ -0,0 +1,378 @@
+/* eslint-disable sonarjs/no-duplicate-string -- Tailwind classes are intentionally duplicated across variants */
+import { cva, type VariantProps } from "class-variance-authority"
+
+/**
+ * ReportGenerator container variants
+ */
+export const reportGeneratorVariants = cva(
+  [
+    "relative",
+    "rounded-lg",
+    "border",
+    "border-border",
+    "bg-card",
+    "text-card-foreground",
+  ],
+  {
+    variants: {
+      size: {
+        default: "p-6",
+        sm: "p-4",
+        lg: "p-8",
+      },
+      layout: {
+        default: "",
+        compact: "max-w-2xl",
+        full: "w-full",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+      layout: "default",
+    },
+  }
+)
+
+/**
+ * Step indicator variants
+ */
+export const stepIndicatorVariants = cva(
+  [
+    "flex",
+    "items-center",
+    "mb-6",
+    "pb-6",
+    "border-b",
+    "border-border",
+  ],
+  {
+    variants: {
+      size: {
+        default: "gap-4",
+        sm: "gap-3",
+        lg: "gap-6",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+)
+
+/**
+ * Step item variants
+ */
+export const stepItemVariants = cva(
+  [
+    "flex",
+    "items-center",
+    "gap-2",
+    "transition-colors",
+    "duration-200",
+  ],
+  {
+    variants: {
+      state: {
+        pending: "text-muted-foreground",
+        active: "text-primary",
+        complete: "text-success",
+      },
+      clickable: {
+        true: "cursor-pointer hover:text-primary",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      state: "pending",
+      clickable: false,
+    },
+  }
+)
+
+/**
+ * Step badge variants
+ */
+export const stepBadgeVariants = cva(
+  [
+    "flex",
+    "items-center",
+    "justify-center",
+    "rounded-full",
+    "font-medium",
+    "transition-colors",
+    "duration-200",
+  ],
+  {
+    variants: {
+      state: {
+        pending: "bg-muted text-muted-foreground",
+        active: "bg-primary text-primary-foreground",
+        complete: "bg-success text-success-foreground",
+      },
+      size: {
+        default: "h-8 w-8 text-sm",
+        sm: "h-6 w-6 text-xs",
+        lg: "h-10 w-10 text-base",
+      },
+    },
+    defaultVariants: {
+      state: "pending",
+      size: "default",
+    },
+  }
+)
+
+/**
+ * Template grid variants
+ */
+export const templateGridVariants = cva(
+  [
+    "grid",
+    "gap-4",
+  ],
+  {
+    variants: {
+      columns: {
+        1: "grid-cols-1",
+        2: "grid-cols-1 sm:grid-cols-2",
+        3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+        4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4",
+      },
+    },
+    defaultVariants: {
+      columns: 3,
+    },
+  }
+)
+
+/**
+ * Template card variants
+ */
+export const templateCardVariants = cva(
+  [
+    "rounded-lg",
+    "border",
+    "border-border",
+    "bg-background",
+    "p-4",
+    "cursor-pointer",
+    "transition-all",
+    "duration-200",
+  ],
+  {
+    variants: {
+      state: {
+        default: "hover:border-primary/50 hover:shadow-sm",
+        selected: "border-primary ring-2 ring-primary/20",
+      },
+    },
+    defaultVariants: {
+      state: "default",
+    },
+  }
+)
+
+/**
+ * Configuration section variants
+ */
+export const configSectionVariants = cva(
+  [
+    "space-y-4",
+  ],
+  {
+    variants: {
+      size: {
+        default: "mb-6",
+        sm: "mb-4",
+        lg: "mb-8",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+)
+
+/**
+ * Preview container variants
+ */
+export const previewContainerVariants = cva(
+  [
+    "rounded-lg",
+    "border",
+    "border-border",
+    "bg-muted/30",
+    "overflow-hidden",
+  ],
+  {
+    variants: {
+      size: {
+        default: "min-h-[400px]",
+        sm: "min-h-[300px]",
+        lg: "min-h-[500px]",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+)
+
+/**
+ * Preview header variants
+ */
+export const previewHeaderVariants = cva(
+  [
+    "flex",
+    "items-center",
+    "justify-between",
+    "border-b",
+    "border-border",
+    "bg-card",
+  ],
+  {
+    variants: {
+      size: {
+        default: "px-4 py-3",
+        sm: "px-3 py-2",
+        lg: "px-6 py-4",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+)
+
+/**
+ * Preview content variants
+ */
+export const previewContentVariants = cva(
+  [
+    "overflow-auto",
+  ],
+  {
+    variants: {
+      size: {
+        default: "p-4 max-h-[400px]",
+        sm: "p-3 max-h-[300px]",
+        lg: "p-6 max-h-[500px]",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+)
+
+/**
+ * Export button group variants
+ */
+export const exportButtonGroupVariants = cva(
+  [
+    "flex",
+    "flex-wrap",
+    "gap-2",
+  ],
+  {
+    variants: {
+      align: {
+        start: "justify-start",
+        center: "justify-center",
+        end: "justify-end",
+      },
+    },
+    defaultVariants: {
+      align: "end",
+    },
+  }
+)
+
+/**
+ * Form actions variants
+ */
+export const formActionsVariants = cva(
+  [
+    "flex",
+    "items-center",
+    "gap-3",
+    "pt-6",
+    "border-t",
+    "border-border",
+  ],
+  {
+    variants: {
+      align: {
+        start: "justify-start",
+        between: "justify-between",
+        end: "justify-end",
+      },
+    },
+    defaultVariants: {
+      align: "between",
+    },
+  }
+)
+
+/**
+ * Loading state variants
+ */
+export const loadingStateVariants = cva(
+  [
+    "flex",
+    "flex-col",
+    "items-center",
+    "justify-center",
+    "text-center",
+  ],
+  {
+    variants: {
+      size: {
+        default: "py-16 gap-4",
+        sm: "py-12 gap-3",
+        lg: "py-20 gap-6",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+)
+
+/**
+ * Error state variants
+ */
+export const errorStateVariants = cva(
+  [
+    "flex",
+    "flex-col",
+    "items-center",
+    "justify-center",
+    "text-center",
+    "text-destructive",
+  ],
+  {
+    variants: {
+      size: {
+        default: "py-16 gap-4",
+        sm: "py-12 gap-3",
+        lg: "py-20 gap-6",
+      },
+    },
+    defaultVariants: {
+      size: "default",
+    },
+  }
+)
+
+export type ReportGeneratorVariantProps = VariantProps<
+  typeof reportGeneratorVariants
+>
+export type StepIndicatorVariantProps = VariantProps<
+  typeof stepIndicatorVariants
+>
+export type StepBadgeVariantProps = VariantProps<typeof stepBadgeVariants>
+export type TemplateCardVariantProps = VariantProps<typeof templateCardVariants>
+export type PreviewContainerVariantProps = VariantProps<
+  typeof previewContainerVariants
+>

package/src/components/workflow/ReportGenerator/index.ts

@@ -0,0 +1,44 @@
+export type {
+  BrandingConfig,
+  ColumnDefinition,
+  ConfigChangePayload,
+  ConfigurationFormProps,
+  DataSource,
+  GeneratePayload,
+  PreviewPanelProps,
+  ReportChartConfig,
+  ReportConfig,
+  ReportErrorPayload,
+  ReportExportPayload,
+  ReportGeneratorProps,
+  ReportGeneratorState,
+  ReportTemplate,
+  ScheduleConfig,
+  SchedulePayload,
+  StepIndicatorProps,
+  TemplateSelectorProps,
+} from "./ReportGenerator.types"
+export type {
+  PreviewContainerVariantProps,
+  ReportGeneratorVariantProps,
+  StepBadgeVariantProps,
+  StepIndicatorVariantProps,
+  TemplateCardVariantProps,
+} from "./ReportGenerator.variants"
+export {
+  configSectionVariants,
+  errorStateVariants,
+  exportButtonGroupVariants,
+  formActionsVariants,
+  loadingStateVariants,
+  previewContainerVariants,
+  previewContentVariants,
+  previewHeaderVariants,
+  reportGeneratorVariants,
+  stepBadgeVariants as reportStepBadgeVariants,
+  stepIndicatorVariants as reportStepIndicatorVariants,
+  stepItemVariants as reportStepItemVariants,
+  templateCardVariants,
+  templateGridVariants,
+} from "./ReportGenerator.variants"
+export { ReportGenerator } from "./ReportGenerator"