@neoptocom/neopto-ui 1.5.4 → 1.6.0

package/src/components/Calendar.tsx

@@ -0,0 +1,217 @@
+import * as React from "react";
+
+export type CalendarProps = {
+  /** Currently selected date */
+  selectedDate?: Date;
+  /** Callback when a date is selected */
+  onDateSelect: (date: Date) => void;
+  /** Today's date (for highlighting) */
+  today?: Date;
+  /** Minimum selectable date */
+  minDate?: Date;
+  /** Maximum selectable date */
+  maxDate?: Date;
+};
+
+const DAYS_OF_WEEK = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
+const MONTHS = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
+];
+
+function isSameDay(date1: Date, date2: Date): boolean {
+  return (
+    date1.getDate() === date2.getDate() &&
+    date1.getMonth() === date2.getMonth() &&
+    date1.getFullYear() === date2.getFullYear()
+  );
+}
+
+function isSameMonth(date1: Date, date2: Date): boolean {
+  return (
+    date1.getMonth() === date2.getMonth() &&
+    date1.getFullYear() === date2.getFullYear()
+  );
+}
+
+function startOfDay(date: Date): Date {
+  const d = new Date(date);
+  d.setHours(0, 0, 0, 0);
+  return d;
+}
+
+export default function Calendar({
+  selectedDate,
+  onDateSelect,
+  today = new Date(),
+  minDate,
+  maxDate,
+}: CalendarProps) {
+  const [currentMonth, setCurrentMonth] = React.useState(
+    selectedDate || new Date()
+  );
+
+  const todayStart = startOfDay(today);
+  const selectedDateStart = selectedDate ? startOfDay(selectedDate) : null;
+
+  const firstDayOfMonth = new Date(
+    currentMonth.getFullYear(),
+    currentMonth.getMonth(),
+    1
+  );
+  const lastDayOfMonth = new Date(
+    currentMonth.getFullYear(),
+    currentMonth.getMonth() + 1,
+    0
+  );
+  const daysInMonth = lastDayOfMonth.getDate();
+  const startingDayOfWeek = firstDayOfMonth.getDay();
+
+  const prevMonth = () => {
+    setCurrentMonth(
+      new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1)
+    );
+  };
+
+  const nextMonth = () => {
+    setCurrentMonth(
+      new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1)
+    );
+  };
+
+  const handleDateClick = (day: number) => {
+    const date = new Date(
+      currentMonth.getFullYear(),
+      currentMonth.getMonth(),
+      day
+    );
+    const dateStart = startOfDay(date);
+
+    if (minDate && dateStart < startOfDay(minDate)) return;
+    if (maxDate && dateStart > startOfDay(maxDate)) return;
+
+    onDateSelect(date);
+  };
+
+  const isDateDisabled = (day: number): boolean => {
+    const date = new Date(
+      currentMonth.getFullYear(),
+      currentMonth.getMonth(),
+      day
+    );
+    const dateStart = startOfDay(date);
+
+    if (minDate && dateStart < startOfDay(minDate)) return true;
+    if (maxDate && dateStart > startOfDay(maxDate)) return true;
+    return false;
+  };
+
+  const days = [];
+  // Empty cells for days before the first day of the month
+  for (let i = 0; i < startingDayOfWeek; i++) {
+    days.push(null);
+  }
+  // Days of the month
+  for (let day = 1; day <= daysInMonth; day++) {
+    days.push(day);
+  }
+
+  return (
+    <div className="w-full">
+      {/* Header */}
+      <div className="flex items-center justify-between mb-4">
+        <button
+          type="button"
+          onClick={prevMonth}
+          className="p-2 rounded-full hover:bg-[var(--muted)] transition-colors"
+          aria-label="Previous month"
+        >
+          <span className="material-symbols-rounded text-[var(--fg)]">
+            chevron_left
+          </span>
+        </button>
+        <h3 className="text-sm font-medium text-[var(--fg)]">
+          {MONTHS[currentMonth.getMonth()]} {currentMonth.getFullYear()}
+        </h3>
+        <button
+          type="button"
+          onClick={nextMonth}
+          className="p-2 rounded-full hover:bg-[var(--muted)] transition-colors"
+          aria-label="Next month"
+        >
+          <span className="material-symbols-rounded text-[var(--fg)]">
+            chevron_right
+          </span>
+        </button>
+      </div>
+
+      {/* Days of week header */}
+      <div className="grid grid-cols-7 gap-1 mb-2">
+        {DAYS_OF_WEEK.map((day) => (
+          <div
+            key={day}
+            className="text-xs text-center text-[var(--muted-fg)] font-medium py-1"
+          >
+            {day}
+          </div>
+        ))}
+      </div>
+
+      {/* Calendar grid */}
+      <div className="grid grid-cols-7 gap-1">
+        {days.map((day, idx) => {
+          if (day === null) {
+            return <div key={`empty-${idx}`} className="aspect-square" />;
+          }
+
+          const date = new Date(
+            currentMonth.getFullYear(),
+            currentMonth.getMonth(),
+            day
+          );
+          const dateStart = startOfDay(date);
+          const isSelected = selectedDateStart && isSameDay(dateStart, selectedDateStart);
+          const isToday = isSameDay(dateStart, todayStart);
+          const isDisabled = isDateDisabled(day);
+          const isCurrentMonth = isSameMonth(dateStart, currentMonth);
+
+          return (
+            <button
+              key={day}
+              type="button"
+              onClick={() => handleDateClick(day)}
+              disabled={isDisabled}
+              className={[
+                "aspect-square rounded-lg text-sm transition-colors",
+                isSelected
+                  ? "bg-[var(--color-brand)] text-white font-medium"
+                  : isToday
+                  ? "bg-[var(--muted)] text-[var(--fg)] font-medium border border-[var(--color-brand)]"
+                  : "text-[var(--fg)] hover:bg-[var(--muted)]",
+                isDisabled
+                  ? "opacity-30 cursor-not-allowed"
+                  : "cursor-pointer",
+                !isCurrentMonth ? "opacity-50" : "",
+              ]
+                .filter(Boolean)
+                .join(" ")}
+            >
+              {day}
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+

package/src/components/DateInput.tsx

@@ -0,0 +1,225 @@
+import * as React from "react";
+import { Input } from "./Input";
+import Calendar from "./Calendar";
+import { Card } from "./Card";
+
+export type DateInputProps = Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  "value" | "onChange" | "type"
+> & {
+  /** Label text displayed above the input */
+  label?: string;
+  /** Current date value */
+  value?: Date | null;
+  /** Callback when date changes */
+  onChange: (date: Date) => void;
+  /** Flag to visually mark the input as errored */
+  error?: boolean;
+  /** Minimum selectable date */
+  minDate?: Date;
+  /** Maximum selectable date */
+  maxDate?: Date;
+  /** Placeholder text (default: "00/00/0000") */
+  placeholder?: string;
+};
+
+function formatDate(date: Date): string {
+  const day = String(date.getDate()).padStart(2, "0");
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const year = date.getFullYear();
+  return `${day}/${month}/${year}`;
+}
+
+function parseDate(dateString: string): Date | null {
+  const parts = dateString.split("/");
+  if (parts.length !== 3) return null;
+
+  const day = parseInt(parts[0], 10);
+  const month = parseInt(parts[1], 10) - 1; // Month is 0-indexed
+  const year = parseInt(parts[2], 10);
+
+  if (isNaN(day) || isNaN(month) || isNaN(year)) return null;
+
+  const date = new Date(year, month, day);
+  // Check if date is valid
+  if (
+    date.getDate() !== day ||
+    date.getMonth() !== month ||
+    date.getFullYear() !== year
+  ) {
+    return null;
+  }
+
+  return date;
+}
+
+function isValidDate(date: Date): boolean {
+  return date instanceof Date && !isNaN(date.getTime());
+}
+
+function startOfDay(date: Date): Date {
+  const d = new Date(date);
+  d.setHours(0, 0, 0, 0);
+  return d;
+}
+
+export const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(
+  (
+    {
+      label,
+      value,
+      onChange,
+      error = false,
+      disabled = false,
+      minDate,
+      maxDate,
+      placeholder = "00/00/0000",
+      className = "",
+      ...props
+    },
+    ref
+  ) => {
+    const [inputValue, setInputValue] = React.useState(
+      value && isValidDate(value) ? formatDate(value) : placeholder
+    );
+    const [isFocused, setIsFocused] = React.useState(false);
+    const [showCalendar, setShowCalendar] = React.useState(false);
+    const [initialDateSet, setInitialDateSet] = React.useState(true);
+    const containerRef = React.useRef<HTMLDivElement>(null);
+
+    // Update input value when value prop changes
+    React.useEffect(() => {
+      if (value && isValidDate(value)) {
+        setInputValue(formatDate(value));
+      } else {
+        setInputValue(placeholder);
+      }
+    }, [value, placeholder]);
+
+    // Set today's date when calendar first opens
+    React.useEffect(() => {
+      if (showCalendar && initialDateSet) {
+        const today = new Date();
+        onChange(today);
+        setInputValue(formatDate(today));
+        setInitialDateSet(false);
+      }
+    }, [showCalendar, initialDateSet, onChange]);
+
+    // Handle click outside
+    React.useEffect(() => {
+      const handleClickOutside = (event: MouseEvent) => {
+        if (
+          containerRef.current &&
+          !containerRef.current.contains(event.target as Node)
+        ) {
+          setShowCalendar(false);
+          setInitialDateSet(false);
+        }
+      };
+
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, []);
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      let rawValue = e.target.value;
+
+      // Remove non-digits and format as dd/MM/yyyy
+      rawValue = rawValue
+        .replace(/\D/g, "")
+        .replace(/^(\d{2})/, "$1/")
+        .replace(/^(\d{2}\/\d{2})/, "$1/")
+        .slice(0, 10);
+
+      setInputValue(rawValue);
+
+      // Parse and validate when complete
+      if (rawValue.length === 10) {
+        const parsedDate = parseDate(rawValue);
+        if (parsedDate && isValidDate(parsedDate)) {
+          onChange(parsedDate);
+        }
+      }
+    };
+
+    const handleCalendarSelect = (date: Date) => {
+      const selectedDate = parseDate(inputValue);
+      const sameDay =
+        selectedDate &&
+        isValidDate(selectedDate) &&
+        selectedDate.getDate() === date.getDate() &&
+        selectedDate.getMonth() === date.getMonth() &&
+        selectedDate.getFullYear() === date.getFullYear();
+
+      if (!sameDay) {
+        onChange(date);
+        setInputValue(formatDate(date));
+      }
+
+      setInitialDateSet(false);
+      setShowCalendar(false);
+    };
+
+    const handleInputFocus = () => {
+      setIsFocused(true);
+      setShowCalendar(true);
+    };
+
+    const handleInputBlur = () => {
+      setIsFocused(false);
+      const parsed = parseDate(inputValue);
+      if (!parsed || !isValidDate(parsed)) {
+        const today = new Date();
+        onChange(today);
+        setInputValue(formatDate(today));
+      }
+    };
+
+    const isEmpty = inputValue === placeholder;
+    const textColorClass = isEmpty ? "text-[var(--muted-fg)]" : "";
+
+    return (
+      <div className={["relative w-full", className].join(" ")} ref={containerRef}>
+        <Input
+          ref={ref}
+          label={label}
+          type="text"
+          value={inputValue}
+          onChange={handleInputChange}
+          onFocus={handleInputFocus}
+          onBlur={handleInputBlur}
+          onClick={() => !disabled && setShowCalendar(true)}
+          disabled={disabled}
+          error={error}
+          icon="calendar_today"
+          className={textColorClass}
+          {...props}
+        />
+
+        {showCalendar && !disabled && (
+          <div className="absolute z-20 mt-2 w-full max-w-sm">
+            <Card className="p-4" showDecorations={false}>
+              <Calendar
+                selectedDate={
+                  inputValue !== placeholder &&
+                  parseDate(inputValue) &&
+                  isValidDate(parseDate(inputValue)!)
+                    ? parseDate(inputValue)!
+                    : new Date()
+                }
+                onDateSelect={handleCalendarSelect}
+                today={startOfDay(new Date())}
+                minDate={minDate}
+                maxDate={maxDate}
+              />
+            </Card>
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+DateInput.displayName = "DateInput";
+

package/src/index.ts

@@ -23,6 +23,8 @@ export * from "./components/Chat";
 export * from "./components/MessageBubble";
 export * from "./components/Separator";
 export { Breadcrumb } from "./components/Breadcrumb";
+export { DateInput } from "./components/DateInput";
+export { default as Calendar } from "./components/Calendar";
 
 // Types
 export type { AppBackgroundProps } from "./components/AppBackground";
@@ -45,4 +47,6 @@ export type { CounterProps } from "./components/Counter";
 export type { AgentButtonProps } from "./components/Chat";
 export type { MessageBubbleProps } from "./components/MessageBubble";
 export type { SeparatorProps } from "./components/Separator";
-export type { BreadcrumbProps, BreadcrumbItem } from "./components/Breadcrumb";
+export type { BreadcrumbProps, BreadcrumbItem } from "./components/Breadcrumb";
+export type { DateInputProps } from "./components/DateInput";
+export type { CalendarProps } from "./components/Calendar";

package/src/stories/DateInput.stories.tsx

@@ -0,0 +1,136 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { DateInput } from "../components/DateInput";
+import { useState } from "react";
+
+const meta: Meta<typeof DateInput> = {
+  title: "Components/DateInput",
+  component: DateInput
+};
+export default meta;
+type Story = StoryObj<typeof DateInput>;
+
+export const Default: Story = {
+  render: () => {
+    const [date, setDate] = useState<Date | null>(null);
+    return (
+      <div className="flex flex-col gap-4 w-96">
+        <DateInput
+          label="Select date"
+          value={date}
+          onChange={(d) => setDate(d)}
+        />
+      </div>
+    );
+  }
+};
+
+export const WithInitialValue: Story = {
+  render: () => {
+    const [date, setDate] = useState<Date | null>(new Date());
+    return (
+      <div className="flex flex-col gap-4 w-96">
+        <DateInput
+          label="Date"
+          value={date}
+          onChange={(d) => setDate(d)}
+        />
+      </div>
+    );
+  }
+};
+
+export const WithoutLabel: Story = {
+  render: () => {
+    const [date, setDate] = useState<Date | null>(null);
+    return (
+      <div className="flex flex-col gap-4 w-96">
+        <DateInput
+          value={date}
+          onChange={(d) => setDate(d)}
+        />
+      </div>
+    );
+  }
+};
+
+export const Disabled: Story = {
+  render: () => {
+    const [date, setDate] = useState<Date | null>(new Date());
+    return (
+      <div className="flex flex-col gap-4 w-96">
+        <DateInput
+          label="Disabled date"
+          value={date}
+          onChange={(d) => setDate(d)}
+          disabled
+        />
+      </div>
+    );
+  }
+};
+
+export const WithError: Story = {
+  render: () => {
+    const [date, setDate] = useState<Date | null>(null);
+    return (
+      <div className="flex flex-col gap-4 w-96">
+        <DateInput
+          label="Date"
+          value={date}
+          onChange={(d) => setDate(d)}
+          error
+        />
+      </div>
+    );
+  }
+};
+
+export const WithMinMax: Story = {
+  render: () => {
+    const [date, setDate] = useState<Date | null>(null);
+    const today = new Date();
+    const minDate = new Date(today);
+    minDate.setDate(today.getDate() - 7); // 7 days ago
+    const maxDate = new Date(today);
+    maxDate.setDate(today.getDate() + 30); // 30 days from now
+
+    return (
+      <div className="flex flex-col gap-4 w-96">
+        <DateInput
+          label="Select date (within range)"
+          value={date}
+          onChange={(d) => setDate(d)}
+          minDate={minDate}
+          maxDate={maxDate}
+        />
+        <p className="text-xs text-[var(--muted-fg)]">
+          Available range: {minDate.toLocaleDateString()} to {maxDate.toLocaleDateString()}
+        </p>
+      </div>
+    );
+  }
+};
+
+export const Multiple: Story = {
+  render: () => {
+    const [startDate, setStartDate] = useState<Date | null>(null);
+    const [endDate, setEndDate] = useState<Date | null>(null);
+
+    return (
+      <div className="flex flex-col gap-4 w-96">
+        <DateInput
+          label="Start date"
+          value={startDate}
+          onChange={(d) => setStartDate(d)}
+        />
+        <DateInput
+          label="End date"
+          value={endDate}
+          onChange={(d) => setEndDate(d)}
+          minDate={startDate || undefined}
+        />
+      </div>
+    );
+  }
+};
+