├── .babelrc ├── .editorconfig ├── .eslintignore ├── .eslintrc.json ├── .eslintrc.typescript.json ├── .gitignore ├── .gitlab-ci.yml ├── .npmignore ├── .prettierrc ├── .size-limit.json ├── LICENSE ├── README.md ├── changelog.md ├── docs ├── components │ ├── App.js │ ├── Button.js │ ├── Footer.js │ ├── H1.js │ ├── H2.js │ ├── H3.js │ ├── Informer.js │ ├── InlineCode.js │ ├── Link.js │ ├── Playground.js │ ├── PreCode.js │ ├── PropTypesTable.js │ ├── Route.js │ ├── SideNav.js │ ├── icons │ │ ├── Arrow.js │ │ ├── Chevron.js │ │ ├── FullGithub.js │ │ ├── Github.js │ │ ├── Logo.js │ │ ├── Medium.js │ │ ├── Pdf.js │ │ └── Sketch.js │ ├── with-doc.js │ └── with-error.js ├── config.js ├── index.js ├── lib │ ├── component-list.js │ ├── env.js │ └── export-meta.js ├── page-list.js ├── pages │ ├── components │ │ ├── Avatar │ │ │ ├── examples.js │ │ │ └── index.md │ │ ├── Button │ │ │ ├── examples-react-router.js │ │ │ ├── examples.js │ │ │ └── index.md │ │ ├── Calendar │ │ │ ├── examples.js │ │ │ └── index.md │ │ ├── Checkbox │ │ │ ├── examples.js │ │ │ └── index.md │ │ ├── ComplexSearch │ │ │ ├── examples.js │ │ │ └── index.md │ │ ├── Dropdown │ │ │ ├── examples.js │ │ │ └── index.md │ │ ├── FieldGroup │ │ │ ├── examples.js │ │ │ └── index.md │ │ ├── Hint │ │ │ ├── examples.js │ │ │ └── index.md │ │ ├── IconButton │ │ │ ├── examples.js │ │ │ └── index.md │ │ ├── Input │ │ │ ├── examples.js │ │ │ └── index.md │ │ ├── Loader │ │ │ ├── examples.js │ │ │ └── index.md │ │ ├── Menu │ │ │ ├── examples-react-router.js │ │ │ ├── examples.js │ │ │ └── index.md │ │ ├── Notification │ │ │ ├── examples-decorator.js │ │ │ ├── examples.js │ │ │ └── index.md │ │ ├── Pagination │ │ │ ├── examples.js │ │ │ └── index.md │ │ ├── Popup │ │ │ ├── examples-decorator.js │ │ │ ├── examples.js │ │ │ └── index.md │ │ ├── Radio │ │ │ ├── examples.js │ │ │ └── index.md │ │ ├── Select │ │ │ ├── examples.js │ │ │ └── index.md │ │ ├── SideNav │ │ │ ├── examples-href.js │ │ │ ├── examples-react-router.js │ │ │ ├── examples.js │ │ │ └── index.md │ │ ├── Slider │ │ │ ├── examples.js │ │ │ └── index.md │ │ ├── Snackbar │ │ │ ├── examples-decorator.js │ │ │ ├── examples.js │ │ │ └── index.md │ │ ├── Spinner │ │ │ ├── examples.js │ │ │ └── index.md │ │ ├── Stepper │ │ │ ├── examples.js │ │ │ └── index.md │ │ ├── SvgIcon │ │ │ ├── examples.js │ │ │ └── index.md │ │ ├── Switcher │ │ │ ├── examples.js │ │ │ └── index.md │ │ ├── Tabs │ │ │ ├── examples-react-router.js │ │ │ ├── examples.js │ │ │ └── index.md │ │ ├── TagsInput │ │ │ ├── examples.js │ │ │ └── index.md │ │ ├── Textarea │ │ │ ├── examples.js │ │ │ └── index.md │ │ ├── Toggle │ │ │ ├── examples.js │ │ │ └── index.md │ │ ├── Tooltip │ │ │ ├── examples.js │ │ │ └── index.md │ │ ├── Typography │ │ │ ├── examples.js │ │ │ └── index.md │ │ └── icons │ │ │ ├── examples-forms.js │ │ │ ├── examples-profiles.js │ │ │ ├── examples-services.js │ │ │ └── index.md │ ├── index.js │ └── usage │ │ ├── contribute │ │ └── index.md │ │ └── install │ │ └── index.md ├── scripts │ └── publish-site.js ├── utils │ ├── create-source-url.js │ ├── load-style-sheet.js │ └── theming.js └── webpack.config.js ├── examples ├── simple │ ├── .babelrc │ ├── .gitignore │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ │ ├── App.js │ │ └── index.js │ └── webpack.config.js ├── ssr │ ├── .babelrc │ ├── .gitignore │ ├── client │ │ └── index.js │ ├── common │ │ └── App.js │ ├── package-lock.json │ ├── package.json │ ├── server │ │ ├── index.js │ │ └── server.js │ └── webpack.config.js └── theming │ ├── .babelrc │ ├── .gitignore │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── src │ ├── App.js │ └── index.js │ └── webpack.config.js ├── karma.conf.js ├── package-lock.json ├── package.json ├── scripts ├── ci-git-push-prepare.sh └── copy-files.js ├── src ├── Avatar │ ├── Avatar.d.ts │ ├── Avatar.js │ ├── Avatar.test.js │ ├── index.d.ts │ ├── index.js │ └── profilesIconMap.js ├── Button │ ├── Button.d.ts │ ├── Button.js │ ├── Button.test.js │ ├── index.d.ts │ └── index.js ├── Calendar │ ├── Calendar.d.ts │ ├── Calendar.js │ ├── Calendar.test.js │ ├── index.d.ts │ └── index.js ├── Checkbox │ ├── Checkbox.d.ts │ ├── Checkbox.js │ ├── Checkbox.test.js │ ├── TickIcon.js │ ├── TickIconSmall.js │ ├── index.d.ts │ └── index.js ├── ComplexSearch │ ├── ComplexSearch.d.ts │ ├── ComplexSearch.js │ ├── ComplexSearch.test.js │ ├── ServiceSearch.d.ts │ ├── ServiceSearch.js │ ├── ServiceSearch.test.js │ ├── SimpleSearch.d.ts │ ├── SimpleSearch.js │ ├── SimpleSearch.test.js │ ├── SourceButtons.d.ts │ ├── SourceButtons.js │ ├── SuggestDropdown.d.ts │ ├── SuggestDropdown.js │ ├── SuggestItem.d.ts │ ├── SuggestItem.js │ ├── context.js │ ├── icons │ │ ├── .eslintrc │ │ ├── ClearIcon.js │ │ ├── GlobalSourceIcon.js │ │ ├── MediaSearchIcon.js │ │ ├── SearchIcon.js │ │ ├── ServiceSearchIcon.js │ │ └── ServiceSourceIcon.js │ ├── index.d.ts │ ├── index.js │ ├── provideSearch.js │ └── provideSearchDropdown.js ├── Dropdown │ ├── Dropdown.d.ts │ ├── Dropdown.js │ ├── DropdownContent.js │ ├── index.d.ts │ └── index.js ├── FieldGroup │ ├── FieldGroup.d.ts │ ├── FieldGroup.js │ ├── FieldGroup.test.js │ ├── index.d.ts │ └── index.js ├── FieldStatus │ ├── FieldStatus.d.ts │ ├── FieldStatus.js │ ├── index.d.ts │ └── index.js ├── FocusManager │ ├── FocusManager.d.ts │ ├── FocusManager.js │ ├── index.d.ts │ └── index.js ├── FormGroup │ ├── FormGroup.d.ts │ ├── FormGroup.js │ ├── FormGroup.test.js │ ├── index.d.ts │ └── index.js ├── Hint │ ├── Hint.d.ts │ ├── Hint.js │ ├── Hint.test.js │ ├── HintContent.js │ ├── index.d.ts │ └── index.js ├── IconButton │ ├── IconButton.d.ts │ ├── IconButton.js │ ├── IconButton.test.js │ ├── index.d.ts │ └── index.js ├── Input │ ├── Input.d.ts │ ├── Input.js │ ├── Input.test.js │ ├── index.d.ts │ └── index.js ├── Loader │ ├── Loader.d.ts │ ├── Loader.js │ ├── Loader.test.js │ ├── index.d.ts │ └── index.js ├── Menu │ ├── Menu.d.ts │ ├── Menu.js │ ├── Menu.test.js │ ├── MenuItem.d.ts │ ├── MenuItem.js │ ├── context.js │ ├── index.d.ts │ └── index.js ├── Notification │ ├── Notification.d.ts │ ├── Notification.js │ ├── Notification.test.js │ ├── index.d.ts │ ├── index.js │ ├── provideNotification.d.ts │ ├── provideNotification.js │ └── provideNotification.test.js ├── OnClickOutside │ ├── OnClickOutside.d.ts │ ├── OnClickOutside.js │ ├── index.d.ts │ └── index.js ├── Overlay │ ├── FixedOverlay.d.ts │ ├── FixedOverlay.js │ ├── FixedOverlay.test.js │ ├── RelativeOverlay.d.ts │ ├── RelativeOverlay.js │ ├── RelativeOverlay.test.js │ ├── index.d.ts │ └── index.js ├── Pagination │ ├── Pagination.d.ts │ ├── Pagination.js │ ├── Pagination.test.js │ ├── index.d.ts │ └── index.js ├── Popup │ ├── Popup.d.ts │ ├── Popup.js │ ├── Popup.test.js │ ├── index.d.ts │ ├── index.js │ ├── providePopup.d.ts │ ├── providePopup.js │ └── providePopup.test.js ├── Radio │ ├── Radio.test.js │ ├── RadioButton.d.ts │ ├── RadioButton.js │ ├── RadioButtonGroup.d.ts │ ├── RadioButtonGroup.js │ ├── context.js │ ├── index.d.ts │ └── index.js ├── Select │ ├── ClearIconSmall.js │ ├── Select.d.ts │ ├── Select.js │ ├── Select.test.js │ ├── index.d.ts │ └── index.js ├── SideNav │ ├── SideNav.d.ts │ ├── SideNav.js │ ├── SideNav.test.js │ ├── SideNavItem.d.ts │ ├── SideNavItem.js │ ├── index.d.ts │ └── index.js ├── Slider │ ├── Slider.d.ts │ ├── Slider.js │ ├── Slider.test.js │ ├── index.d.ts │ └── index.js ├── Snackbar │ ├── Snackbar.d.ts │ ├── Snackbar.js │ ├── Snackbar.test.js │ ├── index.d.ts │ ├── index.js │ ├── provideSnackbar.d.ts │ ├── provideSnackbar.js │ └── provideSnackbar.test.js ├── Spinner │ ├── Spinner.d.ts │ ├── Spinner.js │ ├── Spinner.test.js │ ├── index.d.ts │ └── index.js ├── Stepper │ ├── Step.d.ts │ ├── Step.js │ ├── Stepper.d.ts │ ├── Stepper.js │ ├── Stepper.test.js │ ├── index.d.ts │ └── index.js ├── SvgIcon │ ├── SvgIcon.d.ts │ ├── SvgIcon.js │ ├── index.d.ts │ └── index.js ├── Switcher │ ├── Switcher.d.ts │ ├── Switcher.js │ ├── Switcher.test.js │ ├── index.d.ts │ └── index.js ├── Tabs │ ├── Tabs.d.ts │ ├── Tabs.js │ ├── Tabs.test.js │ ├── TabsItem.d.ts │ ├── TabsItem.js │ ├── context.js │ ├── index.d.ts │ └── index.js ├── TagsInput │ ├── ClearIcon.js │ ├── TagsInput.d.ts │ ├── TagsInput.js │ ├── TagsInput.test.js │ ├── TagsInputItem.d.ts │ ├── TagsInputItem.js │ ├── TagsInputItem.test.js │ ├── index.d.ts │ └── index.js ├── Textarea │ ├── Textarea.d.ts │ ├── Textarea.js │ ├── Textarea.test.js │ ├── index.d.ts │ └── index.js ├── Toggle │ ├── Toggle.d.ts │ ├── Toggle.js │ ├── Toggle.test.js │ ├── ToggleOption.d.ts │ ├── ToggleOption.js │ ├── index.d.ts │ └── index.js ├── Tooltip │ ├── Tooltip.d.ts │ ├── Tooltip.js │ ├── TooltipContent.js │ ├── index.d.ts │ └── index.js ├── Typography │ ├── Description.d.ts │ ├── Description.js │ ├── Epigraph.d.ts │ ├── Epigraph.js │ ├── GalleryDescription.d.ts │ ├── GalleryDescription.js │ ├── H1.d.ts │ ├── H1.js │ ├── H2.d.ts │ ├── H2.js │ ├── H3.d.ts │ ├── H3.js │ ├── List.d.ts │ ├── List.js │ ├── PhotoSource.d.ts │ ├── PhotoSource.js │ ├── Quote.d.ts │ ├── Quote.js │ ├── Source.d.ts │ ├── Source.js │ ├── Text.d.ts │ ├── Text.js │ ├── Timestamp.d.ts │ ├── Timestamp.js │ ├── Typography.d.ts │ ├── Typography.js │ ├── Typography.test.js │ ├── index.d.ts │ └── index.js ├── VisibilityAnimation │ ├── VisibilityAnimation.d.ts │ ├── VisibilityAnimation.js │ ├── VisibilityAnimation.test.js │ ├── index.d.ts │ └── index.js ├── constants │ ├── keys.js │ ├── overlay.js │ └── z-indexes.js ├── hoc │ ├── provide-render-to-layer.d.ts │ ├── provide-render-to-layer.js │ ├── render-to-layer.d.ts │ ├── render-to-layer.js │ ├── window-events.d.ts │ ├── window-events.js │ ├── z-index-stack.d.ts │ └── z-index-stack.js ├── icons │ ├── .eslintrc.json │ ├── forms │ │ ├── AddIcon.js │ │ ├── AppsIcon.js │ │ ├── ArchiveIcon.js │ │ ├── AttachIcon.js │ │ ├── AttentionIcon.js │ │ ├── AuthenticatorIcon.js │ │ ├── BlockIcon.js │ │ ├── BookIcon.js │ │ ├── BurgerIcon.js │ │ ├── CalendarIcon.js │ │ ├── CaretDownIcon.js │ │ ├── CaretUpIcon.js │ │ ├── ChartAreaIcon.js │ │ ├── ChartBarIcon.js │ │ ├── ChartLineIcon.js │ │ ├── ChartPieIcon.js │ │ ├── ChevronDownCompactIcon.js │ │ ├── ChevronDownIcon.js │ │ ├── ChevronLeftCompactIcon.js │ │ ├── ChevronLeftIcon.js │ │ ├── ChevronRightCompactIcon.js │ │ ├── ChevronRightIcon.js │ │ ├── ChevronUpCompactIcon.js │ │ ├── ChevronUpIcon.js │ │ ├── ClearCompactIcon.js │ │ ├── ClearIcon.js │ │ ├── ClockIcon.js │ │ ├── ClosedEyeIcon.js │ │ ├── CodeIcon.js │ │ ├── CommentIcon.js │ │ ├── CommentWriteIcon.js │ │ ├── ConfigIcon.js │ │ ├── CreditCardIcon.js │ │ ├── DialogIcon.js │ │ ├── DislikeIcon.js │ │ ├── DownloadIcon.js │ │ ├── DraftIcon.js │ │ ├── EditIcon.js │ │ ├── EllipsisIcon.js │ │ ├── EmailDoneIcon.js │ │ ├── EmailIcon.js │ │ ├── EmailReadIcon.js │ │ ├── EyeIcon.js │ │ ├── FaceIcon.js │ │ ├── FilterFillIcon.js │ │ ├── FilterIcon.js │ │ ├── FolderIcon.js │ │ ├── FontMinusIcon.js │ │ ├── FontPlusIcon.js │ │ ├── ForwardIcon.js │ │ ├── FullscreenExitIcon.js │ │ ├── FullscreenIcon.js │ │ ├── GiftIcon.js │ │ ├── GlobeIcon.js │ │ ├── GridIcon.js │ │ ├── GroupAddIcon.js │ │ ├── GroupIcon.js │ │ ├── GuideIcon.js │ │ ├── HelpIcon.js │ │ ├── HistoryIcon.js │ │ ├── HoldIcon.js │ │ ├── IdeaIcon.js │ │ ├── InfoIcon.js │ │ ├── KeyboardIcon.js │ │ ├── LayoutFullIcon.js │ │ ├── LayoutIcon.js │ │ ├── LayoutWideIcon.js │ │ ├── LikeIcon.js │ │ ├── LoadIcon.js │ │ ├── LockFillIcon.js │ │ ├── LockIcon.js │ │ ├── LockOpenIcon.js │ │ ├── LockOutlineIcon.js │ │ ├── LoginIcon.js │ │ ├── LogoutIcon.js │ │ ├── MinusCompactIcon.js │ │ ├── MinusIcon.js │ │ ├── MonologIcon.js │ │ ├── MoveIcon.js │ │ ├── NotebookIcon.js │ │ ├── NotificationIcon.js │ │ ├── OpenIcon.js │ │ ├── OutboxIcon.js │ │ ├── PauseIcon.js │ │ ├── PercentIcon.js │ │ ├── PersonFillIcon.js │ │ ├── PersonIcon.js │ │ ├── PhoneIcon.js │ │ ├── PhotoCameraIcon.js │ │ ├── PlayIcon.js │ │ ├── PlusCompactIcon.js │ │ ├── PlusIcon.js │ │ ├── PrintIcon.js │ │ ├── PrivacyIcon.js │ │ ├── PurchaseIcon.js │ │ ├── QuestionIcon.js │ │ ├── RecordIcon.js │ │ ├── RedoIcon.js │ │ ├── RefreshIcon.js │ │ ├── RemoveIcon.js │ │ ├── ReplyAllIcon.js │ │ ├── ReplyIcon.js │ │ ├── RobotIcon.js │ │ ├── SaveIcon.js │ │ ├── SearchIcon.js │ │ ├── SendIcon.js │ │ ├── SettingsIcon.js │ │ ├── ShareIcon.js │ │ ├── SmileIcon.js │ │ ├── SortIcon.js │ │ ├── StarCrossIcon.js │ │ ├── StarFillIcon.js │ │ ├── StarIcon.js │ │ ├── StickerIcon.js │ │ ├── TickIcon.js │ │ ├── UndoIcon.js │ │ ├── UserIcon.js │ │ ├── VolumeIcon.js │ │ ├── VolumeMuteIcon.js │ │ ├── WizardIcon.js │ │ ├── index.d.ts │ │ └── index.js │ ├── index.d.ts │ ├── index.js │ ├── profiles │ │ ├── AppleIcon.js │ │ ├── ChampionatIcon.js │ │ ├── FacebookIcon.js │ │ ├── GoogleIcon.js │ │ ├── InstagramIcon.js │ │ ├── LivejournalIcon.js │ │ ├── MailruIcon.js │ │ ├── OdnoklassnikiIcon.js │ │ ├── PgumosruIcon.js │ │ ├── RamblerIcon.js │ │ ├── RssIcon.js │ │ ├── SberbankIcon.js │ │ ├── TelegramIcon.js │ │ ├── TwitterIcon.js │ │ ├── VkontakteIcon.js │ │ ├── YoutubeIcon.js │ │ ├── index.d.ts │ │ └── index.js │ └── services │ │ ├── RamblerAfishaIcon.js │ │ ├── RamblerAutoIcon.js │ │ ├── RamblerBrowserIcon.js │ │ ├── RamblerClassIcon.js │ │ ├── RamblerDoctorIcon.js │ │ ├── RamblerFinanceIcon.js │ │ ├── RamblerGamesIcon.js │ │ ├── RamblerHeadIcon.js │ │ ├── RamblerHelpIcon.js │ │ ├── RamblerHoroscopesIcon.js │ │ ├── RamblerKassaIcon.js │ │ ├── RamblerLikesIcon.js │ │ ├── RamblerLiveIcon.js │ │ ├── RamblerLoveIcon.js │ │ ├── RamblerMailIcon.js │ │ ├── RamblerMoneyIcon.js │ │ ├── RamblerNewsIcon.js │ │ ├── RamblerOrganizationsIcon.js │ │ ├── RamblerPicturesIcon.js │ │ ├── RamblerPromoCodesIcon.js │ │ ├── RamblerRadioIcon.js │ │ ├── RamblerSearchIcon.js │ │ ├── RamblerSoftIcon.js │ │ ├── RamblerSportIcon.js │ │ ├── RamblerStarLifeIcon.js │ │ ├── RamblerTVIcon.js │ │ ├── RamblerTop100Icon.js │ │ ├── RamblerTravelIcon.js │ │ ├── RamblerVideoIcon.js │ │ ├── RamblerWeatherIcon.js │ │ ├── RamblerWeekendIcon.js │ │ ├── RamblerWomanIcon.js │ │ ├── index.d.ts │ │ └── index.js ├── index.d.ts ├── index.js ├── index.test.js ├── theme │ ├── ThemeProvider.d.ts │ ├── ThemeProvider.js │ ├── base.js │ ├── colors.js │ ├── create-theme.d.ts │ ├── create-theme.js │ ├── create-use-styles.js │ ├── i18n.js │ ├── index.d.ts │ ├── index.js │ ├── index.test.js │ ├── jss.d.ts │ ├── jss.js │ ├── with-base-theme.js │ └── with-styles.js └── utils │ ├── DOM.d.ts │ ├── DOM.js │ ├── browser.js │ ├── colors.js │ ├── compose.js │ ├── createGetMemoizedRef.js │ ├── focus-source.js │ ├── get-display-name.js │ ├── mixins.js │ ├── raf.js │ └── uuid.js ├── static ├── brand.png ├── components.png ├── favicon-32x32.png ├── guidelines.png ├── hiring-mobile.png ├── hiring.png ├── index.html ├── intro-mobile.png ├── intro.png ├── products.png └── share-ratio.png ├── test ├── init.js └── utils.js └── tsconfig.json /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | indent_size = 2 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | build 3 | -------------------------------------------------------------------------------- /.eslintrc.typescript.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "./.eslintrc.json", 4 | "plugin:@typescript-eslint/recommended", 5 | "prettier/@typescript-eslint" 6 | ], 7 | "parser": "@typescript-eslint/parser" 8 | } 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | *.log 4 | *.css.json 5 | local_font/ 6 | .publish 7 | build/ 8 | npm-debug.*.* 9 | .idea/ 10 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | build/ 3 | *.css.json 4 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "singleQuote": true, 4 | "bracketSpacing": false, 5 | "jsxBracketSameLine": true 6 | } 7 | -------------------------------------------------------------------------------- /.size-limit.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "The initial cost people pay for using one component with commonjs build", 4 | "limit": "30 KB", 5 | "path": ["build/Button/index.js", "!build/**/*.test.js"] 6 | }, 7 | { 8 | "name": "The initial cost people pay for using one component with es build", 9 | "limit": "27 KB", 10 | "path": "build/es/index.js", 11 | "import": "{Button}" 12 | }, 13 | { 14 | "name": "The size of the commonjs library components", 15 | "limit": "109 KB", 16 | "path": [ 17 | "build/**/*.js", 18 | "!build/icons/**/*.js", 19 | "!build/es/**/*.js", 20 | "!build/index.js", 21 | "!build/**/*.test.js" 22 | ] 23 | }, 24 | { 25 | "name": "The size of the commonjs library build with all icons", 26 | "limit": "149 KB", 27 | "path": "build/index.js" 28 | }, 29 | { 30 | "name": "The size of the es library build with all icons", 31 | "limit": "138 KB", 32 | "path": "build/es/index.js" 33 | } 34 | ] 35 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Rambler UI 2 | 3 | > Общие React компоненты для проектов вертикалей Рамблера. 4 | 5 | ## Установка 6 | 7 | ```sh 8 | npm install --save rambler-ui 9 | ``` 10 | 11 | ## Использование 12 | 13 | ```js 14 | // src/index.js 15 | import React from 'react' 16 | import {render} from 'react-dom' 17 | import App from './App' 18 | 19 | render(, document.getElementById('app')) 20 | 21 | // src/App.js 22 | import React from 'react' 23 | import Button from 'rambler-ui/Button' 24 | 25 | export default () => ( 26 |
27 | 30 |
31 | ) 32 | ``` 33 | 34 | Более подробно про установку и использование можно прочитать в [документации](https://ui-kit.rambler.ru/#/usage/install) и в описании [API компонентов](https://ui-kit.rambler.ru/#/components/Avatar). 35 | 36 | ## [Разработка](https://ui-kit.rambler.ru/#/usage/contribute) 37 | 38 | ## Лицензия 39 | 40 | MIT 41 | -------------------------------------------------------------------------------- /docs/components/H1.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import {withStyles, fontFamily} from 'docs/utils/theming' 4 | 5 | const styles = { 6 | root: { 7 | margin: 0, 8 | fontFamily: fontFamily.Roboto, 9 | fontSize: 40, 10 | fontWeight: 300, 11 | lineHeight: '50px', 12 | overflow: 'hidden', 13 | textOverflow: 'ellipsis' 14 | } 15 | } 16 | 17 | const H1 = ({classes, style, children}) => ( 18 |

19 | {children} 20 |

21 | ) 22 | 23 | H1.propTypes = { 24 | children: PropTypes.node 25 | } 26 | 27 | export default withStyles(styles)(H1) 28 | -------------------------------------------------------------------------------- /docs/components/H2.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import {withStyles, fontFamily} from 'docs/utils/theming' 4 | 5 | const styles = { 6 | root: { 7 | marginTop: 40, 8 | marginBottom: 25, 9 | fontFamily: fontFamily.CorsicaRamblerLX, 10 | fontSize: 35, 11 | fontWeight: 500, 12 | lineHeight: '35px' 13 | } 14 | } 15 | 16 | const H2 = ({classes, children}) =>

{children}

17 | 18 | H2.propTypes = { 19 | children: PropTypes.node 20 | } 21 | 22 | export default withStyles(styles)(H2) 23 | -------------------------------------------------------------------------------- /docs/components/H3.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import {withStyles, fontFamily} from 'docs/utils/theming' 4 | 5 | const styles = { 6 | root: { 7 | marginTop: 40, 8 | marginBottom: 10, 9 | fontFamily: fontFamily.CorsicaRamblerLX, 10 | fontSize: 25, 11 | fontWeight: 500, 12 | lineHeight: '35px' 13 | } 14 | } 15 | 16 | const H3 = ({classes, children}) =>

{children}

17 | 18 | H3.propTypes = { 19 | children: PropTypes.node 20 | } 21 | 22 | export default withStyles(styles)(H3) 23 | -------------------------------------------------------------------------------- /docs/components/InlineCode.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import {withStyles, fontFamily} from 'docs/utils/theming' 4 | 5 | const styles = { 6 | root: { 7 | display: 'inline', 8 | padding: '.2em .3em', 9 | backgroundColor: 'rgba(238, 242, 244, .5)', 10 | fontFamily: fontFamily.Menlo, 11 | fontSize: '92%', 12 | lineHeight: '18px' 13 | } 14 | } 15 | 16 | const InlineCode = ({classes, children}) => ( 17 | {children} 18 | ) 19 | 20 | InlineCode.propTypes = { 21 | children: PropTypes.node 22 | } 23 | 24 | export default withStyles(styles)(InlineCode) 25 | -------------------------------------------------------------------------------- /docs/components/PreCode.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import {withStyles, fontFamily} from 'docs/utils/theming' 4 | 5 | const styles = { 6 | root: { 7 | padding: '14px 25px 14px 20px', 8 | overflow: 'auto', 9 | backgroundColor: 'rgba(238, 242, 244, .5)', 10 | fontFamily: fontFamily.Menlo, 11 | fontSize: 13, 12 | lineHeight: '18px', 13 | '& code': { 14 | padding: 0, 15 | backgroundColor: 'transparent', 16 | fontFamily: 'inherit' 17 | } 18 | } 19 | } 20 | 21 | const PreCode = ({classes, children}) => ( 22 | 
{children}
23 | ) 24 | 25 | PreCode.propTypes = { 26 | children: PropTypes.node 27 | } 28 | 29 | export default withStyles(styles)(PreCode) 30 | -------------------------------------------------------------------------------- /docs/components/Route.js: -------------------------------------------------------------------------------- 1 | import React, {PureComponent} from 'react' 2 | import PropTypes from 'prop-types' 3 | import {Route as DomRoute} from 'react-router-dom' 4 | 5 | export default class Route extends PureComponent { 6 | static propTypes = { 7 | /** 8 | * Адрес 9 | */ 10 | path: PropTypes.string 11 | } 12 | 13 | component = null 14 | 15 | async componentDidMount() { 16 | let {path} = this.props 17 | const {default: component} = await import( 18 | /* webpackMode: "lazy" */ `docs/pages${path}` 19 | ) 20 | this.component = component 21 | this.forceUpdate() 22 | } 23 | 24 | render() { 25 | return 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /docs/components/icons/Arrow.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import SvgIcon from 'rambler-ui/SvgIcon' 4 | 5 | export default function ArrowIcon({color, ...props}) { 6 | return ( 7 | 13 | 14 | 15 | ) 16 | } 17 | 18 | ArrowIcon.propTypes = { 19 | color: PropTypes.string 20 | } 21 | -------------------------------------------------------------------------------- /docs/components/icons/Chevron.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import SvgIcon from 'rambler-ui/SvgIcon' 3 | 4 | /* eslint-disable max-len */ 5 | export default function ChevronIcon(props) { 6 | return ( 7 | 8 | 9 | 10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /docs/components/icons/Medium.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import SvgIcon from 'rambler-ui/SvgIcon' 3 | 4 | /* eslint-disable max-len */ 5 | export default function MediumIcon(props) { 6 | return ( 7 | 8 | 9 | 10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /docs/components/icons/Sketch.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import SvgIcon from 'rambler-ui/SvgIcon' 3 | 4 | /* eslint-disable max-len */ 5 | export default function SketchIcon(props) { 6 | return ( 7 | 8 | 9 | 13 | 17 | 22 | 23 | ) 24 | } 25 | -------------------------------------------------------------------------------- /docs/config.js: -------------------------------------------------------------------------------- 1 | import env from /* preval */ './lib/env' 2 | 3 | const targets = env.targets 4 | let config = env 5 | 6 | if (targets) { 7 | const targetConfig = targets[location.hostname] 8 | if (targetConfig) config = {...config, ...targetConfig} 9 | delete config.targets 10 | } 11 | 12 | export default config 13 | -------------------------------------------------------------------------------- /docs/lib/env.js: -------------------------------------------------------------------------------- 1 | /* eslint-env node */ 2 | const cp = require('child_process') 3 | 4 | const {NODE_ENV = 'development', CI_COMMIT_REF_NAME} = process.env 5 | 6 | const base = { 7 | repo: 'git@gitlab.rambler.ru:rambler-ui/rambler-ui', 8 | branch: 9 | CI_COMMIT_REF_NAME || 10 | cp 11 | .execSync('git rev-parse --abbrev-ref HEAD') 12 | .toString() 13 | .trim() 14 | } 15 | 16 | let env 17 | 18 | if (NODE_ENV === 'development') 19 | env = { 20 | repoLink: 'https://github.com/rambler-digital-solutions/rambler-ui/', 21 | pathPrefix: '' 22 | } 23 | 24 | if (NODE_ENV === 'production') 25 | env = { 26 | targets: { 27 | 'rambler-ui.pages.rambler-co.ru': { 28 | repoLink: 'https://gitlab.rambler.ru/rambler-ui/rambler-ui/', 29 | pathPrefix: '/rambler-ui' 30 | }, 31 | 'ui-kit.rambler.ru': { 32 | repoLink: 'https://github.com/rambler-digital-solutions/rambler-ui/', 33 | pathPrefix: '' 34 | } 35 | } 36 | } 37 | 38 | module.exports = Object.assign({}, base, env) 39 | -------------------------------------------------------------------------------- /docs/page-list.js: -------------------------------------------------------------------------------- 1 | import components from /* preval */ './lib/component-list' 2 | 3 | export default [ 4 | { 5 | title: 'Компоненты', 6 | path: '/components', 7 | children: components 8 | }, 9 | { 10 | title: 'Как использовать', 11 | path: '/usage', 12 | children: [ 13 | { 14 | title: 'Установка', 15 | path: '/usage/install' 16 | }, 17 | { 18 | title: 'Разработка', 19 | path: '/usage/contribute' 20 | } 21 | ] 22 | } 23 | ] 24 | -------------------------------------------------------------------------------- /docs/pages/components/Avatar/index.md: -------------------------------------------------------------------------------- 1 | import examplesCode from '!!raw-loader!./examples' 2 | import code from '!!raw-loader!rambler-ui/Avatar/Avatar' 3 | 4 | import Playground from 'docs/components/Playground' 5 | import PropTypesTable from 'docs/components/PropTypesTable' 6 | 7 | # Avatar 8 | 9 | ### Пример 10 | 11 | 12 | ### Свойства `` 13 | 14 | -------------------------------------------------------------------------------- /docs/pages/components/Button/examples-react-router.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import {Link} from 'react-router-dom' 3 | import Button from 'rambler-ui/Button' 4 | 5 | export default function ButtonRouterExample() { 6 | return ( 7 |
8 | 9 |
10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /docs/pages/components/Button/index.md: -------------------------------------------------------------------------------- 1 | import examplesCode from '!!raw-loader!./examples' 2 | import examplesCodeRouter from '!!raw-loader!./examples-react-router' 3 | import code from '!!raw-loader!rambler-ui/Button/Button' 4 | 5 | import Playground from 'docs/components/Playground' 6 | import PropTypesTable from 'docs/components/PropTypesTable' 7 | 8 | # Button 9 | 10 | ### Пример 11 | 12 | 13 | ### Пример использования с `react-router` 14 | 15 | 16 | ### Свойства `