@egov3/system-design 1.0.42 → 1.0.43

package/README.md

@@ -1,17 +1,188 @@
 # Egov3/System-Design
 
-## storybook
-yarn storybook
-
-### release 1.0.40
-1. Typography теперь поддерживает jsx style 
-2. Обновление версии storybook и зависимых библиотек
-3. Убрали плагин addon-mdx-gfm 
-4. Добавили utils функции 
-4.1. CreateArray создает массив с заданным количеством элементов
-4.2. SetCharAt добавляет символ в заданный промежуток в строке
-5. InputGroup story, группа из нескольких InputField
-6. InputField props interface расширили стандартным интерфейсом от Реакт
-
-### release 1.0.42
-1. Исплавлено название Components в латиницу
+![npm](https://img.shields.io/npm/v/@egov3/system-design) ![license](https://img.shields.io/npm/l/@egov3/system-design) ![downloads](https://img.shields.io/npm/dt/@egov3/system-design)
+
+## О проекте
+
+Egov3/System-Design — это библиотека UI-компонентов с поддержкой Storybook. Включает в себя готовые элементы интерфейса, утилиты для работы с датами и улучшенные стили.
+
+## Установка
+
+С Yarn:
+```sh
+yarn add @egov3/system-design
+```
+
+С npm:
+```sh
+npm install @egov3/system-design
+```
+
+## Использование
+
+```tsx
+import SystemDesign from '@egov3/system-design';
+
+function App() {
+  return (
+    <SystemDesign.Components.Typography
+      tag="span"
+      fontClass="Caption1Medium"
+      data-testid="DocCard_TITLE"
+      className={styles.title}
+    >
+      {title}
+    </SystemDesign.Components.Typography>
+  );
+}
+```
+
+## Запуск Storybook
+
+```sh
+yarn sb
+```
+
+---
+
+# Release Notes
+
+## 1.0.43
+
+### 🆕 Новые компоненты:
+- **Calendar**
+- **Modal**
+- **SelectBoxButton**
+
+### 🚀 Улучшения:
+- Добавлены `global.scss` и `normalize.scss`
+- Добавлен `colors.module.scss`
+- Добавлены утилиты `getDaysRange`, `getMonthRange`, `getYearRange`
+- Переименован `CombineClassNames` → `combineClassNames`
+
+### 🔧 Новые утилиты:
+
+#### `getDaysRange(day, month, year)`
+Возвращает массив из 5 дней, включая переданный день, два дня до и два после. **Примеры:**
+```js
+getDaysRange({ day: 15, month: 2, year: 2020 }); // [13, 14, 15, 16, 17]
+getDaysRange({ day: 2, month: 2, year: 2020 });  // [1, 2, 3, 4]
+getDaysRange({ day: 31, month: 2, year: 2020 }); // [29, 30, 31]
+```
+
+#### `getMonthRange(month, year)`
+Возвращает массив из 5 месяцев (2 до, текущий, 2 после). Индексация месяцев: `[0...11]`. **Примеры:**
+```js
+getMonthRange(5, 2020);  // [3, 4, 5, 6, 7]
+getMonthRange(0, 2020);  // [0, 1, 2]
+getMonthRange(11, 2020); // [9, 10, 11]
+```
+
+#### `getYearRange(year)`
+Возвращает массив из 5 лет (2 до, текущий, 2 после). Года [1970...2025]. **Примеры:**
+```js
+getYearRange(2020); // [2018, 2019, 2020, 2021, 2022]
+getYearRange(1970); // [1970, 1971, 1972]
+getYearRange(2025); // [2023, 2024, 2025]
+```
+
+#### `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)`
+Обратная функция `isValidDateRange`.
+
+#### `convertType`
+Функции для преобразования типов данных даты. **Примеры:**
+```js
+convertType.day.toString(2);  // "02"
+convertType.day.toNumber("02"); // 2
+convertType.month.toString(2);  // "03"
+convertType.month.toNumber("02"); // 1
+convertType.year.toString(2020);  // "2020"
+convertType.year.toNumber("2020"); // 2020
+convertType.date.toNumber({ day: "25", month: "02", year: "2019" }); // { "day": 25, "month": 1, "year": 2019 } 
+convertType.date.toString({ "day": 25, "month": 1, "year": 2019 }); // { "day": "25", "month": "02", "year": "2019" }
+convertType.dateRange.toString({ from: { "day": 25, "month": 1, "year": 2019 }, to: { "day": 25, "month": 1, "year": 2019 } }) // { "from": { "day": "25", "month": "02", "year": "2019" }, "to": { "day": "25", "month": "02", "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)`
+Форматирует дату **Примеры:**
+```js
+formatDate(new Date()) // "2025-03-01" 
+```
+
+#### `getDaysInMonth(month, year)`
+Возвращает количество дней в месяце **Примеры:**
+```js
+getDaysInMonth(1, 2020) // 29
+```
+
+#### `getMonthNameProper(month, year)`
+Возвращает название месяца по индексу[0..11] **Примеры:**
+```js
+getMonthNameProper(1) // "Февраль"
+```
+
+#### `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})`
+Проверяет дату меньше текущего дня **Примеры:**
+```js
+isValidateDate({ day: 25, month: 1, year: 2026}) // false
+isValidateDate({ day: 25, month: 1, year: 2024}) // екгу
+```
+
+#### `isInvalidateDate({ day, month, year})`
+Обратная функция от `isValidateDate`.
+
+#### `isValidateDate({ day, month, year})`
+Проверяет дату меньше текущего дня **Примеры:**
+```js
+normalizeDayAndMonth({ day: 30, month: 1, year: 2024}) // 29
+```
+
+#### `toPascalCase(word)`
+Делает строчным буквы кроме первой **Примеры:**
+```js
+toPascalCase("hello") // "Hello" 
+toPascalCase("HELLO") // "Hello" 
+```
+
+#### `GenerateArray(length, start)`
+Создает массив **Примеры:**
+```js
+GenerateArray(2, 5) // [5, 6] 
+GenerateArray(2) // [1, 2] 
+```
+
+### 1.0.42
+- Добавлены компоненты **Modal**, **SelectBoxButton**, **Calendar**
+
+### 1.0.41
+- Исправлено название `Components` в латиницу
+
+### 1.0.40
+- **Typography** теперь поддерживает `jsx`-стили
+- Обновлён Storybook и его зависимости
+- Удалён `addon-mdx-gfm`
+- Добавлены утилиты `CreateArray`, `SetCharAt`
+- Добавлен `InputGroup` (группа `InputField`)
+- Расширен `InputField` через стандартный интерфейс React
+
+---
+
+## 📬 Контакты
+
+Если у вас есть вопросы или предложения, создавайте [Issue](https://github.com/egov3/system-design/issues) в репозитории или пишите в командный чат проекта.
+

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/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/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/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/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

@@ -1,12 +1,20 @@
 /// <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;
-        CustomRadioButton: ({ label, name, checked, onChange, value, }: import("./components/RadioGroup").ICustomRadioButtonProps) => import("react").JSX.Element;
-        Accordion: ({ open, setOpen, children, title, }: import("./components/Accordion").IAccordionProps) => 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>;
     };
 };