@egov3/system-design 1.0.42 → 1.0.44

package/dist/cjs/interfaces/Calendar.d.ts

@@ -0,0 +1,24 @@
+export interface ISelectedPeriod {
+    fromDate?: string;
+    toDate?: string;
+    periodSelected: boolean;
+}
+export interface IStrictSelectedPeriod extends Omit<ISelectedPeriod, "fromDate" | "toDate"> {
+    fromDate: string;
+    toDate: string;
+}
+export interface IDateItem<T = number> {
+    day: T;
+    month: T;
+    year: T;
+}
+export interface IPeriodKeys {
+    from: "from";
+    to: "to";
+}
+export type TPeriodKeys = keyof IPeriodKeys;
+export interface ICalendarPeriod<T = number> {
+    from: IDateItem<T>;
+    to: IDateItem<T>;
+}
+export type TTimeUnit = keyof IDateItem;

package/dist/cjs/stories/Calendar.stories.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { Meta } from "@storybook/react";
+import { Components } from "~components";
+declare const meta: Meta<typeof Components.Calendar>;
+export default meta;
+export declare const CalendarStory: () => React.JSX.Element;

package/dist/cjs/stories/Modal.stories.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+declare const meta: {
+    title: string;
+    component: ({ open, setOpen, children, headerTitle, variant, }: import("../components/Modal").IModalProps) => React.JSX.Element | null;
+};
+export default meta;
+export declare const SmallVariant: () => React.JSX.Element;
+export declare const LargeVariant: () => React.JSX.Element;

package/dist/cjs/utils/GenerateArray.d.ts

@@ -0,0 +1 @@
+export declare const GenerateArray: (length: number, start?: number) => number[];

package/dist/cjs/utils/date/convertType.d.ts

@@ -0,0 +1,53 @@
+import { ICalendarPeriod, IDateItem } from "~interfaces/Calendar";
+export declare const convertType: {
+    day: {
+        toString: (num: number) => string;
+        toNumber: (str: string) => number;
+    };
+    month: {
+        toString: (num: number) => string;
+        toNumber: (str: string) => number;
+    };
+    year: {
+        toString: (num: number) => string;
+        toNumber: (str: string) => number;
+    };
+    date: {
+        toString: ({ day, month, year }: IDateItem<number>) => {
+            day: string;
+            month: string;
+            year: string;
+        };
+        toNumber: ({ day, month, year }: IDateItem<string>) => {
+            day: number;
+            month: number;
+            year: number;
+        };
+    };
+    dateRange: {
+        toString: ({ from: { day: fromday, month: fromMonth, year: fromYear }, to: { day: toDay, month: toMonth, year: toYear }, }: ICalendarPeriod<number>) => {
+            from: {
+                day: string;
+                month: string;
+                year: string;
+            };
+            to: {
+                day: string;
+                month: string;
+                year: string;
+            };
+        };
+        toNumber: ({ from: { day: fromday, month: fromMonth, year: fromYear }, to: { day: toDay, month: toMonth, year: toYear }, }: ICalendarPeriod<string>) => {
+            from: {
+                day: number;
+                month: number;
+                year: number;
+            };
+            to: {
+                day: number;
+                month: number;
+                year: number;
+            };
+        };
+    };
+};

package/dist/cjs/utils/date/formatDate.d.ts

@@ -0,0 +1 @@
+export declare const formatDate: (date: Date) => string;

package/dist/cjs/utils/date/getDaysInMonth.d.ts

@@ -0,0 +1 @@
+export declare const getDaysInMonth: (month: number, year: number) => number;

package/dist/cjs/utils/date/getMonthNameProper.d.ts

@@ -0,0 +1 @@
+export declare const getMonthNameProper: (month: number) => string;

package/dist/cjs/utils/date/getValideMonth.d.ts

@@ -0,0 +1,6 @@
+import { IDateItem } from "~interfaces/Calendar";
+export declare const getValideMonthAndDay: ({ day, month, year }: IDateItem) => {
+    day: number;
+    month: number;
+    year: number;
+};

package/dist/cjs/utils/date/index.d.ts

@@ -0,0 +1,6 @@
+export declare const minYear: number;
+export declare const minMonth = 0;
+export declare const maxMonth = 11;
+export declare const currentYear: number;
+export declare const currentMonth: number;
+export declare const currentDay: number;

package/dist/cjs/utils/date/inverseDate.d.ts

@@ -0,0 +1 @@
+export declare const inverseDate: (dateStr: string) => string;

package/dist/cjs/utils/date/isValidateDate.d.ts

@@ -0,0 +1,3 @@
+import { IDateItem } from "~interfaces/Calendar";
+export declare const isValidateDate: (date: IDateItem) => boolean;
+export declare const isInvalidateDate: (props: IDateItem) => boolean;

package/dist/cjs/utils/date/normalizeDayAndMonth.d.ts

@@ -0,0 +1,2 @@
+import { IDateItem } from "~interfaces/Calendar";
+export declare const normalizeDayAndMonth: ({ day, month, year }: IDateItem) => number;

package/dist/cjs/utils/date/range/getDaysRange.d.ts

@@ -0,0 +1,2 @@
+import { IDateItem } from "~interfaces/Calendar";
+export declare const getDaysRange: ({ day, month, year }: IDateItem<number>) => number[];

package/dist/cjs/utils/date/range/getMonthRange.d.ts

@@ -0,0 +1 @@
+export declare const getMonthRange: (month: number, year: number) => number[];

package/dist/cjs/utils/date/range/getYearRange.d.ts

@@ -0,0 +1 @@
+export declare const getYearRange: (year: number) => string[];

package/dist/cjs/utils/date/range/isValidDateRange.d.ts

@@ -0,0 +1,3 @@
+import { ICalendarPeriod } from "~interfaces/Calendar";
+export declare const isValidDateRange: ({ from, to }: ICalendarPeriod) => boolean;
+export declare const isInvalidDateRange: (props: ICalendarPeriod) => boolean;

package/dist/cjs/utils/joinClasses.d.ts

@@ -0,0 +1 @@
+export declare const joinClasses: (...args: unknown[]) => string;

package/dist/cjs/utils/string/toPascalCase.d.ts

@@ -0,0 +1 @@
+export declare const toPascalCase: (str: string) => string;

package/dist/esm/components/Calendar/Body/index.d.ts

@@ -0,0 +1,12 @@
+import React, { Dispatch, SetStateAction } from "react";
+import { ICalendarPeriod, IDateItem, TPeriodKeys, TTimeUnit } from "~interfaces/Calendar";
+export interface IBodyProps {
+    changeDate: IDateItem<(direction: number) => void>;
+    handleMouseDown: (e: React.MouseEvent, type: TTimeUnit) => void;
+    handleMouseUp: () => void;
+    selectedCalenderDate: ICalendarPeriod<string>;
+    selectedPeriodInterval: TPeriodKeys;
+    setDistanceTraveled: Dispatch<SetStateAction<number>>;
+    setInitialY: Dispatch<SetStateAction<number>>;
+}
+export declare const Body: ({ changeDate, handleMouseDown, handleMouseUp, selectedCalenderDate, selectedPeriodInterval, setDistanceTraveled, setInitialY, }: IBodyProps) => React.JSX.Element;

package/dist/esm/components/Calendar/Footer/index.d.ts

@@ -0,0 +1,9 @@
+import React, { Dispatch, SetStateAction } from "react";
+import { ICalendarPeriod, IStrictSelectedPeriod } from "~interfaces/Calendar";
+export interface IFooterProps {
+    selectedCalenderDate: ICalendarPeriod<string>;
+    setSelectedPeriod: Dispatch<SetStateAction<IStrictSelectedPeriod>>;
+    setIsModalOpen: Dispatch<SetStateAction<boolean>>;
+    setSelectedRadioOption: Dispatch<SetStateAction<string>>;
+}
+export declare const Footer: ({ selectedCalenderDate, setSelectedPeriod, setIsModalOpen, setSelectedRadioOption, }: IFooterProps) => React.JSX.Element;

package/dist/esm/components/Calendar/Header/index.d.ts

@@ -0,0 +1,8 @@
+import React, { Dispatch, SetStateAction } from "react";
+import { ICalendarPeriod, TPeriodKeys } from "~interfaces/Calendar";
+export interface IHeaderProps {
+    setSelectedPeriodInterval: Dispatch<SetStateAction<TPeriodKeys>>;
+    selectedPeriodInterval: TPeriodKeys;
+    selectedCalenderDate: ICalendarPeriod<string>;
+}
+export declare const Header: ({ setSelectedPeriodInterval, selectedPeriodInterval, selectedCalenderDate, }: IHeaderProps) => React.JSX.Element;

package/dist/esm/components/Calendar/Main/index.d.ts

@@ -0,0 +1,9 @@
+import React, { Dispatch, SetStateAction } from "react";
+import { IStrictSelectedPeriod } from "~interfaces/Calendar";
+export interface IMainProps {
+    setSelectedPeriod: Dispatch<SetStateAction<IStrictSelectedPeriod>>;
+    selectedPeriod: IStrictSelectedPeriod;
+    setIsModalOpen: Dispatch<SetStateAction<boolean>>;
+    setSelectedRadioOption: Dispatch<SetStateAction<string>>;
+}
+export declare const Main: ({ setSelectedPeriod, selectedPeriod, setIsModalOpen, setSelectedRadioOption, }: IMainProps) => React.JSX.Element;

package/dist/esm/components/Calendar/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare const Calendar: {
+    Body: ({ changeDate, handleMouseDown, handleMouseUp, selectedCalenderDate, selectedPeriodInterval, setDistanceTraveled, setInitialY, }: import("./Body").IBodyProps) => import("react").JSX.Element;
+    Footer: ({ selectedCalenderDate, setSelectedPeriod, setIsModalOpen, setSelectedRadioOption, }: import("./Footer").IFooterProps) => import("react").JSX.Element;
+    Main: ({ setSelectedPeriod, selectedPeriod, setIsModalOpen, setSelectedRadioOption, }: import("./Main").IMainProps) => import("react").JSX.Element;
+    Header: ({ setSelectedPeriodInterval, selectedPeriodInterval, selectedCalenderDate, }: import("./Header").IHeaderProps) => import("react").JSX.Element;
+};
+export { Calendar };

package/dist/esm/components/Modal/index.d.ts

@@ -0,0 +1,9 @@
+import React, { Dispatch } from "react";
+export interface IModalProps {
+    open: boolean;
+    children: JSX.Element;
+    setOpen: Dispatch<React.SetStateAction<boolean>>;
+    headerTitle?: string;
+    variant: "large" | "small";
+}
+export declare const Modal: ({ open, setOpen, children, headerTitle, variant, }: IModalProps) => React.JSX.Element | null;

package/dist/esm/components/SelectBoxButton/index.d.ts

@@ -0,0 +1,9 @@
+import React, { Dispatch } from "react";
+export interface ISelectBoxProps {
+    labelText?: string;
+    setIsOpen: Dispatch<React.SetStateAction<boolean>>;
+    disabled: boolean;
+    error?: boolean;
+    modalValue?: string;
+}
+export declare const SelectBoxButton: ({ setIsOpen, labelText, disabled, error, modalValue, }: ISelectBoxProps) => JSX.Element;

package/dist/esm/components/index.d.ts

@@ -1,12 +1,20 @@
 /// <reference types="react" />
 import { Button } from "./Button";
 export declare const Components: {
+    Accordion: ({ open, setOpen, children, title, }: import("./Accordion").IAccordionProps) => import("react").JSX.Element;
     Button: ({ onClick, children, style, className, isRounded, disabled, variant, size, ariaLabel, }: import("./Button").IButtonProps) => import("react").JSX.Element;
+    Calendar: {
+        Body: ({ changeDate, handleMouseDown, handleMouseUp, selectedCalenderDate, selectedPeriodInterval, setDistanceTraveled, setInitialY, }: import("./Calendar/Body").IBodyProps) => import("react").JSX.Element;
+        Footer: ({ selectedCalenderDate, setSelectedPeriod, setIsModalOpen, setSelectedRadioOption, }: import("./Calendar/Footer").IFooterProps) => import("react").JSX.Element;
+        Main: ({ setSelectedPeriod, selectedPeriod, setIsModalOpen, setSelectedRadioOption, }: import("./Calendar/Main").IMainProps) => import("react").JSX.Element;
+        Header: ({ setSelectedPeriodInterval, selectedPeriodInterval, selectedCalenderDate, }: import("./Calendar/Header").IHeaderProps) => import("react").JSX.Element;
+    };
+    CustomRadioButton: ({ label, name, checked, onChange, value, }: import("./RadioGroup").ICustomRadioButtonProps) => import("react").JSX.Element;
     InputField: import("react").ForwardRefExoticComponent<Omit<import("./InputField").IInputFieldProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+    Modal: ({ open, setOpen, children, headerTitle, variant, }: import("./Modal").IModalProps) => import("react").JSX.Element | null;
     RadioGroup: ({ RadioGroupItems, invokeCustomOnChange, setSelectedOption, selectedOption, }: import("./RadioGroup").IRadioGroupProps) => import("react").JSX.Element;
-    CustomRadioButton: ({ label, name, checked, onChange, value, }: import("./RadioGroup").ICustomRadioButtonProps) => import("react").JSX.Element;
-    Accordion: ({ open, setOpen, children, title, }: import("./Accordion").IAccordionProps) => import("react").JSX.Element;
     RadioToggle: ({ lock, setLock }: import("./RadioToggle").IRadioToggleProps) => import("react").JSX.Element;
+    SelectBoxButton: ({ setIsOpen, labelText, disabled, error, modalValue, }: import("./SelectBoxButton").ISelectBoxProps) => JSX.Element;
     Typography: import("react").FC<import("./Typography").ITypographyProps>;
 };
 export { Button };

package/dist/esm/constants/calendar/index.d.ts

@@ -0,0 +1,2 @@
+import { IPeriodKeys } from "~interfaces/Calendar";
+export declare const PERIOD_KEYS: IPeriodKeys;

package/dist/esm/index.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import * as React from 'react';
 import React__default, { Dispatch, SetStateAction, HTMLInputTypeAttribute } from 'react';
+import { TPeriodKeys, ICalendarPeriod, IStrictSelectedPeriod, IDateItem, TTimeUnit } from '~interfaces/Calendar';
 
 type TFontClass = "Heading1" | "Heading3" | "Subtitles3" | "Body1Medium" | "Body1Regular" | "Body2Medium" | "Body2Regular" | "Body3Regular" | "Caption1Medium" | "Caption1Regular" | "Caption1Semibold" | "Caption2Medium" | "Caption2Regular";
 interface ITypographyProps extends React__default.HTMLAttributes<HTMLElement> {
@@ -8,34 +9,25 @@ interface ITypographyProps extends React__default.HTMLAttributes<HTMLElement> {
     fontClass: TFontClass;
 }
 
+interface ISelectBoxProps {
+    labelText?: string;
+    setIsOpen: Dispatch<React__default.SetStateAction<boolean>>;
+    disabled: boolean;
+    error?: boolean;
+    modalValue?: string;
+}
+
 interface IRadioToggleProps {
     lock: boolean;
     setLock: Dispatch<SetStateAction<boolean>>;
 }
 
-interface IAccordionProps {
+interface IModalProps {
     open: boolean;
+    children: JSX.Element;
     setOpen: Dispatch<React__default.SetStateAction<boolean>>;
-    children: React__default.ReactNode;
-    title: React__default.JSX.Element;
-}
-
-interface RadioGroupItem {
-    label: string;
-    value: string;
-}
-interface ICustomRadioButtonProps {
-    label: string;
-    name: string;
-    checked: boolean;
-    onChange: (event: React__default.ChangeEvent<HTMLInputElement>) => void;
-    value: string;
-}
-interface IRadioGroupProps {
-    RadioGroupItems: RadioGroupItem[];
-    invokeCustomOnChange: (event: React__default.ChangeEvent<HTMLInputElement>) => void;
-    setSelectedOption: React__default.Dispatch<React__default.SetStateAction<string>>;
-    selectedOption: string;
+    headerTitle?: string;
+    variant: "large" | "small";
 }
 
 interface IInputFieldProps extends React__default.DetailedHTMLProps<React__default.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
@@ -58,6 +50,54 @@ interface IInputFieldProps extends React__default.DetailedHTMLProps<React__defau
     readOnly?: boolean;
 }
 
+interface RadioGroupItem {
+    label: string;
+    value: string;
+}
+interface ICustomRadioButtonProps {
+    label: string;
+    name: string;
+    checked: boolean;
+    onChange: (event: React__default.ChangeEvent<HTMLInputElement>) => void;
+    value: string;
+}
+interface IRadioGroupProps {
+    RadioGroupItems: RadioGroupItem[];
+    invokeCustomOnChange: (event: React__default.ChangeEvent<HTMLInputElement>) => void;
+    setSelectedOption: React__default.Dispatch<React__default.SetStateAction<string>>;
+    selectedOption: string;
+}
+
+interface IHeaderProps {
+    setSelectedPeriodInterval: Dispatch<SetStateAction<TPeriodKeys>>;
+    selectedPeriodInterval: TPeriodKeys;
+    selectedCalenderDate: ICalendarPeriod<string>;
+}
+
+interface IMainProps {
+    setSelectedPeriod: Dispatch<SetStateAction<IStrictSelectedPeriod>>;
+    selectedPeriod: IStrictSelectedPeriod;
+    setIsModalOpen: Dispatch<SetStateAction<boolean>>;
+    setSelectedRadioOption: Dispatch<SetStateAction<string>>;
+}
+
+interface IFooterProps {
+    selectedCalenderDate: ICalendarPeriod<string>;
+    setSelectedPeriod: Dispatch<SetStateAction<IStrictSelectedPeriod>>;
+    setIsModalOpen: Dispatch<SetStateAction<boolean>>;
+    setSelectedRadioOption: Dispatch<SetStateAction<string>>;
+}
+
+interface IBodyProps {
+    changeDate: IDateItem<(direction: number) => void>;
+    handleMouseDown: (e: React__default.MouseEvent, type: TTimeUnit) => void;
+    handleMouseUp: () => void;
+    selectedCalenderDate: ICalendarPeriod<string>;
+    selectedPeriodInterval: TPeriodKeys;
+    setDistanceTraveled: Dispatch<SetStateAction<number>>;
+    setInitialY: Dispatch<SetStateAction<number>>;
+}
+
 interface IButtonProps {
     ariaLabel?: string;
     onClick?: () => void;
@@ -70,14 +110,29 @@ interface IButtonProps {
     style?: React__default.CSSProperties;
 }
 
+interface IAccordionProps {
+    open: boolean;
+    setOpen: Dispatch<React__default.SetStateAction<boolean>>;
+    children: React__default.ReactNode;
+    title: React__default.JSX.Element;
+}
+
 declare const SystemDesign: {
     Components: {
+        Accordion: ({ open, setOpen, children, title, }: IAccordionProps) => React.JSX.Element;
         Button: ({ onClick, children, style, className, isRounded, disabled, variant, size, ariaLabel, }: IButtonProps) => React.JSX.Element;
+        Calendar: {
+            Body: ({ changeDate, handleMouseDown, handleMouseUp, selectedCalenderDate, selectedPeriodInterval, setDistanceTraveled, setInitialY, }: IBodyProps) => React.JSX.Element;
+            Footer: ({ selectedCalenderDate, setSelectedPeriod, setIsModalOpen, setSelectedRadioOption, }: IFooterProps) => React.JSX.Element;
+            Main: ({ setSelectedPeriod, selectedPeriod, setIsModalOpen, setSelectedRadioOption, }: IMainProps) => React.JSX.Element;
+            Header: ({ setSelectedPeriodInterval, selectedPeriodInterval, selectedCalenderDate, }: IHeaderProps) => React.JSX.Element;
+        };
+        CustomRadioButton: ({ label, name, checked, onChange, value, }: ICustomRadioButtonProps) => React.JSX.Element;
         InputField: React.ForwardRefExoticComponent<Omit<IInputFieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+        Modal: ({ open, setOpen, children, headerTitle, variant, }: IModalProps) => React.JSX.Element | null;
         RadioGroup: ({ RadioGroupItems, invokeCustomOnChange, setSelectedOption, selectedOption, }: IRadioGroupProps) => React.JSX.Element;
-        CustomRadioButton: ({ label, name, checked, onChange, value, }: ICustomRadioButtonProps) => React.JSX.Element;
-        Accordion: ({ open, setOpen, children, title, }: IAccordionProps) => React.JSX.Element;
         RadioToggle: ({ lock, setLock }: IRadioToggleProps) => React.JSX.Element;
+        SelectBoxButton: ({ setIsOpen, labelText, disabled, error, modalValue, }: ISelectBoxProps) => JSX.Element;
         Typography: React.FC<ITypographyProps>;
     };
 };