├── .eslintignore ├── .github └── FUNDING.yml ├── library ├── pages │ ├── Designs │ │ ├── chat.md │ │ ├── team.md │ │ ├── admin.md │ │ ├── findBook.md │ │ ├── authentication.md │ │ ├── comingSoon.md │ │ ├── notFound404.md │ │ ├── createProfile.md │ │ ├── socialIconsSet.md │ │ └── rainbowComponents.md │ ├── designs.md │ ├── gettingStarted.md │ └── experiencesExamples.md ├── styleguideComponents │ ├── ToolbarButton │ │ └── styles.css │ ├── TableOfContents │ │ └── index.js │ ├── PropsTable │ │ └── renderers │ │ │ ├── propTypeEnum.js │ │ │ ├── propTypeShape.js │ │ │ ├── propTypeUnion.js │ │ │ └── propTypeArrayOf.js │ ├── ComponentsList │ │ └── styled.js │ └── ProjectSelector │ │ └── get-library-version.js ├── ga.js └── utils │ └── filterSectionsByName.js ├── __mocks__ └── assetsMock.js ├── .prettierignore ├── .npmignore ├── assets ├── favicon.ico ├── share-image.png └── images │ ├── user │ ├── user1.jpg │ ├── user2.jpg │ ├── user3.jpg │ └── user4.jpg │ ├── designsImages │ ├── admin.png │ ├── chat.png │ ├── team.png │ ├── social.png │ ├── find-book.png │ ├── coming-soon.png │ ├── not-found-404.png │ ├── authentication.png │ ├── create-profile.png │ └── rainbow-components.png │ └── illustrations │ └── Illustration-zoomableImage.jpg ├── src ├── libs │ ├── utils │ │ ├── isServer.d.ts │ │ ├── uniqueId.d.ts │ │ ├── getBrowserLocale.d.ts │ │ ├── getSuffixSI.d.ts │ │ ├── getLocale.d.ts │ │ ├── getLocale.js │ │ ├── uniqueId.js │ │ ├── index.js │ │ ├── getBrowserLocale.js │ │ ├── isServer.js │ │ └── __test__ │ │ │ └── uniqueId.spec.js │ ├── hooks │ │ ├── useTheme.d.ts │ │ ├── useLocale.d.ts │ │ ├── useLabelId.d.ts │ │ ├── useUniqueIdentifier.d.ts │ │ ├── useErrorMessageId.d.ts │ │ ├── useWindowResize.d.ts │ │ ├── useChildrenRegister │ │ │ └── helpers │ │ │ │ ├── isChildRegistered.js │ │ │ │ ├── index.js │ │ │ │ └── getChildNodes.js │ │ ├── useIsomorphicLayoutEffect.d.ts │ │ ├── useUniqueIdentifier.js │ │ ├── useIsomorphicLayoutEffect.js │ │ ├── useDisclosure.d.ts │ │ ├── usePrevious.js │ │ └── useLabelId.js │ ├── manageTab │ │ └── index.d.ts │ ├── debounce │ │ ├── index.d.ts │ │ └── index.js │ ├── hocs │ │ ├── withDebounce │ │ │ └── index.d.ts │ │ ├── withReduxForm │ │ │ └── index.d.ts │ │ └── withRainbowTheme │ │ │ └── index.d.ts │ ├── ResizeSensor │ │ └── index.d.ts │ ├── WindowResize │ │ └── index.d.ts │ ├── scrollController │ │ ├── windowScrolling.d.ts │ │ └── index.d.ts │ ├── counterManager │ │ └── index.d.ts │ └── outsideClick │ │ └── index.d.ts ├── styles │ ├── helpers │ │ ├── color │ │ │ ├── isDark.d.ts │ │ │ ├── hexToRgb.d.ts │ │ │ ├── hslToRgb.d.ts │ │ │ ├── hsvToRgb.d.ts │ │ │ ├── rgbToHsv.d.ts │ │ │ ├── isHexColor.d.ts │ │ │ ├── isHsvColor.d.ts │ │ │ ├── rgbaToHex.d.ts │ │ │ ├── rgbaToRgb.d.ts │ │ │ ├── bound01.d.ts │ │ │ ├── colorToRgba.d.ts │ │ │ ├── getLuminance.d.ts │ │ │ ├── darken.d.ts │ │ │ ├── getBrightness.d.ts │ │ │ ├── isPercentage.d.ts │ │ │ ├── isValidColor.d.ts │ │ │ ├── clamp.d.ts │ │ │ ├── hexToRgba.d.ts │ │ │ ├── isOnePointZero.d.ts │ │ │ ├── lighten.d.ts │ │ │ ├── rgbToRgba.d.ts │ │ │ ├── getContrastText.d.ts │ │ │ ├── clamp.js │ │ │ ├── replaceAlpha.d.ts │ │ │ ├── isPercentage.js │ │ │ ├── getContrastRatio.d.ts │ │ │ ├── isDark.js │ │ │ ├── isHexColor.js │ │ │ ├── isOnePointZero.js │ │ │ ├── recomposeColor.d.ts │ │ │ ├── decomposeColor.d.ts │ │ │ ├── rgbaToRgb.js │ │ │ ├── replaceAlpha.js │ │ │ ├── isValidColor.js │ │ │ ├── getContrastRatio.js │ │ │ ├── rgbToRgba.js │ │ │ └── getBrightness.js │ │ ├── normalizeThemeColors.d.ts │ │ ├── getTheme.js │ │ ├── normalizeTheme.d.ts │ │ ├── attachThemeAttrs.d.ts │ │ ├── getTheme.d.ts │ │ └── attachThemeAttrs.js │ ├── defaultTheme.d.ts │ ├── zIndex.d.ts │ ├── zIndex.js │ ├── margins.d.ts │ ├── margins.js │ ├── paddings.d.ts │ ├── paddings.js │ ├── borderRadius.d.ts │ ├── borderRadius.js │ └── shadows.d.ts └── components │ ├── GMap │ ├── context.js │ ├── styled │ │ ├── coordinatesContainer.js │ │ └── container.js │ ├── getMapContainerStyles.js │ └── index.d.ts │ ├── Tabset │ ├── context.js │ └── styled │ │ └── observer.js │ ├── Tree │ ├── helpers │ │ ├── getNodePath.js │ │ ├── getLastVisibleNodeName.js │ │ ├── isPrintableCharacter.js │ │ ├── getNodeLevel.js │ │ ├── getNodeName.js │ │ ├── getNode.js │ │ ├── findExpandableNodesAtLevel.js │ │ └── getTabIndex.js │ ├── context.js │ └── styled │ │ ├── innerContainer.js │ │ ├── inputCheckbox.js │ │ ├── treeContainerUl.js │ │ ├── iconContainer.js │ │ ├── spinnerContainer.js │ │ └── button.js │ ├── Avatar │ ├── normalizeInitials.js │ └── styled │ │ └── image.js │ ├── InternalDropdown │ ├── context.js │ └── helpers │ │ ├── scrollTo.js │ │ ├── isEmptyObject.js │ │ ├── isChildRegistered.js │ │ ├── getChildMenuItemNodes.js │ │ ├── isScrollPositionAtMenuBottom.js │ │ └── isChecked.js │ ├── VerticalSection │ ├── context.js │ ├── styled │ │ ├── container.js │ │ └── ul.js │ └── index.d.ts │ ├── VisualPicker │ ├── context.js │ └── styled │ │ ├── optionsContainer.js │ │ └── container.js │ ├── Chart │ ├── context.js │ ├── styled │ │ ├── datasetContainer.js │ │ └── container.js │ └── helpers │ │ ├── unregisterGlobalPlugins.js │ │ └── getPluginsConf.js │ ├── Input │ ├── inputBase │ │ ├── icons │ │ │ └── index.js │ │ ├── styled │ │ │ └── index.js │ │ └── __test__ │ │ │ └── input.focusable.spec.js │ ├── inputRadio │ │ ├── styled │ │ │ └── container.js │ │ └── __test__ │ │ │ └── input.focusable.spec.js │ ├── inputCheckbox │ │ ├── styled │ │ │ └── container.js │ │ └── __test__ │ │ │ └── input.focusable.spec.js │ ├── styled │ │ └── container.js │ ├── helpers │ │ └── getValueAlignment.js │ ├── __test__ │ │ └── input.focusable.spec.js │ └── pickerInput │ │ ├── styled │ │ └── input.js │ │ └── __test__ │ │ └── input.focusable.spec.js │ ├── ProgressIndicator │ ├── context.js │ └── styled │ │ └── container.js │ ├── VerticalNavigation │ └── context.js │ ├── VerticalSectionOverflow │ ├── context.js │ ├── styled │ │ └── ul.js │ └── getMaxHeight.js │ ├── ColorPicker │ ├── variants │ │ └── index.js │ ├── context.js │ ├── commons │ │ ├── saturation │ │ │ └── helpers │ │ │ │ └── index.js │ │ └── index.js │ └── styled.js │ ├── CarouselCard │ ├── helpers │ │ ├── index.js │ │ ├── getHeight.js │ │ └── getItemIndex.js │ ├── context.js │ └── styled │ │ ├── autoplay.js │ │ ├── indicatorLi.js │ │ ├── indicatorsUl.js │ │ ├── autoplayButton.js │ │ └── container.js │ ├── CurrencyInput │ ├── helpers │ │ ├── countCharacters.js │ │ ├── isValidStringNumber.js │ │ ├── clearValue.js │ │ └── isValidNumberValue.js │ └── hooks │ │ ├── index.js │ │ ├── useGroupSeparator.js │ │ └── useDecimalSeparator.js │ ├── WeeklyCalendar │ ├── helpers │ │ ├── getHeightOfMinutes.js │ │ ├── addWeeks.js │ │ ├── getLastDayOfWeek.js │ │ ├── getHeightOfDate.js │ │ └── __test__ │ │ │ └── addWeeks.spec.js │ ├── week │ │ ├── helpers │ │ │ ├── getDiffMinutes.js │ │ │ └── getEventsOfDay.js │ │ ├── styled │ │ │ ├── eventTitle.js │ │ │ ├── eventItem.js │ │ │ ├── grid.js │ │ │ ├── scroll.js │ │ │ ├── clockLine.js │ │ │ └── line.js │ │ └── hooks │ │ │ ├── useEventsOfDay.js │ │ │ ├── useClockLineStyle.js │ │ │ ├── useEventDuration.js │ │ │ └── useFormattedEventStartDate.js │ ├── header │ │ ├── hooks │ │ │ ├── index.js │ │ │ ├── useFormatedWeekDay.js │ │ │ └── useFormattedNumberDay.js │ │ └── styled │ │ │ ├── weekDay.js │ │ │ └── numberDay.js │ ├── hooks │ │ ├── useCurrentWeek.js │ │ ├── useClockStyle.js │ │ └── useFormattedWeek.js │ └── styled │ │ ├── content.js │ │ └── titleHour.js │ ├── AccordionSection │ ├── helpers │ │ ├── isInArray.js │ │ ├── removeItemFromArray.js │ │ ├── index.js │ │ └── getIsExpanded.js │ └── styled │ │ ├── span.js │ │ └── icon.js │ ├── Path │ ├── helpers │ │ ├── index.js │ │ └── getChildStepsNodes.js │ ├── context.js │ └── index.d.ts │ ├── Table │ ├── helpers │ │ ├── resizer │ │ │ ├── getWidthStyle.js │ │ │ ├── hasNoFlexibleColumns.js │ │ │ ├── getTableWidth.js │ │ │ ├── index.js │ │ │ ├── getColumnWidthFromDef.js │ │ │ └── getMinExpectedTableWidth.js │ │ ├── selector │ │ │ ├── isSelectedRow.js │ │ │ ├── getUpdatedRowsWhenDeselectAll.js │ │ │ └── getCurrentSelectionLength.js │ │ ├── rows │ │ │ ├── index.js │ │ │ ├── getRowIndexByKey.js │ │ │ ├── getRowSelectionInputType.js │ │ │ └── getIndexes.js │ │ ├── data │ │ │ └── index.js │ │ └── sort │ │ │ └── index.js │ ├── styled │ │ ├── container.js │ │ └── thead.js │ ├── body │ │ └── styled │ │ │ └── td.js │ └── head │ │ └── styled │ │ └── content.js │ ├── CodeInput │ ├── helpers │ │ ├── setFocus.js │ │ ├── isNumeric.js │ │ ├── getNumbersFromClipboard.js │ │ └── index.js │ └── hooks │ │ ├── index.js │ │ ├── usePreviousIndex.js │ │ └── useValueState.js │ ├── PercentInput │ └── helpers │ │ └── index.js │ ├── Application │ ├── context.js │ └── index.d.ts │ ├── Drawer │ ├── helpers │ │ └── getSlideFrom.js │ └── styled │ │ ├── footer.js │ │ ├── closeButton.js │ │ └── content.js │ ├── Lookup │ ├── helpers │ │ ├── isMenuOpen.js │ │ ├── formatValue.js │ │ ├── isScrollPositionAtMenuBottom.js │ │ ├── getOptionsLength.js │ │ ├── isNavigationKey.js │ │ └── isOptionVisible.js │ ├── options │ │ └── styled │ │ │ ├── li.js │ │ │ ├── icon.js │ │ │ └── searchIcon.js │ ├── styled │ │ ├── inputContainer.js │ │ ├── chipContainer.js │ │ ├── selectedIconContainer.js │ │ ├── container.js │ │ ├── spinner.js │ │ ├── selectedValueContainer.js │ │ ├── closeIcon.js │ │ ├── searchIcon.js │ │ ├── closeButton.js │ │ └── chip.js │ └── __test__ │ │ └── lookup.focusable.spec.js │ ├── PathStep │ ├── helpers │ │ ├── index.js │ │ ├── getActiveStepIndex.js │ │ └── isStepSelected.js │ └── index.d.ts │ ├── Calendar │ ├── context.js │ ├── helpers │ │ ├── isSameDatesRange.js │ │ ├── addDays.js │ │ ├── addMonths.js │ │ ├── isDateBelowLimit.js │ │ ├── isDateBeyondLimit.js │ │ ├── normalizeDate.js │ │ ├── isInArray.js │ │ ├── isEmptyRange.js │ │ ├── getSign.js │ │ ├── getLastDayMonth.js │ │ ├── __test__ │ │ │ ├── addDays.spec.js │ │ │ └── addMonths.spec.js │ │ ├── compareDates.js │ │ ├── normalizeDates.js │ │ ├── getFormattedMonth.js │ │ ├── getCalendarBounds.js │ │ ├── getFormattedDayName.js │ │ └── isDateWithinRange.js │ ├── styled │ │ ├── table.js │ │ ├── monthContainer.js │ │ └── controlsContainer.js │ ├── doubleCalendar │ │ ├── hooks │ │ │ └── useFormattedMonth.js │ │ └── helpers │ │ │ └── shouldUpdateCurrentMonth.js │ └── hooks │ │ ├── index.js │ │ ├── useCurrentDateFromValue.js │ │ └── useRangeStartDate.js │ ├── TimePicker │ ├── helpers │ │ ├── getHour.js │ │ ├── getAmPm.js │ │ ├── getMinutes.js │ │ ├── getDefaultAmPm.js │ │ ├── getNextAmPmValue.js │ │ ├── isNumber.js │ │ ├── getNextMinute.js │ │ ├── getPrevMinute.js │ │ ├── getInputValue.js │ │ ├── isChecked.js │ │ ├── getNextHour.js │ │ ├── normalizeMinutes.js │ │ └── getPrevHour.js │ ├── styled │ │ ├── container.js │ │ ├── button.js │ │ ├── footer.js │ │ ├── upArrow.js │ │ └── downArrow.js │ └── __test__ │ │ └── timePicker.focusable.spec.js │ ├── Accordion │ ├── context.js │ └── styled │ │ └── ul.js │ ├── Breadcrumb │ ├── styled │ │ └── li.js │ └── index.d.ts │ ├── MapMarker │ ├── styled │ │ └── li.js │ └── index.d.ts │ ├── Pagination │ ├── styled │ │ ├── li.js │ │ ├── nav.js │ │ ├── getPageBorderRadius.js │ │ └── paginationContainer.js │ └── getFirstItem.js │ ├── ActivityTimeline │ ├── helpers │ │ ├── index.js │ │ └── getChildTimelineMarkersNodes.js │ └── context.js │ ├── CounterInput │ └── helpers │ │ ├── getNormalizedValue.js │ │ ├── getValue.js │ │ ├── isButtonDisabled.js │ │ ├── isMax.js │ │ └── isMin.js │ ├── PhoneInput │ ├── helpers │ │ ├── index.js │ │ └── findCountryByIsoCode.js │ ├── customWarning.js │ ├── countriesDropdown │ │ ├── helpers │ │ │ ├── index.js │ │ │ ├── isScrollPositionAtScrollable.js │ │ │ └── getNewIndex.js │ │ └── hooks │ │ │ └── useItemsRef.js │ └── hooks │ │ ├── useCountry.js │ │ └── useHandleBlur.js │ ├── TimelineMarker │ └── styled │ │ ├── body.js │ │ ├── li.js │ │ ├── contentContainer.js │ │ ├── header.js │ │ ├── iconContainer.js │ │ └── spinnerContainer.js │ ├── WeekDayPicker │ └── helpers │ │ ├── getWeekDays.js │ │ └── isWeekDayChecked.js │ ├── Button │ ├── styled │ │ ├── content.js │ │ └── spinner.js │ └── __test__ │ │ └── button.focusable.spec.js │ ├── PrimitiveMenu │ └── context.js │ ├── ProgressCircular │ ├── styled │ │ ├── svg.js │ │ ├── ringPath.js │ │ └── container.js │ ├── normalizeValue.js │ └── index.d.ts │ ├── DateTimePicker │ ├── styled │ │ ├── container.js │ │ ├── header.js │ │ └── calendar.js │ ├── helpers │ │ └── isValidDate.js │ └── __test__ │ │ └── dateTimePicker.focusable.spec.js │ ├── MonthlyCalendar │ ├── context.js │ ├── hooks │ │ ├── index.js │ │ ├── useFormattedMonth.js │ │ └── useCurrentMonth.js │ └── styled │ │ ├── dayContent.js │ │ ├── controlsContainer.js │ │ ├── monthContainer.js │ │ └── table.js │ ├── Structural │ ├── relativeElement.js │ ├── inlineBlockElement.js │ ├── truncatedText.js │ └── index.js │ ├── ButtonGroupPicker │ └── context.js │ ├── Breadcrumbs │ ├── styled │ │ └── nav.js │ └── index.d.ts │ ├── FileSelector │ ├── types.js │ ├── icons │ │ └── index.js │ └── helpers │ │ └── getText.js │ ├── VerticalItem │ └── styled │ │ ├── notification.js │ │ └── label.js │ ├── HelpText │ └── helpers │ │ └── getIconSize.js │ ├── VisualPickerOption │ ├── styled │ │ ├── container.js │ │ ├── footer.js │ │ └── label.js │ └── index.d.ts │ ├── ImportRecordsFlow │ ├── styled │ │ ├── table.js │ │ ├── footer.js │ │ ├── backButton.js │ │ └── nextButton.js │ ├── stepThree │ │ └── styled │ │ │ ├── footer.js │ │ │ ├── chip.js │ │ │ ├── table.js │ │ │ ├── select.js │ │ │ ├── cancelButton.js │ │ │ ├── cancelIcon.js │ │ │ └── modalContainer.js │ ├── stepTwo │ │ └── styled │ │ │ ├── fileCardContent.js │ │ │ ├── spinnerContainer.js │ │ │ ├── buttonIcon.js │ │ │ └── dropTitle.js │ ├── helpers │ │ ├── getPluralization.js │ │ └── getAssignFieldsData.js │ ├── stepOne │ │ └── styled │ │ │ ├── styledSelect.js │ │ │ ├── visualPicker.js │ │ │ └── container.js │ └── stepFour │ │ └── styled │ │ ├── statsCardContent.js │ │ ├── styledTooltipText.js │ │ ├── statsCardDescriptionContainer.js │ │ └── statsLeftContainer.js │ ├── ColorInput │ └── helpers │ │ └── getHexString.js │ ├── Picklist │ ├── helpers │ │ ├── getNormalizeValue.js │ │ └── shouldOpenMenu.js │ └── styled │ │ └── innerContainer.js │ ├── ProgressBar │ ├── normalizeValue.js │ └── index.d.ts │ ├── RadioGroup │ └── styled │ │ ├── itemContainer.js │ │ └── fieldset.js │ ├── RenderIf │ └── index.d.ts │ ├── Slider │ ├── styled │ │ ├── slider.js │ │ ├── container.js │ │ └── label.js │ └── __test__ │ │ └── slider.focusable.spec.js │ ├── Sidebar │ ├── styled │ │ ├── nav.js │ │ └── ul.js │ └── context.js │ ├── StripeCardInput │ └── helpers │ │ ├── index.js │ │ ├── getError.js │ │ └── getElementsOptions.js │ ├── CheckboxGroup │ ├── isOptionSelected.js │ └── styled │ │ └── fieldset.js │ ├── RadioButtonGroup │ ├── helpers │ │ └── isOptionChecked.js │ └── styled │ │ └── errorText.js │ ├── InternalOverlay │ └── helpers │ │ ├── resolveElement.js │ │ ├── resolverTopLeft.js │ │ └── resolverTopRight.js │ ├── MenuDivider │ └── index.d.ts │ ├── Select │ ├── styled │ │ └── container.js │ └── __test__ │ │ └── select.focusable.spec.js │ ├── Textarea │ ├── styled │ │ └── container.js │ └── __test__ │ │ └── textarea.focusable.spec.js │ ├── ReCaptcha │ ├── getUrl.js │ └── styled │ │ └── container.js │ ├── MultiSelect │ └── helpers │ │ ├── getSizeButton.js │ │ ├── hasContent.js │ │ ├── index.js │ │ └── getContent.js │ ├── PrimitiveCheckbox │ ├── styled │ │ └── container.js │ └── __test__ │ │ └── input.focusable.spec.js │ ├── ButtonMenu │ └── styled │ │ ├── styledLeftIcon.js │ │ └── styledRightIcon.js │ ├── Card │ ├── styled │ │ ├── icon.js │ │ └── header.js │ └── __test__ │ │ └── headerTitle.spec.js │ ├── Modal │ └── styled │ │ ├── header.js │ │ └── content.js │ ├── Option │ └── styled │ │ ├── input.js │ │ ├── iconContainer.js │ │ └── button.js │ ├── ProgressStep │ ├── styled │ │ └── inactiveIcon.js │ └── index.d.ts │ ├── SidebarItem │ └── styled │ │ └── icon.js │ ├── MenuItem │ └── styled │ │ ├── iconContainer.js │ │ └── header.js │ ├── TableWithBrowserPagination │ ├── styled │ │ └── container.js │ └── helpers │ │ └── getPageItems.js │ ├── VisualPickerOptionFooter │ ├── styled │ │ └── container.js │ └── index.d.ts │ ├── GoogleAddressLookup │ └── styled │ │ ├── poweredByGoogleLogo.js │ │ ├── optionLabel.js │ │ ├── optionTyping.js │ │ └── poweredByGoogleContainer.js │ ├── Notification │ └── styled │ │ └── closeButton.js │ ├── CarouselImage │ └── styled │ │ ├── image.js │ │ └── imageFooter.js │ ├── Spinner │ ├── helpers │ │ └── getSizeValue.js │ └── styled │ │ └── childContainer.js │ ├── LoadingShape │ └── index.d.ts │ ├── PresenceMap │ ├── styled │ │ └── controls.js │ └── getMapContainerStyles.js │ ├── ButtonOption │ ├── helpers │ │ └── isOptionSelected.js │ └── styled │ │ └── divider.js │ ├── MarkdownOutput │ └── index.d.ts │ ├── Column │ └── __test__ │ │ └── column.spec.js │ ├── StrongPasswordInput │ └── hooks │ │ └── usePasswordState.js │ ├── RainbowThemeContainer │ └── index.d.ts │ ├── ButtonIcon │ └── __test__ │ │ └── buttonIcon.focusable.spec.js │ ├── Dataset │ └── index.d.ts │ ├── DatePicker │ └── __test__ │ │ └── datePicker.focusable.spec.js │ ├── ServerApplication │ └── index.d.ts │ ├── Tab │ └── index.d.ts │ ├── CheckboxToggle │ └── __test__ │ │ └── checkboxToggle.focusable.spec.js │ ├── AvatarMenu │ └── __test__ │ │ └── avatarButton.focusable.spec.js │ └── ButtonGroup │ └── index.d.ts ├── .firebaserc ├── .prettierrc ├── examples └── create-react-app │ ├── public │ ├── favicon.ico │ └── assets │ │ └── images │ │ ├── user1.jpg │ │ ├── user2.jpg │ │ ├── user3.jpg │ │ └── user4.jpg │ ├── src │ ├── setupTests.js │ ├── pages │ │ ├── SignIn │ │ │ └── media-queries.css │ │ ├── Spinner │ │ │ └── index.js │ │ └── ReduxForm │ │ │ └── styles.css │ └── index.js │ └── .gitignore ├── firebase.json ├── jestMatchers └── utils.js ├── axe.js ├── scripts └── search │ ├── algoliaClient.js │ └── jsParser.js ├── integration └── helpers │ ├── releaseKey.js │ └── holdDownKey.js └── jsdoc.conf.js /.eslintignore: -------------------------------------------------------------------------------- 1 | src/**/*.d.ts -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | github: nexxtway 2 | -------------------------------------------------------------------------------- /library/pages/Designs/chat.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /library/pages/Designs/team.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /__mocks__/assetsMock.js: -------------------------------------------------------------------------------- 1 | module.exports = {}; 2 | -------------------------------------------------------------------------------- /library/pages/designs.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /library/pages/Designs/admin.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /library/pages/Designs/findBook.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | *.css.map 2 | *.css 3 | *.scss 4 | *.md 5 | -------------------------------------------------------------------------------- /library/pages/Designs/authentication.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /library/pages/Designs/comingSoon.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /library/pages/Designs/notFound404.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /library/pages/gettingStarted.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /library/pages/Designs/createProfile.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /library/pages/Designs/socialIconsSet.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /library/pages/Designs/rainbowComponents.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /library/pages/experiencesExamples.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | src 2 | examples 3 | library 4 | styleguide 5 | assets 6 | integration 7 | .env 8 | -------------------------------------------------------------------------------- /assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nexxtway/react-rainbow/HEAD/assets/favicon.ico -------------------------------------------------------------------------------- /src/libs/utils/isServer.d.ts: -------------------------------------------------------------------------------- 1 | declare const isServer: boolean; 2 | export default isServer; 3 | -------------------------------------------------------------------------------- /assets/share-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nexxtway/react-rainbow/HEAD/assets/share-image.png -------------------------------------------------------------------------------- /src/libs/hooks/useTheme.d.ts: -------------------------------------------------------------------------------- 1 | declare function useTheme(): Record; 2 | export default useTheme; 3 | -------------------------------------------------------------------------------- /src/libs/utils/uniqueId.d.ts: -------------------------------------------------------------------------------- 1 | declare function uniqueId(prefix?: string): string; 2 | export default uniqueId; 3 | -------------------------------------------------------------------------------- /assets/images/user/user1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nexxtway/react-rainbow/HEAD/assets/images/user/user1.jpg -------------------------------------------------------------------------------- /assets/images/user/user2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nexxtway/react-rainbow/HEAD/assets/images/user/user2.jpg -------------------------------------------------------------------------------- /assets/images/user/user3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nexxtway/react-rainbow/HEAD/assets/images/user/user3.jpg -------------------------------------------------------------------------------- /assets/images/user/user4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nexxtway/react-rainbow/HEAD/assets/images/user/user4.jpg -------------------------------------------------------------------------------- /src/styles/helpers/color/isDark.d.ts: -------------------------------------------------------------------------------- 1 | declare function isDark(color: string): boolean; 2 | export default isDark; 3 | -------------------------------------------------------------------------------- /src/libs/hooks/useLocale.d.ts: -------------------------------------------------------------------------------- 1 | declare function useLocale(localProp?: string): string; 2 | export default useLocale; 3 | -------------------------------------------------------------------------------- /src/libs/utils/getBrowserLocale.d.ts: -------------------------------------------------------------------------------- 1 | declare function getBrowserLocale(): string; 2 | export default getBrowserLocale; 3 | -------------------------------------------------------------------------------- /src/libs/utils/getSuffixSI.d.ts: -------------------------------------------------------------------------------- 1 | declare function getSuffixSI(number?: number): string; 2 | export default getSuffixSI; 3 | -------------------------------------------------------------------------------- /src/styles/helpers/color/hexToRgb.d.ts: -------------------------------------------------------------------------------- 1 | declare function hexToRgb(color: string): string; 2 | export default hexToRgb; 3 | -------------------------------------------------------------------------------- /src/styles/helpers/color/hslToRgb.d.ts: -------------------------------------------------------------------------------- 1 | declare function hslToRgb(color: string): string; 2 | export default hslToRgb; 3 | -------------------------------------------------------------------------------- /src/styles/helpers/color/hsvToRgb.d.ts: -------------------------------------------------------------------------------- 1 | declare function hsvToRgb(color: string): string; 2 | export default hsvToRgb; 3 | -------------------------------------------------------------------------------- /src/styles/helpers/color/rgbToHsv.d.ts: -------------------------------------------------------------------------------- 1 | declare function rgbToHsv(color: string): string; 2 | export default rgbToHsv; 3 | -------------------------------------------------------------------------------- /.firebaserc: -------------------------------------------------------------------------------- 1 | { 2 | "projects": { 3 | "react-rainbow": "react-rainbow", 4 | "default": "react-rainbow" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /src/styles/helpers/color/isHexColor.d.ts: -------------------------------------------------------------------------------- 1 | declare function isHexColor(color: string): boolean; 2 | export default isHexColor; 3 | -------------------------------------------------------------------------------- /src/styles/helpers/color/isHsvColor.d.ts: -------------------------------------------------------------------------------- 1 | declare function isHsvColor(color: string): boolean; 2 | export default isHsvColor; 3 | -------------------------------------------------------------------------------- /src/styles/helpers/color/rgbaToHex.d.ts: -------------------------------------------------------------------------------- 1 | declare function rgbaToHex(color: string): string; 2 | export default rgbaToHex; 3 | -------------------------------------------------------------------------------- /src/styles/helpers/color/rgbaToRgb.d.ts: -------------------------------------------------------------------------------- 1 | declare function rgbaToRgb(color: string): string; 2 | export default rgbaToRgb; 3 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 100, 3 | "tabWidth": 4, 4 | "singleQuote": true, 5 | "trailingComma": "all" 6 | } 7 | -------------------------------------------------------------------------------- /assets/images/designsImages/admin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nexxtway/react-rainbow/HEAD/assets/images/designsImages/admin.png -------------------------------------------------------------------------------- /assets/images/designsImages/chat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nexxtway/react-rainbow/HEAD/assets/images/designsImages/chat.png -------------------------------------------------------------------------------- /assets/images/designsImages/team.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nexxtway/react-rainbow/HEAD/assets/images/designsImages/team.png -------------------------------------------------------------------------------- /src/components/GMap/context.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export const { Provider, Consumer } = React.createContext(); 4 | -------------------------------------------------------------------------------- /src/components/Tabset/context.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export const { Provider, Consumer } = React.createContext(); 4 | -------------------------------------------------------------------------------- /src/libs/hooks/useLabelId.d.ts: -------------------------------------------------------------------------------- 1 | declare function useLabelId(label?: unknown): string | undefined; 2 | export default useLabelId; 3 | -------------------------------------------------------------------------------- /src/styles/helpers/color/bound01.d.ts: -------------------------------------------------------------------------------- 1 | declare function bound01(value: number, max: number): number; 2 | export default bound01; 3 | -------------------------------------------------------------------------------- /src/styles/helpers/color/colorToRgba.d.ts: -------------------------------------------------------------------------------- 1 | declare function colorToRgba(color: string): string; 2 | export default colorToRgba; 3 | -------------------------------------------------------------------------------- /src/styles/helpers/color/getLuminance.d.ts: -------------------------------------------------------------------------------- 1 | declare function getLuminance(color: string): number; 2 | export default getLuminance; 3 | -------------------------------------------------------------------------------- /assets/images/designsImages/social.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nexxtway/react-rainbow/HEAD/assets/images/designsImages/social.png -------------------------------------------------------------------------------- /src/components/Tree/helpers/getNodePath.js: -------------------------------------------------------------------------------- 1 | export default function getNodePath(nodePath) { 2 | return nodePath.join('.'); 3 | } 4 | -------------------------------------------------------------------------------- /src/libs/utils/getLocale.d.ts: -------------------------------------------------------------------------------- 1 | declare function getLocale(context?: unknown, localProp?: string): string; 2 | export default getLocale; 3 | -------------------------------------------------------------------------------- /src/styles/helpers/color/darken.d.ts: -------------------------------------------------------------------------------- 1 | declare function darken(color: string, coefficient?: number): string; 2 | export default darken; 3 | -------------------------------------------------------------------------------- /src/styles/helpers/color/getBrightness.d.ts: -------------------------------------------------------------------------------- 1 | declare function getBrightness(color: string): number; 2 | export default getBrightness; 3 | -------------------------------------------------------------------------------- /src/styles/helpers/color/isPercentage.d.ts: -------------------------------------------------------------------------------- 1 | declare function isPercentage(value?: string): boolean; 2 | export default isPercentage; 3 | -------------------------------------------------------------------------------- /src/styles/helpers/color/isValidColor.d.ts: -------------------------------------------------------------------------------- 1 | declare function isValidColor(color?: string): boolean; 2 | export default isValidColor; 3 | -------------------------------------------------------------------------------- /assets/images/designsImages/find-book.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nexxtway/react-rainbow/HEAD/assets/images/designsImages/find-book.png -------------------------------------------------------------------------------- /src/components/Avatar/normalizeInitials.js: -------------------------------------------------------------------------------- 1 | export default function normalizeInitials(initials) { 2 | return initials.slice(0, 2); 3 | } 4 | -------------------------------------------------------------------------------- /src/components/InternalDropdown/context.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export const { Provider, Consumer } = React.createContext(); 4 | -------------------------------------------------------------------------------- /src/components/VerticalSection/context.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export const { Provider, Consumer } = React.createContext(); 4 | -------------------------------------------------------------------------------- /src/components/VisualPicker/context.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export const { Provider, Consumer } = React.createContext(); 4 | -------------------------------------------------------------------------------- /src/styles/helpers/color/clamp.d.ts: -------------------------------------------------------------------------------- 1 | declare function clamp(value: number, min?: number, max?: number): number; 2 | export default clamp; 3 | -------------------------------------------------------------------------------- /src/styles/helpers/color/hexToRgba.d.ts: -------------------------------------------------------------------------------- 1 | declare function hexToRgba(color: string, alpha?: number): string; 2 | export default hexToRgba; 3 | -------------------------------------------------------------------------------- /src/styles/helpers/color/isOnePointZero.d.ts: -------------------------------------------------------------------------------- 1 | declare function isOnePointZero(value?: string): boolean; 2 | export default isOnePointZero; 3 | -------------------------------------------------------------------------------- /src/styles/helpers/color/lighten.d.ts: -------------------------------------------------------------------------------- 1 | declare function lighten(color: string, coefficient?: number): string; 2 | export default lighten; 3 | -------------------------------------------------------------------------------- /src/styles/helpers/color/rgbToRgba.d.ts: -------------------------------------------------------------------------------- 1 | declare function rgbToRgba(color: string, alpha?: number): string; 2 | export default rgbToRgba; 3 | -------------------------------------------------------------------------------- /assets/images/designsImages/coming-soon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nexxtway/react-rainbow/HEAD/assets/images/designsImages/coming-soon.png -------------------------------------------------------------------------------- /assets/images/designsImages/not-found-404.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nexxtway/react-rainbow/HEAD/assets/images/designsImages/not-found-404.png -------------------------------------------------------------------------------- /examples/create-react-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nexxtway/react-rainbow/HEAD/examples/create-react-app/public/favicon.ico -------------------------------------------------------------------------------- /src/components/Chart/context.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const ChartContext = React.createContext(); 4 | export default ChartContext; 5 | -------------------------------------------------------------------------------- /src/components/Input/inputBase/icons/index.js: -------------------------------------------------------------------------------- 1 | export { default as Eye } from './eye'; 2 | export { default as EyeClosed } from './eyeClosed'; 3 | -------------------------------------------------------------------------------- /src/components/ProgressIndicator/context.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export const { Provider, Consumer } = React.createContext(); 4 | -------------------------------------------------------------------------------- /src/components/VerticalNavigation/context.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export const { Provider, Consumer } = React.createContext(); 4 | -------------------------------------------------------------------------------- /src/libs/hooks/useUniqueIdentifier.d.ts: -------------------------------------------------------------------------------- 1 | declare function useUniqueIdentifier(prefix?: string): string; 2 | export default useUniqueIdentifier; 3 | -------------------------------------------------------------------------------- /src/styles/helpers/color/getContrastText.d.ts: -------------------------------------------------------------------------------- 1 | declare function getContrastText(background: string): string; 2 | export default getContrastText; 3 | -------------------------------------------------------------------------------- /assets/images/designsImages/authentication.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nexxtway/react-rainbow/HEAD/assets/images/designsImages/authentication.png -------------------------------------------------------------------------------- /assets/images/designsImages/create-profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nexxtway/react-rainbow/HEAD/assets/images/designsImages/create-profile.png -------------------------------------------------------------------------------- /src/components/InternalDropdown/helpers/scrollTo.js: -------------------------------------------------------------------------------- 1 | export default function scrollTo(ref, offset) { 2 | ref.current.scrollTo(0, offset); 3 | } 4 | -------------------------------------------------------------------------------- /src/components/VerticalSectionOverflow/context.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export const { Provider, Consumer } = React.createContext(); 4 | -------------------------------------------------------------------------------- /src/libs/hooks/useErrorMessageId.d.ts: -------------------------------------------------------------------------------- 1 | declare function useErrorMessageId(error: unknown): string | undefined; 2 | export default useErrorMessageId; 3 | -------------------------------------------------------------------------------- /src/libs/manageTab/index.d.ts: -------------------------------------------------------------------------------- 1 | declare function manageTab(node: HTMLElement, event: React.KeyboardEvent): void; 2 | export default manageTab; 3 | -------------------------------------------------------------------------------- /src/styles/defaultTheme.d.ts: -------------------------------------------------------------------------------- 1 | import { RainbowTheme } from '../styled'; 2 | 3 | const defaultTheme: RainbowTheme; 4 | export default defaultTheme; 5 | -------------------------------------------------------------------------------- /src/styles/helpers/color/clamp.js: -------------------------------------------------------------------------------- 1 | export default function clamp(value, min = 0, max = 1) { 2 | return Math.min(Math.max(min, value), max); 3 | } 4 | -------------------------------------------------------------------------------- /src/styles/helpers/color/replaceAlpha.d.ts: -------------------------------------------------------------------------------- 1 | declare function replaceAlpha(color: string, alpha?: number): string; 2 | export default replaceAlpha; 3 | -------------------------------------------------------------------------------- /assets/images/designsImages/rainbow-components.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nexxtway/react-rainbow/HEAD/assets/images/designsImages/rainbow-components.png -------------------------------------------------------------------------------- /src/components/ColorPicker/variants/index.js: -------------------------------------------------------------------------------- 1 | export { default as Default } from './default'; 2 | export { default as ColorsFixed } from './colorsFixed'; 3 | -------------------------------------------------------------------------------- /src/libs/debounce/index.d.ts: -------------------------------------------------------------------------------- 1 | declare function debounce(callback: Function, time?: number): (...args: unknown[]) => void; 2 | 3 | export default debounce; 4 | -------------------------------------------------------------------------------- /src/components/CarouselCard/helpers/index.js: -------------------------------------------------------------------------------- 1 | export { default as getHeight } from './getHeight'; 2 | export { default as getItemIndex } from './getItemIndex'; 3 | -------------------------------------------------------------------------------- /src/components/CurrencyInput/helpers/countCharacters.js: -------------------------------------------------------------------------------- 1 | export default function countCharacters(str, char) { 2 | return str.split(char).length - 1; 3 | } 4 | -------------------------------------------------------------------------------- /src/components/WeeklyCalendar/helpers/getHeightOfMinutes.js: -------------------------------------------------------------------------------- 1 | export default function getHeightOfMinutes(minutes) { 2 | return (minutes * 960) / 1440; 3 | } 4 | -------------------------------------------------------------------------------- /src/components/AccordionSection/helpers/isInArray.js: -------------------------------------------------------------------------------- 1 | export default function isInArray(array, item) { 2 | return array.some(element => element === item); 3 | } 4 | -------------------------------------------------------------------------------- /src/components/Path/helpers/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/prefer-default-export */ 2 | export { default as getChildStepsNodes } from './getChildStepsNodes'; 3 | -------------------------------------------------------------------------------- /src/components/Table/helpers/resizer/getWidthStyle.js: -------------------------------------------------------------------------------- 1 | export default function getWidthStyle(pixels) { 2 | return pixels > 0 ? `width: ${pixels}px` : ''; 3 | } 4 | -------------------------------------------------------------------------------- /src/components/WeeklyCalendar/week/helpers/getDiffMinutes.js: -------------------------------------------------------------------------------- 1 | export default function getDiffMinutes(date1, date2) { 2 | return (date2 - date1) / 60000; 3 | } 4 | -------------------------------------------------------------------------------- /src/styles/helpers/color/isPercentage.js: -------------------------------------------------------------------------------- 1 | export default function isPercentage(value) { 2 | return typeof value === 'string' && value.indexOf('%') !== -1; 3 | } 4 | -------------------------------------------------------------------------------- /examples/create-react-app/public/assets/images/user1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nexxtway/react-rainbow/HEAD/examples/create-react-app/public/assets/images/user1.jpg -------------------------------------------------------------------------------- /examples/create-react-app/public/assets/images/user2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nexxtway/react-rainbow/HEAD/examples/create-react-app/public/assets/images/user2.jpg -------------------------------------------------------------------------------- /examples/create-react-app/public/assets/images/user3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nexxtway/react-rainbow/HEAD/examples/create-react-app/public/assets/images/user3.jpg -------------------------------------------------------------------------------- /examples/create-react-app/public/assets/images/user4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nexxtway/react-rainbow/HEAD/examples/create-react-app/public/assets/images/user4.jpg -------------------------------------------------------------------------------- /src/components/CodeInput/helpers/setFocus.js: -------------------------------------------------------------------------------- 1 | export default function setFocus(ref) { 2 | if (ref && ref.current) { 3 | ref.current.focus(); 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /src/libs/hocs/withDebounce/index.d.ts: -------------------------------------------------------------------------------- 1 | declare function withDebounce

(WrappedComponent: React.ComponentType

): React.Component

; 2 | export default withDebounce; 3 | -------------------------------------------------------------------------------- /src/libs/hocs/withReduxForm/index.d.ts: -------------------------------------------------------------------------------- 1 | declare function withReduxForm

(WrappedComponent: React.ComponentType

): React.Component

; 2 | export default withReduxForm; 3 | -------------------------------------------------------------------------------- /src/styles/helpers/color/getContrastRatio.d.ts: -------------------------------------------------------------------------------- 1 | declare function getContrastRatio(foreground: string, background: string): number; 2 | export default getContrastRatio; 3 | -------------------------------------------------------------------------------- /assets/images/illustrations/Illustration-zoomableImage.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nexxtway/react-rainbow/HEAD/assets/images/illustrations/Illustration-zoomableImage.jpg -------------------------------------------------------------------------------- /src/components/CurrencyInput/helpers/isValidStringNumber.js: -------------------------------------------------------------------------------- 1 | export default function isValidStringNumber(str) { 2 | return str === '-' || !Number.isNaN(Number(str)); 3 | } 4 | -------------------------------------------------------------------------------- /src/components/Input/inputBase/styled/index.js: -------------------------------------------------------------------------------- 1 | export { default as StyledInput } from './input'; 2 | export { default as TogglePasswordButton } from './togglePasswordButton'; 3 | -------------------------------------------------------------------------------- /src/components/InternalDropdown/helpers/isEmptyObject.js: -------------------------------------------------------------------------------- 1 | export default function isEmptyObject(obj) { 2 | return obj !== undefined && Object.keys(obj).length === 0; 3 | } 4 | -------------------------------------------------------------------------------- /src/components/Path/context.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export const PathContext = React.createContext(); 4 | export const { Provider, Consumer } = PathContext; 5 | -------------------------------------------------------------------------------- /src/components/PercentInput/helpers/index.js: -------------------------------------------------------------------------------- 1 | export { default as formatPercent } from './formatPercent'; 2 | export { default as normalizeValue } from './normalizeValue'; 3 | -------------------------------------------------------------------------------- /src/styles/zIndex.d.ts: -------------------------------------------------------------------------------- 1 | export const ZINDEX_SPINNER: 9000; 2 | export const ZINDEX_MODAL: 5000; 3 | export const ZINDEX_DRAWER: 5000; 4 | export const ZINDEX_OVERLAY: 5000; 5 | -------------------------------------------------------------------------------- /src/styles/zIndex.js: -------------------------------------------------------------------------------- 1 | export const ZINDEX_SPINNER = 9000; 2 | export const ZINDEX_MODAL = 5000; 3 | export const ZINDEX_DRAWER = 5000; 4 | export const ZINDEX_OVERLAY = 5000; 5 | -------------------------------------------------------------------------------- /examples/create-react-app/src/setupTests.js: -------------------------------------------------------------------------------- 1 | import { configure } from 'enzyme'; 2 | import Adapter from 'enzyme-adapter-react-16'; 3 | 4 | configure({ adapter: new Adapter() }); 5 | -------------------------------------------------------------------------------- /src/components/Application/context.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export const AppContext = React.createContext(); 4 | export const { Provider, Consumer } = AppContext; 5 | -------------------------------------------------------------------------------- /src/components/CarouselCard/helpers/getHeight.js: -------------------------------------------------------------------------------- 1 | const getHeight = ref => (ref && ref.parentNode && ref.parentNode.style.height ? '100%' : 340); 2 | 3 | export default getHeight; 4 | -------------------------------------------------------------------------------- /src/components/Drawer/helpers/getSlideFrom.js: -------------------------------------------------------------------------------- 1 | export default function getSlideFrom(value, fallback) { 2 | return ['left', 'right'].includes(value) ? value : fallback; 3 | } 4 | -------------------------------------------------------------------------------- /src/components/Lookup/helpers/isMenuOpen.js: -------------------------------------------------------------------------------- 1 | export default function isMenuOpen(options, isFocused) { 2 | return isFocused && Array.isArray(options) && !!options.length; 3 | } 4 | -------------------------------------------------------------------------------- /src/components/PathStep/helpers/index.js: -------------------------------------------------------------------------------- 1 | export { default as isStepSelected } from './isStepSelected'; 2 | export { default as getActiveStepIndex } from './getActiveStepIndex'; 3 | -------------------------------------------------------------------------------- /src/components/Table/helpers/resizer/hasNoFlexibleColumns.js: -------------------------------------------------------------------------------- 1 | export default function hasNoFlexibleColumns(widthsMeta) { 2 | return widthsMeta.totalFlexibleColumns === 0; 3 | } 4 | -------------------------------------------------------------------------------- /src/components/Tree/context.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export const TreeContext = React.createContext(); 4 | 5 | export const { Provider, Consumer } = TreeContext; 6 | -------------------------------------------------------------------------------- /src/styles/helpers/color/isDark.js: -------------------------------------------------------------------------------- 1 | import getBrightness from './getBrightness'; 2 | 3 | export default function isDark(color) { 4 | return getBrightness(color) < 128; 5 | } 6 | -------------------------------------------------------------------------------- /src/components/Calendar/context.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export const CalendarContext = React.createContext(); 4 | export const { Provider, Consumer } = CalendarContext; 5 | -------------------------------------------------------------------------------- /src/components/Calendar/helpers/isSameDatesRange.js: -------------------------------------------------------------------------------- 1 | export default function isSameDatesRange(range1, range2) { 2 | return JSON.stringify(range1) === JSON.stringify(range2); 3 | } 4 | -------------------------------------------------------------------------------- /src/components/Table/helpers/selector/isSelectedRow.js: -------------------------------------------------------------------------------- 1 | export default function isSelectedRow(selectedRowsKeys = {}, rowKeyValue) { 2 | return !!selectedRowsKeys[rowKeyValue]; 3 | } 4 | -------------------------------------------------------------------------------- /src/components/TimePicker/helpers/getHour.js: -------------------------------------------------------------------------------- 1 | export default function getHour(value) { 2 | if (value) { 3 | return value.split(':')[0]; 4 | } 5 | return ''; 6 | } 7 | -------------------------------------------------------------------------------- /src/styles/helpers/color/isHexColor.js: -------------------------------------------------------------------------------- 1 | const matcher = /^#[a-f0-9]{3}([a-f0-9]{3})?$/i; 2 | 3 | export default function isHexColor(string) { 4 | return matcher.test(string); 5 | } 6 | -------------------------------------------------------------------------------- /src/components/Accordion/context.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export const AccordionContext = React.createContext(); 4 | export const { Provider, Consumer } = AccordionContext; 5 | -------------------------------------------------------------------------------- /src/components/AccordionSection/helpers/removeItemFromArray.js: -------------------------------------------------------------------------------- 1 | export default function removeItemFromArray(array, item) { 2 | return array.filter(element => element !== item); 3 | } 4 | -------------------------------------------------------------------------------- /src/components/Breadcrumb/styled/li.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledLi = styled.li` 4 | box-sizing: border-box; 5 | `; 6 | 7 | export default StyledLi; 8 | -------------------------------------------------------------------------------- /src/components/MapMarker/styled/li.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledLi = styled.li` 4 | box-sizing: border-box; 5 | `; 6 | 7 | export default StyledLi; 8 | -------------------------------------------------------------------------------- /src/components/Pagination/styled/li.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledLi = styled.li` 4 | box-sizing: border-box; 5 | `; 6 | 7 | export default StyledLi; 8 | -------------------------------------------------------------------------------- /src/components/Table/helpers/resizer/getTableWidth.js: -------------------------------------------------------------------------------- 1 | export default function getTableWidth(columns = []) { 2 | return columns.reduce((seed, acc) => seed + acc.computedWidth, 0); 3 | } 4 | -------------------------------------------------------------------------------- /src/components/TimePicker/helpers/getAmPm.js: -------------------------------------------------------------------------------- 1 | export default function getAmPm(value) { 2 | if (value) { 3 | return value.split(' ')[1]; 4 | } 5 | return undefined; 6 | } 7 | -------------------------------------------------------------------------------- /src/components/AccordionSection/styled/span.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledSpan = styled.span` 4 | flex-grow: 1; 5 | `; 6 | 7 | export default StyledSpan; 8 | -------------------------------------------------------------------------------- /src/components/ActivityTimeline/helpers/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/prefer-default-export */ 2 | export { default as getChildTimelineMarkersNodes } from './getChildTimelineMarkersNodes'; 3 | -------------------------------------------------------------------------------- /src/components/ColorPicker/context.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export const ColorPickerContext = React.createContext(); 4 | export const { Provider, Consumer } = ColorPickerContext; 5 | -------------------------------------------------------------------------------- /src/components/CounterInput/helpers/getNormalizedValue.js: -------------------------------------------------------------------------------- 1 | const getNormalizedValue = number => { 2 | return parseFloat(number.toFixed(10)); 3 | }; 4 | 5 | export default getNormalizedValue; 6 | -------------------------------------------------------------------------------- /src/components/Lookup/options/styled/li.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledLi = styled.li` 4 | box-sizing: border-box; 5 | `; 6 | 7 | export default StyledLi; 8 | -------------------------------------------------------------------------------- /src/components/PhoneInput/helpers/index.js: -------------------------------------------------------------------------------- 1 | export { default as getCountryFromValue } from './getCountryFromValue'; 2 | export { default as findCountryByIsoCode } from './findCountryByIsoCode'; 3 | -------------------------------------------------------------------------------- /src/components/TimelineMarker/styled/body.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledBody = styled.div` 4 | margin: 0.5rem 0; 5 | `; 6 | 7 | export default StyledBody; 8 | -------------------------------------------------------------------------------- /src/components/WeekDayPicker/helpers/getWeekDays.js: -------------------------------------------------------------------------------- 1 | export default function getWeekDays() { 2 | return ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday']; 3 | } 4 | -------------------------------------------------------------------------------- /src/styles/helpers/color/isOnePointZero.js: -------------------------------------------------------------------------------- 1 | export default function isOnePointZero(value) { 2 | return typeof value === 'string' && value.indexOf('.') !== -1 && parseFloat(value) === 1; 3 | } 4 | -------------------------------------------------------------------------------- /src/components/Button/styled/content.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledContent = styled.span` 4 | visibility: hidden; 5 | `; 6 | 7 | export default StyledContent; 8 | -------------------------------------------------------------------------------- /src/components/CarouselCard/context.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export const CarouselCardContext = React.createContext(); 4 | export const { Provider, Consumer } = CarouselCardContext; 5 | -------------------------------------------------------------------------------- /src/components/CarouselCard/helpers/getItemIndex.js: -------------------------------------------------------------------------------- 1 | const getItemIndex = (children, id) => { 2 | return children.findIndex(child => child.id === id); 3 | }; 4 | 5 | export default getItemIndex; 6 | -------------------------------------------------------------------------------- /src/components/PhoneInput/helpers/findCountryByIsoCode.js: -------------------------------------------------------------------------------- 1 | export default function findCountryByIsoCode(isoCode, countries) { 2 | return countries.find(value => value.isoCode === isoCode); 3 | } 4 | -------------------------------------------------------------------------------- /src/components/PrimitiveMenu/context.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export const PrimitiveMenuContext = React.createContext(); 4 | export const { Provider, Consumer } = PrimitiveMenuContext; 5 | -------------------------------------------------------------------------------- /src/components/ProgressCircular/styled/svg.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledSvg = styled.svg` 4 | vertical-align: middle; 5 | `; 6 | 7 | export default StyledSvg; 8 | -------------------------------------------------------------------------------- /src/components/TimePicker/styled/container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledContainer = styled.div` 4 | width: 100%; 5 | `; 6 | 7 | export default StyledContainer; 8 | -------------------------------------------------------------------------------- /examples/create-react-app/src/pages/SignIn/media-queries.css: -------------------------------------------------------------------------------- 1 | @media (max-width: 600px) { 2 | .rainbow-sign-in_card-container { 3 | width: 100%; 4 | border-radius: 0; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /library/styleguideComponents/ToolbarButton/styles.css: -------------------------------------------------------------------------------- 1 | .react-rainbow-toolbar-button { 2 | position: absolute; 3 | right: 0; 4 | top: 12px; 5 | right: 16px; 6 | font-size: 1rem; 7 | } 8 | -------------------------------------------------------------------------------- /src/components/Calendar/helpers/addDays.js: -------------------------------------------------------------------------------- 1 | export default function addDays(date, days) { 2 | const ret = new Date(date); 3 | ret.setDate(ret.getDate() + days); 4 | return new Date(ret); 5 | } 6 | -------------------------------------------------------------------------------- /src/components/ColorPicker/commons/saturation/helpers/index.js: -------------------------------------------------------------------------------- 1 | export { default as calculateBright } from './calculateBright'; 2 | export { default as calculateSaturation } from './calculateSaturation'; 3 | -------------------------------------------------------------------------------- /src/components/DateTimePicker/styled/container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledContainer = styled.div` 4 | width: 100%; 5 | `; 6 | 7 | export default StyledContainer; 8 | -------------------------------------------------------------------------------- /src/components/Drawer/styled/footer.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledFooter = styled.footer` 4 | padding: 1rem 1.3125rem; 5 | `; 6 | 7 | export default StyledFooter; 8 | -------------------------------------------------------------------------------- /src/components/MonthlyCalendar/context.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export const MonthCalendarContext = React.createContext(); 4 | export const { Provider, Consumer } = MonthCalendarContext; 5 | -------------------------------------------------------------------------------- /src/components/TimePicker/helpers/getMinutes.js: -------------------------------------------------------------------------------- 1 | export default function getMinutes(value) { 2 | if (value) { 3 | return value.split(':')[1].split(' ')[0]; 4 | } 5 | return ''; 6 | } 7 | -------------------------------------------------------------------------------- /src/components/WeeklyCalendar/header/hooks/index.js: -------------------------------------------------------------------------------- 1 | export { default as useFormatedWeekDay } from './useFormatedWeekDay'; 2 | export { default as useFormattedNumberDay } from './useFormattedNumberDay'; 3 | -------------------------------------------------------------------------------- /src/libs/hooks/useWindowResize.d.ts: -------------------------------------------------------------------------------- 1 | declare function useWindowResize( 2 | handler: (this: Window, ev: UIEvent) => void, 3 | isListening?: boolean, 4 | ): void; 5 | export default useWindowResize; 6 | -------------------------------------------------------------------------------- /src/components/ActivityTimeline/context.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export const ActivityTimelineContext = React.createContext(); 4 | export const { Provider, Consumer } = ActivityTimelineContext; 5 | -------------------------------------------------------------------------------- /src/components/PhoneInput/customWarning.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-console */ 2 | export default function customWarning() { 3 | console.warn('You have entered an invalid country code or empty input'); 4 | } 5 | -------------------------------------------------------------------------------- /src/components/Structural/relativeElement.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const RelativeElement = styled.div` 4 | position: relative; 5 | `; 6 | 7 | export default RelativeElement; 8 | -------------------------------------------------------------------------------- /src/libs/hooks/useChildrenRegister/helpers/isChildRegistered.js: -------------------------------------------------------------------------------- 1 | const isChildRegistered = ({ children, id }) => children.findIndex(child => child.id === id) !== -1; 2 | 3 | export default isChildRegistered; 4 | -------------------------------------------------------------------------------- /src/components/ButtonGroupPicker/context.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export const ButtonGroupPickerContext = React.createContext(); 4 | export const { Provider, Consumer } = ButtonGroupPickerContext; 5 | -------------------------------------------------------------------------------- /src/components/Calendar/helpers/addMonths.js: -------------------------------------------------------------------------------- 1 | export default function addMonths(date, months) { 2 | const clone = new Date(date); 3 | clone.setMonth(date.getMonth() + months); 4 | return clone; 5 | } 6 | -------------------------------------------------------------------------------- /src/components/Calendar/helpers/isDateBelowLimit.js: -------------------------------------------------------------------------------- 1 | import compareDates from './compareDates'; 2 | 3 | export default function isDateBelowLimit(date, limit) { 4 | return compareDates(date, limit) < 0; 5 | } 6 | -------------------------------------------------------------------------------- /src/components/Calendar/helpers/isDateBeyondLimit.js: -------------------------------------------------------------------------------- 1 | import compareDates from './compareDates'; 2 | 3 | export default function isDateBeyondLimit(date, limit) { 4 | return compareDates(date, limit) > 0; 5 | } 6 | -------------------------------------------------------------------------------- /src/components/InternalDropdown/helpers/isChildRegistered.js: -------------------------------------------------------------------------------- 1 | export default function isChildRegistered(name, activeChildren) { 2 | return activeChildren.findIndex(child => child.name === name) !== -1; 3 | } 4 | -------------------------------------------------------------------------------- /src/components/Tabset/styled/observer.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledObserver = styled.div` 4 | width: 100%; 5 | height: 0; 6 | `; 7 | 8 | export default StyledObserver; 9 | -------------------------------------------------------------------------------- /src/components/Tree/helpers/getLastVisibleNodeName.js: -------------------------------------------------------------------------------- 1 | export default function getLastVisibleNodeName(nodes) { 2 | if (nodes.length === 0) return undefined; 3 | return nodes[nodes.length - 1].name; 4 | } 5 | -------------------------------------------------------------------------------- /src/components/Tree/helpers/isPrintableCharacter.js: -------------------------------------------------------------------------------- 1 | export default function isPrintableCharacter(str) { 2 | if (typeof str !== 'string') return false; 3 | return str.length === 1 && /\S/.test(str); 4 | } 5 | -------------------------------------------------------------------------------- /src/components/WeeklyCalendar/helpers/addWeeks.js: -------------------------------------------------------------------------------- 1 | export default function addWeeks(date, weeks) { 2 | const clone = new Date(date); 3 | clone.setDate(date.getDate() + weeks * 7); 4 | return clone; 5 | } 6 | -------------------------------------------------------------------------------- /src/libs/ResizeSensor/index.d.ts: -------------------------------------------------------------------------------- 1 | declare class ResizeSensor { 2 | constructor(element: Element, resizeListener: () => void); 3 | detach(): void; 4 | reset(): void; 5 | } 6 | export default ResizeSensor; 7 | -------------------------------------------------------------------------------- /src/styles/helpers/color/recomposeColor.d.ts: -------------------------------------------------------------------------------- 1 | declare function recomposeColor(color: { 2 | type: string; 3 | values: { type: string; values: number[] }; 4 | }): string; 5 | export default recomposeColor; 6 | -------------------------------------------------------------------------------- /src/styles/helpers/normalizeThemeColors.d.ts: -------------------------------------------------------------------------------- 1 | import { RainbowTheme } from '../../styled'; 2 | 3 | declare function normalizeThemeColors(theme: RainbowTheme): RainbowTheme; 4 | export default normalizeThemeColors; 5 | -------------------------------------------------------------------------------- /firebase.json: -------------------------------------------------------------------------------- 1 | { 2 | "hosting": { 3 | "public": "styleguide", 4 | "rewrites": [ 5 | { 6 | "source": "**", 7 | "destination": "/index.html" 8 | } 9 | ] 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /jestMatchers/utils.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/prefer-default-export */ 2 | 3 | export function eachShouldBeOneOrFunction(results) { 4 | return results.every(result => result === 1 || result === 'function'); 5 | } 6 | -------------------------------------------------------------------------------- /src/components/Breadcrumbs/styled/nav.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledNav = styled.nav` 4 | display: block; 5 | box-sizing: border-box; 6 | `; 7 | 8 | export default StyledNav; 9 | -------------------------------------------------------------------------------- /src/components/Chart/styled/datasetContainer.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledDatasetContainer = styled.div` 4 | display: none; 5 | `; 6 | 7 | export default StyledDatasetContainer; 8 | -------------------------------------------------------------------------------- /src/components/FileSelector/types.js: -------------------------------------------------------------------------------- 1 | import { isServer } from '../../libs/utils'; 2 | 3 | // eslint-disable-next-line import/prefer-default-export 4 | export const FileListType = isServer ? Object : window.FileList; 5 | -------------------------------------------------------------------------------- /src/components/Lookup/styled/inputContainer.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledInputContainer = styled.div` 4 | position: relative; 5 | `; 6 | 7 | export default StyledInputContainer; 8 | -------------------------------------------------------------------------------- /src/components/Pagination/styled/nav.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledNav = styled.nav` 4 | display: block; 5 | box-sizing: border-box; 6 | `; 7 | 8 | export default StyledNav; 9 | -------------------------------------------------------------------------------- /src/components/Path/helpers/getChildStepsNodes.js: -------------------------------------------------------------------------------- 1 | export default function getChildStepsNodes(ref) { 2 | if (ref) { 3 | return ref.querySelectorAll('li[role="option"]'); 4 | } 5 | return []; 6 | } 7 | -------------------------------------------------------------------------------- /src/components/Structural/inlineBlockElement.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const InlineBlockElement = styled.div` 4 | display: inline-block; 5 | `; 6 | 7 | export default InlineBlockElement; 8 | -------------------------------------------------------------------------------- /src/components/TimePicker/helpers/getDefaultAmPm.js: -------------------------------------------------------------------------------- 1 | export default function getDefaultAmPm(value) { 2 | const numberValue = Number(value); 3 | return numberValue > 11 && numberValue < 20 ? 'PM' : 'AM'; 4 | } 5 | -------------------------------------------------------------------------------- /src/components/TimePicker/helpers/getNextAmPmValue.js: -------------------------------------------------------------------------------- 1 | export default function getNextAmPmValue(value) { 2 | if (value === 'AM' || value === undefined) { 3 | return 'PM'; 4 | } 5 | return 'AM'; 6 | } 7 | -------------------------------------------------------------------------------- /src/components/TimelineMarker/styled/li.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledLi = styled.li` 4 | display: flex; 5 | box-sizing: border-box; 6 | `; 7 | 8 | export default StyledLi; 9 | -------------------------------------------------------------------------------- /src/components/VerticalItem/styled/notification.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledNotification = styled.span` 4 | margin-left: auto; 5 | `; 6 | 7 | export default StyledNotification; 8 | -------------------------------------------------------------------------------- /src/components/WeeklyCalendar/week/styled/eventTitle.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledEventTitle = styled.span` 4 | font-weight: 900; 5 | `; 6 | 7 | export default StyledEventTitle; 8 | -------------------------------------------------------------------------------- /src/styles/helpers/color/decomposeColor.d.ts: -------------------------------------------------------------------------------- 1 | declare function decomposeColor( 2 | color: string | { type: string; values: number[] }, 3 | ): { type: string; values: number[] }; 4 | export default decomposeColor; 5 | -------------------------------------------------------------------------------- /library/ga.js: -------------------------------------------------------------------------------- 1 | import ReactGA from 'react-ga'; 2 | 3 | ReactGA.initialize(process.env.REACT_APP_GA_ID, { 4 | testMode: process.env.NODE_ENV !== 'production' || process.env.CI, 5 | }); 6 | 7 | export default ReactGA; 8 | -------------------------------------------------------------------------------- /src/components/Calendar/helpers/normalizeDate.js: -------------------------------------------------------------------------------- 1 | export default function normalizeDate(date) { 2 | if (typeof date === 'string') { 3 | return new Date(date); 4 | } 5 | return date || new Date(); 6 | } 7 | -------------------------------------------------------------------------------- /src/components/Table/helpers/rows/index.js: -------------------------------------------------------------------------------- 1 | import getRows from './getRows'; 2 | import getIndexes from './getIndexes'; 3 | import getFieldValue from './getFieldValue'; 4 | 5 | export { getRows, getIndexes, getFieldValue }; 6 | -------------------------------------------------------------------------------- /src/components/Table/styled/container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledContainer = styled.div` 4 | position: relative; 5 | height: 100%; 6 | `; 7 | 8 | export default StyledContainer; 9 | -------------------------------------------------------------------------------- /src/components/TimePicker/helpers/isNumber.js: -------------------------------------------------------------------------------- 1 | const NUMBER_REGEX = /^[0-9]{0,8}$/; 2 | 3 | export default function isNumber(value) { 4 | return NUMBER_REGEX.test(value) && !Array.isArray(value) && value !== ''; 5 | } 6 | -------------------------------------------------------------------------------- /src/libs/WindowResize/index.d.ts: -------------------------------------------------------------------------------- 1 | declare class WindowResize { 2 | constructor(); 3 | startListening(callback: (event: UIEvent) => void): void; 4 | stopListening(): void; 5 | } 6 | export default WindowResize; 7 | -------------------------------------------------------------------------------- /src/libs/hocs/withRainbowTheme/index.d.ts: -------------------------------------------------------------------------------- 1 | declare function withRainbowTheme

( 2 | Component?: React.ComponentType

, 3 | theme?: object, 4 | ): React.FunctionComponent

; 5 | 6 | export default withRainbowTheme; 7 | -------------------------------------------------------------------------------- /src/styles/helpers/getTheme.js: -------------------------------------------------------------------------------- 1 | import defaultTheme from '../defaultTheme'; 2 | 3 | // TODO: make test to this function 4 | export default function getTheme(props) { 5 | return props.theme.rainbow || defaultTheme; 6 | } 7 | -------------------------------------------------------------------------------- /library/styleguideComponents/TableOfContents/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ComponentsList from './../ComponentsList'; 3 | 4 | export default function TableOfContents() { 5 | return ; 6 | } 7 | -------------------------------------------------------------------------------- /src/components/HelpText/helpers/getIconSize.js: -------------------------------------------------------------------------------- 1 | const ICON_SIZES = { 2 | small: 14, 3 | medium: 22, 4 | }; 5 | 6 | export default function getIconSize(size) { 7 | return ICON_SIZES[size] || ICON_SIZES.medium; 8 | } 9 | -------------------------------------------------------------------------------- /src/components/VisualPickerOption/styled/container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledContainer = styled.span` 4 | margin: 0 0.25rem 0.5rem 0.25rem; 5 | `; 6 | 7 | export default StyledContainer; 8 | -------------------------------------------------------------------------------- /src/components/VisualPickerOption/styled/footer.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledFooter = styled.span` 4 | width: 100%; 5 | padding-top: 0.5rem; 6 | `; 7 | 8 | export default StyledFooter; 9 | -------------------------------------------------------------------------------- /src/libs/utils/getLocale.js: -------------------------------------------------------------------------------- 1 | import getBrowserLocale from './getBrowserLocale'; 2 | 3 | export default function getLocale(context, localProp) { 4 | return localProp || (context && context.locale) || getBrowserLocale(); 5 | } 6 | -------------------------------------------------------------------------------- /src/libs/utils/uniqueId.js: -------------------------------------------------------------------------------- 1 | let idCounter = 0; 2 | 3 | export default function uniqueId(prefix) { 4 | // eslint-disable-line 5 | idCounter += 1; 6 | return prefix ? `${prefix}-${idCounter}` : String(idCounter); 7 | } 8 | -------------------------------------------------------------------------------- /library/styleguideComponents/PropsTable/renderers/propTypeEnum.js: -------------------------------------------------------------------------------- 1 | import buildEnumTypeList from './builders/enumTypeList'; 2 | 3 | export default function propTypeEnumRender(value) { 4 | return buildEnumTypeList(value); 5 | } 6 | -------------------------------------------------------------------------------- /src/components/ImportRecordsFlow/styled/table.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import Table from '../../Table'; 3 | 4 | const StyledTable = styled(Table)` 5 | margin: 0; 6 | `; 7 | 8 | export default StyledTable; 9 | -------------------------------------------------------------------------------- /src/components/InternalDropdown/helpers/getChildMenuItemNodes.js: -------------------------------------------------------------------------------- 1 | export default function getChildMenuItemNodes(ref) { 2 | if (ref) { 3 | return ref.querySelectorAll('div[role="option"]'); 4 | } 5 | return []; 6 | } 7 | -------------------------------------------------------------------------------- /src/components/Lookup/helpers/formatValue.js: -------------------------------------------------------------------------------- 1 | export default function formatValue(value) { 2 | if (typeof value === 'object' && value !== null && !Array.isArray(value)) { 3 | return value; 4 | } 5 | return {}; 6 | } 7 | -------------------------------------------------------------------------------- /src/components/Table/helpers/data/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/prefer-default-export */ 2 | 3 | export function normalizeData(data) { 4 | if (Array.isArray(data)) { 5 | return data; 6 | } 7 | return []; 8 | } 9 | -------------------------------------------------------------------------------- /src/components/Table/helpers/rows/getRowIndexByKey.js: -------------------------------------------------------------------------------- 1 | export default function getRowIndexByKey(indexes = {}, key = '') { 2 | if (!indexes[key]) { 3 | return undefined; 4 | } 5 | return indexes[key].rowIndex; 6 | } 7 | -------------------------------------------------------------------------------- /src/components/Calendar/helpers/isInArray.js: -------------------------------------------------------------------------------- 1 | import isSameDay from './isSameDay'; 2 | 3 | export default function isInArray(value, array) { 4 | if (!array) return false; 5 | return array.some(day => isSameDay(day, value)); 6 | } 7 | -------------------------------------------------------------------------------- /src/components/ColorInput/helpers/getHexString.js: -------------------------------------------------------------------------------- 1 | const getHexString = value => { 2 | if (typeof value !== 'string') return ''; 3 | return value.startsWith('#') ? value : `#${value}`; 4 | }; 5 | 6 | export default getHexString; 7 | -------------------------------------------------------------------------------- /src/components/Lookup/styled/chipContainer.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledChipContainer = styled.span` 4 | display: flex; 5 | align-items: center; 6 | `; 7 | 8 | export default StyledChipContainer; 9 | -------------------------------------------------------------------------------- /src/components/Picklist/helpers/getNormalizeValue.js: -------------------------------------------------------------------------------- 1 | export default function getNormalizeValue(value) { 2 | if (value && typeof value === 'object' && !Array.isArray(value)) { 3 | return value; 4 | } 5 | return {}; 6 | } 7 | -------------------------------------------------------------------------------- /src/components/WeeklyCalendar/week/styled/eventItem.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledEventItem = styled.div` 4 | max-height: 15px; 5 | overflow: hidden; 6 | `; 7 | 8 | export default StyledEventItem; 9 | -------------------------------------------------------------------------------- /src/libs/hooks/useIsomorphicLayoutEffect.d.ts: -------------------------------------------------------------------------------- 1 | declare function useIsomorphicLayoutEffect( 2 | effect: React.EffectCallback, 3 | deps?: React.DependencyList | undefined, 4 | ): void; 5 | export default useIsomorphicLayoutEffect; 6 | -------------------------------------------------------------------------------- /src/libs/hooks/useUniqueIdentifier.js: -------------------------------------------------------------------------------- 1 | import { useMemo } from 'react'; 2 | import { uniqueId } from '../utils'; 3 | 4 | export default function useUniqueIdentifier(prefix) { 5 | return useMemo(() => uniqueId(prefix), [prefix]); 6 | } 7 | -------------------------------------------------------------------------------- /src/components/AccordionSection/helpers/index.js: -------------------------------------------------------------------------------- 1 | export { default as isInArray } from './isInArray'; 2 | export { default as removeItemFromArray } from './removeItemFromArray'; 3 | export { default as getIsExpanded } from './getIsExpanded'; 4 | -------------------------------------------------------------------------------- /src/components/Button/styled/spinner.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import Spinner from '../../Spinner'; 3 | 4 | const StyledSpinner = styled(Spinner)` 5 | visibility: visible; 6 | `; 7 | 8 | export default StyledSpinner; 9 | -------------------------------------------------------------------------------- /src/components/CodeInput/helpers/isNumeric.js: -------------------------------------------------------------------------------- 1 | export default function isNumeric(value) { 2 | if (value) { 3 | // eslint-disable-next-line no-restricted-globals 4 | return !isNaN(value); 5 | } 6 | return false; 7 | } 8 | -------------------------------------------------------------------------------- /src/components/ImportRecordsFlow/stepThree/styled/footer.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledFooter = styled.div` 4 | display: flex; 5 | justify-content: flex-end; 6 | `; 7 | 8 | export default StyledFooter; 9 | -------------------------------------------------------------------------------- /src/components/ImportRecordsFlow/styled/footer.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledFooter = styled.footer` 4 | display: flex; 5 | justify-content: space-between; 6 | `; 7 | 8 | export default StyledFooter; 9 | -------------------------------------------------------------------------------- /src/components/Input/inputRadio/styled/container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledContainer = styled.div` 4 | display: inline-block; 5 | margin-bottom: 2px; 6 | `; 7 | 8 | export default StyledContainer; 9 | -------------------------------------------------------------------------------- /src/components/Lookup/styled/selectedIconContainer.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledSelectedIconContainer = styled.span` 4 | margin-right: 0.8rem; 5 | `; 6 | 7 | export default StyledSelectedIconContainer; 8 | -------------------------------------------------------------------------------- /src/components/Table/body/styled/td.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledTd = styled.td` 4 | padding: 0; 5 | text-align: left; 6 | box-sizing: border-box; 7 | `; 8 | 9 | export default StyledTd; 10 | -------------------------------------------------------------------------------- /src/libs/scrollController/windowScrolling.d.ts: -------------------------------------------------------------------------------- 1 | declare class WindowScrolling { 2 | constructor(); 3 | startListening(callback: (event: UIEvent) => void): void; 4 | stopListening(): void; 5 | } 6 | export default WindowScrolling; 7 | -------------------------------------------------------------------------------- /src/styles/helpers/normalizeTheme.d.ts: -------------------------------------------------------------------------------- 1 | import { DefaultTheme } from 'styled-components'; 2 | import { ThemeType } from '../../styled'; 3 | 4 | declare function normalizeTheme(theme: ThemeType): DefaultTheme; 5 | export default normalizeTheme; 6 | -------------------------------------------------------------------------------- /src/components/Calendar/helpers/isEmptyRange.js: -------------------------------------------------------------------------------- 1 | export default function isEmptyRange(range) { 2 | if (Array.isArray(range) && range.length > 0) { 3 | return range.filter(item => !!item).length === 0; 4 | } 5 | return true; 6 | } 7 | -------------------------------------------------------------------------------- /src/components/CodeInput/hooks/index.js: -------------------------------------------------------------------------------- 1 | export { default as useFocusedIndexState } from './useFocusedIndexState'; 2 | export { default as usePreviousIndex } from './usePreviousIndex'; 3 | export { default as useValueState } from './useValueState'; 4 | -------------------------------------------------------------------------------- /src/components/CurrencyInput/hooks/index.js: -------------------------------------------------------------------------------- 1 | export { default as useOptions } from './useOptions'; 2 | export { default as useDecimalSeparator } from './useDecimalSeparator'; 3 | export { default as useGroupSeparator } from './useGroupSeparator'; 4 | -------------------------------------------------------------------------------- /src/components/ImportRecordsFlow/stepThree/styled/chip.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import Chip from '../../../Chip'; 3 | 4 | const StyledChip = styled(Chip)` 5 | margin-right: 8px; 6 | `; 7 | 8 | export default StyledChip; 9 | -------------------------------------------------------------------------------- /src/components/Input/inputCheckbox/styled/container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledContainer = styled.div` 4 | display: inline-block; 5 | margin-bottom: 2px; 6 | `; 7 | 8 | export default StyledContainer; 9 | -------------------------------------------------------------------------------- /src/components/MonthlyCalendar/hooks/index.js: -------------------------------------------------------------------------------- 1 | export { default as useYearsRange } from './useYearsRange'; 2 | export { default as useCurrentMonth } from './useCurrentMonth'; 3 | export { default as useFormattedMonth } from './useFormattedMonth'; 4 | -------------------------------------------------------------------------------- /src/components/Pagination/styled/getPageBorderRadius.js: -------------------------------------------------------------------------------- 1 | const getPageBorderRadius = pages => { 2 | if (pages === 1) { 3 | return '100px'; 4 | } 5 | return '0 100px 100px 0'; 6 | }; 7 | 8 | export default getPageBorderRadius; 9 | -------------------------------------------------------------------------------- /src/components/ProgressBar/normalizeValue.js: -------------------------------------------------------------------------------- 1 | export default function normalizeValue(value) { 2 | if (value < 0) { 3 | return 0; 4 | } 5 | if (value > 100) { 6 | return 100; 7 | } 8 | return value; 9 | } 10 | -------------------------------------------------------------------------------- /src/components/RadioGroup/styled/itemContainer.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledItemContainer = styled.div` 4 | display: flex; 5 | flex-direction: column; 6 | `; 7 | 8 | export default StyledItemContainer; 9 | -------------------------------------------------------------------------------- /src/components/RenderIf/index.d.ts: -------------------------------------------------------------------------------- 1 | import { ReactNode } from 'react'; 2 | 3 | export interface RenderIfProps { 4 | isTrue?: any; 5 | children?: ReactNode; 6 | } 7 | 8 | export default function(props: RenderIfProps): JSX.Element | null; 9 | -------------------------------------------------------------------------------- /src/components/Slider/styled/slider.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledSlider = styled.div` 4 | display: flex; 5 | position: relative; 6 | width: 100%; 7 | `; 8 | 9 | export default StyledSlider; 10 | -------------------------------------------------------------------------------- /src/components/TimePicker/helpers/getNextMinute.js: -------------------------------------------------------------------------------- 1 | export default function getNextMinute(value) { 2 | const number = Number(value); 3 | if (!value || number === 59) { 4 | return '0'; 5 | } 6 | return String(number + 1); 7 | } 8 | -------------------------------------------------------------------------------- /src/components/TimePicker/helpers/getPrevMinute.js: -------------------------------------------------------------------------------- 1 | export default function getPrevMinute(value) { 2 | const number = Number(value); 3 | if (!value || number === 0) { 4 | return '59'; 5 | } 6 | return String(number - 1); 7 | } 8 | -------------------------------------------------------------------------------- /src/components/Calendar/helpers/getSign.js: -------------------------------------------------------------------------------- 1 | export default function getSign(number) { 2 | // eslint-disable-next-line no-compare-neg-zero 3 | if (!number || number === 0 || number === -0) return 0; 4 | return Math.abs(number) / number; 5 | } 6 | -------------------------------------------------------------------------------- /src/components/Chart/styled/container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledContainer = styled.div` 4 | position: relative; 5 | width: 100%; 6 | height: 100%; 7 | `; 8 | 9 | export default StyledContainer; 10 | -------------------------------------------------------------------------------- /src/components/ImportRecordsFlow/stepThree/styled/table.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import Table from '../../../Table'; 3 | 4 | const StyledTable = styled(Table)` 5 | margin: 0 12px; 6 | `; 7 | 8 | export default StyledTable; 9 | -------------------------------------------------------------------------------- /src/components/Input/styled/container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const Container = styled.div` 4 | display: flex; 5 | flex-direction: column; 6 | position: relative; 7 | `; 8 | 9 | export default Container; 10 | -------------------------------------------------------------------------------- /src/components/PathStep/helpers/getActiveStepIndex.js: -------------------------------------------------------------------------------- 1 | export default function getActiveStepIndex(params) { 2 | const { hoveredIndex, selectedIndex } = params; 3 | if (hoveredIndex !== -1) return hoveredIndex; 4 | return selectedIndex; 5 | } 6 | -------------------------------------------------------------------------------- /src/components/PathStep/helpers/isStepSelected.js: -------------------------------------------------------------------------------- 1 | export default function isStepSelected(params) { 2 | const { hoveredIndex, selectedIndex, index } = params; 3 | if (hoveredIndex !== -1) return false; 4 | return selectedIndex === index; 5 | } 6 | -------------------------------------------------------------------------------- /src/components/ProgressCircular/normalizeValue.js: -------------------------------------------------------------------------------- 1 | export default function normalizeValue(value) { 2 | if (value < 0) { 3 | return 0; 4 | } 5 | if (value > 100) { 6 | return 100; 7 | } 8 | return value; 9 | } 10 | -------------------------------------------------------------------------------- /src/components/Sidebar/styled/nav.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledNav = styled.nav` 4 | position: relative; 5 | display: block; 6 | box-sizing: border-box; 7 | `; 8 | 9 | export default StyledNav; 10 | -------------------------------------------------------------------------------- /src/components/StripeCardInput/helpers/index.js: -------------------------------------------------------------------------------- 1 | export { default as getCardElementOptions } from './getCardElementOptions'; 2 | export { default as getElementsOptions } from './getElementsOptions'; 3 | export { default as getError } from './getError'; 4 | -------------------------------------------------------------------------------- /axe.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable import/no-extraneous-dependencies */ 2 | import { configureAxe } from 'jest-axe'; 3 | 4 | const axe = configureAxe({ 5 | rules: { 6 | region: { enabled: false }, 7 | }, 8 | }); 9 | 10 | export default axe; 11 | -------------------------------------------------------------------------------- /src/components/CarouselCard/styled/autoplay.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledAutoplay = styled.span` 4 | position: absolute; 5 | left: 1%; 6 | bottom: 0.25rem; 7 | `; 8 | 9 | export default StyledAutoplay; 10 | -------------------------------------------------------------------------------- /src/components/CheckboxGroup/isOptionSelected.js: -------------------------------------------------------------------------------- 1 | export default function isOptionSelected(values, option) { 2 | if (values && Array.isArray(values)) { 3 | return values.some(value => value === option.value); 4 | } 5 | return false; 6 | } 7 | -------------------------------------------------------------------------------- /src/components/ImportRecordsFlow/stepTwo/styled/fileCardContent.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledFileCardContent = styled.div` 4 | padding: 0 16px; 5 | width: 100%; 6 | `; 7 | 8 | export default StyledFileCardContent; 9 | -------------------------------------------------------------------------------- /src/components/Lookup/helpers/isScrollPositionAtMenuBottom.js: -------------------------------------------------------------------------------- 1 | export default function isScrollPositionAtMenuBottom(menuRef) { 2 | const { scrollHeight, scrollTop, clientHeight } = menuRef; 3 | return scrollHeight - scrollTop === clientHeight; 4 | } 5 | -------------------------------------------------------------------------------- /src/components/RadioButtonGroup/helpers/isOptionChecked.js: -------------------------------------------------------------------------------- 1 | export default function isOptionChecked(option, currentValue) { 2 | if (!currentValue) { 3 | return false; 4 | } 5 | return !option.disabled && option.value === currentValue; 6 | } 7 | -------------------------------------------------------------------------------- /src/components/TimelineMarker/styled/contentContainer.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledContentContainer = styled.div` 4 | width: 100%; 5 | margin: 0 0 1rem 1rem; 6 | `; 7 | 8 | export default StyledContentContainer; 9 | -------------------------------------------------------------------------------- /src/libs/hooks/useChildrenRegister/helpers/index.js: -------------------------------------------------------------------------------- 1 | export { default as getChildNodes } from './getChildNodes'; 2 | export { default as insertChildOrderly } from './insertChildOrderly'; 3 | export { default as isChildRegistered } from './isChildRegistered'; 4 | -------------------------------------------------------------------------------- /src/components/Accordion/styled/ul.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledUl = styled.ul` 4 | margin: 0; 5 | padding: 0; 6 | list-style: none; 7 | box-sizing: border-box; 8 | `; 9 | 10 | export default StyledUl; 11 | -------------------------------------------------------------------------------- /src/components/ActivityTimeline/helpers/getChildTimelineMarkersNodes.js: -------------------------------------------------------------------------------- 1 | export default function getChildTimelineMarkersNodes(ref) { 2 | if (ref) { 3 | return ref.querySelectorAll('li[data-id="timeline-marker-li"]'); 4 | } 5 | return []; 6 | } 7 | -------------------------------------------------------------------------------- /src/components/DateTimePicker/helpers/isValidDate.js: -------------------------------------------------------------------------------- 1 | export default function isValidDate(date) { 2 | // eslint-disable-next-line no-restricted-globals 3 | return Object.prototype.toString.call(date) === '[object Date]' && !isNaN(date.getHours()); 4 | } 5 | -------------------------------------------------------------------------------- /src/components/ImportRecordsFlow/stepThree/styled/select.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import Select from '../../../Select'; 3 | 4 | const StyledSelect = styled(Select)` 5 | margin-bottom: 8px; 6 | `; 7 | 8 | export default StyledSelect; 9 | -------------------------------------------------------------------------------- /src/components/InternalOverlay/helpers/resolveElement.js: -------------------------------------------------------------------------------- 1 | export default function resolveElement(ref) { 2 | if (typeof ref === 'function') { 3 | const ret = ref(); 4 | return ret && ret.current; 5 | } 6 | return ref && ref.current; 7 | } 8 | -------------------------------------------------------------------------------- /src/components/MenuDivider/index.d.ts: -------------------------------------------------------------------------------- 1 | import { BaseProps } from '../types'; 2 | 3 | export interface MenuDividerProps extends BaseProps { 4 | variant?: 'default' | 'space'; 5 | } 6 | 7 | export default function(props: MenuDividerProps): JSX.Element | null; 8 | -------------------------------------------------------------------------------- /src/components/Sidebar/styled/ul.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledUl = styled.ul` 4 | margin: 0; 5 | padding: 0; 6 | list-style: none; 7 | box-sizing: border-box; 8 | `; 9 | 10 | export default StyledUl; 11 | -------------------------------------------------------------------------------- /src/styles/helpers/color/rgbaToRgb.js: -------------------------------------------------------------------------------- 1 | export default function rgbaToRgb(color) { 2 | if (color.substring(0, 4) !== 'rgba') { 3 | return ''; 4 | } 5 | const rgx = /^rgba\(((,?\s*\d+){3}).+$/; 6 | return color.replace(rgx, 'rgb($1)'); 7 | } 8 | -------------------------------------------------------------------------------- /examples/create-react-app/src/pages/Spinner/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Spinner from 'react-rainbow-components/components/Spinner'; 3 | 4 | export default function SpinnerExample() { 5 | return ; 6 | } 7 | -------------------------------------------------------------------------------- /src/components/CounterInput/helpers/getValue.js: -------------------------------------------------------------------------------- 1 | const getValue = value => { 2 | // eslint-disable-next-line no-restricted-globals 3 | if (isNaN(value)) { 4 | return 0; 5 | } 6 | return value; 7 | }; 8 | 9 | export default getValue; 10 | -------------------------------------------------------------------------------- /src/components/ImportRecordsFlow/stepTwo/styled/spinnerContainer.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledSpinnerContainer = styled.div` 4 | position: relative; 5 | height: 256px; 6 | `; 7 | 8 | export default StyledSpinnerContainer; 9 | -------------------------------------------------------------------------------- /src/components/InternalDropdown/helpers/isScrollPositionAtMenuBottom.js: -------------------------------------------------------------------------------- 1 | export default function isScrollPositionAtMenuBottom(menuRef) { 2 | const { scrollHeight, scrollTop, clientHeight } = menuRef; 3 | return scrollHeight - scrollTop === clientHeight; 4 | } 5 | -------------------------------------------------------------------------------- /src/components/Select/styled/container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledContainer = styled.div` 4 | position: relative; 5 | display: flex; 6 | flex-direction: column; 7 | `; 8 | 9 | export default StyledContainer; 10 | -------------------------------------------------------------------------------- /src/components/Table/helpers/rows/getRowSelectionInputType.js: -------------------------------------------------------------------------------- 1 | export default function getRowSelectionInputType(maxRowSelection, rowsLength) { 2 | if (maxRowSelection === 1 && rowsLength !== 1) { 3 | return 'radio'; 4 | } 5 | return 'checkbox'; 6 | } 7 | -------------------------------------------------------------------------------- /src/components/Textarea/styled/container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledContainer = styled.div` 4 | position: relative; 5 | display: flex; 6 | flex-direction: column; 7 | `; 8 | 9 | export default StyledContainer; 10 | -------------------------------------------------------------------------------- /src/components/TimePicker/styled/button.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import Button from '../../Button'; 3 | 4 | const StyledButton = styled(Button)` 5 | margin: 0 12px; 6 | width: 84px; 7 | `; 8 | 9 | export default StyledButton; 10 | -------------------------------------------------------------------------------- /src/components/Tree/styled/innerContainer.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const InnerContainer = styled.span` 4 | align-items: center; 5 | display: flex; 6 | flex-direction: row; 7 | `; 8 | 9 | export default InnerContainer; 10 | -------------------------------------------------------------------------------- /src/components/VerticalItem/styled/label.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledLabel = styled.span` 4 | text-overflow: ellipsis; 5 | white-space: nowrap; 6 | margin-right: 1rem; 7 | `; 8 | 9 | export default StyledLabel; 10 | -------------------------------------------------------------------------------- /src/components/VerticalSection/styled/container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledContainer = styled.div` 4 | :not(:first-of-type) { 5 | margin-top: 0.5rem; 6 | } 7 | `; 8 | 9 | export default StyledContainer; 10 | -------------------------------------------------------------------------------- /src/components/VerticalSection/styled/ul.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledUl = styled.ul` 4 | box-sizing: border-box; 5 | list-style: none; 6 | margin: 0; 7 | padding: 0; 8 | `; 9 | 10 | export default StyledUl; 11 | -------------------------------------------------------------------------------- /src/components/AccordionSection/styled/icon.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { MARGIN_X_SMALL } from '../../../styles/margins'; 3 | 4 | const StyledIcon = styled.span` 5 | margin-right: ${MARGIN_X_SMALL}; 6 | `; 7 | 8 | export default StyledIcon; 9 | -------------------------------------------------------------------------------- /src/components/CounterInput/helpers/isButtonDisabled.js: -------------------------------------------------------------------------------- 1 | const isButtonDisabled = (isMinOrMax, disable, readOnly) => { 2 | if (isMinOrMax || disable || readOnly) { 3 | return true; 4 | } 5 | return false; 6 | }; 7 | 8 | export default isButtonDisabled; 9 | -------------------------------------------------------------------------------- /src/components/ImportRecordsFlow/helpers/getPluralization.js: -------------------------------------------------------------------------------- 1 | export default function getPluralization(amount) { 2 | const pluralRules = new Intl.PluralRules('en-US'); 3 | const plural = pluralRules.select(amount); 4 | return plural === 'one' ? '' : 's'; 5 | } 6 | -------------------------------------------------------------------------------- /src/components/ReCaptcha/getUrl.js: -------------------------------------------------------------------------------- 1 | export default function getUrl(lang) { 2 | if (lang) { 3 | return `https://www.google.com/recaptcha/api.js?render=explicit&hl=${lang}`; 4 | } 5 | return 'https://www.google.com/recaptcha/api.js?render=explicit'; 6 | } 7 | -------------------------------------------------------------------------------- /src/components/Structural/truncatedText.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const TruncatedText = styled.span` 4 | overflow: hidden; 5 | text-overflow: ellipsis; 6 | white-space: nowrap; 7 | `; 8 | 9 | export default TruncatedText; 10 | -------------------------------------------------------------------------------- /src/components/Table/helpers/selector/getUpdatedRowsWhenDeselectAll.js: -------------------------------------------------------------------------------- 1 | export default function getUpdatedRowsWhenDeselectAll(rows = []) { 2 | return rows.map(row => ({ 3 | ...row, 4 | isSelected: false, 5 | isDisabled: false, 6 | })); 7 | } 8 | -------------------------------------------------------------------------------- /src/libs/hooks/useIsomorphicLayoutEffect.js: -------------------------------------------------------------------------------- 1 | import { useLayoutEffect, useEffect } from 'react'; 2 | import { isServer } from '../utils'; 3 | 4 | const useIsomorphicLayoutEffect = isServer ? useEffect : useLayoutEffect; 5 | 6 | export default useIsomorphicLayoutEffect; 7 | -------------------------------------------------------------------------------- /src/components/Calendar/helpers/getLastDayMonth.js: -------------------------------------------------------------------------------- 1 | export default function getLastDayMonth(value) { 2 | const date = new Date(value); 3 | date.setMonth(date.getMonth() + 1); 4 | date.setDate(1); 5 | date.setDate(date.getDate() - 1); 6 | return date; 7 | } 8 | -------------------------------------------------------------------------------- /src/components/ImportRecordsFlow/stepThree/styled/cancelButton.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import Button from '../../../Button'; 3 | 4 | const StyledCancelButton = styled(Button)` 5 | margin-right: 24px; 6 | `; 7 | 8 | export default StyledCancelButton; 9 | -------------------------------------------------------------------------------- /src/components/MultiSelect/helpers/getSizeButton.js: -------------------------------------------------------------------------------- 1 | const sizesMap = { 2 | small: 'x-small', 3 | medium: 'small', 4 | large: 'medium', 5 | }; 6 | 7 | const getSizeButton = size => sizesMap[size] || sizesMap.medium; 8 | 9 | export default getSizeButton; 10 | -------------------------------------------------------------------------------- /src/components/PhoneInput/countriesDropdown/helpers/index.js: -------------------------------------------------------------------------------- 1 | export { default as filterCountries } from './filterCountries'; 2 | export { default as getNewIndex } from './getNewIndex'; 3 | export { default as isScrollPositionAtScrollable } from './isScrollPositionAtScrollable'; 4 | -------------------------------------------------------------------------------- /src/components/PrimitiveCheckbox/styled/container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledContainer = styled.div` 4 | position: relative; 5 | display: flex; 6 | flex-direction: column; 7 | `; 8 | 9 | export default StyledContainer; 10 | -------------------------------------------------------------------------------- /src/components/RadioButtonGroup/styled/errorText.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import ErrorText from '../../Input/styled/errorText'; 3 | 4 | const StyledErrorText = styled(ErrorText)` 5 | text-align: center; 6 | `; 7 | 8 | export default StyledErrorText; 9 | -------------------------------------------------------------------------------- /src/components/TimelineMarker/styled/header.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledHeader = styled.div` 4 | display: flex; 5 | justify-content: space-between; 6 | align-items: center; 7 | `; 8 | 9 | export default StyledHeader; 10 | -------------------------------------------------------------------------------- /src/components/Tree/styled/inputCheckbox.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import PrimitiveCheckbox from '../../PrimitiveCheckbox'; 3 | 4 | const InputCheckbox = styled(PrimitiveCheckbox)` 5 | margin-right: 8px; 6 | `; 7 | 8 | export default InputCheckbox; 9 | -------------------------------------------------------------------------------- /src/components/VerticalSectionOverflow/styled/ul.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledUl = styled.ul` 4 | box-sizing: border-box; 5 | list-style: none; 6 | margin: 0; 7 | padding: 0; 8 | `; 9 | 10 | export default StyledUl; 11 | -------------------------------------------------------------------------------- /src/components/WeeklyCalendar/helpers/getLastDayOfWeek.js: -------------------------------------------------------------------------------- 1 | export default function getLastDayOfWeek(date) { 2 | const clone = new Date(date); 3 | clone.setDate(clone.getDate() + (6 - clone.getDay())); 4 | clone.setHours(0, 0, 0, 0); 5 | 6 | return clone; 7 | } 8 | -------------------------------------------------------------------------------- /src/components/WeeklyCalendar/hooks/useCurrentWeek.js: -------------------------------------------------------------------------------- 1 | import { useMemo } from 'react'; 2 | import { getCurrentWeek } from '../helpers'; 3 | 4 | export default function useCurrentWeek(currentWeek) { 5 | return useMemo(() => getCurrentWeek(currentWeek), [currentWeek]); 6 | } 7 | -------------------------------------------------------------------------------- /src/components/CarouselCard/styled/indicatorLi.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledIndicatorLi = styled.li` 4 | display: inline-flex; 5 | margin: 0 0.25rem; 6 | box-sizing: border-box; 7 | `; 8 | 9 | export default StyledIndicatorLi; 10 | -------------------------------------------------------------------------------- /src/components/ImportRecordsFlow/stepThree/styled/cancelIcon.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import CancelIcon from '../../icons/cancel'; 3 | 4 | const StyledCancelIcon = styled(CancelIcon)` 5 | margin-right: 8px; 6 | `; 7 | 8 | export default StyledCancelIcon; 9 | -------------------------------------------------------------------------------- /src/components/ImportRecordsFlow/stepTwo/styled/buttonIcon.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import ButtonIcon from '../../../ButtonIcon'; 3 | 4 | const StyledButtonIcon = styled(ButtonIcon)` 5 | margin-top: -12px; 6 | `; 7 | 8 | export default StyledButtonIcon; 9 | -------------------------------------------------------------------------------- /src/components/MonthlyCalendar/styled/dayContent.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledDayContent = styled.div` 4 | display: flex; 5 | flex: 1 1 auto; 6 | padding: 0; 7 | margin: 0; 8 | `; 9 | 10 | export default StyledDayContent; 11 | -------------------------------------------------------------------------------- /src/components/PhoneInput/countriesDropdown/helpers/isScrollPositionAtScrollable.js: -------------------------------------------------------------------------------- 1 | export default function isScrollPositionAtScrollable(scrollable) { 2 | const { scrollHeight, scrollTop, clientHeight } = scrollable; 3 | return scrollHeight - scrollTop === clientHeight; 4 | } 5 | -------------------------------------------------------------------------------- /src/components/TimePicker/helpers/getInputValue.js: -------------------------------------------------------------------------------- 1 | export default function getInputValue(value, placeholder, hour24 = false) { 2 | if (!value && placeholder) { 3 | return ''; 4 | } 5 | if (hour24) return value || '--:--'; 6 | return value || '--:-- --'; 7 | } 8 | -------------------------------------------------------------------------------- /src/components/Tree/helpers/getNodeLevel.js: -------------------------------------------------------------------------------- 1 | const getNodeLevel = ({ name = '' }) => { 2 | const levelMatch = name.match(/\./g); 3 | if (levelMatch) { 4 | return levelMatch.length + 1; 5 | } 6 | return 1; 7 | }; 8 | 9 | export default getNodeLevel; 10 | -------------------------------------------------------------------------------- /src/components/WeeklyCalendar/hooks/useClockStyle.js: -------------------------------------------------------------------------------- 1 | import { useMemo } from 'react'; 2 | import { getHeightOfDate } from '../helpers'; 3 | 4 | export default function useClockStyle(clock) { 5 | return useMemo(() => ({ top: `${getHeightOfDate(clock) - 8}px` }), [clock]); 6 | } 7 | -------------------------------------------------------------------------------- /src/components/WeeklyCalendar/week/hooks/useEventsOfDay.js: -------------------------------------------------------------------------------- 1 | import { useMemo } from 'react'; 2 | import { getEventsOfDay } from '../helpers'; 3 | 4 | export default function useEventsOfDay(events, day) { 5 | return useMemo(() => getEventsOfDay(events, day), [day, events]); 6 | } 7 | -------------------------------------------------------------------------------- /src/libs/counterManager/index.d.ts: -------------------------------------------------------------------------------- 1 | declare class CounterManager { 2 | constructor(); 3 | increment(): void; 4 | decrement(): void; 5 | hasModalOpen(): boolean; 6 | } 7 | 8 | const counterManager = new CounterManager(); 9 | export default counterManager; 10 | -------------------------------------------------------------------------------- /src/components/ButtonMenu/styled/styledLeftIcon.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { MARGIN_XX_SMALL } from '../../../styles/margins'; 3 | 4 | const StyledLeftIcon = styled.span` 5 | margin-right: ${MARGIN_XX_SMALL}; 6 | `; 7 | 8 | export default StyledLeftIcon; 9 | -------------------------------------------------------------------------------- /src/components/ButtonMenu/styled/styledRightIcon.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { MARGIN_XX_SMALL } from '../../../styles/margins'; 3 | 4 | const StyledRightIcon = styled.span` 5 | margin-left: ${MARGIN_XX_SMALL}; 6 | `; 7 | 8 | export default StyledRightIcon; 9 | -------------------------------------------------------------------------------- /src/components/CounterInput/helpers/isMax.js: -------------------------------------------------------------------------------- 1 | import getValue from './getValue'; 2 | 3 | const isMax = (number, step, max) => { 4 | if (getValue(Number(number)) + step > max) { 5 | return true; 6 | } 7 | return false; 8 | }; 9 | 10 | export default isMax; 11 | -------------------------------------------------------------------------------- /src/components/CounterInput/helpers/isMin.js: -------------------------------------------------------------------------------- 1 | import getValue from './getValue'; 2 | 3 | const isMin = (number, step, min) => { 4 | if (getValue(Number(number)) - step < min) { 5 | return true; 6 | } 7 | return false; 8 | }; 9 | 10 | export default isMin; 11 | -------------------------------------------------------------------------------- /src/components/Tree/styled/treeContainerUl.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const TreeContainerUl = styled.ul` 4 | list-style: none; 5 | margin: 0; 6 | padding: 0; 7 | box-sizing: border-box; 8 | `; 9 | 10 | export default TreeContainerUl; 11 | -------------------------------------------------------------------------------- /src/components/WeeklyCalendar/hooks/useFormattedWeek.js: -------------------------------------------------------------------------------- 1 | import { useMemo } from 'react'; 2 | import { getFormattedWeek } from '../helpers'; 3 | 4 | export default function useFormattedWeek(week, locale) { 5 | return useMemo(() => getFormattedWeek(week, locale), [locale, week]); 6 | } 7 | -------------------------------------------------------------------------------- /src/libs/outsideClick/index.d.ts: -------------------------------------------------------------------------------- 1 | declare class OutsideClick { 2 | constructor(); 3 | startListening( 4 | containerRef?: Element, 5 | callback?: (this: OutsideClick, event: MouseEvent) => void, 6 | ): void; 7 | } 8 | 9 | export default OutsideClick; 10 | -------------------------------------------------------------------------------- /src/styles/helpers/attachThemeAttrs.d.ts: -------------------------------------------------------------------------------- 1 | import { ThemedStyledFunction } from 'styled-components'; 2 | 3 | declare function attachThemeAttrs( 4 | styledElement: ThemedStyledFunction, 5 | ): ThemedStyledFunction; 6 | export default attachThemeAttrs; 7 | -------------------------------------------------------------------------------- /examples/create-react-app/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './app'; 4 | import registerServiceWorker from './registerServiceWorker'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); 7 | registerServiceWorker(); 8 | -------------------------------------------------------------------------------- /src/components/Breadcrumbs/index.d.ts: -------------------------------------------------------------------------------- 1 | import { ReactNode } from 'react'; 2 | import { BaseProps } from '../types'; 3 | 4 | export interface BreadcrumbsProps extends BaseProps { 5 | children?: ReactNode; 6 | } 7 | 8 | export default function(props: BreadcrumbsProps): JSX.Element | null; 9 | -------------------------------------------------------------------------------- /src/components/Calendar/styled/table.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledTable = styled.table` 4 | border-collapse: collapse; 5 | border-spacing: 0; 6 | width: 100%; 7 | box-sizing: border-box; 8 | `; 9 | 10 | export default StyledTable; 11 | -------------------------------------------------------------------------------- /src/components/Card/styled/icon.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { MARGIN_SMALL } from '../../../styles/margins'; 3 | 4 | const StyledIcon = styled.div` 5 | flex-shrink: 0; 6 | margin-right: ${MARGIN_SMALL}; 7 | `; 8 | 9 | export default StyledIcon; 10 | -------------------------------------------------------------------------------- /src/components/ImportRecordsFlow/stepOne/styled/styledSelect.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import Select from '../../../Select'; 3 | 4 | const StyledSelect = styled(Select)` 5 | margin-top: 20px; 6 | width: 40rem; 7 | `; 8 | 9 | export default StyledSelect; 10 | -------------------------------------------------------------------------------- /src/components/Lookup/options/styled/icon.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledIcon = styled.span` 4 | margin-right: 12px; 5 | display: flex; 6 | align-items: center; 7 | justify-content: center; 8 | `; 9 | 10 | export default StyledIcon; 11 | -------------------------------------------------------------------------------- /src/components/Lookup/styled/container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledContainer = styled.div` 4 | position: relative; 5 | display: flex; 6 | flex-direction: column; 7 | outline: none; 8 | `; 9 | 10 | export default StyledContainer; 11 | -------------------------------------------------------------------------------- /src/components/Lookup/styled/spinner.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import Spinner from '../../Spinner'; 3 | 4 | const StyledSpinner = styled(Spinner)` 5 | left: unset; 6 | right: 2.5rem; 7 | top: 1.4rem; 8 | `; 9 | 10 | export default StyledSpinner; 11 | -------------------------------------------------------------------------------- /src/components/Modal/styled/header.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledHeader = styled.header` 4 | position: relative; 5 | padding: 1rem 2.5rem; 6 | display: block; 7 | box-sizing: border-box; 8 | `; 9 | 10 | export default StyledHeader; 11 | -------------------------------------------------------------------------------- /src/components/MultiSelect/helpers/hasContent.js: -------------------------------------------------------------------------------- 1 | export default function hasContent(value) { 2 | if (!value) { 3 | return false; 4 | } 5 | if (Array.isArray(value)) { 6 | return value.length > 0; 7 | } 8 | return typeof value === 'object'; 9 | } 10 | -------------------------------------------------------------------------------- /src/components/Option/styled/input.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import Input from '../../Input'; 3 | 4 | const StyledInput = styled(Input)` 5 | display: inline; 6 | margin-bottom: 0; 7 | margin-left: 4px; 8 | `; 9 | 10 | export default StyledInput; 11 | -------------------------------------------------------------------------------- /src/components/ProgressIndicator/styled/container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledContainer = styled.div` 4 | position: relative; 5 | max-width: 70%; 6 | flex: 1 1 auto; 7 | margin: auto; 8 | `; 9 | 10 | export default StyledContainer; 11 | -------------------------------------------------------------------------------- /src/components/WeeklyCalendar/helpers/getHeightOfDate.js: -------------------------------------------------------------------------------- 1 | import getHeightOfMinutes from './getHeightOfMinutes'; 2 | 3 | export default function getHeightOfDate(date) { 4 | const clone = new Date(date); 5 | return getHeightOfMinutes(clone.getHours() * 60 + clone.getMinutes()); 6 | } 7 | -------------------------------------------------------------------------------- /src/components/WeeklyCalendar/week/hooks/useClockLineStyle.js: -------------------------------------------------------------------------------- 1 | import { useMemo } from 'react'; 2 | import { getHeightOfDate } from '../../helpers'; 3 | 4 | export default function useClockLineStyle(clock) { 5 | return useMemo(() => ({ top: `${getHeightOfDate(clock)}px` }), [clock]); 6 | } 7 | -------------------------------------------------------------------------------- /src/libs/hooks/useDisclosure.d.ts: -------------------------------------------------------------------------------- 1 | interface Disclosure { 2 | isOpen: boolean; 3 | open: () => void; 4 | close: () => void; 5 | toggle: () => void; 6 | } 7 | 8 | declare function useDisclosure(defaultIsOpen?: unknown): Disclosure; 9 | export default useDisclosure; 10 | -------------------------------------------------------------------------------- /scripts/search/algoliaClient.js: -------------------------------------------------------------------------------- 1 | require('dotenv').config(); 2 | const algoliasearch = require('algoliasearch'); 3 | 4 | const client = algoliasearch( 5 | process.env.REACT_APP_ALGOLIA_APP_ID, 6 | process.env.REACT_APP_ALGOLIA_ADMIN_KEY, 7 | ); 8 | 9 | module.exports = client; 10 | -------------------------------------------------------------------------------- /src/components/Card/styled/header.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledHeader = styled.header` 4 | display: inline-flex; 5 | align-items: center; 6 | justify-content: center; 7 | overflow: hidden; 8 | `; 9 | 10 | export default StyledHeader; 11 | -------------------------------------------------------------------------------- /src/components/ImportRecordsFlow/stepFour/styled/statsCardContent.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledStatsCardContent = styled.div` 4 | padding: 0 16px; 5 | width: 100%; 6 | margin-left: 8px; 7 | `; 8 | 9 | export default StyledStatsCardContent; 10 | -------------------------------------------------------------------------------- /src/components/Lookup/options/styled/searchIcon.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import SearchIcon from '../../icons/searchIcon'; 3 | 4 | const StyledSearchIcon = styled(SearchIcon)` 5 | height: 36px; 6 | width: 36px; 7 | `; 8 | 9 | export default StyledSearchIcon; 10 | -------------------------------------------------------------------------------- /src/components/PhoneInput/countriesDropdown/helpers/getNewIndex.js: -------------------------------------------------------------------------------- 1 | export default function getNewIndex(newIndex, lenght) { 2 | if (newIndex < 0) { 3 | return 0; 4 | } 5 | if (newIndex >= lenght) { 6 | return lenght - 1; 7 | } 8 | return newIndex; 9 | } 10 | -------------------------------------------------------------------------------- /src/components/Table/head/styled/content.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledContent = styled.span` 4 | max-width: 100%; 5 | overflow: hidden; 6 | text-overflow: ellipsis; 7 | white-space: nowrap; 8 | `; 9 | 10 | export default StyledContent; 11 | -------------------------------------------------------------------------------- /src/components/VisualPicker/styled/optionsContainer.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledOptionsContainer = styled.div` 4 | display: inline-flex; 5 | flex-wrap: wrap; 6 | justify-content: center; 7 | `; 8 | 9 | export default StyledOptionsContainer; 10 | -------------------------------------------------------------------------------- /src/components/FileSelector/icons/index.js: -------------------------------------------------------------------------------- 1 | import UploadIcon from './upload'; 2 | import ErrorIcon from './error'; 3 | import FileIcon from './file'; 4 | import FilesIcon from './files'; 5 | import CancelIcon from './cancel'; 6 | 7 | export { UploadIcon, ErrorIcon, FileIcon, FilesIcon, CancelIcon }; 8 | -------------------------------------------------------------------------------- /src/components/ImportRecordsFlow/stepOne/styled/visualPicker.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import VisualPicker from '../../../VisualPicker'; 3 | 4 | const StyledVisualPicker = styled(VisualPicker)` 5 | margin: 0 24px 16px 24px; 6 | `; 7 | 8 | export default StyledVisualPicker; 9 | -------------------------------------------------------------------------------- /src/components/Lookup/helpers/getOptionsLength.js: -------------------------------------------------------------------------------- 1 | export default function getOptionsLength(options = []) { 2 | let number = 0; 3 | options.forEach(option => { 4 | if (option.type !== 'header') { 5 | number += 1; 6 | } 7 | }); 8 | return number; 9 | } 10 | -------------------------------------------------------------------------------- /src/components/ProgressStep/styled/inactiveIcon.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { BORDER_RADIUS_2 } from '../../../styles/borderRadius'; 3 | 4 | const StyledInactiveIcon = styled.div` 5 | border-radius: ${BORDER_RADIUS_2}; 6 | `; 7 | 8 | export default StyledInactiveIcon; 9 | -------------------------------------------------------------------------------- /src/components/SidebarItem/styled/icon.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledIcon = styled.div` 4 | height: 42px; 5 | width: 42px; 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | `; 10 | 11 | export default StyledIcon; 12 | -------------------------------------------------------------------------------- /src/components/Tree/helpers/getNodeName.js: -------------------------------------------------------------------------------- 1 | const getNodeName = ({ parentName, index }) => { 2 | const nodeLevel = index + 1; 3 | if (parentName) { 4 | return `${parentName}.${nodeLevel}`; 5 | } 6 | return `node-${nodeLevel}`; 7 | }; 8 | 9 | export default getNodeName; 10 | -------------------------------------------------------------------------------- /src/components/VisualPickerOption/styled/label.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledLabel = styled.label` 4 | display: flex; 5 | flex-direction: column; 6 | box-sizing: border-box; 7 | align-items: center; 8 | `; 9 | 10 | export default StyledLabel; 11 | -------------------------------------------------------------------------------- /src/libs/hooks/useChildrenRegister/helpers/getChildNodes.js: -------------------------------------------------------------------------------- 1 | const getChildNodes = ({ ref, selector } = {}) => { 2 | if (ref) { 3 | const [...node] = ref.querySelectorAll(selector); 4 | return node; 5 | } 6 | return []; 7 | }; 8 | 9 | export default getChildNodes; 10 | -------------------------------------------------------------------------------- /library/styleguideComponents/ComponentsList/styled.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import StartupIcon from './icons/startupIcon'; 3 | 4 | // eslint-disable-next-line import/prefer-default-export 5 | export const Icon = styled(StartupIcon)` 6 | width: 26px; 7 | height: 26px; 8 | `; 9 | -------------------------------------------------------------------------------- /src/components/Calendar/doubleCalendar/hooks/useFormattedMonth.js: -------------------------------------------------------------------------------- 1 | import { useMemo } from 'react'; 2 | import { getFormattedMonth } from '../../helpers'; 3 | 4 | export default function useFormattedMonth(month, locale) { 5 | return useMemo(() => getFormattedMonth(month, locale), [month, locale]); 6 | } 7 | -------------------------------------------------------------------------------- /src/components/Calendar/helpers/__test__/addDays.spec.js: -------------------------------------------------------------------------------- 1 | import addDays from '../addDays'; 2 | 3 | describe('addDays', () => { 4 | it('should return a date 3 days after', () => { 5 | const date = new Date(2019, 2, 1); 6 | expect(addDays(date, 3).getDate()).toBe(4); 7 | }); 8 | }); 9 | -------------------------------------------------------------------------------- /src/components/Input/helpers/getValueAlignment.js: -------------------------------------------------------------------------------- 1 | export default function getValueAlignment({ valueAlignment, isCentered }) { 2 | if (valueAlignment) { 3 | return valueAlignment; 4 | } 5 | if (isCentered) { 6 | return 'center'; 7 | } 8 | return undefined; 9 | } 10 | -------------------------------------------------------------------------------- /src/components/MultiSelect/helpers/index.js: -------------------------------------------------------------------------------- 1 | import hasContent from './hasContent'; 2 | import positionResolver from './positionResolver'; 3 | import getContent from './getContent'; 4 | import getSizeButton from './getSizeButton'; 5 | 6 | export { hasContent, positionResolver, getContent, getSizeButton }; 7 | -------------------------------------------------------------------------------- /src/components/Slider/styled/container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledContainer = styled.div` 4 | display: flex; 5 | flex-direction: column; 6 | justify-content: flex-start; 7 | align-items: center; 8 | `; 9 | 10 | export default StyledContainer; 11 | -------------------------------------------------------------------------------- /src/components/WeeklyCalendar/week/hooks/useEventDuration.js: -------------------------------------------------------------------------------- 1 | import { useMemo } from 'react'; 2 | import { getDiffMinutes } from '../helpers'; 3 | 4 | export default function useEventDuration(startDate, endDate) { 5 | return useMemo(() => getDiffMinutes(startDate, endDate), [endDate, startDate]); 6 | } 7 | -------------------------------------------------------------------------------- /src/libs/hooks/usePrevious.js: -------------------------------------------------------------------------------- 1 | import { useRef, useEffect } from 'react'; 2 | 3 | const usePrevious = value => { 4 | const ref = useRef(); 5 | useEffect(() => { 6 | ref.current = value; 7 | }, [value]); 8 | return ref.current; 9 | }; 10 | 11 | export default usePrevious; 12 | -------------------------------------------------------------------------------- /src/styles/helpers/color/replaceAlpha.js: -------------------------------------------------------------------------------- 1 | export default function replaceAlpha(color, alpha) { 2 | if (color.substring(0, 4) !== 'rgba' || alpha === undefined) { 3 | return ''; 4 | } 5 | const rgx = /^rgba\(((,?\s*\d+){3}).+$/; 6 | return color.replace(rgx, `rgba($1, ${alpha})`); 7 | } 8 | -------------------------------------------------------------------------------- /src/components/Calendar/helpers/compareDates.js: -------------------------------------------------------------------------------- 1 | import getSign from './getSign'; 2 | 3 | export default function compareDates(value1, value2) { 4 | const date1 = new Date(value1).setHours(0, 0, 0, 0); 5 | const date2 = new Date(value2).setHours(0, 0, 0, 0); 6 | return getSign(date1 - date2); 7 | } 8 | -------------------------------------------------------------------------------- /src/components/Calendar/helpers/normalizeDates.js: -------------------------------------------------------------------------------- 1 | import normalizeDate from './normalizeDate'; 2 | 3 | export default function normalizeDates(dates) { 4 | return dates 5 | .filter(date => date && (typeof date === 'string' || date instanceof Date)) 6 | .map(date => normalizeDate(date)); 7 | } 8 | -------------------------------------------------------------------------------- /src/components/CheckboxGroup/styled/fieldset.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledFieldset = styled.fieldset` 4 | margin: 0; 5 | padding: 0; 6 | border: 0; 7 | position: relative; 8 | box-sizing: border-box; 9 | `; 10 | 11 | export default StyledFieldset; 12 | -------------------------------------------------------------------------------- /src/components/CodeInput/hooks/usePreviousIndex.js: -------------------------------------------------------------------------------- 1 | import { useRef, useEffect } from 'react'; 2 | 3 | export default function usePreviousIndex(focusedIndex) { 4 | const ref = useRef(); 5 | useEffect(() => { 6 | ref.current = focusedIndex; 7 | }); 8 | return ref.current; 9 | } 10 | -------------------------------------------------------------------------------- /src/components/MenuItem/styled/iconContainer.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledIconContainer = styled.span` 4 | max-width: 100%; 5 | overflow: hidden; 6 | text-overflow: ellipsis; 7 | white-space: nowrap; 8 | `; 9 | 10 | export default StyledIconContainer; 11 | -------------------------------------------------------------------------------- /src/components/Option/styled/iconContainer.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledIconContainer = styled.span` 4 | max-width: 100%; 5 | overflow: hidden; 6 | text-overflow: ellipsis; 7 | white-space: nowrap; 8 | `; 9 | 10 | export default StyledIconContainer; 11 | -------------------------------------------------------------------------------- /src/components/RadioGroup/styled/fieldset.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledFieldset = styled.fieldset` 4 | margin: 0; 5 | padding: 0; 6 | border: 0; 7 | box-sizing: border-box; 8 | position: relative; 9 | `; 10 | 11 | export default StyledFieldset; 12 | -------------------------------------------------------------------------------- /src/components/StripeCardInput/helpers/getError.js: -------------------------------------------------------------------------------- 1 | export default function getError(error) { 2 | if (error) { 3 | return { 4 | code: error.code, 5 | type: error.type, 6 | message: error.message, 7 | }; 8 | } 9 | return undefined; 10 | } 11 | -------------------------------------------------------------------------------- /src/components/WeeklyCalendar/helpers/__test__/addWeeks.spec.js: -------------------------------------------------------------------------------- 1 | import { addWeeks } from '..'; 2 | 3 | describe('addWeeks', () => { 4 | it('should return a date 2 week after', () => { 5 | const date = new Date(2020, 1, 2); 6 | expect(addWeeks(date, 2).getDate()).toBe(16); 7 | }); 8 | }); 9 | -------------------------------------------------------------------------------- /src/libs/debounce/index.js: -------------------------------------------------------------------------------- 1 | export default function debounce(callback, time = 500) { 2 | let timer; 3 | return function debounced(...args) { 4 | clearTimeout(timer); 5 | timer = setTimeout(() => { 6 | callback.call(this, ...args); 7 | }, time); 8 | }; 9 | } 10 | -------------------------------------------------------------------------------- /src/styles/margins.d.ts: -------------------------------------------------------------------------------- 1 | export const MARGIN_XX_SMALL: '0.25rem'; 2 | export const MARGIN_X_SMALL: '0.5rem'; 3 | export const MARGIN_SMALL: '0.75rem'; 4 | export const MARGIN_MEDIUM: '1rem'; 5 | export const MARGIN_LARGE: '1.5rem'; 6 | export const MARGIN_X_LARGE: '2rem'; 7 | export const MARGIN_XX_LARGE: '3rem'; 8 | -------------------------------------------------------------------------------- /src/components/Calendar/helpers/__test__/addMonths.spec.js: -------------------------------------------------------------------------------- 1 | import addMonths from '../addMonths'; 2 | 3 | describe('addMonths', () => { 4 | it('should return a date 2 month after', () => { 5 | const date = new Date(2019, 2, 1); 6 | expect(addMonths(date, 2).getMonth()).toBe(4); 7 | }); 8 | }); 9 | -------------------------------------------------------------------------------- /src/components/Chart/helpers/unregisterGlobalPlugins.js: -------------------------------------------------------------------------------- 1 | const exclude = ['filler', 'legend', 'title']; 2 | 3 | export default function unregisterGlobalPlugins(ChartJS) { 4 | const plugins = ChartJS.plugins.getAll().filter(plugin => !exclude.includes(plugin.id)); 5 | ChartJS.plugins.unregister(plugins); 6 | } 7 | -------------------------------------------------------------------------------- /src/components/CodeInput/hooks/useValueState.js: -------------------------------------------------------------------------------- 1 | import { useMemo } from 'react'; 2 | import getValueArray from '../helpers/getValueArray'; 3 | 4 | export default function useValueState(value, length) { 5 | return useMemo(() => { 6 | return getValueArray(value, length); 7 | }, [value, length]); 8 | } 9 | -------------------------------------------------------------------------------- /src/components/Pagination/getFirstItem.js: -------------------------------------------------------------------------------- 1 | export default function getFirstItem(pages, activePage) { 2 | if (activePage < 3) { 3 | return 1; 4 | } 5 | if (activePage > pages - 2) { 6 | return activePage - (4 - (pages - activePage)); 7 | } 8 | return activePage - 2; 9 | } 10 | -------------------------------------------------------------------------------- /src/components/Table/helpers/rows/getIndexes.js: -------------------------------------------------------------------------------- 1 | export default function getIndexes(rows = []) { 2 | const indexes = {}; 3 | if (Array.isArray(rows)) { 4 | rows.forEach((row, rowIndex) => { 5 | indexes[row.key] = { rowIndex }; 6 | }); 7 | } 8 | return indexes; 9 | } 10 | -------------------------------------------------------------------------------- /src/components/TableWithBrowserPagination/styled/container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import Table from '../../Table'; 3 | 4 | export const StyledContainer = styled.section` 5 | height: 100%; 6 | `; 7 | 8 | export const StyledTable = styled(Table)` 9 | overflow: auto; 10 | `; 11 | -------------------------------------------------------------------------------- /src/components/VisualPickerOptionFooter/styled/container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledContainer = styled.article` 4 | display: flex; 5 | flex-direction: column; 6 | align-items: center; 7 | flex-wrap: wrap; 8 | `; 9 | 10 | export default StyledContainer; 11 | -------------------------------------------------------------------------------- /src/styles/helpers/color/isValidColor.js: -------------------------------------------------------------------------------- 1 | import { isServer } from '../../../libs/utils'; 2 | 3 | export default function isValidColor(color) { 4 | if (isServer) return true; 5 | const element = document.createElement('a'); 6 | element.style.color = color; 7 | return element.style.color !== ''; 8 | } 9 | -------------------------------------------------------------------------------- /src/styles/margins.js: -------------------------------------------------------------------------------- 1 | export const MARGIN_XX_SMALL = '0.25rem'; 2 | export const MARGIN_X_SMALL = '0.5rem'; 3 | export const MARGIN_SMALL = '0.75rem'; 4 | export const MARGIN_MEDIUM = '1rem'; 5 | export const MARGIN_LARGE = '1.5rem'; 6 | export const MARGIN_X_LARGE = '2rem'; 7 | export const MARGIN_XX_LARGE = '3rem'; 8 | -------------------------------------------------------------------------------- /library/styleguideComponents/PropsTable/renderers/propTypeShape.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import buildShapeAttrList from './builders/shapeAttrList'; 3 | 4 | export default function propTypeShapeRender(value) { 5 | return

    {buildShapeAttrList(value)}
; 6 | } 7 | -------------------------------------------------------------------------------- /library/styleguideComponents/PropsTable/renderers/propTypeUnion.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import buildUnionTypeList from './builders/unionTypeList'; 3 | 4 | export default function propTypeShapeRender(value) { 5 | return
    {buildUnionTypeList(value)}
; 6 | } 7 | -------------------------------------------------------------------------------- /src/components/GoogleAddressLookup/styled/poweredByGoogleLogo.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import PoweredByGoogleLogo from '../icons/poweredByGoogle'; 3 | 4 | const StyledPoweredByGoogleLogo = styled(PoweredByGoogleLogo)` 5 | height: 0.725rem; 6 | `; 7 | 8 | export default StyledPoweredByGoogleLogo; 9 | -------------------------------------------------------------------------------- /src/components/Notification/styled/closeButton.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import ButtonIcon from '../../ButtonIcon'; 3 | 4 | const StyledCloseButton = styled(ButtonIcon)` 5 | position: absolute; 6 | top: 0.3rem; 7 | right: 0.5rem; 8 | `; 9 | 10 | export default StyledCloseButton; 11 | -------------------------------------------------------------------------------- /src/components/TimePicker/styled/footer.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledFooter = styled.footer` 4 | width: 100%; 5 | display: flex; 6 | align-items: center; 7 | justify-content: center; 8 | box-sizing: border-box; 9 | `; 10 | 11 | export default StyledFooter; 12 | -------------------------------------------------------------------------------- /src/libs/scrollController/index.d.ts: -------------------------------------------------------------------------------- 1 | export function disableBodyScroll(targetElement: Element, options: Record): void; 2 | export function clearAllBodyScrollLocks(): void; 3 | export function enableBodyScroll(targetElement: Element): void; 4 | export { default as WindowScrolling } from './windowScrolling'; 5 | -------------------------------------------------------------------------------- /src/libs/utils/index.js: -------------------------------------------------------------------------------- 1 | import uniqueId from './uniqueId'; 2 | import getLocale from './getLocale'; 3 | import getBrowserLocale from './getBrowserLocale'; 4 | import getSuffixSI from './getSuffixSI'; 5 | import isServer from './isServer'; 6 | 7 | export { uniqueId, getLocale, getBrowserLocale, getSuffixSI, isServer }; 8 | -------------------------------------------------------------------------------- /src/styles/paddings.d.ts: -------------------------------------------------------------------------------- 1 | export const PADDING_XX_SMALL: '0.25rem'; 2 | export const PADDING_X_SMALL: '0.5rem'; 3 | export const PADDING_SMALL: '0.75rem'; 4 | export const PADDING_MEDIUM: '1rem'; 5 | export const PADDING_LARGE: '1.5rem'; 6 | export const PADDING_X_LARGE: '2rem'; 7 | export const PADDING_XX_LARGE: '3rem'; 8 | -------------------------------------------------------------------------------- /src/components/Avatar/styled/image.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledImage = styled.img` 4 | vertical-align: middle; 5 | border: 0; 6 | height: 100%; 7 | width: 100%; 8 | box-sizing: border-box; 9 | max-width: none; 10 | `; 11 | 12 | export default StyledImage; 13 | -------------------------------------------------------------------------------- /src/components/ImportRecordsFlow/stepFour/styled/styledTooltipText.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledTooltipText = styled.p` 4 | font-size: 14px; 5 | text-align: start; 6 | text-overflow: ellipsis; 7 | margin-bottom: 4px; 8 | `; 9 | 10 | export default StyledTooltipText; 11 | -------------------------------------------------------------------------------- /src/components/Modal/styled/content.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledContent = styled.div` 4 | padding: 1rem; 5 | overflow: hidden; 6 | overflow-y: auto; 7 | -webkit-overflow-scrolling: touch; 8 | box-sizing: border-box; 9 | `; 10 | 11 | export default StyledContent; 12 | -------------------------------------------------------------------------------- /src/components/MultiSelect/helpers/getContent.js: -------------------------------------------------------------------------------- 1 | export default function getContent(value) { 2 | if (Array.isArray(value)) { 3 | return value.map(item => item.label).join(', '); 4 | } 5 | if (value && typeof value === 'object') { 6 | return value.label; 7 | } 8 | return null; 9 | } 10 | -------------------------------------------------------------------------------- /src/components/Option/styled/button.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import Button from '../../Button'; 3 | 4 | const StyledButton = styled(Button)` 5 | height: 1.7rem; 6 | line-height: 1.7rem; 7 | font-size: 0.8rem; 8 | padding: 0 0.7rem; 9 | `; 10 | 11 | export default StyledButton; 12 | -------------------------------------------------------------------------------- /src/components/TimePicker/helpers/isChecked.js: -------------------------------------------------------------------------------- 1 | export default function isChecked({ inputValue, value, defaultValue }) { 2 | if (value) { 3 | return inputValue === value; 4 | } 5 | if (defaultValue) { 6 | return inputValue === defaultValue; 7 | } 8 | return inputValue === 'AM'; 9 | } 10 | -------------------------------------------------------------------------------- /src/components/Tree/helpers/getNode.js: -------------------------------------------------------------------------------- 1 | const getNode = (tree, nodePath) => { 2 | const firstNode = tree[nodePath[0]]; 3 | if (nodePath.length === 1) { 4 | return firstNode; 5 | } 6 | return getNode(firstNode.children, nodePath.slice(1, nodePath.length)); 7 | }; 8 | 9 | export default getNode; 10 | -------------------------------------------------------------------------------- /src/styles/helpers/getTheme.d.ts: -------------------------------------------------------------------------------- 1 | import { DefaultTheme } from 'styled-components'; 2 | import { RainbowTheme } from '../../styled'; 3 | 4 | interface Props { 5 | [key: string]: unknown; 6 | theme: DefaultTheme; 7 | } 8 | 9 | declare function getTheme(props: Props): RainbowTheme; 10 | export default getTheme; 11 | -------------------------------------------------------------------------------- /src/styles/paddings.js: -------------------------------------------------------------------------------- 1 | export const PADDING_XX_SMALL = '0.25rem'; 2 | export const PADDING_X_SMALL = '0.5rem'; 3 | export const PADDING_SMALL = '0.75rem'; 4 | export const PADDING_MEDIUM = '1rem'; 5 | export const PADDING_LARGE = '1.5rem'; 6 | export const PADDING_X_LARGE = '2rem'; 7 | export const PADDING_XX_LARGE = '3rem'; 8 | -------------------------------------------------------------------------------- /integration/helpers/releaseKey.js: -------------------------------------------------------------------------------- 1 | async function releaseKey(character) { 2 | await browser.performActions([ 3 | { 4 | type: 'key', 5 | id: 'keyboard', 6 | actions: [{ type: 'keyUp', value: character }], 7 | }, 8 | ]); 9 | } 10 | 11 | module.exports = releaseKey; 12 | -------------------------------------------------------------------------------- /library/styleguideComponents/PropsTable/renderers/propTypeArrayOf.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import buildArrayOfTypeList from './builders/arrayOfTypeList'; 3 | 4 | export default function propTypeArrayOfRender(value) { 5 | return
    {buildArrayOfTypeList(value)}
; 6 | } 7 | -------------------------------------------------------------------------------- /scripts/search/jsParser.js: -------------------------------------------------------------------------------- 1 | // eslint-disable-next-line import/no-extraneous-dependencies 2 | const parser = require('@babel/parser'); 3 | 4 | const parse = code => { 5 | return parser.parse(code, { 6 | sourceType: 'module', 7 | plugins: ['jsx'], 8 | }); 9 | }; 10 | 11 | module.exports = parse; 12 | -------------------------------------------------------------------------------- /src/components/Calendar/doubleCalendar/helpers/shouldUpdateCurrentMonth.js: -------------------------------------------------------------------------------- 1 | import { isSameMonth } from '../../helpers'; 2 | 3 | export default function shouldUpdateCurrentMonth(value, currentMonth, rightMonth) { 4 | if (isSameMonth(value, rightMonth) || isSameMonth(value, currentMonth)) return false; 5 | return true; 6 | } 7 | -------------------------------------------------------------------------------- /src/components/Calendar/hooks/index.js: -------------------------------------------------------------------------------- 1 | export { default as useCurrentDateFromValue } from './useCurrentDateFromValue'; 2 | export { default as useRangeFromValue } from './useRangeFromValue'; 3 | export { default as useRangeStartDate } from './useRangeStartDate'; 4 | export { default as useRangeEndDate } from './useRangeEndDate'; 5 | -------------------------------------------------------------------------------- /src/components/CarouselImage/styled/image.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledImage = styled.div` 4 | width: 100%; 5 | height: 100%; 6 | background-size: cover; 7 | background-repeat: no-repeat; 8 | background-position: center; 9 | `; 10 | 11 | export default StyledImage; 12 | -------------------------------------------------------------------------------- /src/components/CurrencyInput/helpers/clearValue.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-useless-escape */ 2 | export default function clearValue(value, decimalSeparator) { 3 | if (decimalSeparator === '.') { 4 | return value.replace(/[^\d\.-]/g, ''); 5 | } 6 | return value.replace(/[^\d\,-]/g, '').replaceAll(',', '.'); 7 | } 8 | -------------------------------------------------------------------------------- /src/components/ImportRecordsFlow/stepFour/styled/statsCardDescriptionContainer.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledStatsCardDescriptionContainer = styled.div` 4 | display: flex; 5 | align-items: center; 6 | gap: 8px; 7 | `; 8 | 9 | export default StyledStatsCardDescriptionContainer; 10 | -------------------------------------------------------------------------------- /src/components/MonthlyCalendar/hooks/useFormattedMonth.js: -------------------------------------------------------------------------------- 1 | import { useMemo } from 'react'; 2 | import { getFormattedMonth } from '../../Calendar/helpers'; 3 | 4 | export default function useFormattedMonth(month, currentLocale) { 5 | return useMemo(() => getFormattedMonth(month, currentLocale), [currentLocale, month]); 6 | } 7 | -------------------------------------------------------------------------------- /src/components/Spinner/helpers/getSizeValue.js: -------------------------------------------------------------------------------- 1 | const sizeMap = { 2 | 'x-large': '82', 3 | large: '48', 4 | medium: '32', 5 | small: '26', 6 | 'x-small': '20', 7 | 'xx-small': '16', 8 | }; 9 | 10 | export default function getSizeValue(size) { 11 | return sizeMap[size] || sizeMap.medium; 12 | } 13 | -------------------------------------------------------------------------------- /src/components/WeeklyCalendar/header/styled/weekDay.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { FONT_SIZE_TEXT_SMALL } from '../../../../styles/fontSizes'; 3 | 4 | const StyledWeekDay = styled.p` 5 | font-size: ${FONT_SIZE_TEXT_SMALL}; 6 | font-weight: 900; 7 | `; 8 | 9 | export default StyledWeekDay; 10 | -------------------------------------------------------------------------------- /integration/helpers/holdDownKey.js: -------------------------------------------------------------------------------- 1 | async function holdDownKey(character) { 2 | await browser.performActions([ 3 | { 4 | type: 'key', 5 | id: 'keyboard', 6 | actions: [{ type: 'keyDown', value: character }], 7 | }, 8 | ]); 9 | } 10 | 11 | module.exports = holdDownKey; 12 | -------------------------------------------------------------------------------- /src/components/CarouselCard/styled/indicatorsUl.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledIndicatorUl = styled.ul` 4 | align-self: center; 5 | margin: 1rem 0 0.5rem 0; 6 | padding: 0; 7 | list-style: none; 8 | box-sizing: border-box; 9 | `; 10 | 11 | export default StyledIndicatorUl; 12 | -------------------------------------------------------------------------------- /src/components/CurrencyInput/helpers/isValidNumberValue.js: -------------------------------------------------------------------------------- 1 | import { isBoolean, isEmpty, isNumber } from '@rainbow-modules/validation'; 2 | 3 | export default function isValidNumberValue(value) { 4 | const number = Number(value); 5 | return !isBoolean(value) && !isEmpty(value) && isNumber(number) && Number.isFinite(number); 6 | } 7 | -------------------------------------------------------------------------------- /src/components/Drawer/styled/closeButton.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import ButtonIcon from '../../ButtonIcon'; 3 | 4 | const StyledCloseButton = styled(ButtonIcon)` 5 | position: absolute; 6 | top: 1rem; 7 | right: 1rem; 8 | z-index: 1; 9 | `; 10 | 11 | export default StyledCloseButton; 12 | -------------------------------------------------------------------------------- /src/components/LoadingShape/index.d.ts: -------------------------------------------------------------------------------- 1 | import { BaseProps } from '../types'; 2 | 3 | export interface LoadingShapeProps extends BaseProps { 4 | variant?: 'solid' | 'image' | 'avatar'; 5 | shape?: 'circle' | 'rect' | 'rounded-rect' | 'square'; 6 | } 7 | 8 | export default function(props: LoadingShapeProps): JSX.Element | null; 9 | -------------------------------------------------------------------------------- /src/components/Lookup/helpers/isNavigationKey.js: -------------------------------------------------------------------------------- 1 | import { UP_KEY, DOWN_KEY, ENTER_KEY } from '../../../libs/constants'; 2 | 3 | const KEYS = { 4 | [UP_KEY]: true, 5 | [DOWN_KEY]: true, 6 | [ENTER_KEY]: true, 7 | }; 8 | 9 | export default function isNavigationKey(keyCode) { 10 | return !!KEYS[keyCode]; 11 | } 12 | -------------------------------------------------------------------------------- /src/components/MonthlyCalendar/styled/controlsContainer.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledControlsContainer = styled.div` 4 | display: flex; 5 | align-items: center; 6 | justify-content: space-between; 7 | padding: 0 0 8px 0; 8 | `; 9 | 10 | export default StyledControlsContainer; 11 | -------------------------------------------------------------------------------- /src/components/PhoneInput/hooks/useCountry.js: -------------------------------------------------------------------------------- 1 | import { useMemo } from 'react'; 2 | import { getCountryFromValue } from '../helpers'; 3 | 4 | export default function useCountry(value, countries) { 5 | const { isoCode } = value || {}; 6 | return useMemo(() => getCountryFromValue(isoCode, countries), [countries, isoCode]); 7 | } 8 | -------------------------------------------------------------------------------- /src/components/PhoneInput/hooks/useHandleBlur.js: -------------------------------------------------------------------------------- 1 | import { useCallback } from 'react'; 2 | 3 | export default function useHandleBlur({ focusIndex, onBlur, value }) { 4 | return useCallback(() => { 5 | if (focusIndex === -1) { 6 | onBlur(value); 7 | } 8 | }, [focusIndex, onBlur, value]); 9 | } 10 | -------------------------------------------------------------------------------- /src/components/ProgressCircular/styled/ringPath.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import attachThemeAttrs from '../../../styles/helpers/attachThemeAttrs'; 3 | 4 | const StyledRingPath = attachThemeAttrs(styled.circle)` 5 | stroke: ${props => props.palette.border.divider}; 6 | `; 7 | 8 | export default StyledRingPath; 9 | -------------------------------------------------------------------------------- /src/components/ReCaptcha/styled/container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledContainer = styled.div` 4 | width: fit-content; 5 | display: flex; 6 | flex-direction: column; 7 | justify-content: flex-start; 8 | align-items: stretch; 9 | `; 10 | 11 | export default StyledContainer; 12 | -------------------------------------------------------------------------------- /src/components/TimelineMarker/styled/iconContainer.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledIconContainer = styled.span` 4 | display: flex; 5 | align-items: center; 6 | justify-content: center; 7 | z-index: 1; 8 | min-width: 2rem; 9 | `; 10 | 11 | export default StyledIconContainer; 12 | -------------------------------------------------------------------------------- /src/components/WeeklyCalendar/styled/content.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledContent = styled.div` 4 | overflow: hidden; 5 | flex: 1 1 auto; 6 | display: flex; 7 | flex-direction: row; 8 | position: relative; 9 | height: 960px; 10 | `; 11 | export default StyledContent; 12 | -------------------------------------------------------------------------------- /src/components/CodeInput/helpers/getNumbersFromClipboard.js: -------------------------------------------------------------------------------- 1 | export default function getNumbersFromClipboard(value) { 2 | if (value) { 3 | const extractedNumbers = value.match(/\d+/g); 4 | if (extractedNumbers) { 5 | return extractedNumbers.join(''); 6 | } 7 | } 8 | return ''; 9 | } 10 | -------------------------------------------------------------------------------- /src/components/GoogleAddressLookup/styled/optionLabel.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import attachThemeAttrs from '../../../styles/helpers/attachThemeAttrs'; 3 | 4 | const StyledOptionLabel = attachThemeAttrs(styled.span)` 5 | color: ${props => props.palette.text.header}; 6 | `; 7 | 8 | export default StyledOptionLabel; 9 | -------------------------------------------------------------------------------- /src/components/PathStep/index.d.ts: -------------------------------------------------------------------------------- 1 | import { ReactNode } from 'react'; 2 | import { BaseProps } from '../types'; 3 | 4 | export interface PathStepProps extends BaseProps { 5 | name?: string; 6 | label?: ReactNode; 7 | hasError?: boolean; 8 | } 9 | 10 | export default function(props: PathStepProps): JSX.Element | null; 11 | -------------------------------------------------------------------------------- /src/components/StripeCardInput/helpers/getElementsOptions.js: -------------------------------------------------------------------------------- 1 | export default function getElementsOptions(locale) { 2 | return { 3 | locale, 4 | fonts: [ 5 | { 6 | cssSrc: 'https://fonts.googleapis.com/css?family=Lato&display=swap', 7 | }, 8 | ], 9 | }; 10 | } 11 | -------------------------------------------------------------------------------- /src/components/Table/helpers/resizer/index.js: -------------------------------------------------------------------------------- 1 | import getUpdatedColumns from './getUpdatedColumns'; 2 | import getWidthStyle from './getWidthStyle'; 3 | import getResizedColumns from './getResizedColumns'; 4 | import getTableWidth from './getTableWidth'; 5 | 6 | export { getUpdatedColumns, getWidthStyle, getResizedColumns, getTableWidth }; 7 | -------------------------------------------------------------------------------- /src/components/WeeklyCalendar/week/styled/grid.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import attachThemeAttrs from '../../../../styles/helpers/attachThemeAttrs'; 3 | 4 | const StyledGrid = attachThemeAttrs(styled.div)` 5 | border-top: 1px solid ${props => props.palette.border.divider}; 6 | `; 7 | 8 | export default StyledGrid; 9 | -------------------------------------------------------------------------------- /src/components/WeeklyCalendar/week/styled/scroll.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledScroll = styled.div` 4 | display: flex; 5 | align-items: flex-start; 6 | overflow-y: scroll; 7 | overflow-x: auto; 8 | width: 100%; 9 | height: 100%; 10 | `; 11 | 12 | export default StyledScroll; 13 | -------------------------------------------------------------------------------- /jsdoc.conf.js: -------------------------------------------------------------------------------- 1 | const glob = require('glob'); 2 | 3 | module.exports = { 4 | source: { 5 | include: glob.sync('./src/components/**/*/pageObject/*.js'), 6 | includePattern: '.+\\.js$', 7 | }, 8 | opts: { 9 | destination: './styleguide/pageObjects', 10 | tutorials: 'tutorials', 11 | }, 12 | }; 13 | -------------------------------------------------------------------------------- /src/components/Calendar/styled/monthContainer.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledMonthContainer = styled.div` 4 | display: flex; 5 | justify-content: space-between; 6 | align-items: center; 7 | flex-grow: 1; 8 | margin-right: 12px; 9 | `; 10 | 11 | export default StyledMonthContainer; 12 | -------------------------------------------------------------------------------- /src/components/Chart/helpers/getPluginsConf.js: -------------------------------------------------------------------------------- 1 | export default function getPluginsConf(rest, plugins) { 2 | const pluginsConf = {}; 3 | plugins.forEach(plugin => { 4 | const { id } = plugin; 5 | if (rest[id]) { 6 | pluginsConf[id] = rest[id]; 7 | } 8 | }); 9 | return pluginsConf; 10 | } 11 | -------------------------------------------------------------------------------- /src/components/Drawer/styled/content.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledContent = styled.div` 4 | flex: 1; 5 | padding: 1rem; 6 | overflow: hidden; 7 | overflow-y: auto; 8 | -webkit-overflow-scrolling: touch; 9 | box-sizing: border-box; 10 | `; 11 | 12 | export default StyledContent; 13 | -------------------------------------------------------------------------------- /src/components/ImportRecordsFlow/styled/backButton.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import Button from '../../Button'; 3 | import { MARGIN_XX_LARGE } from '../../../styles/margins'; 4 | 5 | const StyledBackButton = styled(Button)` 6 | margin-right: ${MARGIN_XX_LARGE}; 7 | `; 8 | 9 | export default StyledBackButton; 10 | -------------------------------------------------------------------------------- /src/components/ImportRecordsFlow/styled/nextButton.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import Button from '../../Button'; 3 | import { MARGIN_XX_LARGE } from '../../../styles/margins'; 4 | 5 | const StyledNextButton = styled(Button)` 6 | margin-left: ${MARGIN_XX_LARGE}; 7 | `; 8 | 9 | export default StyledNextButton; 10 | -------------------------------------------------------------------------------- /src/components/Tree/styled/iconContainer.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const IconContainer = styled.span` 4 | margin: 4px 10px 4px 0; 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | width: 20px; 9 | height: 20px; 10 | `; 11 | 12 | export default IconContainer; 13 | -------------------------------------------------------------------------------- /src/components/WeekDayPicker/helpers/isWeekDayChecked.js: -------------------------------------------------------------------------------- 1 | export default function isWeekDayChecked(weekDay, value, multiple) { 2 | if (multiple) { 3 | if (Array.isArray(value)) { 4 | return value.some(day => day === weekDay); 5 | } 6 | return false; 7 | } 8 | return weekDay === value; 9 | } 10 | -------------------------------------------------------------------------------- /src/components/WeeklyCalendar/header/styled/numberDay.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { FONT_SIZE_HEADING_MEDIUM } from '../../../../styles/fontSizes'; 3 | 4 | const StyledNumberDay = styled.h1` 5 | font-size: ${FONT_SIZE_HEADING_MEDIUM}; 6 | font-weight: 900; 7 | `; 8 | 9 | export default StyledNumberDay; 10 | -------------------------------------------------------------------------------- /src/components/WeeklyCalendar/week/helpers/getEventsOfDay.js: -------------------------------------------------------------------------------- 1 | import { addDays } from '../../../Calendar/helpers'; 2 | 3 | export default function getEventsOfDay(events, day) { 4 | const first = new Date(day); 5 | const last = addDays(first, 1); 6 | return events.filter(event => event.startDate >= first && event.endDate <= last); 7 | } 8 | -------------------------------------------------------------------------------- /src/components/WeeklyCalendar/week/hooks/useFormattedEventStartDate.js: -------------------------------------------------------------------------------- 1 | import { useMemo } from 'react'; 2 | import { getFormattedEventStartDate } from '../helpers'; 3 | 4 | export default function useFormattedEventStartDate(startDate, locale) { 5 | return useMemo(() => getFormattedEventStartDate(startDate, locale), [locale, startDate]); 6 | } 7 | -------------------------------------------------------------------------------- /src/libs/utils/getBrowserLocale.js: -------------------------------------------------------------------------------- 1 | import isServer from './isServer'; 2 | 3 | export default function getBrowserLocale() { 4 | if (isServer) return 'en-US'; 5 | if (navigator.languages && navigator.languages.length > 0) return navigator.languages[0]; 6 | if (navigator.language) return navigator.language; 7 | return 'en-US'; 8 | } 9 | -------------------------------------------------------------------------------- /src/styles/helpers/attachThemeAttrs.js: -------------------------------------------------------------------------------- 1 | import getTheme from './getTheme'; 2 | 3 | export default function attachThemeAttrs(styledElement) { 4 | return styledElement.attrs(props => { 5 | const theme = getTheme(props); 6 | return { 7 | ...props, 8 | ...theme, 9 | }; 10 | }); 11 | } 12 | -------------------------------------------------------------------------------- /src/components/ImportRecordsFlow/stepOne/styled/container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledContainer = styled.div` 4 | align-items: center; 5 | display: flex; 6 | flex-direction: column; 7 | justify-content: center; 8 | margin: 0 0 16px 0; 9 | `; 10 | 11 | export default StyledContainer; 12 | -------------------------------------------------------------------------------- /src/components/MonthlyCalendar/styled/monthContainer.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledMonthContainer = styled.div` 4 | display: flex; 5 | justify-content: space-between; 6 | align-items: center; 7 | flex-grow: 0; 8 | margin-right: 1rem; 9 | `; 10 | 11 | export default StyledMonthContainer; 12 | -------------------------------------------------------------------------------- /src/components/Table/helpers/resizer/getColumnWidthFromDef.js: -------------------------------------------------------------------------------- 1 | export default function getColumnWidthFromDef(column) { 2 | const { isResized, computedWidth, width, defaultWidth } = column; 3 | let resizedWidth; 4 | if (isResized) { 5 | resizedWidth = computedWidth; 6 | } 7 | return width || resizedWidth || defaultWidth; 8 | } 9 | -------------------------------------------------------------------------------- /src/components/Table/helpers/selector/getCurrentSelectionLength.js: -------------------------------------------------------------------------------- 1 | function getSelectedRowsKeys(selectedRowsKeys) { 2 | return Object.keys(selectedRowsKeys).filter(key => selectedRowsKeys[key]); 3 | } 4 | 5 | export default function getCurrentSelectionLength(selectedRowsKeys) { 6 | return getSelectedRowsKeys(selectedRowsKeys).length; 7 | } 8 | -------------------------------------------------------------------------------- /src/components/Tree/helpers/findExpandableNodesAtLevel.js: -------------------------------------------------------------------------------- 1 | export default function findExpandableNodesAtLevel(nodes, level) { 2 | return nodes.reduce((list, node) => { 3 | if (node.hasChildren && !node.isExpanded && node.level === level) { 4 | return [...list, node]; 5 | } 6 | return list; 7 | }, []); 8 | } 9 | -------------------------------------------------------------------------------- /src/styles/borderRadius.d.ts: -------------------------------------------------------------------------------- 1 | export const BORDER_RADIUS_1: '0.875rem'; 2 | export const BORDER_RADIUS_2: '12rem'; 3 | export const BORDER_RADIUS_3: '0.4rem'; 4 | export const BORDER_RADIUS_4: '0.5rem'; 5 | export const BORDER_RADIUS_SQUARE: '0px'; 6 | export const BORDER_RADIUS_SEMI_SQUARE: '4px'; 7 | export const BORDER_RADIUS_SEMI_ROUNDED: '10px'; 8 | -------------------------------------------------------------------------------- /src/styles/helpers/color/getContrastRatio.js: -------------------------------------------------------------------------------- 1 | import getLuminance from './getLuminance'; 2 | 3 | export default function getContrastRatio(foreground, background) { 4 | const lumA = getLuminance(foreground); 5 | const lumB = getLuminance(background); 6 | return (Math.max(lumA, lumB) + 0.05) / (Math.min(lumA, lumB) + 0.05).toFixed(3); 7 | } 8 | -------------------------------------------------------------------------------- /src/components/Calendar/styled/controlsContainer.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledControlsContainer = styled.div` 4 | display: flex; 5 | flex-grow: 1; 6 | align-content: start; 7 | justify-content: space-between; 8 | padding: 0 0 8px 0; 9 | `; 10 | 11 | export default StyledControlsContainer; 12 | -------------------------------------------------------------------------------- /src/components/ImportRecordsFlow/stepThree/styled/modalContainer.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledModalContainer = styled.div` 4 | ${props => 5 | props.hasNotFileFieldsToAssign && 6 | ` 7 | margin-bottom: 100px; 8 | `}; 9 | `; 10 | 11 | export default StyledModalContainer; 12 | -------------------------------------------------------------------------------- /src/components/Lookup/helpers/isOptionVisible.js: -------------------------------------------------------------------------------- 1 | export default function isOptionVisible(elem, container) { 2 | const { top: elTop, bottom: elBottom } = elem.getBoundingClientRect(); 3 | const { top: containerTop, bottom: containerBottom } = container.getBoundingClientRect(); 4 | return elTop >= containerTop && elBottom <= containerBottom; 5 | } 6 | -------------------------------------------------------------------------------- /src/components/MenuItem/styled/header.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledHeader = styled.li` 4 | padding: 0.5rem 0.75rem; 5 | max-width: 100%; 6 | overflow: hidden; 7 | text-overflow: ellipsis; 8 | white-space: nowrap; 9 | box-sizing: border-box; 10 | `; 11 | 12 | export default StyledHeader; 13 | -------------------------------------------------------------------------------- /src/components/MonthlyCalendar/styled/table.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledTable = styled.table` 4 | border-collapse: collapse; 5 | border-spacing: 0; 6 | width: 100%; 7 | margin-top: 1rem; 8 | table-layout: fixed; 9 | box-sizing: border-box; 10 | `; 11 | 12 | export default StyledTable; 13 | -------------------------------------------------------------------------------- /src/components/PresenceMap/styled/controls.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledControls = styled.div` 4 | height: 100%; 5 | width: 100%; 6 | pointer-events: none; 7 | position: absolute; 8 | 9 | > * { 10 | pointer-events: auto; 11 | } 12 | `; 13 | 14 | export default StyledControls; 15 | -------------------------------------------------------------------------------- /src/components/Spinner/styled/childContainer.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledChildContainer = styled.span` 4 | display: inline-flex; 5 | justify-content: center; 6 | align-items: center; 7 | position: absolute; 8 | flex-direction: column; 9 | `; 10 | 11 | export default StyledChildContainer; 12 | -------------------------------------------------------------------------------- /src/components/Tree/styled/spinnerContainer.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const SpinnerContainer = styled.div` 4 | display: flex; 5 | position: relative; 6 | align-items: center; 7 | justify-content: center; 8 | width: 20px; 9 | margin-right: 8px; 10 | `; 11 | 12 | export default SpinnerContainer; 13 | -------------------------------------------------------------------------------- /src/libs/utils/isServer.js: -------------------------------------------------------------------------------- 1 | const isBrowser = !!( 2 | typeof window !== 'undefined' && 3 | window.document && 4 | window.document.createElement 5 | ); 6 | 7 | const isNative = typeof navigator !== 'undefined' && navigator.product === 'ReactNative'; 8 | 9 | const isServer = !(isBrowser || isNative); 10 | 11 | export default isServer; 12 | -------------------------------------------------------------------------------- /src/styles/borderRadius.js: -------------------------------------------------------------------------------- 1 | export const BORDER_RADIUS_1 = '0.875rem'; 2 | export const BORDER_RADIUS_2 = '12rem'; 3 | export const BORDER_RADIUS_3 = '0.4rem'; 4 | export const BORDER_RADIUS_4 = '0.5rem'; 5 | export const BORDER_RADIUS_SQUARE = '0px'; 6 | export const BORDER_RADIUS_SEMI_SQUARE = '4px'; 7 | export const BORDER_RADIUS_SEMI_ROUNDED = '10px'; 8 | -------------------------------------------------------------------------------- /src/components/ButtonOption/helpers/isOptionSelected.js: -------------------------------------------------------------------------------- 1 | export default function isOptionSelected(values, name) { 2 | if (values && Array.isArray(values)) { 3 | return values.some(value => value === name); 4 | } 5 | if (values && typeof values === 'string') { 6 | return values === name; 7 | } 8 | return false; 9 | } 10 | -------------------------------------------------------------------------------- /src/components/DateTimePicker/styled/header.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledHeader = styled.header` 4 | display: flex; 5 | align-items: center; 6 | margin: 4px 48px 8px 12px; 7 | 8 | @media (max-width: 800px) { 9 | margin: 0 48px 0 8px; 10 | } 11 | `; 12 | 13 | export default StyledHeader; 14 | -------------------------------------------------------------------------------- /src/components/GMap/styled/coordinatesContainer.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { MARGIN_MEDIUM } from '../../../styles/margins'; 3 | 4 | const StyledCoordinatesContainer = styled.div` 5 | margin-top: ${MARGIN_MEDIUM}; 6 | align-self: center; 7 | width: 99%; 8 | `; 9 | 10 | export default StyledCoordinatesContainer; 11 | -------------------------------------------------------------------------------- /src/components/Lookup/styled/selectedValueContainer.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledSelectedValueContainer = styled.div` 4 | position: relative; 5 | ${props => 6 | props.readOnly && 7 | ` 8 | display: flex; 9 | `}; 10 | `; 11 | 12 | export default StyledSelectedValueContainer; 13 | -------------------------------------------------------------------------------- /src/components/PhoneInput/countriesDropdown/hooks/useItemsRef.js: -------------------------------------------------------------------------------- 1 | import { useRef, useEffect } from 'react'; 2 | 3 | export default function useItemsRef(length) { 4 | const itemsRef = useRef([]); 5 | useEffect(() => { 6 | itemsRef.current = itemsRef.current.slice(0, length); 7 | }, [length]); 8 | 9 | return itemsRef; 10 | } 11 | -------------------------------------------------------------------------------- /src/styles/shadows.d.ts: -------------------------------------------------------------------------------- 1 | export const SHADOW_OUTLINE: string; 2 | export const SHADOW_OUTLINE_2: string; 3 | export const SHADOW_ERROR: string; 4 | export const SHADOW_1: string; 5 | export const SHADOW_2: string; 6 | export const SHADOW_3: string; 7 | export const SHADOW_4: string; 8 | export const SHADOW_5: string; 9 | export const SHADOW_6: string; 10 | -------------------------------------------------------------------------------- /src/components/Calendar/hooks/useCurrentDateFromValue.js: -------------------------------------------------------------------------------- 1 | import { useMemo } from 'react'; 2 | 3 | export default function useCurrentDateFromValue(value) { 4 | return useMemo(() => { 5 | if (!Array.isArray(value)) return value; 6 | const [rangeStart, rangeEnd] = value; 7 | return rangeStart || rangeEnd; 8 | }, [value]); 9 | } 10 | -------------------------------------------------------------------------------- /src/components/CodeInput/helpers/index.js: -------------------------------------------------------------------------------- 1 | export { default as getNormalizedValue } from './getNormalizedValue'; 2 | export { default as getNumbersFromClipboard } from './getNumbersFromClipboard'; 3 | export { default as getValueArray } from './getValueArray'; 4 | export { default as isNumeric } from './isNumeric'; 5 | export { default as setFocus } from './setFocus'; 6 | -------------------------------------------------------------------------------- /src/components/DateTimePicker/styled/calendar.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import Calendar from '../../Calendar'; 3 | 4 | const StyledCalendar = styled(Calendar)` 5 | width: 340px; 6 | height: 370px; 7 | 8 | @media (max-width: 800px) { 9 | height: 335px; 10 | } 11 | `; 12 | 13 | export default StyledCalendar; 14 | -------------------------------------------------------------------------------- /src/components/GMap/styled/container.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StyledContainer = styled.div` 4 | height: 100%; 5 | width: 100%; 6 | position: relative; 7 | overflow: auto; 8 | background: transparent; 9 | display: flex; 10 | flex-direction: column; 11 | `; 12 | 13 | export default StyledContainer; 14 | -------------------------------------------------------------------------------- /src/components/ImportRecordsFlow/stepFour/styled/statsLeftContainer.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | 3 | const StatsCardLeftContainer = styled.div` 4 | display: flex; 5 | flex-direction: column; 6 | align-items: flex-start; 7 | justify-content: center; 8 | gap: 10px; 9 | `; 10 | 11 | export default StatsCardLeftContainer; 12 | -------------------------------------------------------------------------------- /src/components/MarkdownOutput/index.d.ts: -------------------------------------------------------------------------------- 1 | import { ReactNode } from 'react'; 2 | import { BaseProps } from '../types'; 3 | 4 | export interface MarkdownOutputProps extends BaseProps { 5 | id?: string; 6 | value?: string; 7 | variant?: 'default' | 'inline'; 8 | } 9 | 10 | export default function(props: MarkdownOutputProps): JSX.Element | null; 11 | -------------------------------------------------------------------------------- /src/components/ProgressCircular/index.d.ts: -------------------------------------------------------------------------------- 1 | import { BaseProps } from '../types'; 2 | 3 | export interface ProgressCircularProps extends BaseProps { 4 | value?: number; 5 | variant?: 'brand' | 'success' | 'warning' | 'error'; 6 | assistiveText?: string; 7 | } 8 | 9 | export default function(props: ProgressCircularProps): JSX.Element | null; 10 | -------------------------------------------------------------------------------- /src/components/WeeklyCalendar/week/styled/clockLine.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import attachThemeAttrs from '../../../../styles/helpers/attachThemeAttrs'; 3 | 4 | const StyledClockLine = attachThemeAttrs(styled.div)` 5 | position: absolute; 6 | width: 100%; 7 | z-index: 504; 8 | `; 9 | 10 | export default StyledClockLine; 11 | -------------------------------------------------------------------------------- /src/components/Column/__test__/column.spec.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { mount } from 'enzyme'; 3 | import Column from '..'; 4 | 5 | describe('', () => { 6 | it('should return a div element', () => { 7 | const component = mount(); 8 | expect(component.find('div').exists()).toBe(true); 9 | }); 10 | }); 11 | -------------------------------------------------------------------------------- /src/components/Input/__test__/input.focusable.spec.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { mount } from 'enzyme'; 3 | import Input from '..'; 4 | 5 | describe('', () => { 6 | it('should be focusable', () => { 7 | const component = mount(); 8 | expect(component).toBeFocusable(); 9 | }); 10 | }); 11 | -------------------------------------------------------------------------------- /src/components/Input/pickerInput/styled/input.js: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import StyledInput from '../../styled/input'; 3 | 4 | const PickerInput = styled(StyledInput)` 5 | :hover { 6 | cursor: pointer; 7 | } 8 | 9 | &[disabled] { 10 | cursor: not-allowed; 11 | } 12 | `; 13 | 14 | export default PickerInput; 15 | -------------------------------------------------------------------------------- /src/components/StrongPasswordInput/hooks/usePasswordState.js: -------------------------------------------------------------------------------- 1 | import { useMemo } from 'react'; 2 | 3 | const mapStatuses = { weak: 'error', average: 'warning', strong: 'success' }; 4 | 5 | export default function usePasswordState(passwordState) { 6 | return useMemo(() => { 7 | return mapStatuses[passwordState]; 8 | }, [passwordState]); 9 | } 10 | -------------------------------------------------------------------------------- /src/components/TableWithBrowserPagination/helpers/getPageItems.js: -------------------------------------------------------------------------------- 1 | export default function getPageItems({ data, activePage, pageSize }) { 2 | if (pageSize > data.length) { 3 | return data; 4 | } 5 | const start = (activePage - 1) * pageSize; 6 | const end = Math.min(activePage * pageSize, data.length); 7 | return data.slice(start, end); 8 | } 9 | -------------------------------------------------------------------------------- /src/components/VisualPickerOptionFooter/index.d.ts: -------------------------------------------------------------------------------- 1 | import { ReactNode } from 'react'; 2 | import { BaseProps } from '../types'; 3 | 4 | export interface VisualPickerOptionFooterProps extends BaseProps { 5 | label?: ReactNode; 6 | description?: ReactNode; 7 | } 8 | 9 | export default function(props: VisualPickerOptionFooterProps): JSX.Element | null; 10 | -------------------------------------------------------------------------------- /src/libs/utils/__test__/uniqueId.spec.js: -------------------------------------------------------------------------------- 1 | import { uniqueId } from '..'; 2 | 3 | describe('uniqueId', () => { 4 | it('should return the unique id', () => { 5 | expect(uniqueId()).toBe('1'); 6 | }); 7 | it('should return the unique id with the prefix passed', () => { 8 | expect(uniqueId('input')).toBe('input-2'); 9 | }); 10 | }); 11 | -------------------------------------------------------------------------------- /src/components/Button/__test__/button.focusable.spec.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { mount } from 'enzyme'; 3 | import Button from '..'; 4 | 5 | describe('