@ews-admin/global-design-system 1.0.0

package/src/styles/index.css

@@ -0,0 +1,95 @@
+/* EWS Global Design System - Base Styles */
+
+:root {
+  /* Colors */
+  --ews-primary: #2563eb;
+  --ews-primary-hover: #1d4ed8;
+  --ews-primary-light: #dbeafe;
+  --ews-secondary: #64748b;
+  --ews-secondary-hover: #475569;
+  --ews-success: #059669;
+  --ews-success-hover: #047857;
+  --ews-warning: #d97706;
+  --ews-warning-hover: #b45309;
+  --ews-error: #dc2626;
+  --ews-error-hover: #b91c1c;
+
+  /* Neutral Colors */
+  --ews-white: #ffffff;
+  --ews-gray-50: #f8fafc;
+  --ews-gray-100: #f1f5f9;
+  --ews-gray-200: #e2e8f0;
+  --ews-gray-300: #cbd5e1;
+  --ews-gray-400: #94a3b8;
+  --ews-gray-500: #64748b;
+  --ews-gray-600: #475569;
+  --ews-gray-700: #334155;
+  --ews-gray-800: #1e293b;
+  --ews-gray-900: #0f172a;
+
+  /* Spacing */
+  --ews-space-1: 0.25rem;
+  --ews-space-2: 0.5rem;
+  --ews-space-3: 0.75rem;
+  --ews-space-4: 1rem;
+  --ews-space-5: 1.25rem;
+  --ews-space-6: 1.5rem;
+  --ews-space-8: 2rem;
+  --ews-space-10: 2.5rem;
+  --ews-space-12: 3rem;
+
+  /* Border Radius */
+  --ews-radius-sm: 0.25rem;
+  --ews-radius-md: 0.375rem;
+  --ews-radius-lg: 0.5rem;
+  --ews-radius-xl: 0.75rem;
+
+  /* Typography */
+  --ews-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+    "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  --ews-font-mono: "SF Mono", "Monaco", "Inconsolata", "Roboto Mono",
+    "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Code",
+    "Droid Sans Mono", "Courier New", monospace;
+
+  /* Font Sizes */
+  --ews-text-xs: 0.75rem;
+  --ews-text-sm: 0.875rem;
+  --ews-text-base: 1rem;
+  --ews-text-lg: 1.125rem;
+  --ews-text-xl: 1.25rem;
+  --ews-text-2xl: 1.5rem;
+  --ews-text-3xl: 1.875rem;
+
+  /* Shadows */
+  --ews-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --ews-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1),
+    0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --ews-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1),
+    0 4px 6px -4px rgb(0 0 0 / 0.1);
+}
+
+/* Reset and Base Styles */
+* {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: var(--ews-font-sans);
+  line-height: 1.5;
+  color: var(--ews-gray-900);
+  background-color: var(--ews-white);
+}
+
+/* Utility Classes */
+.ews-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/src/utils/index.ts

@@ -0,0 +1,68 @@
+import { clsx, type ClassValue } from "clsx";
+
+/**
+ * Utility function to merge class names
+ * @param inputs - Class values to merge
+ * @returns Merged class string
+ */
+export function cn(...inputs: ClassValue[]) {
+  return clsx(inputs);
+}
+
+/**
+ * Utility function to format currency
+ * @param amount - Amount to format
+ * @param currency - Currency code (default: 'USD')
+ * @returns Formatted currency string
+ */
+export function formatCurrency(amount: number, currency = "USD"): string {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency,
+  }).format(amount);
+}
+
+/**
+ * Utility function to format date
+ * @param date - Date to format
+ * @param options - Intl.DateTimeFormat options
+ * @returns Formatted date string
+ */
+export function formatDate(
+  date: Date | string | number,
+  options?: Intl.DateTimeFormatOptions
+): string {
+  const dateObj = new Date(date);
+  return new Intl.DateTimeFormat("en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    ...options,
+  }).format(dateObj);
+}
+
+/**
+ * Utility function to debounce function calls
+ * @param func - Function to debounce
+ * @param wait - Wait time in milliseconds
+ * @returns Debounced function
+ */
+export function debounce<T extends (...args: any[]) => any>(
+  func: T,
+  wait: number
+): (...args: Parameters<T>) => void {
+  let timeout: ReturnType<typeof setTimeout>;
+  return (...args: Parameters<T>) => {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => func(...args), wait);
+  };
+}
+
+/**
+ * Utility function to generate unique ID
+ * @param prefix - Optional prefix for the ID
+ * @returns Unique ID string
+ */
+export function generateId(prefix = "ews"): string {
+  return `${prefix}-${Math.random().toString(36).substr(2, 9)}`;
+}