@dmsi/wedgekit-react 0.0.29 → 0.0.31

package/src/components/Stack.tsx

@@ -46,7 +46,7 @@ export interface FlexProps {
   flexShrink?: string | number;
 }
 
-const useFlexClassNames = ({ items, justify, grow }: FlexProps) =>
+const getFlexClassNames = ({ items, justify, grow }: FlexProps) =>
   clsx(
     "flex",
     items === "start" && "items-start",
@@ -93,7 +93,7 @@ export const Stack = ({
   id,
   ...props
 }: StackProps) => {
-  const flexClassNames = useFlexClassNames({ items, justify, grow });
+  const flexClassNames = getFlexClassNames({ items, justify, grow });
 
   return (
     <div
@@ -127,6 +127,8 @@ export const Stack = ({
       }}
       className={clsx(
         "scrollbar-thin",
+        "max-w-screen",
+
         width !== "fit" && "w-full",
         width === "full" && "w-full",
         centered && "mx-auto",

package/src/utils/date.ts

@@ -0,0 +1,206 @@
+/**
+ * Shared date utility functions for DateInput and DateRangeInput components
+ */
+
+/**
+ * Parse MM/DD/YYYY format to YYYY-MM-DD format
+ */
+export function parseInputDate(input: string): string | null {
+  const match = input.match(/^(\d{1,2})\/(\d{1,2})\/(\d{4})$/);
+  if (!match) {
+    return null;
+  }
+  
+  const [, month, day, year] = match;
+  
+  // Pad with zeros if necessary
+  const paddedMonth = month.padStart(2, "0");
+  const paddedDay = day.padStart(2, "0");
+  
+  return `${year}-${paddedMonth}-${paddedDay}`;
+}
+
+/**
+ * Validate if a date string is a valid date
+ */
+export function isValidDate(dateString: string): boolean {
+  const date = new Date(dateString);
+  return date instanceof Date && !isNaN(date.getTime()) && dateString === date.toISOString().split("T")[0];
+}
+
+/**
+ * Format input value with slashes (MM/DD/YYYY)
+ */
+export function formatInputValue(value: string): string {
+  // Remove all non-digits
+  const digits = value.replace(/\D/g, "");
+  
+  // Return digits as-is if less than 2
+  if (digits.length < 2) {
+    return digits;
+  }
+  
+  // Format with full MM/DD/YYYY pattern if 4 or more digits
+  if (digits.length >= 4) {
+    return `${digits.slice(0, 2)}/${digits.slice(2, 4)}/${digits.slice(4, 8)}`;
+  }
+  
+  // Format with MM/DD pattern for 2-3 digits
+  return `${digits.slice(0, 2)}/${digits.slice(2)}`;
+}
+
+/**
+ * Check if character is a digit
+ */
+export function isDigit(character: string): boolean {
+  return /\d/.test(character);
+}
+
+/**
+ * Check if character is a slash
+ */
+export function isSlash(character: string): boolean {
+  return character === "/";
+}
+
+/**
+ * Count digits up to cursor position
+ */
+export function countDigitsUpToCursor(value: string, cursorPosition: number): number {
+  let digitCount = 0;
+  
+  for (let i = 0; i < cursorPosition && i < value.length; i++) {
+    if (!isDigit(value[i])) {
+      continue;
+    }
+
+    digitCount++;
+  }
+  
+  return digitCount;
+}
+
+/**
+ * Find position after specific digit count
+ */
+export function findPositionAfterDigitCount(formattedValue: string, targetDigitCount: number): number {
+  let currentDigitCount = 0;
+  
+  for (let i = 0; i < formattedValue.length; i++) {
+    if (!isDigit(formattedValue[i])) {
+      continue;
+    }
+    
+    currentDigitCount++;
+    
+    if (currentDigitCount !== targetDigitCount) {
+      continue;
+    }
+    
+    const positionAfterDigit = i + 1;
+    const nextCharacter = formattedValue[positionAfterDigit];
+    
+    // Place cursor after slash if it follows the target digit
+    if (nextCharacter && isSlash(nextCharacter)) {
+      return positionAfterDigit + 1;
+    }
+    
+    return positionAfterDigit;
+  }
+  
+  return formattedValue.length;
+}
+
+/**
+ * Calculate cursor position after formatting
+ */
+export function calculateCursorPosition(originalValue: string, formattedValue: string, originalPosition: number): number {
+  const targetDigitCount = countDigitsUpToCursor(originalValue, originalPosition);
+  const newPosition = findPositionAfterDigitCount(formattedValue, targetDigitCount);
+  
+  return Math.min(newPosition, formattedValue.length);
+}
+
+/**
+ * Parse date parts from YYYY-MM-DD format
+ */
+export function parseDateParts(dateString: string): { year: number; month: number; day: number } | null {
+  const [yearStr, monthStr, dayStr] = dateString.split("-");
+  
+  if (!yearStr || !monthStr || !dayStr) {
+    return null;
+  }
+  
+  const year = parseInt(yearStr, 10);
+  const month = parseInt(monthStr, 10);
+  const day = parseInt(dayStr, 10);
+  
+  if (isNaN(year) || isNaN(month) || isNaN(day)) {
+    return null;
+  }
+  
+  return { year, month, day };
+}
+
+/**
+ * Check if date range is valid (month 1-12, day 1-31)
+ */
+export function isValidDateRange(month: number, day: number): boolean {
+  if (month < 1 || month > 12) {
+    return false;
+  }
+  if (day < 1 || day > 31) {
+    return false;
+  }
+  return true;
+}
+
+/**
+ * Format date parts to display format (MM/DD/YYYY)
+ */
+export function formatDatePartsToDisplay(year: number, month: number, day: number): string {
+  const paddedMonth = month.toString().padStart(2, "0");
+  const paddedDay = day.toString().padStart(2, "0");
+  
+  return `${paddedMonth}/${paddedDay}/${year}`;
+}
+
+/**
+ * Format date string to display format
+ */
+export function formatDate(date: string): string {
+  if (!date) {
+    return "";
+  }
+  
+  try {
+    const dateParts = parseDateParts(date);
+    if (!dateParts) {
+      return "";
+    }
+    
+    const { year, month, day } = dateParts;
+    
+    if (!isValidDateRange(month, day)) {
+      return "";
+    }
+    
+    return formatDatePartsToDisplay(year, month, day);
+  } catch (error) {
+    return "";
+  }
+}
+
+/**
+ * Validate if date range is valid (to >= from)
+ */
+export function isValidDateRangeOrder(fromDate: string, toDate: string): boolean {
+  if (!fromDate || !toDate || !isValidDate(fromDate) || !isValidDate(toDate)) {
+    return false;
+  }
+  
+  // Check if 'to' date is not earlier than 'from' date
+  const from = new Date(fromDate);
+  const to = new Date(toDate);
+  return to >= from;
+}