@synetics/ui 0.7.0-alpha

package/src/components/organisms/date-picker/examples.syn

@@ -0,0 +1,197 @@
+/**
+ * DatePicker v3 - Usage Examples
+ *
+ * This file demonstrates various usage patterns for the standalone DatePicker component.
+ */
+
+import React, { useState } from 'react'
+import DatePickerV3, { DateFormatsEnum } from './date-picker'
+import './date-picker.css'
+
+// Example 1: Basic uncontrolled
+export function BasicExample() {
+    return (
+        <div>
+            <h3>Basic Date Picker</h3>
+            <DatePickerV3 id="basic-picker" onChange={(date) => console.log('Selected:', date)} />
+        </div>
+    )
+}
+
+// Example 2: Controlled mode
+export function ControlledExample() {
+    const [selectedDate, setSelectedDate] = useState<Date>()
+
+    return (
+        <div>
+            <h3>Controlled Date Picker</h3>
+            <DatePickerV3
+                id="controlled-picker"
+                value={selectedDate}
+                onChange={(date) => setSelectedDate(date)}
+                placeholder="Pick a date"
+            />
+            {selectedDate && <p>Selected: {selectedDate.toLocaleDateString()}</p>}
+        </div>
+    )
+}
+
+// Example 3: Range selection
+export function RangeExample() {
+    const [startDate, setStartDate] = useState<Date>()
+    const [endDate, setEndDate] = useState<Date>()
+
+    return (
+        <div>
+            <h3>Range Date Picker</h3>
+            <DatePickerV3
+                id="range-picker"
+                defaultSelectionMode="range"
+                onChange={(start, end) => {
+                    setStartDate(start)
+                    setEndDate(end)
+                }}
+                showFooter={true}
+            />
+            {startDate && (
+                <p>
+                    Range: {startDate.toLocaleDateString()}
+                    {endDate && ` - ${endDate.toLocaleDateString()}`}
+                </p>
+            )}
+        </div>
+    )
+}
+
+// Example 4: Custom format (European)
+export function EuropeanFormatExample() {
+    return (
+        <div>
+            <h3>European Format (DD/MM/YYYY)</h3>
+            <DatePickerV3
+                id="european-picker"
+                displayFormat={DateFormatsEnum.DD_MM_YYYY}
+                dataFormat={DateFormatsEnum.YYYY_MM_DD}
+                separator="/"
+                onChange={(date) => console.log('Date:', date)}
+            />
+        </div>
+    )
+}
+
+// Example 5: US Format
+export function USFormatExample() {
+    return (
+        <div>
+            <h3>US Format (MM/DD/YYYY)</h3>
+            <DatePickerV3
+                id="us-picker"
+                displayFormat={DateFormatsEnum.MM_DD_YYYY}
+                separator="/"
+                onChange={(date) => console.log('Date:', date)}
+            />
+        </div>
+    )
+}
+
+// Example 6: With default value
+export function DefaultValueExample() {
+    const today = new Date()
+
+    return (
+        <div>
+            <h3>With Default Value (Today)</h3>
+            <DatePickerV3
+                id="default-picker"
+                defaultValue={today}
+                onChange={(date) => console.log('Changed to:', date)}
+            />
+        </div>
+    )
+}
+
+// Example 7: Disabled
+export function DisabledExample() {
+    return (
+        <div>
+            <h3>Disabled Date Picker</h3>
+            <DatePickerV3 id="disabled-picker" disabled={true} defaultValue={new Date()} />
+        </div>
+    )
+}
+
+// Example 8: Custom size
+export function CustomSizeExample() {
+    return (
+        <div>
+            <h3>Custom Drawer Size</h3>
+            <DatePickerV3
+                id="custom-size-picker"
+                drawerWidth="400px"
+                drawerHeight="450px"
+                showFooter={true}
+                onChange={(date) => console.log('Date:', date)}
+            />
+        </div>
+    )
+}
+
+// Example 9: Form integration
+export function FormExample() {
+    const [formData, setFormData] = useState({
+        startDate: undefined as Date | undefined,
+        endDate: undefined as Date | undefined
+    })
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault()
+        console.log('Form submitted:', formData)
+        alert(
+            `Dates: ${formData.startDate?.toLocaleDateString()} - ${formData.endDate?.toLocaleDateString()}`
+        )
+    }
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <h3>Form Integration</h3>
+            <div style={{ marginBottom: '1rem' }}>
+                <label>Start Date:</label>
+                <DatePickerV3
+                    id="form-start-date"
+                    value={formData.startDate}
+                    onChange={(date) => setFormData({ ...formData, startDate: date })}
+                />
+            </div>
+            <div style={{ marginBottom: '1rem' }}>
+                <label>End Date:</label>
+                <DatePickerV3
+                    id="form-end-date"
+                    value={formData.endDate}
+                    onChange={(date) => setFormData({ ...formData, endDate: date })}
+                />
+            </div>
+            <button type="submit">Submit</button>
+        </form>
+    )
+}
+
+// All examples in one demo
+export default function DatePickerExamples() {
+    return (
+        <div style={{ padding: '2rem', maxWidth: '800px' }}>
+            <h1>DatePicker v3 Examples</h1>
+
+            <div style={{ display: 'grid', gap: '2rem', marginTop: '2rem' }}>
+                <BasicExample />
+                <ControlledExample />
+                <RangeExample />
+                <EuropeanFormatExample />
+                <USFormatExample />
+                <DefaultValueExample />
+                <DisabledExample />
+                <CustomSizeExample />
+                <FormExample />
+            </div>
+        </div>
+    )
+}

package/src/components/organisms/date-picker/hooks/use-object-ref.ts

@@ -0,0 +1,18 @@
+import { useRef } from '@synetics/synetics.dev';
+
+/**
+ * useObjectRef is a hook that simplifies working with DOM refs by providing a typed ref object and a casted reference to its current value.
+ *
+ * @template T - The type of HTMLElement to reference.
+ * @returns {{ mainRef: { current: T | null }, castedRefObject: T | null }}
+ *
+ * @example
+ * const { mainRef, castedRefObject } = useObjectRef<HTMLDivElement>()
+ * <div ref={mainRef} />
+ * // castedRefObject will be the div element after mount, or null before mount
+ */
+export const useObjectRef = <T extends HTMLElement>() => {
+  const mainRef = useRef<T | null>(null);
+  const castedRefObject = mainRef.current as T | null;
+  return { mainRef, castedRefObject };
+};

package/src/components/organisms/date-picker/index.ts

@@ -0,0 +1,23 @@
+/**
+ * DatePicker v3 - Main Export
+ *
+ * Standalone DatePicker component without FORMULAR dependencies.
+ */
+
+export { default as DatePickerV3, default } from './date-picker.syn';
+
+// Export types and enums
+export type { DatePickerGridModeType, DatePickerSelectionModeType } from './core/date-picker.types';
+export type { DatePickerProps } from './date-picker.syn';
+export { DateFormatsEnum } from './utils/date-utils';
+
+// Export utilities (if needed)
+export { cx, ifClass, newIFClass } from './utils/class-utils';
+export { formatDate, fromINDate, parseDate, toINDate } from './utils/date-utils';
+
+// Export hooks (if needed)
+export { useObjectRef } from './hooks/use-object-ref';
+
+// Export Toggleable (if needed separately)
+export { useToggleableContext } from './toggleable/toggleable.context.hook';
+export { Toggleable } from './toggleable/toggleable.syn';

package/src/components/organisms/date-picker/internal-components/button.syn

@@ -0,0 +1,36 @@
+import React from 'react'
+
+interface ButtonProps {
+    id?: string
+    title?: string
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void
+    disabled?: boolean
+    className?: string
+    children: React.ReactNode
+}
+
+/**
+ * Simple button component for DatePicker_v3.
+ * Replaces the complex Button component from the design system.
+ */
+export const Button: React.FC<ButtonProps> = ({
+    id,
+    title,
+    onClick,
+    disabled,
+    className = '',
+    children
+}) => {
+    return (
+        <button
+            id={id}
+            title={title}
+            onClick={onClick}
+            disabled={disabled}
+            className={`dp-button ${className}`}
+            type="button"
+        >
+            {children}
+        </button>
+    )
+}

package/src/components/organisms/date-picker/internal-components/icons.syn

@@ -0,0 +1,76 @@
+/**
+ * Simple SVG icons for DatePicker_v3.
+ * Replaces react-icons dependency.
+ */
+
+export const CalendarIcon = () => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+        <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z" />
+    </svg>
+)
+
+export const CalendarEventIcon = () => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+        <path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z" />
+        <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z" />
+    </svg>
+)
+
+export const CalendarRangeIcon = () => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+        <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z" />
+        <path d="M6.5 7a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z" />
+    </svg>
+)
+
+export const CalendarDateIcon = () => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+        <path d="M6.445 11.688V6.354h-.633A12.6 12.6 0 0 0 4.5 7.16v.695c.375-.257.969-.62 1.258-.777h.012v4.61h.675zm1.188-1.305c.047.64.594 1.406 1.703 1.406 1.258 0 2-1.066 2-2.871 0-1.934-.781-2.668-1.953-2.668-.926 0-1.797.672-1.797 1.809 0 1.16.824 1.77 1.676 1.77.746 0 1.23-.376 1.383-.79h.027c-.004 1.316-.461 2.164-1.305 2.164-.664 0-1.008-.45-1.05-.82h-.684zm2.953-2.317c0 .696-.559 1.18-1.184 1.18-.601 0-1.144-.383-1.144-1.2 0-.823.582-1.21 1.168-1.21.633 0 1.16.398 1.16 1.23z" />
+        <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z" />
+    </svg>
+)
+
+export const WorldIcon = () => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+        <path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0ZM2.04 4.326c.325 1.329 2.532 2.54 3.717 3.19.48.263.793.434.743.484-.08.08-.162.158-.242.234-.416.396-.787.749-.758 1.266.035.634.618.824 1.214 1.017.577.188 1.168.38 1.286.983.082.417-.075.988-.22 1.52-.215.782-.406 1.48.22 1.48 1.5-.5 3.798-3.186 4-5 .138-1.243-2-2-3.5-2.5-.478-.16-.755.081-.99.284-.172.15-.322.279-.51.216-.445-.148-2.5-2-1.5-2.5.78-.39.952-.171 1.227.182.078.099.163.208.273.318.609.304.662-.132.723-.633.039-.322.081-.671.277-.867.434-.434 1.265-.791 2.028-1.12.712-.306 1.365-.587 1.579-.88A7 7 0 1 1 2.04 4.327Z" />
+    </svg>
+)
+
+export const ArrowLeftIcon = () => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+        <path
+            fillRule="evenodd"
+            d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"
+        />
+    </svg>
+)
+
+export const ArrowRightIcon = () => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+        <path
+            fillRule="evenodd"
+            d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"
+        />
+    </svg>
+)
+
+export const ClearIcon = () => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+        <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
+    </svg>
+)
+
+export const CalendarSearchIcon = () => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+        <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V5h16V4H0V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 14V6h14v8a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1zm7-6.5a.5.5 0 0 0-1 0v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 0-1H8v-.5z" />
+        <path d="M11.5 11.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm0 1a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z" />
+        <path d="M14.354 13.854a.5.5 0 0 1-.708 0l-.792-.792a.5.5 0 0 1 .708-.708l.792.792a.5.5 0 0 1 0 .708z" />
+    </svg>
+)
+
+export const CalendarCancelIcon = () => (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+        <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z" />
+        <path d="M6.146 7.146a.5.5 0 0 1 .708 0L8 8.293l1.146-1.147a.5.5 0 1 1 .708.708L8.707 9l1.147 1.146a.5.5 0 0 1-.708.708L8 9.707l-1.146 1.147a.5.5 0 0 1-.708-.708L7.293 9 6.146 7.854a.5.5 0 0 1 0-.708z" />
+    </svg>
+)

package/src/components/organisms/date-picker/internal-components/portal.syn

@@ -0,0 +1,62 @@
+import React, { createContext, ReactNode, useCallback, useContext, useState } from 'react'
+
+interface PortalContextType {
+  slots: Record<string, ReactNode>
+  setSlot: (name: string, content: ReactNode) => void
+}
+
+const PortalContext = createContext<PortalContextType | null>(null)
+
+export const PortalProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const [slots, setSlots] = useState<Record<string, ReactNode>>({})
+
+  const setSlot = useCallback((name: string, content: ReactNode) => {
+    setSlots((prev) => ({ ...prev, [name]: content }))
+  }, [])
+
+  return <PortalContext.Provider value={{ slots, setSlot }}>{children}</PortalContext.Provider>
+}
+
+export const usePortal = () => {
+  const context = useContext(PortalContext)
+  if (!context) {
+    throw new Error('usePortal must be used within PortalProvider')
+  }
+  return context
+}
+
+interface PortalProps {
+  id: string
+  slotName: string
+  children: ReactNode
+}
+
+export const Portal: React.FC<PortalProps> = ({ slotName, children }) => {
+  const { setSlot } = usePortal()
+  const prevChildrenRef = React.useRef<ReactNode>(children)
+
+  // Only update when content changes - use ref to track previous value
+  if (prevChildrenRef.current !== children) {
+    prevChildrenRef.current = children
+    // Call setSlot during render (not in effect) to avoid re-render loops
+    // This is safe because we're updating a parent context
+    queueMicrotask(() => setSlot(slotName, children))
+  }
+
+  // Cleanup on unmount
+  React.useEffect(() => {
+    return () => setSlot(slotName, null)
+  }, [slotName, setSlot])
+
+  return null
+}
+
+interface PortalSlotProps {
+  slotName: string
+  className?: string
+}
+
+export const PortalSlot: React.FC<PortalSlotProps> = ({ slotName, className }) => {
+  const { slots } = usePortal()
+  return <div className={className}>{slots[slotName]}</div>
+}

package/src/components/organisms/date-picker/toggleable/toggleable.context.hook.ts

@@ -0,0 +1,14 @@
+import { IToggleableContextType } from './toggleable.context';
+
+let _currentToggleableContext: IToggleableContextType | null = null;
+
+export const setCurrentToggleableContext = (context: IToggleableContextType) => {
+  _currentToggleableContext = context;
+};
+
+export const useToggleableContext = (): IToggleableContextType => {
+  if (!_currentToggleableContext) {
+    throw new Error('useToggleableContext must be used within a Toggleable provider');
+  }
+  return _currentToggleableContext;
+};

package/src/components/organisms/date-picker/toggleable/toggleable.context.ts

@@ -0,0 +1,6 @@
+export type ToggleableStateType = 'idle' | 'open' | 'closed';
+
+export interface IToggleableContextType {
+  toggleState: () => ToggleableStateType;
+  setToggleState: (commandId?: string) => void;
+}

package/src/components/organisms/date-picker/toggleable/toggleable.syn

@@ -0,0 +1,37 @@
+import { useEffect, useToggleable } from '@synetics/synetics.dev';
+import { ToggleableStateType } from './toggleable.context';
+import { setCurrentToggleableContext } from './toggleable.context.hook';
+
+interface ToggleableProviderProps {
+  children: HTMLElement[] | HTMLElement;
+  initialState?: ToggleableStateType;
+  id?: string;
+}
+
+export const Toggleable = ({
+  children,
+  id,
+  initialState,
+}: ToggleableProviderProps): HTMLElement => {
+  const toggleable = useToggleable(initialState ?? 'idle');
+
+  const context = {
+    toggleState: toggleable.state,
+    setToggleState: (newStateOrCommandId?: string | ToggleableStateType) => {
+      if (
+        newStateOrCommandId === 'open' ||
+        newStateOrCommandId === 'closed' ||
+        newStateOrCommandId === 'idle'
+      ) {
+        toggleable.setState(newStateOrCommandId);
+        return;
+      }
+      toggleable.toggle();
+    },
+  };
+
+  // Set context BEFORE rendering children
+  setCurrentToggleableContext(context);
+
+  return <>{children}</>;
+};

package/src/components/organisms/date-picker/utils/class-utils.ts

@@ -0,0 +1,25 @@
+/**
+ * Utility functions for className management in DatePicker_v3.
+ * Replaces formular.dev.lib utilities.
+ */
+
+export interface IFClass {
+    className: string
+    condition: boolean
+}
+
+export const newIFClass = (className: string, condition?: boolean): IFClass => ({
+    className,
+    condition: condition ?? false
+})
+
+export const ifClass = (conditions: IFClass[]): string => {
+    return conditions
+        .filter((c) => c.condition)
+        .map((c) => c.className)
+        .join(' ')
+}
+
+export const cx = (...classNames: (string | undefined | null | false)[]): string => {
+    return classNames.filter(Boolean).join(' ')
+}

package/src/components/organisms/date-picker/utils/date-object.ts

@@ -0,0 +1,42 @@
+/**
+ * Local implementation of DateObject to replace formular.dev.lib dependency
+ */
+
+export interface IDateObject {
+  day: number
+  month: number
+  year: number
+  key: string
+  toDate: () => Date
+  toString: () => string
+}
+
+export class DateObject implements IDateObject {
+  day: number
+  month: number
+  year: number
+  key: string
+
+  constructor(date: Date, key: string) {
+    this.day = date.getDate()
+    this.month = date.getMonth()
+    this.year = date.getFullYear()
+    this.key = key
+  }
+
+  toDate(): Date {
+    return new Date(this.year, this.month, this.day)
+  }
+
+  toString(): string {
+    return `${this.year}-${String(this.month + 1).padStart(2, '0')}-${String(this.day).padStart(2, '0')}`
+  }
+}
+
+/**
+ * Get timestamp from a date (set to midnight UTC)
+ */
+export const getTs = (date: Date): number => {
+  const d = new Date(date.getFullYear(), date.getMonth(), date.getDate())
+  return d.getTime()
+}

package/src/components/organisms/date-picker/utils/date-utils.ts

@@ -0,0 +1,112 @@
+/**
+ * Date utilities for DatePicker_v3.
+ * Simplified date formatting and parsing.
+ */
+
+export enum DateFormatsEnum {
+  DD_MM_YYYY = 'dd/MM/yyyy',
+  MM_DD_YYYY = 'MM/dd/yyyy',
+  YYYY_MM_DD = 'yyyy/MM/dd',
+  DD_MM_YYYY_DASH = 'dd-MM-yyyy',
+  MM_DD_YYYY_DASH = 'MM-dd-yyyy',
+  YYYY_MM_DD_DASH = 'yyyy-MM-dd',
+}
+
+export interface INDate {
+  day: number
+  month: number
+  year: number
+}
+
+export const formatDate = (
+  date: Date | INDate | undefined,
+  format: DateFormatsEnum | string = DateFormatsEnum.DD_MM_YYYY,
+  separator?: string
+): string => {
+  if (!date) return ''
+
+  let day: number, month: number, year: number
+
+  if (date instanceof Date) {
+    // Check for invalid date
+    if (isNaN(date.getTime())) return ''
+
+    day = date.getDate()
+    month = date.getMonth() + 1
+    year = date.getFullYear()
+  } else if ('day' in date && 'month' in date && 'year' in date) {
+    day = date.day
+    month = date.month + 1
+    year = date.year
+  } else {
+    return ''
+  }
+
+  // Check for NaN values
+  if (isNaN(day) || isNaN(month) || isNaN(year)) return ''
+
+  const dd = day.toString().padStart(2, '0')
+  const MM = month.toString().padStart(2, '0')
+  const yyyy = year.toString()
+
+  // Replace format placeholders
+  let result = format
+    .replace('dd', dd)
+    .replace('DD', dd)
+    .replace('MM', MM)
+    .replace('yyyy', yyyy)
+    .replace('YYYY', yyyy)
+
+  // Only apply custom separator if explicitly provided
+  if (separator !== undefined) {
+    const formatHasSlash = format.includes('/')
+    const formatHasDash = format.includes('-')
+
+    if (formatHasSlash) {
+      result = result.replace(/\//g, separator)
+    } else if (formatHasDash) {
+      result = result.replace(/-/g, separator)
+    }
+  }
+
+  return result
+}
+
+export const parseDate = (
+  dateString: string,
+  format: DateFormatsEnum | string = DateFormatsEnum.DD_MM_YYYY
+): Date | null => {
+  if (!dateString) return null
+
+  const separator = format.includes('/') ? '/' : format.includes('-') ? '-' : ' '
+  const parts = dateString.split(separator)
+  const formatParts = format.split(separator)
+
+  if (parts.length !== formatParts.length) return null
+
+  let day = 1,
+    month = 0,
+    year = new Date().getFullYear()
+
+  formatParts.forEach((part, index) => {
+    const value = parseInt(parts[index], 10)
+    if (isNaN(value)) return
+
+    if (part.toLowerCase().includes('d')) day = value
+    else if (part.toLowerCase().includes('m')) month = value - 1
+    else if (part.toLowerCase().includes('y')) year = value
+  })
+
+  const date = new Date(year, month, day)
+  return isNaN(date.getTime()) ? null : date
+}
+
+export const toINDate = (date: Date): INDate => ({
+  day: date.getDate(),
+  month: date.getMonth(),
+  year: date.getFullYear(),
+})
+
+export const fromINDate = (inDate: INDate): Date => {
+  return new Date(inDate.year, inDate.month, inDate.day)
+}