@egov3/system-design 1.0.45 → 1.1.44

package/README.md

@@ -45,31 +45,24 @@ yarn sb
 
 ---
 
-## Release Notes
+# Release Notes
 
-### 1.0.45
-- добавлен пропс inline в компонент  **InputField**
-- переезд с rollup в tsup
-- переезд с scss в css
-- переезд с @egov3/icons в @egov3/graphics
-- обновление библиотек 
+## 1.0.43
 
-### 1.0.43
-
-#### 🆕 Новые компоненты:
-- **Calendar** - experimental
+### 🆕 Новые компоненты:
+- **Calendar**
 - **Modal**
 - **SelectBoxButton**
 
-#### 🚀 Улучшения:
+### 🚀 Улучшения:
 - Добавлены `global.scss` и `normalize.scss`
-- Добавлен `colors.css`
+- Добавлен `colors.module.scss`
 - Добавлены утилиты `getDaysRange`, `getMonthRange`, `getYearRange`
-- Переименован `CombineClassNames` → `joinClasses`
+- Переименован `CombineClassNames` → `combineClassNames`
 
-#### 🔧 Новые утилиты:
+### 🔧 Новые утилиты:
 
-##### `getDaysRange(day, month, year)`
+#### `getDaysRange(day, month, year)`
 Возвращает массив из 5 дней, включая переданный день, два дня до и два после. **Примеры:**
 ```js
 getDaysRange({ day: 15, month: 2, year: 2020 }); // [13, 14, 15, 16, 17]
@@ -77,7 +70,7 @@ getDaysRange({ day: 2, month: 2, year: 2020 });  // [1, 2, 3, 4]
 getDaysRange({ day: 31, month: 2, year: 2020 }); // [29, 30, 31]
 ```
 
-##### `getMonthRange(month, year)`
+#### `getMonthRange(month, year)`
 Возвращает массив из 5 месяцев (2 до, текущий, 2 после). Индексация месяцев: `[0...11]`. **Примеры:**
 ```js
 getMonthRange(5, 2020);  // [3, 4, 5, 6, 7]
@@ -85,7 +78,7 @@ getMonthRange(0, 2020);  // [0, 1, 2]
 getMonthRange(11, 2020); // [9, 10, 11]
 ```
 
-##### `getYearRange(year)`
+#### `getYearRange(year)`
 Возвращает массив из 5 лет (2 до, текущий, 2 после). Года [1970...2025]. **Примеры:**
 ```js
 getYearRange(2020); // [2018, 2019, 2020, 2021, 2022]
@@ -93,17 +86,17 @@ getYearRange(1970); // [1970, 1971, 1972]
 getYearRange(2025); // [2023, 2024, 2025]
 ```
 
-##### `isValidDateRange(from, to)`
+#### `isValidDateRange(from, to)`
 Проверяет, является ли диапазон дат корректным. **Примеры:**
 ```js
 isValidDateRange({ from: { day: 25, month: 2, year: 2020 }, to: { day: 25, month: 2, year: 2023 } }); // true
 isValidDateRange({ from: { day: 25, month: 6, year: 2023 }, to: { day: 25, month: 2, year: 2023 } }); // false
 ```
 
-##### `isInvalidDateRange(from, to)`
+#### `isInvalidDateRange(from, to)`
 Обратная функция `isValidDateRange`.
 
-##### `convertType`
+#### `convertType`
 Функции для преобразования типов данных даты. **Примеры:**
 ```js
 convertType.day.toString(2);  // "02"
@@ -118,55 +111,55 @@ convertType.dateRange.toString({ from: { "day": 25, "month": 1, "year": 2019 },
 convertType.dateRange.toNumber({ from: { day: "25", month: "02", year: "2019" }, to: { day: "25", month: "02", year: "2019" } }) // { "from": { "day": 25, "month": 1, "year": 2019 }, "to": { "day": 25, "month": 1, "year": 2019 }}
 ```
 
-##### `formatDate(date)`
+#### `formatDate(date)`
 Форматирует дату **Примеры:**
 ```js
 formatDate(new Date()) // "2025-03-01" 
 ```
 
-##### `getDaysInMonth(month, year)`
+#### `getDaysInMonth(month, year)`
 Возвращает количество дней в месяце **Примеры:**
 ```js
 getDaysInMonth(1, 2020) // 29
 ```
 
-##### `getMonthNameProper(month, year)`
+#### `getMonthNameProper(month, year)`
 Возвращает название месяца по индексу[0..11] **Примеры:**
 ```js
 getMonthNameProper(1) // "Февраль"
 ```
 
-##### `getValideMonthAndDay({ day, month, year })`
+#### `getValideMonthAndDay({ day, month, year })`
 Возвращает исправленную дату, которая не больше текущей даты **Примеры:**
 ```js
 getValideMonthAndDay({ day: 30, month: 1, year: 2020 }) // { "day": 29, "month": 1, "year": 2020 } 
 getValideMonthAndDay({ day: 30, month: 11, year: 2020 }) // { "day": 1, "month": 2, "year": 2025 } 
 ```
 
-##### `isValidateDate({ day, month, year})`
+#### `isValidateDate({ day, month, year})`
 Проверяет дату меньше текущего дня **Примеры:**
 ```js
 isValidateDate({ day: 25, month: 1, year: 2026}) // false
 isValidateDate({ day: 25, month: 1, year: 2024}) // екгу
 ```
 
-##### `isInvalidateDate({ day, month, year})`
+#### `isInvalidateDate({ day, month, year})`
 Обратная функция от `isValidateDate`.
 
-##### `isValidateDate({ day, month, year})`
+#### `isValidateDate({ day, month, year})`
 Проверяет дату меньше текущего дня **Примеры:**
 ```js
 normalizeDayAndMonth({ day: 30, month: 1, year: 2024}) // 29
 ```
 
-##### `toPascalCase(word)`
+#### `toPascalCase(word)`
 Делает строчным буквы кроме первой **Примеры:**
 ```js
 toPascalCase("hello") // "Hello" 
 toPascalCase("HELLO") // "Hello" 
 ```
 
-##### `GenerateArray(length, start)`
+#### `GenerateArray(length, start)`
 Создает массив **Примеры:**
 ```js
 GenerateArray(2, 5) // [5, 6] 

package/dist/cjs/components/Accordion/index.d.ts

@@ -0,0 +1,8 @@
+import React, { Dispatch } from "react";
+export interface IAccordionProps {
+    open: boolean;
+    setOpen: Dispatch<React.SetStateAction<boolean>>;
+    children: React.ReactNode;
+    title: React.JSX.Element;
+}
+export declare const Accordion: ({ open, setOpen, children, title, }: IAccordionProps) => React.JSX.Element;

package/dist/cjs/components/Button/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export interface IButtonProps {
+    ariaLabel?: string;
+    onClick?: () => void;
+    children: React.ReactNode;
+    className?: string;
+    isRounded?: boolean;
+    disabled?: boolean;
+    variant?: 'default' | 'tinted' | 'secondary';
+    size?: 'mini' | 'small' | 'medium' | 'large';
+    style?: React.CSSProperties;
+}
+export declare const Button: ({ onClick, children, style, className, isRounded, disabled, variant, size, ariaLabel, }: IButtonProps) => React.JSX.Element;

package/dist/cjs/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/cjs/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/cjs/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/cjs/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/cjs/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/cjs/components/InputField/index.d.ts

@@ -0,0 +1,22 @@
+import React, { HTMLInputTypeAttribute } from "react";
+export type TOtpType = "OTP" | "TEXT";
+export interface IInputFieldProps extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
+    onFocus?: () => void;
+    onBlur?: () => void;
+    onEnterPress?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    value?: string;
+    placeholder?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    isClearable?: boolean;
+    inputLeftIcon?: JSX.Element;
+    type?: HTMLInputTypeAttribute;
+    id: string;
+    labelText?: string;
+    ariaLabel: string;
+    focused?: boolean;
+    setFocused?: (val: boolean) => void;
+    readOnly?: boolean;
+}
+export declare const InputField: React.ForwardRefExoticComponent<Omit<IInputFieldProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/dist/cjs/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/cjs/components/RadioGroup/index.d.ts

@@ -0,0 +1,20 @@
+import React from "react";
+export interface RadioGroupItem {
+    label: string;
+    value: string;
+}
+export interface ICustomRadioButtonProps {
+    label: string;
+    name: string;
+    checked: boolean;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    value: string;
+}
+export interface IRadioGroupProps {
+    RadioGroupItems: RadioGroupItem[];
+    invokeCustomOnChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    setSelectedOption: React.Dispatch<React.SetStateAction<string>>;
+    selectedOption: string;
+}
+export declare const CustomRadioButton: ({ label, name, checked, onChange, value, }: ICustomRadioButtonProps) => React.JSX.Element;
+export declare const RadioGroup: ({ RadioGroupItems, invokeCustomOnChange, setSelectedOption, selectedOption, }: IRadioGroupProps) => React.JSX.Element;

package/dist/cjs/components/RadioToggle/index.d.ts

@@ -0,0 +1,6 @@
+import React, { Dispatch, SetStateAction } from "react";
+export interface IRadioToggleProps {
+    lock: boolean;
+    setLock: Dispatch<SetStateAction<boolean>>;
+}
+export declare const RadioToggle: ({ lock, setLock }: IRadioToggleProps) => React.JSX.Element;

package/dist/cjs/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/cjs/components/Typography/index.d.ts

@@ -0,0 +1,8 @@
+import React, { FC } from "react";
+type TFontClass = "Heading1" | "Heading3" | "Subtitles3" | "Body1Medium" | "Body1Regular" | "Body2Medium" | "Body2Regular" | "Body3Regular" | "Caption1Medium" | "Caption1Regular" | "Caption1Semibold" | "Caption2Medium" | "Caption2Regular";
+export interface ITypographyProps extends React.HTMLAttributes<HTMLElement> {
+    tag: keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>;
+    fontClass: TFontClass;
+}
+export declare const Typography: FC<ITypographyProps>;
+export {};

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

@@ -0,0 +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;
+    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/cjs/constants/calendar/index.d.ts

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

package/dist/cjs/index.d.ts

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