├── .editorconfig ├── .env ├── .eslintrc.js ├── .gitignore ├── .prettierignore ├── .prettierrc.json ├── README.md ├── babel.config.js ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── images │ ├── canvasOriginal.jpg │ ├── marker.png │ └── readme.jpg ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── server.ts ├── src ├── assets │ └── fonts │ │ └── roboto │ │ ├── Roboto-Bold.ttf │ │ ├── Roboto-Light.ttf │ │ ├── Roboto-Medium.ttf │ │ └── Roboto-Regular.ttf ├── components │ ├── App │ │ ├── App.scss │ │ ├── App.tsx │ │ └── index.ts │ ├── CodeCard │ │ ├── ChildrenComponent.tsx │ │ ├── CodeCard.scss │ │ ├── CodeCard.tsx │ │ └── index.ts │ ├── Hr │ │ ├── Hr.scss │ │ ├── Hr.tsx │ │ └── index.ts │ ├── Layout │ │ ├── Layout.scss │ │ ├── Layout.tsx │ │ ├── MenuPanel │ │ │ ├── MenuPanel.scss │ │ │ ├── MenuPanel.tsx │ │ │ └── index.ts │ │ └── index.ts │ ├── Title │ │ ├── Title.scss │ │ ├── Title.tsx │ │ └── index.ts │ ├── index.ts │ ├── modal │ │ ├── ModalDelete │ │ │ ├── ModalDelete.scss │ │ │ ├── ModalDelete.tsx │ │ │ ├── index.ts │ │ │ └── types.ts │ │ └── index.ts │ ├── route │ │ ├── PrivateRoutes │ │ │ ├── PrivateRoutes.tsx │ │ │ └── index.ts │ │ └── index.ts │ ├── search │ │ ├── index.ts │ │ └── types.ts │ ├── table │ │ ├── TableHeader │ │ │ ├── TableHeader.scss │ │ │ ├── TableHeader.tsx │ │ │ └── index.ts │ │ └── index.ts │ └── theme │ │ ├── ThemeSwitcher.scss │ │ ├── ThemeSwitcher │ │ ├── ThemeSwitcher.tsx │ │ └── index.ts │ │ ├── ThemeSwitcherCustom │ │ ├── ThemeSwitcherCustom.tsx │ │ └── index.ts │ │ ├── constants.ts │ │ └── index.ts ├── constants │ ├── index.ts │ └── socket.ts ├── enums │ ├── index.ts │ └── routes.ts ├── hooks │ ├── index.ts │ └── useSocket.ts ├── index.tsx ├── pages │ ├── AccordionPage │ │ ├── AccordionPage.tsx │ │ └── index.ts │ ├── AutocompletePage │ │ ├── AutocompletePage.scss │ │ ├── AutocompletePage.tsx │ │ ├── hooks │ │ │ ├── index.ts │ │ │ └── usePosts.ts │ │ └── index.ts │ ├── AvatarPage │ │ ├── AvatarPage.tsx │ │ ├── avatar.jpg │ │ └── index.ts │ ├── BreadcrumbsPage │ │ ├── BreadcrumbsDetailPage │ │ │ ├── BreadcrumbsDetailPage.tsx │ │ │ └── index.ts │ │ ├── BreadcrumbsPage.tsx │ │ └── index.ts │ ├── ButtonPage │ │ ├── ButtonPage.tsx │ │ └── index.ts │ ├── CanvasImageResizePage │ │ ├── CanvasImageResizePage.tsx │ │ └── index.ts │ ├── CheckboxPage │ │ ├── CheckboxPage.tsx │ │ └── index.ts │ ├── CopyPage │ │ ├── CopyPage.scss │ │ ├── CopyPage.tsx │ │ └── index.ts │ ├── DatePickerPage │ │ ├── DatePickerPage.tsx │ │ └── index.ts │ ├── DocumentViewerPage │ │ ├── DocumentViewerPage.scss │ │ ├── DocumentViewerPage.tsx │ │ ├── document.html │ │ ├── document.xls │ │ ├── index.ts │ │ └── template.ts │ ├── DropDownPage │ │ ├── DropDownPage.scss │ │ ├── DropDownPage.tsx │ │ └── index.ts │ ├── FieldPage │ │ ├── FieldPage.scss │ │ ├── FieldPage.tsx │ │ └── index.ts │ ├── FormPage │ │ ├── FormPage.scss │ │ ├── FormPage.tsx │ │ ├── enums.ts │ │ ├── index.ts │ │ └── schemas.ts │ ├── HamburgerPage │ │ ├── HamburgerPage.tsx │ │ └── index.ts │ ├── IconPage │ │ ├── IconPage.tsx │ │ └── index.ts │ ├── MapPage │ │ ├── MapPage.scss │ │ ├── MapPage.tsx │ │ └── index.ts │ ├── ModalPage │ │ ├── ModalPage.tsx │ │ └── index.ts │ ├── OverlayPage │ │ ├── OverlayPage.tsx │ │ └── index.ts │ ├── PopoverPage │ │ ├── PopoverPage.scss │ │ ├── PopoverPage.tsx │ │ └── index.ts │ ├── PortalPage │ │ ├── PortalPage.scss │ │ ├── PortalPage.tsx │ │ └── index.ts │ ├── PrivateRoutePage │ │ ├── PrivateRoutePage.tsx │ │ └── index.ts │ ├── RadioButtonPage │ │ ├── RadioButtonPage.scss │ │ ├── RadioButtonPage.tsx │ │ ├── enum.ts │ │ └── index.ts │ ├── RangeSliderPage │ │ ├── RangeSliderPage.scss │ │ ├── RangeSliderPage.tsx │ │ └── index.ts │ ├── RatingPage │ │ ├── RatingPage.tsx │ │ └── index.ts │ ├── ScrollbarPage │ │ ├── ScrollbarPage.scss │ │ ├── ScrollbarPage.tsx │ │ └── index.ts │ ├── SelectPage │ │ ├── SelectPage.scss │ │ ├── SelectPage.tsx │ │ ├── hooks │ │ │ ├── index.ts │ │ │ └── useSelect.ts │ │ └── index.ts │ ├── SidebarPage │ │ ├── SidebarPage.scss │ │ ├── SidebarPage.tsx │ │ └── index.ts │ ├── SkeletonPage │ │ ├── SkeletonPage.tsx │ │ └── index.ts │ ├── SliderPage │ │ ├── SliderPage.tsx │ │ ├── data.ts │ │ └── index.ts │ ├── SpinnerPage │ │ ├── SpinnerPage.scss │ │ ├── SpinnerPage.tsx │ │ └── index.ts │ ├── SwitcherPage │ │ ├── SwitcherPage.tsx │ │ └── index.ts │ ├── TablePage │ │ ├── PostsTable │ │ │ ├── PostsTable.tsx │ │ │ ├── enums.ts │ │ │ ├── hooks │ │ │ │ ├── index.ts │ │ │ │ └── useGetColumns.tsx │ │ │ └── index.ts │ │ ├── TablePage.tsx │ │ └── index.ts │ ├── TabsPage │ │ ├── TabsPage.scss │ │ ├── TabsPage.tsx │ │ └── index.ts │ ├── TextEditorPage │ │ ├── TextEditorPage.tsx │ │ └── index.ts │ ├── TooltipPage │ │ ├── TooltipPage.scss │ │ ├── TooltipPage.tsx │ │ └── index.ts │ ├── TypographyPage │ │ ├── TypographyPage.tsx │ │ └── index.ts │ ├── WordWrapPage │ │ ├── WordWrapPage.scss │ │ ├── WordWrapPage.tsx │ │ └── index.ts │ └── index.ts ├── react-app-env.d.ts ├── services │ ├── api │ │ ├── posts │ │ │ ├── index.ts │ │ │ ├── schemas.ts │ │ │ ├── types.ts │ │ │ └── utils │ │ │ │ ├── getPostsApi.ts │ │ │ │ └── index.ts │ │ └── sorting │ │ │ ├── index.ts │ │ │ └── mapTableSortingToDto.ts │ ├── context │ │ ├── index.ts │ │ ├── socketContext.ts │ │ └── themeContext.ts │ ├── form │ │ ├── Form │ │ │ ├── enums.ts │ │ │ └── index.ts │ │ ├── FormErrors │ │ │ ├── FormErrors.tsx │ │ │ └── index.ts │ │ ├── Input │ │ │ ├── Input.tsx │ │ │ └── index.ts │ │ ├── InputMask │ │ │ ├── InputMask.tsx │ │ │ ├── index.ts │ │ │ └── react-input-mask.d.ts │ │ ├── PhoneInputMask │ │ │ ├── PhoneInputMask.tsx │ │ │ ├── constants.ts │ │ │ └── index.ts │ │ ├── Textarea │ │ │ ├── Textarea.tsx │ │ │ └── index.ts │ │ └── index.ts │ └── validation │ │ ├── constants.ts │ │ └── index.ts ├── setupTests.js ├── styles │ ├── colors.scss │ ├── constants.scss │ ├── fonts.css │ ├── index.scss │ ├── scroll.scss │ ├── shadows.scss │ └── text.scss ├── uikit │ ├── assets │ │ └── icons │ │ │ ├── ArrowDownIcon │ │ │ ├── ArrowDownIcon.tsx │ │ │ └── index.ts │ │ │ ├── ArrowLeftIcon │ │ │ ├── ArrowLeftIcon.tsx │ │ │ └── index.ts │ │ │ ├── ArrowRightIcon │ │ │ ├── ArrowRightIcon.tsx │ │ │ └── index.ts │ │ │ ├── AttractionsIcon │ │ │ ├── AttractionsIcon.tsx │ │ │ └── index.ts │ │ │ ├── BoldIcon │ │ │ ├── BoldIcon.tsx │ │ │ └── index.ts │ │ │ ├── CalendarIcon │ │ │ ├── CalendarIcon.tsx │ │ │ └── index.ts │ │ │ ├── CenterIcon │ │ │ ├── CenterIcon.tsx │ │ │ └── index.ts │ │ │ ├── CheckboxIcon │ │ │ ├── CheckboxIcon.tsx │ │ │ └── index.ts │ │ │ ├── CityIcon │ │ │ ├── CityIcon.tsx │ │ │ └── index.ts │ │ │ ├── CloseIcon │ │ │ ├── CloseIcon.tsx │ │ │ └── index.ts │ │ │ ├── CopyIcon │ │ │ ├── CopyIcon.tsx │ │ │ └── index.ts │ │ │ ├── CottageIcon │ │ │ ├── CottageIcon.tsx │ │ │ └── index.ts │ │ │ ├── DarkModeIcon │ │ │ ├── DarkModeIcon.tsx │ │ │ └── index.ts │ │ │ ├── EditIcon │ │ │ ├── EditIcon.tsx │ │ │ └── index.ts │ │ │ ├── GlobeLocationPinIcon │ │ │ ├── GlobeLocationPinIcon.tsx │ │ │ └── index.ts │ │ │ ├── H2Icon │ │ │ ├── H2Icon.tsx │ │ │ └── index.ts │ │ │ ├── HighlightIcon │ │ │ ├── HighlightIcon.tsx │ │ │ └── index.ts │ │ │ ├── HomeIcon │ │ │ ├── HomeIcon.tsx │ │ │ └── index.ts │ │ │ ├── IndeterminateQuestionBoxIcon │ │ │ ├── IndeterminateQuestionBoxIcon.tsx │ │ │ └── index.ts │ │ │ ├── LandscapeIcon │ │ │ ├── LandscapeIcon.tsx │ │ │ └── index.ts │ │ │ ├── LightModeIcon │ │ │ ├── LightModeIcon.tsx │ │ │ └── index.ts │ │ │ ├── LocationIcon │ │ │ ├── LocationIcon.tsx │ │ │ └── index.ts │ │ │ ├── MinusIcon │ │ │ ├── MinusIcon.tsx │ │ │ └── index.ts │ │ │ ├── OLIcon │ │ │ ├── OLIcon.tsx │ │ │ └── index.ts │ │ │ ├── PlusIcon │ │ │ ├── PlusIcon.tsx │ │ │ └── index.ts │ │ │ ├── RiverIcon │ │ │ ├── RiverIcon.tsx │ │ │ └── index.ts │ │ │ ├── SearchIcon │ │ │ ├── SearchIcon.tsx │ │ │ └── index.ts │ │ │ ├── SettingsIcon │ │ │ ├── SettingsIcon.tsx │ │ │ └── index.ts │ │ │ ├── SignpostIcon │ │ │ ├── SignpostIcon.tsx │ │ │ └── index.ts │ │ │ ├── SortDownIcon │ │ │ ├── SortDownIcon.tsx │ │ │ └── index.ts │ │ │ ├── SortUpIcon │ │ │ ├── SortUpIcon.tsx │ │ │ └── index.ts │ │ │ ├── SortingIcon │ │ │ ├── SortingIcon.tsx │ │ │ └── index.ts │ │ │ ├── SpinnerIcon │ │ │ ├── SpinnerIcon.tsx │ │ │ └── index.ts │ │ │ ├── SuccessIcon │ │ │ ├── SuccessIcon.tsx │ │ │ └── index.ts │ │ │ ├── TargetIcon │ │ │ ├── TargetIcon.tsx │ │ │ └── index.ts │ │ │ ├── TelegramIcon │ │ │ ├── TelegramIcon.tsx │ │ │ └── index.ts │ │ │ ├── ULIcon │ │ │ ├── ULIcon.tsx │ │ │ └── index.ts │ │ │ ├── UnderlineIcon │ │ │ ├── UnderlineIcon.tsx │ │ │ └── index.ts │ │ │ ├── VisibilityIcon │ │ │ ├── VisibilityIcon.tsx │ │ │ └── index.ts │ │ │ ├── VisibilityOffIcon │ │ │ ├── VisibilityOffIcon.tsx │ │ │ └── index.ts │ │ │ ├── index.ts │ │ │ └── types.ts │ ├── components │ │ ├── Accordion │ │ │ ├── Accordion.scss │ │ │ ├── Accordion.tsx │ │ │ ├── index.ts │ │ │ └── types.ts │ │ ├── Alert │ │ │ ├── Alert.tsx │ │ │ ├── enums.ts │ │ │ ├── index.ts │ │ │ └── types.ts │ │ ├── Autocomplete │ │ │ ├── Autocomplete.tsx │ │ │ ├── index.ts │ │ │ └── types.ts │ │ ├── Avatar │ │ │ ├── Avatar.scss │ │ │ ├── Avatar.tsx │ │ │ ├── index.ts │ │ │ └── types.ts │ │ ├── Breadcrumbs │ │ │ ├── Breadcrumbs.scss │ │ │ ├── Breadcrumbs.tsx │ │ │ ├── Crumb │ │ │ │ ├── Crumb.scss │ │ │ │ ├── Crumb.tsx │ │ │ │ ├── index.ts │ │ │ │ └── types.ts │ │ │ ├── index.ts │ │ │ └── types.ts │ │ ├── Button │ │ │ ├── Button.scss │ │ │ ├── Button.tsx │ │ │ ├── IconButton │ │ │ │ ├── IconButton.scss │ │ │ │ ├── IconButton.tsx │ │ │ │ ├── index.ts │ │ │ │ └── types.ts │ │ │ ├── index.ts │ │ │ └── types.ts │ │ ├── Checkbox │ │ │ ├── Checkbox.scss │ │ │ ├── Checkbox.tsx │ │ │ ├── index.ts │ │ │ └── types.ts │ │ ├── ClientOnly │ │ │ ├── ClientOnly.tsx │ │ │ ├── index.ts │ │ │ └── types.ts │ │ ├── CopyToClipboard │ │ │ ├── CopyToClipboard.scss │ │ │ ├── CopyToClipboard.tsx │ │ │ ├── index.ts │ │ │ └── types.ts │ │ ├── DatePicker │ │ │ ├── Calendar │ │ │ │ ├── Calendar.scss │ │ │ │ ├── Calendar.tsx │ │ │ │ ├── index.ts │ │ │ │ └── types.ts │ │ │ ├── DatePicker │ │ │ │ ├── DatePicker.tsx │ │ │ │ ├── index.ts │ │ │ │ └── types.ts │ │ │ ├── DateRangePicker │ │ │ │ ├── DateRangePicker.tsx │ │ │ │ ├── index.ts │ │ │ │ └── types.ts │ │ │ └── index.ts │ │ ├── DocumentViewer │ │ │ ├── DocumentViewer.scss │ │ │ ├── DocumentViewer.tsx │ │ │ ├── index.ts │ │ │ └── types.ts │ │ ├── DropDown │ │ │ ├── DropDown.scss │ │ │ ├── DropDown.tsx │ │ │ ├── index.ts │ │ │ └── types.ts │ │ ├── Error │ │ │ ├── Error.css │ │ │ ├── Error.css.map │ │ │ ├── Error.scss │ │ │ ├── Error.tsx │ │ │ ├── enums.ts │ │ │ ├── index.ts │ │ │ └── types.ts │ │ ├── FadeIn │ │ │ ├── FadeIn.scss │ │ │ ├── FadeIn.tsx │ │ │ ├── index.ts │ │ │ └── types.ts │ │ ├── Field │ │ │ ├── InputDateField │ │ │ │ ├── InputDateField.scss │ │ │ │ ├── InputDateField.tsx │ │ │ │ ├── index.ts │ │ │ │ └── types.ts │ │ │ ├── InputDateRangeField │ │ │ │ ├── InputDateRangeField.scss │ │ │ │ ├── InputDateRangeField.tsx │ │ │ │ ├── index.ts │ │ │ │ └── types.ts │ │ │ └── index.ts │ │ ├── Hamburger │ │ │ ├── Hamburger.scss │ │ │ ├── Hamburger.tsx │ │ │ ├── enums.ts │ │ │ ├── index.ts │ │ │ └── types.ts │ │ ├── Icon │ │ │ ├── Icon.scss │ │ │ ├── Icon.tsx │ │ │ ├── IconType.tsx │ │ │ ├── index.ts │ │ │ └── types.ts │ │ ├── Input │ │ │ ├── Input │ │ │ │ ├── Input.scss │ │ │ │ ├── Input.tsx │ │ │ │ ├── index.ts │ │ │ │ └── types.ts │ │ │ ├── InputDate │ │ │ │ ├── Close.svg │ │ │ │ ├── InputDate.scss │ │ │ │ ├── InputDate.tsx │ │ │ │ ├── index.ts │ │ │ │ └── types.ts │ │ │ └── index.ts │ │ ├── Map │ │ │ └── OpenLayersMap │ │ │ │ ├── ControlsPanel │ │ │ │ ├── ControlsPanel.scss │ │ │ │ ├── ControlsPanel.tsx │ │ │ │ └── index.ts │ │ │ │ ├── OpenLayersMap.scss │ │ │ │ ├── OpenLayersMap.tsx │ │ │ │ ├── SearchPanel │ │ │ │ ├── SearchPanel.scss │ │ │ │ ├── SearchPanel.tsx │ │ │ │ └── index.ts │ │ │ │ ├── SuggestedPlaces │ │ │ │ ├── SuggestedPlaces.scss │ │ │ │ ├── SuggestedPlaces.tsx │ │ │ │ └── index.ts │ │ │ │ ├── index.ts │ │ │ │ └── types.ts │ │ ├── Modal │ │ │ ├── Modal.scss │ │ │ ├── Modal.tsx │ │ │ ├── hooks │ │ │ │ ├── index.ts │ │ │ │ └── useModalWindow.ts │ │ │ ├── index.ts │ │ │ └── types.ts │ │ ├── Overlay │ │ │ ├── Overlay.scss │ │ │ ├── Overlay.tsx │ │ │ ├── index.ts │ │ │ └── types.ts │ │ ├── Pagination │ │ │ ├── Pagination.scss │ │ │ ├── Pagination.tsx │ │ │ ├── index.ts │ │ │ └── types.ts │ │ ├── Popover │ │ │ ├── constants.ts │ │ │ ├── index.ts │ │ │ └── types.ts │ │ ├── Portal │ │ │ ├── Portal.tsx │ │ │ ├── index.ts │ │ │ └── types.ts │ │ ├── RadioButton │ │ │ ├── NativeRadioButton │ │ │ │ ├── NativeRadioButton.tsx │ │ │ │ ├── index.ts │ │ │ │ └── types.ts │ │ │ ├── RadioButton.scss │ │ │ ├── RadioButton.tsx │ │ │ ├── constants.ts │ │ │ ├── index.ts │ │ │ └── types.ts │ │ ├── RangeSlider │ │ │ ├── RangeSlider.scss │ │ │ ├── RangeSlider.tsx │ │ │ ├── index.ts │ │ │ └── types.ts │ │ ├── Rating │ │ │ ├── Rating.tsx │ │ │ ├── index.ts │ │ │ └── types.ts │ │ ├── Scrollbar │ │ │ ├── Scrollbar.tsx │ │ │ └── index.ts │ │ ├── Select │ │ │ ├── AsyncSelect.tsx │ │ │ ├── Select.scss │ │ │ ├── Select.tsx │ │ │ ├── index.ts │ │ │ ├── selectComponentsStyles.tsx │ │ │ ├── selectStyles.tsx │ │ │ ├── selectVariants.ts │ │ │ └── types.ts │ │ ├── Sidebar │ │ │ ├── Sidebar.scss │ │ │ ├── Sidebar.tsx │ │ │ ├── index.ts │ │ │ └── types.ts │ │ ├── Skeleton │ │ │ ├── Skeleton.scss │ │ │ ├── Skeleton.tsx │ │ │ ├── index.ts │ │ │ └── types.ts │ │ ├── Slider │ │ │ ├── Slider.scss │ │ │ ├── SliderArrow │ │ │ │ ├── SliderArrow.tsx │ │ │ │ ├── enums.ts │ │ │ │ ├── index.ts │ │ │ │ └── types.ts │ │ │ ├── SliderSimple │ │ │ │ ├── SliderSimple.scss │ │ │ │ ├── SliderSimple.tsx │ │ │ │ ├── index.ts │ │ │ │ ├── settings.tsx │ │ │ │ └── types.ts │ │ │ ├── SliderSyncing │ │ │ │ ├── SliderSyncing.scss │ │ │ │ ├── SliderSyncing.tsx │ │ │ │ ├── index.ts │ │ │ │ ├── settings.tsx │ │ │ │ └── types.ts │ │ │ └── index.ts │ │ ├── Spacer │ │ │ ├── Spacer.scss │ │ │ ├── Spacer.tsx │ │ │ └── index.ts │ │ ├── Spinner │ │ │ ├── Spinner.scss │ │ │ ├── Spinner.tsx │ │ │ ├── index.ts │ │ │ └── types.ts │ │ ├── Switcher │ │ │ ├── Switcher.scss │ │ │ ├── SwitcherCustom │ │ │ │ ├── SwitcherCustom.tsx │ │ │ │ ├── index.ts │ │ │ │ └── types.ts │ │ │ ├── SwitcherHeadless │ │ │ │ ├── SwitcherHeadless.tsx │ │ │ │ ├── index.ts │ │ │ │ └── types.ts │ │ │ ├── constants.ts │ │ │ ├── enums.ts │ │ │ └── index.ts │ │ ├── Table │ │ │ ├── Control │ │ │ │ ├── Control.tsx │ │ │ │ └── index.ts │ │ │ ├── NavigationPanel │ │ │ │ ├── NavigationPanel.scss │ │ │ │ ├── NavigationPanel.tsx │ │ │ │ └── index.ts │ │ │ ├── Options │ │ │ │ ├── Options.scss │ │ │ │ ├── Options.tsx │ │ │ │ ├── index.ts │ │ │ │ └── types.ts │ │ │ ├── PageSize │ │ │ │ ├── PageSize.scss │ │ │ │ ├── PageSize.tsx │ │ │ │ ├── index.ts │ │ │ │ └── utils │ │ │ │ │ ├── getPageSizeOptions.ts │ │ │ │ │ └── index.ts │ │ │ ├── Table.scss │ │ │ ├── Table.tsx │ │ │ ├── TableBody │ │ │ │ ├── TableBody.scss │ │ │ │ ├── TableBody.tsx │ │ │ │ └── index.ts │ │ │ ├── TableHeader │ │ │ │ ├── TableHeader.scss │ │ │ │ ├── TableHeader.tsx │ │ │ │ ├── index.ts │ │ │ │ ├── types.ts │ │ │ │ └── utils │ │ │ │ │ ├── getInitialSortingColumnState.ts │ │ │ │ │ └── index.ts │ │ │ ├── TableHeaderItem │ │ │ │ ├── TableHeaderItem.scss │ │ │ │ ├── TableHeaderItem.tsx │ │ │ │ └── index.ts │ │ │ ├── enums.ts │ │ │ ├── index.ts │ │ │ └── types.ts │ │ ├── Tabs │ │ │ ├── Tabs.scss │ │ │ ├── Tabs.tsx │ │ │ ├── index.ts │ │ │ └── types.ts │ │ ├── TextEditor │ │ │ ├── BlockStyleControls │ │ │ │ ├── BlockStyleControls.tsx │ │ │ │ ├── index.ts │ │ │ │ └── types.ts │ │ │ ├── FormatButton │ │ │ │ ├── FormatButton.scss │ │ │ │ ├── FormatButton.tsx │ │ │ │ ├── index.ts │ │ │ │ └── types.ts │ │ │ ├── InlineStyleControls │ │ │ │ ├── InlineStyleControls.tsx │ │ │ │ ├── index.ts │ │ │ │ └── types.ts │ │ │ ├── TextEditor.scss │ │ │ ├── TextEditor.tsx │ │ │ ├── constants.tsx │ │ │ ├── index.ts │ │ │ └── types.ts │ │ ├── Textarea │ │ │ ├── Textarea.scss │ │ │ ├── Textarea.tsx │ │ │ ├── index.ts │ │ │ └── types.ts │ │ ├── Tooltip │ │ │ ├── Tooltip │ │ │ │ ├── Tooltip.scss │ │ │ │ ├── Tooltip.tsx │ │ │ │ ├── enums.ts │ │ │ │ ├── index.ts │ │ │ │ ├── types.ts │ │ │ │ └── utils │ │ │ │ │ ├── getTooltipOffset.ts │ │ │ │ │ ├── getVirtualReference.ts │ │ │ │ │ └── index.ts │ │ │ ├── TooltipCustom │ │ │ │ ├── TooltipCustom.scss │ │ │ │ ├── TooltipCustom.tsx │ │ │ │ ├── enums.ts │ │ │ │ ├── index.ts │ │ │ │ └── types.ts │ │ │ └── index.ts │ │ ├── Typography │ │ │ ├── Typography.scss │ │ │ ├── Typography.tsx │ │ │ ├── constants.ts │ │ │ ├── enums.ts │ │ │ ├── index.ts │ │ │ └── types.ts │ │ ├── Uploader │ │ │ ├── Uploader.tsx │ │ │ ├── UploaderDropzone │ │ │ │ ├── UploaderDropzone.scss │ │ │ │ ├── UploaderDropzone.tsx │ │ │ │ ├── index.ts │ │ │ │ └── types.ts │ │ │ ├── UploaderPreview │ │ │ │ ├── UploaderPreview.tsx │ │ │ │ ├── index.ts │ │ │ │ └── types.ts │ │ │ ├── index.ts │ │ │ └── types.ts │ │ └── index.ts │ ├── constants │ │ ├── format.ts │ │ ├── index.ts │ │ ├── pagination.ts │ │ └── transition.ts │ ├── context │ │ ├── dropDownContext.ts │ │ └── index.ts │ ├── enums │ │ ├── color.ts │ │ ├── index.ts │ │ ├── language.ts │ │ └── theme.ts │ ├── hooks │ │ ├── index.ts │ │ ├── useCopyToClipboard.ts │ │ ├── useDropDown.ts │ │ ├── useGetFormErrors.ts │ │ ├── useHydrated.ts │ │ ├── useMounted.ts │ │ ├── usePopover.ts │ │ ├── useTable.ts │ │ └── useTheme.ts │ ├── index.ts │ ├── types.ts │ └── utils │ │ ├── format.ts │ │ ├── generateUUID.ts │ │ └── index.ts └── utils │ ├── format.ts │ └── index.ts └── tsconfig.json /.editorconfig: -------------------------------------------------------------------------------- 1 | [*] 2 | charset = utf-8 3 | -------------------------------------------------------------------------------- /.env: -------------------------------------------------------------------------------- 1 | PORT: 3000 -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | 3 | /build 4 | /dist 5 | /public/build 6 | 7 | .env 8 | 9 | /styles 10 | 11 | /docs 12 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "semi": true, 3 | "trailingComma": "all", 4 | "printWidth": 100, 5 | "tabWidth": 2, 6 | "arrowParens": "always", 7 | "quoteProps": "as-needed" 8 | } 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Typescript UI Components. Ready solutions 2 | 3 | ## Content 4 | 5 | - [Project_Description](#Project_Description) 6 | - [Technologies](#Technologies) 7 | - [Launch_of_the_project](#Launch_of_the_project) 8 | - [Authors](#Authors) 9 | 10 | ### Description 11 | 12 | React UI Components 13 | 14 | ### Technologies 15 | 16 | The project uses 17 | 18 | - **React**, 19 | - **TypeScript**, 20 | 21 | ### Launch of the project 22 | 23 | - Install dependencies from the react-typescript-ui directory: 24 | 25 | ```python 26 | npm install 27 | ``` 28 | 29 | - Launching a project: 30 | 31 | ```python 32 | npm start 33 | ``` 34 | 35 | ### Authors 36 | 37 | ``` 38 | Evgeniy Budaev 39 | ``` 40 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | [ 4 | "@babel/preset-env", 5 | { 6 | targets: { 7 | node: "14", 8 | }, 9 | }, 10 | ], 11 | "@babel/preset-react", 12 | "@babel/preset-typescript", 13 | ], 14 | plugins: [ 15 | "@babel/plugin-proposal-export-namespace-from", 16 | "@babel/plugin-proposal-optional-chaining", 17 | // Strip console.debug calls unless REMIX_DEBUG=true 18 | ...(process.env.REMIX_DEBUG === "true" 19 | ? [] 20 | : [["transform-remove-console", { exclude: ["error", "warn", "log", "info"] }]]), 21 | ], 22 | }; 23 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EvgeniyBudaev/react-typescript-ui/dbd3f4e390619f38f80b607d006fda8ca877ac59/public/favicon.ico -------------------------------------------------------------------------------- /public/images/canvasOriginal.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EvgeniyBudaev/react-typescript-ui/dbd3f4e390619f38f80b607d006fda8ca877ac59/public/images/canvasOriginal.jpg -------------------------------------------------------------------------------- /public/images/marker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EvgeniyBudaev/react-typescript-ui/dbd3f4e390619f38f80b607d006fda8ca877ac59/public/images/marker.png -------------------------------------------------------------------------------- /public/images/readme.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EvgeniyBudaev/react-typescript-ui/dbd3f4e390619f38f80b607d006fda8ca877ac59/public/images/readme.jpg -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EvgeniyBudaev/react-typescript-ui/dbd3f4e390619f38f80b607d006fda8ca877ac59/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EvgeniyBudaev/react-typescript-ui/dbd3f4e390619f38f80b607d006fda8ca877ac59/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /server.ts: -------------------------------------------------------------------------------- 1 | import { createServer } from "http"; 2 | import cors from "cors"; 3 | import express from "express"; 4 | import { Server } from "socket.io"; 5 | import { SOCKET_RECEIVE_THEME, SOCKET_SEND_THEME } from "./src/constants"; 6 | 7 | const app = express(); 8 | 9 | app.use(cors()); 10 | 11 | const httpServer = createServer(app); 12 | const io = new Server(httpServer, { 13 | cors: { 14 | origin: "http://localhost:3000", 15 | methods: ["GET", "POST"], 16 | }, 17 | }); 18 | 19 | io.on("connection", (socket) => { 20 | socket.on(SOCKET_SEND_THEME, (data) => { 21 | socket.broadcast.emit(SOCKET_RECEIVE_THEME, data); 22 | }); 23 | }); 24 | 25 | const port = process.env.PORT || 3001; 26 | 27 | httpServer.listen(port, () => { 28 | console.log(`Express server listening on port ${port}`); 29 | }); 30 | -------------------------------------------------------------------------------- /src/assets/fonts/roboto/Roboto-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EvgeniyBudaev/react-typescript-ui/dbd3f4e390619f38f80b607d006fda8ca877ac59/src/assets/fonts/roboto/Roboto-Bold.ttf -------------------------------------------------------------------------------- /src/assets/fonts/roboto/Roboto-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EvgeniyBudaev/react-typescript-ui/dbd3f4e390619f38f80b607d006fda8ca877ac59/src/assets/fonts/roboto/Roboto-Light.ttf -------------------------------------------------------------------------------- /src/assets/fonts/roboto/Roboto-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EvgeniyBudaev/react-typescript-ui/dbd3f4e390619f38f80b607d006fda8ca877ac59/src/assets/fonts/roboto/Roboto-Medium.ttf -------------------------------------------------------------------------------- /src/assets/fonts/roboto/Roboto-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EvgeniyBudaev/react-typescript-ui/dbd3f4e390619f38f80b607d006fda8ca877ac59/src/assets/fonts/roboto/Roboto-Regular.ttf -------------------------------------------------------------------------------- /src/components/App/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./App"; 2 | -------------------------------------------------------------------------------- /src/components/CodeCard/ChildrenComponent.tsx: -------------------------------------------------------------------------------- 1 | import type { FC, ReactNode } from "react"; 2 | 3 | type TProps = { 4 | children?: ReactNode; 5 | }; 6 | 7 | export const ChildrenComponent: FC = ({ children }) => { 8 | return <>{children}; 9 | }; 10 | -------------------------------------------------------------------------------- /src/components/CodeCard/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./CodeCard"; 2 | -------------------------------------------------------------------------------- /src/components/Hr/Hr.scss: -------------------------------------------------------------------------------- 1 | .Hr { 2 | hr { 3 | margin-top: 25px; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /src/components/Hr/Hr.tsx: -------------------------------------------------------------------------------- 1 | import type { CSSProperties, FC } from "react"; 2 | import "./Hr.scss"; 3 | 4 | type TProps = { 5 | style?: CSSProperties; 6 | }; 7 | 8 | export const Hr: FC = ({ style }) => { 9 | return ( 10 |
11 |
12 |
13 | ); 14 | }; 15 | -------------------------------------------------------------------------------- /src/components/Hr/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Hr"; 2 | -------------------------------------------------------------------------------- /src/components/Layout/Layout.scss: -------------------------------------------------------------------------------- 1 | .Layout { 2 | &-Container { 3 | /*ширина контейнера чистая 1200px*/ 4 | max-width: 1230px; 5 | width: 100%; 6 | padding: 100px 15px 15px; 7 | margin: 0 auto 0 240px; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/components/Layout/Layout.tsx: -------------------------------------------------------------------------------- 1 | import { useEffect } from "react"; 2 | import type { FC, ReactNode } from "react"; 3 | import clsx from "clsx"; 4 | import isNil from "lodash/isNil"; 5 | import { ETheme, useThemeContext } from "uikit"; 6 | import { MenuPanel } from "./MenuPanel"; 7 | import "./Layout.scss"; 8 | 9 | type TProps = { 10 | children?: ReactNode; 11 | }; 12 | 13 | export const Layout: FC = ({ children }) => { 14 | const themeState = useThemeContext(); 15 | const theme = !isNil(themeState) ? themeState.theme : ETheme.Light; 16 | 17 | useEffect(() => { 18 | if (theme === ETheme.Dark) { 19 | document.body.classList.add("theme-dark"); 20 | } 21 | return () => { 22 | document.body.classList.remove("theme-dark"); 23 | }; 24 | }, [theme]); 25 | 26 | return ( 27 |
28 | 29 |
{children}
30 |
31 | ); 32 | }; 33 | -------------------------------------------------------------------------------- /src/components/Layout/MenuPanel/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./MenuPanel"; 2 | -------------------------------------------------------------------------------- /src/components/Layout/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Layout"; 2 | -------------------------------------------------------------------------------- /src/components/Title/Title.scss: -------------------------------------------------------------------------------- 1 | .Title { 2 | margin-bottom: 25px; 3 | } 4 | -------------------------------------------------------------------------------- /src/components/Title/Title.tsx: -------------------------------------------------------------------------------- 1 | import type { FC, ReactNode } from "react"; 2 | import { ETypographyVariant, Typography } from "uikit"; 3 | import "./Title.scss"; 4 | 5 | type TProps = { 6 | children?: ReactNode; 7 | }; 8 | 9 | export const Title: FC = ({ children }) => { 10 | return ( 11 |
12 | {children} 13 |
14 | ); 15 | }; 16 | -------------------------------------------------------------------------------- /src/components/Title/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Title"; 2 | -------------------------------------------------------------------------------- /src/components/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./App"; 2 | export * from "./CodeCard"; 3 | export * from "./Hr"; 4 | export * from "./Layout"; 5 | export * from "./modal"; 6 | export * from "./route"; 7 | export * from "./search"; 8 | export * from "./table"; 9 | export * from "./theme"; 10 | export * from "./Title"; 11 | -------------------------------------------------------------------------------- /src/components/modal/ModalDelete/ModalDelete.scss: -------------------------------------------------------------------------------- 1 | .ModalDelete { 2 | &-Footer { 3 | display: flex; 4 | align-items: center; 5 | } 6 | 7 | &-Cancel { 8 | margin-right: 16px; 9 | } 10 | } 11 | 12 | .theme-dark { 13 | .ModalDelete { 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/components/modal/ModalDelete/ModalDelete.tsx: -------------------------------------------------------------------------------- 1 | import type { FC } from "react"; 2 | import { Button, ETypographyVariant, Modal, Typography } from "uikit"; 3 | import "./ModalDelete.scss"; 4 | 5 | type TProps = { 6 | isOpen: boolean; 7 | onClose: () => void; 8 | onSubmit: () => void; 9 | }; 10 | 11 | export const ModalDelete: FC = ({ isOpen, onClose, onSubmit }) => { 12 | return ( 13 | 14 | 15 | 16 | Are you sure you want to delete? 17 | 18 | 19 | 20 |
21 | 24 | 27 |
28 | 29 | 30 | ); 31 | }; 32 | -------------------------------------------------------------------------------- /src/components/modal/ModalDelete/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./ModalDelete"; 2 | export * from "./types"; 3 | -------------------------------------------------------------------------------- /src/components/modal/ModalDelete/types.ts: -------------------------------------------------------------------------------- 1 | export type TDeleteModalState = { 2 | isOpen: boolean; 3 | alias?: string; 4 | }; 5 | -------------------------------------------------------------------------------- /src/components/modal/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./ModalDelete"; 2 | -------------------------------------------------------------------------------- /src/components/route/PrivateRoutes/PrivateRoutes.tsx: -------------------------------------------------------------------------------- 1 | import type { FC } from "react"; 2 | import { Outlet, Navigate } from "react-router-dom"; 3 | import { ERoutes } from "enums"; 4 | 5 | type TProps = { 6 | isAuthenticated?: boolean; 7 | redirectPath?: string; 8 | }; 9 | 10 | export const PrivateRoutes: FC = ({ isAuthenticated, redirectPath = ERoutes.Root }) => { 11 | return isAuthenticated ? : ; 12 | }; 13 | -------------------------------------------------------------------------------- /src/components/route/PrivateRoutes/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./PrivateRoutes"; 2 | -------------------------------------------------------------------------------- /src/components/route/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./PrivateRoutes"; 2 | -------------------------------------------------------------------------------- /src/components/search/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./types"; 2 | -------------------------------------------------------------------------------- /src/components/search/types.ts: -------------------------------------------------------------------------------- 1 | export type TSearchParams = { 2 | page: string; 3 | size: string; 4 | search?: string; 5 | sort?: string; 6 | }; 7 | -------------------------------------------------------------------------------- /src/components/table/TableHeader/TableHeader.scss: -------------------------------------------------------------------------------- 1 | .TableHeader { 2 | &-CursorHelp { 3 | cursor: help; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /src/components/table/TableHeader/TableHeader.tsx: -------------------------------------------------------------------------------- 1 | import type { FC, ReactElement, ReactNode } from "react"; 2 | import clsx from "clsx"; 3 | import { ETablePlacement, Tooltip } from "uikit"; 4 | import type { TPlacement } from "uikit"; 5 | 6 | type TProps = { 7 | children?: ReactNode; 8 | info?: string | ReactElement; 9 | placement?: TPlacement; 10 | }; 11 | 12 | export const TableHeader: FC = ({ children, info, placement = ETablePlacement.Top }) => { 13 | return ( 14 |
15 | {info ? ( 16 | 17 | {children} 18 | 19 | ) : ( 20 | children 21 | )} 22 |
23 | ); 24 | }; 25 | -------------------------------------------------------------------------------- /src/components/table/TableHeader/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./TableHeader"; 2 | -------------------------------------------------------------------------------- /src/components/table/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./TableHeader"; 2 | -------------------------------------------------------------------------------- /src/components/theme/ThemeSwitcher.scss: -------------------------------------------------------------------------------- 1 | @import "styles"; 2 | 3 | .ThemeSwitcher { 4 | position: relative; 5 | max-width: 94px; 6 | width: 100%; 7 | height: 40px; 8 | 9 | &-Controls { 10 | width: 100%; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | } 15 | 16 | &-DisplayButton { 17 | display: flex; 18 | justify-content: center; 19 | align-items: center; 20 | height: 38px; 21 | width: 50%; 22 | z-index: 1; 23 | 24 | span { 25 | display: flex; 26 | align-items: center; 27 | } 28 | 29 | svg { 30 | height: 20px; 31 | width: 20px; 32 | fill: $color-dark-gray; 33 | } 34 | 35 | path { 36 | fill: $color-dark-gray; 37 | } 38 | 39 | &__checked { 40 | svg { 41 | fill: $color-primary; 42 | } 43 | 44 | path { 45 | fill: $color-primary; 46 | } 47 | } 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /src/components/theme/ThemeSwitcher/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./ThemeSwitcher"; 2 | -------------------------------------------------------------------------------- /src/components/theme/ThemeSwitcherCustom/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./ThemeSwitcherCustom"; 2 | -------------------------------------------------------------------------------- /src/components/theme/constants.ts: -------------------------------------------------------------------------------- 1 | import clsx from "clsx"; 2 | import { ESwitcherVariant } from "uikit"; 3 | import "./ThemeSwitcher.scss"; 4 | 5 | export const SWITCHER_THEMES = () => { 6 | return { 7 | [ESwitcherVariant.Default]: clsx("ThemeSwitcher"), 8 | }; 9 | }; 10 | -------------------------------------------------------------------------------- /src/components/theme/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./ThemeSwitcher"; 2 | export * from "./ThemeSwitcherCustom"; 3 | -------------------------------------------------------------------------------- /src/constants/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./socket"; 2 | -------------------------------------------------------------------------------- /src/constants/socket.ts: -------------------------------------------------------------------------------- 1 | export const SOCKET_SEND_THEME = "socket_send_theme"; 2 | export const SOCKET_RECEIVE_THEME = "socket_receive_theme"; 3 | -------------------------------------------------------------------------------- /src/enums/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./routes"; 2 | -------------------------------------------------------------------------------- /src/enums/routes.ts: -------------------------------------------------------------------------------- 1 | export enum ERoutes { 2 | Root = "/", 3 | 4 | Accordion = "/accordion", 5 | Autocomplete = "/autocomplete", 6 | Avatar = "/avatar", 7 | Breadcrumbs = "/breadcrumbs", 8 | Button = "/button", 9 | Canvas = "/canvasImageResize", 10 | Checkbox = "/checkbox", 11 | Copy = "/copy", 12 | DatePicker = "/DatePicker", 13 | DocumentViewer = "/documentViewer", 14 | DropDown = "/dropDown", 15 | Field = "/field", 16 | Form = "/form", 17 | Hamburger = "/hamburger", 18 | Icon = "/icon", 19 | Map = "/map", 20 | Modal = "/modal", 21 | Overlay = "/overlay", 22 | Popover = "/popover", 23 | Portal = "/portal", 24 | PrivateRoute = "/privateRoute", 25 | RadioButton = "/radioButton", 26 | RangeSlider = "/rangeSlider", 27 | Rating = "/rating", 28 | Scrollbar = "/scrollbar", 29 | Select = "/select", 30 | Sidebar = "/sidebar", 31 | Skeleton = "/skeleton", 32 | Slider = "/slider", 33 | Spinner = "/spinner", 34 | Switcher = "/switcher", 35 | Table = "/table", 36 | Tabs = "/tabs", 37 | TextEditor = "/textEditor", 38 | Tooltip = "/tooltip", 39 | Typography = "/typography", 40 | WordWrap = "/wordWrap", 41 | } 42 | -------------------------------------------------------------------------------- /src/hooks/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./useSocket"; 2 | -------------------------------------------------------------------------------- /src/hooks/useSocket.ts: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import type { Socket } from "socket.io-client"; 3 | import { connect } from "socket.io-client"; 4 | import type { DefaultEventsMap } from "socket.io/dist/typed-events"; 5 | 6 | export const useSocket = (url: string) => { 7 | const [socket, setSocket] = useState>(); 8 | 9 | useEffect(() => { 10 | const connection = connect(url); 11 | setSocket(connection); 12 | return () => { 13 | connection.close(); 14 | }; 15 | }, [url]); 16 | 17 | return socket; 18 | }; 19 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import { BrowserRouter } from "react-router-dom"; 4 | import { App } from "components"; 5 | 6 | const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement); 7 | root.render( 8 | 9 | 10 | 11 | 12 | , 13 | ); 14 | -------------------------------------------------------------------------------- /src/pages/AccordionPage/AccordionPage.tsx: -------------------------------------------------------------------------------- 1 | import type { FC } from "react"; 2 | import { Title } from "components"; 3 | import { Accordion } from "uikit"; 4 | 5 | export const AccordionPage: FC = () => { 6 | return ( 7 |
8 | Accordion 9 | 10 |

11 | Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has 12 | been the industry's standard dummy text ever since the 1500s, when an unknown printer took 13 | a galley of type and scrambled it to make a type specimen book. It has survived not only 14 | five centuries, but also the leap into electronic typesetting, remaining essentially 15 | unchanged. It was popularised in the 1960s with the release of Letraset sheets containing 16 | Lorem Ipsum passages, and more recently with desktop publishing software like Aldus 17 | PageMaker including versions of Lorem Ipsum 18 |

19 | 20 |
21 | ); 22 | }; 23 | -------------------------------------------------------------------------------- /src/pages/AccordionPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./AccordionPage"; 2 | -------------------------------------------------------------------------------- /src/pages/AutocompletePage/AutocompletePage.scss: -------------------------------------------------------------------------------- 1 | .AutocompletePage { 2 | &-Select { 3 | max-width: 220px; 4 | width: 100%; 5 | } 6 | } 7 | 8 | .theme-dark { 9 | .Sorting { 10 | &-Select { 11 | svg { 12 | fill: #fff; 13 | } 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/pages/AutocompletePage/AutocompletePage.tsx: -------------------------------------------------------------------------------- 1 | import type { FC } from "react"; 2 | import clsx from "clsx"; 3 | import isNil from "lodash/isNil"; 4 | import { Title } from "components"; 5 | import { Autocomplete, ETheme, useThemeContext } from "uikit"; 6 | import { usePosts } from "./hooks"; 7 | import "./AutocompletePage.scss"; 8 | 9 | export const AutocompletePage: FC = () => { 10 | const themeState = useThemeContext(); 11 | const theme = !isNil(themeState) ? themeState.theme : ETheme.Light; 12 | const { isSelectOpened, onBlur, onChange, onFocus, onLoadOptions, selectedOption } = usePosts(); 13 | 14 | return ( 15 |
16 | Autocomplete 17 | 29 |
30 | 
{JSON.stringify(selectedOption, null, 2)}
31 |
32 |
33 | ); 34 | }; 35 | -------------------------------------------------------------------------------- /src/pages/AutocompletePage/hooks/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./usePosts"; 2 | -------------------------------------------------------------------------------- /src/pages/AutocompletePage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./AutocompletePage"; 2 | -------------------------------------------------------------------------------- /src/pages/AvatarPage/AvatarPage.tsx: -------------------------------------------------------------------------------- 1 | import type { FC } from "react"; 2 | import { Hr, Title } from "components"; 3 | import { Avatar } from "uikit"; 4 | import avatar from "./avatar.jpg"; 5 | 6 | export const AvatarPage: FC = () => { 7 | return ( 8 |
9 | Avatar with initials 10 | 11 |
12 | Avatar with image 13 | 14 |
15 | ); 16 | }; 17 | -------------------------------------------------------------------------------- /src/pages/AvatarPage/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EvgeniyBudaev/react-typescript-ui/dbd3f4e390619f38f80b607d006fda8ca877ac59/src/pages/AvatarPage/avatar.jpg -------------------------------------------------------------------------------- /src/pages/AvatarPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./AvatarPage"; 2 | -------------------------------------------------------------------------------- /src/pages/BreadcrumbsPage/BreadcrumbsDetailPage/BreadcrumbsDetailPage.tsx: -------------------------------------------------------------------------------- 1 | import type { FC } from "react"; 2 | import { Title } from "components"; 3 | import { Breadcrumbs } from "uikit"; 4 | 5 | export const BreadcrumbsDetailPage: FC = () => { 6 | return ( 7 |
8 | Breadcrumbs detail page 9 | 10 |
11 | ); 12 | }; 13 | -------------------------------------------------------------------------------- /src/pages/BreadcrumbsPage/BreadcrumbsDetailPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./BreadcrumbsDetailPage"; 2 | -------------------------------------------------------------------------------- /src/pages/BreadcrumbsPage/BreadcrumbsPage.tsx: -------------------------------------------------------------------------------- 1 | import type { FC } from "react"; 2 | import { Link } from "react-router-dom"; 3 | import { Title } from "components"; 4 | import { ERoutes } from "enums"; 5 | import { Breadcrumbs } from "uikit"; 6 | 7 | export const BreadcrumbsPage: FC = () => { 8 | return ( 9 |
10 | Breadcrumbs 11 | 12 | Go to detail page 13 |
14 | ); 15 | }; 16 | -------------------------------------------------------------------------------- /src/pages/BreadcrumbsPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./BreadcrumbsPage"; 2 | export * from "./BreadcrumbsDetailPage"; 3 | -------------------------------------------------------------------------------- /src/pages/ButtonPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./ButtonPage"; 2 | -------------------------------------------------------------------------------- /src/pages/CanvasImageResizePage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./CanvasImageResizePage"; 2 | -------------------------------------------------------------------------------- /src/pages/CheckboxPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./CheckboxPage"; 2 | -------------------------------------------------------------------------------- /src/pages/CopyPage/CopyPage.scss: -------------------------------------------------------------------------------- 1 | .CopyPage { 2 | &-Details { 3 | display: flex; 4 | align-items: center; 5 | } 6 | 7 | &-Label { 8 | margin-right: 8px; 9 | font-size: 16px; 10 | color: grey; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/pages/CopyPage/CopyPage.tsx: -------------------------------------------------------------------------------- 1 | import type { FC } from "react"; 2 | import { Hr, Title } from "components"; 3 | import { CopyToClipboard } from "uikit"; 4 | import "./CopyPage.scss"; 5 | 6 | export const CopyPage: FC = () => { 7 | const userId1 = "c5c62093-8b0d-46fe-8939-a19aa3262199"; 8 | const userId2 = "f34cd548-faa6-4e55-bda6-363fc8e7c9d2"; 9 | 10 | return ( 11 |
12 | Copy to clipboard 13 |
14 |
15 |
User ID
16 |
{userId1}
17 | 18 |
19 |
20 |
21 |
User ID
22 |
{userId2}
23 | 24 |
25 |
26 | ); 27 | }; 28 | -------------------------------------------------------------------------------- /src/pages/CopyPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./CopyPage"; 2 | -------------------------------------------------------------------------------- /src/pages/DatePickerPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./DatePickerPage"; 2 | -------------------------------------------------------------------------------- /src/pages/DocumentViewerPage/DocumentViewerPage.scss: -------------------------------------------------------------------------------- 1 | $height: 800px; 2 | 3 | .DocumentViewerPage { 4 | iframe { 5 | margin-bottom: 25px; 6 | } 7 | 8 | &-DocumentViewer { 9 | margin-top: 25px; 10 | } 11 | 12 | &-Modal { 13 | max-width: 1200px; 14 | height: $height; 15 | overflow: hidden; 16 | 17 | & .Modal { 18 | height: $height; 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/pages/DocumentViewerPage/DocumentViewerPage.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import type { FC } from "react"; 3 | import { Hr, Title } from "components"; 4 | import { Button, DocumentViewer, Modal } from "uikit"; 5 | import { template } from "./template"; 6 | import "./DocumentViewerPage.scss"; 7 | 8 | export const DocumentViewerPage: FC = () => { 9 | const [isOpenModal, setIsOpenModal] = useState(false); 10 | 11 | const handleModalOpen = () => { 12 | setIsOpenModal(true); 13 | }; 14 | 15 | const handleModalClose = () => { 16 | setIsOpenModal(false); 17 | }; 18 | 19 | return ( 20 |
21 | IFrame 22 | 23 |
24 | Document Viewer 25 | 26 | 31 | 32 | 33 |
34 | ); 35 | }; 36 | -------------------------------------------------------------------------------- /src/pages/DocumentViewerPage/document.xls: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EvgeniyBudaev/react-typescript-ui/dbd3f4e390619f38f80b607d006fda8ca877ac59/src/pages/DocumentViewerPage/document.xls -------------------------------------------------------------------------------- /src/pages/DocumentViewerPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./DocumentViewerPage"; 2 | -------------------------------------------------------------------------------- /src/pages/DropDownPage/DropDownPage.scss: -------------------------------------------------------------------------------- 1 | @import "styles"; 2 | 3 | .DropDownPage { 4 | &-Navigation { 5 | width: 100%; 6 | } 7 | 8 | &-Menu { 9 | display: flex; 10 | align-items: center; 11 | justify-content: flex-start; 12 | } 13 | 14 | &-MenuItem { 15 | position: relative; 16 | padding: 0 50px; 17 | border-bottom: 1px solid $color-light-gray; 18 | cursor: pointer; 19 | transition: all 0.15s; 20 | 21 | &:hover { 22 | border-bottom: 1px solid $color-primary; 23 | } 24 | } 25 | } 26 | 27 | /* ----- Открытие/закрытие DropDown ----- */ 28 | $positionDropDown: -500px; 29 | $transition: 0.15s; 30 | 31 | .DropDownCatalog { 32 | &-Menu { 33 | padding: 4px; 34 | } 35 | 36 | &-MenuItem { 37 | display: flex; 38 | align-items: center; 39 | margin: 3px; 40 | padding: 0 16px; 41 | min-height: 44px; 42 | border-radius: 4px; 43 | cursor: pointer; 44 | transition: all 0.15s; 45 | 46 | &:hover { 47 | background-color: rgba(223, 213, 195, 1); 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/pages/DropDownPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./DropDownPage"; 2 | -------------------------------------------------------------------------------- /src/pages/FieldPage/FieldPage.scss: -------------------------------------------------------------------------------- 1 | .FieldPage { 2 | &-Field { 3 | height: 40px; 4 | max-width: 334px; 5 | width: 100%; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/pages/FieldPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./FieldPage"; 2 | -------------------------------------------------------------------------------- /src/pages/FormPage/FormPage.scss: -------------------------------------------------------------------------------- 1 | @import "styles"; 2 | 3 | .FormPage { 4 | display: flex; 5 | justify-content: center; 6 | height: 100%; 7 | 8 | &-Inner { 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | flex-grow: 1; 13 | flex-direction: column; 14 | max-width: 470px; 15 | width: 100%; 16 | } 17 | 18 | &-Content { 19 | padding: 24px; 20 | width: 100%; 21 | height: auto; 22 | border-radius: 16px; 23 | box-shadow: $shadow-form; 24 | } 25 | 26 | &-Title { 27 | margin-bottom: 25px; 28 | text-align: center; 29 | } 30 | 31 | &-FormFieldGroup { 32 | position: relative; 33 | margin-bottom: 50px; 34 | } 35 | 36 | &-Control { 37 | display: flex; 38 | justify-content: center; 39 | } 40 | 41 | &-Button { 42 | margin-bottom: 20px; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/pages/FormPage/enums.ts: -------------------------------------------------------------------------------- 1 | export enum EFormFields { 2 | Name = "name", 3 | Phone = "phone", 4 | Email = "email", 5 | Password = "password", 6 | RePassword = "rePassword", 7 | Comment = "comment", 8 | } 9 | -------------------------------------------------------------------------------- /src/pages/FormPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./enums"; 2 | export * from "./FormPage"; 3 | export * from "./schemas"; 4 | -------------------------------------------------------------------------------- /src/pages/HamburgerPage/HamburgerPage.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import type { FC } from "react"; 3 | import { Title } from "components"; 4 | import { Hamburger } from "uikit"; 5 | 6 | export const HamburgerPage: FC = () => { 7 | const [isActive, setIsActive] = useState(false); 8 | 9 | const handleToggle = () => { 10 | setIsActive((prevState?: boolean) => !prevState); 11 | }; 12 | 13 | return ( 14 |
15 | Hamburger 16 | 17 |
18 | ); 19 | }; 20 | -------------------------------------------------------------------------------- /src/pages/HamburgerPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./HamburgerPage"; 2 | -------------------------------------------------------------------------------- /src/pages/IconPage/IconPage.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import type { FC } from "react"; 3 | import { Title } from "components"; 4 | import { Icon } from "uikit"; 5 | 6 | export const IconPage: FC = () => { 7 | const [count, setCount] = useState(0); 8 | 9 | const handleClickIcon = () => { 10 | setCount((prevState) => prevState + 1); 11 | }; 12 | 13 | return ( 14 |
15 | Icon 16 | 17 |
18 | 
{JSON.stringify(count, null, 2)}
19 |
20 |
21 | ); 22 | }; 23 | -------------------------------------------------------------------------------- /src/pages/IconPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./IconPage"; 2 | -------------------------------------------------------------------------------- /src/pages/MapPage/MapPage.scss: -------------------------------------------------------------------------------- 1 | .MapPage { 2 | &-Map { 3 | position: relative; 4 | width: 100%; 5 | height: 500px; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/pages/MapPage/MapPage.tsx: -------------------------------------------------------------------------------- 1 | import { type FC } from "react"; 2 | import { Title } from "components"; 3 | import { OpenLayersMap } from "uikit/components/Map/OpenLayersMap"; 4 | import "./MapPage.scss"; 5 | 6 | export const MapPage: FC = () => { 7 | return ( 8 |
9 | OpenLayers Map 10 |
11 | 12 |
13 |
14 | ); 15 | }; 16 | -------------------------------------------------------------------------------- /src/pages/MapPage/index.ts: -------------------------------------------------------------------------------- 1 | import { MapPage } from "./MapPage"; 2 | 3 | export { MapPage }; 4 | -------------------------------------------------------------------------------- /src/pages/ModalPage/ModalPage.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import type { FC } from "react"; 3 | import { Title } from "components"; 4 | import { Button, Modal } from "uikit"; 5 | 6 | export const ModalPage: FC = () => { 7 | const [isOpenModal, setIsOpenModal] = useState(false); 8 | 9 | const handleModalOpen = () => { 10 | setIsOpenModal(true); 11 | }; 12 | 13 | const handleModalClose = () => { 14 | setIsOpenModal(false); 15 | }; 16 | 17 | const handleModalSubmit = () => { 18 | setIsOpenModal(false); 19 | }; 20 | 21 | return ( 22 |
23 | Modal 24 | 25 | 26 | 27 |

Title

28 | 29 | 30 |
Content
31 | 32 | 33 | 36 | 37 | 38 |
39 | ); 40 | }; 41 | -------------------------------------------------------------------------------- /src/pages/ModalPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./ModalPage"; 2 | -------------------------------------------------------------------------------- /src/pages/OverlayPage/OverlayPage.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import type { FC } from "react"; 3 | import { Title } from "components"; 4 | import { Button, Overlay } from "uikit"; 5 | 6 | export const OverlayPage: FC = () => { 7 | const [isOpen, setIsOpen] = useState(false); 8 | 9 | const handleOpen = () => { 10 | setIsOpen(true); 11 | }; 12 | 13 | const handleClose = () => { 14 | setIsOpen(false); 15 | }; 16 | 17 | return ( 18 |
19 | Overlay 20 | 21 | 22 |
23 | ); 24 | }; 25 | -------------------------------------------------------------------------------- /src/pages/OverlayPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./OverlayPage"; 2 | -------------------------------------------------------------------------------- /src/pages/PopoverPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./PopoverPage"; 2 | -------------------------------------------------------------------------------- /src/pages/PortalPage/PortalPage.scss: -------------------------------------------------------------------------------- 1 | .MyPortal { 2 | content: ""; 3 | display: flex; 4 | align-items: center; 5 | justify-content: center; 6 | position: absolute; 7 | top: 50%; 8 | left: 0; 9 | right: 0; 10 | transform: translateY(-50%); 11 | margin: 0 auto; 12 | padding: 40px; 13 | height: 230px; 14 | width: 760px; 15 | box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.25); 16 | } 17 | -------------------------------------------------------------------------------- /src/pages/PortalPage/PortalPage.tsx: -------------------------------------------------------------------------------- 1 | import type { FC } from "react"; 2 | import { Title } from "components"; 3 | import { Portal } from "uikit"; 4 | import "./PortalPage.scss"; 5 | 6 | export const PortalPage: FC = () => { 7 | return ( 8 |
9 | Portal 10 | 11 |

This is portal container

12 | 13 |
14 | ); 15 | }; 16 | -------------------------------------------------------------------------------- /src/pages/PortalPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./PortalPage"; 2 | -------------------------------------------------------------------------------- /src/pages/PrivateRoutePage/PrivateRoutePage.tsx: -------------------------------------------------------------------------------- 1 | import type { FC } from "react"; 2 | import { Title } from "components"; 3 | 4 | export const PrivateRoutePage: FC = () => { 5 | return ( 6 |
7 | Private Route 8 |
9 | ); 10 | }; 11 | -------------------------------------------------------------------------------- /src/pages/PrivateRoutePage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./PrivateRoutePage"; 2 | -------------------------------------------------------------------------------- /src/pages/RadioButtonPage/RadioButtonPage.scss: -------------------------------------------------------------------------------- 1 | .RadioButtonPage { 2 | &-Content { 3 | margin: 24px 0; 4 | } 5 | } -------------------------------------------------------------------------------- /src/pages/RadioButtonPage/enum.ts: -------------------------------------------------------------------------------- 1 | export enum EHobby { 2 | Football = "football", 3 | Swimming = "swimming", 4 | Other = "other", 5 | } 6 | -------------------------------------------------------------------------------- /src/pages/RadioButtonPage/index.ts: -------------------------------------------------------------------------------- 1 | import { RadioButtonPage } from "./RadioButtonPage"; 2 | 3 | export { RadioButtonPage }; 4 | -------------------------------------------------------------------------------- /src/pages/RangeSliderPage/RangeSliderPage.scss: -------------------------------------------------------------------------------- 1 | .RangeSliderPage { 2 | width: 100%; 3 | margin: 0 16px; 4 | 5 | &-Slider { 6 | max-width: 300px; 7 | width: 100%; 8 | margin-top: 100px; 9 | background-color: #ccc; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/pages/RangeSliderPage/RangeSliderPage.tsx: -------------------------------------------------------------------------------- 1 | import { type FC, useState } from "react"; 2 | import { Title } from "components"; 3 | import { RangeSlider } from "uikit/components/RangeSlider"; 4 | import "./RangeSliderPage.scss"; 5 | 6 | export const RangeSliderPage: FC = () => { 7 | const [range, setRange] = useState([18, 50]); 8 | 9 | return ( 10 |
11 | Range slider with tooltip 12 | 21 |
22 | ); 23 | }; 24 | -------------------------------------------------------------------------------- /src/pages/RangeSliderPage/index.ts: -------------------------------------------------------------------------------- 1 | import { RangeSliderPage } from "./RangeSliderPage"; 2 | 3 | export { RangeSliderPage }; 4 | -------------------------------------------------------------------------------- /src/pages/RatingPage/RatingPage.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import type { FC } from "react"; 3 | import { Title } from "components"; 4 | import { Rating } from "uikit"; 5 | 6 | export const RatingPage: FC = () => { 7 | const [rating, setRating] = useState(0); 8 | 9 | const handleRatingChange = (newRating: number) => { 10 | setRating(newRating); 11 | }; 12 | 13 | return ( 14 |
15 | Rating 16 | 17 |
18 | 
{JSON.stringify(rating, null, 2)}
19 |
20 |
21 | ); 22 | }; 23 | -------------------------------------------------------------------------------- /src/pages/RatingPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./RatingPage"; 2 | -------------------------------------------------------------------------------- /src/pages/ScrollbarPage/ScrollbarPage.scss: -------------------------------------------------------------------------------- 1 | .ScrollbarPage { 2 | &-Content { 3 | padding: 15px; 4 | width: 300px; 5 | height: 300px; 6 | border: 1px solid #ccc; 7 | overflow: auto; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/pages/ScrollbarPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./ScrollbarPage"; 2 | -------------------------------------------------------------------------------- /src/pages/SelectPage/SelectPage.scss: -------------------------------------------------------------------------------- 1 | .SelectPage { 2 | &-Select { 3 | max-width: 220px; 4 | width: 100%; 5 | 6 | //svg { 7 | // fill: #000; 8 | // transition: all 0.15s; 9 | //} 10 | // 11 | //&__active { 12 | // svg { 13 | // transform: rotate(180deg); 14 | // } 15 | //} 16 | } 17 | } 18 | 19 | .theme-dark { 20 | .Sorting { 21 | &-Select { 22 | svg { 23 | fill: #fff; 24 | } 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/pages/SelectPage/hooks/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./useSelect"; 2 | -------------------------------------------------------------------------------- /src/pages/SelectPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./SelectPage"; 2 | -------------------------------------------------------------------------------- /src/pages/SidebarPage/SidebarPage.scss: -------------------------------------------------------------------------------- 1 | .SidebarPage { 2 | &Sidebar { 3 | padding: 15px; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /src/pages/SidebarPage/SidebarPage.tsx: -------------------------------------------------------------------------------- 1 | import { useRef, useState } from "react"; 2 | import type { FC } from "react"; 3 | import { Title } from "components"; 4 | import { Avatar, Hamburger, Sidebar } from "uikit"; 5 | import "./SidebarPage.scss"; 6 | 7 | export const SidebarPage: FC = () => { 8 | const [isActive, setIsActive] = useState(false); 9 | const sidebarRef = useRef(null); 10 | 11 | const handleSidebarOpen = () => { 12 | setIsActive(true); 13 | }; 14 | 15 | const handleSidebarClose = () => { 16 | setIsActive(false); 17 | }; 18 | 19 | return ( 20 |
21 | Sidebar 22 | 23 | 29 | 30 | 31 |
32 | ); 33 | }; 34 | -------------------------------------------------------------------------------- /src/pages/SidebarPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./SidebarPage"; 2 | -------------------------------------------------------------------------------- /src/pages/SkeletonPage/SkeletonPage.tsx: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import type { FC } from "react"; 3 | import { Title } from "components"; 4 | import { Skeleton } from "uikit"; 5 | 6 | export const SkeletonPage: FC = () => { 7 | const [isLoading] = useState(true); 8 | 9 | return ( 10 |
11 | Skeleton 12 |
13 | {isLoading && } 14 |
15 | {isLoading ? :

Skeleton

} 16 | {isLoading ? ( 17 |
18 | {new Array(1).fill(1).map((product, index) => ( 19 | 20 | ))} 21 |
22 | ) : ( 23 |
List items
24 | )} 25 | {isLoading ? ( 26 | 27 | ) : ( 28 |
29 | )} 30 |
31 | ); 32 | }; 33 | -------------------------------------------------------------------------------- /src/pages/SkeletonPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./SkeletonPage"; 2 | -------------------------------------------------------------------------------- /src/pages/SliderPage/SliderPage.tsx: -------------------------------------------------------------------------------- 1 | import type { FC } from "react"; 2 | import { Hr, Title } from "components"; 3 | import { SliderSimple, SliderSyncing } from "uikit"; 4 | import { sliderImages } from "./data"; 5 | 6 | export const SliderPage: FC = () => { 7 | return ( 8 |
9 | Slider simple 10 | 11 |
12 | Slider syncing 13 | 19 |
20 | ); 21 | }; 22 | -------------------------------------------------------------------------------- /src/pages/SliderPage/data.ts: -------------------------------------------------------------------------------- 1 | export const sliderImages = [ 2 | "https://ir.ozone.ru/s3/multimedia-r/wc1000/6377826795.jpg", 3 | "https://ir.ozone.ru/s3/multimedia-2/wc1000/6327396674.jpg", 4 | "https://ir.ozone.ru/s3/multimedia-x/wc1000/6377172285.jpg", 5 | "https://ir.ozone.ru/s3/multimedia-r/wc1000/6618813831.jpg", 6 | "https://ir.ozone.ru/s3/multimedia-z/wc1000/6595155755.jpg", 7 | "https://ir.ozone.ru/s3/multimedia-2/wc1000/6531742826.jpg", 8 | ]; 9 | -------------------------------------------------------------------------------- /src/pages/SliderPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./data"; 2 | export * from "./SliderPage"; 3 | -------------------------------------------------------------------------------- /src/pages/SpinnerPage/SpinnerPage.scss: -------------------------------------------------------------------------------- 1 | .SpinnerPage { 2 | &-Section { 3 | position: relative; 4 | width: 100%; 5 | height: 700px; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/pages/SpinnerPage/SpinnerPage.tsx: -------------------------------------------------------------------------------- 1 | import type { FC } from "react"; 2 | import { Title } from "components"; 3 | import { Spinner } from "uikit"; 4 | import "./SpinnerPage.scss"; 5 | 6 | export const SpinnerPage: FC = () => { 7 | return ( 8 |
9 | Spinner 10 |
11 | 12 |
13 |
14 | ); 15 | }; 16 | -------------------------------------------------------------------------------- /src/pages/SpinnerPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./SpinnerPage"; 2 | -------------------------------------------------------------------------------- /src/pages/SwitcherPage/SwitcherPage.tsx: -------------------------------------------------------------------------------- 1 | import type { FC } from "react"; 2 | import { Hr, ThemeSwitcher, ThemeSwitcherCustom, Title } from "components"; 3 | 4 | export const SwitcherPage: FC = () => { 5 | return ( 6 |
7 | Switcher 8 | 9 |
10 | Switcher Custom 11 | 12 |
13 | ); 14 | }; 15 | -------------------------------------------------------------------------------- /src/pages/SwitcherPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./SwitcherPage"; 2 | -------------------------------------------------------------------------------- /src/pages/TablePage/PostsTable/enums.ts: -------------------------------------------------------------------------------- 1 | export enum ETableColumns { 2 | Body = "body", 3 | Id = "id", 4 | Title = "title", 5 | UserID = "userId", 6 | } 7 | -------------------------------------------------------------------------------- /src/pages/TablePage/PostsTable/hooks/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./useGetColumns"; 2 | -------------------------------------------------------------------------------- /src/pages/TablePage/PostsTable/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./enums"; 2 | export * from "./hooks"; 3 | export * from "./PostsTable"; 4 | -------------------------------------------------------------------------------- /src/pages/TablePage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./TablePage"; 2 | -------------------------------------------------------------------------------- /src/pages/TabsPage/TabsPage.scss: -------------------------------------------------------------------------------- 1 | .TabsPage { 2 | &-Content { 3 | margin-top: 25px; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /src/pages/TabsPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./TabsPage"; 2 | -------------------------------------------------------------------------------- /src/pages/TextEditorPage/TextEditorPage.tsx: -------------------------------------------------------------------------------- 1 | import type { FC } from "react"; 2 | import { Title } from "components"; 3 | import { TextEditor } from "uikit"; 4 | 5 | export const TextEditorPage: FC = () => { 6 | return ( 7 |
8 | Text editor 9 | 10 |
11 | ); 12 | }; 13 | -------------------------------------------------------------------------------- /src/pages/TextEditorPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./TextEditorPage"; 2 | -------------------------------------------------------------------------------- /src/pages/TooltipPage/TooltipPage.scss: -------------------------------------------------------------------------------- 1 | .TooltipPage { 2 | display: flex; 3 | flex-direction: column; 4 | align-items: center; 5 | 6 | &-Block { 7 | margin-bottom: 50px; 8 | text-align: center; 9 | } 10 | 11 | &-Tooltip { 12 | display: flex; 13 | justify-content: center; 14 | } 15 | 16 | &-Inline { 17 | max-width: max-content; 18 | } 19 | } 20 | 21 | .Test { 22 | display: flex; 23 | justify-content: space-between; 24 | align-items: center; 25 | height: 40px; 26 | max-width: 400px; 27 | width: 100%; 28 | border: 1px solid #000; 29 | 30 | &-Text { 31 | max-width: 100px; 32 | width: 100px; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/pages/TooltipPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./TooltipPage"; 2 | -------------------------------------------------------------------------------- /src/pages/TypographyPage/TypographyPage.tsx: -------------------------------------------------------------------------------- 1 | import type { FC } from "react"; 2 | import { Hr } from "components"; 3 | import { ETypographyVariant, Typography } from "uikit"; 4 | 5 | export const TypographyPage: FC = () => { 6 | return ( 7 |
8 | 9 | Title as h1 10 | 11 |
12 | 13 | Typography as div 14 | 15 |
16 | 17 | Typography as label 18 | 19 |
20 | ); 21 | }; 22 | -------------------------------------------------------------------------------- /src/pages/TypographyPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./TypographyPage"; 2 | -------------------------------------------------------------------------------- /src/pages/WordWrapPage/WordWrapPage.scss: -------------------------------------------------------------------------------- 1 | .WordWrapPage { 2 | &-Inner { 3 | display: flex; 4 | margin-bottom: 16px; 5 | } 6 | 7 | &-Container { 8 | max-width: 200px; 9 | width: 100%; 10 | height: auto; 11 | border: 1px solid #000; 12 | border-radius: 4px; 13 | padding: 0; 14 | margin-right: 16px; 15 | } 16 | 17 | &-Text { 18 | white-space: pre-wrap; // Preserves spaces and wraps text 19 | word-break: break-word; // Allows breaking of long words 20 | width: 100%; 21 | } 22 | 23 | &-Canvas { 24 | border: 1px solid #000; 25 | border-radius: 4px; 26 | padding: 0; 27 | margin-right: 16px; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/pages/WordWrapPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./WordWrapPage"; 2 | -------------------------------------------------------------------------------- /src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /src/services/api/posts/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./schemas"; 2 | export * from "./types"; 3 | export * as PostsApi from "./utils"; 4 | -------------------------------------------------------------------------------- /src/services/api/posts/schemas.ts: -------------------------------------------------------------------------------- 1 | import { z } from "zod"; 2 | 3 | export const postsParamsSchema = z 4 | .object({ 5 | userId: z.string(), 6 | }) 7 | .nullish(); 8 | 9 | export const postItemSchema = z.object({ 10 | userId: z.number(), 11 | id: z.number(), 12 | title: z.string(), 13 | body: z.string(), 14 | }); 15 | 16 | export const postsSchema = postItemSchema.array(); 17 | -------------------------------------------------------------------------------- /src/services/api/posts/types.ts: -------------------------------------------------------------------------------- 1 | import type { z } from "zod"; 2 | import type { postItemSchema, postsParamsSchema, postsSchema } from "./schemas"; 3 | 4 | export type TPostsParams = z.infer; 5 | export type TPost = z.infer; 6 | export type TPosts = z.infer; 7 | -------------------------------------------------------------------------------- /src/services/api/posts/utils/getPostsApi.ts: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | import isNil from "lodash/isNil"; 3 | import type { TPosts, TPostsParams } from "../types"; 4 | 5 | const BASE_URL = "https://jsonplaceholder.typicode.com"; 6 | 7 | export const getPostsApi = async (params?: TPostsParams) => { 8 | const searchParams = !isNil(params) ? `?${new URLSearchParams(params)}` : ""; 9 | const url = `${BASE_URL}/posts${searchParams}`; 10 | const config = { 11 | headers: { 12 | "Content-Type": "application/json", 13 | }, 14 | }; 15 | const response = await axios.get(url, config); 16 | return response.data; 17 | }; 18 | -------------------------------------------------------------------------------- /src/services/api/posts/utils/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./getPostsApi"; 2 | -------------------------------------------------------------------------------- /src/services/api/sorting/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./mapTableSortingToDto"; 2 | -------------------------------------------------------------------------------- /src/services/api/sorting/mapTableSortingToDto.ts: -------------------------------------------------------------------------------- 1 | import type { TTableSortingParams } from "uikit"; 2 | 3 | export const mapTableSortingToDto = (params?: TTableSortingParams, type?: string) => { 4 | if (Array.isArray(params)) { 5 | return { 6 | sort: params 7 | ?.map((item) => `${item.sortProperty}_${item.sortDirection?.toLowerCase()}`) 8 | .join(","), 9 | }; 10 | } 11 | return { sort: params ? `${params.sortProperty}_${params.sortDirection?.toLowerCase()}` : "" }; 12 | }; 13 | -------------------------------------------------------------------------------- /src/services/context/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./socketContext"; 2 | export * from "./themeContext"; 3 | -------------------------------------------------------------------------------- /src/services/context/socketContext.ts: -------------------------------------------------------------------------------- 1 | import { createContext } from "react"; 2 | import type { Socket } from "socket.io-client"; 3 | import type { DefaultEventsMap } from "socket.io/dist/typed-events"; 4 | 5 | export const SocketContext = createContext | undefined>( 6 | undefined, 7 | ); 8 | 9 | export const SocketProvider = SocketContext.Provider; 10 | -------------------------------------------------------------------------------- /src/services/context/themeContext.ts: -------------------------------------------------------------------------------- 1 | import { createContext } from "react"; 2 | import type { ETheme } from "uikit"; 3 | 4 | export type TThemeState = { 5 | onChangeTheme: (theme: ETheme) => void; 6 | theme: ETheme; 7 | }; 8 | export const ThemeContext = createContext(null); 9 | export const ThemeProvider = ThemeContext.Provider; 10 | -------------------------------------------------------------------------------- /src/services/form/Form/enums.ts: -------------------------------------------------------------------------------- 1 | export enum EFormMethods { 2 | Get = "get", 3 | Post = "post", 4 | Patch = "patch", 5 | Put = "put", 6 | Delete = "delete", 7 | } 8 | -------------------------------------------------------------------------------- /src/services/form/Form/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./enums"; 2 | -------------------------------------------------------------------------------- /src/services/form/FormErrors/FormErrors.tsx: -------------------------------------------------------------------------------- 1 | import type { FC } from "react"; 2 | import { Error, useGetFormErrors } from "uikit"; 3 | import type { TError } from "uikit/components/Error/types"; 4 | 5 | type TProps = { 6 | errors: any; 7 | }; 8 | 9 | export const FormErrors: FC = ({ errors }) => { 10 | const errorList = useGetFormErrors({ data: errors }) as TError[]; 11 | return ; 12 | }; 13 | -------------------------------------------------------------------------------- /src/services/form/FormErrors/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./FormErrors"; 2 | -------------------------------------------------------------------------------- /src/services/form/Input/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Input"; 2 | -------------------------------------------------------------------------------- /src/services/form/InputMask/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./InputMask"; 2 | -------------------------------------------------------------------------------- /src/services/form/InputMask/react-input-mask.d.ts: -------------------------------------------------------------------------------- 1 | declare module "@mona-health/react-input-mask" { 2 | import { ChangeEventHandler, FC, InputHTMLAttributes } from "react"; 3 | 4 | export interface InputMaskProps extends InputHTMLAttributes { 5 | alwaysShowMask?: boolean; 6 | beforeMaskedStateChange?: (state: BeforeMaskedStateChangeStates) => InputState; 7 | defaultValue: string | number | readonly string[]; 8 | mask: string | (string | RegExp)[]; 9 | maskPlaceholder?: string; 10 | onChange?: ChangeEventHandler; 11 | } 12 | 13 | const InputMask: FC; 14 | export default InputMask; 15 | } 16 | -------------------------------------------------------------------------------- /src/services/form/PhoneInputMask/constants.ts: -------------------------------------------------------------------------------- 1 | export const PHONE_MASK = "+7 (999) 999 99 99"; 2 | 3 | export const PAST_BUG_PHONE = "+7 (+7"; 4 | 5 | export const PAST_BUG_8_PHONE = "+7 (8"; 6 | -------------------------------------------------------------------------------- /src/services/form/PhoneInputMask/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./constants"; 2 | export * from "./PhoneInputMask"; 3 | -------------------------------------------------------------------------------- /src/services/form/Textarea/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Textarea"; 2 | -------------------------------------------------------------------------------- /src/services/form/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Form"; 2 | export * from "./FormErrors"; 3 | export * from "./Input"; 4 | export * from "./InputMask"; 5 | export * from "./PhoneInputMask"; 6 | export * from "./Textarea"; 7 | -------------------------------------------------------------------------------- /src/services/validation/constants.ts: -------------------------------------------------------------------------------- 1 | export const LETTERS_EN = "a-zA-Z"; 2 | export const LETTERS_RU = "а-яА-ЯёЁ"; 3 | 4 | export const EMAIL_ERROR_MESSAGE = "Invalid email"; 5 | export const EMAIL_REGEXP = 6 | /^(([^<>()\\[\]\\.,;:\s@"]+(\.[^<>()\\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 7 | export const EMAIL_NOT_CYRILLIC_REGEXP = new RegExp(`^[^${LETTERS_RU}]*$`); 8 | export const EMAIL_NOT_CYRILLIC_ERROR_MESSAGE = "Only Latin characters"; 9 | 10 | export const EMPTY_FIELD_ERROR_MESSAGE = "Field cannot be empty"; 11 | 12 | export const NAME_REGEXP = new RegExp(`^[- ${LETTERS_EN}${LETTERS_RU}]*$`); 13 | export const NAME_ERROR_MESSAGE = "Allowed characters: letters only"; 14 | 15 | export const PASSWORD_ERROR_MESSAGE = "Password mismatch"; 16 | 17 | export const PHONE_REGEXP = /\+7\s?\(?\d\d\d\)?\s?\d\d\d\s?\d\d\s?\d\d/; 18 | export const PHONE_ERROR_MESSAGE = 'Allowed characters: 0-9, "-", " ", "+", "(", ")"'; 19 | -------------------------------------------------------------------------------- /src/services/validation/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./constants"; 2 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | import "@testing-library/jest-dom/extend-expect"; 2 | -------------------------------------------------------------------------------- /src/styles/constants.scss: -------------------------------------------------------------------------------- 1 | $overlayOpacity: 0.6; 2 | $transition: 0.15s; 3 | $border-radius: 4px; 4 | -------------------------------------------------------------------------------- /src/styles/fonts.css: -------------------------------------------------------------------------------- 1 | @layer base { 2 | @font-face { 3 | font-weight: 300; 4 | font-family: "Roboto", sans-serif; 5 | font-style: normal; 6 | font-display: swap; 7 | src: url("../assets/fonts/roboto/Roboto-Light.ttf") format("truetype"); 8 | } 9 | 10 | @font-face { 11 | font-weight: 400; 12 | font-family: "Roboto", sans-serif; 13 | font-style: normal; 14 | font-display: swap; 15 | src: url("../assets/fonts/roboto/Roboto-Regular.ttf") format("truetype"); 16 | } 17 | 18 | @font-face { 19 | font-weight: 500; 20 | font-family: "Roboto", sans-serif; 21 | font-style: normal; 22 | font-display: swap; 23 | src: url("../assets/fonts/roboto/Roboto-Medium.ttf") format("truetype"); 24 | } 25 | 26 | @font-face { 27 | font-weight: 700; 28 | font-family: "Roboto", sans-serif; 29 | font-style: normal; 30 | font-display: swap; 31 | src: url("../assets/fonts/roboto/Roboto-Bold.ttf") format("truetype"); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/styles/index.scss: -------------------------------------------------------------------------------- 1 | @import "./colors"; 2 | @import "./constants"; 3 | @import "./fonts"; 4 | @import "./scroll"; 5 | @import "./shadows"; 6 | @import "./text"; 7 | -------------------------------------------------------------------------------- /src/styles/scroll.scss: -------------------------------------------------------------------------------- 1 | @import "./colors"; 2 | 3 | .scrollbar-track-x, 4 | .scrollbar-thumb-x { 5 | height: 8px !important; 6 | } 7 | 8 | .scrollbar-track-y, 9 | .scrollbar-thumb-y { 10 | width: 8px !important; 11 | } 12 | 13 | .scrollbar-track .scrollbar-thumb { 14 | background: $color-suit-gray; 15 | } 16 | 17 | .scrollbar-thumb-y { 18 | &:hover { 19 | background: $color-primary; 20 | } 21 | 22 | &:active { 23 | background: $color-primary-hover; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/styles/shadows.scss: -------------------------------------------------------------------------------- 1 | $shadow-black: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 20px rgba(0, 0, 0, 0.08); 2 | $shadow-card: 0 5px 25px rgba(0.3, 0.31, 0.33, 0.12); 3 | $shadow-bottom: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px; 4 | $shadow-form: 0 1px 20px rgba(4, 6, 28, 0.1); 5 | $shadow-sliderArrow: 0 0.1rem 2rem rgba(4, 6, 28, 0.1); 6 | $shadow-perimeter: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px; 7 | $shadow-perimeter-light: rgba(138, 143, 160, 0.12) 0px 2px 4px 0px, 8 | rgba(138, 143, 160, 0.32) 0px 2px 16px 0px; 9 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/ArrowDownIcon/ArrowDownIcon.tsx: -------------------------------------------------------------------------------- 1 | import { memo } from "react"; 2 | import type { FC } from "react"; 3 | import type { TIconProps } from "../types"; 4 | 5 | const Component: FC = ({ height = 8, width = 16, ...props }) => ( 6 | 14 | 15 | 16 | ); 17 | 18 | export const ArrowDownIcon = memo(Component); 19 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/ArrowDownIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./ArrowDownIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/ArrowLeftIcon/ArrowLeftIcon.tsx: -------------------------------------------------------------------------------- 1 | import { memo } from "react"; 2 | import type { FC } from "react"; 3 | import type { TIconProps } from "../types"; 4 | 5 | const Component: FC = ({ height = 16, width = 8, ...props }) => ( 6 | 14 | 15 | 16 | ); 17 | 18 | export const ArrowLeftIcon = memo(Component); 19 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/ArrowLeftIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./ArrowLeftIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/ArrowRightIcon/ArrowRightIcon.tsx: -------------------------------------------------------------------------------- 1 | import { memo } from "react"; 2 | import type { FC } from "react"; 3 | import type { TIconProps } from "../types"; 4 | 5 | const Component: FC = ({ height = 16, width = 8, ...props }) => ( 6 | 14 | 15 | 16 | ); 17 | 18 | export const ArrowRightIcon = memo(Component); 19 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/ArrowRightIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./ArrowRightIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/AttractionsIcon/index.ts: -------------------------------------------------------------------------------- 1 | import { AttractionsIcon } from "./AttractionsIcon"; 2 | 3 | export { AttractionsIcon }; 4 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/BoldIcon/BoldIcon.tsx: -------------------------------------------------------------------------------- 1 | import { memo } from "react"; 2 | import type { FC } from "react"; 3 | import type { TIconProps } from "../types"; 4 | 5 | const IconComponent: FC = ({ height = 24, width = 24, ...props }) => { 6 | return ( 7 | 15 | 19 | 20 | ); 21 | }; 22 | 23 | export const BoldIcon = memo(IconComponent); 24 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/BoldIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./BoldIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/CalendarIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./CalendarIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/CenterIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./CenterIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/CheckboxIcon/CheckboxIcon.tsx: -------------------------------------------------------------------------------- 1 | import { memo } from "react"; 2 | import type { FC } from "react"; 3 | import type { TIconProps } from "../types"; 4 | 5 | const IconComponent: FC = ({ height, width, ...props }) => ( 6 | 14 | 15 | 16 | ); 17 | 18 | export const CheckboxIcon = memo(IconComponent); 19 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/CheckboxIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./CheckboxIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/CityIcon/CityIcon.tsx: -------------------------------------------------------------------------------- 1 | import { memo } from "react"; 2 | import type { FC } from "react"; 3 | import type { TIconProps } from "../types"; 4 | 5 | const Component: FC = ({ height = 24, width = 24, ...props }) => ( 6 | 14 | 15 | 16 | ); 17 | 18 | export const CityIcon = memo(Component); 19 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/CityIcon/index.ts: -------------------------------------------------------------------------------- 1 | import { CityIcon } from "./CityIcon"; 2 | 3 | export { CityIcon }; 4 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/CloseIcon/CloseIcon.tsx: -------------------------------------------------------------------------------- 1 | import { memo } from "react"; 2 | import type { FC } from "react"; 3 | import type { TIconProps } from "../types"; 4 | 5 | const Component: FC = ({ height = 24, width = 24, ...props }) => ( 6 | 14 | 18 | 19 | ); 20 | 21 | export const CloseIcon = memo(Component); 22 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/CloseIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./CloseIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/CopyIcon/CopyIcon.tsx: -------------------------------------------------------------------------------- 1 | import { memo } from "react"; 2 | import type { FC } from "react"; 3 | import type { TIconProps } from "../types"; 4 | 5 | const Component: FC = ({ height = 24, width = 24, ...props }) => ( 6 | 14 | 15 | 16 | 17 | ); 18 | 19 | export const CopyIcon = memo(Component); 20 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/CopyIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./CopyIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/CottageIcon/CottageIcon.tsx: -------------------------------------------------------------------------------- 1 | import { memo } from "react"; 2 | import type { FC } from "react"; 3 | import type { TIconProps } from "../types"; 4 | 5 | const Component: FC = ({ height = 24, width = 24, ...props }) => ( 6 | 14 | 15 | 16 | ); 17 | 18 | export const CottageIcon = memo(Component); 19 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/CottageIcon/index.ts: -------------------------------------------------------------------------------- 1 | import { CottageIcon } from "./CottageIcon"; 2 | 3 | export { CottageIcon }; 4 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/DarkModeIcon/DarkModeIcon.tsx: -------------------------------------------------------------------------------- 1 | import { memo } from "react"; 2 | import type { FC } from "react"; 3 | import type { TIconProps } from "../types"; 4 | 5 | const IconComponent: FC = ({ height = 24, width = 24, ...props }) => ( 6 | 15 | 16 | 17 | 18 | ); 19 | 20 | export const DarkModeIcon = memo(IconComponent); 21 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/DarkModeIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./DarkModeIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/EditIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./EditIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/GlobeLocationPinIcon/index.ts: -------------------------------------------------------------------------------- 1 | import { GlobeLocationPinIcon } from "./GlobeLocationPinIcon"; 2 | 3 | export { GlobeLocationPinIcon }; 4 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/H2Icon/H2Icon.tsx: -------------------------------------------------------------------------------- 1 | import { memo } from "react"; 2 | import type { FC } from "react"; 3 | import type { TIconProps } from "../types"; 4 | 5 | const IconComponent: FC = ({ height = 24, width = 24, ...props }) => { 6 | return ( 7 | 14 | 18 | 19 | ); 20 | }; 21 | 22 | export const H2Icon = memo(IconComponent); 23 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/H2Icon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./H2Icon"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/HighlightIcon/HighlightIcon.tsx: -------------------------------------------------------------------------------- 1 | import { memo } from "react"; 2 | import type { FC } from "react"; 3 | import type { TIconProps } from "../types"; 4 | 5 | const IconComponent: FC = ({ height = 24, width = 24, ...props }) => { 6 | return ( 7 | 15 | 16 | 20 | 21 | ); 22 | }; 23 | 24 | export const HighlightIcon = memo(IconComponent); 25 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/HighlightIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./HighlightIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/HomeIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./HomeIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/IndeterminateQuestionBoxIcon/IndeterminateQuestionBoxIcon.tsx: -------------------------------------------------------------------------------- 1 | import { memo } from "react"; 2 | import type { FC } from "react"; 3 | import type { TIconProps } from "../types"; 4 | 5 | const Component: FC = ({ height = 24, width = 24, ...props }) => ( 6 | 14 | 15 | 16 | ); 17 | 18 | export const IndeterminateQuestionBoxIcon = memo(Component); 19 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/IndeterminateQuestionBoxIcon/index.ts: -------------------------------------------------------------------------------- 1 | import { IndeterminateQuestionBoxIcon } from "./IndeterminateQuestionBoxIcon"; 2 | 3 | export { IndeterminateQuestionBoxIcon }; 4 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/LandscapeIcon/LandscapeIcon.tsx: -------------------------------------------------------------------------------- 1 | import { memo } from "react"; 2 | import type { FC } from "react"; 3 | import type { TIconProps } from "../types"; 4 | 5 | const Component: FC = ({ height = 24, width = 24, ...props }) => ( 6 | 14 | 15 | 16 | ); 17 | 18 | export const LandscapeIcon = memo(Component); 19 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/LandscapeIcon/index.ts: -------------------------------------------------------------------------------- 1 | import { LandscapeIcon } from "./LandscapeIcon"; 2 | 3 | export { LandscapeIcon }; 4 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/LightModeIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./LightModeIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/LocationIcon/LocationIcon.tsx: -------------------------------------------------------------------------------- 1 | import { memo } from "react"; 2 | import type { FC } from "react"; 3 | import type { TIconProps } from "../types"; 4 | 5 | const Component: FC = ({ height = 24, width = 24, ...props }) => ( 6 | 14 | 15 | 16 | ); 17 | 18 | export const LocationIcon = memo(Component); 19 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/LocationIcon/index.ts: -------------------------------------------------------------------------------- 1 | import { LocationIcon } from "./LocationIcon"; 2 | 3 | export { LocationIcon }; 4 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/MinusIcon/MinusIcon.tsx: -------------------------------------------------------------------------------- 1 | import { memo } from "react"; 2 | import type { FC } from "react"; 3 | import type { TIconProps } from "../types"; 4 | 5 | const Component: FC = ({ height = 24, width = 24, ...props }) => ( 6 | 19 | 20 | 21 | ); 22 | 23 | export const MinusIcon = memo(Component); 24 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/MinusIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./MinusIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/OLIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./OLIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/PlusIcon/PlusIcon.tsx: -------------------------------------------------------------------------------- 1 | import { memo } from "react"; 2 | import type { FC } from "react"; 3 | import type { TIconProps } from "../types"; 4 | 5 | const Component: FC = ({ height = 24, width = 24, ...props }) => ( 6 | 19 | 23 | 24 | ); 25 | 26 | export const PlusIcon = memo(Component); 27 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/PlusIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./PlusIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/RiverIcon/index.ts: -------------------------------------------------------------------------------- 1 | import { RiverIcon } from "./RiverIcon"; 2 | 3 | export { RiverIcon }; 4 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/SearchIcon/SearchIcon.tsx: -------------------------------------------------------------------------------- 1 | import { memo } from "react"; 2 | import type { FC } from "react"; 3 | import type { TIconProps } from "../types"; 4 | 5 | const Component: FC = ({ height = 24, width = 24, ...props }) => ( 6 | 19 | 20 | 21 | 26 | 27 | 28 | 29 | ); 30 | 31 | export const SearchIcon = memo(Component); 32 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/SearchIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./SearchIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/SettingsIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./SettingsIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/SignpostIcon/SignpostIcon.tsx: -------------------------------------------------------------------------------- 1 | import { memo } from "react"; 2 | import type { FC } from "react"; 3 | import type { TIconProps } from "../types"; 4 | 5 | const Component: FC = ({ height = 24, width = 24, ...props }) => ( 6 | 14 | 15 | 16 | ); 17 | 18 | export const SignpostIcon = memo(Component); 19 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/SignpostIcon/index.ts: -------------------------------------------------------------------------------- 1 | import { SignpostIcon } from "./SignpostIcon"; 2 | 3 | export { SignpostIcon }; 4 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/SortDownIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./SortDownIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/SortUpIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./SortUpIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/SortingIcon/SortingIcon.tsx: -------------------------------------------------------------------------------- 1 | import { memo } from "react"; 2 | import type { FC } from "react"; 3 | import type { TIconProps } from "../types"; 4 | 5 | const IconComponent: FC = ({ height = 24, width = 24, ...props }) => ( 6 | 14 | 15 | 16 | ); 17 | 18 | export const SortingIcon = memo(IconComponent); 19 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/SortingIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./SortingIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/SpinnerIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./SpinnerIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/SuccessIcon/SuccessIcon.tsx: -------------------------------------------------------------------------------- 1 | import { memo } from "react"; 2 | import type { FC } from "react"; 3 | import type { TIconProps } from "../types"; 4 | 5 | export const SuccessIconComponent: FC = ({ height = 24, width = 24, ...props }) => { 6 | return ( 7 | 15 | 19 | 20 | ); 21 | }; 22 | 23 | export const SuccessIcon = memo(SuccessIconComponent); 24 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/SuccessIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./SuccessIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/TargetIcon/TargetIcon.tsx: -------------------------------------------------------------------------------- 1 | import { memo } from "react"; 2 | import type { FC } from "react"; 3 | import type { TIconProps } from "../types"; 4 | 5 | const Component: FC = ({ height = 24, width = 24, ...props }) => ( 6 | 14 | 15 | 16 | ); 17 | export const TargetIcon = memo(Component); 18 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/TargetIcon/index.ts: -------------------------------------------------------------------------------- 1 | import { TargetIcon } from "./TargetIcon"; 2 | 3 | export { TargetIcon }; 4 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/TelegramIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./TelegramIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/ULIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./ULIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/UnderlineIcon/UnderlineIcon.tsx: -------------------------------------------------------------------------------- 1 | import { memo } from "react"; 2 | import type { FC } from "react"; 3 | import type { TIconProps } from "../types"; 4 | 5 | const IconComponent: FC = ({ height = 24, width = 24, ...props }) => { 6 | return ( 7 | 15 | 19 | 20 | 21 | ); 22 | }; 23 | 24 | export const UnderlineIcon = memo(IconComponent); 25 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/UnderlineIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./UnderlineIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/VisibilityIcon/VisibilityIcon.tsx: -------------------------------------------------------------------------------- 1 | import { memo } from "react"; 2 | import type { FC } from "react"; 3 | import type { TIconProps } from "../types"; 4 | 5 | const Component: FC = ({ height = 24, width = 24, ...props }) => ( 6 | 13 | 14 | 15 | 16 | ); 17 | 18 | export const VisibilityIcon = memo(Component); 19 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/VisibilityIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./VisibilityIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/VisibilityOffIcon/VisibilityOffIcon.tsx: -------------------------------------------------------------------------------- 1 | import { memo } from "react"; 2 | import type { FC } from "react"; 3 | import type { TIconProps } from "../types"; 4 | 5 | const Component: FC = ({ height = 24, width = 24, ...props }) => ( 6 | 14 | 15 | 16 | 17 | ); 18 | 19 | export const VisibilityOffIcon = memo(Component); 20 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/VisibilityOffIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./VisibilityOffIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/types.ts: -------------------------------------------------------------------------------- 1 | import type { SVGProps } from "react"; 2 | 3 | export type TIconProps = SVGProps; 4 | -------------------------------------------------------------------------------- /src/uikit/components/Accordion/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Accordion"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Accordion/types.ts: -------------------------------------------------------------------------------- 1 | import type { PropsWithChildren } from "react"; 2 | 3 | export type TAccordionProps = { 4 | className?: string; 5 | dataTestId?: string; 6 | isActive?: boolean; 7 | title?: string; 8 | } & PropsWithChildren; 9 | -------------------------------------------------------------------------------- /src/uikit/components/Alert/Alert.tsx: -------------------------------------------------------------------------------- 1 | import { memo, type FC } from "react"; 2 | 3 | import type { TAlertProps } from "./types"; 4 | 5 | const AlertComponent: FC = ({ 6 | className, 7 | dataTestId = "uikit__alert", 8 | description, 9 | title, 10 | }) => { 11 | return ( 12 |
13 |
{title}
14 |
{description}
15 |
16 | ); 17 | }; 18 | 19 | AlertComponent.displayName = "Alert"; 20 | 21 | export const Alert = memo(AlertComponent); 22 | -------------------------------------------------------------------------------- /src/uikit/components/Alert/enums.ts: -------------------------------------------------------------------------------- 1 | export enum EAlert { 2 | Error = "Error", 3 | Success = "Success", 4 | Warning = "Warning", 5 | } 6 | -------------------------------------------------------------------------------- /src/uikit/components/Alert/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Alert"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Alert/types.ts: -------------------------------------------------------------------------------- 1 | import { EAlert } from "./enums"; 2 | 3 | export type TAlertProps = { 4 | className?: string; 5 | dataTestId?: string; 6 | description?: string; 7 | title?: string; 8 | type?: EAlert; 9 | onClose?: () => void; 10 | }; 11 | -------------------------------------------------------------------------------- /src/uikit/components/Autocomplete/Autocomplete.tsx: -------------------------------------------------------------------------------- 1 | import { type FC, memo } from "react"; 2 | 3 | import { AsyncSelect } from "uikit"; 4 | 5 | import type { TAutocompleteProps } from "./types"; 6 | 7 | const AutocompleteComponent: FC = (props) => { 8 | return ; 9 | }; 10 | 11 | AutocompleteComponent.displayName = "Autocomplete"; 12 | 13 | export const Autocomplete = memo(AutocompleteComponent); 14 | -------------------------------------------------------------------------------- /src/uikit/components/Autocomplete/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Autocomplete"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Autocomplete/types.ts: -------------------------------------------------------------------------------- 1 | import type { TAsyncSelectProps } from "uikit"; 2 | 3 | export type TAutocompleteProps = TAsyncSelectProps; 4 | -------------------------------------------------------------------------------- /src/uikit/components/Avatar/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Avatar"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Avatar/types.ts: -------------------------------------------------------------------------------- 1 | import type { MouseEvent } from "react"; 2 | 3 | export type TAvatarProps = { 4 | className?: string; 5 | classNameSmallCircle?: string; 6 | dataTestId?: string; 7 | image?: string; 8 | onClick?: (event: MouseEvent) => void; 9 | size?: number; 10 | title?: string; 11 | }; 12 | -------------------------------------------------------------------------------- /src/uikit/components/Breadcrumbs/Breadcrumbs.scss: -------------------------------------------------------------------------------- 1 | .Breadcrumbs { 2 | display: flex; 3 | align-items: center; 4 | } 5 | -------------------------------------------------------------------------------- /src/uikit/components/Breadcrumbs/Crumb/Crumb.scss: -------------------------------------------------------------------------------- 1 | @import "../../../../styles/index"; 2 | 3 | $transition: all 0.15s; 4 | 5 | .Crumb { 6 | display: flex; 7 | align-items: center; 8 | color: $color-text; 9 | 10 | &-Link { 11 | display: flex; 12 | align-items: center; 13 | color: $color-text; 14 | cursor: pointer; 15 | transition: $transition; 16 | 17 | &:hover { 18 | color: $color-primary; 19 | 20 | svg { 21 | fill: $color-primary; 22 | } 23 | } 24 | } 25 | 26 | &-Icon { 27 | &__arrow { 28 | margin: 0 20px; 29 | height: 10px; 30 | width: 5px; 31 | 32 | svg { 33 | fill: #919191; 34 | transition: $transition; 35 | } 36 | } 37 | 38 | &__home { 39 | svg { 40 | fill: #919191; 41 | transition: $transition; 42 | } 43 | } 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/uikit/components/Breadcrumbs/Crumb/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Crumb"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Breadcrumbs/Crumb/types.ts: -------------------------------------------------------------------------------- 1 | import type { ReactNode } from "react"; 2 | import type { BreadcrumbMatch } from "use-react-router-breadcrumbs"; 3 | 4 | export type TCrumbProps = { 5 | breadcrumb: ReactNode; 6 | className?: string; 7 | isFirstCrumb: boolean; 8 | isLastCrumb: boolean; 9 | isShowArrow: boolean; 10 | match: BreadcrumbMatch; 11 | }; 12 | -------------------------------------------------------------------------------- /src/uikit/components/Breadcrumbs/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Breadcrumbs"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Breadcrumbs/types.ts: -------------------------------------------------------------------------------- 1 | export type TBreadcrumbsProps = { 2 | dataTestId?: string; 3 | }; 4 | -------------------------------------------------------------------------------- /src/uikit/components/Button/Button.scss: -------------------------------------------------------------------------------- 1 | @import "../../../styles/index"; 2 | 3 | .Button { 4 | $this: &; 5 | display: inline-flex; 6 | align-items: center; 7 | justify-content: center; 8 | padding: 10px 30px; 9 | height: max-content; 10 | width: max-content; 11 | color: white; 12 | background-color: $color-primary; 13 | border: 1px solid $color-primary; 14 | outline: transparent; 15 | transition: all 0.3s; 16 | cursor: pointer; 17 | 18 | &-Text { 19 | margin-left: 12px; 20 | } 21 | 22 | &:hover { 23 | background-color: $color-primary-hover; 24 | } 25 | 26 | &#{$this}__isActive { 27 | background-color: $color-mercury-gray; 28 | 29 | &:hover { 30 | background-color: $color-mercury-gray; 31 | } 32 | } 33 | 34 | &#{$this}__isDisabled { 35 | color: $color-disabled; 36 | background-color: $color-disabled-secondary; 37 | border-color: $color-disabled-secondary; 38 | cursor: default; 39 | 40 | &:hover { 41 | color: $color-disabled; 42 | background-color: $color-disabled-secondary; 43 | border-color: $color-disabled-secondary; 44 | } 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/uikit/components/Button/Button.tsx: -------------------------------------------------------------------------------- 1 | import clsx from "clsx"; 2 | import { memo, type FC } from "react"; 3 | 4 | import { Icon } from "uikit"; 5 | 6 | import type { IButtonProps } from "./types"; 7 | import "./Button.scss"; 8 | 9 | const ButtonComponent: FC = ({ 10 | className, 11 | children, 12 | dataTestId = "uikit__button", 13 | isActive = false, 14 | isDisabled = false, 15 | onClick, 16 | type = "button", 17 | typeIcon, 18 | ...rest 19 | }) => { 20 | return ( 21 | 35 | ); 36 | }; 37 | 38 | ButtonComponent.displayName = "Button"; 39 | 40 | export const Button = memo(ButtonComponent); 41 | -------------------------------------------------------------------------------- /src/uikit/components/Button/IconButton/IconButton.scss: -------------------------------------------------------------------------------- 1 | @import "../../../../styles/index"; 2 | 3 | .IconButton { 4 | padding: 0; 5 | background-color: transparent; 6 | border: 0; 7 | box-shadow: none; 8 | color: inherit; 9 | transition: all 0.15s; 10 | 11 | &::before { 12 | height: 0; 13 | width: 0; 14 | } 15 | 16 | & svg { 17 | fill: $color-primary; 18 | transition: all 0.15s; 19 | } 20 | 21 | & path { 22 | fill: $color-primary; 23 | transition: all 0.15s; 24 | } 25 | 26 | &:hover { 27 | background-color: transparent; 28 | 29 | svg { 30 | fill: $color-primary-hover; 31 | } 32 | 33 | path { 34 | fill: $color-primary-hover; 35 | } 36 | } 37 | 38 | &.Button__disabled { 39 | background-color: white; 40 | 41 | svg { 42 | fill: $color-disabled; 43 | } 44 | 45 | path { 46 | fill: $color-disabled; 47 | } 48 | 49 | &:hover { 50 | background-color: white; 51 | } 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /src/uikit/components/Button/IconButton/IconButton.tsx: -------------------------------------------------------------------------------- 1 | import clsx from "clsx"; 2 | import { memo, type FC } from "react"; 3 | 4 | import { Button, Icon } from "uikit"; 5 | 6 | import type { IIconButtonProps } from "./types"; 7 | import "./IconButton.scss"; 8 | 9 | const IconButtonComponent: FC = ({ 10 | className, 11 | isActive = false, 12 | isDisabled = false, 13 | onClick, 14 | typeIcon, 15 | ...rest 16 | }) => { 17 | return ( 18 | 28 | ); 29 | }; 30 | 31 | IconButtonComponent.displayName = "IconButton"; 32 | 33 | export const IconButton = memo(IconButtonComponent); 34 | -------------------------------------------------------------------------------- /src/uikit/components/Button/IconButton/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./IconButton"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Button/IconButton/types.ts: -------------------------------------------------------------------------------- 1 | import type { MouseEvent } from "react"; 2 | import type { IconType } from "uikit"; 3 | import type { IButtonProps } from "../types"; 4 | 5 | export interface IIconButtonProps extends IButtonProps { 6 | className?: string; 7 | isActive?: boolean; 8 | isDisabled?: boolean; 9 | onClick?: (event: MouseEvent) => void; 10 | typeIcon: IconType; 11 | } 12 | -------------------------------------------------------------------------------- /src/uikit/components/Button/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Button"; 2 | export * from "./IconButton"; 3 | -------------------------------------------------------------------------------- /src/uikit/components/Button/types.ts: -------------------------------------------------------------------------------- 1 | import type { ButtonHTMLAttributes, DetailedHTMLProps, MouseEvent } from "react"; 2 | import type { IconType } from "uikit"; 3 | 4 | export type TButton = "button" | "reset" | "submit"; 5 | 6 | export interface IButtonProps 7 | extends DetailedHTMLProps, HTMLButtonElement> { 8 | className?: string; 9 | dataTestId?: string; 10 | isActive?: boolean; 11 | isDisabled?: boolean; 12 | onClick?: (event: MouseEvent) => void; 13 | type?: TButton; 14 | typeIcon?: IconType; 15 | } 16 | -------------------------------------------------------------------------------- /src/uikit/components/Checkbox/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Checkbox"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Checkbox/types.ts: -------------------------------------------------------------------------------- 1 | import type { ChangeEvent, ReactNode } from "react"; 2 | 3 | export type TCheckboxProps = { 4 | checked?: boolean; 5 | children?: ReactNode; 6 | className?: string; 7 | dataTestId?: string; 8 | defaultChecked?: boolean; 9 | id: string; 10 | label: string; 11 | name: string; 12 | nameGroup: string; 13 | onChange?: (event: ChangeEvent, id: string, nameGroup: string) => void; 14 | }; 15 | -------------------------------------------------------------------------------- /src/uikit/components/ClientOnly/ClientOnly.tsx: -------------------------------------------------------------------------------- 1 | import type { FC } from "react"; 2 | 3 | import { useHydrated } from "uikit"; 4 | 5 | import type { TClientOnlyProps } from "./types"; 6 | 7 | export const ClientOnly: FC = ({ children, fallback = null }) => { 8 | return useHydrated() ? <>{children()} : <>{fallback}; 9 | }; 10 | -------------------------------------------------------------------------------- /src/uikit/components/ClientOnly/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./ClientOnly"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/ClientOnly/types.ts: -------------------------------------------------------------------------------- 1 | import type { ReactNode } from "react"; 2 | 3 | export type TClientOnlyProps = { 4 | children(): ReactNode; 5 | fallback?: ReactNode; 6 | }; 7 | -------------------------------------------------------------------------------- /src/uikit/components/CopyToClipboard/CopyToClipboard.scss: -------------------------------------------------------------------------------- 1 | @import "../../../styles/index"; 2 | 3 | .CopyToClipboard { 4 | &-Icon { 5 | margin-left: 8px; 6 | cursor: pointer; 7 | 8 | svg, 9 | path { 10 | transition: all $transition; 11 | } 12 | 13 | &:hover { 14 | svg { 15 | fill: $color-primary; 16 | } 17 | } 18 | 19 | &__success { 20 | margin-left: 8px; 21 | 22 | path { 23 | fill: limegreen; 24 | } 25 | } 26 | } 27 | } 28 | 29 | .Tooltip-PoperElement.CopyToClipboard-Tooltip-PopperElement { 30 | max-width: max-content; 31 | } 32 | -------------------------------------------------------------------------------- /src/uikit/components/CopyToClipboard/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./CopyToClipboard"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/CopyToClipboard/types.ts: -------------------------------------------------------------------------------- 1 | import type { TPlacement } from "uikit/components/Tooltip"; 2 | 3 | type TCopyToClipboardElement = { 4 | copyIcon?: string; 5 | }; 6 | 7 | export type TCopyToClipboardClasses = Partial; 8 | 9 | type TCopyToClipboardTooltipElement = { 10 | message?: string; 11 | placement?: TPlacement; 12 | }; 13 | 14 | export type TCopyToClipboardTooltip = Partial; 15 | 16 | export type TCopyToClipboardProps = { 17 | classes?: TCopyToClipboardClasses; 18 | className?: string; 19 | dataTestId?: string; 20 | timerDelay?: number; 21 | tooltip?: TCopyToClipboardTooltip; 22 | value: string; 23 | }; 24 | -------------------------------------------------------------------------------- /src/uikit/components/DatePicker/Calendar/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Calendar"; 2 | export * from "./types"; 3 | -------------------------------------------------------------------------------- /src/uikit/components/DatePicker/Calendar/types.ts: -------------------------------------------------------------------------------- 1 | import type { CalendarProps } from "react-calendar"; 2 | 3 | type TCalendarValuePiece = Date | null; 4 | 5 | export type TCalendarValue = TCalendarValuePiece | [TCalendarValuePiece, TCalendarValuePiece]; 6 | 7 | export type TCalendarProps = { 8 | locale?: string; 9 | maxDate?: Date; 10 | minDate?: Date; 11 | onChange?: (date: Date) => void; 12 | value?: TCalendarValue; 13 | } & CalendarProps; 14 | -------------------------------------------------------------------------------- /src/uikit/components/DatePicker/DatePicker/DatePicker.tsx: -------------------------------------------------------------------------------- 1 | import { memo, type FC } from "react"; 2 | import { Calendar } from "react-date-range"; 3 | import "react-date-range/dist/styles.css"; 4 | import "react-date-range/dist/theme/default.css"; 5 | 6 | import type { TDatePickerProps } from "./types"; 7 | 8 | const DatePickerComponent: FC = (props) => { 9 | const { locale, onChange, value } = props; 10 | 11 | return ; 12 | }; 13 | 14 | DatePickerComponent.displayName = "DatePicker"; 15 | 16 | export const DatePicker = memo(DatePickerComponent); 17 | -------------------------------------------------------------------------------- /src/uikit/components/DatePicker/DatePicker/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./DatePicker"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/DatePicker/DatePicker/types.ts: -------------------------------------------------------------------------------- 1 | import type { CalendarProps } from "react-date-range"; 2 | 3 | export type TDatePickerProps = { 4 | locale?: Locale; 5 | maxDate?: Date; 6 | minDate?: Date; 7 | onChange?: (date: Date) => void; 8 | value?: Date; 9 | } & CalendarProps; 10 | -------------------------------------------------------------------------------- /src/uikit/components/DatePicker/DateRangePicker/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./DateRangePicker"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/DatePicker/DateRangePicker/types.ts: -------------------------------------------------------------------------------- 1 | import type { DateRangeProps, Range, RangeKeyDict } from "react-date-range"; 2 | 3 | export type TDateRangePickerProps = { 4 | editableDateInputs?: boolean; 5 | locale?: Locale; 6 | onChange?: ((rangesByKey: RangeKeyDict) => void) | undefined; 7 | ranges?: Range[] | undefined; 8 | scroll?: boolean; 9 | showDateDisplay?: boolean; 10 | showMonthAndYearPickers?: boolean; 11 | showPreview?: boolean; 12 | } & DateRangeProps; 13 | -------------------------------------------------------------------------------- /src/uikit/components/DatePicker/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Calendar"; 2 | export * from "./DatePicker"; 3 | export * from "./DateRangePicker"; 4 | -------------------------------------------------------------------------------- /src/uikit/components/DocumentViewer/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./DocumentViewer"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/DocumentViewer/types.ts: -------------------------------------------------------------------------------- 1 | export type TDocumentViewerProps = { 2 | className?: string; 3 | dataTestId?: string; 4 | step?: number; 5 | template?: string; 6 | }; 7 | -------------------------------------------------------------------------------- /src/uikit/components/DropDown/DropDown.scss: -------------------------------------------------------------------------------- 1 | @import "../../../styles/index"; 2 | 3 | /* ----- Открытие/закрытие DropDown ----- */ 4 | $positionDropDown: -500px; 5 | $transition: 0.15s; 6 | 7 | .DropDown { 8 | position: relative; 9 | 10 | &-Panel { 11 | content: ""; 12 | position: absolute; 13 | bottom: -165px; 14 | margin-left: auto; 15 | margin-right: auto; 16 | left: 0; 17 | right: 0; 18 | height: max-content; 19 | width: max-content; 20 | background-color: white; 21 | border: 1px solid transparent; 22 | border-radius: 4px; 23 | box-shadow: $shadow-perimeter; 24 | z-index: 103; 25 | 26 | &.enter { 27 | opacity: 0; 28 | } 29 | 30 | &.enter-active { 31 | opacity: 1; 32 | transition: opacity $transition; 33 | } 34 | 35 | &.exit { 36 | opacity: 1; 37 | transition: opacity $transition; 38 | } 39 | 40 | &.exit-active { 41 | opacity: 0; 42 | transition: opacity $transition; 43 | } 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/uikit/components/DropDown/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./DropDown"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/DropDown/types.ts: -------------------------------------------------------------------------------- 1 | import type { ReactNode } from "react"; 2 | 3 | export type TDropDownClasses = { 4 | dropDown?: string; 5 | dropDownPanel?: string; 6 | dropDownButton?: string; 7 | }; 8 | 9 | export type TDropDownProps = { 10 | children?: ReactNode; 11 | classes?: TDropDownClasses; 12 | dataTestId?: string; 13 | }; 14 | 15 | export type TDropDownButtonProps = { 16 | children?: ReactNode; 17 | classes?: TDropDownClasses; 18 | }; 19 | 20 | export type TDropDownPanelProps = { 21 | children?: ReactNode; 22 | classes?: TDropDownClasses; 23 | transition?: number; 24 | }; 25 | -------------------------------------------------------------------------------- /src/uikit/components/Error/Error.css: -------------------------------------------------------------------------------- 1 | /* #b0976a */ 2 | /* #997e4d */ 3 | /* #efeae1 */ 4 | /* #dfd5c3 */ 5 | /* #333333 */ 6 | /* #b0976a */ 7 | /* #bab9b9 */ 8 | /* #bab9b9 */ 9 | /* #efeae1 */ 10 | /* #dfd5c3 */ 11 | /* #414B5A */ 12 | /* #b3b3b3 */ 13 | /* #fff */ 14 | /* #000 */ 15 | /* #18181f */ 16 | /* #1f2029 */ 17 | /* #232838 */ 18 | /* #8a8fa0 */ 19 | /* #b0976a */ 20 | /* #997e4d */ 21 | /* #dfd3c3 */ 22 | /* #e31235 */ 23 | /* #fbe4e3 */ 24 | /* #FADBDA */ 25 | /* #e5e5e5 */ 26 | /* #B9B5B5 */ 27 | /* #8e8e93 */ 28 | /* #e4e4e4 */ 29 | /* #ebebeb */ 30 | /* #e8e8e8 */ 31 | /* #dedede */ 32 | /* #999999 */ 33 | /* #f0ad4e */ 34 | /* #ffd25d */ 35 | /* #c1c712 */ 36 | /* #2fb457 */ 37 | /* #8cb400 */ 38 | /* #008dd3 */ 39 | /* #0044BB */ 40 | .ErrorUI { 41 | position: relative; 42 | background-color: transparent; 43 | } 44 | .ErrorUI-content { 45 | display: flex; 46 | flex-direction: column; 47 | color: rgb(227, 18, 53); 48 | } 49 | .ErrorUI-content__list-disc { 50 | list-style: disc; 51 | } 52 | .ErrorUI-content__list-none { 53 | list-style: none; 54 | } 55 | 56 | /*# sourceMappingURL=Error.css.map */ 57 | -------------------------------------------------------------------------------- /src/uikit/components/Error/Error.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["../../../styles/colors.scss","Error.scss"],"names":[],"mappings":"AAAwC;AACG;AACG;AACM;AAElB;AACU;AACH;AACM;AACN;AACM;AACZ;AACM;AAEH;AAGN;AACG;AACG;AACA;AACG;AAEH;AACG;AACG;AAEV;AACQ;AACM;AAEX;AACK;AACA;AACC;AACD;AACG;AACN;AAEI;AAEL;AACM;AACA;AAER;AACM;AAEP;AACI;AC/CvC;EACE;EACA;;AAEA;EACE;EACA;EACA,ODkBQ;;AChBR;EACE;;AAGF;EACE","file":"Error.css"} -------------------------------------------------------------------------------- /src/uikit/components/Error/Error.scss: -------------------------------------------------------------------------------- 1 | @import "../../../styles/index"; 2 | 3 | .ErrorUI { 4 | position: relative; 5 | background-color: transparent; 6 | 7 | &-content { 8 | display: flex; 9 | flex-direction: column; 10 | color: $color-red; 11 | 12 | &__list-disc { 13 | list-style: disc; 14 | } 15 | 16 | &__list-none { 17 | list-style: none; 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/uikit/components/Error/enums.ts: -------------------------------------------------------------------------------- 1 | export enum EErrorTheme { 2 | Error = "error", 3 | Info = "info", 4 | } 5 | -------------------------------------------------------------------------------- /src/uikit/components/Error/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Error"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Error/types.ts: -------------------------------------------------------------------------------- 1 | import type * as React from "react"; 2 | import type { EErrorTheme } from "./enums"; 3 | 4 | export type TError = { 5 | id?: string; 6 | title: React.ReactNode | React.ReactNode[]; 7 | }; 8 | 9 | export type TErrorTheme = `${EErrorTheme}`; 10 | 11 | export type TErrorProps = JSX.IntrinsicElements["div"] & { 12 | dataTestId?: string; 13 | errors?: TError[]; 14 | theme?: TErrorTheme; 15 | }; 16 | -------------------------------------------------------------------------------- /src/uikit/components/FadeIn/FadeIn.scss: -------------------------------------------------------------------------------- 1 | [date-fade="false"] { 2 | opacity: 0; 3 | } 4 | 5 | [date-fade="true"] { 6 | transition: opacity 300ms ease; 7 | opacity: 1; 8 | } 9 | -------------------------------------------------------------------------------- /src/uikit/components/FadeIn/FadeIn.tsx: -------------------------------------------------------------------------------- 1 | import { memo, useEffect, useState, type FC } from "react"; 2 | 3 | import type { TFadeInProps } from "./types"; 4 | import "./FadeIn.scss"; 5 | 6 | const FadeInComponent: FC = ({ children, dataTestId = "uikit__fadeIn" }) => { 7 | const [isMounted, setIsMounted] = useState(false); 8 | 9 | useEffect(() => { 10 | const id = setTimeout(() => { 11 | setIsMounted(true); 12 | }, 10); 13 | return () => clearTimeout(id); 14 | }, []); 15 | 16 | return ( 17 | 18 | {children} 19 | 20 | ); 21 | }; 22 | 23 | FadeInComponent.displayName = "FadeIn"; 24 | 25 | export const FadeIn = memo(FadeInComponent); 26 | -------------------------------------------------------------------------------- /src/uikit/components/FadeIn/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./FadeIn"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/FadeIn/types.ts: -------------------------------------------------------------------------------- 1 | import type { ReactNode } from "react"; 2 | 3 | export type TFadeInProps = { 4 | children?: ReactNode; 5 | dataTestId?: string; 6 | }; 7 | -------------------------------------------------------------------------------- /src/uikit/components/Field/InputDateField/InputDateField.scss: -------------------------------------------------------------------------------- 1 | .InputDateField { 2 | height: inherit; 3 | } 4 | -------------------------------------------------------------------------------- /src/uikit/components/Field/InputDateField/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./InputDateField"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Field/InputDateField/types.ts: -------------------------------------------------------------------------------- 1 | import type { SyntheticEvent } from "react"; 2 | 3 | type TClasses = { 4 | inputDateField?: string; 5 | }; 6 | 7 | export type TInputDateFieldProps = { 8 | classes?: TClasses; 9 | isDisabled?: boolean; 10 | isInvalid?: boolean; 11 | locale?: Locale; 12 | maxDate?: Date | null; 13 | minDate?: Date | null; 14 | onChange: (value: Date | null) => void; 15 | onFieldClear?: (event: SyntheticEvent) => void; 16 | placeholder?: string; 17 | subTitle?: string; 18 | title?: string; 19 | value: Date | null; 20 | }; 21 | -------------------------------------------------------------------------------- /src/uikit/components/Field/InputDateRangeField/InputDateRangeField.scss: -------------------------------------------------------------------------------- 1 | .InputDateRangeField { 2 | display: flex; 3 | align-items: center; 4 | height: inherit; 5 | gap: 8px; 6 | margin-top: 8px; 7 | width: 100%; 8 | } 9 | -------------------------------------------------------------------------------- /src/uikit/components/Field/InputDateRangeField/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./InputDateRangeField"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Field/InputDateRangeField/types.ts: -------------------------------------------------------------------------------- 1 | type TClasses = { 2 | inputDateField?: string; 3 | }; 4 | 5 | type TPeriodValue = [Date | null, Date | null]; 6 | 7 | export type TInputDateRangeFieldProps = { 8 | classes?: TClasses; 9 | isDisabled?: [boolean, boolean]; 10 | isInvalid?: [boolean, boolean]; 11 | locale?: Locale; 12 | maxDateFrom?: Date | null; 13 | minDateTo?: Date | null; 14 | onChange: (periodValue: TPeriodValue) => void; 15 | onFieldClear?: (periodValue: TPeriodValue) => void; 16 | placeholder?: [string, string]; 17 | subTitle?: [string, string]; 18 | title?: [string, string]; 19 | value: TPeriodValue; 20 | }; 21 | -------------------------------------------------------------------------------- /src/uikit/components/Field/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./InputDateField"; 2 | export * from "./InputDateRangeField"; 3 | -------------------------------------------------------------------------------- /src/uikit/components/Hamburger/Hamburger.tsx: -------------------------------------------------------------------------------- 1 | import clsx from "clsx"; 2 | import { memo, type FC } from "react"; 3 | 4 | import { EHamburgerColor } from "./enums"; 5 | import type { THamburgerProps } from "./types"; 6 | import "./Hamburger.scss"; 7 | 8 | const HamburgerComponent: FC = ({ 9 | className, 10 | color = EHamburgerColor.BLACK, 11 | dataTestId = "uikit__hamburger", 12 | isActive = false, 13 | onClick, 14 | }) => { 15 | return ( 16 |
17 |
24 |
25 | ); 26 | }; 27 | 28 | HamburgerComponent.displayName = "Hamburger"; 29 | 30 | export const Hamburger = memo(HamburgerComponent); 31 | -------------------------------------------------------------------------------- /src/uikit/components/Hamburger/enums.ts: -------------------------------------------------------------------------------- 1 | export enum EHamburgerColor { 2 | BLACK = "black", 3 | WHITE = "white", 4 | } 5 | -------------------------------------------------------------------------------- /src/uikit/components/Hamburger/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Hamburger"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Hamburger/types.ts: -------------------------------------------------------------------------------- 1 | import type { MouseEvent } from "react"; 2 | 3 | type TColor = "black" | "white"; 4 | 5 | export type THamburgerProps = { 6 | className?: string; 7 | color?: TColor; 8 | dataTestId?: string; 9 | isActive?: boolean; 10 | onClick?: (event: MouseEvent) => void; 11 | }; 12 | -------------------------------------------------------------------------------- /src/uikit/components/Icon/Icon.scss: -------------------------------------------------------------------------------- 1 | .Icon { 2 | display: inline-flex; 3 | align-items: center; 4 | text-align: center; 5 | 6 | svg { 7 | display: inline-block; 8 | width: 100%; 9 | height: max-content; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/uikit/components/Icon/index.ts: -------------------------------------------------------------------------------- 1 | export { Icon as default } from "./Icon"; 2 | export * from "./Icon"; 3 | -------------------------------------------------------------------------------- /src/uikit/components/Icon/types.ts: -------------------------------------------------------------------------------- 1 | import type { ETextColor } from "uikit"; 2 | import type { DOMAttributes } from "react"; 3 | import type { IconType } from "./IconType"; 4 | 5 | export type TColor = `${ETextColor}` | "inherit"; 6 | 7 | export interface IIconProps extends DOMAttributes { 8 | className?: string; 9 | color?: TColor; 10 | dataTestId?: string; 11 | height?: number; 12 | size?: number; 13 | type: IconType; 14 | width?: number; 15 | } 16 | -------------------------------------------------------------------------------- /src/uikit/components/Input/Input/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Input"; 2 | export * from "./types"; 3 | -------------------------------------------------------------------------------- /src/uikit/components/Input/Input/types.ts: -------------------------------------------------------------------------------- 1 | import type { DetailedHTMLProps, HTMLAttributes } from "react"; 2 | 3 | export interface IInputProps 4 | extends DetailedHTMLProps, HTMLInputElement> { 5 | autoComplete?: string; 6 | className?: string; 7 | dataTestId?: string; 8 | error?: string; 9 | hidden?: boolean; 10 | isDisabled?: boolean; 11 | isFocused?: boolean; 12 | isReadOnly?: boolean; 13 | isRequired?: boolean; 14 | label?: string; 15 | name?: string; 16 | type?: string; 17 | value?: string | number | readonly string[] | undefined; 18 | } 19 | -------------------------------------------------------------------------------- /src/uikit/components/Input/InputDate/Close.svg: -------------------------------------------------------------------------------- 1 | 7 | 11 | -------------------------------------------------------------------------------- /src/uikit/components/Input/InputDate/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./InputDate"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Input/InputDate/types.ts: -------------------------------------------------------------------------------- 1 | import type { SyntheticEvent } from "react"; 2 | 3 | export type TInputDateProps = { 4 | className?: string; 5 | isDisabled?: boolean; 6 | isInvalid?: boolean; 7 | onClick?: (event: SyntheticEvent) => void; 8 | onFieldClear?: (event: SyntheticEvent) => void; 9 | placeholder?: string; 10 | subTitle?: string; 11 | title?: string; 12 | value?: string | null; 13 | }; 14 | -------------------------------------------------------------------------------- /src/uikit/components/Input/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Input"; 2 | export * from "./InputDate"; 3 | -------------------------------------------------------------------------------- /src/uikit/components/Map/OpenLayersMap/ControlsPanel/ControlsPanel.tsx: -------------------------------------------------------------------------------- 1 | import { type FC, memo } from "react"; 2 | import { Icon } from "uikit"; 3 | import "./ControlsPanel.scss"; 4 | 5 | type TProps = { 6 | onClick?: (type: "target") => void; 7 | }; 8 | 9 | const ControlsPanelComponent: FC = ({ onClick }) => { 10 | return ( 11 |
12 |
13 |
14 |
onClick?.("target")}> 15 | 16 |
17 |
18 |
19 |
20 | ); 21 | }; 22 | 23 | ControlsPanelComponent.displayName = "ControlsPanel"; 24 | 25 | export const ControlsPanel = memo(ControlsPanelComponent); 26 | -------------------------------------------------------------------------------- /src/uikit/components/Map/OpenLayersMap/ControlsPanel/index.ts: -------------------------------------------------------------------------------- 1 | import { ControlsPanel } from "./ControlsPanel"; 2 | 3 | export { ControlsPanel }; 4 | -------------------------------------------------------------------------------- /src/uikit/components/Map/OpenLayersMap/OpenLayersMap.scss: -------------------------------------------------------------------------------- 1 | .OpenLayersMap { 2 | &-Map { 3 | position: absolute; 4 | top: 0; 5 | bottom: 25px; 6 | left: 0; 7 | width: 100%; 8 | } 9 | 10 | &-Visible { 11 | position: relative; 12 | z-index: 1; 13 | } 14 | 15 | &-Coordinates-Container { 16 | position: absolute; 17 | bottom: 0; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/uikit/components/Map/OpenLayersMap/SearchPanel/index.ts: -------------------------------------------------------------------------------- 1 | import { SearchPanel } from "./SearchPanel"; 2 | 3 | export { SearchPanel }; 4 | -------------------------------------------------------------------------------- /src/uikit/components/Map/OpenLayersMap/SuggestedPlaces/SuggestedPlaces.scss: -------------------------------------------------------------------------------- 1 | @import "../../../../../styles/index"; 2 | 3 | .SuggestedPlaces { 4 | &-List { 5 | } 6 | 7 | &-ListItem { 8 | display: flex; 9 | align-items: center; 10 | min-height: 44px; 11 | cursor: pointer; 12 | padding: 8px; 13 | 14 | &:hover { 15 | background-color: $color-light-gray; 16 | } 17 | } 18 | 19 | &-ListItem-Icon { 20 | height: 24px; 21 | width: 24px; 22 | margin-right: 8px; 23 | } 24 | 25 | &-ListItem-Icon .Icon { 26 | height: 24px; 27 | width: 24px; 28 | } 29 | 30 | &-NotFound { 31 | min-height: 44px; 32 | padding: 8px 16px; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /src/uikit/components/Map/OpenLayersMap/SuggestedPlaces/index.ts: -------------------------------------------------------------------------------- 1 | import { SuggestedPlaces } from "./SuggestedPlaces"; 2 | 3 | export { SuggestedPlaces }; 4 | -------------------------------------------------------------------------------- /src/uikit/components/Map/OpenLayersMap/index.ts: -------------------------------------------------------------------------------- 1 | import { OpenLayersMap } from "./OpenLayersMap"; 2 | 3 | export { OpenLayersMap }; 4 | -------------------------------------------------------------------------------- /src/uikit/components/Map/OpenLayersMap/types.ts: -------------------------------------------------------------------------------- 1 | // Тип объекта ответа от сервиса Nominatim 2 | export type TNominatimItem = { 3 | addresstype?: string; // Тип адреса (например, "city") 4 | boundingbox?: [string, string, string, string]; // Границы местоположения (минимальная и максимальная широта и долгота) 5 | class?: string; // Категория (например, "place") 6 | display_name?: string; // Полное название места (например, "Москва, Россия") 7 | importance?: number; // Важность места 8 | lat?: string; // Широта в виде строки (например, "55.7558") 9 | lon?: string; // Долгота в виде строки (например, "37.6176") 10 | name?: string; // Название места (например, "Москва") 11 | osm_id?: number; // Идентификатор места в OpenStreetMap 12 | osm_type?: string; // Тип объекта в OpenStreetMap (например, "node") 13 | place_id?: number; // Идентификатор места в OpenStreetMap 14 | place_rank?: number; // Ранг места 15 | type: string; // Подкатегория (например, "city") 16 | }; 17 | -------------------------------------------------------------------------------- /src/uikit/components/Modal/hooks/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./useModalWindow"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Modal/hooks/useModalWindow.ts: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import type { Dispatch, SetStateAction } from "react"; 3 | 4 | export type TUseModalWindow = (args?: { defaultOpen?: boolean }) => { 5 | closeModal: () => void; 6 | isOpenModal: boolean; 7 | openModal: () => void; 8 | setIsOpenModal: Dispatch>; 9 | }; 10 | 11 | export const useModalWindow: TUseModalWindow = ({ defaultOpen = false } = {}) => { 12 | const [isOpenModal, setIsOpenModal] = useState(defaultOpen); 13 | 14 | const openModal = () => setIsOpenModal(true); 15 | const closeModal = () => setIsOpenModal(false); 16 | 17 | return { 18 | closeModal, 19 | isOpenModal, 20 | openModal, 21 | setIsOpenModal, 22 | }; 23 | }; 24 | -------------------------------------------------------------------------------- /src/uikit/components/Modal/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./hooks"; 2 | export * from "./Modal"; 3 | -------------------------------------------------------------------------------- /src/uikit/components/Modal/types.ts: -------------------------------------------------------------------------------- 1 | import type { ReactNode } from "react"; 2 | 3 | type IModalSize = "medium"; 4 | 5 | export type TModalProps = { 6 | children?: ReactNode; 7 | className?: string; 8 | dataTestId?: string; 9 | isOpen: boolean; 10 | onCloseModal: () => void; 11 | size?: IModalSize; 12 | }; 13 | 14 | export type TModalHeaderProps = { 15 | align?: "start" | "center" | "end"; 16 | children?: ReactNode; 17 | className?: string; 18 | }; 19 | 20 | export type TModalContentProps = { 21 | children?: ReactNode; 22 | className?: string; 23 | }; 24 | 25 | export type TModalFooterProps = { 26 | className?: string; 27 | children?: ReactNode; 28 | }; 29 | -------------------------------------------------------------------------------- /src/uikit/components/Overlay/Overlay.scss: -------------------------------------------------------------------------------- 1 | @import "../../../styles/index"; 2 | 3 | $opacity: 0.6; 4 | $transition: 0.3s; 5 | 6 | .Overlay { 7 | position: fixed; 8 | top: 0; 9 | bottom: 0; 10 | right: 0; 11 | left: 0; 12 | height: 100%; 13 | background-color: #000; 14 | opacity: $opacity; 15 | z-index: 100; 16 | visibility: visible; 17 | 18 | &.enter { 19 | background: transparent; 20 | opacity: 1; 21 | visibility: hidden; 22 | } 23 | 24 | &.enter-active { 25 | background-color: #000; 26 | opacity: $opacity; 27 | visibility: visible; 28 | transition: all $transition; 29 | } 30 | 31 | &.exit { 32 | background-color: #000; 33 | opacity: $opacity; 34 | visibility: visible; 35 | transition: all $transition; 36 | } 37 | 38 | &.exit-active { 39 | background: transparent; 40 | opacity: 1; 41 | visibility: hidden; 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/uikit/components/Overlay/Overlay.tsx: -------------------------------------------------------------------------------- 1 | import { memo, useRef, type FC } from "react"; 2 | import { CSSTransition } from "react-transition-group"; 3 | import clsx from "clsx"; 4 | 5 | import { TRANSITION } from "../../constants"; 6 | import type { TOverlayProps } from "./types"; 7 | import "./Overlay.scss"; 8 | 9 | const OverlayComponent: FC = ({ 10 | className, 11 | dataTestId = "uikit__overlay", 12 | isActive = false, 13 | onClick, 14 | timeout = TRANSITION, 15 | }) => { 16 | const nodeRef = useRef(null); 17 | 18 | return ( 19 | 28 |
29 | 30 | ); 31 | }; 32 | 33 | OverlayComponent.displayName = "Overlay"; 34 | 35 | export const Overlay = memo(OverlayComponent); 36 | -------------------------------------------------------------------------------- /src/uikit/components/Overlay/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Overlay"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Overlay/types.ts: -------------------------------------------------------------------------------- 1 | import type { MouseEvent } from "react"; 2 | 3 | export type TOverlayProps = { 4 | className?: string; 5 | dataTestId?: string; 6 | isActive?: boolean; 7 | onClick?: (event: MouseEvent) => void; 8 | timeout?: number; 9 | }; 10 | -------------------------------------------------------------------------------- /src/uikit/components/Pagination/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Pagination"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Pagination/types.ts: -------------------------------------------------------------------------------- 1 | import type { ETheme } from "../../enums"; 2 | 3 | export type TPaginationProps = { 4 | className?: string; 5 | dataTestId?: string; 6 | forcePage?: number; 7 | initialPage?: number; 8 | marginPagesDisplayed?: number; 9 | onChange: ({ selected }: { selected: number }) => void; 10 | pagesCount: number; 11 | pageRangeDisplayed?: number; 12 | theme?: ETheme; 13 | }; 14 | -------------------------------------------------------------------------------- /src/uikit/components/Popover/constants.ts: -------------------------------------------------------------------------------- 1 | export const POPOVER_WIDTH = 512; 2 | 3 | export const POPOVER_POSITION_STYLES = { 4 | left: "left", 5 | center: "center", 6 | right: "right", 7 | }; 8 | -------------------------------------------------------------------------------- /src/uikit/components/Popover/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./constants"; 2 | export * from "./types"; 3 | -------------------------------------------------------------------------------- /src/uikit/components/Popover/types.ts: -------------------------------------------------------------------------------- 1 | import type { ReactNode } from "react"; 2 | 3 | export type TPopoverPosition = "left" | "center" | "right"; 4 | 5 | export type TPopoverProps = { 6 | children?: ReactNode; 7 | trigger: ReactNode | ReactNode[]; 8 | position?: TPopoverPosition; 9 | }; 10 | -------------------------------------------------------------------------------- /src/uikit/components/Portal/Portal.tsx: -------------------------------------------------------------------------------- 1 | import clsx from "clsx"; 2 | import { memo, type FC } from "react"; 3 | import ReactDOM from "react-dom"; 4 | 5 | import type { TPortalProps } from "./types"; 6 | 7 | const PortalComponent: FC = ({ 8 | children, 9 | className, 10 | dataTestId = "uikit__portal", 11 | element: Element = "div", 12 | elementFindById, 13 | }) => { 14 | const root = document.getElementById(elementFindById); 15 | 16 | return root 17 | ? ReactDOM.createPortal( 18 | 19 | {children} 20 | , 21 | root, 22 | ) 23 | : null; 24 | }; 25 | 26 | PortalComponent.displayName = "Portal"; 27 | 28 | export const Portal = memo(PortalComponent); 29 | -------------------------------------------------------------------------------- /src/uikit/components/Portal/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Portal"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Portal/types.ts: -------------------------------------------------------------------------------- 1 | import type { ReactNode } from "react"; 2 | 3 | export type TPortalProps = { 4 | children?: ReactNode; 5 | className?: string; 6 | dataTestId?: string; 7 | element?: keyof JSX.IntrinsicElements; 8 | elementFindById: string; 9 | }; 10 | -------------------------------------------------------------------------------- /src/uikit/components/RadioButton/NativeRadioButton/NativeRadioButton.tsx: -------------------------------------------------------------------------------- 1 | import { type FC, memo } from "react"; 2 | import { DATA_TEST_ID } from "../constants"; 3 | import type { TNativeRadioButtonProps } from "./types"; 4 | 5 | const NativeRadioButtonComponent: FC = ({ 6 | checked, 7 | className, 8 | defaultValue, 9 | id, 10 | name, 11 | onChange, 12 | value, 13 | }) => { 14 | return ( 15 | 26 | ); 27 | }; 28 | 29 | NativeRadioButtonComponent.displayName = "NativeRadioButton"; 30 | 31 | export const NativeRadioButton = memo(NativeRadioButtonComponent); 32 | -------------------------------------------------------------------------------- /src/uikit/components/RadioButton/NativeRadioButton/index.ts: -------------------------------------------------------------------------------- 1 | import { NativeRadioButton } from "./NativeRadioButton"; 2 | 3 | export { NativeRadioButton }; 4 | -------------------------------------------------------------------------------- /src/uikit/components/RadioButton/NativeRadioButton/types.ts: -------------------------------------------------------------------------------- 1 | import type { ChangeEvent } from "react"; 2 | 3 | export type TNativeRadioButtonProps = { 4 | checked?: boolean | undefined; 5 | className?: string | undefined; 6 | defaultValue?: string | undefined; 7 | id?: string | undefined; 8 | name?: string | undefined; 9 | onChange?: ((event: ChangeEvent) => void) | undefined; 10 | value?: string | readonly string[] | number | undefined; 11 | }; 12 | -------------------------------------------------------------------------------- /src/uikit/components/RadioButton/RadioButton.scss: -------------------------------------------------------------------------------- 1 | @import "../../../styles/index"; 2 | 3 | .RadioButton { 4 | display: flex; 5 | align-items: center; 6 | margin-bottom: 16px; 7 | 8 | &:last-child { 9 | margin-bottom: 0; 10 | } 11 | 12 | &-Label { 13 | position: relative; 14 | display: flex; 15 | align-items: center; 16 | cursor: pointer; 17 | } 18 | 19 | input[type="radio"] { 20 | position: absolute; 21 | height: 0; 22 | width: 0; 23 | opacity: 0; 24 | } 25 | 26 | &-Radio { 27 | border: 1px solid $color-text; 28 | border-radius: 50%; 29 | height: 16px; 30 | width: 16px; 31 | padding: 2px; 32 | box-sizing: border-box; 33 | margin-right: 8px; 34 | cursor: pointer; 35 | 36 | &::after { 37 | content: ""; 38 | display: block; 39 | height: 100%; 40 | width: 100%; 41 | background-color: $color-primary; 42 | border-radius: 50%; 43 | transform: scale(0); 44 | } 45 | 46 | &__checked::after { 47 | transform: scale(1); 48 | } 49 | } 50 | } -------------------------------------------------------------------------------- /src/uikit/components/RadioButton/RadioButton.tsx: -------------------------------------------------------------------------------- 1 | import clsx from "clsx"; 2 | import { type FC, memo } from "react"; 3 | import { Typography } from "../Typography"; 4 | import type { TRadioButtonProps } from "./types"; 5 | import { NativeRadioButton } from "./NativeRadioButton"; 6 | import "./RadioButton.scss"; 7 | 8 | const RadioButtonComponent: FC = ({ checked, label, name, onChange, value }) => { 9 | return ( 10 |
11 |