├── .env ├── .editorconfig ├── src ├── enums │ ├── index.ts │ └── routes.ts ├── utils │ ├── index.ts │ └── format.ts ├── components │ ├── Hr │ │ ├── index.ts │ │ ├── Hr.scss │ │ └── Hr.tsx │ ├── App │ │ └── index.ts │ ├── Title │ │ ├── index.ts │ │ ├── Title.scss │ │ └── Title.tsx │ ├── Layout │ │ ├── index.ts │ │ ├── MenuPanel │ │ │ └── index.ts │ │ ├── Layout.scss │ │ └── Layout.tsx │ ├── search │ │ ├── index.ts │ │ └── types.ts │ ├── CodeCard │ │ ├── index.ts │ │ └── ChildrenComponent.tsx │ ├── modal │ │ ├── index.ts │ │ └── ModalDelete │ │ │ ├── index.ts │ │ │ ├── types.ts │ │ │ ├── ModalDelete.scss │ │ │ └── ModalDelete.tsx │ ├── route │ │ ├── index.ts │ │ └── PrivateRoutes │ │ │ ├── index.ts │ │ │ └── PrivateRoutes.tsx │ ├── table │ │ ├── index.ts │ │ └── TableHeader │ │ │ ├── index.ts │ │ │ ├── TableHeader.scss │ │ │ └── TableHeader.tsx │ ├── theme │ │ ├── ThemeSwitcher │ │ │ └── index.ts │ │ ├── ThemeSwitcherCustom │ │ │ └── index.ts │ │ ├── index.ts │ │ ├── constants.ts │ │ └── ThemeSwitcher.scss │ └── index.ts ├── constants │ ├── index.ts │ └── socket.ts ├── hooks │ ├── index.ts │ └── useSocket.ts ├── pages │ ├── AvatarPage │ │ ├── index.ts │ │ ├── avatar.jpg │ │ └── AvatarPage.tsx │ ├── ButtonPage │ │ └── index.ts │ ├── CopyPage │ │ ├── index.ts │ │ ├── CopyPage.scss │ │ └── CopyPage.tsx │ ├── FieldPage │ │ ├── index.ts │ │ └── FieldPage.scss │ ├── IconPage │ │ ├── index.ts │ │ └── IconPage.tsx │ ├── ModalPage │ │ ├── index.ts │ │ └── ModalPage.tsx │ ├── PortalPage │ │ ├── index.ts │ │ ├── PortalPage.scss │ │ └── PortalPage.tsx │ ├── RatingPage │ │ ├── index.ts │ │ └── RatingPage.tsx │ ├── SelectPage │ │ ├── index.ts │ │ ├── hooks │ │ │ └── index.ts │ │ └── SelectPage.scss │ ├── TablePage │ │ ├── index.ts │ │ └── PostsTable │ │ │ ├── hooks │ │ │ └── index.ts │ │ │ ├── index.ts │ │ │ └── enums.ts │ ├── TabsPage │ │ ├── index.ts │ │ └── TabsPage.scss │ ├── CheckboxPage │ │ └── index.ts │ ├── DropDownPage │ │ ├── index.ts │ │ └── DropDownPage.scss │ ├── OverlayPage │ │ ├── index.ts │ │ └── OverlayPage.tsx │ ├── PopoverPage │ │ └── index.ts │ ├── SidebarPage │ │ ├── index.ts │ │ ├── SidebarPage.scss │ │ └── SidebarPage.tsx │ ├── SkeletonPage │ │ ├── index.ts │ │ └── SkeletonPage.tsx │ ├── SpinnerPage │ │ ├── index.ts │ │ ├── SpinnerPage.scss │ │ └── SpinnerPage.tsx │ ├── SwitcherPage │ │ ├── index.ts │ │ └── SwitcherPage.tsx │ ├── TooltipPage │ │ ├── index.ts │ │ └── TooltipPage.scss │ ├── WordWrapPage │ │ ├── index.ts │ │ └── WordWrapPage.scss │ ├── AccordionPage │ │ ├── index.ts │ │ └── AccordionPage.tsx │ ├── AutocompletePage │ │ ├── hooks │ │ │ └── index.ts │ │ ├── index.ts │ │ ├── AutocompletePage.scss │ │ └── AutocompletePage.tsx │ ├── DatePickerPage │ │ └── index.ts │ ├── HamburgerPage │ │ ├── index.ts │ │ └── HamburgerPage.tsx │ ├── ScrollbarPage │ │ ├── index.ts │ │ └── ScrollbarPage.scss │ ├── TextEditorPage │ │ ├── index.ts │ │ └── TextEditorPage.tsx │ ├── TypographyPage │ │ ├── index.ts │ │ └── TypographyPage.tsx │ ├── PrivateRoutePage │ │ ├── index.ts │ │ └── PrivateRoutePage.tsx │ ├── DocumentViewerPage │ │ ├── index.ts │ │ ├── document.xls │ │ ├── DocumentViewerPage.scss │ │ └── DocumentViewerPage.tsx │ ├── CanvasImageResizePage │ │ └── index.ts │ ├── SliderPage │ │ ├── index.ts │ │ ├── data.ts │ │ └── SliderPage.tsx │ ├── MapPage │ │ ├── index.ts │ │ ├── MapPage.scss │ │ └── MapPage.tsx │ ├── BreadcrumbsPage │ │ ├── BreadcrumbsDetailPage │ │ │ ├── index.ts │ │ │ └── BreadcrumbsDetailPage.tsx │ │ ├── index.ts │ │ └── BreadcrumbsPage.tsx │ ├── FormPage │ │ ├── index.ts │ │ ├── enums.ts │ │ └── FormPage.scss │ ├── RadioButtonPage │ │ ├── RadioButtonPage.scss │ │ ├── index.ts │ │ └── enum.ts │ └── RangeSliderPage │ │ ├── index.ts │ │ ├── RangeSliderPage.scss │ │ └── RangeSliderPage.tsx ├── services │ ├── form │ │ ├── Form │ │ │ ├── index.ts │ │ │ └── enums.ts │ │ ├── Input │ │ │ └── index.ts │ │ ├── Textarea │ │ │ └── index.ts │ │ ├── FormErrors │ │ │ ├── index.ts │ │ │ └── FormErrors.tsx │ │ ├── InputMask │ │ │ ├── index.ts │ │ │ └── react-input-mask.d.ts │ │ ├── PhoneInputMask │ │ │ ├── index.ts │ │ │ └── constants.ts │ │ └── index.ts │ ├── validation │ │ ├── index.ts │ │ └── constants.ts │ ├── api │ │ ├── posts │ │ │ ├── utils │ │ │ │ ├── index.ts │ │ │ │ └── getPostsApi.ts │ │ │ ├── index.ts │ │ │ ├── types.ts │ │ │ └── schemas.ts │ │ └── sorting │ │ │ ├── index.ts │ │ │ └── mapTableSortingToDto.ts │ └── context │ │ ├── index.ts │ │ ├── themeContext.ts │ │ └── socketContext.ts ├── react-app-env.d.ts ├── uikit │ ├── assets │ │ └── icons │ │ │ ├── H2Icon │ │ │ ├── index.ts │ │ │ └── H2Icon.tsx │ │ │ ├── OLIcon │ │ │ └── index.ts │ │ │ ├── ULIcon │ │ │ └── index.ts │ │ │ ├── BoldIcon │ │ │ ├── index.ts │ │ │ └── BoldIcon.tsx │ │ │ ├── CopyIcon │ │ │ ├── index.ts │ │ │ └── CopyIcon.tsx │ │ │ ├── EditIcon │ │ │ └── index.ts │ │ │ ├── HomeIcon │ │ │ └── index.ts │ │ │ ├── PlusIcon │ │ │ ├── index.ts │ │ │ └── PlusIcon.tsx │ │ │ ├── CenterIcon │ │ │ └── index.ts │ │ │ ├── CloseIcon │ │ │ ├── index.ts │ │ │ └── CloseIcon.tsx │ │ │ ├── MinusIcon │ │ │ ├── index.ts │ │ │ └── MinusIcon.tsx │ │ │ ├── SearchIcon │ │ │ ├── index.ts │ │ │ └── SearchIcon.tsx │ │ │ ├── SortUpIcon │ │ │ └── index.ts │ │ │ ├── SortingIcon │ │ │ ├── index.ts │ │ │ └── SortingIcon.tsx │ │ │ ├── SpinnerIcon │ │ │ └── index.ts │ │ │ ├── SuccessIcon │ │ │ ├── index.ts │ │ │ └── SuccessIcon.tsx │ │ │ ├── ArrowDownIcon │ │ │ ├── index.ts │ │ │ └── ArrowDownIcon.tsx │ │ │ ├── ArrowLeftIcon │ │ │ ├── index.ts │ │ │ └── ArrowLeftIcon.tsx │ │ │ ├── CalendarIcon │ │ │ └── index.ts │ │ │ ├── CheckboxIcon │ │ │ ├── index.ts │ │ │ └── CheckboxIcon.tsx │ │ │ ├── DarkModeIcon │ │ │ ├── index.ts │ │ │ └── DarkModeIcon.tsx │ │ │ ├── HighlightIcon │ │ │ ├── index.ts │ │ │ └── HighlightIcon.tsx │ │ │ ├── LightModeIcon │ │ │ └── index.ts │ │ │ ├── SettingsIcon │ │ │ └── index.ts │ │ │ ├── SortDownIcon │ │ │ └── index.ts │ │ │ ├── TelegramIcon │ │ │ └── index.ts │ │ │ ├── UnderlineIcon │ │ │ ├── index.ts │ │ │ └── UnderlineIcon.tsx │ │ │ ├── ArrowRightIcon │ │ │ ├── index.ts │ │ │ └── ArrowRightIcon.tsx │ │ │ ├── VisibilityIcon │ │ │ ├── index.ts │ │ │ └── VisibilityIcon.tsx │ │ │ ├── VisibilityOffIcon │ │ │ ├── index.ts │ │ │ └── VisibilityOffIcon.tsx │ │ │ ├── CityIcon │ │ │ ├── index.ts │ │ │ └── CityIcon.tsx │ │ │ ├── RiverIcon │ │ │ └── index.ts │ │ │ ├── TargetIcon │ │ │ ├── index.ts │ │ │ └── TargetIcon.tsx │ │ │ ├── CottageIcon │ │ │ ├── index.ts │ │ │ └── CottageIcon.tsx │ │ │ ├── LandscapeIcon │ │ │ ├── index.ts │ │ │ └── LandscapeIcon.tsx │ │ │ ├── LocationIcon │ │ │ ├── index.ts │ │ │ └── LocationIcon.tsx │ │ │ ├── SignpostIcon │ │ │ ├── index.ts │ │ │ └── SignpostIcon.tsx │ │ │ ├── types.ts │ │ │ ├── AttractionsIcon │ │ │ └── index.ts │ │ │ ├── GlobeLocationPinIcon │ │ │ └── index.ts │ │ │ └── IndeterminateQuestionBoxIcon │ │ │ ├── index.ts │ │ │ └── IndeterminateQuestionBoxIcon.tsx │ ├── components │ │ ├── Alert │ │ │ ├── index.ts │ │ │ ├── enums.ts │ │ │ ├── types.ts │ │ │ └── Alert.tsx │ │ ├── Avatar │ │ │ ├── index.ts │ │ │ └── types.ts │ │ ├── Error │ │ │ ├── index.ts │ │ │ ├── enums.ts │ │ │ ├── Error.css.map │ │ │ ├── Error.scss │ │ │ ├── types.ts │ │ │ └── Error.css │ │ ├── FadeIn │ │ │ ├── index.ts │ │ │ ├── FadeIn.scss │ │ │ ├── types.ts │ │ │ └── FadeIn.tsx │ │ ├── Overlay │ │ │ ├── index.ts │ │ │ ├── types.ts │ │ │ ├── Overlay.scss │ │ │ └── Overlay.tsx │ │ ├── Portal │ │ │ ├── index.ts │ │ │ ├── types.ts │ │ │ └── Portal.tsx │ │ ├── Rating │ │ │ ├── index.ts │ │ │ ├── types.ts │ │ │ └── Rating.tsx │ │ ├── Sidebar │ │ │ ├── index.ts │ │ │ ├── types.ts │ │ │ └── Sidebar.scss │ │ ├── Spacer │ │ │ ├── index.ts │ │ │ ├── Spacer.scss │ │ │ └── Spacer.tsx │ │ ├── Spinner │ │ │ ├── index.ts │ │ │ ├── types.ts │ │ │ ├── Spinner.scss │ │ │ └── Spinner.tsx │ │ ├── Accordion │ │ │ ├── index.ts │ │ │ └── types.ts │ │ ├── Checkbox │ │ │ ├── index.ts │ │ │ └── types.ts │ │ ├── DropDown │ │ │ ├── index.ts │ │ │ ├── types.ts │ │ │ └── DropDown.scss │ │ ├── Hamburger │ │ │ ├── index.ts │ │ │ ├── enums.ts │ │ │ ├── types.ts │ │ │ └── Hamburger.tsx │ │ ├── Scrollbar │ │ │ ├── index.ts │ │ │ └── Scrollbar.tsx │ │ ├── Skeleton │ │ │ ├── index.ts │ │ │ ├── types.ts │ │ │ ├── Skeleton.scss │ │ │ └── Skeleton.tsx │ │ ├── Uploader │ │ │ ├── index.ts │ │ │ ├── UploaderPreview │ │ │ │ ├── index.ts │ │ │ │ ├── types.ts │ │ │ │ └── UploaderPreview.tsx │ │ │ ├── UploaderDropzone │ │ │ │ ├── index.ts │ │ │ │ ├── types.ts │ │ │ │ └── UploaderDropzone.scss │ │ │ └── types.ts │ │ ├── Autocomplete │ │ │ ├── index.ts │ │ │ ├── types.ts │ │ │ └── Autocomplete.tsx │ │ ├── Breadcrumbs │ │ │ ├── Crumb │ │ │ │ ├── index.ts │ │ │ │ ├── types.ts │ │ │ │ ├── Crumb.scss │ │ │ │ └── Crumb.tsx │ │ │ ├── index.ts │ │ │ ├── types.ts │ │ │ └── Breadcrumbs.scss │ │ ├── ClientOnly │ │ │ ├── index.ts │ │ │ ├── types.ts │ │ │ └── ClientOnly.tsx │ │ ├── Input │ │ │ ├── InputDate │ │ │ │ ├── index.ts │ │ │ │ ├── types.ts │ │ │ │ └── Close.svg │ │ │ ├── index.ts │ │ │ └── Input │ │ │ │ ├── index.ts │ │ │ │ └── types.ts │ │ ├── Pagination │ │ │ ├── index.ts │ │ │ └── types.ts │ │ ├── Table │ │ │ ├── Control │ │ │ │ ├── index.ts │ │ │ │ └── Control.tsx │ │ │ ├── TableBody │ │ │ │ ├── index.ts │ │ │ │ └── TableBody.scss │ │ │ ├── NavigationPanel │ │ │ │ ├── index.ts │ │ │ │ └── NavigationPanel.scss │ │ │ ├── PageSize │ │ │ │ ├── utils │ │ │ │ │ ├── index.ts │ │ │ │ │ └── getPageSizeOptions.ts │ │ │ │ ├── index.ts │ │ │ │ └── PageSize.scss │ │ │ ├── TableHeaderItem │ │ │ │ └── index.ts │ │ │ ├── Options │ │ │ │ ├── index.ts │ │ │ │ └── types.ts │ │ │ ├── TableHeader │ │ │ │ ├── utils │ │ │ │ │ ├── index.ts │ │ │ │ │ └── getInitialSortingColumnState.ts │ │ │ │ ├── index.ts │ │ │ │ ├── types.ts │ │ │ │ └── TableHeader.scss │ │ │ ├── enums.ts │ │ │ ├── index.ts │ │ │ └── Table.scss │ │ ├── Button │ │ │ ├── IconButton │ │ │ │ ├── index.ts │ │ │ │ ├── types.ts │ │ │ │ ├── IconButton.tsx │ │ │ │ └── IconButton.scss │ │ │ ├── index.ts │ │ │ ├── types.ts │ │ │ ├── Button.tsx │ │ │ └── Button.scss │ │ ├── DocumentViewer │ │ │ ├── index.ts │ │ │ └── types.ts │ │ ├── Modal │ │ │ ├── hooks │ │ │ │ ├── index.ts │ │ │ │ └── useModalWindow.ts │ │ │ ├── index.ts │ │ │ └── types.ts │ │ ├── CopyToClipboard │ │ │ ├── index.ts │ │ │ ├── CopyToClipboard.scss │ │ │ └── types.ts │ │ ├── DatePicker │ │ │ ├── DatePicker │ │ │ │ ├── index.ts │ │ │ │ ├── types.ts │ │ │ │ └── DatePicker.tsx │ │ │ ├── DateRangePicker │ │ │ │ ├── index.ts │ │ │ │ └── types.ts │ │ │ ├── Calendar │ │ │ │ ├── index.ts │ │ │ │ └── types.ts │ │ │ └── index.ts │ │ ├── Field │ │ │ ├── InputDateField │ │ │ │ ├── index.ts │ │ │ │ ├── InputDateField.scss │ │ │ │ └── types.ts │ │ │ ├── InputDateRangeField │ │ │ │ ├── index.ts │ │ │ │ ├── InputDateRangeField.scss │ │ │ │ └── types.ts │ │ │ └── index.ts │ │ ├── Tooltip │ │ │ ├── TooltipCustom │ │ │ │ ├── index.ts │ │ │ │ ├── enums.ts │ │ │ │ └── types.ts │ │ │ ├── Tooltip │ │ │ │ ├── index.ts │ │ │ │ ├── enums.ts │ │ │ │ ├── utils │ │ │ │ │ ├── index.ts │ │ │ │ │ ├── getVirtualReference.ts │ │ │ │ │ └── getTooltipOffset.ts │ │ │ │ └── types.ts │ │ │ └── index.ts │ │ ├── Switcher │ │ │ ├── SwitcherCustom │ │ │ │ ├── index.ts │ │ │ │ ├── types.ts │ │ │ │ └── SwitcherCustom.tsx │ │ │ ├── SwitcherHeadless │ │ │ │ ├── index.ts │ │ │ │ ├── types.ts │ │ │ │ └── SwitcherHeadless.tsx │ │ │ ├── enums.ts │ │ │ ├── index.ts │ │ │ ├── constants.ts │ │ │ └── Switcher.scss │ │ ├── Tabs │ │ │ ├── index.ts │ │ │ ├── types.ts │ │ │ ├── Tabs.scss │ │ │ └── Tabs.tsx │ │ ├── TextEditor │ │ │ ├── FormatButton │ │ │ │ ├── index.ts │ │ │ │ ├── FormatButton.scss │ │ │ │ ├── types.ts │ │ │ │ └── FormatButton.tsx │ │ │ ├── BlockStyleControls │ │ │ │ ├── index.ts │ │ │ │ ├── types.ts │ │ │ │ └── BlockStyleControls.tsx │ │ │ ├── InlineStyleControls │ │ │ │ ├── index.ts │ │ │ │ ├── types.ts │ │ │ │ └── InlineStyleControls.tsx │ │ │ ├── index.ts │ │ │ └── types.ts │ │ ├── Popover │ │ │ ├── index.ts │ │ │ ├── constants.ts │ │ │ └── types.ts │ │ ├── Textarea │ │ │ ├── index.ts │ │ │ └── types.ts │ │ ├── Typography │ │ │ ├── index.ts │ │ │ ├── types.ts │ │ │ ├── enums.ts │ │ │ └── Typography.tsx │ │ ├── Icon │ │ │ ├── index.ts │ │ │ ├── Icon.scss │ │ │ └── types.ts │ │ ├── RadioButton │ │ │ ├── constants.ts │ │ │ ├── index.ts │ │ │ ├── NativeRadioButton │ │ │ │ ├── index.ts │ │ │ │ ├── types.ts │ │ │ │ └── NativeRadioButton.tsx │ │ │ ├── types.ts │ │ │ ├── RadioButton.scss │ │ │ └── RadioButton.tsx │ │ ├── Slider │ │ │ ├── SliderArrow │ │ │ │ ├── index.ts │ │ │ │ ├── enums.ts │ │ │ │ └── types.ts │ │ │ ├── SliderSimple │ │ │ │ ├── index.ts │ │ │ │ ├── SliderSimple.scss │ │ │ │ ├── types.ts │ │ │ │ └── settings.tsx │ │ │ ├── SliderSyncing │ │ │ │ ├── index.ts │ │ │ │ ├── types.ts │ │ │ │ └── SliderSyncing.scss │ │ │ └── index.ts │ │ ├── RangeSlider │ │ │ ├── index.ts │ │ │ └── types.ts │ │ ├── Select │ │ │ ├── index.ts │ │ │ └── Select.scss │ │ └── Map │ │ │ └── OpenLayersMap │ │ │ ├── index.ts │ │ │ ├── SearchPanel │ │ │ └── index.ts │ │ │ ├── ControlsPanel │ │ │ ├── index.ts │ │ │ └── ControlsPanel.tsx │ │ │ ├── SuggestedPlaces │ │ │ ├── index.ts │ │ │ └── SuggestedPlaces.scss │ │ │ ├── OpenLayersMap.scss │ │ │ └── types.ts │ ├── context │ │ ├── index.ts │ │ └── dropDownContext.ts │ ├── constants │ │ ├── format.ts │ │ ├── transition.ts │ │ ├── index.ts │ │ └── pagination.ts │ ├── utils │ │ ├── index.ts │ │ ├── generateUUID.ts │ │ └── format.ts │ ├── enums │ │ ├── language.ts │ │ ├── theme.ts │ │ ├── index.ts │ │ └── color.ts │ ├── types.ts │ ├── index.ts │ └── hooks │ │ ├── index.ts │ │ ├── useMounted.ts │ │ ├── useHydrated.ts │ │ ├── useTheme.ts │ │ └── useGetFormErrors.ts ├── setupTests.js ├── styles │ ├── constants.scss │ ├── index.scss │ ├── scroll.scss │ ├── shadows.scss │ └── fonts.css ├── assets │ └── fonts │ │ └── roboto │ │ ├── Roboto-Bold.ttf │ │ ├── Roboto-Light.ttf │ │ ├── Roboto-Medium.ttf │ │ └── Roboto-Regular.ttf └── index.tsx ├── public ├── robots.txt ├── favicon.ico ├── logo192.png ├── logo512.png ├── images │ ├── marker.png │ ├── readme.jpg │ └── canvasOriginal.jpg └── manifest.json ├── .prettierignore ├── .prettierrc.json ├── .gitignore ├── babel.config.js ├── tsconfig.json ├── server.ts └── README.md /.env: -------------------------------------------------------------------------------- 1 | PORT: 3000 -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | [*] 2 | charset = utf-8 3 | -------------------------------------------------------------------------------- /src/enums/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./routes"; 2 | -------------------------------------------------------------------------------- /src/utils/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./format"; 2 | -------------------------------------------------------------------------------- /src/components/Hr/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Hr"; 2 | -------------------------------------------------------------------------------- /src/constants/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./socket"; 2 | -------------------------------------------------------------------------------- /src/hooks/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./useSocket"; 2 | -------------------------------------------------------------------------------- /src/components/App/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./App"; 2 | -------------------------------------------------------------------------------- /src/components/Title/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Title"; 2 | -------------------------------------------------------------------------------- /src/components/Layout/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Layout"; 2 | -------------------------------------------------------------------------------- /src/components/search/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./types"; 2 | -------------------------------------------------------------------------------- /src/pages/AvatarPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./AvatarPage"; 2 | -------------------------------------------------------------------------------- /src/pages/ButtonPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./ButtonPage"; 2 | -------------------------------------------------------------------------------- /src/pages/CopyPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./CopyPage"; 2 | -------------------------------------------------------------------------------- /src/pages/FieldPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./FieldPage"; 2 | -------------------------------------------------------------------------------- /src/pages/IconPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./IconPage"; 2 | -------------------------------------------------------------------------------- /src/pages/ModalPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./ModalPage"; 2 | -------------------------------------------------------------------------------- /src/pages/PortalPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./PortalPage"; 2 | -------------------------------------------------------------------------------- /src/pages/RatingPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./RatingPage"; 2 | -------------------------------------------------------------------------------- /src/pages/SelectPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./SelectPage"; 2 | -------------------------------------------------------------------------------- /src/pages/TablePage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./TablePage"; 2 | -------------------------------------------------------------------------------- /src/pages/TabsPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./TabsPage"; 2 | -------------------------------------------------------------------------------- /src/services/form/Form/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./enums"; 2 | -------------------------------------------------------------------------------- /src/services/form/Input/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Input"; 2 | -------------------------------------------------------------------------------- /src/components/CodeCard/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./CodeCard"; 2 | -------------------------------------------------------------------------------- /src/components/modal/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./ModalDelete"; 2 | -------------------------------------------------------------------------------- /src/components/route/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./PrivateRoutes"; 2 | -------------------------------------------------------------------------------- /src/components/table/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./TableHeader"; 2 | -------------------------------------------------------------------------------- /src/pages/CheckboxPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./CheckboxPage"; 2 | -------------------------------------------------------------------------------- /src/pages/DropDownPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./DropDownPage"; 2 | -------------------------------------------------------------------------------- /src/pages/OverlayPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./OverlayPage"; 2 | -------------------------------------------------------------------------------- /src/pages/PopoverPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./PopoverPage"; 2 | -------------------------------------------------------------------------------- /src/pages/SelectPage/hooks/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./useSelect"; 2 | -------------------------------------------------------------------------------- /src/pages/SidebarPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./SidebarPage"; 2 | -------------------------------------------------------------------------------- /src/pages/SkeletonPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./SkeletonPage"; 2 | -------------------------------------------------------------------------------- /src/pages/SpinnerPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./SpinnerPage"; 2 | -------------------------------------------------------------------------------- /src/pages/SwitcherPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./SwitcherPage"; 2 | -------------------------------------------------------------------------------- /src/pages/TooltipPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./TooltipPage"; 2 | -------------------------------------------------------------------------------- /src/pages/WordWrapPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./WordWrapPage"; 2 | -------------------------------------------------------------------------------- /src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /src/services/form/Textarea/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Textarea"; 2 | -------------------------------------------------------------------------------- /src/services/validation/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./constants"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/H2Icon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./H2Icon"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/OLIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./OLIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/ULIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./ULIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Alert/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Alert"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Avatar/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Avatar"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Error/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Error"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/FadeIn/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./FadeIn"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Overlay/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Overlay"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Portal/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Portal"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Rating/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Rating"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Sidebar/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Sidebar"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Spacer/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Spacer"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Spinner/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Spinner"; 2 | -------------------------------------------------------------------------------- /src/uikit/context/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./dropDownContext"; 2 | -------------------------------------------------------------------------------- /src/components/Layout/MenuPanel/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./MenuPanel"; 2 | -------------------------------------------------------------------------------- /src/pages/AccordionPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./AccordionPage"; 2 | -------------------------------------------------------------------------------- /src/pages/AutocompletePage/hooks/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./usePosts"; 2 | -------------------------------------------------------------------------------- /src/pages/DatePickerPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./DatePickerPage"; 2 | -------------------------------------------------------------------------------- /src/pages/HamburgerPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./HamburgerPage"; 2 | -------------------------------------------------------------------------------- /src/pages/ScrollbarPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./ScrollbarPage"; 2 | -------------------------------------------------------------------------------- /src/pages/TextEditorPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./TextEditorPage"; 2 | -------------------------------------------------------------------------------- /src/pages/TypographyPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./TypographyPage"; 2 | -------------------------------------------------------------------------------- /src/services/api/posts/utils/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./getPostsApi"; 2 | -------------------------------------------------------------------------------- /src/services/form/FormErrors/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./FormErrors"; 2 | -------------------------------------------------------------------------------- /src/services/form/InputMask/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./InputMask"; 2 | -------------------------------------------------------------------------------- /src/setupTests.js: -------------------------------------------------------------------------------- 1 | import "@testing-library/jest-dom/extend-expect"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/BoldIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./BoldIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/CopyIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./CopyIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/EditIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./EditIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/HomeIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./HomeIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/PlusIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./PlusIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Accordion/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Accordion"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Checkbox/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Checkbox"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/DropDown/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./DropDown"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Hamburger/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Hamburger"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Scrollbar/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Scrollbar"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Skeleton/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Skeleton"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Uploader/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Uploader"; 2 | -------------------------------------------------------------------------------- /src/components/Title/Title.scss: -------------------------------------------------------------------------------- 1 | .Title { 2 | margin-bottom: 25px; 3 | } 4 | -------------------------------------------------------------------------------- /src/components/table/TableHeader/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./TableHeader"; 2 | -------------------------------------------------------------------------------- /src/pages/AutocompletePage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./AutocompletePage"; 2 | -------------------------------------------------------------------------------- /src/pages/PrivateRoutePage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./PrivateRoutePage"; 2 | -------------------------------------------------------------------------------- /src/services/api/sorting/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./mapTableSortingToDto"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/CenterIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./CenterIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/CloseIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./CloseIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/MinusIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./MinusIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/SearchIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./SearchIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/SortUpIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./SortUpIcon"; 2 | -------------------------------------------------------------------------------- /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/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./SuccessIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Autocomplete/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Autocomplete"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Breadcrumbs/Crumb/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Crumb"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Breadcrumbs/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Breadcrumbs"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/ClientOnly/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./ClientOnly"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Input/InputDate/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./InputDate"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Pagination/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Pagination"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Spacer/Spacer.scss: -------------------------------------------------------------------------------- 1 | .Spacer { 2 | flex: 1 1; 3 | } 4 | -------------------------------------------------------------------------------- /src/uikit/components/Table/Control/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Control"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Table/TableBody/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./TableBody"; 2 | -------------------------------------------------------------------------------- /src/uikit/constants/format.ts: -------------------------------------------------------------------------------- 1 | export const FORMAT_DATE = "dd.MM.yyyy"; 2 | -------------------------------------------------------------------------------- /src/components/route/PrivateRoutes/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./PrivateRoutes"; 2 | -------------------------------------------------------------------------------- /src/components/theme/ThemeSwitcher/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./ThemeSwitcher"; 2 | -------------------------------------------------------------------------------- /src/pages/DocumentViewerPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./DocumentViewerPage"; 2 | -------------------------------------------------------------------------------- /src/pages/TablePage/PostsTable/hooks/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./useGetColumns"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/ArrowDownIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./ArrowDownIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/ArrowLeftIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./ArrowLeftIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/CalendarIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./CalendarIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/CheckboxIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./CheckboxIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/DarkModeIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./DarkModeIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/HighlightIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./HighlightIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/LightModeIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./LightModeIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/SettingsIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./SettingsIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/SortDownIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./SortDownIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/TelegramIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./TelegramIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/UnderlineIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./UnderlineIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Button/IconButton/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./IconButton"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/DocumentViewer/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./DocumentViewer"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Modal/hooks/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./useModalWindow"; 2 | -------------------------------------------------------------------------------- /src/components/Hr/Hr.scss: -------------------------------------------------------------------------------- 1 | .Hr { 2 | hr { 3 | margin-top: 25px; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /src/pages/CanvasImageResizePage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./CanvasImageResizePage"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/ArrowRightIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./ArrowRightIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/VisibilityIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./VisibilityIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/CopyToClipboard/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./CopyToClipboard"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/DatePicker/DatePicker/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./DatePicker"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Field/InputDateField/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./InputDateField"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Tooltip/TooltipCustom/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./TooltipCustom"; 2 | -------------------------------------------------------------------------------- /src/components/theme/ThemeSwitcherCustom/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./ThemeSwitcherCustom"; 2 | -------------------------------------------------------------------------------- /src/pages/SliderPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./data"; 2 | export * from "./SliderPage"; 3 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/VisibilityOffIcon/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./VisibilityOffIcon"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Modal/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./hooks"; 2 | export * from "./Modal"; 3 | -------------------------------------------------------------------------------- /src/uikit/components/Switcher/SwitcherCustom/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./SwitcherCustom"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Table/NavigationPanel/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./NavigationPanel"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Table/PageSize/utils/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./getPageSizeOptions"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Table/TableHeaderItem/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./TableHeaderItem"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Tabs/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Tabs"; 2 | export * from "./types"; 3 | -------------------------------------------------------------------------------- /src/uikit/components/TextEditor/FormatButton/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./FormatButton"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Uploader/UploaderPreview/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./UploaderPreview"; 2 | -------------------------------------------------------------------------------- /src/uikit/utils/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./format"; 2 | export * from "./generateUUID"; 3 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/pages/MapPage/index.ts: -------------------------------------------------------------------------------- 1 | import { MapPage } from "./MapPage"; 2 | 3 | export { MapPage }; 4 | -------------------------------------------------------------------------------- /src/uikit/components/DatePicker/DateRangePicker/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./DateRangePicker"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Field/InputDateRangeField/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./InputDateRangeField"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Input/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Input"; 2 | export * from "./InputDate"; 3 | -------------------------------------------------------------------------------- /src/uikit/components/Switcher/SwitcherHeadless/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./SwitcherHeadless"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Uploader/UploaderDropzone/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./UploaderDropzone"; 2 | -------------------------------------------------------------------------------- /src/uikit/enums/language.ts: -------------------------------------------------------------------------------- 1 | export enum ELanguages { 2 | Ru = "RU", 3 | En = "EN", 4 | } 5 | -------------------------------------------------------------------------------- /src/uikit/types.ts: -------------------------------------------------------------------------------- 1 | export type TSorting = { 2 | value: string; 3 | label: string; 4 | }; 5 | -------------------------------------------------------------------------------- /src/pages/BreadcrumbsPage/BreadcrumbsDetailPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./BreadcrumbsDetailPage"; 2 | -------------------------------------------------------------------------------- /src/services/context/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./socketContext"; 2 | export * from "./themeContext"; 3 | -------------------------------------------------------------------------------- /src/styles/constants.scss: -------------------------------------------------------------------------------- 1 | $overlayOpacity: 0.6; 2 | $transition: 0.15s; 3 | $border-radius: 4px; 4 | -------------------------------------------------------------------------------- /src/uikit/components/Button/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Button"; 2 | export * from "./IconButton"; 3 | -------------------------------------------------------------------------------- /src/uikit/components/Input/Input/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Input"; 2 | export * from "./types"; 3 | -------------------------------------------------------------------------------- /src/uikit/components/Popover/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./constants"; 2 | export * from "./types"; 3 | -------------------------------------------------------------------------------- /src/uikit/components/Table/Options/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Options"; 2 | export * from "./types"; 3 | -------------------------------------------------------------------------------- /src/uikit/components/TextEditor/BlockStyleControls/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./BlockStyleControls"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/TextEditor/InlineStyleControls/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./InlineStyleControls"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Textarea/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Textarea"; 2 | export * from "./types"; 3 | -------------------------------------------------------------------------------- /src/uikit/components/Typography/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./enums"; 2 | export * from "./Typography"; 3 | -------------------------------------------------------------------------------- /src/uikit/enums/theme.ts: -------------------------------------------------------------------------------- 1 | export enum ETheme { 2 | Dark = "DARK", 3 | Light = "LIGHT", 4 | } 5 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EvgeniyBudaev/react-typescript-ui/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EvgeniyBudaev/react-typescript-ui/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EvgeniyBudaev/react-typescript-ui/HEAD/public/logo512.png -------------------------------------------------------------------------------- /src/components/modal/ModalDelete/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./ModalDelete"; 2 | export * from "./types"; 3 | -------------------------------------------------------------------------------- /src/pages/TabsPage/TabsPage.scss: -------------------------------------------------------------------------------- 1 | .TabsPage { 2 | &-Content { 3 | margin-top: 25px; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /src/uikit/components/Icon/index.ts: -------------------------------------------------------------------------------- 1 | export { Icon as default } from "./Icon"; 2 | export * from "./Icon"; 3 | -------------------------------------------------------------------------------- /src/uikit/components/Spinner/types.ts: -------------------------------------------------------------------------------- 1 | export type TSpinnerProps = { 2 | dataTestId?: string; 3 | }; 4 | -------------------------------------------------------------------------------- /src/uikit/components/Switcher/enums.ts: -------------------------------------------------------------------------------- 1 | export enum ESwitcherVariant { 2 | Default = "Default", 3 | } 4 | -------------------------------------------------------------------------------- /src/uikit/components/Table/PageSize/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./PageSize"; 2 | export * from "./utils"; 3 | -------------------------------------------------------------------------------- /src/uikit/components/Table/TableHeader/utils/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./getInitialSortingColumnState"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Tooltip/Tooltip/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Tooltip"; 2 | export * from "./types"; 3 | -------------------------------------------------------------------------------- /src/uikit/components/Tooltip/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Tooltip"; 2 | export * from "./TooltipCustom"; 3 | -------------------------------------------------------------------------------- /src/components/theme/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./ThemeSwitcher"; 2 | export * from "./ThemeSwitcherCustom"; 3 | -------------------------------------------------------------------------------- /src/pages/SidebarPage/SidebarPage.scss: -------------------------------------------------------------------------------- 1 | .SidebarPage { 2 | &Sidebar { 3 | padding: 15px; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /src/services/form/PhoneInputMask/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./constants"; 2 | export * from "./PhoneInputMask"; 3 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/CityIcon/index.ts: -------------------------------------------------------------------------------- 1 | import { CityIcon } from "./CityIcon"; 2 | 3 | export { CityIcon }; 4 | -------------------------------------------------------------------------------- /src/uikit/components/Breadcrumbs/types.ts: -------------------------------------------------------------------------------- 1 | export type TBreadcrumbsProps = { 2 | dataTestId?: string; 3 | }; 4 | -------------------------------------------------------------------------------- /src/uikit/components/DatePicker/Calendar/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Calendar"; 2 | export * from "./types"; 3 | -------------------------------------------------------------------------------- /src/uikit/components/Field/InputDateField/InputDateField.scss: -------------------------------------------------------------------------------- 1 | .InputDateField { 2 | height: inherit; 3 | } 4 | -------------------------------------------------------------------------------- /src/uikit/components/RadioButton/constants.ts: -------------------------------------------------------------------------------- 1 | export const DATA_TEST_ID = "uikit-component__radio-button"; 2 | -------------------------------------------------------------------------------- /src/uikit/components/Slider/SliderArrow/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./enums"; 2 | export * from "./SliderArrow"; 3 | -------------------------------------------------------------------------------- /src/uikit/components/Table/TableHeader/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./TableHeader"; 2 | export * from "./types"; 3 | -------------------------------------------------------------------------------- /src/uikit/constants/transition.ts: -------------------------------------------------------------------------------- 1 | export const DEBOUNCE_TIMEOUT = 300; 2 | export const TRANSITION = 300; 3 | -------------------------------------------------------------------------------- /public/images/marker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EvgeniyBudaev/react-typescript-ui/HEAD/public/images/marker.png -------------------------------------------------------------------------------- /public/images/readme.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EvgeniyBudaev/react-typescript-ui/HEAD/public/images/readme.jpg -------------------------------------------------------------------------------- /src/pages/BreadcrumbsPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./BreadcrumbsPage"; 2 | export * from "./BreadcrumbsDetailPage"; 3 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/RiverIcon/index.ts: -------------------------------------------------------------------------------- 1 | import { RiverIcon } from "./RiverIcon"; 2 | 3 | export { RiverIcon }; 4 | -------------------------------------------------------------------------------- /src/uikit/components/Error/enums.ts: -------------------------------------------------------------------------------- 1 | export enum EErrorTheme { 2 | Error = "error", 3 | Info = "info", 4 | } 5 | -------------------------------------------------------------------------------- /src/uikit/components/Field/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./InputDateField"; 2 | export * from "./InputDateRangeField"; 3 | -------------------------------------------------------------------------------- /src/uikit/enums/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./color"; 2 | export * from "./language"; 3 | export * from "./theme"; 4 | -------------------------------------------------------------------------------- /src/pages/FormPage/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./enums"; 2 | export * from "./FormPage"; 3 | export * from "./schemas"; 4 | -------------------------------------------------------------------------------- /src/pages/RadioButtonPage/RadioButtonPage.scss: -------------------------------------------------------------------------------- 1 | .RadioButtonPage { 2 | &-Content { 3 | margin: 24px 0; 4 | } 5 | } -------------------------------------------------------------------------------- /src/uikit/assets/icons/TargetIcon/index.ts: -------------------------------------------------------------------------------- 1 | import { TargetIcon } from "./TargetIcon"; 2 | 3 | export { TargetIcon }; 4 | -------------------------------------------------------------------------------- /src/uikit/components/Breadcrumbs/Breadcrumbs.scss: -------------------------------------------------------------------------------- 1 | .Breadcrumbs { 2 | display: flex; 3 | align-items: center; 4 | } 5 | -------------------------------------------------------------------------------- /src/uikit/components/RadioButton/index.ts: -------------------------------------------------------------------------------- 1 | import { RadioButton } from "./RadioButton"; 2 | 3 | export { RadioButton }; 4 | -------------------------------------------------------------------------------- /src/uikit/components/RangeSlider/index.ts: -------------------------------------------------------------------------------- 1 | import { RangeSlider } from "./RangeSlider"; 2 | 3 | export { RangeSlider }; 4 | -------------------------------------------------------------------------------- /src/components/table/TableHeader/TableHeader.scss: -------------------------------------------------------------------------------- 1 | .TableHeader { 2 | &-CursorHelp { 3 | cursor: help; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /src/pages/RadioButtonPage/index.ts: -------------------------------------------------------------------------------- 1 | import { RadioButtonPage } from "./RadioButtonPage"; 2 | 3 | export { RadioButtonPage }; 4 | -------------------------------------------------------------------------------- /src/pages/RangeSliderPage/index.ts: -------------------------------------------------------------------------------- 1 | import { RangeSliderPage } from "./RangeSliderPage"; 2 | 3 | export { RangeSliderPage }; 4 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/CottageIcon/index.ts: -------------------------------------------------------------------------------- 1 | import { CottageIcon } from "./CottageIcon"; 2 | 3 | export { CottageIcon }; 4 | -------------------------------------------------------------------------------- /src/uikit/components/Hamburger/enums.ts: -------------------------------------------------------------------------------- 1 | export enum EHamburgerColor { 2 | BLACK = "black", 3 | WHITE = "white", 4 | } 5 | -------------------------------------------------------------------------------- /src/uikit/components/Uploader/UploaderPreview/types.ts: -------------------------------------------------------------------------------- 1 | export type TUploaderPreviewProps = { 2 | files?: File[]; 3 | }; 4 | -------------------------------------------------------------------------------- /src/uikit/constants/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./format"; 2 | export * from "./pagination"; 3 | export * from "./transition"; 4 | -------------------------------------------------------------------------------- /public/images/canvasOriginal.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EvgeniyBudaev/react-typescript-ui/HEAD/public/images/canvasOriginal.jpg -------------------------------------------------------------------------------- /src/components/modal/ModalDelete/types.ts: -------------------------------------------------------------------------------- 1 | export type TDeleteModalState = { 2 | isOpen: boolean; 3 | alias?: string; 4 | }; 5 | -------------------------------------------------------------------------------- /src/pages/AvatarPage/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EvgeniyBudaev/react-typescript-ui/HEAD/src/pages/AvatarPage/avatar.jpg -------------------------------------------------------------------------------- /src/pages/TablePage/PostsTable/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./enums"; 2 | export * from "./hooks"; 3 | export * from "./PostsTable"; 4 | -------------------------------------------------------------------------------- /src/services/api/posts/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./schemas"; 2 | export * from "./types"; 3 | export * as PostsApi from "./utils"; 4 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/LandscapeIcon/index.ts: -------------------------------------------------------------------------------- 1 | import { LandscapeIcon } from "./LandscapeIcon"; 2 | 3 | export { LandscapeIcon }; 4 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/LocationIcon/index.ts: -------------------------------------------------------------------------------- 1 | import { LocationIcon } from "./LocationIcon"; 2 | 3 | export { LocationIcon }; 4 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/SignpostIcon/index.ts: -------------------------------------------------------------------------------- 1 | import { SignpostIcon } from "./SignpostIcon"; 2 | 3 | export { SignpostIcon }; 4 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/types.ts: -------------------------------------------------------------------------------- 1 | import type { SVGProps } from "react"; 2 | 3 | export type TIconProps = SVGProps; 4 | -------------------------------------------------------------------------------- /src/uikit/components/Scrollbar/Scrollbar.tsx: -------------------------------------------------------------------------------- 1 | import { Scrollbar } from "smooth-scrollbar-react"; 2 | 3 | export { Scrollbar }; 4 | -------------------------------------------------------------------------------- /src/uikit/components/Select/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./AsyncSelect"; 2 | export * from "./Select"; 3 | export * from "./types"; 4 | -------------------------------------------------------------------------------- /src/uikit/components/Tooltip/Tooltip/enums.ts: -------------------------------------------------------------------------------- 1 | export enum ETooltipBehavior { 2 | Click = "click", 3 | Hover = "hover", 4 | } 5 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | 3 | /build 4 | /dist 5 | /public/build 6 | 7 | .env 8 | 9 | /styles 10 | 11 | /docs 12 | -------------------------------------------------------------------------------- /src/uikit/components/Map/OpenLayersMap/index.ts: -------------------------------------------------------------------------------- 1 | import { OpenLayersMap } from "./OpenLayersMap"; 2 | 3 | export { OpenLayersMap }; 4 | -------------------------------------------------------------------------------- /src/uikit/components/Slider/SliderArrow/enums.ts: -------------------------------------------------------------------------------- 1 | export enum ESliderArrow { 2 | Next = "next", 3 | Previous = "previous", 4 | } 5 | -------------------------------------------------------------------------------- /src/uikit/components/TextEditor/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./constants"; 2 | export * from "./TextEditor"; 3 | export * from "./types"; 4 | -------------------------------------------------------------------------------- /src/uikit/components/Tooltip/Tooltip/utils/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./getTooltipOffset"; 2 | export * from "./getVirtualReference"; 3 | -------------------------------------------------------------------------------- /src/utils/format.ts: -------------------------------------------------------------------------------- 1 | export const formatToCapitalize = (s: string) => { 2 | return s.charAt(0).toUpperCase() + s.slice(1); 3 | }; 4 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/AttractionsIcon/index.ts: -------------------------------------------------------------------------------- 1 | import { AttractionsIcon } from "./AttractionsIcon"; 2 | 3 | export { AttractionsIcon }; 4 | -------------------------------------------------------------------------------- /src/uikit/components/Alert/enums.ts: -------------------------------------------------------------------------------- 1 | export enum EAlert { 2 | Error = "Error", 3 | Success = "Success", 4 | Warning = "Warning", 5 | } 6 | -------------------------------------------------------------------------------- /src/uikit/components/Map/OpenLayersMap/SearchPanel/index.ts: -------------------------------------------------------------------------------- 1 | import { SearchPanel } from "./SearchPanel"; 2 | 3 | export { SearchPanel }; 4 | -------------------------------------------------------------------------------- /src/uikit/components/TextEditor/FormatButton/FormatButton.scss: -------------------------------------------------------------------------------- 1 | .FormatButton { 2 | & .IconButton { 3 | padding: 8px; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /src/uikit/utils/generateUUID.ts: -------------------------------------------------------------------------------- 1 | import { v4 as uuidv4 } from "uuid"; 2 | 3 | export function generateUUID() { 4 | return uuidv4(); 5 | } 6 | -------------------------------------------------------------------------------- /src/assets/fonts/roboto/Roboto-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EvgeniyBudaev/react-typescript-ui/HEAD/src/assets/fonts/roboto/Roboto-Bold.ttf -------------------------------------------------------------------------------- /src/constants/socket.ts: -------------------------------------------------------------------------------- 1 | export const SOCKET_SEND_THEME = "socket_send_theme"; 2 | export const SOCKET_RECEIVE_THEME = "socket_receive_theme"; 3 | -------------------------------------------------------------------------------- /src/pages/MapPage/MapPage.scss: -------------------------------------------------------------------------------- 1 | .MapPage { 2 | &-Map { 3 | position: relative; 4 | width: 100%; 5 | height: 500px; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/pages/RadioButtonPage/enum.ts: -------------------------------------------------------------------------------- 1 | export enum EHobby { 2 | Football = "football", 3 | Swimming = "swimming", 4 | Other = "other", 5 | } 6 | -------------------------------------------------------------------------------- /src/uikit/components/DatePicker/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./Calendar"; 2 | export * from "./DatePicker"; 3 | export * from "./DateRangePicker"; 4 | -------------------------------------------------------------------------------- /src/uikit/components/Slider/SliderSimple/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./settings"; 2 | export * from "./SliderSimple"; 3 | export * from "./types"; 4 | -------------------------------------------------------------------------------- /src/uikit/components/Slider/SliderSyncing/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./settings"; 2 | export * from "./SliderSyncing"; 3 | export * from "./types"; 4 | -------------------------------------------------------------------------------- /src/uikit/components/Slider/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./SliderArrow"; 2 | export * from "./SliderSimple"; 3 | export * from "./SliderSyncing"; 4 | -------------------------------------------------------------------------------- /src/assets/fonts/roboto/Roboto-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EvgeniyBudaev/react-typescript-ui/HEAD/src/assets/fonts/roboto/Roboto-Light.ttf -------------------------------------------------------------------------------- /src/assets/fonts/roboto/Roboto-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EvgeniyBudaev/react-typescript-ui/HEAD/src/assets/fonts/roboto/Roboto-Medium.ttf -------------------------------------------------------------------------------- /src/assets/fonts/roboto/Roboto-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EvgeniyBudaev/react-typescript-ui/HEAD/src/assets/fonts/roboto/Roboto-Regular.ttf -------------------------------------------------------------------------------- /src/pages/DocumentViewerPage/document.xls: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/EvgeniyBudaev/react-typescript-ui/HEAD/src/pages/DocumentViewerPage/document.xls -------------------------------------------------------------------------------- /src/pages/FieldPage/FieldPage.scss: -------------------------------------------------------------------------------- 1 | .FieldPage { 2 | &-Field { 3 | height: 40px; 4 | max-width: 334px; 5 | width: 100%; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/uikit/components/Map/OpenLayersMap/ControlsPanel/index.ts: -------------------------------------------------------------------------------- 1 | import { ControlsPanel } from "./ControlsPanel"; 2 | 3 | export { ControlsPanel }; 4 | -------------------------------------------------------------------------------- /src/uikit/components/Table/NavigationPanel/NavigationPanel.scss: -------------------------------------------------------------------------------- 1 | .NavigationPanel { 2 | display: flex; 3 | justify-content: space-between; 4 | } 5 | -------------------------------------------------------------------------------- /src/components/search/types.ts: -------------------------------------------------------------------------------- 1 | export type TSearchParams = { 2 | page: string; 3 | size: string; 4 | search?: string; 5 | sort?: string; 6 | }; 7 | -------------------------------------------------------------------------------- /src/uikit/components/Autocomplete/types.ts: -------------------------------------------------------------------------------- 1 | import type { TAsyncSelectProps } from "uikit"; 2 | 3 | export type TAutocompleteProps = TAsyncSelectProps; 4 | -------------------------------------------------------------------------------- /src/uikit/components/Map/OpenLayersMap/SuggestedPlaces/index.ts: -------------------------------------------------------------------------------- 1 | import { SuggestedPlaces } from "./SuggestedPlaces"; 2 | 3 | export { SuggestedPlaces }; 4 | -------------------------------------------------------------------------------- /src/pages/SpinnerPage/SpinnerPage.scss: -------------------------------------------------------------------------------- 1 | .SpinnerPage { 2 | &-Section { 3 | position: relative; 4 | width: 100%; 5 | height: 700px; 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /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/uikit/assets/icons/GlobeLocationPinIcon/index.ts: -------------------------------------------------------------------------------- 1 | import { GlobeLocationPinIcon } from "./GlobeLocationPinIcon"; 2 | 3 | export { GlobeLocationPinIcon }; 4 | -------------------------------------------------------------------------------- /src/uikit/components/RadioButton/NativeRadioButton/index.ts: -------------------------------------------------------------------------------- 1 | import { NativeRadioButton } from "./NativeRadioButton"; 2 | 3 | export { NativeRadioButton }; 4 | -------------------------------------------------------------------------------- /src/styles/index.scss: -------------------------------------------------------------------------------- 1 | @import "./colors"; 2 | @import "./constants"; 3 | @import "./fonts"; 4 | @import "./scroll"; 5 | @import "./shadows"; 6 | @import "./text"; 7 | -------------------------------------------------------------------------------- /src/uikit/components/Tooltip/TooltipCustom/enums.ts: -------------------------------------------------------------------------------- 1 | export enum ETooltipCustomBehavior { 2 | CLICK = "click", 3 | FOCUS = "focus", 4 | HOVER = "hover", 5 | } 6 | -------------------------------------------------------------------------------- /src/uikit/components/Spacer/Spacer.tsx: -------------------------------------------------------------------------------- 1 | import type { FC } from "react"; 2 | import "./Spacer.scss"; 3 | 4 | export const Spacer: FC = () =>
; 5 | -------------------------------------------------------------------------------- /src/uikit/constants/pagination.ts: -------------------------------------------------------------------------------- 1 | export const DEFAULT_PAGE = 1; 2 | export const DEFAULT_PAGE_SIZE = 10; 3 | export const DEFAULT_PAGE_SIZE_LIST = [5, 10, 25, 50, 100]; 4 | -------------------------------------------------------------------------------- /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/uikit/components/Spinner/Spinner.scss: -------------------------------------------------------------------------------- 1 | .Spinner { 2 | content: ""; 3 | position: absolute; 4 | top: 50%; 5 | transform: translateY(-50%); 6 | left: 50%; 7 | } 8 | -------------------------------------------------------------------------------- /src/uikit/components/Switcher/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./constants"; 2 | export * from "./enums"; 3 | export * from "./SwitcherCustom"; 4 | export * from "./SwitcherHeadless"; 5 | -------------------------------------------------------------------------------- /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/types.ts: -------------------------------------------------------------------------------- 1 | import type { ReactNode } from "react"; 2 | 3 | export type TFadeInProps = { 4 | children?: ReactNode; 5 | dataTestId?: string; 6 | }; 7 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "semi": true, 3 | "trailingComma": "all", 4 | "printWidth": 100, 5 | "tabWidth": 2, 6 | "arrowParens": "always", 7 | "quoteProps": "as-needed" 8 | } 9 | -------------------------------------------------------------------------------- /src/uikit/assets/icons/IndeterminateQuestionBoxIcon/index.ts: -------------------------------------------------------------------------------- 1 | import { IndeterminateQuestionBoxIcon } from "./IndeterminateQuestionBoxIcon"; 2 | 3 | export { IndeterminateQuestionBoxIcon }; 4 | -------------------------------------------------------------------------------- /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/DocumentViewer/types.ts: -------------------------------------------------------------------------------- 1 | export type TDocumentViewerProps = { 2 | className?: string; 3 | dataTestId?: string; 4 | step?: number; 5 | template?: string; 6 | }; 7 | -------------------------------------------------------------------------------- /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/uikit/enums/color.ts: -------------------------------------------------------------------------------- 1 | export enum ETextColor { 2 | Light = "light", 3 | Dark = "dark", 4 | } 5 | 6 | export enum EColorType { 7 | Icon = "icon", 8 | Text = "text", 9 | } 10 | -------------------------------------------------------------------------------- /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/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./components"; 2 | export * from "./constants"; 3 | export * from "./context"; 4 | export * from "./enums"; 5 | export * from "./hooks"; 6 | export * from "./types"; 7 | -------------------------------------------------------------------------------- /src/uikit/utils/format.ts: -------------------------------------------------------------------------------- 1 | export const formatToStringWithPx = (value: string | number): string => { 2 | if (typeof value === "string") return value; 3 | return value.toString() + "px"; 4 | }; 5 | -------------------------------------------------------------------------------- /src/uikit/components/Table/TableHeader/types.ts: -------------------------------------------------------------------------------- 1 | import type { TTableSortingColumnState } from "../types"; 2 | 3 | export type TSortingColumnStateWithReset = TTableSortingColumnState & { shouldReset?: boolean }; 4 | -------------------------------------------------------------------------------- /src/uikit/components/Table/enums.ts: -------------------------------------------------------------------------------- 1 | export enum ETablePlacement { 2 | Top = "top", 3 | Bottom = "bottom", 4 | } 5 | 6 | export enum ETableSortDirection { 7 | Asc = "ASC", 8 | Desc = "DESC", 9 | } 10 | -------------------------------------------------------------------------------- /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/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/uikit/components/Rating/types.ts: -------------------------------------------------------------------------------- 1 | export type TRatingProps = { 2 | activeColor?: string; 3 | count?: number; 4 | dataTestId?: string; 5 | onChange?: (newRating: number) => void; 6 | size?: number; 7 | }; 8 | -------------------------------------------------------------------------------- /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/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/TextEditor/BlockStyleControls/types.ts: -------------------------------------------------------------------------------- 1 | import type { EditorState } from "draft-js"; 2 | 3 | export type TBlockStyleControlsProps = { 4 | editorState: EditorState; 5 | onToggle: (value: string) => void; 6 | }; 7 | -------------------------------------------------------------------------------- /src/uikit/components/Uploader/UploaderDropzone/types.ts: -------------------------------------------------------------------------------- 1 | import type { TUploaderConfig } from "../types"; 2 | 3 | export type TUploaderDropzoneProps = { 4 | config: TUploaderConfig; 5 | onDrop: (acceptedFiles: any) => void; 6 | }; 7 | -------------------------------------------------------------------------------- /src/uikit/components/TextEditor/InlineStyleControls/types.ts: -------------------------------------------------------------------------------- 1 | import type { EditorState } from "draft-js"; 2 | 3 | export type TInlineStyleControlsProps = { 4 | editorState: EditorState; 5 | onToggle: (value: string) => void; 6 | }; 7 | -------------------------------------------------------------------------------- /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/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/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/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/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/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/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/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/Slider/SliderSimple/SliderSimple.scss: -------------------------------------------------------------------------------- 1 | .SliderSimple { 2 | &-Item { 3 | width: 100%; 4 | position: relative; 5 | 6 | & > div { 7 | width: 100%; 8 | } 9 | } 10 | 11 | &-Image { 12 | cursor: pointer; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /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/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/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/Switcher/constants.ts: -------------------------------------------------------------------------------- 1 | import clsx from "clsx"; 2 | import { ESwitcherVariant } from "./enums"; 3 | import "./Switcher.scss"; 4 | 5 | export const SWITCHER_THEMES = () => { 6 | return { 7 | [ESwitcherVariant.Default]: clsx("Switcher"), 8 | }; 9 | }; 10 | -------------------------------------------------------------------------------- /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/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/uikit/components/Table/PageSize/utils/getPageSizeOptions.ts: -------------------------------------------------------------------------------- 1 | import type { TSelectOption } from "uikit"; 2 | 3 | export const getPageSizeOptions = (numbers: number[]): TSelectOption[] => 4 | numbers.map((step) => ({ 5 | label: step.toString(), 6 | value: step.toString(), 7 | })); 8 | -------------------------------------------------------------------------------- /src/uikit/hooks/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./useCopyToClipboard"; 2 | export * from "./useDropDown"; 3 | export * from "./useGetFormErrors"; 4 | export * from "./useHydrated"; 5 | export * from "./useMounted"; 6 | export * from "./usePopover"; 7 | export * from "./useTable"; 8 | export * from "./useTheme"; 9 | -------------------------------------------------------------------------------- /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/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/Uploader/types.ts: -------------------------------------------------------------------------------- 1 | import type { Accept } from "react-dropzone"; 2 | 3 | export type TUploaderConfig = { 4 | accept: Accept; 5 | }; 6 | 7 | export type TUploaderProps = { 8 | config?: TUploaderConfig; 9 | onFilesUploadedAll?: (handleFilesAllAdd: File[]) => void; 10 | }; 11 | -------------------------------------------------------------------------------- /src/uikit/components/Skeleton/types.ts: -------------------------------------------------------------------------------- 1 | import type { CSSProperties } from "react"; 2 | 3 | export type TSkeletonProps = { 4 | className?: string; 5 | dataTestId?: string; 6 | height?: string | number; 7 | style?: CSSProperties; 8 | width?: string | number; 9 | isCircle?: boolean; 10 | }; 11 | -------------------------------------------------------------------------------- /src/uikit/components/TextEditor/FormatButton/types.ts: -------------------------------------------------------------------------------- 1 | import type { IconType } from "../../Icon/IconType"; 2 | 3 | export type TFormatButtonProps = { 4 | isActive?: boolean; 5 | onToggle: (style: string) => void; 6 | size?: string; 7 | style: string; 8 | typeIcon: IconType | string; 9 | }; 10 | -------------------------------------------------------------------------------- /src/uikit/hooks/useMounted.ts: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | 3 | export const useMounted = (): { hasMounted: boolean } => { 4 | const [hasMounted, setHasMounted] = useState(false); 5 | useEffect(() => { 6 | setHasMounted(true); 7 | }, []); 8 | return { hasMounted }; 9 | }; 10 | -------------------------------------------------------------------------------- /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/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/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/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/uikit/components/Tabs/types.ts: -------------------------------------------------------------------------------- 1 | export type TTab = { 2 | id: string | number; 3 | label?: string | number; 4 | }; 5 | 6 | export type TTabsProps = { 7 | className?: string; 8 | dataTestId?: string; 9 | onClick: (id: string | number) => void; 10 | selectedId: string | number; 11 | tabs: TTab[]; 12 | }; 13 | -------------------------------------------------------------------------------- /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/Switcher/SwitcherCustom/types.ts: -------------------------------------------------------------------------------- 1 | import type { ReactNode } from "react"; 2 | import type { ESwitcherVariant } from "../enums"; 3 | 4 | export type TSwitcherCustomProps = { 5 | children?: ReactNode; 6 | className?: string; 7 | dataTestId?: string; 8 | isChecked?: boolean; 9 | variant?: ESwitcherVariant; 10 | }; 11 | -------------------------------------------------------------------------------- /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/RadioButton/types.ts: -------------------------------------------------------------------------------- 1 | import type { ChangeEvent } from "react"; 2 | 3 | export type TRadioButtonProps = { 4 | checked?: boolean | undefined; 5 | label: string; 6 | name: string; 7 | onChange?: ((event: ChangeEvent) => void) | undefined; 8 | value?: string | readonly string[] | number | undefined; 9 | }; 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/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/uikit/hooks/useHydrated.ts: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | 3 | let hydrating = true; 4 | 5 | export const useHydrated = () => { 6 | const [hydrated, setHydrated] = useState(() => !hydrating); 7 | 8 | useEffect(function hydrate() { 9 | hydrating = false; 10 | setHydrated(true); 11 | }, []); 12 | 13 | return hydrated; 14 | }; 15 | -------------------------------------------------------------------------------- /src/uikit/components/Sidebar/types.ts: -------------------------------------------------------------------------------- 1 | import type { ForwardedRef, MouseEvent, ReactNode } from "react"; 2 | 3 | export type TSidebarProps = { 4 | children?: ReactNode; 5 | className?: string; 6 | dataTestId?: string; 7 | isActive?: boolean; 8 | onClose?: (event: MouseEvent) => void; 9 | ref: ForwardedRef; 10 | transition?: number; 11 | }; 12 | -------------------------------------------------------------------------------- /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/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/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/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/uikit/components/RangeSlider/types.ts: -------------------------------------------------------------------------------- 1 | import type { Dispatch, SetStateAction } from "react"; 2 | 3 | type TClasses = { 4 | root?: string; 5 | }; 6 | 7 | export type TRangeSliderProps = { 8 | classes?: TClasses; 9 | isShowTooltip?: boolean; 10 | max: number; 11 | min: number; 12 | onChange?: Dispatch>; 13 | step: number; 14 | value: number[]; 15 | }; 16 | -------------------------------------------------------------------------------- /src/uikit/components/Switcher/SwitcherHeadless/types.ts: -------------------------------------------------------------------------------- 1 | import type { ReactNode } from "react"; 2 | import type { ESwitcherVariant } from "../enums"; 3 | 4 | export type TSwitcherHeadlessProps = { 5 | children?: ReactNode; 6 | className?: string; 7 | dataTestId?: string; 8 | isChecked?: boolean; 9 | onChange?: (isChecked: boolean) => void; 10 | variant?: ESwitcherVariant; 11 | }; 12 | -------------------------------------------------------------------------------- /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/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/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/Typography/types.ts: -------------------------------------------------------------------------------- 1 | import type { ETextColor, ETypographyVariant } from "uikit"; 2 | import type { ReactNode } from "react"; 3 | 4 | export type TColor = `${ETextColor}` | "inherit"; 5 | 6 | export type TTypographyProps = { 7 | as?: string; 8 | children?: ReactNode; 9 | color?: TColor; 10 | dataTestId?: string; 11 | htmlFor?: string; 12 | variant?: ETypographyVariant; 13 | }; 14 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /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/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/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/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/TextEditor/types.ts: -------------------------------------------------------------------------------- 1 | export type TTextEditorTextStyle = "H1" | "H2" | "OL" | "UL" | "BOLD" | "UNDERLINE" | "HIGHLIGHT"; 2 | 3 | type TClasses = { 4 | textEditor?: string; 5 | }; 6 | 7 | export type TTextEditorProps = { 8 | classes?: TClasses; 9 | htmlText?: string; 10 | isInvalid?: boolean; 11 | onChangeHTMLText?: (value: string) => void; 12 | placeholder?: string; 13 | title?: string; 14 | }; 15 | -------------------------------------------------------------------------------- /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/Table/TableHeader/utils/getInitialSortingColumnState.ts: -------------------------------------------------------------------------------- 1 | import type { TTableSortingProps } from "uikit"; 2 | 3 | export function getInitialSortingColumnState(params?: TTableSortingProps) { 4 | if (params?.defaultSorting) 5 | return params.multiple && !Array.isArray(params.defaultSorting) 6 | ? [params.defaultSorting] 7 | : params.defaultSorting; 8 | 9 | return params?.multiple ? [] : null; 10 | } 11 | -------------------------------------------------------------------------------- /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/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/Input/InputDate/Close.svg: -------------------------------------------------------------------------------- 1 | 7 | 11 | -------------------------------------------------------------------------------- /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/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/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/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/Slider/SliderArrow/types.ts: -------------------------------------------------------------------------------- 1 | import type { CSSProperties, MouseEventHandler } from "react"; 2 | import type { ESliderArrow } from "./enums"; 3 | 4 | export type TSliderArrowProps = { 5 | backgroundColor?: string; 6 | className?: string; 7 | dataTestId?: string; 8 | onClick?: MouseEventHandler; 9 | opacity?: number; 10 | style?: CSSProperties; 11 | styles?: CSSProperties; 12 | type: ESliderArrow; 13 | }; 14 | -------------------------------------------------------------------------------- /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/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/uikit/components/Textarea/types.ts: -------------------------------------------------------------------------------- 1 | import type { DetailedHTMLProps, HTMLAttributes } from "react"; 2 | 3 | export interface ITextareaProps 4 | extends DetailedHTMLProps, HTMLTextAreaElement> { 5 | autoComplete?: string; 6 | className?: string; 7 | dataTestId?: string; 8 | hidden?: boolean; 9 | isFocused?: boolean; 10 | isRequired?: boolean; 11 | label?: string; 12 | name?: string; 13 | value?: string; 14 | } 15 | -------------------------------------------------------------------------------- /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/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/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/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/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/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/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/uikit/context/dropDownContext.ts: -------------------------------------------------------------------------------- 1 | import { createContext } from "react"; 2 | import type { RefObject } from "react"; 3 | 4 | export type TDropDownState = { 5 | isDropDownOpen?: boolean; 6 | onClickButtonDropDown?: () => void; 7 | refButtonDropDown?: RefObject; 8 | refPanelDropDown?: RefObject; 9 | }; 10 | 11 | export const DropDownContext = createContext(null); 12 | export const DropDownProvider = DropDownContext.Provider; 13 | -------------------------------------------------------------------------------- /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/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/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/uikit/components/Slider/SliderSimple/types.ts: -------------------------------------------------------------------------------- 1 | export type TSliderSimpleProps = { 2 | alt?: string; 3 | arrows?: boolean; 4 | className?: string; 5 | dataTestId?: string; 6 | dots?: boolean; 7 | fade?: boolean; 8 | height?: string; 9 | images?: string[]; 10 | infinite?: boolean; 11 | nextArrow?: JSX.Element; 12 | prevArrow?: JSX.Element; 13 | slidesToScroll?: number; 14 | slidesToShow?: number; 15 | swipeToSlide?: boolean; 16 | speed?: number; 17 | width?: string; 18 | }; 19 | -------------------------------------------------------------------------------- /src/uikit/components/Select/Select.scss: -------------------------------------------------------------------------------- 1 | @import "../../../styles/index"; 2 | 3 | .Select { 4 | width: 100%; 5 | 6 | &-IconDropdownIndicator { 7 | transition: all $transition; 8 | 9 | svg { 10 | fill: $color-black; 11 | } 12 | } 13 | 14 | &-IconDropdownIndicator__open { 15 | transform: rotate(180deg); 16 | } 17 | } 18 | 19 | .theme-dark { 20 | .Select { 21 | &-IconDropdownIndicator { 22 | svg { 23 | fill: $color-white; 24 | } 25 | } 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/uikit/components/Tooltip/Tooltip/utils/getVirtualReference.ts: -------------------------------------------------------------------------------- 1 | import type { VirtualElement } from "@popperjs/core"; 2 | 3 | export const getVirtualReference = (x: number, y: number): VirtualElement => ({ 4 | getBoundingClientRect() { 5 | return { 6 | x, 7 | y, 8 | top: y, 9 | left: x, 10 | bottom: y, 11 | right: x, 12 | width: 0, 13 | height: 0, 14 | toJSON() { 15 | return JSON.stringify(this); 16 | }, 17 | }; 18 | }, 19 | }); 20 | -------------------------------------------------------------------------------- /src/uikit/components/Tooltip/TooltipCustom/types.ts: -------------------------------------------------------------------------------- 1 | import type { ReactNode } from "react"; 2 | 3 | export type TTooltipCustomProps = { 4 | behavior?: TTooltipCustomBehaviorType; 5 | children: ReactNode; 6 | className?: string; 7 | content: JSX.Element | string; 8 | dataTestId?: string; 9 | placement: TTooltipCustomPlacementType; 10 | }; 11 | 12 | export type TTooltipCustomPlacementType = "top" | "bottom" | "left" | "right"; 13 | export type TTooltipCustomBehaviorType = "click" | "focus" | "hover"; 14 | -------------------------------------------------------------------------------- /src/uikit/components/Table/TableBody/TableBody.scss: -------------------------------------------------------------------------------- 1 | @import "../../../../styles/index"; 2 | 3 | .TableBody { 4 | $this: &; 5 | 6 | &-TR { 7 | width: 100%; 8 | background-color: transparent; 9 | transition: background-color 0.15s; 10 | 11 | &:hover { 12 | background-color: $color-primary-hover; 13 | color: $color-white; 14 | fill: $color-white; 15 | } 16 | } 17 | 18 | &-TD { 19 | padding: 20px; 20 | border-bottom: 1px solid rgba(224, 224, 224, 1); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /src/uikit/components/Uploader/UploaderDropzone/UploaderDropzone.scss: -------------------------------------------------------------------------------- 1 | .UploaderDropzone { 2 | display: flex; 3 | align-items: center; 4 | justify-content: center; 5 | flex-direction: column; 6 | padding: 32px; 7 | text-align: center; 8 | width: 100%; 9 | background-color: #fcfcfc; 10 | border: 2px dotted #d0d0d0; 11 | border-radius: 5px; 12 | cursor: pointer; 13 | 14 | &.active { 15 | background-color: #f5f5f5; 16 | } 17 | 18 | &-Title { 19 | margin-bottom: 25px; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/uikit/components/Table/PageSize/PageSize.scss: -------------------------------------------------------------------------------- 1 | @import "../../../../styles/index"; 2 | 3 | .PageSize { 4 | &-Select { 5 | max-width: 220px; 6 | width: 100%; 7 | 8 | svg { 9 | fill: black; 10 | transition: all 0.15s; 11 | } 12 | 13 | &__active { 14 | svg { 15 | transform: rotate(180deg); 16 | } 17 | } 18 | } 19 | } 20 | 21 | .theme-dark { 22 | .PageSize { 23 | &-Select { 24 | svg { 25 | fill: $color-white; 26 | } 27 | } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /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/components/Spinner/Spinner.tsx: -------------------------------------------------------------------------------- 1 | import { type FC, memo } from "react"; 2 | import { Icon } from "uikit"; 3 | 4 | import type { TSpinnerProps } from "./types"; 5 | import "./Spinner.scss"; 6 | 7 | const SpinnerComponent: FC = ({ dataTestId = "uikit__spinner" }) => { 8 | return ( 9 |
10 | 11 |
12 | ); 13 | }; 14 | 15 | SpinnerComponent.displayName = "Spinner"; 16 | 17 | export const Spinner = memo(SpinnerComponent); 18 | -------------------------------------------------------------------------------- /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/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/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/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/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/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/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/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/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/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/Slider/SliderSyncing/types.ts: -------------------------------------------------------------------------------- 1 | export type TSliderSyncingProps = { 2 | alt?: string; 3 | arrowsFor?: boolean; 4 | arrowsModal?: boolean; 5 | arrowsNav?: boolean; 6 | dots?: boolean; 7 | fade?: boolean; 8 | focusOnSelect?: boolean; 9 | heightNav?: string; 10 | heightFor?: string; 11 | images?: string[]; 12 | infinite?: boolean; 13 | nextArrow?: JSX.Element; 14 | prevArrow?: JSX.Element; 15 | slidesToScroll?: number; 16 | slidesToShow?: number; 17 | speed?: number; 18 | swipeToSlide?: boolean; 19 | widthNav?: string; 20 | widthFor?: string; 21 | }; 22 | -------------------------------------------------------------------------------- /src/uikit/components/Tabs/Tabs.scss: -------------------------------------------------------------------------------- 1 | @import "../../../styles/index"; 2 | 3 | .Tabs { 4 | display: flex; 5 | flex-direction: row; 6 | align-items: flex-start; 7 | } 8 | 9 | .Tab { 10 | padding: 16px 24px; 11 | border: 1px solid transparent; 12 | cursor: pointer; 13 | transition: all 0.15s; 14 | 15 | &__selected { 16 | border-bottom: 1px solid $color-primary; 17 | } 18 | 19 | &:hover { 20 | background-color: $color-light-gray; 21 | } 22 | 23 | &Label { 24 | color: $color-suit-gray; 25 | 26 | &__selected { 27 | color: $color-primary; 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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/Table/index.ts: -------------------------------------------------------------------------------- 1 | import { createColumnHelper } from "@tanstack/react-table"; 2 | import type { ColumnDef, ColumnHelper } from "@tanstack/react-table"; 3 | import { ETablePlacement, ETableSortDirection } from "./enums"; 4 | import { Table } from "./Table"; 5 | import type { TTableSortingHandleChange, TTableSortingParams, TTableSortingProps } from "./types"; 6 | 7 | export { createColumnHelper, Table }; 8 | export { ETablePlacement, ETableSortDirection }; 9 | export type { 10 | ColumnDef, 11 | ColumnHelper, 12 | TTableSortingHandleChange, 13 | TTableSortingParams, 14 | TTableSortingProps, 15 | }; 16 | -------------------------------------------------------------------------------- /src/uikit/components/Tooltip/Tooltip/utils/getTooltipOffset.ts: -------------------------------------------------------------------------------- 1 | import type { TPlacement } from "uikit"; 2 | 3 | type TGetTooltipOffsetParams = { 4 | placement?: TPlacement; 5 | referenceElement?: HTMLDivElement | null; 6 | }; 7 | 8 | export const getTooltipOffset = ({ placement, referenceElement }: TGetTooltipOffsetParams) => { 9 | if (placement === "bottom" || placement === "top") { 10 | // return [0, referenceElement ? referenceElement.offsetHeight : 0]; 11 | return [0, 10]; 12 | } else { 13 | // return [0, referenceElement ? referenceElement.offsetWidth : 0]; 14 | return [0, 10]; 15 | } 16 | }; 17 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /src/uikit/components/Table/Options/types.ts: -------------------------------------------------------------------------------- 1 | import type { Column } from "@tanstack/react-table"; 2 | 3 | export type TTableOptionsSorting = { 4 | ascText?: string; 5 | defaultText?: string; 6 | descText?: string; 7 | hideColumnText?: string; 8 | }; 9 | 10 | export type TTableOptionsProps = { 11 | columns: Column[]; 12 | hiddenColumns?: string[]; 13 | optionsCancelText?: string; 14 | optionsChangeText?: string; 15 | optionsFieldHeader?: string; 16 | optionsModalHeader?: string; 17 | optionsSorting?: TTableOptionsSorting; 18 | setHiddenColumns: (hiddenColumns: string[]) => void; 19 | }; 20 | -------------------------------------------------------------------------------- /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/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/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/Uploader/UploaderPreview/UploaderPreview.tsx: -------------------------------------------------------------------------------- 1 | import isNil from "lodash/isNil"; 2 | import { type FC, memo } from "react"; 3 | 4 | import type { TUploaderPreviewProps } from "./types"; 5 | 6 | const UploaderPreviewComponent: FC = ({ files }) => { 7 | return ( 8 |
9 | {files && !isNil(files) 10 | ? files.map((file, index) =>

{file.name}

) 11 | : "Файлов нет."} 12 |
13 | ); 14 | }; 15 | 16 | UploaderPreviewComponent.displayName = "UploaderPreview"; 17 | 18 | export const UploaderPreview = memo(UploaderPreviewComponent); 19 | -------------------------------------------------------------------------------- /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/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/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/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/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/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/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/components/Rating/Rating.tsx: -------------------------------------------------------------------------------- 1 | import { memo, type FC } from "react"; 2 | import ReactStars from "react-rating-stars-component"; 3 | 4 | import type { TRatingProps } from "./types"; 5 | 6 | const RatingComponent: FC = ({ 7 | activeColor, 8 | count, 9 | dataTestId = "uikit__rating", 10 | onChange, 11 | size, 12 | }) => { 13 | return ( 14 | 21 | ); 22 | }; 23 | 24 | RatingComponent.displayName = "Rating"; 25 | 26 | export const Rating = memo(RatingComponent); 27 | -------------------------------------------------------------------------------- /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/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/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/hooks/useTheme.ts: -------------------------------------------------------------------------------- 1 | import { useContext, useMemo, useState } from "react"; 2 | import { ThemeContext } from "services/context"; 3 | import type { TThemeState } from "services/context"; 4 | import { ETheme } from "uikit"; 5 | 6 | export const useThemeContext = (): TThemeState | null => { 7 | return useContext(ThemeContext); 8 | }; 9 | 10 | export const useTheme = () => { 11 | const [theme, setTheme] = useState(ETheme.Light); 12 | 13 | const handleChangeTheme = (theme: ETheme) => { 14 | setTheme(theme); 15 | }; 16 | 17 | return useMemo(() => { 18 | return { 19 | theme, 20 | onChangeTheme: handleChangeTheme, 21 | }; 22 | }, [theme, setTheme]); 23 | }; 24 | -------------------------------------------------------------------------------- /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/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/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/Table/Control/Control.tsx: -------------------------------------------------------------------------------- 1 | import { memo } from "react"; 2 | import type { ReactElement } from "react"; 3 | import { Options } from "../Options"; 4 | import type { TTableOptionsProps } from "../Options"; 5 | 6 | type TProps = { 7 | options?: Omit, "columns">; 8 | columns: TTableOptionsProps["columns"]; 9 | }; 10 | 11 | const ControlComponent = ({ options, columns }: TProps): ReactElement => { 12 | return
{options && }
; 13 | }; 14 | 15 | ControlComponent.displayName = "Control"; 16 | 17 | export const Control = memo(ControlComponent) as typeof ControlComponent; 18 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "noImplicitAny": false, 7 | "skipLibCheck": true, 8 | "strict": true, 9 | "strictPropertyInitialization": false, 10 | "forceConsistentCasingInFileNames": true, 11 | "noEmit": true, 12 | "esModuleInterop": true, 13 | "moduleResolution": "node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "jsx": "react-jsx", 17 | "baseUrl": "src", 18 | "allowSyntheticDefaultImports": true, 19 | "noFallthroughCasesInSwitch": true 20 | }, 21 | "include": ["src", "**/*.ts", "**/*.tsx"], 22 | "exclude": ["node_modules"] 23 | } 24 | -------------------------------------------------------------------------------- /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/uikit/components/Typography/enums.ts: -------------------------------------------------------------------------------- 1 | export enum ETypographyVariant { 2 | TextH1Bold = "Text/H1Bold", 3 | TextH1Medium = "Text/H1Medium", 4 | TextH2Bold = "Text/H2Bold", 5 | TextH2Medium = "Text/H2Medium", 6 | TextH3Medium = "Text/H3Medium", 7 | TextH4Medium = "Text/H4Medium", 8 | TextH5Medium = "Text/H5Medium", 9 | TextH5Bold = "Text/H5Bold", 10 | TextH6Bold = "Text/H6Bold", 11 | TextB2Bold = "Text/B2Bold", 12 | TextB2Medium = "Text/B2Medium", 13 | TextB2Regular = "Text/B2Regular", 14 | TextB3Bold = "Text/B3Bold", 15 | TextB3Medium = "Text/B3Medium", 16 | TextB3Regular = "Text/B3Regular", 17 | TextB4Bold = "Text/B4Bold", 18 | TextB4Medium = "Text/B4Medium", 19 | TextB4Regular = "Text/B4Regular", 20 | } 21 | -------------------------------------------------------------------------------- /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/components/Slider/SliderSyncing/SliderSyncing.scss: -------------------------------------------------------------------------------- 1 | @import "../../../../styles/index"; 2 | 3 | .SliderSyncing { 4 | &-For { 5 | cursor: pointer; 6 | } 7 | 8 | &-Nav { 9 | .slick-slide { 10 | cursor: pointer; 11 | padding: 12px; 12 | 13 | img { 14 | border: 2px solid transparent; 15 | border-radius: $border-radius; 16 | padding: 6px; 17 | height: 230px; 18 | transition: $transition; 19 | } 20 | 21 | &:hover { 22 | img { 23 | border-color: $color-primary; 24 | } 25 | } 26 | } 27 | 28 | .slick-slide.slick-current { 29 | img { 30 | border-color: $color-primary; 31 | } 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /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/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/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/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/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/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/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/components/Table/TableHeader/TableHeader.scss: -------------------------------------------------------------------------------- 1 | @import "../../../../styles/index"; 2 | 3 | .TableHeader { 4 | $this: &; 5 | 6 | &-THead { 7 | background-color: $color-primary; 8 | } 9 | 10 | &-TR { 11 | position: relative; 12 | } 13 | 14 | &-TH { 15 | padding: 20px; 16 | text-align: start; 17 | border-bottom: 1px solid rgba(224, 224, 224, 1); 18 | 19 | .HeadlessPopover { 20 | &-Button { 21 | background-color: $color-primary; 22 | color: $color-white; 23 | padding: 8px; 24 | 25 | &:hover { 26 | background-color: $color-primary-hover; 27 | } 28 | } 29 | } 30 | } 31 | 32 | &-SortingIcon { 33 | display: inline-flex; 34 | align-items: center; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/components/TextEditor/FormatButton/FormatButton.tsx: -------------------------------------------------------------------------------- 1 | import { type FC, memo } from "react"; 2 | 3 | import { IconButton } from "../../Button"; 4 | import type { IconType } from "../../Icon/IconType"; 5 | import type { TFormatButtonProps } from "./types"; 6 | import "./FormatButton.scss"; 7 | 8 | const FormatButtonComponent: FC = ({ isActive, onToggle, style, typeIcon }) => { 9 | return ( 10 |
{ 13 | event.preventDefault(); 14 | onToggle?.(style); 15 | }} 16 | > 17 | 18 |
19 | ); 20 | }; 21 | 22 | FormatButtonComponent.displayName = "FormatButton"; 23 | 24 | export const FormatButton = memo(FormatButtonComponent); 25 | -------------------------------------------------------------------------------- /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/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/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/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/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/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/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/Tooltip/Tooltip/types.ts: -------------------------------------------------------------------------------- 1 | import type { PopperProps } from "react-popper"; 2 | import type { ReactElement, ReactNode } from "react"; 3 | 4 | export type TModifiers = PopperProps["modifiers"]; 5 | export type TPlacement = PopperProps["placement"]; 6 | 7 | export type TClasses = { 8 | arrow?: string; 9 | popperContent?: string; 10 | popperElement?: string; 11 | referenceElement?: string; 12 | tooltip?: string; 13 | }; 14 | 15 | export type TTooltipBehaviorType = "click" | "hover"; 16 | 17 | export type TTooltipProps = { 18 | as?: string; 19 | behavior?: TTooltipBehaviorType; 20 | children?: ReactNode; 21 | classes?: TClasses; 22 | dataTestId?: string; 23 | isOpen?: boolean; 24 | isVisible?: boolean; 25 | message: string | ReactElement; 26 | modifiers?: TModifiers; 27 | placement?: TPlacement; 28 | timerDelay?: number; 29 | }; 30 | -------------------------------------------------------------------------------- /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/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/Sidebar/Sidebar.scss: -------------------------------------------------------------------------------- 1 | $transition: 0.3s; 2 | 3 | .Sidebar { 4 | content: ""; 5 | position: fixed; 6 | top: 0; 7 | left: 0; 8 | max-width: 80vw; 9 | width: 100%; 10 | height: 100vh; 11 | background-color: white; 12 | overflow: auto; 13 | z-index: 101; 14 | 15 | &.enter { 16 | opacity: 0; 17 | transform: translateX(-100px); 18 | transition: opacity $transition, transform $transition; 19 | } 20 | 21 | &.enter-active { 22 | opacity: 1; 23 | transform: translateX(0); 24 | transition: opacity $transition, transform $transition; 25 | } 26 | 27 | &.exit { 28 | opacity: 1; 29 | transform: translateX(0); 30 | transition: opacity $transition, transform $transition; 31 | } 32 | 33 | &.exit-active { 34 | opacity: 0; 35 | transform: translateX(-100px); 36 | transition: opacity $transition, transform $transition; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /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/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/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/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/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/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/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/components/Table/Table.scss: -------------------------------------------------------------------------------- 1 | @import "../../../styles/index"; 2 | 3 | .Table { 4 | $this: &; 5 | height: 100%; 6 | width: 100%; 7 | border-left: 1px solid rgba(226, 232, 240, 1); 8 | border-right: 1px solid rgba(226, 232, 240, 1); 9 | border-top: 1px solid rgba(226, 232, 240, 1); 10 | border-radius: 0 0 2px 2px; 11 | border-collapse: separate; 12 | border-spacing: 0; 13 | 14 | &-Scroll { 15 | position: relative; 16 | max-width: 100%; 17 | overflow-x: auto; 18 | margin-bottom: 30px; 19 | } 20 | 21 | &-Head { 22 | display: flex; 23 | align-items: center; 24 | justify-content: space-between; 25 | padding: 20px; 26 | border: 1px solid rgba(226, 232, 240, 1); 27 | border-bottom: none; 28 | border-radius: 2px 2px 0 0; 29 | border-collapse: separate; 30 | border-spacing: 0; 31 | font-size: 16px; 32 | font-weight: 600; 33 | 34 | &Count { 35 | color: $color-primary; 36 | } 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/uikit/components/Typography/Typography.tsx: -------------------------------------------------------------------------------- 1 | import { createElement, memo, type FC } from "react"; 2 | 3 | import { ETextColor, ETypographyVariant } from "uikit"; 4 | import { TYPOGRAPHY_THEMES } from "uikit/components/Typography/constants"; 5 | 6 | import type { TTypographyProps } from "./types"; 7 | import "./Typography.scss"; 8 | 9 | const TypographyComponent: FC = ({ 10 | as = "span", 11 | children, 12 | color = ETextColor.Dark, 13 | dataTestId = "uikit__typography", 14 | htmlFor, 15 | variant = ETypographyVariant.TextH1Bold, 16 | }) => { 17 | const currentTheme = TYPOGRAPHY_THEMES({ color })[variant]; 18 | 19 | const props = { 20 | className: currentTheme, 21 | "data-testid": dataTestId, 22 | ...(as === "label" && htmlFor && { htmlFor }), 23 | }; 24 | 25 | return createElement(as, props, children); 26 | }; 27 | 28 | TypographyComponent.displayName = "Typography"; 29 | 30 | export const Typography = memo(TypographyComponent); 31 | -------------------------------------------------------------------------------- /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/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/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/Switcher/Switcher.scss: -------------------------------------------------------------------------------- 1 | @import "../../../styles/index"; 2 | 3 | .Switcher { 4 | $this: &; 5 | background-color: $color-grey; 6 | border: 1px solid transparent; 7 | border-radius: 9999px; 8 | display: flex; 9 | padding: 0; 10 | 11 | &-Pointer { 12 | position: absolute; 13 | width: 50%; 14 | height: 38px; 15 | background-color: $color-white; 16 | border-radius: 9999px; 17 | box-shadow: 0 1px 16px rgba(4, 6, 28, 0.1); 18 | transition: transform $transition linear; 19 | z-index: 0; 20 | transform: translateX(100%); 21 | 22 | &__checked { 23 | transform: translateX(0); 24 | } 25 | } 26 | } 27 | 28 | .theme-dark { 29 | .Switcher { 30 | background-color: $color-darkness; 31 | 32 | &-Pointer { 33 | background: linear-gradient(40deg, rgba(138, 143, 160, 0.16), rgba(31, 32, 41, 0.24) 40%), 34 | linear-gradient(210deg, rgba(138, 143, 160, 0.5), rgba(31, 32, 41, 0.24) 40%); 35 | } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /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/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/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/uikit/components/TextEditor/InlineStyleControls/InlineStyleControls.tsx: -------------------------------------------------------------------------------- 1 | import { type FC, memo } from "react"; 2 | 3 | import { TEXT_EDITOR_INLINE_STYLES } from "../constants"; 4 | import { FormatButton } from "../FormatButton"; 5 | import type { TInlineStyleControlsProps } from "./types"; 6 | 7 | const InlineStyleControlsComponent: FC = ({ editorState, onToggle }) => { 8 | const currentStyle = editorState.getCurrentInlineStyle(); 9 | 10 | return ( 11 | <> 12 | {TEXT_EDITOR_INLINE_STYLES.map((type) => ( 13 | 21 | ))} 22 | 23 | ); 24 | }; 25 | 26 | InlineStyleControlsComponent.displayName = "InlineStyleControls"; 27 | 28 | export const InlineStyleControls = memo(InlineStyleControlsComponent); 29 | -------------------------------------------------------------------------------- /src/uikit/components/Switcher/SwitcherCustom/SwitcherCustom.tsx: -------------------------------------------------------------------------------- 1 | import clsx from "clsx"; 2 | import { memo, type FC } from "react"; 3 | 4 | import { SWITCHER_THEMES } from "../constants"; 5 | import { ESwitcherVariant } from "../enums"; 6 | import type { TSwitcherCustomProps } from "./types"; 7 | 8 | const SwitcherCustomComponent: FC = ({ 9 | children, 10 | className, 11 | dataTestId = "uikit__switcher-custom", 12 | isChecked, 13 | variant = ESwitcherVariant.Default, 14 | }) => { 15 | const currentTheme = SWITCHER_THEMES()[variant]; 16 | 17 | return ( 18 | 26 | ); 27 | }; 28 | 29 | SwitcherCustomComponent.displayName = "SwitcherCustom"; 30 | 31 | export const SwitcherCustom = memo(SwitcherCustomComponent); 32 | -------------------------------------------------------------------------------- /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/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/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/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/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/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/Skeleton/Skeleton.scss: -------------------------------------------------------------------------------- 1 | @import "../../../styles/index"; 2 | 3 | @keyframes react-loading-skeleton { 4 | 100% { 5 | transform: translateX(100%); 6 | } 7 | } 8 | 9 | .Skeleton { 10 | display: inline-flex; 11 | position: relative; 12 | line-height: 1; 13 | height: var(--skeleton-height); 14 | width: var(--skeleton-width); 15 | background-color: #ebebeb; 16 | border-radius: 4px; 17 | overflow: hidden; 18 | z-index: 1; 19 | 20 | &::after { 21 | content: " "; 22 | display: block; 23 | position: absolute; 24 | left: 0; 25 | right: 0; 26 | height: 100%; 27 | background-repeat: no-repeat; 28 | background-image: linear-gradient(90deg, #ebebeb, #f5f5f5, #ebebeb); 29 | z-index: 1; 30 | transform: translateX(-100%); 31 | animation-name: react-loading-skeleton; 32 | animation-direction: normal; 33 | animation-duration: 1.5s; 34 | animation-timing-function: ease-in-out; 35 | animation-iteration-count: infinite; 36 | } 37 | 38 | &__circle { 39 | border-radius: 50%; 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /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/hooks/useGetFormErrors.ts: -------------------------------------------------------------------------------- 1 | import { useMemo } from "react"; 2 | import type { 3 | DeepRequired, 4 | FieldError, 5 | FieldErrorsImpl, 6 | FieldValues, 7 | GlobalError, 8 | Merge, 9 | } from "react-hook-form"; 10 | import isString from "lodash/isString"; 11 | 12 | type TParams = { 13 | data: Partial>> & { 14 | root?: Record & GlobalError; 15 | }; 16 | }; 17 | 18 | type TUseGetFormErrors = ( 19 | params: TParams, 20 | ) => 21 | | { title: string | FieldError | Merge> | undefined }[] 22 | | undefined; 23 | 24 | export const useGetFormErrors: TUseGetFormErrors = ({ data }) => { 25 | const errors = useMemo(() => { 26 | try { 27 | if (isString(data)) { 28 | data = JSON.parse(data); 29 | } 30 | 31 | if (data) { 32 | return Object.values(data).map((error) => ({ title: error?.message })); 33 | } 34 | } catch (error) { 35 | console.log(error); 36 | } 37 | }, [data]); 38 | 39 | return errors || []; 40 | }; 41 | -------------------------------------------------------------------------------- /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/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/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 |