├── .eslintignore
├── __mocks__
├── styleMock.js
└── svgMock.js
├── demo
├── routes
│ ├── breadcrumbs
│ │ ├── snippets
│ │ │ ├── 3.snippet
│ │ │ ├── 1.snippet
│ │ │ ├── 4.snippet
│ │ │ └── 2.snippet
│ │ └── breadcrumbs.js
│ ├── usage
│ │ └── snippets
│ │ │ ├── install-yarn.snippet
│ │ │ ├── install-npm.snippet
│ │ │ ├── independent-install.snippet
│ │ │ ├── import.snippet
│ │ │ ├── import-global.snippet
│ │ │ └── basic-app.snippet
│ ├── checkbox
│ │ ├── snippets
│ │ │ ├── 2.snippet
│ │ │ ├── 1.snippet
│ │ │ └── 3.snippet
│ │ └── checkbox.js
│ ├── text
│ │ ├── snippets
│ │ │ ├── 1.snippet
│ │ │ └── 2.snippet
│ │ └── text.js
│ ├── tooltip-icon
│ │ ├── snippets
│ │ │ └── 1.snippet
│ │ └── tooltip-icon.js
│ ├── icon-svg
│ │ ├── snippets
│ │ │ ├── 1.snippet
│ │ │ ├── 0.snippet
│ │ │ ├── 2.snippet
│ │ │ ├── 3.snippet
│ │ │ ├── 4.snippet
│ │ │ └── 5.snippet
│ │ └── icon-svg.js
│ ├── button
│ │ ├── snippets
│ │ │ ├── 3.snippet
│ │ │ ├── 6.snippet
│ │ │ ├── 7.snippet
│ │ │ ├── 1.snippet
│ │ │ ├── 0.snippet
│ │ │ └── 2.snippet
│ │ └── button.js
│ ├── icon-custom
│ │ ├── snippets
│ │ │ ├── 1.snippet
│ │ │ ├── 0.snippet
│ │ │ ├── 3.snippet
│ │ │ ├── 4.snippet
│ │ │ ├── 2.snippet
│ │ │ └── 5.snippet
│ │ └── icon-custom.js
│ ├── progress
│ │ ├── preloader
│ │ │ ├── snippets
│ │ │ │ ├── 2.snippet
│ │ │ │ └── 1.snippet
│ │ │ └── preloader.js
│ │ ├── circle-progress
│ │ │ ├── snippets
│ │ │ │ ├── 1.snippet
│ │ │ │ ├── 2.snippet
│ │ │ │ ├── 6.snippet
│ │ │ │ ├── 4.snippet
│ │ │ │ ├── 5.snippet
│ │ │ │ ├── 7.snippet
│ │ │ │ └── 3.snippet
│ │ │ └── circle-progress.js
│ │ ├── linear-progress
│ │ │ ├── snippets
│ │ │ │ ├── 1.snippet
│ │ │ │ ├── 2.snippet
│ │ │ │ ├── 6.snippet
│ │ │ │ ├── 4.snippet
│ │ │ │ ├── 5.snippet
│ │ │ │ ├── 7.snippet
│ │ │ │ └── 3.snippet
│ │ │ └── linear-progress.js
│ │ ├── progress.js
│ │ └── index.js
│ ├── sidebar
│ │ ├── snippets
│ │ │ └── 1.snippet
│ │ ├── sidebar.js
│ │ └── demo.js
│ ├── text-field
│ │ ├── snippets
│ │ │ ├── 5.snippet
│ │ │ ├── 1.snippet
│ │ │ ├── 4.snippet
│ │ │ ├── 2.snippet
│ │ │ ├── 7.snippet
│ │ │ ├── 8.snippet
│ │ │ └── 3.snippet
│ │ └── text-field.js
│ ├── dialog
│ │ ├── snippets
│ │ │ ├── 1.snippet
│ │ │ ├── 2.snippet
│ │ │ └── 3.snippet
│ │ └── dialog.js
│ ├── grid-row
│ │ ├── snippets
│ │ │ ├── 2.snippet
│ │ │ ├── 1.snippet
│ │ │ ├── 3.snippet
│ │ │ └── 4.snippet
│ │ └── grid-row.js
│ ├── alert-area
│ │ ├── snippets
│ │ │ ├── 1.snippet
│ │ │ ├── 4.snippet
│ │ │ ├── 2.snippet
│ │ │ └── 3.snippet
│ │ └── alert-area.js
│ ├── grid-column
│ │ ├── snippets
│ │ │ ├── 5.snippet
│ │ │ ├── 4.snippet
│ │ │ ├── 2.snippet
│ │ │ ├── 3.snippet
│ │ │ ├── 6.snippet
│ │ │ └── 7.snippet
│ │ └── grid-column.js
│ ├── grid-flex-region
│ │ ├── snippets
│ │ │ ├── 1.snippet
│ │ │ └── 2.snippet
│ │ └── grid-flex-region.js
│ ├── grid-padding-box
│ │ ├── snippets
│ │ │ ├── 2.snippet
│ │ │ └── 1.snippet
│ │ └── grid-padding-box.js
│ ├── header
│ │ ├── snippets
│ │ │ ├── 2.snippet
│ │ │ ├── 1.snippet
│ │ │ └── 0.snippet
│ │ └── header.js
│ ├── form
│ │ ├── snippets
│ │ │ ├── 1.snippet
│ │ │ └── 2.snippet
│ │ └── form.js
│ ├── grid-container
│ │ ├── snippets
│ │ │ └── 1.snippet
│ │ └── grid-container.js
│ ├── tag
│ │ ├── snippets
│ │ │ ├── 2.snippet
│ │ │ └── 1.snippet
│ │ └── tag.js
│ ├── app
│ │ ├── snippets
│ │ │ └── 1.snippet
│ │ ├── app.js
│ │ └── demo.js
│ ├── theme
│ │ ├── snippets
│ │ │ ├── mixin-example.snippet
│ │ │ ├── theme-structure.snippet
│ │ │ ├── theme-use.snippet
│ │ │ └── theme-provider.snippet
│ │ └── theme.js
│ ├── radio
│ │ ├── snippets
│ │ │ └── 1.snippet
│ │ └── radio.js
│ ├── toggle-button
│ │ ├── snippets
│ │ │ └── 1.snippet
│ │ └── toggle-button.js
│ ├── tabs
│ │ ├── snippets
│ │ │ └── react-router.snippet
│ │ └── tabs.js
│ ├── accordion
│ │ ├── snippets
│ │ │ ├── 1.snippet
│ │ │ ├── 6.snippet
│ │ │ ├── 3.snippet
│ │ │ ├── 2.snippet
│ │ │ ├── 5.snippet
│ │ │ └── 4.snippet
│ │ └── accordion.js
│ ├── select-box
│ │ ├── snippets
│ │ │ ├── 2.snippet
│ │ │ └── 1.snippet
│ │ └── select-box.js
│ ├── menu
│ │ ├── snippets
│ │ │ └── 2.snippet
│ │ └── menu.js
│ ├── card
│ │ ├── card.js
│ │ └── snippets
│ │ │ ├── 3.snippet
│ │ │ ├── 4.snippet
│ │ │ ├── 2.snippet
│ │ │ └── 1.snippet
│ ├── tooltip
│ │ ├── tooltip.js
│ │ └── snippets
│ │ │ ├── 3.snippet
│ │ │ └── 1.snippet
│ ├── customizing
│ │ └── snippets
│ │ │ └── theming.snippet
│ ├── auto-position
│ │ ├── auto-position.js
│ │ └── snippets
│ │ │ └── 0.snippet
│ ├── input-autocomplete
│ │ ├── input-autocomplete.js
│ │ └── snippets
│ │ │ └── 0.snippet
│ └── index.js
├── static
│ └── favicon.png
├── components
│ ├── Route
│ │ ├── RouteMemo
│ │ │ ├── styles
│ │ │ │ ├── constants.js
│ │ │ │ └── MemoHeadingStyled.js
│ │ │ └── MemoItem
│ │ │ │ └── styles
│ │ │ │ ├── MemoContentStyled.js
│ │ │ │ ├── MemoAnchorStyled.js
│ │ │ │ └── MemoItemStyled.js
│ │ ├── RouteHeading
│ │ │ └── styles
│ │ │ │ └── RouteHeaderStyled.js
│ │ ├── RouteDemo
│ │ │ ├── RouteDemo.js
│ │ │ └── styles
│ │ │ │ └── RouteDemoStyled.js
│ │ └── styles
│ │ │ └── RouteStyled.js
│ ├── Menu
│ │ ├── styles
│ │ │ ├── constants.js
│ │ │ └── MenuStyled.js
│ │ ├── MenuGroupItem
│ │ │ └── styles
│ │ │ │ └── MenuGroupItemWrapperStyled.js
│ │ ├── Menu.js
│ │ └── MenuGroup
│ │ │ ├── styles
│ │ │ ├── MenuGroupStyled.js
│ │ │ └── TitleStyled.js
│ │ │ └── MenuGroup.js
│ ├── Article
│ │ ├── index.js
│ │ ├── ArticleTextBox
│ │ │ ├── ArticleTextBox.js
│ │ │ └── styles
│ │ │ │ └── ArticleTextBoxStyled.js
│ │ ├── Article.js
│ │ ├── ArticleLead
│ │ │ ├── ArticleLead.js
│ │ │ └── styles
│ │ │ │ └── ArticleLeadStyled.js
│ │ ├── ArticleModule
│ │ │ ├── ArticleModule.js
│ │ │ └── styles
│ │ │ │ └── ArticleModuleStyled.js
│ │ ├── styles
│ │ │ └── ArticleStyled.js
│ │ └── ArticleHeader
│ │ │ └── ArticleHeader.js
│ ├── DemoSnippet
│ │ ├── styles
│ │ │ ├── constants.js
│ │ │ ├── SnippetWrapperStyled.js
│ │ │ └── DemoSnippetStyled.js
│ │ ├── DemoTitle
│ │ │ ├── DemoTitle.js
│ │ │ └── styles
│ │ │ │ └── SnippetTitleStyled.js
│ │ ├── TestBox
│ │ │ └── styles
│ │ │ │ └── TestBoxTitleStyled.js
│ │ ├── DemoPreview
│ │ │ ├── DemoPreview.js
│ │ │ └── styles
│ │ │ │ └── DemoPreviewStyled.js
│ │ └── DemoAlert
│ │ │ ├── styles
│ │ │ ├── DemoAlertItemStyled.js
│ │ │ └── DemoAlertStyled.js
│ │ │ └── DemoAlert.js
│ └── PropsTable
│ │ ├── PropsTableItem
│ │ └── styles
│ │ │ ├── PropsTypeStyled.js
│ │ │ ├── PropsDefaultStyled.js
│ │ │ ├── PropsDescriptionStyled.js
│ │ │ ├── PropsTitleStyled.js
│ │ │ └── RequiredStyled.js
│ │ └── styles
│ │ ├── PropsTableStyled.js
│ │ ├── HeaderCellStyled.js
│ │ └── HeaderRowStyled.js
├── theme
│ ├── theme.js
│ └── constants.js
├── utils
│ └── misc.js
└── index.ejs
├── .prettierrc
├── packages
├── reactackle-tag
│ ├── src
│ │ ├── index.js
│ │ └── styles
│ │ │ └── index.js
│ ├── __tests__
│ │ └── .eslintrc
│ └── README.md
├── reactackle-tabs
│ ├── src
│ │ ├── Tab
│ │ │ ├── index.js
│ │ │ └── styles
│ │ │ │ └── TabContentWrapperStyled.js
│ │ ├── index.js
│ │ └── styles
│ │ │ ├── TabsContentWrapperStyled.js
│ │ │ └── TabsListStyled.js
│ ├── __tests__
│ │ └── .eslintrc
│ └── README.md
├── reactackle-text
│ ├── src
│ │ ├── index.js
│ │ └── styles
│ │ │ └── index.js
│ └── README.md
├── reactackle-app
│ ├── __tests__
│ │ ├── .eslintrc
│ │ ├── __snapshots__
│ │ │ ├── main-region.test.js.snap
│ │ │ └── content.test.js.snap
│ │ ├── main-region.test.js
│ │ └── content.test.js
│ ├── src
│ │ ├── TopRegion
│ │ │ ├── index.js
│ │ │ ├── TopRegion.js
│ │ │ └── styles
│ │ │ │ ├── TopRegionContentStyled.js
│ │ │ │ └── TopRegionStyled.js
│ │ ├── MainRegion
│ │ │ ├── Content
│ │ │ │ ├── index.js
│ │ │ │ ├── styles
│ │ │ │ │ └── theme.js
│ │ │ │ └── Content.js
│ │ │ └── index.js
│ │ ├── BottomRegion
│ │ │ ├── index.js
│ │ │ ├── BottomRegion.js
│ │ │ └── styles
│ │ │ │ └── BottomRegionContentStyled.js
│ │ ├── withExternalPropsApp.js
│ │ ├── index.js
│ │ └── styles
│ │ │ └── theme.js
│ └── README.md
├── reactackle-button
│ ├── __tests__
│ │ └── .eslintrc
│ ├── src
│ │ └── index.js
│ └── README.md
├── reactackle-card
│ ├── __tests__
│ │ └── .eslintrc
│ ├── src
│ │ ├── CardMedia
│ │ │ ├── index.js
│ │ │ └── styles
│ │ │ │ └── CardMediaStyled.js
│ │ ├── CardAreaMain
│ │ │ ├── index.js
│ │ │ ├── CardAreaMain.js
│ │ │ └── styles
│ │ │ │ └── CardAreaMainStyled.js
│ │ ├── CardAreaSide
│ │ │ ├── index.js
│ │ │ ├── CardAreaSide.js
│ │ │ └── styles
│ │ │ │ └── CardAreaSideStyled.js
│ │ ├── CardHeaderPrimary
│ │ │ ├── index.js
│ │ │ └── styles
│ │ │ │ └── CardHeaderBoxStyled.js
│ │ ├── CardActions
│ │ │ ├── CardActionsMain
│ │ │ │ └── index.js
│ │ │ ├── CardActionsSupplemental
│ │ │ │ └── index.js
│ │ │ ├── index.js
│ │ │ └── CardActions.js
│ │ ├── CardContent
│ │ │ ├── CardContentText
│ │ │ │ └── index.js
│ │ │ └── index.js
│ │ ├── CardHeaderSecondary
│ │ │ ├── index.js
│ │ │ └── styles
│ │ │ │ └── CardHeaderSecondaryTextBoxStyled.js
│ │ ├── withExternalPropsCard.js
│ │ ├── index.js
│ │ └── externalPropTypes.js
│ └── README.md
├── reactackle-dialog
│ ├── __tests__
│ │ └── .eslintrc
│ ├── src
│ │ ├── DialogButton
│ │ │ ├── index.js
│ │ │ └── styles
│ │ │ │ └── DialogButtonStyled.js
│ │ ├── DialogHeading
│ │ │ ├── DialogTitle
│ │ │ │ └── index.js
│ │ │ ├── index.js
│ │ │ └── styles
│ │ │ │ └── DialogHeadingStyled.js
│ │ ├── DialogCloseButton
│ │ │ └── index.js
│ │ ├── DialogContent
│ │ │ ├── DialogContentText
│ │ │ │ ├── index.js
│ │ │ │ └── DialogContentText.js
│ │ │ └── index.js
│ │ ├── DialogActions
│ │ │ ├── DialogActionsRegion
│ │ │ │ ├── index.js
│ │ │ │ └── DialogActionsRegion.js
│ │ │ ├── index.js
│ │ │ └── DialogActions.js
│ │ ├── index.js
│ │ └── styles
│ │ │ └── RegionMainStyled.js
│ └── README.md
├── reactackle-form
│ ├── __tests__
│ │ └── .eslintrc
│ ├── src
│ │ ├── index.js
│ │ ├── FormItem
│ │ │ ├── FormItemLabel
│ │ │ │ ├── index.js
│ │ │ │ └── FormItemLabel.js
│ │ │ ├── index.js
│ │ │ ├── FormItem.js
│ │ │ └── styles
│ │ │ │ └── theme.js
│ │ └── styles
│ │ │ └── theme.js
│ └── README.md
├── reactackle-grid
│ ├── __tests__
│ │ ├── .eslintrc
│ │ ├── __snapshots__
│ │ │ ├── container.test.js.snap
│ │ │ ├── padding-box.test.js.snap
│ │ │ └── flex-region.test.js.snap
│ │ ├── container.test.js
│ │ ├── flex-region.test.js
│ │ └── padding-box.test.js
│ ├── src
│ │ ├── index.js
│ │ └── Container
│ │ │ └── Container.js
│ └── README.md
├── reactackle-header
│ ├── __tests__
│ │ └── .eslintrc
│ ├── src
│ │ ├── HeaderRegion
│ │ │ └── index.js
│ │ ├── HeaderTitle
│ │ │ ├── index.js
│ │ │ └── HeaderTitle.js
│ │ ├── index.js
│ │ └── styles
│ │ │ ├── HeaderContentWrapperStyled.js
│ │ │ └── HeaderBackgroundContainerStyled.js
│ └── README.md
├── reactackle-icons
│ ├── __tests__
│ │ └── .eslintrc
│ ├── src
│ │ ├── IconCustom
│ │ │ └── index.js
│ │ ├── iconStyleMixin.js
│ │ ├── IconSvg
│ │ │ └── icons
│ │ │ │ ├── IconDefault.js
│ │ │ │ ├── IconArrowDropDown.js
│ │ │ │ ├── IconCheck.js
│ │ │ │ ├── IconArrowBack.js
│ │ │ │ ├── IconArrowChevronLeft.js
│ │ │ │ ├── IconArrowChevronRight.js
│ │ │ │ ├── IconArrowForward.js
│ │ │ │ ├── IconCross.js
│ │ │ │ └── IconEye.js
│ │ └── index.js
│ └── README.md
├── reactackle-sidebar
│ ├── __tests__
│ │ └── .eslintrc
│ ├── src
│ │ ├── SidebarRegion
│ │ │ └── index.js
│ │ ├── SidebarToggle
│ │ │ └── index.js
│ │ └── index.js
│ └── README.md
├── reactackle-tooltip
│ ├── __tests__
│ │ └── .eslintrc
│ ├── src
│ │ ├── index.js
│ │ └── styles
│ │ │ ├── TooltipContentStyled.js
│ │ │ ├── theme.js
│ │ │ └── TooltipWrapperStyled.js
│ └── README.md
├── reactackle-accordion
│ ├── __tests__
│ │ └── .eslintrc
│ ├── src
│ │ ├── index.js
│ │ ├── AccordionItem
│ │ │ └── styles
│ │ │ │ ├── HeadingStyled.js
│ │ │ │ ├── TitleContentStyled.js
│ │ │ │ └── index.js
│ │ └── styles
│ │ │ └── AccordionStyled.js
│ └── README.md
├── reactackle-alert-area
│ ├── __tests__
│ │ └── .eslintrc
│ ├── src
│ │ ├── index.js
│ │ └── Alert
│ │ │ └── styles
│ │ │ ├── index.js
│ │ │ ├── ActionsStyled.js
│ │ │ ├── ContentStyled.js
│ │ │ └── ActionsWrapperStyled.js
│ └── README.md
├── reactackle-breadcrumbs
│ ├── __tests__
│ │ └── .eslintrc
│ ├── src
│ │ ├── BreadcrumbsItem
│ │ │ ├── index.js
│ │ │ └── styles
│ │ │ │ ├── index.js
│ │ │ │ ├── IconHome.js
│ │ │ │ └── TextBoxStyled.js
│ │ ├── index.js
│ │ └── styles
│ │ │ ├── ListWrapperStyled.js
│ │ │ ├── BreadcrumbsStyled.js
│ │ │ ├── index.js
│ │ │ └── ListStyled.js
│ └── README.md
├── reactackle-checkbox
│ ├── __tests__
│ │ └── .eslintrc
│ ├── src
│ │ ├── index.js
│ │ └── styles
│ │ │ └── CheckboxInputStyled.js
│ └── README.md
├── reactackle-progress
│ ├── __tests__
│ │ └── .eslintrc
│ ├── src
│ │ ├── CircleProgress
│ │ │ └── styles
│ │ │ │ ├── CircleWrapperStyled.js
│ │ │ │ └── SecondaryLineStyled.js
│ │ ├── styles
│ │ │ └── ProgressBoxStyled.js
│ │ ├── LinearProgress
│ │ │ └── styles
│ │ │ │ ├── LinearProgressStyled.js
│ │ │ │ └── SecondaryLineStyled.js
│ │ ├── index.js
│ │ ├── common
│ │ │ └── computeCssKeyframes.js
│ │ └── ProgressBase
│ │ │ └── styles
│ │ │ ├── SupplementTextStyled.js
│ │ │ └── ValueLabelStyled.js
│ └── README.md
├── reactackle-radio-group
│ ├── __tests__
│ │ └── .eslintrc
│ ├── src
│ │ └── index.js
│ └── README.md
├── reactackle-selectbox
│ ├── __tests__
│ │ └── .eslintrc
│ ├── src
│ │ ├── index.js
│ │ ├── OptionPropType
│ │ │ ├── OptionPropTypeCustom.js
│ │ │ └── OptionPropTypeNative.js
│ │ ├── styles
│ │ │ ├── WrapperStyled.js
│ │ │ └── SelectBoxStyled.js
│ │ ├── SelectBoxCustom
│ │ │ └── styles
│ │ │ │ └── SelectBoxCustomStyled.js
│ │ └── SelectBoxNative
│ │ │ └── styles
│ │ │ └── SelectBoxNativeStyled.js
│ └── README.md
├── reactackle-text-field
│ ├── __tests__
│ │ └── .eslintrc
│ ├── src
│ │ ├── index.js
│ │ └── styles
│ │ │ └── TextFieldStyled.js
│ └── README.md
├── reactackle-tooltip-icon
│ ├── __tests__
│ │ ├── .eslintrc
│ │ ├── __snapshots__
│ │ │ └── tooltip-icon.test.js.snap
│ │ └── tooltip-icon.test.js
│ ├── src
│ │ ├── index.js
│ │ └── styles
│ │ │ └── theme.js
│ └── README.md
├── reactackle-toggle-button
│ ├── __tests__
│ │ └── .eslintrc
│ ├── src
│ │ ├── index.js
│ │ └── styles
│ │ │ ├── constants.js
│ │ │ └── ToggleInputStyled.js
│ └── README.md
├── reactackle-input-autocomplete
│ ├── __tests__
│ │ └── .eslintrc
│ ├── src
│ │ ├── index.js
│ │ └── styles
│ │ │ └── InputAutocompleteStyled.js
│ └── README.md
├── reactackle-menu
│ ├── src
│ │ ├── MenuGroup
│ │ │ ├── index.js
│ │ │ └── styles
│ │ │ │ └── MenuGroupStyled.js
│ │ ├── MenuList
│ │ │ └── index.js
│ │ ├── MenuItem
│ │ │ ├── MenuLink.js
│ │ │ ├── index.js
│ │ │ └── styles
│ │ │ │ ├── MenuItemStyled.js
│ │ │ │ ├── AddonRightStyled.js
│ │ │ │ └── TextPrimaryStyled.js
│ │ ├── broadcastsConstants.js
│ │ ├── index.js
│ │ └── styles
│ │ │ └── MenuStyled.js
│ └── README.md
├── reactackle-core
│ ├── src
│ │ ├── utils
│ │ │ ├── contextChannel.js
│ │ │ ├── polyfills.js
│ │ │ ├── create-broadcast.js
│ │ │ ├── misc.js
│ │ │ └── index.js
│ │ ├── mixins.js
│ │ ├── utils.js
│ │ └── helperClasses.js
│ └── README.md
└── reactackle-autoposition
│ ├── src
│ └── index.js
│ └── README.md
├── lerna.json
├── .babelrc
├── .editorconfig
├── .gitignore
├── .stylelintrc
├── jestSetup.js
└── .travis.yml
/.eslintignore:
--------------------------------------------------------------------------------
1 | **/dist/
2 | **/node_modules/
3 |
--------------------------------------------------------------------------------
/__mocks__/styleMock.js:
--------------------------------------------------------------------------------
1 | module.exports = {};
2 |
--------------------------------------------------------------------------------
/__mocks__/svgMock.js:
--------------------------------------------------------------------------------
1 | module.exports = '';
2 |
--------------------------------------------------------------------------------
/demo/routes/breadcrumbs/snippets/3.snippet:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/demo/routes/usage/snippets/install-yarn.snippet:
--------------------------------------------------------------------------------
1 | $ yarn add reactackle
2 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "singleQuote": true,
3 | "trailingComma": "all"
4 | }
--------------------------------------------------------------------------------
/demo/routes/checkbox/snippets/2.snippet:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/demo/routes/text/snippets/1.snippet:
--------------------------------------------------------------------------------
1 | Headline
2 |
--------------------------------------------------------------------------------
/demo/routes/text/snippets/2.snippet:
--------------------------------------------------------------------------------
1 | Hover me
2 |
--------------------------------------------------------------------------------
/demo/routes/usage/snippets/install-npm.snippet:
--------------------------------------------------------------------------------
1 | $ npm install reactackle --save
2 |
--------------------------------------------------------------------------------
/demo/routes/tooltip-icon/snippets/1.snippet:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/packages/reactackle-tag/src/index.js:
--------------------------------------------------------------------------------
1 | import Tag from './Tag';
2 |
3 | export { Tag };
4 |
--------------------------------------------------------------------------------
/demo/routes/icon-svg/snippets/1.snippet:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/demo/routes/usage/snippets/independent-install.snippet:
--------------------------------------------------------------------------------
1 | $ npm install reactackle-button --save
2 |
--------------------------------------------------------------------------------
/packages/reactackle-tabs/src/Tab/index.js:
--------------------------------------------------------------------------------
1 | import Tab from './Tab';
2 |
3 | export { Tab };
4 |
--------------------------------------------------------------------------------
/packages/reactackle-tabs/src/index.js:
--------------------------------------------------------------------------------
1 | import Tabs from './Tabs';
2 |
3 | export { Tabs };
4 |
--------------------------------------------------------------------------------
/packages/reactackle-text/src/index.js:
--------------------------------------------------------------------------------
1 | import Text from './Text';
2 |
3 | export { Text };
4 |
--------------------------------------------------------------------------------
/demo/routes/button/snippets/3.snippet:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/demo/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bcrumbs/reactackle/HEAD/demo/static/favicon.png
--------------------------------------------------------------------------------
/packages/reactackle-app/__tests__/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "jest": true
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/packages/reactackle-button/__tests__/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "jest": true
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/packages/reactackle-button/src/index.js:
--------------------------------------------------------------------------------
1 | import Button from './Button';
2 |
3 | export { Button };
4 |
--------------------------------------------------------------------------------
/packages/reactackle-card/__tests__/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "jest": true
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/packages/reactackle-dialog/__tests__/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "jest": true
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/packages/reactackle-form/__tests__/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "jest": true
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/packages/reactackle-grid/__tests__/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "jest": true
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/packages/reactackle-header/__tests__/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "jest": true
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/packages/reactackle-icons/__tests__/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "jest": true
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/packages/reactackle-sidebar/__tests__/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "jest": true
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/packages/reactackle-tabs/__tests__/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "jest": true
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/packages/reactackle-tag/__tests__/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "jest": true
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/packages/reactackle-tooltip/__tests__/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "jest": true
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/demo/routes/icon-custom/snippets/1.snippet:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/demo/routes/progress/preloader/snippets/2.snippet:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/packages/reactackle-accordion/__tests__/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "jest": true
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/packages/reactackle-alert-area/__tests__/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "jest": true
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/packages/reactackle-breadcrumbs/__tests__/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "jest": true
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/packages/reactackle-checkbox/__tests__/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "jest": true
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/packages/reactackle-progress/__tests__/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "jest": true
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/packages/reactackle-radio-group/__tests__/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "jest": true
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/packages/reactackle-selectbox/__tests__/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "jest": true
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/packages/reactackle-text-field/__tests__/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "jest": true
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/packages/reactackle-tooltip-icon/__tests__/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "jest": true
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/packages/reactackle-checkbox/src/index.js:
--------------------------------------------------------------------------------
1 | import Checkbox from './Checkbox';
2 |
3 | export { Checkbox };
4 |
--------------------------------------------------------------------------------
/packages/reactackle-toggle-button/__tests__/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "jest": true
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/packages/reactackle-alert-area/src/index.js:
--------------------------------------------------------------------------------
1 | import AlertArea from './AlertArea';
2 |
3 | export { AlertArea };
4 |
--------------------------------------------------------------------------------
/packages/reactackle-app/src/TopRegion/index.js:
--------------------------------------------------------------------------------
1 | import TopRegion from './TopRegion';
2 |
3 | export { TopRegion };
4 |
--------------------------------------------------------------------------------
/packages/reactackle-input-autocomplete/__tests__/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "env": {
3 | "jest": true
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/packages/reactackle-selectbox/src/index.js:
--------------------------------------------------------------------------------
1 | import SelectBox from './SelectBox';
2 |
3 | export { SelectBox };
4 |
--------------------------------------------------------------------------------
/packages/reactackle-text-field/src/index.js:
--------------------------------------------------------------------------------
1 | import TextField from './TextField';
2 |
3 | export { TextField };
4 |
--------------------------------------------------------------------------------
/lerna.json:
--------------------------------------------------------------------------------
1 | {
2 | "lerna": "2.0.0",
3 | "version": "1.1.3",
4 | "packages": [
5 | "packages/*"
6 | ]
7 | }
8 |
--------------------------------------------------------------------------------
/packages/reactackle-app/src/MainRegion/Content/index.js:
--------------------------------------------------------------------------------
1 | import Content from './Content';
2 |
3 | export { Content };
4 |
--------------------------------------------------------------------------------
/packages/reactackle-card/src/CardMedia/index.js:
--------------------------------------------------------------------------------
1 | import CardMedia from './CardMedia';
2 |
3 | export { CardMedia };
4 |
--------------------------------------------------------------------------------
/packages/reactackle-radio-group/src/index.js:
--------------------------------------------------------------------------------
1 | import RadioGroup from './RadioGroup';
2 |
3 | export { RadioGroup };
4 |
--------------------------------------------------------------------------------
/packages/reactackle-tooltip-icon/src/index.js:
--------------------------------------------------------------------------------
1 | import TooltipIcon from './TooltipIcon';
2 |
3 | export { TooltipIcon };
4 |
--------------------------------------------------------------------------------
/packages/reactackle-form/src/index.js:
--------------------------------------------------------------------------------
1 | import Form from './Form';
2 |
3 | export { Form };
4 | export * from './FormItem';
5 |
--------------------------------------------------------------------------------
/packages/reactackle-icons/src/IconCustom/index.js:
--------------------------------------------------------------------------------
1 | import { IconCustom } from './IconCustom';
2 |
3 | export { IconCustom };
4 |
--------------------------------------------------------------------------------
/packages/reactackle-toggle-button/src/index.js:
--------------------------------------------------------------------------------
1 | import ToggleButton from './ToggleButton';
2 |
3 | export { ToggleButton };
4 |
--------------------------------------------------------------------------------
/packages/reactackle-app/src/BottomRegion/index.js:
--------------------------------------------------------------------------------
1 | import BottomRegion from './BottomRegion';
2 |
3 | export { BottomRegion };
4 |
--------------------------------------------------------------------------------
/packages/reactackle-card/src/CardAreaMain/index.js:
--------------------------------------------------------------------------------
1 | import CardAreaMain from './CardAreaMain';
2 |
3 | export { CardAreaMain };
4 |
--------------------------------------------------------------------------------
/packages/reactackle-card/src/CardAreaSide/index.js:
--------------------------------------------------------------------------------
1 | import CardAreaSide from './CardAreaSide';
2 |
3 | export { CardAreaSide };
4 |
--------------------------------------------------------------------------------
/packages/reactackle-dialog/src/DialogButton/index.js:
--------------------------------------------------------------------------------
1 | import DialogButton from './DialogButton';
2 |
3 | export { DialogButton };
4 |
--------------------------------------------------------------------------------
/packages/reactackle-header/src/HeaderRegion/index.js:
--------------------------------------------------------------------------------
1 | import HeaderRegion from './HeaderRegion';
2 |
3 | export { HeaderRegion };
4 |
--------------------------------------------------------------------------------
/packages/reactackle-header/src/HeaderTitle/index.js:
--------------------------------------------------------------------------------
1 | import HeaderTitle from './HeaderTitle';
2 |
3 | export { HeaderTitle };
4 |
--------------------------------------------------------------------------------
/demo/routes/sidebar/snippets/1.snippet:
--------------------------------------------------------------------------------
1 |
2 | ...some content here...
3 |
4 |
--------------------------------------------------------------------------------
/packages/reactackle-sidebar/src/SidebarRegion/index.js:
--------------------------------------------------------------------------------
1 | import SidebarRegion from './SidebarRegion';
2 |
3 | export { SidebarRegion };
4 |
--------------------------------------------------------------------------------
/packages/reactackle-sidebar/src/SidebarToggle/index.js:
--------------------------------------------------------------------------------
1 | import SidebarToggle from './SidebarToggle';
2 |
3 | export { SidebarToggle };
4 |
--------------------------------------------------------------------------------
/demo/routes/usage/snippets/import.snippet:
--------------------------------------------------------------------------------
1 | import { Button } from 'reactackle';
2 | ReactDOM.render(, mountNode);
3 |
--------------------------------------------------------------------------------
/packages/reactackle-dialog/src/DialogHeading/DialogTitle/index.js:
--------------------------------------------------------------------------------
1 | import DialogTitle from './DialogTitle';
2 |
3 | export { DialogTitle };
4 |
--------------------------------------------------------------------------------
/demo/routes/text-field/snippets/5.snippet:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/packages/reactackle-form/src/FormItem/FormItemLabel/index.js:
--------------------------------------------------------------------------------
1 | import FormItemLabel from './FormItemLabel';
2 |
3 | export { FormItemLabel };
4 |
--------------------------------------------------------------------------------
/packages/reactackle-input-autocomplete/src/index.js:
--------------------------------------------------------------------------------
1 | import InputAutocomplete from './InputAutocomplete';
2 |
3 | export { InputAutocomplete };
4 |
--------------------------------------------------------------------------------
/packages/reactackle-menu/src/MenuGroup/index.js:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line
2 | import MenuGroup from './MenuGroup';
3 |
4 | export { MenuGroup };
--------------------------------------------------------------------------------
/packages/reactackle-menu/src/MenuList/index.js:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line
2 | import MenuList from './MenuList';
3 |
4 | export { MenuList };
5 |
--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["react", "es2015"],
3 | "plugins": [
4 | "transform-object-rest-spread",
5 | "styled-components"
6 | ]
7 | }
8 |
--------------------------------------------------------------------------------
/demo/routes/dialog/snippets/1.snippet:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/demo/routes/text-field/snippets/1.snippet:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/packages/reactackle-app/src/MainRegion/index.js:
--------------------------------------------------------------------------------
1 | import MainRegion from './MainRegion';
2 |
3 | export { MainRegion };
4 | export * from './Content';
5 |
--------------------------------------------------------------------------------
/packages/reactackle-breadcrumbs/src/BreadcrumbsItem/index.js:
--------------------------------------------------------------------------------
1 | import BreadcrumbsItem from './BreadcrumbsItem';
2 |
3 | export { BreadcrumbsItem };
4 |
--------------------------------------------------------------------------------
/packages/reactackle-card/src/CardHeaderPrimary/index.js:
--------------------------------------------------------------------------------
1 | import CardHeaderPrimary from './CardHeaderPrimary';
2 |
3 | export { CardHeaderPrimary };
4 |
--------------------------------------------------------------------------------
/packages/reactackle-dialog/src/DialogCloseButton/index.js:
--------------------------------------------------------------------------------
1 | import DialogCloseButton from './DialogCloseButton';
2 |
3 | export { DialogCloseButton };
4 |
--------------------------------------------------------------------------------
/packages/reactackle-form/src/FormItem/index.js:
--------------------------------------------------------------------------------
1 | import FormItem from './FormItem';
2 |
3 | export { FormItem };
4 | export * from './FormItemLabel';
5 |
--------------------------------------------------------------------------------
/packages/reactackle-menu/src/MenuItem/MenuLink.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export const MenuLink = props => {props.children};
--------------------------------------------------------------------------------
/packages/reactackle-menu/src/MenuItem/index.js:
--------------------------------------------------------------------------------
1 | // eslint-disable-next-line
2 | import MenuItem from './MenuItem';
3 |
4 | export {
5 | MenuItem,
6 | };
--------------------------------------------------------------------------------
/demo/routes/grid-row/snippets/2.snippet:
--------------------------------------------------------------------------------
1 |
2 | 1
3 | 2
4 |
5 |
--------------------------------------------------------------------------------
/packages/reactackle-card/src/CardActions/CardActionsMain/index.js:
--------------------------------------------------------------------------------
1 | import CardActionsMain from './CardActionsMain';
2 |
3 | export { CardActionsMain };
4 |
--------------------------------------------------------------------------------
/packages/reactackle-card/src/CardContent/CardContentText/index.js:
--------------------------------------------------------------------------------
1 | import CardContentText from './CardContentText';
2 |
3 | export { CardContentText };
4 |
--------------------------------------------------------------------------------
/demo/routes/alert-area/snippets/1.snippet:
--------------------------------------------------------------------------------
1 | const alerts = [
2 | {
3 | content: 'AlertArea content'
4 | }
5 | ];
6 |
7 |
8 |
--------------------------------------------------------------------------------
/demo/routes/checkbox/snippets/1.snippet:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/packages/reactackle-breadcrumbs/src/index.js:
--------------------------------------------------------------------------------
1 | import Breadcrumbs from './Breadcrumbs';
2 |
3 | export { Breadcrumbs };
4 | export * from './BreadcrumbsItem';
5 |
--------------------------------------------------------------------------------
/packages/reactackle-card/src/CardHeaderSecondary/index.js:
--------------------------------------------------------------------------------
1 | import CardHeaderSecondary from './CardHeaderSecondary';
2 |
3 | export { CardHeaderSecondary };
4 |
--------------------------------------------------------------------------------
/packages/reactackle-core/src/utils/contextChannel.js:
--------------------------------------------------------------------------------
1 | export const CARD_CHANNEL = '__reactackle-card__';
2 | export const APP_CHANNEL = '__reactackle-app__';
3 |
--------------------------------------------------------------------------------
/packages/reactackle-text/src/styles/index.js:
--------------------------------------------------------------------------------
1 | import componentTheme from './theme';
2 |
3 | export { componentTheme };
4 |
5 | export * from './TextStyled';
6 |
--------------------------------------------------------------------------------
/demo/routes/grid-column/snippets/5.snippet:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/demo/routes/progress/preloader/snippets/1.snippet:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/packages/reactackle-card/src/CardContent/index.js:
--------------------------------------------------------------------------------
1 | import CardContent from './CardContent';
2 |
3 | export { CardContent };
4 | export * from './CardContentText';
5 |
--------------------------------------------------------------------------------
/packages/reactackle-dialog/src/DialogContent/DialogContentText/index.js:
--------------------------------------------------------------------------------
1 | import DialogContentText from './DialogContentText';
2 |
3 | export { DialogContentText };
4 |
--------------------------------------------------------------------------------
/packages/reactackle-menu/src/broadcastsConstants.js:
--------------------------------------------------------------------------------
1 | export const MENU_BROADCAST = 'MENU_BROADCAST';
2 | export const MENU_GROUP_BROADCAST = 'MENU_GROUP_BROADCAST';
3 |
--------------------------------------------------------------------------------
/demo/routes/grid-flex-region/snippets/1.snippet:
--------------------------------------------------------------------------------
1 |
2 | 1
3 | 2
4 |
5 |
--------------------------------------------------------------------------------
/packages/reactackle-dialog/src/DialogHeading/index.js:
--------------------------------------------------------------------------------
1 | import DialogHeading from './DialogHeading';
2 |
3 | export { DialogHeading };
4 | export * from './DialogTitle';
5 |
--------------------------------------------------------------------------------
/packages/reactackle-header/src/index.js:
--------------------------------------------------------------------------------
1 | import Header from './Header';
2 |
3 | export { Header };
4 | export * from './HeaderTitle';
5 | export * from './HeaderRegion';
6 |
--------------------------------------------------------------------------------
/packages/reactackle-app/src/withExternalPropsApp.js:
--------------------------------------------------------------------------------
1 | import { APP_CHANNEL, withExternalProps } from 'reactackle-core';
2 |
3 | export default withExternalProps(APP_CHANNEL);
4 |
--------------------------------------------------------------------------------
/packages/reactackle-dialog/src/DialogActions/DialogActionsRegion/index.js:
--------------------------------------------------------------------------------
1 | import DialogActionsRegion from './DialogActionsRegion';
2 |
3 | export { DialogActionsRegion };
4 |
--------------------------------------------------------------------------------
/packages/reactackle-dialog/src/DialogContent/index.js:
--------------------------------------------------------------------------------
1 | import DialogContent from './DialogContent';
2 |
3 | export { DialogContent };
4 | export * from './DialogContentText';
5 |
--------------------------------------------------------------------------------
/demo/routes/grid-padding-box/snippets/2.snippet:
--------------------------------------------------------------------------------
1 |
2 | padding size large, without x-spacing
3 |
4 |
--------------------------------------------------------------------------------
/packages/reactackle-card/src/withExternalPropsCard.js:
--------------------------------------------------------------------------------
1 | import { CARD_CHANNEL, withExternalProps } from 'reactackle-core';
2 |
3 | export default withExternalProps(CARD_CHANNEL);
4 |
--------------------------------------------------------------------------------
/packages/reactackle-dialog/src/DialogActions/index.js:
--------------------------------------------------------------------------------
1 | import DialogActions from './DialogActions';
2 |
3 | export { DialogActions };
4 | export * from './DialogActionsRegion';
5 |
--------------------------------------------------------------------------------
/packages/reactackle-sidebar/src/index.js:
--------------------------------------------------------------------------------
1 | import Sidebar from './Sidebar';
2 |
3 | export { Sidebar };
4 | export * from './SidebarToggle';
5 | export * from './SidebarRegion';
6 |
--------------------------------------------------------------------------------
/packages/reactackle-tooltip/src/index.js:
--------------------------------------------------------------------------------
1 | import Tooltip from './Tooltip';
2 |
3 | export { Tooltip };
4 | export * from './withTooltip';
5 | export * from './withContentTooltip';
6 |
--------------------------------------------------------------------------------
/demo/routes/grid-row/snippets/1.snippet:
--------------------------------------------------------------------------------
1 |
2 |
3 | 1
4 |
5 |
6 | 2
7 |
8 |
9 |
--------------------------------------------------------------------------------
/packages/reactackle-autoposition/src/index.js:
--------------------------------------------------------------------------------
1 | import AutoPosition, { recalculateAllAutoPosition } from './AutoPosition';
2 |
3 | export { AutoPosition, recalculateAllAutoPosition };
4 |
--------------------------------------------------------------------------------
/packages/reactackle-card/src/CardActions/CardActionsSupplemental/index.js:
--------------------------------------------------------------------------------
1 | import CardActionsSupplemental from './CardActionsSupplemental';
2 |
3 | export { CardActionsSupplemental };
4 |
--------------------------------------------------------------------------------
/demo/routes/header/snippets/2.snippet:
--------------------------------------------------------------------------------
1 |
2 |
3 | Simple static header
4 |
5 |
6 |
--------------------------------------------------------------------------------
/demo/routes/usage/snippets/import-global.snippet:
--------------------------------------------------------------------------------
1 | import {
2 | injectGlobalStyle,
3 | injectResetStyle,
4 | } from 'reactackle';
5 |
6 | injectGlobalStyle();
7 | injectResetStyle();
8 |
--------------------------------------------------------------------------------
/packages/reactackle-accordion/src/index.js:
--------------------------------------------------------------------------------
1 | import Accordion from './Accordion';
2 | import AccordionItem from './AccordionItem/AccordionItem';
3 |
4 | export { Accordion, AccordionItem };
5 |
--------------------------------------------------------------------------------
/packages/reactackle-app/src/index.js:
--------------------------------------------------------------------------------
1 | import App from './App';
2 |
3 | export { App };
4 | export * from './BottomRegion';
5 | export * from './TopRegion';
6 | export * from './MainRegion';
7 |
--------------------------------------------------------------------------------
/packages/reactackle-breadcrumbs/src/styles/ListWrapperStyled.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const ListWrapperStyled = styled.div`
4 | overflow: hidden;
5 | `;
6 |
--------------------------------------------------------------------------------
/demo/routes/form/snippets/1.snippet:
--------------------------------------------------------------------------------
1 |
9 |
--------------------------------------------------------------------------------
/demo/routes/progress/circle-progress/snippets/1.snippet:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/demo/routes/progress/linear-progress/snippets/1.snippet:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
--------------------------------------------------------------------------------
/packages/reactackle-icons/src/iconStyleMixin.js:
--------------------------------------------------------------------------------
1 | export const iconStyleMixin = color => `
2 | color: ${color};
3 | border-color: currentColor;
4 |
5 | svg { fill: currentColor; }
6 | `;
7 |
--------------------------------------------------------------------------------
/demo/routes/progress/circle-progress/snippets/2.snippet:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/demo/routes/progress/linear-progress/snippets/2.snippet:
--------------------------------------------------------------------------------
1 |
7 |
--------------------------------------------------------------------------------
/packages/reactackle-core/src/mixins.js:
--------------------------------------------------------------------------------
1 | export * from './mixins/animations';
2 | export * from './mixins/media';
3 | export * from './mixins/mixinsStyle';
4 | export * from './mixins/mixinsElements';
5 |
--------------------------------------------------------------------------------
/demo/routes/grid-container/snippets/1.snippet:
--------------------------------------------------------------------------------
1 |
2 | Default container (expand your window to see differences)
3 |
4 |
5 |
6 | Boxed container
7 |
8 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | [*]
2 | end_of_line = lf
3 | insert_final_newline = true
4 |
5 | [*.js]
6 | indent_style = space
7 | indent_size = 2
8 |
9 | [*.json]
10 | indent_style = space
11 | indent_size = 2
12 |
--------------------------------------------------------------------------------
/demo/components/Route/RouteMemo/styles/constants.js:
--------------------------------------------------------------------------------
1 | import {
2 | baseModule,
3 | } from '../../../../theme/styleHelpers';
4 |
5 | export const routeMemoConstants = {
6 | paddingX: baseModule(3),
7 | };
8 |
--------------------------------------------------------------------------------
/packages/reactackle-alert-area/src/Alert/styles/index.js:
--------------------------------------------------------------------------------
1 | export * from './AlertStyled';
2 | export * from './ContentStyled';
3 | export * from './ActionsStyled';
4 | export * from './ActionsWrapperStyled';
5 |
--------------------------------------------------------------------------------
/packages/reactackle-card/src/CardActions/index.js:
--------------------------------------------------------------------------------
1 | import CardActions from './CardActions';
2 |
3 | export { CardActions };
4 | export * from './CardActionsMain';
5 | export * from './CardActionsSupplemental';
6 |
--------------------------------------------------------------------------------
/packages/reactackle-dialog/src/index.js:
--------------------------------------------------------------------------------
1 | import Dialog from './Dialog';
2 |
3 | export { Dialog };
4 | export * from './DialogActions';
5 | export * from './DialogContent';
6 | export * from './DialogHeading';
7 |
--------------------------------------------------------------------------------
/demo/routes/button/snippets/6.snippet:
--------------------------------------------------------------------------------
1 |
5 |
6 |
11 |
--------------------------------------------------------------------------------
/demo/routes/icon-custom/snippets/0.snippet:
--------------------------------------------------------------------------------
1 | import { IconCustom } from 'reactackle-icons';
2 |
3 |
4 |
5 |
8 |
--------------------------------------------------------------------------------
/packages/reactackle-accordion/src/AccordionItem/styles/HeadingStyled.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const HeadingStyled = styled.dt`
4 | position: relative;
5 | z-index: 2;
6 | `;
7 |
--------------------------------------------------------------------------------
/demo/routes/form/snippets/2.snippet:
--------------------------------------------------------------------------------
1 |
9 |
--------------------------------------------------------------------------------
/demo/routes/tag/snippets/2.snippet:
--------------------------------------------------------------------------------
1 | }
7 | />
8 |
--------------------------------------------------------------------------------
/packages/reactackle-app/src/MainRegion/Content/styles/theme.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import { bodyBackgroundColor } from 'reactackle-core';
4 |
5 | export default {
6 | backgroundColor: bodyBackgroundColor,
7 | };
8 |
--------------------------------------------------------------------------------
/demo/components/Menu/styles/constants.js:
--------------------------------------------------------------------------------
1 | import {
2 | baseModule,
3 | } from '../../../theme/styleHelpers';
4 |
5 | export const MenuConstants = {
6 | base: {
7 | paddingX: baseModule(2),
8 | },
9 | };
10 |
--------------------------------------------------------------------------------
/demo/routes/app/snippets/1.snippet:
--------------------------------------------------------------------------------
1 |
2 | TopRegion
3 |
4 | MainRegion - Content
5 |
6 | BottomRegion
7 |
8 |
--------------------------------------------------------------------------------
/demo/routes/header/snippets/1.snippet:
--------------------------------------------------------------------------------
1 |
5 |
6 | Fixed header
7 |
8 |
9 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # User-specific stuff:
2 | .idea/
3 | .vscode/
4 | wallaby.conf.js
5 |
6 | # Build files
7 | dist/
8 |
9 | #node modules
10 | node_modules
11 |
12 | .DS_Store
13 | demo/.DS_Store
14 | lerna-debug.log
15 | npm-debug.log
16 |
--------------------------------------------------------------------------------
/demo/routes/grid-column/snippets/4.snippet:
--------------------------------------------------------------------------------
1 |
2 |
6 | column centered from medium to large screens
7 |
8 |
9 |
--------------------------------------------------------------------------------
/demo/routes/grid-row/snippets/3.snippet:
--------------------------------------------------------------------------------
1 |
2 | 1
3 | 2
4 | 3
5 |
6 |
--------------------------------------------------------------------------------
/packages/reactackle-icons/src/IconSvg/icons/IconDefault.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { IconSvg } from '../IconSvg';
3 |
4 | const IconDefault = props => (
5 |
6 | );
7 |
8 | export default IconDefault;
9 |
--------------------------------------------------------------------------------
/demo/routes/button/snippets/7.snippet:
--------------------------------------------------------------------------------
1 |
6 |
7 |
11 |
--------------------------------------------------------------------------------
/demo/routes/dialog/snippets/2.snippet:
--------------------------------------------------------------------------------
1 |
11 |
--------------------------------------------------------------------------------
/demo/routes/theme/snippets/mixin-example.snippet:
--------------------------------------------------------------------------------
1 | reactackleMixin = {
2 | reactackle: {
3 | components: {
4 | button: {
5 | text: {
6 | fontSize: '16px',
7 | },
8 | },
9 | },
10 | },
11 | },
12 |
--------------------------------------------------------------------------------
/demo/components/Article/index.js:
--------------------------------------------------------------------------------
1 | export * from './Article';
2 | export * from './ArticleHeader/ArticleHeader';
3 | export * from './ArticleLead/ArticleLead';
4 | export * from './ArticleModule/ArticleModule';
5 | export * from './ArticleTextBox/ArticleTextBox';
6 |
--------------------------------------------------------------------------------
/packages/reactackle-app/__tests__/__snapshots__/main-region.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[` renders correctly with default props 1`] = `
4 |
7 | `;
8 |
--------------------------------------------------------------------------------
/packages/reactackle-grid/__tests__/__snapshots__/container.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[` renders correctly with default props 1`] = `
4 |
7 | `;
8 |
--------------------------------------------------------------------------------
/packages/reactackle-grid/__tests__/__snapshots__/padding-box.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[` renders correctly with default props 1`] = `
4 |
7 | `;
8 |
--------------------------------------------------------------------------------
/demo/components/Route/RouteHeading/styles/RouteHeaderStyled.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const RouteHeaderStyled = styled.div`
4 | position: relative;
5 | z-index: 9;
6 | `;
7 |
8 | RouteHeaderStyled.displayName = 'RouteHeaderStyled';
9 |
--------------------------------------------------------------------------------
/demo/routes/grid-column/snippets/2.snippet:
--------------------------------------------------------------------------------
1 |
2 |
3 | column 1
4 |
5 |
6 | column 2
7 |
8 |
9 |
--------------------------------------------------------------------------------
/demo/routes/grid-column/snippets/3.snippet:
--------------------------------------------------------------------------------
1 |
2 |
3 | column 1
4 |
5 |
6 | column 2
7 |
8 |
9 |
--------------------------------------------------------------------------------
/demo/routes/icon-svg/snippets/0.snippet:
--------------------------------------------------------------------------------
1 | import { IconSvg } from 'reactackle-icons';
2 |
3 |
4 |
5 |
6 |
9 |
10 |
--------------------------------------------------------------------------------
/packages/reactackle-app/src/styles/theme.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import { bodyBackgroundColor } from 'reactackle-core';
4 |
5 | export default {
6 | minHeight: '100vh',
7 |
8 | content: {
9 | backgroundColor: bodyBackgroundColor,
10 | },
11 | };
12 |
--------------------------------------------------------------------------------
/packages/reactackle-core/src/utils.js:
--------------------------------------------------------------------------------
1 | export * from './utils/misc';
2 | export * from './utils/polyfills';
3 | export * from './utils/index';
4 | export * from './utils/create-broadcast';
5 | export * from './utils/contextChannel';
6 | export * from './utils/colors';
7 |
--------------------------------------------------------------------------------
/packages/reactackle-grid/__tests__/__snapshots__/flex-region.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[` renders correctly with default props 1`] = `
4 |
7 | `;
8 |
--------------------------------------------------------------------------------
/packages/reactackle-selectbox/src/OptionPropType/OptionPropTypeCustom.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 |
3 | export const OptionPropTypeCustom = PropTypes.shape({
4 | value: PropTypes.any,
5 | text: PropTypes.string,
6 | disabled: PropTypes.bool,
7 | });
8 |
--------------------------------------------------------------------------------
/.stylelintrc:
--------------------------------------------------------------------------------
1 | {
2 | "processors": ["stylelint-processor-styled-components"],
3 | "extends": "stylelint-config-standard",
4 | "syntax": "scss",
5 | "rules": {
6 | "selector-type-no-unknown": "never",
7 | "selector-type-case": "never"
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/demo/routes/grid-flex-region/snippets/2.snippet:
--------------------------------------------------------------------------------
1 |
2 | 1
3 | 2
4 |
5 |
6 |
7 | 1
8 | 2
9 |
10 |
--------------------------------------------------------------------------------
/demo/routes/icon-svg/snippets/2.snippet:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/demo/routes/icon-svg/snippets/3.snippet:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/demo/routes/icon-svg/snippets/4.snippet:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/demo/routes/radio/snippets/1.snippet:
--------------------------------------------------------------------------------
1 | const options = [
2 | { text: 'Option 1', value: 'v1' },
3 | { text: 'Option 2', value: 'v2' },
4 | { text: 'Option 3 - disabled', value: 'v3', disabled: true },
5 | ];
6 |
7 |
10 |
--------------------------------------------------------------------------------
/demo/routes/alert-area/snippets/4.snippet:
--------------------------------------------------------------------------------
1 | const alerts = [
2 | {
3 | content: 'AlertArea content 1',
4 | timeout: 2000
5 | },
6 | {
7 | content: 'AlertArea content 2',
8 | timeout: 3000
9 | },
10 | ];
11 |
12 |
13 |
--------------------------------------------------------------------------------
/demo/routes/grid-padding-box/snippets/1.snippet:
--------------------------------------------------------------------------------
1 | padding size: small
2 | padding size: medium
3 | padding size: large
4 |
--------------------------------------------------------------------------------
/packages/reactackle-progress/src/CircleProgress/styles/CircleWrapperStyled.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const CircleWrapperStyled = styled.div`
4 | transform: rotate(-90deg);
5 | `;
6 |
7 | CircleWrapperStyled.displayName = 'CircleWrapperStyled';
8 |
--------------------------------------------------------------------------------
/packages/reactackle-accordion/src/AccordionItem/styles/TitleContentStyled.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const TitleContentStyled = styled.div`
4 | flex-grow: 1;
5 | min-width: 0;
6 | `;
7 |
8 | TitleContentStyled.displayName = 'TitleContentStyled';
9 |
--------------------------------------------------------------------------------
/packages/reactackle-breadcrumbs/src/styles/BreadcrumbsStyled.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const BreadcrumbsStyled = styled.nav`
4 | display: flex;
5 | max-width: 100%;
6 | list-style-type: none;
7 | padding: 0;
8 | margin: 0;
9 | `;
10 |
--------------------------------------------------------------------------------
/demo/components/Menu/styles/MenuStyled.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import styled from 'styled-components';
4 |
5 | export const MenuStyled = styled.div`
6 | width: 100%;
7 | min-width: 0;
8 | flex-shrink: 0;
9 | `;
10 |
11 | MenuStyled.displayName = 'MenuStyled';
12 |
13 |
--------------------------------------------------------------------------------
/demo/components/Route/RouteMemo/MemoItem/styles/MemoContentStyled.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import styled from 'styled-components';
4 |
5 | export const MemoContentStyled = styled.span`
6 | flex-grow: 1;
7 | `;
8 |
9 | MemoContentStyled.displayName = 'MemoContentStyled';
10 |
--------------------------------------------------------------------------------
/demo/routes/icon-custom/snippets/3.snippet:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/demo/routes/icon-custom/snippets/4.snippet:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/demo/routes/icon-custom/snippets/2.snippet:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/packages/reactackle-breadcrumbs/src/styles/index.js:
--------------------------------------------------------------------------------
1 | import componentTheme from './theme';
2 |
3 | export { componentTheme };
4 |
5 | export * from './BreadcrumbsStyled';
6 | export * from './ListWrapperStyled';
7 | export * from './ListStyled';
8 | export * from './NavigationButtonStyled';
9 |
--------------------------------------------------------------------------------
/demo/components/Route/RouteDemo/RouteDemo.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import { RouteDemoStyled } from './styles/RouteDemoStyled';
5 |
6 | export const RouteDemo = props => (
7 |
8 | { props.children }
9 |
10 | );
11 |
--------------------------------------------------------------------------------
/demo/routes/checkbox/snippets/3.snippet:
--------------------------------------------------------------------------------
1 |
5 | Label with some anchor
6 |
7 | }
8 | />
9 |
13 |
--------------------------------------------------------------------------------
/demo/routes/grid-row/snippets/4.snippet:
--------------------------------------------------------------------------------
1 |
2 | expandRatio="2"
3 |
4 |
5 | expandRatio="1"
6 |
7 |
8 | expandRatio not set
9 |
10 |
--------------------------------------------------------------------------------
/demo/components/DemoSnippet/styles/constants.js:
--------------------------------------------------------------------------------
1 | import {
2 | baseModule,
3 | colorWhite,
4 | } from '../../../theme/styleHelpers';
5 |
6 | export const demoSnippetConstants = {
7 | similarItemsSpacing: baseModule(3),
8 | backgroundColor: colorWhite,
9 | contentWidth: 640,
10 | };
11 |
--------------------------------------------------------------------------------
/demo/routes/progress/circle-progress/snippets/6.snippet:
--------------------------------------------------------------------------------
1 |
9 | Progress with custom label component
10 |
11 |
--------------------------------------------------------------------------------
/demo/routes/progress/linear-progress/snippets/6.snippet:
--------------------------------------------------------------------------------
1 |
9 | Progress with custom label component
10 |
11 |
--------------------------------------------------------------------------------
/demo/routes/theme/snippets/theme-structure.snippet:
--------------------------------------------------------------------------------
1 | theme = {
2 | reactackle: {
3 | base: {
4 | /* Global variables */
5 | },
6 |
7 | components: {
8 | button: { /* Button constants */ },
9 |
10 | /* ... Other components constants */
11 | },
12 | },
13 | },
14 |
--------------------------------------------------------------------------------
/packages/reactackle-selectbox/src/styles/WrapperStyled.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import styled from 'styled-components';
4 |
5 | /** Styles */
6 | export const WrapperStyled = styled.div`
7 | position: relative;
8 | flex-grow: 1;
9 | `;
10 |
11 | WrapperStyled.displayName = 'WrapperStyled';
12 |
--------------------------------------------------------------------------------
/demo/routes/alert-area/snippets/2.snippet:
--------------------------------------------------------------------------------
1 | const alerts = [
2 | {
3 | buttons: [{
4 | text: 'close',
5 | colorScheme: 'flatLight',
6 | closeAlert: true,
7 | }],
8 | content: 'AlertArea content',
9 | timeout: 0,
10 | }
11 | ];
12 |
13 |
14 |
--------------------------------------------------------------------------------
/demo/routes/progress/linear-progress/snippets/4.snippet:
--------------------------------------------------------------------------------
1 |
7 |
13 |
--------------------------------------------------------------------------------
/packages/reactackle-progress/src/styles/ProgressBoxStyled.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const ProgressBoxStyled = styled.div`
4 | display: flex;
5 | flex-direction: column;
6 | position: relative;
7 | `;
8 |
9 | ProgressBoxStyled.displayName = 'ProgressBoxStyled';
10 |
--------------------------------------------------------------------------------
/packages/reactackle-selectbox/src/OptionPropType/OptionPropTypeNative.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 |
3 | export const OptionPropTypeNative = PropTypes.shape({
4 | value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
5 | text: PropTypes.string,
6 | disabled: PropTypes.bool,
7 | });
8 |
--------------------------------------------------------------------------------
/packages/reactackle-tag/src/styles/index.js:
--------------------------------------------------------------------------------
1 | import componentTheme from './theme';
2 |
3 | export { componentTheme };
4 |
5 | export * from './TagStyled';
6 | export * from './IconStyled';
7 | export * from './ContentStyled';
8 | export * from './TextStyled';
9 | export * from './RemoveIconStyled';
10 |
--------------------------------------------------------------------------------
/demo/components/Route/styles/RouteStyled.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import styled from 'styled-components';
4 |
5 | /** STYLES */
6 | export const RouteStyled = styled.div`
7 | display: flex;
8 | flex-grow: 1;
9 | flex-direction: column;
10 | `;
11 |
12 | RouteStyled.displayName = 'RouteStyled';
13 |
--------------------------------------------------------------------------------
/packages/reactackle-dialog/src/DialogButton/styles/DialogButtonStyled.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import styled from 'styled-components';
4 |
5 | export const DialogButtonStyled = styled.div`
6 | display: flex;
7 | flex-shrink: 0;
8 | `;
9 |
10 | DialogButtonStyled.displayName = 'DialogButtonStyled';
11 |
--------------------------------------------------------------------------------
/demo/routes/progress/circle-progress/snippets/4.snippet:
--------------------------------------------------------------------------------
1 |
7 |
13 |
--------------------------------------------------------------------------------
/demo/routes/toggle-button/snippets/1.snippet:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/packages/reactackle-dialog/src/DialogHeading/styles/DialogHeadingStyled.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import styled from 'styled-components';
4 |
5 | export const DialogHeadingStyled = styled.div`
6 | position: relative;
7 | flex-shrink: 0;
8 | `;
9 |
10 | DialogHeadingStyled.displayName = 'DialogHeadingStyled';
11 |
--------------------------------------------------------------------------------
/demo/routes/progress/circle-progress/snippets/5.snippet:
--------------------------------------------------------------------------------
1 |
7 |
14 |
--------------------------------------------------------------------------------
/demo/routes/progress/linear-progress/snippets/5.snippet:
--------------------------------------------------------------------------------
1 |
7 |
14 |
--------------------------------------------------------------------------------
/packages/reactackle-accordion/src/AccordionItem/styles/index.js:
--------------------------------------------------------------------------------
1 | export * from './HeadingStyled';
2 | export * from './TitleBoxStyled';
3 | export * from './TitleContentStyled';
4 | export * from './TitleStyled';
5 | export * from './IconExpandWrapperStyled';
6 | export * from './IconWrapperStyled';
7 | export * from './ContentStyled';
8 |
--------------------------------------------------------------------------------
/demo/routes/dialog/snippets/3.snippet:
--------------------------------------------------------------------------------
1 |
12 | }
13 | >
14 |
15 | ..text
16 |
17 |
18 |
--------------------------------------------------------------------------------
/demo/routes/tabs/snippets/react-router.snippet:
--------------------------------------------------------------------------------
1 | const LinkWrapper = props => (
2 |
3 | {props.children}
4 |
5 | );
6 |
13 |
--------------------------------------------------------------------------------
/demo/theme/theme.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import { paletteBlueGrey } from './constants';
4 |
5 | export default {
6 | reactackleDemo: {
7 | paletteBlueGrey,
8 |
9 | color: {
10 | blue: '#2196f3',
11 | darkblue: '#3c5da1',
12 | purple: '#6a22f3',
13 | yellow: '#ffc004',
14 | },
15 | },
16 | };
17 |
--------------------------------------------------------------------------------
/demo/routes/breadcrumbs/snippets/1.snippet:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/demo/routes/icon-svg/snippets/5.snippet:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | import { iconSvgSizeMixin, IconSvg } from 'reactackle-icons';
3 |
4 | const TestWrapper = styled.div`
5 | ${iconSvgSizeMixin('70px', '5px', '50px')}
6 | `;
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/demo/components/DemoSnippet/DemoTitle/DemoTitle.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import { SnippetTitleStyled } from './styles/SnippetTitleStyled';
5 |
6 | export const DemoTitle = props => (
7 |
8 | {props.children}
9 |
10 | );
11 |
12 | DemoTitle.displayName = 'DemoTitle';
13 |
--------------------------------------------------------------------------------
/demo/routes/accordion/snippets/1.snippet:
--------------------------------------------------------------------------------
1 | Place here some data],
7 | },
8 | {
9 | id: '2',
10 | title: 'Accordion Item 2',
11 | content: [Place here some data
],
12 | }
13 | ]}
14 | />
15 |
--------------------------------------------------------------------------------
/demo/routes/button/snippets/1.snippet:
--------------------------------------------------------------------------------
1 |
6 |
7 |
12 |
13 |
18 |
--------------------------------------------------------------------------------
/demo/routes/progress/circle-progress/snippets/7.snippet:
--------------------------------------------------------------------------------
1 |
7 |
8 |
15 |
--------------------------------------------------------------------------------
/demo/routes/progress/linear-progress/snippets/7.snippet:
--------------------------------------------------------------------------------
1 |
7 |
8 |
15 |
--------------------------------------------------------------------------------
/packages/reactackle-card/src/index.js:
--------------------------------------------------------------------------------
1 | import Card from './Card';
2 |
3 | export { Card };
4 | export * from './CardActions';
5 | export * from './CardAreaMain';
6 | export * from './CardAreaSide';
7 | export * from './CardContent';
8 | export * from './CardHeaderPrimary';
9 | export * from './CardHeaderSecondary';
10 | export * from './CardMedia';
11 |
--------------------------------------------------------------------------------
/packages/reactackle-breadcrumbs/src/BreadcrumbsItem/styles/index.js:
--------------------------------------------------------------------------------
1 | export * from './BreadcrumbsItemStyled';
2 | export * from './AnchorStyled';
3 | export * from './TextBoxStyled';
4 | export * from './TitleStyled';
5 | export * from './SubtitleStyled';
6 | export * from './IconBoxStyled';
7 | export * from './IconHomeStyled';
8 | export * from './SeparatorStyled';
9 |
--------------------------------------------------------------------------------
/demo/components/Route/RouteDemo/styles/RouteDemoStyled.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import styled from 'styled-components';
4 | import { baseModule } from '../../../../theme/styleHelpers';
5 |
6 | export const RouteDemoStyled = styled.div`
7 | padding: ${baseModule(4)}px 0;
8 | width: 100%;
9 | `;
10 |
11 | RouteDemoStyled.displayName = 'RouteDemoStyled';
12 |
--------------------------------------------------------------------------------
/demo/routes/icon-custom/snippets/5.snippet:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | import { iconCustomSizeMixin, IconCustom } from 'reactackle-icons';
3 |
4 | const TestWrapper = styled.div`
5 | ${iconCustomSizeMixin('70px', '42px', '50px')}
6 | `;
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/demo/routes/text-field/snippets/4.snippet:
--------------------------------------------------------------------------------
1 | import { IconDefault } from 'reactackle-icons';
2 |
3 |
8 |
9 |
14 |
--------------------------------------------------------------------------------
/packages/reactackle-icons/src/index.js:
--------------------------------------------------------------------------------
1 | import { registerDefaultComponentTheme } from 'reactackle-core';
2 | import componentTheme from './styles/theme';
3 |
4 | registerDefaultComponentTheme('icon', componentTheme);
5 |
6 | export * from './IconCustom';
7 | export * from './IconSvg';
8 | export * from './iconStyleMixin';
9 | export * from './iconsPropType';
10 |
--------------------------------------------------------------------------------
/demo/routes/accordion/snippets/6.snippet:
--------------------------------------------------------------------------------
1 | Place here some data],
8 | },
9 | {
10 | id: '2',
11 | title: 'Accordion Item 2',
12 | content: [Place here some data
],
13 | }
14 | ]}
15 | />
16 |
--------------------------------------------------------------------------------
/demo/routes/progress/progress.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import { RouteStructure } from '../../components/Route/RouteStructure';
5 |
6 | export const ProgressRoute = props => (
7 |
8 | {props.children}
9 |
10 | );
11 |
12 | ProgressRoute.displayName = 'ProgressRoute';
13 |
--------------------------------------------------------------------------------
/packages/reactackle-dialog/src/styles/RegionMainStyled.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import styled from 'styled-components';
4 |
5 | export const RegionMainStyled = styled.div`
6 | flex-grow: 1;
7 | position: relative;
8 | display: flex;
9 | flex-direction: column;
10 | overflow-y: auto;
11 | `;
12 |
13 | RegionMainStyled.displayName = 'RegionMainStyled';
14 |
--------------------------------------------------------------------------------
/packages/reactackle-icons/src/IconSvg/icons/IconArrowDropDown.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { IconSvg } from '../IconSvg';
3 |
4 | const IconArrowDropDown = props => (
5 |
6 |
9 |
10 | );
11 |
12 | export default IconArrowDropDown;
13 |
--------------------------------------------------------------------------------
/packages/reactackle-progress/src/LinearProgress/styles/LinearProgressStyled.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const LinearProgressStyled = styled.div`
4 | justify-content: flex-start;
5 | align-items: stretch;
6 | display: flex;
7 | flex-direction: column;
8 | `;
9 |
10 | LinearProgressStyled.displayName = 'LinearProgressStyled';
11 |
--------------------------------------------------------------------------------
/packages/reactackle-progress/src/index.js:
--------------------------------------------------------------------------------
1 | import { registerDefaultComponentTheme } from 'reactackle-core';
2 | import componentTheme from './styles/theme';
3 |
4 | registerDefaultComponentTheme('progress', componentTheme);
5 |
6 | export * from './CircleProgress/CircleProgress';
7 | export * from './LinearProgress/LinearProgress';
8 | export * from './Preloader/Preloader';
9 |
--------------------------------------------------------------------------------
/demo/components/PropsTable/PropsTableItem/styles/PropsTypeStyled.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import styled from 'styled-components';
4 | import {
5 | fontWeightNormal,
6 | } from '../../../../theme/styleHelpers';
7 |
8 | export const PropsTypeStyled = styled.span`
9 | font-weight: ${fontWeightNormal};
10 | `;
11 |
12 | PropsTypeStyled.displayName = 'PropsTypeStyled';
13 |
--------------------------------------------------------------------------------
/demo/components/Route/RouteMemo/MemoItem/styles/MemoAnchorStyled.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import styled from 'styled-components';
4 |
5 | export const MemoAnchorStyled = styled.a`
6 | margin-left: auto;
7 | color: inherit;
8 | opacity: 0.65;
9 |
10 | &:hover {
11 | opacity: 1;
12 | }
13 | `;
14 |
15 | MemoAnchorStyled.displayName = 'MemoAnchorStyled';
16 |
--------------------------------------------------------------------------------
/demo/routes/accordion/snippets/3.snippet:
--------------------------------------------------------------------------------
1 | Place here some data],
7 | },
8 | {
9 | id: '2',
10 | title: 'Accordion Item 2',
11 | content: [Place here some data
],
12 | }
13 | ]}
14 | single={true}
15 | />
16 |
--------------------------------------------------------------------------------
/demo/routes/text-field/snippets/2.snippet:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/packages/reactackle-card/src/externalPropTypes.js:
--------------------------------------------------------------------------------
1 | import PropTypes from 'prop-types';
2 |
3 | export const externalPropTypes = {
4 | externalProps: PropTypes.shape({
5 | size: PropTypes.oneOf(['default', 'medium', 'large', 'xlarge']),
6 | }),
7 | };
8 |
9 | export const externalDefaultProps = {
10 | externalProps: {
11 | size: 'default',
12 | },
13 | };
14 |
--------------------------------------------------------------------------------
/packages/reactackle-menu/src/MenuGroup/styles/MenuGroupStyled.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | const inline = ({ inline }) => inline && `
4 | display: flex;
5 | align-items: stretch;
6 | `;
7 |
8 | export const MenuGroupStyled = styled.div`
9 | display: block;
10 | ${inline}
11 | `;
12 |
13 | MenuGroupStyled.displayName = 'MenuGroupStyled';
14 |
--------------------------------------------------------------------------------
/packages/reactackle-menu/src/index.js:
--------------------------------------------------------------------------------
1 | import { registerDefaultComponentTheme } from 'reactackle-core';
2 | import componentTheme from './styles/theme';
3 | import Menu from './Menu';
4 |
5 | registerDefaultComponentTheme('menu', componentTheme);
6 |
7 | export { Menu };
8 | export * from './MenuItem';
9 | export * from './MenuList';
10 | export * from './MenuGroup';
11 |
--------------------------------------------------------------------------------
/demo/components/Article/ArticleTextBox/ArticleTextBox.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | import {
4 | ArticleTextBoxStyled,
5 | } from './styles/ArticleTextBoxStyled';
6 |
7 | export const ArticleTextBox = props => (
8 |
9 | {props.children}
10 |
11 | );
12 |
13 | ArticleTextBox.displayName = 'ArticleTextBox';
14 |
--------------------------------------------------------------------------------
/demo/components/Menu/MenuGroupItem/styles/MenuGroupItemWrapperStyled.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import styled from 'styled-components';
4 |
5 | export const MenuGroupItemWrapperStyled = styled.li`
6 | width: 100%;
7 | margin: 0;
8 | user-select: none;
9 | cursor: pointer;
10 | `;
11 |
12 | MenuGroupItemWrapperStyled.displayName = 'MenuGroupItemWrapperStyled';
13 |
14 |
--------------------------------------------------------------------------------
/demo/routes/breadcrumbs/snippets/4.snippet:
--------------------------------------------------------------------------------
1 |
19 |
--------------------------------------------------------------------------------
/jestSetup.js:
--------------------------------------------------------------------------------
1 | /* eslint-env jest */
2 | import { configure } from 'enzyme';
3 | import Adapter from 'enzyme-adapter-react-16';
4 |
5 | configure({ adapter: new Adapter() });
6 | const throwError = jest.fn(
7 | mes => {
8 | throw new Error(mes);
9 | },
10 | );
11 |
12 | /* eslint-disable no-console */
13 | console.error = throwError;
14 | console.warn = throwError;
15 |
--------------------------------------------------------------------------------
/packages/reactackle-selectbox/src/SelectBoxCustom/styles/SelectBoxCustomStyled.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import styled from 'styled-components';
4 |
5 | export const SelectBoxCustomStyled = styled.div`
6 | display: flex;
7 | position: relative;
8 | flex-direction: column;
9 | width: 100%;
10 | `;
11 |
12 | SelectBoxCustomStyled.displayName = 'SelectBoxCustomStyled';
13 |
--------------------------------------------------------------------------------
/packages/reactackle-selectbox/src/SelectBoxNative/styles/SelectBoxNativeStyled.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import styled from 'styled-components';
4 |
5 | export const SelectBoxNativeStyled = styled.div`
6 | display: flex;
7 | position: relative;
8 | flex-direction: column;
9 | width: 100%;
10 | `;
11 |
12 | SelectBoxNativeStyled.displayName = 'SelectBoxNativeStyled';
13 |
--------------------------------------------------------------------------------
/demo/components/PropsTable/PropsTableItem/styles/PropsDefaultStyled.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import styled from 'styled-components';
4 |
5 | import {
6 | fontColorMedium,
7 | } from '../../../../theme/styleHelpers';
8 |
9 | export const PropsDefaultStyled = styled.div`
10 | color: ${fontColorMedium};
11 | `;
12 |
13 | PropsDefaultStyled.displayName = 'PropsDefaultStyled';
14 |
--------------------------------------------------------------------------------
/demo/components/PropsTable/PropsTableItem/styles/PropsDescriptionStyled.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import styled from 'styled-components';
4 | import { baseModule } from '../../../../theme/styleHelpers';
5 |
6 | export const PropsDescriptionStyled = styled.span`
7 | margin-top: ${baseModule(1)}px;
8 | `;
9 |
10 | PropsDescriptionStyled.displayName = 'PropsDescriptionStyled';
11 |
--------------------------------------------------------------------------------
/demo/routes/accordion/snippets/2.snippet:
--------------------------------------------------------------------------------
1 | Place here some data],
7 | },
8 | {
9 | id: '2',
10 | title: 'Accordion Item 2',
11 | content: [Place here some data
],
12 | }
13 | ]}
14 | expandedItemIds={['2']}
15 | />
16 |
--------------------------------------------------------------------------------
/packages/reactackle-icons/src/IconSvg/icons/IconCheck.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { IconSvg } from '../IconSvg';
3 |
4 | const IconCheck = props => (
5 |
6 |
9 |
10 | );
11 |
12 | export default IconCheck;
13 |
--------------------------------------------------------------------------------
/demo/components/Article/ArticleTextBox/styles/ArticleTextBoxStyled.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | import {
4 | fontSizeBody,
5 | } from '../../../../theme/styleHelpers';
6 |
7 | export const ArticleTextBoxStyled = styled.div`
8 | font-size: ${fontSizeBody}px;
9 | max-width: 36em;
10 | `;
11 |
12 | ArticleTextBoxStyled.displayName = 'ArticleTextBoxStyled';
13 |
--------------------------------------------------------------------------------
/packages/reactackle-header/src/styles/HeaderContentWrapperStyled.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import styled from 'styled-components';
4 |
5 | /** STYLES */
6 | export const HeaderContentWrapperStyled = styled.div`
7 | flex-grow: 1;
8 | z-index: 1;
9 | display: flex;
10 | flex-direction: row;
11 | `;
12 |
13 | HeaderContentWrapperStyled.displayName = 'HeaderContentWrapperStyled';
14 |
--------------------------------------------------------------------------------
/demo/components/DemoSnippet/TestBox/styles/TestBoxTitleStyled.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import styled from 'styled-components';
4 | import { baseModule } from '../../../../theme/styleHelpers';
5 |
6 | export const TestBoxTitleStyled = styled.div`
7 | padding: ${baseModule(3)}px ${baseModule(2)}px ${baseModule(1)}px 0;
8 | `;
9 |
10 | TestBoxTitleStyled.displayName = 'TestBoxTitleStyled';
11 |
--------------------------------------------------------------------------------
/packages/reactackle-core/src/helperClasses.js:
--------------------------------------------------------------------------------
1 | import { injectGlobal } from 'styled-components';
2 |
3 | export const injectHelperClasses = () => {
4 | // eslint-disable-next-line no-unused-expressions
5 | injectGlobal`
6 | .rctckl__app-container {
7 | min-height: 100vh;
8 | width: 100vw;
9 | min-width: 0;
10 | height: 100%;
11 | }
12 | `;
13 | };
14 |
--------------------------------------------------------------------------------
/packages/reactackle-tabs/src/styles/TabsContentWrapperStyled.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import styled from 'styled-components';
4 |
5 | export const TabsContentWrapperStyled = styled.div`
6 | display: flex;
7 | align-items: stretch;
8 | position: relative;
9 | flex-grow: 1;
10 | overflow: hidden;
11 | `;
12 |
13 | TabsContentWrapperStyled.displayName = 'TabsContentWrapperStyled';
14 |
--------------------------------------------------------------------------------
/packages/reactackle-tabs/src/styles/TabsListStyled.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import styled from 'styled-components';
4 | import { transition } from 'reactackle-core';
5 |
6 | export const TabsListStyled = styled.div`
7 | display: flex;
8 | flex-grow: 1;
9 | justify-content: center;
10 | ${transition('transform')};
11 | `;
12 |
13 | TabsListStyled.displayName = 'TabsListStyled';
14 |
--------------------------------------------------------------------------------
/demo/routes/accordion/snippets/5.snippet:
--------------------------------------------------------------------------------
1 | Place here some data],
7 | },
8 | {
9 | id: '2',
10 | title: 'Accordion Item 2',
11 | content: [Place here some data
],
12 | }
13 | ]}
14 | stateless
15 | expandedItemIds={['2']}
16 | />
17 |
--------------------------------------------------------------------------------
/demo/routes/theme/snippets/theme-use.snippet:
--------------------------------------------------------------------------------
1 | import { Theme } from 'reactackle';
2 | import reactackleThemeMixin from './theme/reactackleThemeMixin';
3 |
4 | document.addEventListener('DOMContentLoaded', () => {
5 | ReactDOM.render(
6 |
7 | ...your app content
8 | ,
9 |
10 | document.getElementById('container'),
11 | );
12 | });
13 |
--------------------------------------------------------------------------------
/demo/components/PropsTable/styles/PropsTableStyled.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import styled from 'styled-components';
4 |
5 | import { baseModule } from '../../../theme/styleHelpers';
6 |
7 | export const PropsTableStyled = styled.table`
8 | border-collapse: collapse;
9 | width: 100%;
10 | margin-bottom: ${baseModule(4)}px;
11 | `;
12 |
13 | PropsTableStyled.displayName = 'PropsTableStyled';
14 |
--------------------------------------------------------------------------------
/packages/reactackle-card/src/CardAreaMain/CardAreaMain.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import { CardAreaMainStyled } from './styles/CardAreaMainStyled';
5 |
6 | export default function CardAreaMain(props) {
7 | return (
8 |
9 | {props.children}
10 |
11 | );
12 | }
13 |
14 | CardAreaMain.displayName = 'CardAreaMain';
15 |
--------------------------------------------------------------------------------
/packages/reactackle-card/src/CardAreaSide/CardAreaSide.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import { CardAreaSideStyled } from './styles/CardAreaSideStyled';
5 |
6 | export default function CardAreaSide(props) {
7 | return (
8 |
9 | {props.children}
10 |
11 | );
12 | }
13 |
14 | CardAreaSide.displayName = 'CardAreaSide';
15 |
--------------------------------------------------------------------------------
/packages/reactackle-toggle-button/src/styles/constants.js:
--------------------------------------------------------------------------------
1 | import Color from 'color';
2 | import { colorSecondary } from 'reactackle-core';
3 |
4 | const toggleConstants = {
5 | toggleThumb: {
6 | backgroundColorChecked: colorSecondary,
7 | },
8 | };
9 |
10 | export const toggleBarBackgroundColorChecked = base =>
11 | Color(toggleConstants.toggleThumb.backgroundColorChecked(base)).lighten(0.54);
12 |
--------------------------------------------------------------------------------
/packages/reactackle-dialog/src/DialogActions/DialogActions.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import { DialogActionsStyled } from './styles/DialogActionsStyled';
5 |
6 | export default function DialogActions(props) {
7 | return (
8 |
9 | {props.children}
10 |
11 | );
12 | }
13 |
14 | DialogActions.displayName = 'DialogActions';
15 |
--------------------------------------------------------------------------------
/packages/reactackle-icons/src/IconSvg/icons/IconArrowBack.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { IconSvg } from '../IconSvg';
3 |
4 | const IconArrowBack = props => (
5 |
6 |
9 |
10 | );
11 |
12 | export default IconArrowBack;
13 |
--------------------------------------------------------------------------------
/packages/reactackle-icons/src/IconSvg/icons/IconArrowChevronLeft.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { IconSvg } from '../IconSvg';
3 |
4 | const IconArrowChevronLeft = props => (
5 |
6 |
9 |
10 | );
11 |
12 | export default IconArrowChevronLeft;
13 |
--------------------------------------------------------------------------------
/packages/reactackle-icons/src/IconSvg/icons/IconArrowChevronRight.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { IconSvg } from '../IconSvg';
3 |
4 | const IconArrowChevronRight = props => (
5 |
6 |
9 |
10 | );
11 |
12 | export default IconArrowChevronRight;
13 |
--------------------------------------------------------------------------------
/demo/routes/tag/snippets/1.snippet:
--------------------------------------------------------------------------------
1 |
2 |
3 | }
6 | />
7 |
8 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/demo/routes/text-field/snippets/7.snippet:
--------------------------------------------------------------------------------
1 |
6 |
12 |
17 |
--------------------------------------------------------------------------------
/packages/reactackle-form/src/FormItem/FormItemLabel/FormItemLabel.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import { FormItemLabelStyled } from './styles/FormItemLabelStyled';
5 |
6 | export default function FormItemLabel(props) {
7 | return (
8 |
9 | {props.children}
10 |
11 | );
12 | }
13 |
14 | FormItemLabel.displayName = 'FormItemLabel';
15 |
--------------------------------------------------------------------------------
/packages/reactackle-menu/src/MenuItem/styles/MenuItemStyled.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 |
3 | export const MenuItemStyled = styled.li`
4 | display: flex;
5 | flex-direction: column;
6 | padding: 0;
7 | align-items: stretch;
8 | position: relative;
9 | user-select: none;
10 |
11 | &:focus {
12 | outline: none
13 | }
14 | `;
15 |
16 | MenuItemStyled.displayName = 'MenuItemStyled';
17 |
--------------------------------------------------------------------------------
/demo/components/Article/Article.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { ArticleStyled } from './styles/ArticleStyled';
3 |
4 | const propTypes = {};
5 | const defaultProps = {};
6 |
7 | export const Article = props => (
8 |
9 | {props.children}
10 |
11 | );
12 |
13 | Article.propTypes = propTypes;
14 | Article.defaultProps = defaultProps;
15 | Article.displayName = 'Article';
16 |
--------------------------------------------------------------------------------
/packages/reactackle-card/src/CardAreaMain/styles/CardAreaMainStyled.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import styled from 'styled-components';
4 |
5 | const propTypes = {};
6 | const defaultProps = {};
7 |
8 | export const CardAreaMainStyled = styled.div`flex-grow: 1;`;
9 |
10 | CardAreaMainStyled.propTypes = propTypes;
11 | CardAreaMainStyled.defaultProps = defaultProps;
12 | CardAreaMainStyled.displayName = 'CardAreaMainStyled';
13 |
--------------------------------------------------------------------------------
/packages/reactackle-icons/src/IconSvg/icons/IconArrowForward.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { IconSvg } from '../IconSvg';
3 |
4 | const IconArrowForward = props => (
5 |
6 |
9 |
10 | );
11 |
12 | export default IconArrowForward;
13 |
--------------------------------------------------------------------------------
/packages/reactackle-card/src/CardHeaderSecondary/styles/CardHeaderSecondaryTextBoxStyled.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import styled from 'styled-components';
4 |
5 | /** Styles */
6 | export const CardHeaderSecondaryTextBoxStyled = styled.div`
7 | display: flex;
8 | flex-direction: column;
9 | justify-content: center;
10 | `;
11 |
12 | CardHeaderSecondaryTextBoxStyled.displayName =
13 | 'CardHeaderSecondaryTextBoxStyled';
14 |
--------------------------------------------------------------------------------
/packages/reactackle-checkbox/src/styles/CheckboxInputStyled.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | import { elementInvisible } from 'reactackle-core';
3 |
4 | export const CheckboxInputStyled = styled.input`
5 | ${/* Prettier workaround until issue is not fixed:
6 | https://github.com/prettier/prettier/issues/2291 */ ''};
7 | ${elementInvisible};
8 | `;
9 |
10 | CheckboxInputStyled.displayName = 'CheckboxInputStyled';
11 |
--------------------------------------------------------------------------------
/packages/reactackle-icons/src/IconSvg/icons/IconCross.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { IconSvg } from '../IconSvg';
3 |
4 | const IconCross = props => (
5 |
6 |
9 |
10 | );
11 |
12 | export default IconCross;
13 |
--------------------------------------------------------------------------------
/demo/routes/select-box/snippets/2.snippet:
--------------------------------------------------------------------------------
1 |
8 |
9 |
17 |
--------------------------------------------------------------------------------
/demo/components/PropsTable/PropsTableItem/styles/PropsTitleStyled.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import styled from 'styled-components';
4 | import {
5 | fontWeightSemibold,
6 | colorMain,
7 | } from '../../../../theme/styleHelpers';
8 |
9 | export const PropsTitleStyled = styled.div`
10 | display: block;
11 | font-weight: ${fontWeightSemibold};
12 | color: ${colorMain};
13 | `;
14 |
15 | PropsTitleStyled.displayName = 'PropsTitleStyled';
16 |
--------------------------------------------------------------------------------
/demo/components/PropsTable/PropsTableItem/styles/RequiredStyled.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import styled from 'styled-components';
4 |
5 | import {
6 | fontSizeSmall,
7 | fontColorMedium,
8 | } from '../../../../theme/styleHelpers';
9 |
10 | /** STYLES */
11 | export const RequiredStyled = styled.span`
12 | font-size: ${fontSizeSmall}px;
13 | color: ${fontColorMedium};
14 | `;
15 |
16 | RequiredStyled.displayName = 'RequiredStyled';
17 |
--------------------------------------------------------------------------------
/packages/reactackle-grid/src/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import { registerDefaultComponentTheme } from 'reactackle-core';
4 | import componentTheme from './styles/theme';
5 |
6 | registerDefaultComponentTheme('grid', componentTheme);
7 |
8 | export * from './Container/Container';
9 | export * from './Column/Column';
10 | export * from './FlexRegion/FlexRegion';
11 | export * from './PaddingBox/PaddingBox';
12 | export * from './Row/Row';
13 |
--------------------------------------------------------------------------------
/packages/reactackle-icons/README.md:
--------------------------------------------------------------------------------
1 | # Reactackle-icons
2 |
3 | **Part of [Reactackle](https://www.npmjs.com/package/reactackle) - an open-source components library built with [React](https://facebook.github.io/react/) and [Styled Components](https://www.styled-components.com).**
4 |
5 | ## Installation
6 |
7 | **Using NPM:**
8 | ```
9 | npm install reactackle-icons
10 | ```
11 |
12 | **Using Yarn:**
13 | ```
14 | yarn add reactackle-icons
15 | ```
--------------------------------------------------------------------------------
/demo/components/DemoSnippet/DemoPreview/DemoPreview.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import { Container } from 'reactackle';
5 | import { DemoPreviewStyled } from './styles/DemoPreviewStyled';
6 |
7 | export const DemoPreview = props => (
8 |
9 |
10 | {props.children}
11 |
12 |
13 | );
14 |
15 | DemoPreview.displayName = 'DemoPreview';
16 |
--------------------------------------------------------------------------------
/packages/reactackle-app/__tests__/__snapshots__/content.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[` renders correctly if contains children 1`] = `
4 |
11 | `;
12 |
13 | exports[` renders correctly with default props 1`] = `
14 |
17 | `;
18 |
--------------------------------------------------------------------------------
/packages/reactackle-card/src/CardHeaderPrimary/styles/CardHeaderBoxStyled.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import styled from 'styled-components';
4 |
5 | const propTypes = {};
6 | const defaultProps = {};
7 |
8 | /** Styles */
9 | export const CardHeaderBoxStyled = styled.div`flex-grow: 1;`;
10 |
11 | CardHeaderBoxStyled.propTypes = propTypes;
12 | CardHeaderBoxStyled.defaultProps = defaultProps;
13 | CardHeaderBoxStyled.displayName = 'CardHeaderBoxStyled';
14 |
--------------------------------------------------------------------------------
/packages/reactackle-core/README.md:
--------------------------------------------------------------------------------
1 | # Reactackle-core
2 |
3 | **Part of [Reactackle](https://www.npmjs.com/package/reactackle) - an open-source components library built with [React](https://facebook.github.io/react/) and [Styled Components](https://www.styled-components.com).**
4 |
5 | ## Installation
6 |
7 | **Using NPM:**
8 | ```
9 | npm install reactackle-core --save
10 | ```
11 |
12 | **Using Yarn:**
13 | ```
14 | yarn add reactackle-core
15 | ```
16 |
--------------------------------------------------------------------------------
/packages/reactackle-core/src/utils/polyfills.js:
--------------------------------------------------------------------------------
1 | // touchevents
2 | let isTouchDeviceCachedValue = null;
3 | export const isTouch = function() {
4 | if (isTouchDeviceCachedValue !== null) return isTouchDeviceCachedValue;
5 |
6 | isTouchDeviceCachedValue =
7 | navigator.maxTouchPoints > 0 ||
8 | navigator.msMaxTouchPoints > 0 ||
9 | typeof document.body.ongesturestart === 'function';
10 |
11 | return isTouchDeviceCachedValue;
12 | };
13 |
--------------------------------------------------------------------------------
/demo/routes/grid-column/snippets/6.snippet:
--------------------------------------------------------------------------------
1 |
2 |
7 | layoutDirection
8 | horizontal
9 |
10 |
15 | layoutDirection
16 | vertical
17 |
18 |
19 |
--------------------------------------------------------------------------------
/packages/reactackle-breadcrumbs/src/BreadcrumbsItem/styles/IconHome.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { IconSvg } from 'reactackle-icons';
3 |
4 | /* eslint-disable max-len */
5 | export const IconHome = props => (
6 |
7 |
10 |
11 | );
12 | /* eslint-enable max-len */
13 |
14 | IconHome.displayName = 'IconHome';
15 |
--------------------------------------------------------------------------------
/packages/reactackle-dialog/src/DialogContent/DialogContentText/DialogContentText.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import { DialogContentTextStyled } from './styles/DialogContentTextStyled';
5 |
6 | export default function DialogContentText(props) {
7 | return (
8 |
9 | {props.children}
10 |
11 | );
12 | }
13 |
14 | DialogContentText.displayName = 'DialogContentText';
15 |
--------------------------------------------------------------------------------
/demo/routes/button/snippets/0.snippet:
--------------------------------------------------------------------------------
1 |
7 |
8 |
13 |
14 |
19 |
20 |
25 |
--------------------------------------------------------------------------------
/packages/reactackle-card/src/CardAreaSide/styles/CardAreaSideStyled.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import styled from 'styled-components';
4 |
5 | const propTypes = {};
6 | const defaultProps = {};
7 |
8 | export const CardAreaSideStyled = styled.div`
9 | display: flex;
10 | align-items: stretch;
11 | `;
12 |
13 | CardAreaSideStyled.propTypes = propTypes;
14 | CardAreaSideStyled.defaultProps = defaultProps;
15 | CardAreaSideStyled.displayName = 'CardAreaSideStyled';
16 |
--------------------------------------------------------------------------------
/demo/components/DemoSnippet/styles/SnippetWrapperStyled.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import styled from 'styled-components';
4 | import { demoSnippetConstants } from './constants';
5 | import { baseModule } from '../../../theme/styleHelpers';
6 |
7 | export const SnippetWrapperStyled = styled.div`
8 | background-color: ${demoSnippetConstants.backgroundColor};
9 | padding: 0 ${baseModule(1)}px;
10 | `;
11 |
12 | SnippetWrapperStyled.displayName = 'SnippetWrapperStyled';
13 |
--------------------------------------------------------------------------------
/packages/reactackle-grid/__tests__/container.test.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import renderer from 'react-test-renderer';
5 | import { Container } from '../src';
6 |
7 | jest.mock('react-dom');
8 |
9 | describe('', () => {
10 | it('renders correctly with default props', () => {
11 | const tree = renderer.create(
12 | ,
13 | ).toJSON();
14 |
15 | expect(tree).toMatchSnapshot();
16 | });
17 | });
18 |
--------------------------------------------------------------------------------
/demo/routes/accordion/snippets/4.snippet:
--------------------------------------------------------------------------------
1 | Place here some data],
7 | headerSlot: [Some header component]
8 | },
9 | {
10 | id: '2',
11 | title: 'Accordion Item 2',
12 | content: [Place here some data
],
13 | headerSlot: [Some header component]
14 | }
15 | ]}
16 | single={true}
17 | />
18 |
--------------------------------------------------------------------------------
/demo/routes/grid-column/snippets/7.snippet:
--------------------------------------------------------------------------------
1 |
2 |
7 | layoutDirection
8 | horizontal
9 |
10 |
15 | layoutDirection
16 | vertical
17 |
18 |
19 |
--------------------------------------------------------------------------------
/packages/reactackle-app/__tests__/main-region.test.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import renderer from 'react-test-renderer';
5 | import { MainRegion } from '../src';
6 |
7 | jest.mock('react-dom');
8 |
9 | describe('', () => {
10 | it('renders correctly with default props', () => {
11 | const tree = renderer.create(
12 | ,
13 | ).toJSON();
14 |
15 | expect(tree).toMatchSnapshot();
16 | });
17 | });
18 |
--------------------------------------------------------------------------------
/packages/reactackle-grid/__tests__/flex-region.test.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import renderer from 'react-test-renderer';
5 | import { FlexRegion } from '../src';
6 |
7 | jest.mock('react-dom');
8 |
9 | describe('', () => {
10 | it('renders correctly with default props', () => {
11 | const tree = renderer.create(
12 | ,
13 | ).toJSON();
14 |
15 | expect(tree).toMatchSnapshot();
16 | });
17 | });
18 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | sudo: false
2 | language: node_js
3 | node_js:
4 | - "8"
5 | before_install:
6 | - npm i -g npm
7 | script:
8 | - npm i
9 | - npm run bootstrap
10 | - npm run lint
11 | - npm run test-ci
12 | - npm run build
13 | cache:
14 | directories:
15 | - node_modules/
16 | deploy:
17 | provider: pages
18 | skip_cleanup: true
19 | local_dir: dist
20 | github_token: $GITHUB_TOKEN
21 | fqdn: reactackle-docs.braincrumbs.io
22 | on:
23 | branch: master
24 |
--------------------------------------------------------------------------------
/demo/routes/header/snippets/0.snippet:
--------------------------------------------------------------------------------
1 |
9 |
10 |
11 |
12 | Auto-hide header with visible part
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/demo/routes/menu/snippets/2.snippet:
--------------------------------------------------------------------------------
1 |
19 |
--------------------------------------------------------------------------------
/packages/reactackle-grid/__tests__/padding-box.test.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import renderer from 'react-test-renderer';
5 | import {
6 | PaddingBox,
7 | } from '../src';
8 |
9 | jest.mock('react-dom');
10 |
11 | describe('', () => {
12 | it('renders correctly with default props', () => {
13 | const tree = renderer.create(
14 | ,
15 | ).toJSON();
16 |
17 | expect(tree).toMatchSnapshot();
18 | });
19 | });
20 |
--------------------------------------------------------------------------------
/packages/reactackle-menu/src/styles/MenuStyled.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | import React from 'react';
3 |
4 | const Menu = styled.nav`
5 | padding: 0;
6 | margin: 0;
7 | `;
8 |
9 | const MenuDiv = Menu.withComponent('div');
10 |
11 | // eslint-disable-next-line react/prop-types
12 | export const MenuStyled = ({ wrapWithDiv, ...props }) => wrapWithDiv
13 | ?
14 | : ;
15 |
16 | MenuStyled.displayName = 'MenuStyled';
17 |
--------------------------------------------------------------------------------
/packages/reactackle-tooltip-icon/__tests__/__snapshots__/tooltip-icon.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[` renders correctly with default props 1`] = `
4 |
13 |
14 | ?
15 |
16 |
17 | `;
18 |
--------------------------------------------------------------------------------
/demo/routes/breadcrumbs/snippets/2.snippet:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/demo/routes/text-field/snippets/8.snippet:
--------------------------------------------------------------------------------
1 |
7 |
14 |
21 |
--------------------------------------------------------------------------------
/demo/components/Article/ArticleLead/ArticleLead.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import { ArticleLeadStyled } from './styles/ArticleLeadStyled';
5 |
6 | const propTypes = {};
7 | const defaultProps = {};
8 |
9 | export const ArticleLead = props => (
10 |
11 | {props.children}
12 |
13 | );
14 |
15 | ArticleLead.propTypes = propTypes;
16 | ArticleLead.defaultProps = defaultProps;
17 | ArticleLead.displayName = 'ArticleLead';
18 |
--------------------------------------------------------------------------------
/packages/reactackle-tooltip/src/styles/TooltipContentStyled.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import styled from 'styled-components';
4 |
5 | const propTypes = {};
6 | const defaultProps = {};
7 |
8 | export const TooltipContentStyled = styled.div`
9 | color: inherit;
10 | font-size: inherit;
11 | line-height: inherit;
12 | `;
13 |
14 | TooltipContentStyled.propTypes = propTypes;
15 | TooltipContentStyled.defaultProps = defaultProps;
16 | TooltipContentStyled.displayName = 'TooltipContentStyled';
17 |
--------------------------------------------------------------------------------
/demo/components/Route/RouteMemo/MemoItem/styles/MemoItemStyled.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | import { routeMemoConstants } from '../../styles/constants';
3 | import {
4 | baseModule,
5 | } from '../../../../../theme/styleHelpers';
6 |
7 | /** STYLES */
8 | export const MemoItemStyled = styled.span`
9 | display: flex;
10 | align-items: flex-start;
11 | padding: ${baseModule(1)}px ${routeMemoConstants.paddingX}px;
12 | `;
13 |
14 | MemoItemStyled.displayName = 'MemoItemStyled';
15 |
--------------------------------------------------------------------------------
/packages/reactackle-tooltip-icon/__tests__/tooltip-icon.test.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import renderer from 'react-test-renderer';
5 | import { TooltipIcon } from '../src';
6 |
7 | jest.mock('react-dom');
8 |
9 | describe('', () => {
10 | it('renders correctly with default props', () => {
11 | const tree = renderer.create(
12 | ,
13 | ).toJSON();
14 |
15 | expect(tree).toMatchSnapshot();
16 | });
17 | });
18 |
--------------------------------------------------------------------------------
/demo/components/Menu/Menu.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import { MenuStyled } from './styles/MenuStyled';
5 |
6 | const propTypes = {};
7 | const defaultProps = {};
8 |
9 | export const Menu = props => (
10 |
11 | {props.children}
12 |
13 | );
14 |
15 | Menu.propTypes = propTypes;
16 | Menu.defaultProps = defaultProps;
17 | Menu.displayName = 'Menu';
18 |
19 | export * from './MenuGroup/MenuGroup';
20 | export * from './MenuGroupItem/MenuGroupItem';
21 |
--------------------------------------------------------------------------------
/packages/reactackle-header/src/styles/HeaderBackgroundContainerStyled.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import styled from 'styled-components';
4 |
5 | export const HeaderBackgroundContainerStyled = styled.div`
6 | position: absolute;
7 | width: 100%;
8 | height: 100%;
9 | top: 0;
10 | left: 0;
11 | z-index: 0;
12 | background-size: cover;
13 | background-position: center;
14 | background-repeat: no-repeat;
15 | `;
16 |
17 | HeaderBackgroundContainerStyled.displayName = 'HeaderBackgroundContainerStyled';
18 |
--------------------------------------------------------------------------------
/demo/components/Menu/MenuGroup/styles/MenuGroupStyled.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import styled from 'styled-components';
4 | import { baseModule } from '../../../../theme/styleHelpers';
5 |
6 | const hasTitle = ({ hasTitle }) => hasTitle
7 | ? 'padding-top: 0;'
8 | : '';
9 |
10 | export const MenuGroupStyled = styled.menu`
11 | width: 100%;
12 | margin: 0;
13 | list-style-type: none;
14 | padding: ${baseModule(1)}px 0;
15 | ${hasTitle}
16 | `;
17 |
18 | MenuGroupStyled.displayName = 'MenuGroupStyled';
19 |
20 |
--------------------------------------------------------------------------------
/demo/routes/alert-area/snippets/3.snippet:
--------------------------------------------------------------------------------
1 | const alerts = [
2 | {
3 | buttons: [
4 | {
5 | text: 'close',
6 | colorScheme: 'flatLight',
7 | action: () => {},
8 | closeAlert: true,
9 | },
10 | {
11 | text: 'subscribe',
12 | colorScheme: 'primary',
13 | action: () => {},
14 | closeAlert: true,
15 | },
16 | ],
17 | content: 'AlertArea content',
18 | vertical: true
19 | }
20 | ];
21 |
22 |
23 |
--------------------------------------------------------------------------------
/demo/routes/progress/circle-progress/snippets/3.snippet:
--------------------------------------------------------------------------------
1 |
6 |
12 |
18 |
24 |
--------------------------------------------------------------------------------
/demo/routes/progress/linear-progress/snippets/3.snippet:
--------------------------------------------------------------------------------
1 |
6 |
12 |
18 |
24 |
--------------------------------------------------------------------------------
/demo/routes/button/snippets/2.snippet:
--------------------------------------------------------------------------------
1 | import { IconSvg } from 'reactackle-icons';
2 |
3 | }
5 | colorScheme="success"
6 | />
7 |
8 | }
10 | radius="rounded"
11 | colorScheme="success"
12 | />
13 |
14 | const ArrowForward = props => (
15 |
16 |
19 |
20 | );
21 |
--------------------------------------------------------------------------------
/demo/utils/misc.js:
--------------------------------------------------------------------------------
1 | const iDevicesCheck = () => {
2 | const iDevices = [
3 | 'iPad Simulator',
4 | 'iPhone Simulator',
5 | 'iPod Simulator',
6 | 'iPad',
7 | 'iPhone',
8 | 'iPod',
9 | ];
10 |
11 | while (iDevices.length) {
12 | if (navigator.platform === iDevices.pop())
13 | return true;
14 | }
15 |
16 | return false;
17 | };
18 |
19 | let iOS = null;
20 |
21 | export const isiOS = () => {
22 | if (iOS === null)
23 | iOS = iDevicesCheck();
24 |
25 | return iOS;
26 | };
27 |
--------------------------------------------------------------------------------
/packages/reactackle-app/README.md:
--------------------------------------------------------------------------------
1 | # Reactackle-app
2 |
3 |
4 | **Part of [Reactackle](https://www.npmjs.com/package/reactackle) - an open-source components library built with [React](https://facebook.github.io/react/) and [Styled Components](https://www.styled-components.com).**
5 |
6 | ## Installation
7 |
8 | **Using NPM:**
9 | ```
10 | npm install reactackle-app --save
11 | ```
12 |
13 | **Using Yarn:**
14 | ```
15 | yarn add reactackle-app
16 | ```
17 | [Component Demo](http://reactackle-docs.braincrumbs.io/#/app/demo)
18 |
--------------------------------------------------------------------------------
/packages/reactackle-card/README.md:
--------------------------------------------------------------------------------
1 | # Reactackle-card
2 |
3 | **Part of [Reactackle](https://www.npmjs.com/package/reactackle) - an open-source components library built with [React](https://facebook.github.io/react/) and [Styled Components](https://www.styled-components.com).**
4 |
5 | ## Installation
6 |
7 | **Using NPM:**
8 | ```
9 | npm install reactackle-card --save
10 | ```
11 |
12 | **Using Yarn:**
13 | ```
14 | yarn add reactackle-card
15 | ```
16 | [Component Demo](http://reactackle-docs.braincrumbs.io/#/card/demo)
17 |
--------------------------------------------------------------------------------
/packages/reactackle-icons/src/IconSvg/icons/IconEye.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { IconSvg } from '../IconSvg';
3 |
4 | const IconEye = props => (
5 |
6 |
10 |
11 | );
12 |
13 | export default IconEye;
14 |
--------------------------------------------------------------------------------
/packages/reactackle-tag/README.md:
--------------------------------------------------------------------------------
1 | # Reactackle-tag
2 |
3 |
4 | **Part of [Reactackle](https://www.npmjs.com/package/reactackle) - an open-source components library built with [React](https://facebook.github.io/react/) and [Styled Components](https://www.styled-components.com).**
5 |
6 | ## Installation
7 |
8 | **Using NPM:**
9 | ```
10 | npm install reactackle-tag --save
11 | ```
12 |
13 | **Using Yarn:**
14 | ```
15 | yarn add reactackle-tag
16 | ```
17 | [Component Demo](http://reactackle-docs.braincrumbs.io/#/tag/demo)
18 |
--------------------------------------------------------------------------------
/packages/reactackle-form/README.md:
--------------------------------------------------------------------------------
1 | # Reactackle-form
2 |
3 |
4 | **Part of [Reactackle](https://www.npmjs.com/package/reactackle) - an open-source components library built with [React](https://facebook.github.io/react/) and [Styled Components](https://www.styled-components.com).**
5 |
6 | ## Installation
7 |
8 | **Using NPM:**
9 | ```
10 | npm install reactackle-form --save
11 | ```
12 |
13 | **Using Yarn:**
14 | ```
15 | yarn add reactackle-form
16 | ```
17 | [Component Demo](http://reactackle-docs.braincrumbs.io/#/form/demo)
18 |
--------------------------------------------------------------------------------
/packages/reactackle-grid/README.md:
--------------------------------------------------------------------------------
1 | # Reactackle-grid
2 |
3 |
4 | **Part of [Reactackle](https://www.npmjs.com/package/reactackle) - an open-source components library built with [React](https://facebook.github.io/react/) and [Styled Components](https://www.styled-components.com).**
5 |
6 | ## Installation
7 |
8 | **Using NPM:**
9 | ```
10 | npm install reactackle-grid --save
11 | ```
12 |
13 | **Using Yarn:**
14 | ```
15 | yarn add reactackle-grid
16 | ```
17 | [Component Demo](http://reactackle-docs.braincrumbs.io/#/grid/demo)
18 |
--------------------------------------------------------------------------------
/packages/reactackle-tabs/README.md:
--------------------------------------------------------------------------------
1 | # Reactackle-tabs
2 |
3 |
4 | **Part of [Reactackle](https://www.npmjs.com/package/reactackle) - an open-source components library built with [React](https://facebook.github.io/react/) and [Styled Components](https://www.styled-components.com).**
5 |
6 | ## Installation
7 |
8 | **Using NPM:**
9 | ```
10 | npm install reactackle-tabs --save
11 | ```
12 |
13 | **Using Yarn:**
14 | ```
15 | yarn add reactackle-tabs
16 | ```
17 | [Component Demo](http://reactackle-docs.braincrumbs.io/#/tabs/demo)
18 |
--------------------------------------------------------------------------------
/packages/reactackle-text/README.md:
--------------------------------------------------------------------------------
1 | # Reactackle-text
2 |
3 |
4 | **Part of [Reactackle](https://www.npmjs.com/package/reactackle) - an open-source components library built with [React](https://facebook.github.io/react/) and [Styled Components](https://www.styled-components.com).**
5 |
6 | ## Installation
7 |
8 | **Using NPM:**
9 | ```
10 | npm install reactackle-text --save
11 | ```
12 |
13 | **Using Yarn:**
14 | ```
15 | yarn add reactackle-text
16 | ```
17 | [Component Demo](http://reactackle-docs.braincrumbs.io/#/text/demo)
18 |
--------------------------------------------------------------------------------
/demo/components/DemoSnippet/DemoAlert/styles/DemoAlertItemStyled.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import styled from 'styled-components';
4 |
5 | import {
6 | baseModule,
7 | fontSizeBody,
8 | bodyFontColor,
9 | } from '../../../../theme/styleHelpers';
10 |
11 | /** STYLES */
12 | export const DemoAlertItemStyled = styled.div`
13 | font-size: ${fontSizeBody}px;
14 | color: ${bodyFontColor};
15 |
16 | & + & {
17 | margin-top: ${baseModule(0.5)}px;
18 | }
19 | `;
20 |
21 | DemoAlertItemStyled.displayName = 'DemoAlertItemStyled';
22 |
--------------------------------------------------------------------------------
/demo/components/DemoSnippet/DemoTitle/styles/SnippetTitleStyled.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import styled from 'styled-components';
4 |
5 | import {
6 | fontSizeTitle,
7 | fontWeightSemibold,
8 | bodyFontColor,
9 | } from '../../../../theme/styleHelpers';
10 |
11 | /** STYLES */
12 | export const SnippetTitleStyled = styled.div`
13 | line-height: 1.5;
14 | font-size: ${fontSizeTitle}px;
15 | font-weight: ${fontWeightSemibold};
16 | color: ${bodyFontColor};
17 | `;
18 |
19 | SnippetTitleStyled.displayName = 'SnippetTitleStyled';
20 |
--------------------------------------------------------------------------------
/demo/routes/menu/menu.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { RouteStructure } from '../../components/Route/RouteStructure';
3 |
4 | export const MenuRoute = props => (
5 |
18 | {props.children}
19 |
20 | );
21 |
22 | MenuRoute.displayName = 'MenuRoute';
23 |
--------------------------------------------------------------------------------
/packages/reactackle-button/README.md:
--------------------------------------------------------------------------------
1 | # Reactackle-button
2 |
3 |
4 | **Part of [Reactackle](https://www.npmjs.com/package/reactackle) - an open-source components library built with [React](https://facebook.github.io/react/) and [Styled Components](https://www.styled-components.com).**
5 |
6 | ## Installation
7 |
8 | **Using NPM:**
9 | ```
10 | npm install reactackle-button --save
11 | ```
12 |
13 | **Using Yarn:**
14 | ```
15 | yarn add reactackle-button
16 | ```
17 | [Component Demo](http://reactackle-docs.braincrumbs.io/#/button/demo)
18 |
--------------------------------------------------------------------------------
/packages/reactackle-dialog/README.md:
--------------------------------------------------------------------------------
1 | # Reactackle-dialog
2 |
3 |
4 | **Part of [Reactackle](https://www.npmjs.com/package/reactackle) - an open-source components library built with [React](https://facebook.github.io/react/) and [Styled Components](https://www.styled-components.com).**
5 |
6 | ## Installation
7 |
8 | **Using NPM:**
9 | ```
10 | npm install reactackle-dialog --save
11 | ```
12 |
13 | **Using Yarn:**
14 | ```
15 | yarn add reactackle-dialog
16 | ```
17 | [Component Demo](http://reactackle-docs.braincrumbs.io/#/dialog/demo)
18 |
--------------------------------------------------------------------------------
/packages/reactackle-header/README.md:
--------------------------------------------------------------------------------
1 | # Reactackle-header
2 |
3 |
4 | **Part of [Reactackle](https://www.npmjs.com/package/reactackle) - an open-source components library built with [React](https://facebook.github.io/react/) and [Styled Components](https://www.styled-components.com).**
5 |
6 | ## Installation
7 |
8 | **Using NPM:**
9 | ```
10 | npm install reactackle-header --save
11 | ```
12 |
13 | **Using Yarn:**
14 | ```
15 | yarn add reactackle-header
16 | ```
17 | [Component Demo](http://reactackle-docs.braincrumbs.io/#/header/demo)
18 |
--------------------------------------------------------------------------------
/packages/reactackle-menu/README.md:
--------------------------------------------------------------------------------
1 | # Reactackle-menu
2 |
3 |
4 | **Part of [Reactackle](https://www.npmjs.com/package/reactackle) - an open-source components library built with [React](https://facebook.github.io/react/) and [Styled Components](https://www.styled-components.com).**
5 |
6 | ## Installation
7 |
8 | **Using NPM:**
9 | ```
10 | npm install reactackle-menu --save
11 | ```
12 |
13 | **Using Yarn:**
14 | ```
15 | yarn add reactackle-menu
16 | ```
17 | [Component Demo](http://reactackle-docs.braincrumbs.io/#/reactackle-menu/demo)
18 |
--------------------------------------------------------------------------------
/demo/routes/text/text.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { RouteStructure } from '../../components/Route/RouteStructure';
3 |
4 | export const TextRoute = props => (
5 |
18 | { props.children }
19 |
20 | );
21 |
22 | TextRoute.displayName = 'TextRoute';
23 |
--------------------------------------------------------------------------------
/packages/reactackle-form/src/FormItem/FormItem.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import { registerDefaultComponentTheme } from 'reactackle-core';
5 | import { FormItemStyled } from './styles/FormItemStyled';
6 | import componentTheme from './styles/theme';
7 |
8 | registerDefaultComponentTheme('formItem', componentTheme);
9 |
10 | export default function FormItem(props) {
11 | return (
12 |
13 | {props.children}
14 |
15 | );
16 | }
17 | FormItem.displayName = 'FormItem';
18 |
--------------------------------------------------------------------------------
/packages/reactackle-sidebar/README.md:
--------------------------------------------------------------------------------
1 | # Reactackle-sidebar
2 |
3 |
4 | **Part of [Reactackle](https://www.npmjs.com/package/reactackle) - an open-source components library built with [React](https://facebook.github.io/react/) and [Styled Components](https://www.styled-components.com).**
5 |
6 | ## Installation
7 |
8 | **Using NPM:**
9 | ```
10 | npm install reactackle-sidebar --save
11 | ```
12 |
13 | **Using Yarn:**
14 | ```
15 | yarn add reactackle-sidebar
16 | ```
17 | [Component Demo](http://reactackle-docs.braincrumbs.io/#/sidebar/demo)
18 |
--------------------------------------------------------------------------------
/packages/reactackle-tooltip/README.md:
--------------------------------------------------------------------------------
1 | # Reactackle-tooltip
2 |
3 |
4 | **Part of [Reactackle](https://www.npmjs.com/package/reactackle) - an open-source components library built with [React](https://facebook.github.io/react/) and [Styled Components](https://www.styled-components.com).**
5 |
6 | ## Installation
7 |
8 | **Using NPM:**
9 | ```
10 | npm install reactackle-tooltip --save
11 | ```
12 |
13 | **Using Yarn:**
14 | ```
15 | yarn add reactackle-tooltip
16 | ```
17 | [Component Demo](http://reactackle-docs.braincrumbs.io/#/tooltip/demo)
18 |
--------------------------------------------------------------------------------
/demo/components/Article/ArticleModule/ArticleModule.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 |
5 | import {
6 | ArticleModuleStyled,
7 | } from '../ArticleModule/styles/ArticleModuleStyled';
8 |
9 | const propTypes = {};
10 | const defaultProps = {};
11 |
12 | export const ArticleModule = props => (
13 |
14 | {props.children}
15 |
16 | );
17 |
18 | ArticleModule.propTypes = propTypes;
19 | ArticleModule.defaultProps = defaultProps;
20 | ArticleModule.displayName = 'ArticleModule';
21 |
--------------------------------------------------------------------------------
/demo/components/Article/ArticleModule/styles/ArticleModuleStyled.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import styled from 'styled-components';
4 |
5 | import {
6 | baseModule,
7 | contentWidth,
8 | } from '../../../../theme/styleHelpers';
9 |
10 | /** STYLES */
11 | export const ArticleModuleStyled = styled.div`
12 | margin: 0 auto;
13 | max-width: ${contentWidth}px;
14 | padding: ${baseModule(4)}px ${baseModule(4)}px;
15 |
16 | & + & {
17 | padding-top: 0;
18 | }
19 | `;
20 |
21 | ArticleModuleStyled.displayName = 'ArticleModuleStyled';
22 |
--------------------------------------------------------------------------------
/packages/reactackle-checkbox/README.md:
--------------------------------------------------------------------------------
1 | # Reactackle-checkbox
2 |
3 |
4 | **Part of [Reactackle](https://www.npmjs.com/package/reactackle) - an open-source components library built with [React](https://facebook.github.io/react/) and [Styled Components](https://www.styled-components.com).**
5 |
6 | ## Installation
7 |
8 | **Using NPM:**
9 | ```
10 | npm install reactackle-checkbox --save
11 | ```
12 |
13 | **Using Yarn:**
14 | ```
15 | yarn add reactackle-checkbox
16 | ```
17 | [Component Demo](http://reactackle-docs.braincrumbs.io/#/checkbox/demo)
18 |
--------------------------------------------------------------------------------
/packages/reactackle-progress/README.md:
--------------------------------------------------------------------------------
1 | # Reactackle-progress
2 |
3 |
4 | **Part of [Reactackle](https://www.npmjs.com/package/reactackle) - an open-source components library built with [React](https://facebook.github.io/react/) and [Styled Components](https://www.styled-components.com).**
5 |
6 | ## Installation
7 |
8 | **Using NPM:**
9 | ```
10 | npm install reactackle-progress --save
11 | ```
12 |
13 | **Using Yarn:**
14 | ```
15 | yarn add reactackle-progress
16 | ```
17 | [Component Demo](http://reactackle-docs.braincrumbs.io/#/progress/demo)
18 |
--------------------------------------------------------------------------------
/packages/reactackle-accordion/README.md:
--------------------------------------------------------------------------------
1 | # Reactackle-accordion
2 |
3 |
4 | **Part of [Reactackle](https://www.npmjs.com/package/reactackle) - an open-source components library built with [React](https://facebook.github.io/react/) and [Styled Components](https://www.styled-components.com).**
5 |
6 | ## Installation
7 |
8 | **Using NPM:**
9 | ```
10 | npm install reactackle-accordion --save
11 | ```
12 |
13 | **Using Yarn:**
14 | ```
15 | yarn add reactackle-accordion
16 | ```
17 | [Component Demo](http://reactackle-docs.braincrumbs.io/#/accordion/demo)
18 |
--------------------------------------------------------------------------------
/packages/reactackle-selectbox/README.md:
--------------------------------------------------------------------------------
1 | # Reactackle-selectbox
2 |
3 |
4 | **Part of [Reactackle](https://www.npmjs.com/package/reactackle) - an open-source components library built with [React](https://facebook.github.io/react/) and [Styled Components](https://www.styled-components.com).**
5 |
6 | ## Installation
7 |
8 | **Using NPM:**
9 | ```
10 | npm install reactackle-selectbox --save
11 | ```
12 |
13 | **Using Yarn:**
14 | ```
15 | yarn add reactackle-selectbox
16 | ```
17 | [Component Demo](http://reactackle-docs.braincrumbs.io/#/selectbox/demo)
18 |
--------------------------------------------------------------------------------
/demo/routes/tag/tag.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import { RouteStructure } from '../../components/Route/RouteStructure';
5 |
6 | export const TagRoute = props => (
7 |
20 | {props.children}
21 |
22 | );
23 |
24 | TagRoute.displayName = 'TagRoute';
25 |
--------------------------------------------------------------------------------
/packages/reactackle-alert-area/README.md:
--------------------------------------------------------------------------------
1 | # Reactackle-alert-area
2 |
3 |
4 | **Part of [Reactackle](https://www.npmjs.com/package/reactackle) - an open-source components library built with [React](https://facebook.github.io/react/) and [Styled Components](https://www.styled-components.com).**
5 |
6 | ## Installation
7 |
8 | **Using NPM:**
9 | ```
10 | npm install reactackle-alert-area --save
11 | ```
12 |
13 | **Using Yarn:**
14 | ```
15 | yarn add reactackle-alert-area
16 | ```
17 | [Component Demo](http://reactackle-docs.braincrumbs.io/#/alert-area/demo)
18 |
--------------------------------------------------------------------------------
/packages/reactackle-text-field/README.md:
--------------------------------------------------------------------------------
1 | # Reactackle-text-field
2 |
3 |
4 | **Part of [Reactackle](https://www.npmjs.com/package/reactackle) - an open-source components library built with [React](https://facebook.github.io/react/) and [Styled Components](https://www.styled-components.com).**
5 |
6 | ## Installation
7 |
8 | **Using NPM:**
9 | ```
10 | npm install reactackle-text-field --save
11 | ```
12 |
13 | **Using Yarn:**
14 | ```
15 | yarn add reactackle-text-field
16 | ```
17 | [Component Demo](http://reactackle-docs.braincrumbs.io/#/text-field/demo)
18 |
--------------------------------------------------------------------------------
/packages/reactackle-breadcrumbs/README.md:
--------------------------------------------------------------------------------
1 | # Reactackle-breadcrumbs
2 |
3 |
4 | **Part of [Reactackle](https://www.npmjs.com/package/reactackle) - an open-source components library built with [React](https://facebook.github.io/react/) and [Styled Components](https://www.styled-components.com).**
5 |
6 | ## Installation
7 |
8 | **Using NPM:**
9 | ```
10 | npm install reactackle-breadcrumbs --save
11 | ```
12 |
13 | **Using Yarn:**
14 | ```
15 | yarn add reactackle-breadcrumbs
16 | ```
17 | [Component Demo](http://reactackle-docs.braincrumbs.io/#/breadcrumbs/demo)
18 |
--------------------------------------------------------------------------------
/packages/reactackle-radio-group/README.md:
--------------------------------------------------------------------------------
1 | # Reactackle-radio-group
2 |
3 |
4 | **Part of [Reactackle](https://www.npmjs.com/package/reactackle) - an open-source components library built with [React](https://facebook.github.io/react/) and [Styled Components](https://www.styled-components.com).**
5 |
6 | ## Installation
7 |
8 | **Using NPM:**
9 | ```
10 | npm install reactackle-radio-group --save
11 | ```
12 |
13 | **Using Yarn:**
14 | ```
15 | yarn add reactackle-radio-group
16 | ```
17 | [Component Demo](http://reactackle-docs.braincrumbs.io/#/radio-group/demo)
18 |
--------------------------------------------------------------------------------
/packages/reactackle-autoposition/README.md:
--------------------------------------------------------------------------------
1 | # Reactackle-autoposition
2 |
3 |
4 | **Part of [Reactackle](https://www.npmjs.com/package/reactackle) - an open-source components library built with [React](https://facebook.github.io/react/) and [Styled Components](https://www.styled-components.com).**
5 |
6 | ## Installation
7 |
8 | **Using NPM:**
9 | ```
10 | npm install reactackle-autoposition --save
11 | ```
12 |
13 | **Using Yarn:**
14 | ```
15 | yarn add reactackle-autoposition
16 | ```
17 | [Component Demo](http://reactackle-docs.braincrumbs.io/#/autoposition/demo)
18 |
--------------------------------------------------------------------------------
/packages/reactackle-tooltip-icon/README.md:
--------------------------------------------------------------------------------
1 | # Reactackle-tooltip-icon
2 |
3 |
4 | **Part of [Reactackle](https://www.npmjs.com/package/reactackle) - an open-source components library built with [React](https://facebook.github.io/react/) and [Styled Components](https://www.styled-components.com).**
5 |
6 | ## Installation
7 |
8 | **Using NPM:**
9 | ```
10 | npm install reactackle-tooltip-icon --save
11 | ```
12 |
13 | **Using Yarn:**
14 | ```
15 | yarn add reactackle-tooltip-icon
16 | ```
17 | [Component Demo](http://reactackle-docs.braincrumbs.io/#/tooltip-icon/demo)
18 |
--------------------------------------------------------------------------------
/demo/routes/app/app.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import {
5 | RouteStructure,
6 | } from '../../components/Route/RouteStructure';
7 |
8 | export const AppRoute = props => (
9 |
22 | { props.children }
23 |
24 | );
25 |
26 | AppRoute.displayName = 'AppRoute';
27 |
--------------------------------------------------------------------------------
/demo/routes/theme/snippets/theme-provider.snippet:
--------------------------------------------------------------------------------
1 | import { ThemeProvider } from 'styled-components';
2 | import { Theme } from 'reactackle';
3 |
4 | import reactackleThemeMixin from './theme/reactackleThemeMixin';
5 | import customTheme from './theme/theme';
6 |
7 | document.addEventListener('DOMContentLoaded', () => {
8 | ReactDOM.render(
9 |
10 |
11 | ...your app content
12 | ,
13 | ,
14 |
15 | document.getElementById('container'),
16 | );
17 | });
18 |
--------------------------------------------------------------------------------
/packages/reactackle-core/src/utils/create-broadcast.js:
--------------------------------------------------------------------------------
1 | export const createBroadcast = initialValue => {
2 | let listeners = [];
3 | let currentValue = initialValue;
4 |
5 | return {
6 | publish(value) {
7 | currentValue = value;
8 | listeners.forEach(listener => listener(currentValue));
9 | },
10 |
11 | subscribe(listener) {
12 | listeners.push(listener);
13 |
14 | listener(currentValue);
15 |
16 | return () => {
17 | listeners = listeners.filter(item => item !== listener);
18 | };
19 | },
20 | };
21 | };
22 |
--------------------------------------------------------------------------------
/packages/reactackle-toggle-button/README.md:
--------------------------------------------------------------------------------
1 | # Reactackle-toggle-button
2 |
3 |
4 | **Part of [Reactackle](https://www.npmjs.com/package/reactackle) - an open-source components library built with [React](https://facebook.github.io/react/) and [Styled Components](https://www.styled-components.com).**
5 |
6 | ## Installation
7 |
8 | **Using NPM:**
9 | ```
10 | npm install reactackle-toggle-button --save
11 | ```
12 |
13 | **Using Yarn:**
14 | ```
15 | yarn add reactackle-toggle-button
16 | ```
17 | [Component Demo](http://reactackle-docs.braincrumbs.io/#/toggle-button/demo)
18 |
--------------------------------------------------------------------------------
/demo/routes/form/form.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import {
5 | RouteStructure,
6 | } from '../../components/Route/RouteStructure';
7 |
8 | export const FormRoute = props => (
9 |
22 | {props.children}
23 |
24 | );
25 |
26 | FormRoute.displayName = 'FormRoute';
27 |
--------------------------------------------------------------------------------
/demo/routes/tabs/tabs.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 |
5 | import {
6 | RouteStructure,
7 | } from '../../components/Route/RouteStructure';
8 |
9 | export const TabsRoute = props => (
10 |
23 | { props.children }
24 |
25 | );
26 | TabsRoute.displayName = 'TabsRoute';
27 |
--------------------------------------------------------------------------------
/demo/routes/text-field/snippets/3.snippet:
--------------------------------------------------------------------------------
1 |
7 |
12 |
18 |
23 |
--------------------------------------------------------------------------------
/demo/routes/alert-area/alert-area.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { RouteStructure } from '../../components/Route/RouteStructure';
3 |
4 | export const AlertAreaRoute = props => (
5 |
18 | {props.children}
19 |
20 | );
21 |
22 | AlertAreaRoute.displayName = 'AlertAreaRoute';
23 |
--------------------------------------------------------------------------------
/demo/routes/card/card.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import {
5 | RouteStructure,
6 | } from '../../components/Route/RouteStructure';
7 |
8 | export const CardRoute = props => (
9 |
22 | { props.children }
23 |
24 | );
25 |
26 |
27 | CardRoute.displayName = 'CardRoute';
28 |
--------------------------------------------------------------------------------
/demo/routes/icon-svg/icon-svg.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {
3 | RouteStructure,
4 | } from '../../components/Route/RouteStructure';
5 |
6 | export const IconSvgRoute = props => (
7 |
20 | { props.children }
21 |
22 | );
23 |
24 | IconSvgRoute.displayName = 'IconSvgRoute';
25 |
--------------------------------------------------------------------------------
/demo/routes/radio/radio.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import {
5 | RouteStructure,
6 | } from '../../components/Route/RouteStructure';
7 |
8 | export const RadioRoute = props => (
9 |
22 | { props.children }
23 |
24 | );
25 |
26 | RadioRoute.displayName = 'RadioRoute';
27 |
--------------------------------------------------------------------------------
/demo/routes/theme/theme.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import {
5 | RouteStructure,
6 | } from '../../components/Route/RouteStructure';
7 |
8 | export const ThemeRoute = props => (
9 |
22 | { props.children }
23 |
24 | );
25 |
26 | ThemeRoute.displayName = 'ThemeRoute';
27 |
--------------------------------------------------------------------------------
/demo/routes/app/demo.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import {
5 | RouteDemo,
6 | } from '../../components/Route/RouteStructure';
7 | import {
8 | DemoSnippet,
9 | DemoCode,
10 | } from '../../components/DemoSnippet/DemoSnippet';
11 | import SnippetDefault from './snippets/1.snippet';
12 |
13 | export const AppDemoRoute = () => (
14 |
15 |
16 |
19 |
20 |
21 | );
22 |
23 | AppDemoRoute.displayName = 'AppDemoRoute';
24 |
--------------------------------------------------------------------------------
/demo/routes/breadcrumbs/breadcrumbs.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { RouteStructure } from '../../components/Route/RouteStructure';
3 |
4 | export const BreadcrumbsRoute = props => (
5 |
18 | {props.children}
19 |
20 | );
21 |
22 | BreadcrumbsRoute.displayName = 'BreadcrumbsRoute';
23 |
--------------------------------------------------------------------------------
/demo/routes/button/button.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import {
5 | RouteStructure,
6 | } from '../../components/Route/RouteStructure';
7 |
8 | export const ButtonRoute = props => (
9 |
22 | { props.children }
23 |
24 | );
25 |
26 | ButtonRoute.displayName = 'ButtonRoute';
27 |
--------------------------------------------------------------------------------
/demo/routes/dialog/dialog.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import {
5 | RouteStructure,
6 | } from '../../components/Route/RouteStructure';
7 |
8 | export const DialogRoute = props => (
9 |
22 | { props.children }
23 |
24 | );
25 |
26 | DialogRoute.displayName = 'DialogRoute';
27 |
--------------------------------------------------------------------------------
/demo/routes/header/header.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import {
5 | RouteStructure,
6 | } from '../../components/Route/RouteStructure';
7 |
8 | export const HeaderRoute = props => (
9 |
22 | { props.children }
23 |
24 | );
25 |
26 | HeaderRoute.displayName = 'HeaderRoute';
27 |
--------------------------------------------------------------------------------
/demo/components/Article/ArticleLead/styles/ArticleLeadStyled.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import styled from 'styled-components';
4 |
5 | import {
6 | bodyFontColor,
7 | fontSizeTitle,
8 | fontWeightNormal,
9 | baseModule,
10 | } from '../../../../theme/styleHelpers';
11 |
12 | /** STYLES */
13 | export const ArticleLeadStyled = styled.div`
14 | margin: 0;
15 | padding: 0;
16 | font-size: ${fontSizeTitle}px;
17 | font-weight: ${fontWeightNormal};
18 | color: ${bodyFontColor};
19 | margin-top: ${baseModule(3)}px;
20 | `;
21 |
22 | ArticleLeadStyled.displayName = 'ArticleLeadStyled';
23 |
--------------------------------------------------------------------------------
/packages/reactackle-input-autocomplete/README.md:
--------------------------------------------------------------------------------
1 | # Reactackle-input-autocomplete
2 |
3 |
4 | **Part of [Reactackle](https://www.npmjs.com/package/reactackle) - an open-source components library built with [React](https://facebook.github.io/react/) and [Styled Components](https://www.styled-components.com).**
5 |
6 | ## Installation
7 |
8 | **Using NPM:**
9 | ```
10 | npm install reactackle-input-autocomplete --save
11 | ```
12 |
13 | **Using Yarn:**
14 | ```
15 | yarn add reactackle-input-autocomplete
16 | ```
17 | [Component Demo](http://reactackle-docs.braincrumbs.io/#/input-autocomplete/demo)
18 |
--------------------------------------------------------------------------------
/packages/reactackle-tabs/src/Tab/styles/TabContentWrapperStyled.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import styled from 'styled-components';
4 |
5 | const content = () => `
6 | & > * {
7 | &,
8 | &:hover,
9 | &:focus {
10 | color: inherit;
11 | text-decoration: none;
12 | cursor: inherit;
13 | }
14 | }
15 | `;
16 |
17 | export const TabContentWrapperStyled = styled.div`
18 | flex-grow: 1;
19 | display: flex;
20 | align-items: center;
21 | justify-content: center;
22 | ${content};
23 | `;
24 |
25 | TabContentWrapperStyled.displayName = 'TabContentWrapperStyled';
26 |
--------------------------------------------------------------------------------
/demo/components/Route/RouteMemo/styles/MemoHeadingStyled.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import styled from 'styled-components';
4 | import { routeMemoConstants } from './constants';
5 |
6 | import {
7 | baseModule,
8 | fontSizeTitle,
9 | fontWeightSemibold,
10 | } from '../../../../theme/styleHelpers';
11 |
12 | export const MemoHeadingStyled = styled.div`
13 | padding: 0 ${routeMemoConstants.paddingX}px;
14 | margin-bottom: ${baseModule(1.5)}px;
15 | font-size: ${fontSizeTitle}px;
16 | font-weight: ${fontWeightSemibold};
17 | `;
18 |
19 | MemoHeadingStyled.displayName = 'MemoHeadingStyled';
20 |
--------------------------------------------------------------------------------
/demo/routes/sidebar/sidebar.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import {
5 | RouteStructure,
6 | } from '../../components/Route/RouteStructure';
7 |
8 | export const SidebarRoute = props => (
9 |
22 | { props.children }
23 |
24 | );
25 |
26 | SidebarRoute.displayName = 'SidebarRoute';
27 |
--------------------------------------------------------------------------------
/demo/routes/tooltip/tooltip.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import {
5 | RouteStructure,
6 | } from '../../components/Route/RouteStructure';
7 |
8 | export const TooltipRoute = props => (
9 |
22 | { props.children }
23 |
24 | );
25 |
26 | TooltipRoute.displayName = 'TooltipRoute';
27 |
--------------------------------------------------------------------------------
/demo/routes/customizing/snippets/theming.snippet:
--------------------------------------------------------------------------------
1 | import styled, { ThemeProvider } from 'styled-components';
2 |
3 | import {
4 | Theme,
5 | } from 'reactackle';
6 |
7 | import yourAppTheme from './theme/theme';
8 | import reactackleThemeMixin from './theme/reactackleThemeMixin';
9 |
10 | document.addEventListener('DOMContentLoaded', () => {
11 | ReactDOM.render(
12 |
13 |
14 | ...your app content
15 |
16 | ,
17 |
18 | document.getElementById('container'),
19 | );
20 | });
21 |
--------------------------------------------------------------------------------
/demo/routes/icon-custom/icon-custom.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {
3 | RouteStructure,
4 | } from '../../components/Route/RouteStructure';
5 |
6 | export const IconCustomRoute = props => (
7 |
20 | { props.children }
21 |
22 | );
23 |
24 | IconCustomRoute.displayName = 'IconCustomRoute';
25 |
--------------------------------------------------------------------------------
/packages/reactackle-tooltip/src/styles/theme.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import {
4 | baseModule,
5 | halfBaseModule,
6 | radiusDefault,
7 | fontSizeXsmall,
8 | colorWhite,
9 | zIndexTooltip,
10 | } from 'reactackle-core';
11 |
12 | export default {
13 | backgroundColor: 'rgba(0,0,0,0.9)',
14 | borderRadius: radiusDefault,
15 | paddingY: halfBaseModule,
16 | paddingX: baseModule,
17 | minWidth: 120,
18 | maxWidth: '100vw',
19 | fontSize: fontSizeXsmall,
20 | lineHeight: 1.3,
21 | fontColor: colorWhite,
22 | zIndex: zIndexTooltip,
23 | tooltipRefererSpacing: baseModule,
24 | };
25 |
--------------------------------------------------------------------------------
/demo/index.ejs:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | <%= htmlWebpackPlugin.options.title %>
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/demo/routes/checkbox/checkbox.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import {
5 | RouteStructure,
6 | } from '../../components/Route/RouteStructure';
7 |
8 | export const CheckboxRoute = props => (
9 |
22 | { props.children }
23 |
24 | );
25 |
26 | CheckboxRoute.displayName = 'CheckboxRoute';
27 |
--------------------------------------------------------------------------------
/demo/components/DemoSnippet/DemoPreview/styles/DemoPreviewStyled.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import styled from 'styled-components';
4 | import { demoSnippetConstants } from '../../styles/constants';
5 |
6 | import {
7 | fontSizeBody,
8 | bodyFontColor,
9 | } from '../../../../theme/styleHelpers';
10 |
11 | export const DemoPreviewStyled = styled.div`
12 | width: 100%;
13 | line-height: 1.5;
14 | padding: 0;
15 | background-color: ${demoSnippetConstants.backgroundColor};
16 | font-size: ${fontSizeBody}px;
17 | color: ${bodyFontColor};
18 | `;
19 |
20 | DemoPreviewStyled.displayName = 'DemoPreviewStyled';
21 |
--------------------------------------------------------------------------------
/demo/routes/accordion/accordion.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import {
5 | RouteStructure,
6 | } from '../../components/Route/RouteStructure';
7 |
8 | export const AccordionRoute = props => (
9 |
22 | { props.children }
23 |
24 | );
25 |
26 | AccordionRoute.displayName = 'AccordionRoute';
27 |
--------------------------------------------------------------------------------
/demo/routes/select-box/select-box.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import {
5 | RouteStructure,
6 | } from '../../components/Route/RouteStructure';
7 |
8 | export const SelectBoxRoute = props => (
9 |
22 | { props.children }
23 |
24 | );
25 |
26 | SelectBoxRoute.displayName = 'SelectBoxRoute';
27 |
--------------------------------------------------------------------------------
/packages/reactackle-toggle-button/src/styles/ToggleInputStyled.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import styled from 'styled-components';
4 | import { elementInvisible } from 'reactackle-core';
5 |
6 | const propTypes = {};
7 | const defaultProps = {};
8 |
9 | /** STYLES */
10 | export const ToggleInputStyled = styled.input`
11 | ${/* Prettier workarount until issue is not fixed: https://github.com/prettier/prettier/issues/2291 */ ''};
12 | ${elementInvisible};
13 | `;
14 |
15 | ToggleInputStyled.propTypes = propTypes;
16 | ToggleInputStyled.defaultProps = defaultProps;
17 | ToggleInputStyled.displayName = 'ToggleInputStyled';
18 |
--------------------------------------------------------------------------------
/demo/routes/text-field/text-field.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 |
5 | import {
6 | RouteStructure,
7 | } from '../../components/Route/RouteStructure';
8 |
9 | export const TextFieldRoute = props => (
10 |
23 | { props.children }
24 |
25 | );
26 |
27 | TextFieldRoute.displayName = 'TextFieldRoute';
28 |
--------------------------------------------------------------------------------
/packages/reactackle-progress/src/common/computeCssKeyframes.js:
--------------------------------------------------------------------------------
1 | import kebabCase from 'lodash.kebabcase';
2 |
3 | export default ({ stateTransitions, computeValue = (_, v) => v }) => {
4 | const cssKeyframes = Object.entries(stateTransitions)
5 | .map(([keyFrameName, style]) => {
6 | const cssStyles = Object.entries(style).map(([styleName, value]) =>
7 | `${kebabCase(styleName)}: ${computeValue(styleName, value)};`,
8 | );
9 | return `
10 | ${keyFrameName} {
11 | ${cssStyles.join(' ')}
12 | }
13 | `;
14 | });
15 |
16 | return cssKeyframes.join(' ');
17 | };
18 |
--------------------------------------------------------------------------------
/demo/components/Article/styles/ArticleStyled.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import styled from 'styled-components';
4 |
5 | import {
6 | baseModule,
7 | fontSizeBody,
8 | bodyFontColor,
9 | colorWhite,
10 | } from '../../../theme/styleHelpers';
11 |
12 | /** STYLES */
13 | export const ArticleStyled = styled.div`
14 | max-width: 100%;
15 | width: 100%;
16 | margin-left: auto;
17 | margin-right: auto;
18 | font-size: ${fontSizeBody}px;
19 | color: ${bodyFontColor};
20 | padding: ${baseModule(4)}px ${baseModule(4)}px;
21 | background-color: ${colorWhite};
22 | `;
23 |
24 | ArticleStyled.displayName = 'ArticleStyled';
25 |
--------------------------------------------------------------------------------
/demo/routes/grid-row/grid-row.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import {
5 | RouteStructure,
6 | } from '../../components/Route/RouteStructure';
7 |
8 | export const GridRowRoute = props => (
9 |
23 | { props.children }
24 |
25 | );
26 |
27 | GridRowRoute.displayName = 'GridRowRoute';
28 |
--------------------------------------------------------------------------------
/packages/reactackle-breadcrumbs/src/BreadcrumbsItem/styles/TextBoxStyled.js:
--------------------------------------------------------------------------------
1 | import styled, { css } from 'styled-components';
2 | import { extractThemeOrDefault, getValueString } from 'reactackle-core';
3 |
4 | const size = ({ theme: themeFromProvider }) => {
5 | const theme = extractThemeOrDefault(themeFromProvider);
6 |
7 | const {
8 | paddingY,
9 | paddingX,
10 | } = theme.reactackle.components.breadcrumbs.item.textBox;
11 |
12 | return css`
13 | padding: ${getValueString(paddingY)} ${getValueString(paddingX)};
14 | `;
15 | };
16 |
17 | export const TextBoxStyled = styled.div`
18 | ${size}
19 | `;
20 |
21 |
--------------------------------------------------------------------------------
/packages/reactackle-card/src/CardMedia/styles/CardMediaStyled.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import PropTypes from 'prop-types';
4 | import styled from 'styled-components';
5 |
6 | const propTypes = {
7 | theme: PropTypes.object,
8 | };
9 |
10 | /** Styles */
11 | export const CardMediaStyled = styled.div`
12 | display: flex;
13 | flex-direction: column;
14 | justify-content: flex-end;
15 | background-position: center center;
16 | background-repeat: no-repeat;
17 | background-size: cover;
18 | position: relative;
19 | `;
20 |
21 | CardMediaStyled.propTypes = propTypes;
22 | CardMediaStyled.displayName = 'CardMediaStyled';
23 |
--------------------------------------------------------------------------------
/demo/routes/tooltip-icon/tooltip-icon.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import {
5 | RouteStructure,
6 | } from '../../components/Route/RouteStructure';
7 |
8 | export const TooltipIconRoute = props => (
9 |
22 | { props.children }
23 |
24 | );
25 |
26 | TooltipIconRoute.displayName = 'TooltipIconRoute';
27 |
--------------------------------------------------------------------------------
/demo/components/Article/ArticleHeader/ArticleHeader.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import PropTypes from 'prop-types';
5 | import { ArticleHeaderStyled } from './styles/ArticleHeaderStyled';
6 |
7 | const propTypes = {
8 | level: PropTypes.oneOf([1, 2]),
9 | };
10 |
11 | const defaultProps = {
12 | level: 2,
13 | };
14 |
15 | export const ArticleHeader = props => (
16 |
17 | {props.children}
18 |
19 | );
20 |
21 | ArticleHeader.propTypes = propTypes;
22 | ArticleHeader.defaultProps = defaultProps;
23 | ArticleHeader.displayName = 'ArticleHeader';
24 |
--------------------------------------------------------------------------------
/demo/routes/auto-position/auto-position.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import {
5 | RouteStructure,
6 | } from '../../components/Route/RouteStructure';
7 |
8 | export const AutoPositionRoute = props => (
9 |
22 | { props.children }
23 |
24 | );
25 |
26 | AutoPositionRoute.displayName = 'AutoPositionRoute';
27 |
--------------------------------------------------------------------------------
/demo/routes/toggle-button/toggle-button.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import {
5 | RouteStructure,
6 | } from '../../components/Route/RouteStructure';
7 |
8 | export const ToggleButtonRoute = props => (
9 |
22 | { props.children }
23 |
24 | );
25 |
26 | ToggleButtonRoute.displayName = 'ToggleButtonRoute';
27 |
--------------------------------------------------------------------------------
/demo/components/DemoSnippet/styles/DemoSnippetStyled.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import styled from 'styled-components';
4 | import { demoSnippetConstants } from './constants';
5 | import { colorBorder } from '../../../theme/styleHelpers';
6 |
7 | /** STYLES */
8 | export const DemoSnippetStyled = styled.div`
9 | margin: 0 auto;
10 | max-width: 100%;
11 | width: 100%;
12 |
13 | & + & {
14 | margin-top: ${demoSnippetConstants.similarItemsSpacing}px;
15 | padding-top: ${demoSnippetConstants.similarItemsSpacing}px;
16 | border-top: 1px dotted ${colorBorder};
17 | }
18 | `;
19 |
20 | DemoSnippetStyled.displayName = 'DemoSnippetStyled';
21 |
--------------------------------------------------------------------------------
/demo/routes/grid-column/grid-column.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import {
5 | RouteStructure,
6 | } from '../../components/Route/RouteStructure';
7 |
8 | export const GridColumnRoute = props => (
9 |
23 | { props.children }
24 |
25 | );
26 |
27 | GridColumnRoute.displayName = 'GridColumnRoute';
28 |
--------------------------------------------------------------------------------
/demo/routes/tooltip/snippets/3.snippet:
--------------------------------------------------------------------------------
1 | /../
2 |
3 | const ComponentWithDefaultStaticTooltip = props => {
4 | const wrapperProps = {
5 | onClick: props.toggleTooltip,
6 | tabIndex: '1',
7 | };
8 | return (
9 |
10 |
Click me
11 |
12 | {props.content}
13 |
14 |
15 | );
16 | };
17 |
18 |
19 | const WithDefaultStaticTooltip = withTooltip(ComponentWithDefaultStaticTooltip);
20 |
21 | /../
22 |
23 | content in static tooltip}
26 | mode="static"
27 | />
28 |
--------------------------------------------------------------------------------
/demo/routes/progress/preloader/preloader.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import {
5 | RouteStructure,
6 | } from '../../../components/Route/RouteStructure';
7 |
8 | export const PreloaderRoute = props => (
9 |
23 | { props.children }
24 |
25 | );
26 |
27 | PreloaderRoute.displayName = 'PreloaderRoute';
28 |
--------------------------------------------------------------------------------
/demo/routes/progress/circle-progress/circle-progress.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { RouteStructure } from '../../../components/Route/RouteStructure';
3 |
4 | export const CircleProgressRoute = props => (
5 |
19 | {props.children}
20 |
21 | );
22 |
23 | CircleProgressRoute.displayName = 'CircleProgressRoute';
24 |
--------------------------------------------------------------------------------
/packages/reactackle-app/src/TopRegion/TopRegion.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import { TopRegionStyled } from './styles/TopRegionStyled';
5 | import { TopRegionContentStyled } from './styles/TopRegionContentStyled';
6 |
7 | const propTypes = {};
8 | const defaultProps = {};
9 |
10 | export default function TopRegion(props) {
11 | return (
12 |
13 |
14 | {props.children}
15 |
16 |
17 | );
18 | }
19 |
20 | TopRegion.propTypes = propTypes;
21 | TopRegion.defaultProps = defaultProps;
22 | TopRegion.displayName = 'TopRegion';
23 |
--------------------------------------------------------------------------------
/demo/routes/grid-container/grid-container.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 |
5 | import {
6 | RouteStructure,
7 | } from '../../components/Route/RouteStructure';
8 |
9 | export const GridContainerRoute = props => (
10 |
24 | { props.children }
25 |
26 | );
27 |
28 | GridContainerRoute.displayName = 'GridContainerRoute';
29 |
--------------------------------------------------------------------------------
/demo/routes/input-autocomplete/input-autocomplete.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import {
5 | RouteStructure,
6 | } from '../../components/Route/RouteStructure';
7 |
8 | export const InputAutocompleteRoute = props => (
9 |
22 | { props.children }
23 |
24 | );
25 |
26 | InputAutocompleteRoute.displayName = 'InputAutocompleteRoute';
27 |
--------------------------------------------------------------------------------
/demo/routes/progress/linear-progress/linear-progress.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import { RouteStructure } from '../../../components/Route/RouteStructure';
5 |
6 | export const LinearProgressRoute = props => (
7 |
21 | {props.children}
22 |
23 | );
24 |
25 | LinearProgressRoute.displayName = 'LinearProgressRoute';
26 |
--------------------------------------------------------------------------------
/packages/reactackle-alert-area/src/Alert/styles/ActionsStyled.js:
--------------------------------------------------------------------------------
1 | import styled, { css } from 'styled-components';
2 | import { extractThemeOrDefault, getValueString } from 'reactackle-core';
3 |
4 | const style = ({ theme: themeFromProvider }) => {
5 | const theme = extractThemeOrDefault(themeFromProvider);
6 |
7 | const {
8 | paddingY,
9 | paddingX,
10 | } = theme.reactackle.components.alertsArea.item.actions;
11 |
12 | return css`
13 | padding: ${getValueString(paddingY)} ${getValueString(paddingX)};
14 | `;
15 | };
16 |
17 | export const ActionsStyled = styled.div`
18 | flex-shrink: 0;
19 | display: flex;
20 | align-items: center;
21 | ${style}
22 | `;
23 |
--------------------------------------------------------------------------------
/demo/routes/grid-flex-region/grid-flex-region.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import {
5 | RouteStructure,
6 | } from '../../components/Route/RouteStructure';
7 |
8 | export const GridFlexRegionRoute = props => (
9 |
23 | { props.children }
24 |
25 | );
26 |
27 | GridFlexRegionRoute.displayName = 'GridFlexRegionRoute';
28 |
--------------------------------------------------------------------------------
/demo/routes/grid-padding-box/grid-padding-box.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import {
5 | RouteStructure,
6 | } from '../../components/Route/RouteStructure';
7 |
8 | export const GridPaddingBoxRoute = props => (
9 |
23 | { props.children }
24 |
25 | );
26 |
27 | GridPaddingBoxRoute.displayName = 'GridPaddingBoxRoute';
28 |
--------------------------------------------------------------------------------
/demo/theme/constants.js:
--------------------------------------------------------------------------------
1 | export const basicColors = {
2 | white: '#ffffff',
3 | black: '#000000',
4 | red: '#f04124',
5 | yellow: '#f0b900',
6 | green: '#43AC6A',
7 | lightblue: '#d9edf7',
8 | darkblue: '#3A7FC2',
9 | transparent: 'hsla(0, 0%, 100%, 0)',
10 | };
11 |
12 | export const themeColors = {
13 | main: '#d9003f',
14 | secondary: '#3c5da1',
15 | };
16 |
17 | export const paletteBlueGrey = {
18 | 25: '#F4F5FA',
19 | 50: '#ECEFF7',
20 | 75: '#E1E4ED',
21 | 100: '#D5DAE3',
22 | 200: '#c0c8de',
23 | 300: '#B8C0D6',
24 | 400: '#99a1b7',
25 | 500: '#6f7c92',
26 | 600: '#59627a',
27 | 700: '#333A45',
28 | 800: '#1B2A49',
29 | 900: '#1A1D23',
30 | };
31 |
--------------------------------------------------------------------------------
/demo/components/DemoSnippet/DemoAlert/DemoAlert.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import { Container } from 'reactackle';
5 | import { DemoAlertStyled } from './styles/DemoAlertStyled';
6 | import { DemoAlertItemStyled } from './styles/DemoAlertItemStyled';
7 |
8 | export const DemoAlert = props => (
9 |
10 |
11 | {props.children}
12 |
13 |
14 | );
15 |
16 | DemoAlert.displayName = 'DemoAlert';
17 |
18 | export const DemoAlertItem = props => (
19 |
20 | {props.children}
21 |
22 | );
23 |
24 | DemoAlertItem.displayName = 'DemoAlertItem';
25 |
--------------------------------------------------------------------------------
/demo/routes/card/snippets/3.snippet:
--------------------------------------------------------------------------------
1 |
2 |
3 |
10 | }
11 | >
12 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/packages/reactackle-menu/src/MenuItem/styles/AddonRightStyled.js:
--------------------------------------------------------------------------------
1 | import styled, { css } from 'styled-components';
2 | import {
3 | extractThemeOrDefault,
4 | getValueString,
5 | } from 'reactackle-core';
6 |
7 | const size = ({ theme: themeFromProvider }) => {
8 | const theme = extractThemeOrDefault(themeFromProvider);
9 |
10 | const {
11 | marginLeft,
12 | marginRight,
13 | } = theme.reactackle.components.menu.item.addonRight;
14 |
15 | return css`
16 | margin: 0 ${getValueString(marginLeft)} 0 ${getValueString(marginRight)};
17 | `;
18 | };
19 |
20 | export const AddonRightStyled = styled.div`
21 | ${size}
22 | `;
23 |
24 | AddonRightStyled.displayName = 'AddonRightStyled';
25 |
--------------------------------------------------------------------------------
/demo/routes/usage/snippets/basic-app.snippet:
--------------------------------------------------------------------------------
1 | import styled, { ThemeProvider } from 'styled-components';
2 |
3 | import {
4 | Theme,
5 | injectGlobalStyle,
6 | injectResetStyle,
7 | } from 'reactackle';
8 |
9 | import yourAppTheme from './theme/theme';
10 | import reactackleThemeMixin from './theme/reactackleThemeMixin';
11 |
12 | injectGlobalStyle();
13 | injectResetStyle();
14 |
15 | document.addEventListener('DOMContentLoaded', () => {
16 | ReactDOM.render(
17 |
18 |
19 | ...your app content
20 |
21 | ,
22 |
23 | document.getElementById('container'),
24 | );
25 | });
26 |
--------------------------------------------------------------------------------
/packages/reactackle-app/__tests__/content.test.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import renderer from 'react-test-renderer';
5 | import { Content } from '../src';
6 |
7 | jest.mock('react-dom');
8 |
9 | describe('', () => {
10 | it('renders correctly with default props', () => {
11 | const tree = renderer.create(
12 | ,
13 | ).toJSON();
14 |
15 | expect(tree).toMatchSnapshot();
16 | });
17 |
18 | it('renders correctly if contains children', () => {
19 | const tree = renderer.create(
20 |
21 | TEST
22 | ,
23 | ).toJSON();
24 |
25 | expect(tree).toMatchSnapshot();
26 | });
27 | });
28 |
--------------------------------------------------------------------------------
/packages/reactackle-app/src/BottomRegion/BottomRegion.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import { BottomRegionStyled } from './styles/BottomRegionStyled';
5 | import { BottomRegionContentStyled } from './styles/BottomRegionContentStyled';
6 |
7 | const propTypes = {};
8 | const defaultProps = {};
9 |
10 | export default function BottomRegion(props) {
11 | return (
12 |
13 |
14 | {props.children}
15 |
16 |
17 | );
18 | }
19 |
20 | BottomRegion.propTypes = propTypes;
21 | BottomRegion.defaultProps = defaultProps;
22 | BottomRegion.displayName = 'BottomRegion';
23 |
--------------------------------------------------------------------------------
/packages/reactackle-form/src/FormItem/styles/theme.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import Color from 'color';
4 | import { baseModule } from 'reactackle-core';
5 | import form from '../../styles/theme';
6 |
7 | export default {
8 | spacing: form.gutter,
9 |
10 | label: {
11 | fontSize: ({ fontSize }) => fontSize[-2],
12 | lineHeight: 1,
13 | textTransform: 'none',
14 | fontWeight: ({ fontWeight }) => fontWeight.normal,
15 | marginBottom: baseModule,
16 | color: ({ color }) => Color(color.black).lighten(0.54),
17 |
18 | focus: {
19 | color: form.themeColor,
20 | },
21 |
22 | disabled: {
23 | color: ({ fontColor }) => fontColor.medium,
24 | },
25 | },
26 | };
27 |
--------------------------------------------------------------------------------
/packages/reactackle-app/src/TopRegion/styles/TopRegionContentStyled.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import styled from 'styled-components';
4 | import { extractThemeOrDefault } from 'reactackle-core';
5 |
6 | const base = ({ theme: themeFromProvider }) => {
7 | const theme = extractThemeOrDefault(themeFromProvider);
8 |
9 | const fontFamily =
10 | theme.reactackle.fontFamily[theme.reactackle.body.fontFamily];
11 |
12 | return `
13 | font-family: ${fontFamily};
14 | `;
15 | };
16 |
17 | export const TopRegionContentStyled = styled.div`
18 | width: 100%;
19 | display: flex;
20 | box-sizing: border-box;
21 | ${base};
22 | `;
23 |
24 | TopRegionContentStyled.displayName = 'TopRegionContentStyled';
25 |
--------------------------------------------------------------------------------
/demo/components/PropsTable/styles/HeaderCellStyled.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import styled from 'styled-components';
4 |
5 | import {
6 | baseModule,
7 | colorBorder,
8 | paletteBlueGrey25,
9 | fontWeightSemibold,
10 | } from '../../../theme/styleHelpers';
11 |
12 | export const HeaderCellStyled = styled.td`
13 | vertical-align: bottom;
14 | flex-direction: column;
15 | border: 1px solid ${colorBorder};
16 | text-align: center;
17 | background-color: ${paletteBlueGrey25};
18 | padding: ${baseModule(1)}px ${baseModule(2)}px;
19 | font-weight: ${fontWeightSemibold};
20 |
21 | &:first-child {
22 | text-align: left;
23 | }
24 | `;
25 |
26 | HeaderCellStyled.displayName = 'HeaderCellStyled';
27 |
--------------------------------------------------------------------------------
/demo/components/DemoSnippet/DemoAlert/styles/DemoAlertStyled.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import styled from 'styled-components';
4 | import Color from 'color';
5 |
6 | import {
7 | baseModule,
8 | radiusDefault,
9 | colorAlert,
10 | } from '../../../../theme/styleHelpers';
11 |
12 | const backgroundColor = ({
13 | theme,
14 | }) => Color(colorAlert(theme)).lighten(0.7).string();
15 |
16 | /** STYLES */
17 | export const DemoAlertStyled = styled.div`
18 | display: block;
19 | width: 100%;
20 | background-color: ${backgroundColor};
21 | border-left: 4px solid ${colorAlert};
22 | border-radius: ${radiusDefault}px;
23 | padding: ${baseModule(2)}px;
24 | `;
25 |
26 | DemoAlertStyled.displayName = 'DemoAlertStyled';
27 |
--------------------------------------------------------------------------------
/packages/reactackle-app/src/BottomRegion/styles/BottomRegionContentStyled.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import styled from 'styled-components';
4 | import { extractThemeOrDefault } from 'reactackle-core';
5 |
6 | const base = ({ theme: themeFromProvider }) => {
7 | const theme = extractThemeOrDefault(themeFromProvider);
8 |
9 | const fontFamily =
10 | theme.reactackle.fontFamily[theme.reactackle.body.fontFamily];
11 |
12 | return `
13 | font-family: ${fontFamily};
14 | `;
15 | };
16 |
17 | export const BottomRegionContentStyled = styled.div`
18 | width: 100%;
19 | display: flex;
20 | box-sizing: border-box;
21 | ${base};
22 | `;
23 |
24 | BottomRegionContentStyled.displayName = 'BottomRegionContentStyled';
25 |
--------------------------------------------------------------------------------
/demo/components/Menu/MenuGroup/styles/TitleStyled.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import styled from 'styled-components';
4 | import {
5 | baseModule,
6 | fontWeightSemibold,
7 | fontSizeSmall,
8 | } from '../../../../theme/styleHelpers';
9 |
10 | export const TitleStyled = styled.div`
11 | width: 100%;
12 | margin: 0;
13 | list-style-type: none;
14 | padding: ${baseModule(1)}px ${baseModule(2)}px;
15 | margin-bottom: ${baseModule(0.5)}px;
16 | background-color: rgba(0, 0, 0, 0.07);
17 | color: rgba(255, 255, 255, 0.6);
18 | text-transform: uppercase;
19 | font-weight: ${fontWeightSemibold};
20 | font-size: ${fontSizeSmall}px;
21 | letter-spacing: 0.5px;
22 | `;
23 |
24 | TitleStyled.displayName = 'TitleStyled';
25 |
26 |
--------------------------------------------------------------------------------
/packages/reactackle-accordion/src/styles/AccordionStyled.js:
--------------------------------------------------------------------------------
1 | import styled, { css } from 'styled-components';
2 | import { extractThemeOrDefault, getValueString } from 'reactackle-core';
3 |
4 | const separator = ({ theme: themeFromProvider }) => {
5 | const theme = extractThemeOrDefault(themeFromProvider);
6 |
7 | const {
8 | style,
9 | color,
10 | thickness,
11 | } = theme.reactackle.components.accordion.separator;
12 |
13 | return css`
14 | border-top: ${getValueString(thickness)} ${style} ${color};
15 | `;
16 | };
17 |
18 | export const AccordionStyled = styled.dl`
19 | width: 100%;
20 |
21 | > dd + dt {
22 | ${separator}
23 | }
24 | `;
25 |
26 | AccordionStyled.displayName = 'AccordionStyled';
27 |
--------------------------------------------------------------------------------
/packages/reactackle-app/src/TopRegion/styles/TopRegionStyled.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import styled from 'styled-components';
4 | import { extractThemeOrDefault } from 'reactackle-core';
5 |
6 | const base = ({ theme: themeFromProvider }) => {
7 | const theme = extractThemeOrDefault(themeFromProvider);
8 |
9 | const fontFamily =
10 | theme.reactackle.fontFamily[theme.reactackle.body.fontFamily];
11 |
12 | return `
13 | font-family: ${fontFamily};
14 | `;
15 | };
16 |
17 | export const TopRegionStyled = styled.div`
18 | width: 100%;
19 | display: flex;
20 | flex-direction: column;
21 | flex-shrink: 0;
22 | box-sizing: border-box;
23 | ${base};
24 | `;
25 |
26 | TopRegionStyled.displayName = 'TopRegionStyled';
27 |
--------------------------------------------------------------------------------
/demo/routes/card/snippets/4.snippet:
--------------------------------------------------------------------------------
1 |
2 |
3 |
10 |
11 |
12 | Bei uns steppt der Butterbear! Lust auf ein Tänzchen
13 | mit unserem zuckersüßen Geschenk?
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/demo/routes/tooltip/snippets/1.snippet:
--------------------------------------------------------------------------------
1 | /../
2 |
3 | const ComponentWithDefaultDynamicTooltip = props => {
4 | const wrapperProps = {
5 | onClick: props.toggleTooltip,
6 | onFocus: props.showTooltip,
7 | onBlur: props.hideTooltip,
8 | onMouseEnter: props.showTooltip,
9 | onMouseLeave: props.hideTooltip,
10 | tabIndex: '1',
11 | };
12 | return (
13 |
14 |
Hover me
15 |
16 | {props.text}
17 |
18 |
19 | );
20 | };
21 |
22 | const WithDefaultDynamicTooltip =
23 | withTooltip(ComponentWithDefaultDynamicTooltip);
24 |
25 | /../
26 |
27 |
28 |
--------------------------------------------------------------------------------
/demo/routes/progress/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import { RouteInfo } from '../../components/Route/RouteStructure';
5 |
6 | const propTypes = RouteInfo.propTypes;
7 | const defaultProps = {
8 | ...RouteInfo.defaultProps,
9 | componentTitle: 'Progress',
10 | routeTitle: 'Progress',
11 | };
12 |
13 | export const ProgressIndexRoute = props => {
14 | const itemProps = null;
15 |
16 | return (
17 |
18 |
19 | {itemProps}
20 |
21 |
22 | );
23 | };
24 |
25 | ProgressIndexRoute.propTypes = propTypes;
26 | ProgressIndexRoute.defaultProps = defaultProps;
27 | ProgressIndexRoute.displayName = 'ProgressIndexRoute';
28 |
--------------------------------------------------------------------------------
/packages/reactackle-form/src/styles/theme.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import {
4 | tripleBaseModule,
5 | colorTransparent,
6 | colorSecondary,
7 | } from 'reactackle-core';
8 |
9 | export default {
10 | themeColor: colorSecondary,
11 | gutter: tripleBaseModule,
12 |
13 | message: {
14 | fontSize: ({ fontSize }) => fontSize[-1],
15 | lineHeight: 1.5,
16 | marginBottom: ({ baseModule }) => baseModule * 4.5,
17 | color: ({ fontColor }) => fontColor.medium,
18 | backgroundColor: colorTransparent,
19 | paddingY: 0,
20 | paddingX: 0,
21 |
22 | error: {
23 | color: ({ color }) => color.alert,
24 | backgroundColor: colorTransparent,
25 | paddingY: 0,
26 | paddingX: 0,
27 | },
28 | },
29 | };
30 |
--------------------------------------------------------------------------------
/demo/components/PropsTable/styles/HeaderRowStyled.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import styled, { css } from 'styled-components';
4 | import { media, extractThemeOrDefault } from 'reactackle';
5 |
6 | const mediaQueries = ({ theme: themeFromProvider }) => {
7 | const theme = extractThemeOrDefault(themeFromProvider);
8 |
9 | return css`
10 | ${media(theme.reactackle.breakpoints.medium)`
11 | opacity: 1;
12 | position: relative;
13 | pointer-events: initial;
14 | `}
15 | `;
16 | };
17 |
18 | /** STYLES */
19 | export const HeaderRowStyled = styled.thead`
20 | line-height: 1.5;
21 | opacity: 0;
22 | position: fixed;
23 | pointer-events: none;
24 | ${mediaQueries}
25 | `;
26 |
27 | HeaderRowStyled.displayName = 'HeaderRowStyled';
28 |
--------------------------------------------------------------------------------
/packages/reactackle-tooltip-icon/src/styles/theme.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import {
4 | doubleBaseModule,
5 | colorPaletteGrey200,
6 | colorPaletteGrey400,
7 | colorPaletteGrey500,
8 | colorPaletteGrey700,
9 | colorPaletteGrey900,
10 | fontSizeXsmall,
11 | } from 'reactackle-core';
12 |
13 | export default {
14 | diameter: doubleBaseModule,
15 | fontSize: fontSizeXsmall,
16 |
17 | style: {
18 | fontColor: colorPaletteGrey500,
19 | backgroundColor: colorPaletteGrey200,
20 |
21 | hover: {
22 | fontColor: colorPaletteGrey700,
23 | backgroundColor: colorPaletteGrey400,
24 | },
25 |
26 | focus: {
27 | fontColor: colorPaletteGrey500,
28 | backgroundColor: colorPaletteGrey900,
29 | },
30 | },
31 | };
32 |
--------------------------------------------------------------------------------
/demo/routes/card/snippets/2.snippet:
--------------------------------------------------------------------------------
1 |
2 |
3 |
8 |
9 |
10 | Take a step back in time with this vibrant and fun gift that
11 | draws inspiration from 1960 pop and psychedelia.
12 |
13 |
14 |
15 |
16 |
17 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/packages/reactackle-breadcrumbs/src/styles/ListStyled.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | import PropTypes from 'prop-types';
3 |
4 | const propTypes = {
5 | alignItems: PropTypes.oneOf(['top', 'center', 'bottom']),
6 | };
7 |
8 | const defaultProps = {
9 | alignItems: 'center',
10 | };
11 |
12 | const ALIGN_MAP = {
13 | top: 'flex-start',
14 | center: 'center',
15 | bottom: 'flex-end',
16 | };
17 |
18 | const align = ({ alignItems }) => `align-items: ${ALIGN_MAP[alignItems]};`;
19 |
20 | export const ListStyled = styled.ol`
21 | list-style-type: none;
22 | padding: 0;
23 | margin: 0;
24 | flex-grow: 1;
25 | display: flex;
26 | ${align}
27 | `;
28 |
29 | ListStyled.propTypes = propTypes;
30 | ListStyled.defaultProps = defaultProps;
31 |
--------------------------------------------------------------------------------
/packages/reactackle-header/src/HeaderTitle/HeaderTitle.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import PropTypes from 'prop-types';
5 | import { HeaderTitleStyled } from './styles/HeaderTitleStyled';
6 |
7 | const propTypes = {
8 | colorScheme: PropTypes.oneOf(['light', 'dark']),
9 | size: PropTypes.oneOf(['default', 'blank', 'dense']),
10 | };
11 |
12 | const defaultProps = {
13 | colorScheme: 'light',
14 | size: 'default',
15 | };
16 |
17 | export default function HeaderTitle(props) {
18 | return (
19 |
20 | {props.children}
21 |
22 | );
23 | }
24 |
25 | HeaderTitle.propTypes = propTypes;
26 | HeaderTitle.defaultProps = defaultProps;
27 |
--------------------------------------------------------------------------------
/packages/reactackle-tooltip/src/styles/TooltipWrapperStyled.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import PropTypes from 'prop-types';
4 | import styled from 'styled-components';
5 | import { extractThemeOrDefault } from 'reactackle-core';
6 |
7 | const propTypes = {
8 | theme: PropTypes.object,
9 | };
10 |
11 | const baseProps = ({ theme: themeFromProvider }) => {
12 | const theme = extractThemeOrDefault(themeFromProvider);
13 | const { zIndex } = theme.reactackle.components.tooltip;
14 |
15 | return `
16 | z-index: ${zIndex};
17 | `;
18 | };
19 |
20 | export const TooltipWrapperStyled = styled.div`
21 | position: fixed;
22 | ${baseProps};
23 | `;
24 |
25 | TooltipWrapperStyled.propTypes = propTypes;
26 | TooltipWrapperStyled.displayName = 'TooltipWrapperStyled';
27 |
--------------------------------------------------------------------------------
/demo/routes/sidebar/demo.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import {
5 | RouteDemo,
6 | } from '../../components/Route/RouteStructure';
7 | import {
8 | TestBox,
9 | DemoSnippet,
10 | DemoPreview,
11 | DemoCode,
12 | } from '../../components/DemoSnippet/DemoSnippet';
13 | import SnippetDefault from './snippets/1.snippet';
14 |
15 | export const SidebarDemoRoute = () => (
16 |
17 |
18 |
19 |
20 | Code for left route sidebar
21 |
22 |
23 |
26 |
27 |
28 | );
29 |
30 | SidebarDemoRoute.displayName = 'SidebarDemoRoute';
31 |
--------------------------------------------------------------------------------
/packages/reactackle-text-field/src/styles/TextFieldStyled.js:
--------------------------------------------------------------------------------
1 | import styled from 'styled-components';
2 | import { extractThemeOrDefault } from 'reactackle-core';
3 |
4 | const base = ({ theme: themeFromProvider }) => {
5 | const theme = extractThemeOrDefault(themeFromProvider);
6 |
7 | const fontFamily =
8 | theme.reactackle.fontFamily[theme.reactackle.body.fontFamily];
9 |
10 | return `
11 | &,
12 | & *,
13 | *::after,
14 | *::before {
15 | font-family: ${fontFamily};
16 | box-sizing: border-box;
17 | }
18 | `;
19 | };
20 |
21 | export const TextFieldStyled = styled.div`
22 | display: flex;
23 | flex-direction: column;
24 | max-width: 100%;
25 | ${base};
26 | `;
27 |
28 | TextFieldStyled.displayName = 'TextFieldStyled';
29 |
--------------------------------------------------------------------------------
/packages/reactackle-dialog/src/DialogActions/DialogActionsRegion/DialogActionsRegion.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import PropTypes from 'prop-types';
5 | import { DialogActionsRegionStyled } from './styles/DialogActionsRegionStyled';
6 |
7 | const propTypes = {
8 | alignLeft: PropTypes.bool,
9 | };
10 |
11 | const defaultProps = {
12 | alignLeft: false,
13 | };
14 |
15 | export default function DialogActionsRegion(props) {
16 | return (
17 |
18 | {props.children}
19 |
20 | );
21 | }
22 |
23 | DialogActionsRegion.propTypes = propTypes;
24 | DialogActionsRegion.defaultProps = defaultProps;
25 | DialogActionsRegion.displayName = 'DialogActionsRegion';
26 |
--------------------------------------------------------------------------------
/packages/reactackle-card/src/CardActions/CardActions.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import withExternalPropsCard from '../withExternalPropsCard';
5 | import { CardActionsStyled } from './styles/CardActionsStyled';
6 |
7 | import { externalPropTypes, externalDefaultProps } from '../externalPropTypes';
8 |
9 | const propTypes = externalPropTypes;
10 | const defaultProps = externalDefaultProps;
11 |
12 | export const _CardActions = ({ children, externalProps }) =>
13 |
14 | {children}
15 | ;
16 |
17 | _CardActions.displayName = 'CardActions';
18 | export default withExternalPropsCard(_CardActions);
19 |
20 | _CardActions.propTypes = propTypes;
21 | _CardActions.defaultProps = defaultProps;
22 |
--------------------------------------------------------------------------------
/packages/reactackle-input-autocomplete/src/styles/InputAutocompleteStyled.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import styled from 'styled-components';
4 | import { extractThemeOrDefault } from 'reactackle-core';
5 |
6 | const base = ({ theme: themeFromProvider }) => {
7 | const theme = extractThemeOrDefault(themeFromProvider);
8 |
9 | const fontFamily =
10 | theme.reactackle.fontFamily[theme.reactackle.body.fontFamily];
11 |
12 | return `
13 | &,
14 | & *,
15 | *::after,
16 | *::before {
17 | font-family: ${fontFamily};
18 | box-sizing: border-box;
19 | }
20 | `;
21 | };
22 |
23 | export const InputAutocompleteStyled = styled.div`
24 | position: relative;
25 | ${base};
26 | `;
27 |
28 | InputAutocompleteStyled.displayName = 'InputAutocompleteStyled';
29 |
--------------------------------------------------------------------------------
/packages/reactackle-menu/src/MenuItem/styles/TextPrimaryStyled.js:
--------------------------------------------------------------------------------
1 | import styled, { css } from 'styled-components';
2 |
3 | import {
4 | extractThemeOrDefault,
5 | getValueString,
6 | transition,
7 | } from 'reactackle-core';
8 |
9 | const font = ({ theme: themeFromProvider }) => {
10 | const theme = extractThemeOrDefault(themeFromProvider);
11 |
12 | const {
13 | fontSize,
14 | lineHeight,
15 | } = theme.reactackle.components.menu.item;
16 |
17 | return css`
18 | font-size: ${getValueString(fontSize)};
19 | line-height: ${lineHeight};
20 | `;
21 | };
22 |
23 |
24 | export const TextPrimaryStyled = styled.div`
25 | color: currentColor;
26 | ${font}
27 | ${transition('color')}
28 | `;
29 |
30 | TextPrimaryStyled.displayName = 'TextPrimaryStyled';
31 |
--------------------------------------------------------------------------------
/demo/routes/auto-position/snippets/0.snippet:
--------------------------------------------------------------------------------
1 | /../
2 |
3 | _saveRef(ref) {
4 | this.domNode = ref;
5 | }
6 |
7 | /../
8 |
9 | render() {
10 | return (
11 |
12 |
13 |
24 | {content}
25 |
26 |
27 | );
28 | }
29 |
--------------------------------------------------------------------------------
/demo/routes/select-box/snippets/1.snippet:
--------------------------------------------------------------------------------
1 |
8 |
9 |
17 |
18 |
26 |
27 | const sampleData={[
28 | { text: 'Option 1' },
29 | { text: 'Option 2' },
30 | { text: 'Option 3 - disabled', disabled: true },
31 | ]}
32 |
--------------------------------------------------------------------------------
/packages/reactackle-core/src/utils/misc.js:
--------------------------------------------------------------------------------
1 | export const noop = () => {};
2 |
3 | export const returnNull = () => null;
4 |
5 | export const returnTrue = () => true;
6 |
7 | export const getKey = (item, index) =>
8 | item && typeof item.id !== 'undefined' ? item.id : index;
9 |
10 | export const isUndef = value => typeof value === 'undefined';
11 |
12 | export const isFunction = value => typeof value === 'function';
13 |
14 | export const isObject = value =>
15 | typeof value === 'object' && value !== null && !Array.isArray(value);
16 |
17 | export const isValidPositiveNumberOrZero = num =>
18 | Number.isFinite(num) && num >= 0;
19 |
20 | export const minMax = (value, min, max) => {
21 | if (value < min) return min;
22 | if (value > max) return max;
23 | return value;
24 | };
25 |
--------------------------------------------------------------------------------
/packages/reactackle-progress/src/LinearProgress/styles/SecondaryLineStyled.js:
--------------------------------------------------------------------------------
1 | import styled, { css } from 'styled-components';
2 | import { extractThemeOrDefault, getValueString } from 'reactackle-core';
3 |
4 | const style = ({ theme: themeFromProvider }) => {
5 | const componentTheme =
6 | extractThemeOrDefault(themeFromProvider).reactackle.components.progress;
7 |
8 | return css`
9 | height: ${getValueString(componentTheme.linear.thickness)};
10 | `;
11 | };
12 |
13 | export const SecondaryLineStyled = styled.div`
14 | position: absolute;
15 | top: 0;
16 | left: 0;
17 | width: 100%;
18 | transform: scaleX(0);
19 | transform-origin: left center;
20 | will-change: transform;
21 | ${style}
22 | `;
23 |
24 | SecondaryLineStyled.displayName = 'SecondaryLineStyled';
25 |
--------------------------------------------------------------------------------
/demo/routes/input-autocomplete/snippets/0.snippet:
--------------------------------------------------------------------------------
1 | const data = [
2 | { value: 'Option 1' },
3 | { value: 'Option 2' },
4 | { value: 'Option 3' },
5 | { value: 'Option 4' },
6 | { value: 'Option 5' },
7 | { value: 'Option 6' },
8 | ];
9 | /../
10 |
11 | this.state = {
12 | options: [],
13 | };
14 |
15 | /../
16 |
17 | _filterOptions(value) {
18 | return data.filter(option => option.value.includes(value));
19 | }
20 |
21 | _handleChange({ value, option, complete }) {
22 | if (option || complete) return;
23 | this.setState({
24 | options: this._filterOptions(value),
25 | });
26 | }
27 | }
28 |
29 | /../
30 |
31 |
36 |
--------------------------------------------------------------------------------
/packages/reactackle-progress/src/CircleProgress/styles/SecondaryLineStyled.js:
--------------------------------------------------------------------------------
1 | import styled, { css } from 'styled-components';
2 | import { extractThemeOrDefault, getValueString } from 'reactackle-core';
3 |
4 | const style = ({ theme: themeFromProvider, customThickness }) => {
5 | const componentTheme =
6 | extractThemeOrDefault(themeFromProvider).reactackle.components.progress;
7 |
8 | const { strokeSize } = componentTheme.circle.strokeSize;
9 |
10 | return css`
11 | stroke-width: ${getValueString(customThickness || strokeSize)};
12 | `;
13 | };
14 |
15 | export const SecondaryLineStyled = styled.circle`
16 | fill: none;
17 | stroke-dasharray: 0 158;
18 | transform-origin: center;
19 | ${style}
20 | `;
21 |
22 | SecondaryLineStyled.displayName = 'SecondaryLineStyled';
23 |
--------------------------------------------------------------------------------
/packages/reactackle-progress/src/ProgressBase/styles/SupplementTextStyled.js:
--------------------------------------------------------------------------------
1 | import styled, { css } from 'styled-components';
2 | import { extractThemeOrDefault, getValueString } from 'reactackle-core';
3 |
4 | const style = ({ theme: themeFromProvider, progressType }) => {
5 | const theme = extractThemeOrDefault(themeFromProvider);
6 |
7 | const {
8 | fontSize,
9 | lineHeight,
10 | fontWeight,
11 | } = theme.reactackle.components.progress[progressType].supplementText;
12 |
13 | return css`
14 | font-size: ${getValueString(fontSize)};
15 | line-height: ${lineHeight};
16 | font-weight: ${fontWeight};
17 | `;
18 | };
19 |
20 | export const SupplementTextStyled = styled.div`
21 | ${style}
22 | `;
23 |
24 | SupplementTextStyled.displayName = 'SupplementTextStyled';
25 |
--------------------------------------------------------------------------------
/packages/reactackle-grid/src/Container/Container.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import PropTypes from 'prop-types';
5 | import { ContainerStyled } from './styles/ContainerStyled';
6 |
7 | const propTypes = {
8 | /** Container will have maximum width and will be centered on screen */
9 | boxed: PropTypes.bool,
10 | /** Container will occupy all available space */
11 | spread: PropTypes.bool,
12 | };
13 |
14 | const defaultProps = {
15 | boxed: false,
16 | spread: false,
17 | };
18 |
19 | export const Container = props =>
20 |
21 | {props.children}
22 | ;
23 |
24 | Container.propTypes = propTypes;
25 | Container.defaultProps = defaultProps;
26 | Container.displayName = 'Container';
27 |
--------------------------------------------------------------------------------
/packages/reactackle-progress/src/ProgressBase/styles/ValueLabelStyled.js:
--------------------------------------------------------------------------------
1 | import styled, { css } from 'styled-components';
2 | import { extractThemeOrDefault, getValueString } from 'reactackle-core';
3 |
4 | const style = ({ theme: themeFromProvider, progressType }) => {
5 | const theme = extractThemeOrDefault(themeFromProvider);
6 |
7 | const {
8 | fontSize,
9 | lineHeight,
10 | fontWeight,
11 | } = theme.reactackle.components.progress[progressType].valueLabel;
12 |
13 | return css`
14 | font-size: ${getValueString(fontSize)};
15 | line-height: ${lineHeight};
16 | font-weight: ${fontWeight};
17 | `;
18 | };
19 |
20 | export const ValueLabelStyled = styled.label`
21 | display: block;
22 | ${style}
23 | `;
24 |
25 | ValueLabelStyled.displayName = 'ValueLabelStyled';
26 |
--------------------------------------------------------------------------------
/packages/reactackle-selectbox/src/styles/SelectBoxStyled.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import styled from 'styled-components';
4 | import { extractThemeOrDefault } from 'reactackle-core';
5 |
6 | const base = ({ theme: themeFromProvider }) => {
7 | const theme = extractThemeOrDefault(themeFromProvider);
8 |
9 | const fontFamily =
10 | theme.reactackle.fontFamily[theme.reactackle.body.fontFamily];
11 |
12 | return `
13 | &,
14 | & *,
15 | *::after,
16 | *::before {
17 | font-family: ${fontFamily};
18 | box-sizing: border-box;
19 | }
20 | `;
21 | };
22 |
23 | /** STYLES */
24 | export const SelectBoxStyled = styled.div`
25 | display: flex;
26 | width: 100%;
27 | max-width: 100%;
28 | ${base};
29 | `;
30 |
31 | SelectBoxStyled.displayName = 'SelectBoxStyled';
32 |
--------------------------------------------------------------------------------
/packages/reactackle-app/src/MainRegion/Content/Content.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import PropTypes from 'prop-types';
5 | import withExternalPropsApp from '../../withExternalPropsApp';
6 | import { ContentStyled } from './styles/ContentStyled';
7 |
8 | const propTypes = {
9 | externalProps: PropTypes.shape({
10 | fixed: PropTypes.bool,
11 | }),
12 | };
13 |
14 | const defaultProps = {
15 | externalProps: {
16 | fixed: false,
17 | },
18 | };
19 |
20 | const _Content = props =>
21 |
22 | {props.children}
23 | ;
24 |
25 | _Content.displayName = 'Content';
26 | export default withExternalPropsApp(_Content);
27 |
28 | _Content.propTypes = propTypes;
29 | _Content.defaultProps = defaultProps;
30 |
--------------------------------------------------------------------------------
/demo/routes/card/snippets/1.snippet:
--------------------------------------------------------------------------------
1 |
2 |
3 | }
9 | />
10 |
11 |
12 |
13 | Naïve Deco Sans is a sans serif handwritten font designed by
14 | Fanny Coulez and Julien Saurin. It is available in two
15 | versions: double or triple lines.…
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/demo/components/Menu/MenuGroup/MenuGroup.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | import React from 'react';
4 | import PropTypes from 'prop-types';
5 | import { TitleStyled } from './styles/TitleStyled';
6 | import { MenuGroupStyled } from './styles/MenuGroupStyled';
7 |
8 | const propTypes = {
9 | title: PropTypes.string,
10 | };
11 |
12 | const defaultProps = {
13 | title: '',
14 | };
15 |
16 | export const MenuGroup = props => {
17 | const groupTitle = props.title
18 | ? {props.title}
19 | : null;
20 |
21 | return (
22 |
23 | {groupTitle}
24 | {props.children}
25 |
26 | );
27 | };
28 |
29 | MenuGroup.propTypes = propTypes;
30 | MenuGroup.defaultProps = defaultProps;
31 | MenuGroup.displayName = 'MenuGroup';
32 |
--------------------------------------------------------------------------------
/demo/routes/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import {
3 | Content,
4 | Header,
5 | HeaderRegion,
6 | HeaderTitle,
7 | Container,
8 | Row,
9 | Column,
10 | Card,
11 | CardContent,
12 | } from 'reactackle';
13 |
14 | export const RootIndexRoute = () => (
15 |
16 |
17 |
18 |
19 | Home
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 | TODO: Write welcome page
29 |
30 |
31 |
32 |
33 |
34 |
35 | );
36 |
37 | RootIndexRoute.displayName = 'RootIndexRoute';
38 |
--------------------------------------------------------------------------------
/packages/reactackle-alert-area/src/Alert/styles/ContentStyled.js:
--------------------------------------------------------------------------------
1 | import styled, { css } from 'styled-components';
2 | import { extractThemeOrDefault, getValueString } from 'reactackle-core';
3 |
4 | const style = ({ theme: themeFromProvider }) => {
5 | const theme = extractThemeOrDefault(themeFromProvider);
6 |
7 | const {
8 | fontSize,
9 | lineHeight,
10 | paddingY,
11 | paddingX,
12 | } = theme.reactackle.components.alertsArea.item;
13 |
14 | return css`
15 | font-size: ${getValueString(fontSize)};
16 | line-height: ${lineHeight};
17 | padding: ${getValueString(paddingY)} ${getValueString(paddingX)};
18 | `;
19 | };
20 |
21 | export const ContentStyled = styled.div`
22 | flex-grow: 1;
23 | user-select: none;
24 | cursor: default;
25 | color: currentColor;
26 | ${style}
27 | `;
28 |
--------------------------------------------------------------------------------
/packages/reactackle-core/src/utils/index.js:
--------------------------------------------------------------------------------
1 | const removeQuotes = string => {
2 | let unquotedString,
3 | matchRegExp = /^"(.*)"$/;
4 | if (typeof string === 'string' || string instanceof String) {
5 | if (
6 | string.indexOf("'") > -1 // safari workaround
7 | )
8 | matchRegExp = /^'(.*)'$/;
9 | unquotedString = string.match(matchRegExp)[1].replace(/`/g, '"');
10 | }
11 |
12 | return unquotedString;
13 | };
14 |
15 | export const getSassConstants = () => {
16 | if (
17 | window.getComputedStyle &&
18 | window.getComputedStyle(document.body, '::before')
19 | ) {
20 | const style = window.getComputedStyle(document.body, '::before');
21 | if (style && style.content) return JSON.parse(removeQuotes(style.content));
22 | else return {};
23 | }
24 |
25 | return {};
26 | };
27 |
--------------------------------------------------------------------------------
/packages/reactackle-alert-area/src/Alert/styles/ActionsWrapperStyled.js:
--------------------------------------------------------------------------------
1 | import styled, { css } from 'styled-components';
2 | import { extractThemeOrDefault, getValueString } from 'reactackle-core';
3 |
4 | const style = ({ theme: themeFromProvider }) => {
5 | const theme = extractThemeOrDefault(themeFromProvider);
6 |
7 | const {
8 | itemSpacingX,
9 | itemSpacingY,
10 | } = theme.reactackle.components.alertsArea.item.actions;
11 |
12 | return css`
13 | margin: -${getValueString(itemSpacingY)} -${getValueString(itemSpacingX)};
14 |
15 | & > * {
16 | margin: ${getValueString(itemSpacingY)} ${getValueString(itemSpacingX)};
17 | }
18 | `;
19 | };
20 |
21 | export const ActionsWrapperStyled = styled.div`
22 | flex-shrink: 0;
23 | flex-grow: 1;
24 | text-align: right;
25 | ${style}
26 | `;
27 |
--------------------------------------------------------------------------------