├── .firebaserc ├── .github ├── ISSUE_TEMPLATE │ ├── bug-report.md │ └── feature-request.md ├── PULL_REQUEST_TEMPLATE.md ├── codecov.yml ├── dependabot.yml └── workflows │ ├── blui-ci.yml │ ├── blui-pr-actions.yml │ ├── combine-prs.yml │ ├── firebase-hosting-pull-request.yml │ └── tagging.yml ├── .gitignore ├── .gitmodules ├── .husky └── pre-commit ├── .prettierignore ├── CHANGELOG.md ├── CODEOWNERS ├── LICENSE ├── PUBLISHING.md ├── README.md ├── VALIDATION.md ├── components ├── .eslintrc.js ├── LICENSES.json ├── jest.config.js ├── package.json ├── src │ ├── core │ │ ├── AppBar │ │ │ ├── AppBar.test.tsx │ │ │ ├── AppBar.tsx │ │ │ ├── AppBarClasses.tsx │ │ │ └── index.ts │ │ ├── ChannelValue │ │ │ ├── ChannelValue.test.tsx │ │ │ ├── ChannelValue.tsx │ │ │ ├── ChannelValueClasses.tsx │ │ │ └── index.ts │ │ ├── Drawer │ │ │ ├── Drawer.test.tsx │ │ │ ├── Drawer.tsx │ │ │ ├── DrawerBody.tsx │ │ │ ├── DrawerBodyClasses.tsx │ │ │ ├── DrawerClasses.tsx │ │ │ ├── DrawerContext.ts │ │ │ ├── DrawerFooter │ │ │ │ ├── DrawerFooter.tsx │ │ │ │ ├── DrawerFooterClasses.tsx │ │ │ │ └── index.ts │ │ │ ├── DrawerHeader │ │ │ │ ├── DrawerHeader.tsx │ │ │ │ ├── DrawerHeaderClasses.tsx │ │ │ │ └── index.ts │ │ │ ├── DrawerNavGroup │ │ │ │ ├── DrawerNavGroup.tsx │ │ │ │ ├── DrawerNavGroupClasses.tsx │ │ │ │ └── index.ts │ │ │ ├── DrawerNavItem │ │ │ │ ├── DrawerNavItem.tsx │ │ │ │ ├── DrawerNavItemClasses.tsx │ │ │ │ └── index.ts │ │ │ ├── DrawerRailItem │ │ │ │ ├── DrawerRailItem.tsx │ │ │ │ ├── DrawerRailItemClasses.tsx │ │ │ │ └── index.ts │ │ │ ├── DrawerSubheader.tsx │ │ │ ├── NavGroupContext.ts │ │ │ ├── index.ts │ │ │ ├── types.tsx │ │ │ └── utilities.tsx │ │ ├── DrawerLayout │ │ │ ├── DrawerLayout.tsx │ │ │ ├── DrawerLayoutClasses.tsx │ │ │ ├── contexts │ │ │ │ └── DrawerLayoutContextProvider.tsx │ │ │ └── index.ts │ │ ├── EmptyState │ │ │ ├── EmptyState.test.tsx │ │ │ ├── EmptyState.tsx │ │ │ ├── EmptyStateClasses.tsx │ │ │ └── index.ts │ │ ├── Hero │ │ │ ├── Hero.test.tsx │ │ │ ├── Hero.tsx │ │ │ ├── HeroClasses.tsx │ │ │ └── index.ts │ │ ├── HeroBanner │ │ │ ├── HeroBanner.test.tsx │ │ │ ├── HeroBanner.tsx │ │ │ ├── HeroBannerClasses.tsx │ │ │ └── index.ts │ │ ├── InfoListItem │ │ │ ├── InfoListItem.test.tsx │ │ │ ├── InfoListItem.tsx │ │ │ ├── InfoListItemClasses.tsx │ │ │ ├── InfoListItemStyledComponents.tsx │ │ │ └── index.ts │ │ ├── ListItemTag │ │ │ ├── ListItemTag.test.tsx │ │ │ ├── ListItemTag.tsx │ │ │ ├── ListItemTagClasses.tsx │ │ │ └── index.ts │ │ ├── ScoreCard │ │ │ ├── ScoreCard.test.tsx │ │ │ ├── ScoreCard.tsx │ │ │ ├── ScoreCardClasses.tsx │ │ │ └── index.ts │ │ ├── ThreeLiner │ │ │ ├── ThreeLiner.test.tsx │ │ │ ├── ThreeLiner.tsx │ │ │ ├── ThreeLinerClasses.tsx │ │ │ └── index.ts │ │ ├── ToolbarMenu │ │ │ ├── ToolbarMenu.test.tsx │ │ │ ├── ToolbarMenu.tsx │ │ │ ├── ToolbarMenuClasses.tsx │ │ │ └── index.ts │ │ ├── UserMenu │ │ │ ├── UserMenu.test.tsx │ │ │ ├── UserMenu.tsx │ │ │ ├── UserMenuClasses.tsx │ │ │ └── index.ts │ │ ├── Utility │ │ │ ├── Spacer.test.tsx │ │ │ ├── Spacer.tsx │ │ │ ├── SpacerClasses.tsx │ │ │ ├── convertColorNameToHex.tsx │ │ │ └── index.ts │ │ ├── hooks │ │ │ └── usePrevious.tsx │ │ ├── index.ts │ │ └── utilities.tsx │ └── index.ts ├── tsconfig.json ├── tsconfig.lib.json ├── tsconfig.test.json └── yarn.lock ├── docs ├── .eslintrc.js ├── README.md ├── craco.config.js ├── package.json ├── public │ ├── 404.html │ ├── favicon.png │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ └── manifest.json ├── src │ ├── App.test.tsx │ ├── App.tsx │ ├── __configuration__ │ │ ├── listOfAllBluiReactPackages.ts │ │ ├── markdown.css │ │ ├── markdownMapping.tsx │ │ └── navigationMenu │ │ │ └── navigation.tsx │ ├── __types__ │ │ └── index.ts │ ├── assets │ │ ├── EatonLogoLight.png │ │ ├── circles.svg │ │ ├── component-catalog │ │ │ ├── app-bar.png │ │ │ ├── channel-value.png │ │ │ ├── drawer.png │ │ │ ├── empty-state.png │ │ │ ├── hero.png │ │ │ ├── info-list-item.png │ │ │ ├── list-item-tag.png │ │ │ ├── scorecard.png │ │ │ ├── three-liner.png │ │ │ ├── toolbar-menu.png │ │ │ └── user-menu.png │ │ ├── cubes_tile.png │ │ └── zebra-striping-table.svg │ ├── componentDocs │ │ ├── AppBar │ │ │ ├── examples │ │ │ │ ├── AppBar.tsx │ │ │ │ ├── AppBarExample.tsx │ │ │ │ ├── AppBarWithAdditionalContent.tsx │ │ │ │ ├── AppBarWithAdditionalContentExample.tsx │ │ │ │ ├── CollapsedAppBar.tsx │ │ │ │ ├── CollapsedAppBarExample.tsx │ │ │ │ ├── ExpandedAppBar.tsx │ │ │ │ ├── ExpandedAppBarExample.tsx │ │ │ │ └── index.tsx │ │ │ ├── images │ │ │ │ ├── appBar.gif │ │ │ │ ├── appBar.png │ │ │ │ ├── appBarAnatomy1.png │ │ │ │ ├── appBarAnatomy2.png │ │ │ │ ├── appBarCollapsed.png │ │ │ │ └── farm.jpg │ │ │ ├── markdown │ │ │ │ ├── AppBarAPIDocs.mdx │ │ │ │ └── AppBarExamples.mdx │ │ │ └── playground │ │ │ │ ├── PlaygroundPage.tsx │ │ │ │ └── index.tsx │ │ ├── ChannelValue │ │ │ ├── examples │ │ │ │ ├── ChannelValue.tsx │ │ │ │ ├── ChannelValueExample.tsx │ │ │ │ ├── ChannelValueUnitsSpacing.tsx │ │ │ │ ├── ChannelValueUnitsSpacingExample.tsx │ │ │ │ ├── ChannelValueWithIcon.tsx │ │ │ │ ├── ChannelValueWithIconExample.tsx │ │ │ │ ├── ChannelValueWithPrefix.tsx │ │ │ │ ├── ChannelValueWithPrefixExample.tsx │ │ │ │ └── index.tsx │ │ │ ├── images │ │ │ │ ├── channelValue.png │ │ │ │ └── channelValueAnatomy.png │ │ │ ├── markdown │ │ │ │ ├── ChannelValueAPIDocs.mdx │ │ │ │ └── ChannelValueExamples.mdx │ │ │ └── playground │ │ │ │ ├── PlaygroundPage.tsx │ │ │ │ └── index.tsx │ │ ├── Drawer │ │ │ ├── examples │ │ │ │ ├── BasicDrawer.tsx │ │ │ │ ├── BasicDrawerExample.tsx │ │ │ │ ├── ComplexDrawer.tsx │ │ │ │ ├── ComplexDrawerExample.tsx │ │ │ │ ├── PermanentDrawer.tsx │ │ │ │ ├── PermanentDrawerExample.tsx │ │ │ │ ├── PersistentDrawer.tsx │ │ │ │ ├── PersistentDrawerExample.tsx │ │ │ │ ├── RailDrawer.tsx │ │ │ │ ├── RailDrawerExample.tsx │ │ │ │ ├── TemporaryDrawer.tsx │ │ │ │ ├── TemporaryDrawerExample.tsx │ │ │ │ └── index.tsx │ │ │ ├── images │ │ │ │ ├── drawer.png │ │ │ │ └── drawerAnatomy.png │ │ │ ├── markdown │ │ │ │ ├── DrawerAPIDocs.mdx │ │ │ │ └── DrawerExamples.mdx │ │ │ └── playground │ │ │ │ ├── PlaygroundPage.tsx │ │ │ │ ├── index.tsx │ │ │ │ └── sharedPropsConfig.ts │ │ ├── DrawerBody │ │ │ ├── examples │ │ │ │ ├── BasicDrawerBody.tsx │ │ │ │ └── BasicDrawerBodyExample.tsx │ │ │ └── markdown │ │ │ │ ├── DrawerBodyAPIDocs.mdx │ │ │ │ └── DrawerBodyExamples.mdx │ │ ├── DrawerFooter │ │ │ ├── examples │ │ │ │ ├── DrawerFooter.tsx │ │ │ │ ├── DrawerFooterExample.tsx │ │ │ │ └── index.tsx │ │ │ ├── images │ │ │ │ └── EatonLogoLight.png │ │ │ ├── markdown │ │ │ │ ├── DrawerFooterAPIDocs.mdx │ │ │ │ └── DrawerFooterExamples.mdx │ │ │ └── playground │ │ │ │ ├── PlaygroundPage.tsx │ │ │ │ └── index.tsx │ │ ├── DrawerHeader │ │ │ ├── examples │ │ │ │ ├── DrawerHeader.tsx │ │ │ │ ├── DrawerHeaderExample.tsx │ │ │ │ ├── DrawerHeaderWithTitleContent.tsx │ │ │ │ ├── DrawerHeaderWithTitleContentExample.tsx │ │ │ │ └── index.tsx │ │ │ ├── images │ │ │ │ └── drawerHeaderAnatomy.png │ │ │ ├── markdown │ │ │ │ ├── DrawerHeaderAPIDocs.mdx │ │ │ │ └── DrawerHeaderExamples.mdx │ │ │ └── playground │ │ │ │ ├── PlaygroundPage.tsx │ │ │ │ └── index.tsx │ │ ├── DrawerLayout │ │ │ ├── examples │ │ │ │ ├── DrawerLayout.tsx │ │ │ │ ├── DrawerLayoutExample.tsx │ │ │ │ └── index.tsx │ │ │ ├── images │ │ │ │ └── drawerLayout.png │ │ │ └── markdown │ │ │ │ ├── DrawerLayoutAPIDocs.mdx │ │ │ │ └── DrawerLayoutExamples.mdx │ │ ├── DrawerNavGroup │ │ │ ├── examples │ │ │ │ ├── CustomNavGroupTitleContent.tsx │ │ │ │ ├── CustomNavGroupTitleContentExample.tsx │ │ │ │ ├── DrawerNavGroup.tsx │ │ │ │ ├── DrawerNavGroupComposition.tsx │ │ │ │ ├── DrawerNavGroupCompositionExample.tsx │ │ │ │ ├── DrawerNavGroupExample.tsx │ │ │ │ ├── SpacingNavGroups.tsx │ │ │ │ ├── SpacingNavGroupsExample.tsx │ │ │ │ └── index.tsx │ │ │ ├── images │ │ │ │ └── drawerNavGroupAnatomy.png │ │ │ ├── markdown │ │ │ │ ├── DrawerNavGroupAPIDocs.mdx │ │ │ │ └── DrawerNavGroupExamples.mdx │ │ │ └── playground │ │ │ │ ├── PlaygroundPage.tsx │ │ │ │ └── index.tsx │ │ ├── DrawerNavItem │ │ │ ├── examples │ │ │ │ ├── DrawerNavItem.tsx │ │ │ │ ├── DrawerNavItemExample.tsx │ │ │ │ ├── DrawerNavItemNestedItems.tsx │ │ │ │ ├── DrawerNavItemNestedItemsExample.tsx │ │ │ │ ├── DrawerNavItemSelectedItems.tsx │ │ │ │ ├── DrawerNavItemSelectedItemsExample.tsx │ │ │ │ └── index.tsx │ │ │ ├── images │ │ │ │ └── navItemAnatomy.png │ │ │ ├── markdown │ │ │ │ ├── DrawerNavItemAPIDocs.mdx │ │ │ │ ├── DrawerNavItemExamples.mdx │ │ │ │ └── index.tsx │ │ │ └── playground │ │ │ │ ├── PlaygroundPage.tsx │ │ │ │ └── index.tsx │ │ ├── DrawerRailItem │ │ │ ├── examples │ │ │ │ ├── BasicDrawerRailItem.tsx │ │ │ │ ├── BasicDrawerRailItemExample.tsx │ │ │ │ ├── CondensedDrawerRailItem.tsx │ │ │ │ ├── CondensedDrawerRailItemExample.tsx │ │ │ │ └── index.tsx │ │ │ ├── images │ │ │ │ └── railAnatomy.png │ │ │ ├── markdown │ │ │ │ ├── DrawerRailItemAPIDocs.mdx │ │ │ │ └── DrawerRailItemExamples.mdx │ │ │ └── playground │ │ │ │ ├── PlaygroundPage.tsx │ │ │ │ └── index.tsx │ │ ├── DrawerSubheader │ │ │ ├── examples │ │ │ │ ├── BasicDrawerSubheader.tsx │ │ │ │ ├── BasicDrawerSubheaderExample.tsx │ │ │ │ ├── ComplexDrawerSubheader.tsx │ │ │ │ ├── ComplexDrawerSubheaderExample.tsx │ │ │ │ └── index.tsx │ │ │ ├── markdown │ │ │ │ ├── DrawerSubheaderAPIDocs.mdx │ │ │ │ └── DrawerSubheaderExamples.mdx │ │ │ └── playground │ │ │ │ ├── PlaygroundPage.tsx │ │ │ │ └── index.tsx │ │ ├── EmptyState │ │ │ ├── examples │ │ │ │ ├── EmptyStateInCard.tsx │ │ │ │ ├── EmptyStateInCardExample.tsx │ │ │ │ ├── EmptyStateWithActions.tsx │ │ │ │ ├── EmptyStateWithActionsExample.tsx │ │ │ │ ├── EmptyStateWithContent.tsx │ │ │ │ ├── EmptyStateWithContentExample.tsx │ │ │ │ ├── EmptyStateWithDescription.tsx │ │ │ │ └── EmptyStateWithDescriptionExample.tsx │ │ │ ├── images │ │ │ │ └── emptyState.png │ │ │ ├── markdown │ │ │ │ ├── EmptyStateAPIDocs.mdx │ │ │ │ └── EmptyStateExamples.mdx │ │ │ └── playground │ │ │ │ ├── PlaygroundPage.tsx │ │ │ │ └── index.tsx │ │ ├── Hero │ │ │ ├── examples │ │ │ │ ├── HeroBanner.tsx │ │ │ │ ├── HeroBannerExample.tsx │ │ │ │ ├── HeroBannerWithIconSize.tsx │ │ │ │ ├── HeroBannerWithIconSizeExample.tsx │ │ │ │ ├── HeroWithChannelValue.tsx │ │ │ │ ├── HeroWithChannelValueExample.tsx │ │ │ │ ├── HeroWithSecondaryIcon.tsx │ │ │ │ └── HeroWithSecondaryIconExample.tsx │ │ │ ├── images │ │ │ │ ├── heroAnatomy.png │ │ │ │ ├── heroes.png │ │ │ │ └── trex.png │ │ │ ├── markdown │ │ │ │ ├── HeroAPIDocs.mdx │ │ │ │ └── HeroExamples.mdx │ │ │ └── playground │ │ │ │ ├── PlaygroundPage.tsx │ │ │ │ └── index.tsx │ │ ├── InfoListItem │ │ │ ├── examples │ │ │ │ ├── DenseInfoListItem.tsx │ │ │ │ ├── DenseInfoListItemExample.tsx │ │ │ │ ├── InfoListItemInList.tsx │ │ │ │ ├── InfoListItemInListExample.tsx │ │ │ │ ├── InfoListItemWithIcon.tsx │ │ │ │ ├── InfoListItemWithIconExample.tsx │ │ │ │ ├── InfoListItemWithRightComponent.tsx │ │ │ │ ├── InfoListItemWithRightComponentExample.tsx │ │ │ │ ├── InfoListItemWithStatusColor.tsx │ │ │ │ └── InfoListItemWithStatusColorExample.tsx │ │ │ ├── images │ │ │ │ └── infoListItem.png │ │ │ ├── markdown │ │ │ │ ├── InfoListItemAPIDocs.mdx │ │ │ │ └── InfoListItemExamples.mdx │ │ │ └── playground │ │ │ │ ├── PlaygroundPage.tsx │ │ │ │ └── index.tsx │ │ ├── ListItemTag │ │ │ ├── examples │ │ │ │ ├── ListItemTag.tsx │ │ │ │ ├── ListItemTagExample.tsx │ │ │ │ ├── ListItemTagUsingInfoListItem.tsx │ │ │ │ ├── ListItemTagUsingInfoListItemExample.tsx │ │ │ │ ├── ListItemTagWithVariants.tsx │ │ │ │ ├── ListItemTagWithVariantsExample.tsx │ │ │ │ └── index.tsx │ │ │ ├── images │ │ │ │ └── listItemTag.png │ │ │ ├── markdown │ │ │ │ ├── ListItemTagAPIDocs.mdx │ │ │ │ └── ListItemTagExamples.mdx │ │ │ └── playground │ │ │ │ ├── PlaygroundPage.tsx │ │ │ │ └── index.tsx │ │ ├── ScoreCard │ │ │ ├── examples │ │ │ │ ├── ScoreCardWithActions.tsx │ │ │ │ ├── ScoreCardWithActionsExample.tsx │ │ │ │ ├── ScoreCardWithHeaderSubtitle.tsx │ │ │ │ ├── ScoreCardWithHeaderSubtitleExample.tsx │ │ │ │ ├── ScoreCardWithHeros.tsx │ │ │ │ ├── ScoreCardWithHerosExample.tsx │ │ │ │ ├── ScoreCardWithScoreBadge.tsx │ │ │ │ └── ScoreCardWithScoreBadgeExample.tsx │ │ │ ├── images │ │ │ │ ├── scoreCard.png │ │ │ │ ├── scoreCardAnatomy.png │ │ │ │ └── scoreCard_alt.png │ │ │ ├── markdown │ │ │ │ ├── ScoreCardAPIDocs.mdx │ │ │ │ └── ScoreCardExamples.mdx │ │ │ └── playground │ │ │ │ ├── PlaygroundPage.tsx │ │ │ │ └── index.tsx │ │ ├── Spacer │ │ │ ├── examples │ │ │ │ ├── SpacerWithFlex.tsx │ │ │ │ ├── SpacerWithFlexExample.tsx │ │ │ │ ├── SpacerWithPixel.tsx │ │ │ │ └── SpacerWithPixelExample.tsx │ │ │ ├── images │ │ │ │ └── spacer.png │ │ │ └── markdown │ │ │ │ ├── SpacerAPIDocs.mdx │ │ │ │ └── SpacerExamples.mdx │ │ ├── ThreeLiner │ │ │ ├── examples │ │ │ │ ├── BasicThreeLiner.tsx │ │ │ │ ├── BasicThreeLinerExample.tsx │ │ │ │ ├── ThreeLinerWithCustomContent.tsx │ │ │ │ └── ThreeLinerWithCustomContentExample.tsx │ │ │ ├── markdown │ │ │ │ ├── ThreeLinerAPIDocs.mdx │ │ │ │ └── ThreeLinerExamples.mdx │ │ │ └── playground │ │ │ │ ├── PlaygroundPage.tsx │ │ │ │ └── index.tsx │ │ ├── ToolbarMenu │ │ │ ├── examples │ │ │ │ ├── BasicToolbarMenu.tsx │ │ │ │ ├── BasicToolbarMenuExample.tsx │ │ │ │ ├── ToolbarMenuWithIcon.tsx │ │ │ │ ├── ToolbarMenuWithIconExample.tsx │ │ │ │ ├── ToolbarMenuWithinToolbar.tsx │ │ │ │ └── ToolbarMenuWithinToolbarExample.tsx │ │ │ ├── images │ │ │ │ └── ToolbarMenuAnatomy.png │ │ │ ├── markdown │ │ │ │ ├── ToolbarMenuAPIDocs.mdx │ │ │ │ └── ToolbarMenuExamples.mdx │ │ │ └── playground │ │ │ │ ├── PlaygroundPage.tsx │ │ │ │ └── index.tsx │ │ └── UserMenu │ │ │ ├── examples │ │ │ ├── UserMenu.tsx │ │ │ ├── UserMenuAlternativeAvatarFormats.tsx │ │ │ ├── UserMenuAlternativeAvatarFormatsExample.tsx │ │ │ ├── UserMenuExample.tsx │ │ │ ├── UserMenuWithBottomSheet.tsx │ │ │ ├── UserMenuWithBottomSheetExample.tsx │ │ │ ├── UserMenuWithCustomHeader.tsx │ │ │ ├── UserMenuWithCustomHeaderExample.tsx │ │ │ ├── UserMenuWithMenuHeader.tsx │ │ │ ├── UserMenuWithMenuHeaderExample.tsx │ │ │ └── index.tsx │ │ │ ├── images │ │ │ ├── trex.png │ │ │ ├── userMenuAnatomy.png │ │ │ ├── userMenuAvatar.png │ │ │ ├── userMenuOpened.png │ │ │ └── userMenuOpenedMobile.png │ │ │ ├── markdown │ │ │ ├── UserMenuAPIDocs.mdx │ │ │ └── UserMenuExamples.mdx │ │ │ └── playground │ │ │ ├── PlaygroundPage.tsx │ │ │ └── index.tsx │ ├── contexts │ │ └── drawerContextProvider.tsx │ ├── global.d.ts │ ├── index.css │ ├── index.tsx │ ├── layout │ │ ├── Divider.tsx │ │ ├── SharedAppBar.tsx │ │ └── index.tsx │ ├── markdownDocs │ │ ├── allComponents.mdx │ │ ├── gettingStarted │ │ │ ├── environment.mdx │ │ │ ├── react.mdx │ │ │ └── reactTesting.mdx │ │ ├── index.tsx │ │ ├── themes │ │ │ ├── customization.mdx │ │ │ ├── overview.mdx │ │ │ └── usage.mdx │ │ ├── workflowDocs │ │ │ ├── AuthenticationWorkflow │ │ │ │ └── authenticationWorkflow.mdx │ │ │ ├── Components │ │ │ │ ├── BasicDialog │ │ │ │ │ └── basicDialog.mdx │ │ │ │ ├── ErrorManager │ │ │ │ │ ├── errorManager.mdx │ │ │ │ │ └── images │ │ │ │ │ │ ├── error-box.png │ │ │ │ │ │ └── error-dialog.png │ │ │ │ ├── PasswordTextField │ │ │ │ │ ├── images │ │ │ │ │ │ └── password-text-field.png │ │ │ │ │ └── passwordTextField.mdx │ │ │ │ ├── RegistrationWorkflow │ │ │ │ │ └── registrationWorkflow.mdx │ │ │ │ ├── SetPassword │ │ │ │ │ ├── images │ │ │ │ │ │ └── set-password.png │ │ │ │ │ └── setPassword.mdx │ │ │ │ ├── WorkflowCard │ │ │ │ │ ├── images │ │ │ │ │ │ └── workflow-card.png │ │ │ │ │ └── workflowCard.mdx │ │ │ │ └── components.mdx │ │ │ ├── Customization │ │ │ │ └── customization.mdx │ │ │ ├── ErrorHandling │ │ │ │ └── errorHandling.mdx │ │ │ ├── ErrorManagement │ │ │ │ └── errorManagement.mdx │ │ │ ├── Example │ │ │ │ ├── AuthUIActions.tsx │ │ │ │ ├── RegistrationUIActions.tsx │ │ │ │ ├── constants │ │ │ │ │ ├── index.ts │ │ │ │ │ └── sampleEula.ts │ │ │ │ ├── contexts │ │ │ │ │ └── AppContextProvider.tsx │ │ │ │ └── store │ │ │ │ │ └── local-storage.ts │ │ │ ├── LanguageSupport │ │ │ │ └── languageSupport.mdx │ │ │ ├── Overview │ │ │ │ └── overview.mdx │ │ │ ├── RegistrationWorkflow │ │ │ │ └── registrationWorkflow.mdx │ │ │ ├── Routing │ │ │ │ └── routing.mdx │ │ │ └── Screens │ │ │ │ ├── AccountDetails │ │ │ │ ├── accountDetails.mdx │ │ │ │ └── images │ │ │ │ │ └── account-details.png │ │ │ │ ├── ChangePassword │ │ │ │ ├── changePassword.mdx │ │ │ │ └── images │ │ │ │ │ └── change-password.png │ │ │ │ ├── Contact │ │ │ │ ├── contact.mdx │ │ │ │ └── images │ │ │ │ │ └── contact-support.png │ │ │ │ ├── CreateAccount │ │ │ │ ├── createAccount.mdx │ │ │ │ └── images │ │ │ │ │ └── create-account.png │ │ │ │ ├── CreatePassword │ │ │ │ ├── createPassword.mdx │ │ │ │ └── images │ │ │ │ │ └── create-password.png │ │ │ │ ├── Eula │ │ │ │ ├── eula.mdx │ │ │ │ └── images │ │ │ │ │ └── eula.png │ │ │ │ ├── ExistingAccountSuccess │ │ │ │ ├── existingAccountSuccess.mdx │ │ │ │ └── images │ │ │ │ │ └── existing-account-success.png │ │ │ │ ├── ForgotPassword │ │ │ │ ├── forgotPassword.mdx │ │ │ │ └── images │ │ │ │ │ └── forgot-password.png │ │ │ │ ├── Login │ │ │ │ ├── images │ │ │ │ │ └── login.png │ │ │ │ └── login.mdx │ │ │ │ ├── OktaLogin │ │ │ │ ├── images │ │ │ │ │ └── okta-login.png │ │ │ │ └── oktaLogin.mdx │ │ │ │ ├── RegistrationSuccess │ │ │ │ ├── images │ │ │ │ │ └── registration-success.png │ │ │ │ └── registrationSuccess.mdx │ │ │ │ ├── ResetPassword │ │ │ │ ├── images │ │ │ │ │ └── reset-password.png │ │ │ │ └── resetPassword.mdx │ │ │ │ ├── Success │ │ │ │ ├── images │ │ │ │ │ └── success.png │ │ │ │ └── success.mdx │ │ │ │ ├── VerifyCode │ │ │ │ ├── images │ │ │ │ │ └── verify-email.png │ │ │ │ └── verifyCode.mdx │ │ │ │ └── screens.mdx │ │ └── workflows │ │ │ └── user-auth.mdx │ ├── pages │ │ ├── ComponentCatalogGrids.tsx │ │ ├── ComponentCatalogLinks.ts │ │ ├── HomePage.tsx │ │ ├── MarkdownPage.tsx │ │ ├── PageContent.tsx │ │ ├── componentPreviewPage.tsx │ │ └── index.tsx │ ├── react-app-env.d.ts │ ├── redux │ │ ├── appState.tsx │ │ ├── hooks.ts │ │ └── store.tsx │ ├── reportWebVitals.ts │ ├── router │ │ ├── GoogleAnalyticsWrapper.tsx │ │ ├── ScrollToTop.tsx │ │ ├── drawer.tsx │ │ └── main.tsx │ ├── setupTests.ts │ └── shared │ │ ├── CallToActionButton.tsx │ │ ├── CodeBlock.tsx │ │ ├── CodeBlockActionButtonRow.tsx │ │ ├── ComponentPreviewTabs.tsx │ │ ├── CopyToClipboardButton.tsx │ │ ├── ExampleShowcase.tsx │ │ ├── FullCodeOnGithubButton.tsx │ │ ├── Logo.tsx │ │ ├── TabPanel.tsx │ │ ├── components │ │ └── InfoCard │ │ │ ├── InfoCard.tsx │ │ │ └── index.tsx │ │ ├── constants.ts │ │ ├── images │ │ ├── farm.jpg │ │ └── topology_40.png │ │ ├── index.tsx │ │ ├── markdown │ │ ├── ForMoreDetailsOnStylingOptions.tsx │ │ ├── SharedProps.mdx │ │ ├── StyleOverridesGuide.md │ │ └── index.tsx │ │ ├── theme │ │ ├── ThemeExplorer.tsx │ │ ├── componentList.tsx │ │ ├── demos │ │ │ ├── AppBarDemo.tsx │ │ │ ├── BottomNavigationDemo.tsx │ │ │ ├── ButtonDemo.tsx │ │ │ ├── ChipDemo.tsx │ │ │ ├── DialogDemo.tsx │ │ │ ├── EmptyStateDemo.tsx │ │ │ ├── ListDemo.tsx │ │ │ ├── ScoreCardDemo.tsx │ │ │ ├── SnackbarDemo.tsx │ │ │ ├── SwitchDemo.tsx │ │ │ └── TextFieldDemo.tsx │ │ └── index.ts │ │ └── utilities.tsx ├── tsconfig.json └── yarn.lock ├── firebase.json ├── package.json ├── scripts ├── buildComponents.sh ├── buildTest.sh ├── initializeSubmodule.sh └── linkComponents.sh └── yarn.lock /.firebaserc: -------------------------------------------------------------------------------- 1 | { 2 | "projects": { 3 | "default": "blui-react-docs" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug-report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug Report 3 | about: Report a bug with a Brightlayer UI resource 4 | title: '' 5 | labels: 'bug, needs-review, brightlayer-ui' 6 | assignees: '' 7 | --- 8 | 9 | #### Describe the bug / expected behavior 10 | 11 | #### What are the steps to reproduce? 12 | 13 | 1. Go to... 14 | 2. Click on... 15 | 16 | #### Screenshots / Screen recording 17 | 18 | #### Code snippet / Link to minimum reproduction example 19 | 20 | 21 | 22 | ``` 23 | CODE HERE 24 | ``` 25 | 26 | #### Your environment information 27 | 28 | 29 | 30 | #### Suggested fix 31 | 32 | 33 | 34 | #### Anything else to add? 35 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature-request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature Request 3 | about: Suggest an idea for this resource 4 | title: '' 5 | labels: 'enhancement, needs-review, brightlayer-ui' 6 | assignees: '' 7 | --- 8 | 9 | #### Describe the desired feature/functionality 10 | 11 | #### Additional Context (where / how would this be used) 12 | 13 | #### Is this request related to a current issue? 14 | 15 | #### Suggested implementation details 16 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | Fixes # . 4 | 5 | 6 | 7 | #### Changes proposed in this Pull Request: 8 | 9 | - 10 | - 11 | - 12 | 13 | 14 | 15 | #### Screenshots / Screen Recording (if applicable) 16 | 17 | - 18 | 19 | 20 | 21 | #### To Test: 22 | 23 | - 24 | 25 | 26 | 27 | #### Any specific feedback you are looking for? 28 | 29 | - 30 | -------------------------------------------------------------------------------- /.github/codecov.yml: -------------------------------------------------------------------------------- 1 | coverage: 2 | status: 3 | project: 4 | default: 5 | target: 80% 6 | threshold: 5% 7 | informational: false 8 | patch: 9 | default: 10 | target: 80% 11 | threshold: 5% 12 | informational: true -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | - package-ecosystem: "npm" 4 | directory: "/" 5 | schedule: 6 | interval: "monthly" 7 | day: "wednesday" 8 | open-pull-requests-limit: 1 9 | target-branch: "dev" 10 | labels: 11 | - 'external-dependency' 12 | 13 | - package-ecosystem: "npm" 14 | directory: "/components" 15 | schedule: 16 | interval: "monthly" 17 | day: "wednesday" 18 | open-pull-requests-limit: 1 19 | target-branch: "dev" 20 | labels: 21 | - 'external-dependency' 22 | 23 | - package-ecosystem: "npm" 24 | directory: "/docs" 25 | schedule: 26 | interval: "monthly" 27 | day: "wednesday" 28 | open-pull-requests-limit: 1 29 | target-branch: "dev" 30 | labels: 31 | - 'external-dependency' -------------------------------------------------------------------------------- /.github/workflows/blui-pr-actions.yml: -------------------------------------------------------------------------------- 1 | name: blui-pr-actions 2 | on: 3 | pull_request_target: 4 | types: 5 | - opened 6 | 7 | permissions: 8 | pull-requests: write 9 | contents: read 10 | 11 | jobs: 12 | pr-labels: 13 | uses: etn-ccis/blui-automation/.github/workflows/blui-labels.yml@dev 14 | secrets: inherit 15 | 16 | pr-comment: 17 | uses: etn-ccis/blui-automation/.github/workflows/blui-comment.yml@dev 18 | secrets: inherit -------------------------------------------------------------------------------- /.github/workflows/firebase-hosting-pull-request.yml: -------------------------------------------------------------------------------- 1 | # This file was auto-generated by the Firebase CLI 2 | # https://github.com/firebase/firebase-tools 3 | 4 | name: Deploy to Firebase Hosting on PR 5 | on: pull_request 6 | permissions: 7 | checks: write 8 | contents: read 9 | pull-requests: write 10 | jobs: 11 | build_and_preview: 12 | if: ${{ github.event.pull_request.head.repo.full_name == github.repository }} 13 | runs-on: ubuntu-latest 14 | steps: 15 | - uses: actions/checkout@v4 16 | - run: cd components && yarn && cd ../docs && yarn && cd .. && yarn link:components && cd docs && yarn build 17 | - uses: FirebaseExtended/action-hosting-deploy@v0 18 | with: 19 | repoToken: ${{ secrets.GITHUB_TOKEN }} 20 | firebaseServiceAccount: ${{ secrets.FIREBASE_SERVICE_ACCOUNT_BLUI_REACT_DOCS }} 21 | expires: 2d 22 | projectId: blui-react-docs 23 | -------------------------------------------------------------------------------- /.github/workflows/tagging.yml: -------------------------------------------------------------------------------- 1 | name: Tagging 2 | 3 | env: 4 | GH_TOKEN: ${{ github.token }} 5 | CURRENT_BRANCH: ${{ github.ref_name }} 6 | 7 | on: 8 | push: 9 | branches: 10 | - master 11 | 12 | jobs: 13 | tag-package: 14 | runs-on: ubuntu-latest 15 | steps: 16 | - uses: actions/checkout@v2 17 | - run: yarn install --immutable 18 | - run: yarn build 19 | - run: yarn tag:package -b ${CURRENT_BRANCH} 20 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | node_modules 5 | package-lock.json 6 | 7 | # production 8 | dist 9 | docs/build 10 | 11 | # testing 12 | /components/coverage 13 | 14 | # misc 15 | .vscode/ 16 | .idea/ 17 | npm-debug.log* 18 | yarn-debug.log* 19 | yarn-error.log* 20 | **/**/.DS_Store 21 | 22 | # caches 23 | .awcache -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "demos/showcase"] 2 | path = demos/showcase 3 | url = https://github.com/etn-ccis/blui-react-showcase-demo 4 | branch = dev 5 | -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | yarn initialize && yarn install:dependencies && yarn prettier:check && yarn lint && cd components && yarn test --coverage && cd .. -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | **/**/dist/* 2 | dist/ -------------------------------------------------------------------------------- /CODEOWNERS: -------------------------------------------------------------------------------- 1 | * @JeffGreiner-eaton @ektaghag-eaton @surajeaton -------------------------------------------------------------------------------- /components/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | parser: '@typescript-eslint/parser', 3 | plugins: ["jest-dom", "testing-library"], 4 | extends: ['@brightlayer-ui/eslint-config/tsx', 'plugin:react-hooks/recommended'], 5 | parserOptions: { 6 | project: './tsconfig.json', 7 | }, 8 | env: { 9 | browser: true, 10 | jest: true, 11 | }, 12 | rules: { 13 | '@typescript-eslint/no-empty-function': 'off', 14 | "@typescript-eslint/no-unused-vars": ["error", { "ignoreRestSiblings": true }], 15 | 'no-empty-function': 'off', 16 | '@typescript-eslint/naming-convention': [ 17 | 'error', 18 | { 19 | selector: [ 20 | 'classProperty', 21 | 'objectLiteralProperty', 22 | 'typeProperty', 23 | 'classMethod', 24 | 'objectLiteralMethod', 25 | 'typeMethod', 26 | 'accessor', 27 | 'enumMember', 28 | ], 29 | format: null, 30 | modifiers: ['requiresQuotes'], 31 | }, 32 | ], 33 | }, 34 | }; -------------------------------------------------------------------------------- /components/LICENSES.json: -------------------------------------------------------------------------------- 1 | { 2 | "@emotion/css@11.13.5": { 3 | "licenses": "MIT", 4 | "repository": "https://github.com/emotion-js/emotion/tree/main/packages/css", 5 | "licenseUrl": "https://github.com/emotion-js/emotion/tree/main/packages/css/raw/master/LICENSE", 6 | "parents": "@brightlayer-ui/react-components" 7 | }, 8 | "@seznam/compose-react-refs@1.0.6": { 9 | "licenses": "ISC", 10 | "repository": "https://github.com/seznam/compose-react-refs", 11 | "licenseUrl": "https://github.com/seznam/compose-react-refs/raw/master/LICENSE", 12 | "parents": "@brightlayer-ui/react-components" 13 | }, 14 | "color@4.2.3": { 15 | "licenses": "MIT", 16 | "repository": "https://github.com/Qix-/color", 17 | "licenseUrl": "https://github.com/Qix-/color/raw/master/LICENSE", 18 | "parents": "@brightlayer-ui/react-components" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /components/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | preset: 'ts-jest', 3 | testEnvironment: 'jest-environment-jsdom', 4 | transform: { 5 | '^.+\\.tsx?$': 'ts-jest', 6 | }, 7 | collectCoverageFrom: ['./src/**/*.tsx'], 8 | coverageThreshold: { 9 | "global": { 10 | "lines": 86 11 | } 12 | } 13 | }; 14 | -------------------------------------------------------------------------------- /components/src/core/AppBar/AppBarClasses.tsx: -------------------------------------------------------------------------------- 1 | import generateUtilityClass from '@mui/material/generateUtilityClass'; 2 | import generateUtilityClasses from '@mui/material/generateUtilityClasses'; 3 | 4 | export type AppBarClasses = { 5 | root?: string; 6 | background?: string; 7 | expanded?: string; 8 | collapsed?: string; 9 | expandedBackground?: string; 10 | }; 11 | 12 | export type AppBarClassKey = keyof AppBarClasses; 13 | 14 | export function getAppBarUtilityClass(slot: string): string { 15 | return generateUtilityClass('BluiAppBar', slot); 16 | } 17 | 18 | const appBarClasses: AppBarClasses = generateUtilityClasses('BluiAppBar', [ 19 | 'root', 20 | 'background', 21 | 'expanded', 22 | 'collapsed', 23 | 'expandedBackground', 24 | ]); 25 | 26 | export default appBarClasses; 27 | -------------------------------------------------------------------------------- /components/src/core/AppBar/index.ts: -------------------------------------------------------------------------------- 1 | export * from './AppBar'; 2 | export { AppBarClasses } from './AppBarClasses'; 3 | -------------------------------------------------------------------------------- /components/src/core/ChannelValue/ChannelValueClasses.tsx: -------------------------------------------------------------------------------- 1 | import generateUtilityClass from '@mui/material/generateUtilityClass'; 2 | import generateUtilityClasses from '@mui/material/generateUtilityClasses'; 3 | 4 | export type ChannelValueClasses = { 5 | /** Styles applied to the root element. */ 6 | root?: string; 7 | /** Styles applied to the icon element. */ 8 | icon?: string; 9 | /** Styles applied to the text element. */ 10 | text?: string; 11 | /** Styles applied to the units element. */ 12 | units?: string; 13 | /** Styles applied to the value element. */ 14 | value?: string; 15 | }; 16 | 17 | export type ChannelValueClassKey = keyof ChannelValueClasses; 18 | 19 | export function getChannelValueUtilityClass(slot: string): string { 20 | return generateUtilityClass('BluiChannelValue', slot); 21 | } 22 | 23 | const channelValueClasses: ChannelValueClasses = generateUtilityClasses('BluiChannelValue', [ 24 | 'root', 25 | 'icon', 26 | 'text', 27 | 'units', 28 | 'value', 29 | ]); 30 | 31 | export default channelValueClasses; 32 | -------------------------------------------------------------------------------- /components/src/core/ChannelValue/index.ts: -------------------------------------------------------------------------------- 1 | export * from './ChannelValue'; 2 | -------------------------------------------------------------------------------- /components/src/core/Drawer/DrawerBodyClasses.tsx: -------------------------------------------------------------------------------- 1 | import generateUtilityClass from '@mui/material/generateUtilityClass'; 2 | import generateUtilityClasses from '@mui/material/generateUtilityClasses'; 3 | 4 | export type DrawerBodyClasses = { 5 | root?: string; 6 | }; 7 | 8 | export type DrawerBodyClassKey = keyof DrawerBodyClasses; 9 | 10 | export function getDrawerBodyUtilityClass(slot: string): string { 11 | return generateUtilityClass('BluiDrawerBody', slot); 12 | } 13 | 14 | const drawerBodyClasses: DrawerBodyClasses = generateUtilityClasses('BluiDrawerBody', ['root']); 15 | 16 | export default drawerBodyClasses; 17 | -------------------------------------------------------------------------------- /components/src/core/Drawer/DrawerClasses.tsx: -------------------------------------------------------------------------------- 1 | import generateUtilityClass from '@mui/material/generateUtilityClass'; 2 | import generateUtilityClasses from '@mui/material/generateUtilityClasses'; 3 | 4 | export type DrawerClasses = { 5 | /** Styles applied to the drawer content container */ 6 | content?: string; 7 | 8 | /** Styles applied to the root element when the drawer is expanded */ 9 | expanded?: string; 10 | 11 | /** MUI Drawer style override for the root element */ 12 | root?: string; 13 | 14 | /** MUI Drawer style override for desktop viewports */ 15 | paper?: string; 16 | 17 | /** Styles to apply to the root element when using side border */ 18 | sideBorder?: string; 19 | }; 20 | 21 | export type DrawerClassKey = keyof DrawerClasses; 22 | 23 | export function getDrawerUtilityClass(slot: string): string { 24 | return generateUtilityClass('BluiDrawer', slot); 25 | } 26 | 27 | const drawerClasses: DrawerClasses = generateUtilityClasses('BluiDrawer', [ 28 | 'root', 29 | 'content', 30 | 'expanded', 31 | 'paper', 32 | 'sideBorder', 33 | ]); 34 | 35 | export default drawerClasses; 36 | -------------------------------------------------------------------------------- /components/src/core/Drawer/DrawerContext.ts: -------------------------------------------------------------------------------- 1 | import { createContext, useContext } from 'react'; 2 | import { DrawerVariant } from './types'; 3 | 4 | type DrawerContextType = { 5 | open?: boolean; 6 | variant?: DrawerVariant; 7 | condensed?: boolean; 8 | activeItem?: string; 9 | onItemSelect?: (id: string) => void; 10 | width?: number | string; 11 | }; 12 | 13 | export const DrawerContext = createContext({ 14 | open: true, 15 | variant: 'persistent', 16 | condensed: false, 17 | }); 18 | 19 | export const useDrawerContext = (): DrawerContextType => useContext(DrawerContext); 20 | -------------------------------------------------------------------------------- /components/src/core/Drawer/DrawerFooter/DrawerFooterClasses.tsx: -------------------------------------------------------------------------------- 1 | import generateUtilityClass from '@mui/material/generateUtilityClass'; 2 | import generateUtilityClasses from '@mui/material/generateUtilityClasses'; 3 | 4 | export type DrawerFooterClasses = { 5 | /** Styles applied to the root element. */ 6 | root?: string; 7 | /** Styles applied to the hidden element. */ 8 | hidden?: string; 9 | }; 10 | 11 | export type DrawerFooterClassKey = keyof DrawerFooterClasses; 12 | 13 | export function getDrawerFooterUtilityClass(slot: string): string { 14 | return generateUtilityClass('BluiDrawerFooter', slot); 15 | } 16 | 17 | const drawerFooterClasses: DrawerFooterClasses = generateUtilityClasses('BluiDrawerFooter', ['root', 'hidden']); 18 | 19 | export default drawerFooterClasses; 20 | -------------------------------------------------------------------------------- /components/src/core/Drawer/DrawerFooter/index.ts: -------------------------------------------------------------------------------- 1 | export * from './DrawerFooter'; 2 | -------------------------------------------------------------------------------- /components/src/core/Drawer/DrawerHeader/DrawerHeaderClasses.tsx: -------------------------------------------------------------------------------- 1 | import generateUtilityClass from '@mui/material/generateUtilityClass'; 2 | import generateUtilityClasses from '@mui/material/generateUtilityClasses'; 3 | 4 | export type DrawerHeaderClasses = { 5 | root?: string; 6 | background?: string; 7 | content?: string; 8 | navigation?: string; 9 | nonClickable?: string; 10 | nonClickableIcon?: string; 11 | railIcon?: string; 12 | subtitle?: string; 13 | title?: string; 14 | }; 15 | 16 | export type DrawerHeaderClassKey = keyof DrawerHeaderClasses; 17 | 18 | export function getDrawerHeaderUtilityClass(slot: string): string { 19 | return generateUtilityClass('BluiDrawerHeader', slot); 20 | } 21 | 22 | const drawerHeaderClasses: DrawerHeaderClasses = generateUtilityClasses('BluiDrawerHeader', [ 23 | 'root', 24 | 'background', 25 | 'content', 26 | 'navigation', 27 | 'nonClickable', 28 | 'nonClickableIcon', 29 | 'railIcon', 30 | 'subtitle', 31 | 'title', 32 | ]); 33 | 34 | export default drawerHeaderClasses; 35 | -------------------------------------------------------------------------------- /components/src/core/Drawer/DrawerHeader/index.ts: -------------------------------------------------------------------------------- 1 | export * from './DrawerHeader'; 2 | -------------------------------------------------------------------------------- /components/src/core/Drawer/DrawerNavGroup/DrawerNavGroupClasses.tsx: -------------------------------------------------------------------------------- 1 | import generateUtilityClass from '@mui/material/generateUtilityClass'; 2 | import generateUtilityClasses from '@mui/material/generateUtilityClasses'; 3 | 4 | export type DrawerNavGroupClasses = { 5 | root?: string; 6 | subheader?: string; 7 | title?: string; 8 | }; 9 | 10 | export type DrawerNavGroupClassKey = keyof DrawerNavGroupClasses; 11 | 12 | export function getDrawerNavGroupUtilityClass(slot: string): string { 13 | return generateUtilityClass('BluiDrawerNavGroup', slot); 14 | } 15 | 16 | const drawerNavGroupClasses: DrawerNavGroupClasses = generateUtilityClasses('BluiDrawerNavGroup', [ 17 | 'root', 18 | 'subheader', 19 | 'title', 20 | ]); 21 | 22 | export default drawerNavGroupClasses; 23 | -------------------------------------------------------------------------------- /components/src/core/Drawer/DrawerNavGroup/index.ts: -------------------------------------------------------------------------------- 1 | export * from './DrawerNavGroup'; 2 | -------------------------------------------------------------------------------- /components/src/core/Drawer/DrawerNavItem/DrawerNavItemClasses.tsx: -------------------------------------------------------------------------------- 1 | import generateUtilityClass from '@mui/material/generateUtilityClass'; 2 | import generateUtilityClasses from '@mui/material/generateUtilityClasses'; 3 | 4 | export type DrawerNavItemClasses = { 5 | root?: string; 6 | active?: string; 7 | chevron?: string; 8 | expandIcon?: string; 9 | infoListItemRoot?: string; 10 | nestedListGroup?: string; 11 | nestedTitle?: string; 12 | title?: string; 13 | titleActive?: string; 14 | ripple?: string; 15 | }; 16 | 17 | export type DrawerNavItemClassKey = keyof DrawerNavItemClasses; 18 | 19 | export function getDrawerNavItemUtilityClass(slot: string): string { 20 | return generateUtilityClass('BluiDrawerNavItem', slot); 21 | } 22 | 23 | const drawerNavItemClasses: DrawerNavItemClasses = generateUtilityClasses('BluiDrawerNavItem', [ 24 | 'root', 25 | 'active', 26 | 'chevron', 27 | 'expandIcon', 28 | 'infoListItemRoot', 29 | 'nestedListGroup', 30 | 'nestedTitle', 31 | 'title', 32 | 'titleActive', 33 | 'ripple', 34 | ]); 35 | 36 | export default drawerNavItemClasses; 37 | -------------------------------------------------------------------------------- /components/src/core/Drawer/DrawerNavItem/index.ts: -------------------------------------------------------------------------------- 1 | export * from './DrawerNavItem'; 2 | -------------------------------------------------------------------------------- /components/src/core/Drawer/DrawerRailItem/DrawerRailItemClasses.tsx: -------------------------------------------------------------------------------- 1 | import generateUtilityClass from '@mui/material/generateUtilityClass'; 2 | import generateUtilityClasses from '@mui/material/generateUtilityClasses'; 3 | 4 | export type DrawerRailItemClasses = { 5 | root?: string; 6 | active?: string; 7 | condensed?: string; 8 | divider?: string; 9 | icon?: string; 10 | statusStripe?: string; 11 | title?: string; 12 | titleActive?: string; 13 | ripple?: string; 14 | cursorPointer?: string; 15 | itemActive?: string; 16 | }; 17 | 18 | export type DrawerRailItemClassKey = keyof DrawerRailItemClasses; 19 | 20 | export function getDrawerRailItemUtilityClass(slot: string): string { 21 | return generateUtilityClass('BluiDrawerRailItem', slot); 22 | } 23 | 24 | const drawerRailItemClasses: DrawerRailItemClasses = generateUtilityClasses('BluiDrawerRailItem', [ 25 | 'root', 26 | 'active', 27 | 'condensed', 28 | 'divider', 29 | 'icon', 30 | 'statusStripe', 31 | 'title', 32 | 'titleActive', 33 | 'ripple', 34 | 'cursorPointer', 35 | 'itemActive', 36 | ]); 37 | 38 | export default drawerRailItemClasses; 39 | -------------------------------------------------------------------------------- /components/src/core/Drawer/DrawerRailItem/index.ts: -------------------------------------------------------------------------------- 1 | export * from './DrawerRailItem'; 2 | -------------------------------------------------------------------------------- /components/src/core/Drawer/NavGroupContext.ts: -------------------------------------------------------------------------------- 1 | import { createContext, useContext } from 'react'; 2 | 3 | type NavGroupContextType = { 4 | activeHierarchy: string[]; 5 | }; 6 | 7 | export const NavGroupContext = createContext({ 8 | activeHierarchy: [], 9 | }); 10 | 11 | export const useNavGroupContext = (): NavGroupContextType => useContext(NavGroupContext); 12 | -------------------------------------------------------------------------------- /components/src/core/Drawer/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Drawer'; 2 | export * from './DrawerContext'; 3 | export * from './DrawerHeader'; 4 | export * from './DrawerSubheader'; 5 | export * from './DrawerBody'; 6 | export * from './DrawerFooter'; 7 | export * from './DrawerNavGroup'; 8 | export * from './DrawerNavItem'; 9 | export * from './DrawerRailItem'; 10 | export * from './types'; 11 | -------------------------------------------------------------------------------- /components/src/core/Drawer/utilities.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactNode } from 'react'; 2 | 3 | // Use the child prop if it exists, or inherit from the parent prop 4 | export const mergeStyleProp = (parentValue: T, childValue: T): T | undefined => 5 | childValue !== undefined ? childValue : parentValue; 6 | 7 | export const findChildByType = (children: ReactNode, type: string[]): JSX.Element[] => 8 | React.Children.map(children, (child: any) => { 9 | if (child && child.type) { 10 | const name = child.type.displayName; 11 | if (name && type.includes(name)) { 12 | return child; 13 | } 14 | } 15 | }) || []; 16 | -------------------------------------------------------------------------------- /components/src/core/DrawerLayout/DrawerLayoutClasses.tsx: -------------------------------------------------------------------------------- 1 | import generateUtilityClass from '@mui/material/generateUtilityClass'; 2 | import generateUtilityClasses from '@mui/material/generateUtilityClasses'; 3 | 4 | export type DrawerLayoutClasses = { 5 | /** Styles applied to the root element */ 6 | root?: string; 7 | /** Styles applied to the body content container */ 8 | content?: string; 9 | /** Styles applied to the drawer container */ 10 | drawer?: string; 11 | /** Styles applied to the body root element when the drawer is expanded */ 12 | expanded?: string; 13 | }; 14 | 15 | export type DrawerLayoutClassKey = keyof DrawerLayoutClasses; 16 | 17 | export function getDrawerLayoutUtilityClass(slot: string): string { 18 | return generateUtilityClass('BluiDrawerLayout', slot); 19 | } 20 | 21 | const drawerLayoutClasses: DrawerLayoutClasses = generateUtilityClasses('BluiDrawerLayout', [ 22 | 'root', 23 | 'content', 24 | 'drawer', 25 | 'expanded', 26 | ]); 27 | 28 | export default drawerLayoutClasses; 29 | -------------------------------------------------------------------------------- /components/src/core/DrawerLayout/contexts/DrawerLayoutContextProvider.tsx: -------------------------------------------------------------------------------- 1 | import { createContext, useContext } from 'react'; 2 | 3 | type DrawerLayoutContextType = { 4 | setPadding: (padding: number | string) => void; 5 | setDrawerOpen: (open: boolean) => void; 6 | }; 7 | 8 | export const DrawerLayoutContext = createContext({ 9 | /* eslint-disable @typescript-eslint/no-unused-vars */ 10 | setPadding: (padding: number | string) => null, 11 | setDrawerOpen: (open: boolean) => false, 12 | /* eslint-enable @typescript-eslint/no-unused-vars */ 13 | }); 14 | 15 | export const useDrawerLayout = (): DrawerLayoutContextType => { 16 | const context = useContext(DrawerLayoutContext); 17 | return context; 18 | }; 19 | -------------------------------------------------------------------------------- /components/src/core/DrawerLayout/index.ts: -------------------------------------------------------------------------------- 1 | export * from './DrawerLayout'; 2 | -------------------------------------------------------------------------------- /components/src/core/EmptyState/EmptyStateClasses.tsx: -------------------------------------------------------------------------------- 1 | import generateUtilityClass from '@mui/material/generateUtilityClass'; 2 | import generateUtilityClasses from '@mui/material/generateUtilityClasses'; 3 | 4 | export type EmptyStateClasses = { 5 | root?: string; 6 | actions?: string; 7 | description?: string; 8 | icon?: string; 9 | title?: string; 10 | }; 11 | 12 | export type EmptyStateClassKey = keyof EmptyStateClasses; 13 | 14 | export function getEmptyStateUtilityClass(slot: string): string { 15 | return generateUtilityClass('BluiEmptyState', slot); 16 | } 17 | 18 | const emptyStateClasses: EmptyStateClasses = generateUtilityClasses('BluiEmptyState', [ 19 | 'root', 20 | 'actions', 21 | 'description', 22 | 'icon', 23 | 'title', 24 | ]); 25 | 26 | export default emptyStateClasses; 27 | -------------------------------------------------------------------------------- /components/src/core/EmptyState/index.ts: -------------------------------------------------------------------------------- 1 | export * from './EmptyState'; 2 | -------------------------------------------------------------------------------- /components/src/core/Hero/HeroClasses.tsx: -------------------------------------------------------------------------------- 1 | import generateUtilityClass from '@mui/material/generateUtilityClass'; 2 | import generateUtilityClasses from '@mui/material/generateUtilityClasses'; 3 | 4 | export type HeroClasses = { 5 | root?: string; 6 | icon?: string; 7 | label?: string; 8 | values?: string; 9 | }; 10 | 11 | export type HeroClassKey = keyof HeroClasses; 12 | 13 | export function getHeroUtilityClass(slot: string): string { 14 | return generateUtilityClass('BluiHero', slot); 15 | } 16 | 17 | const heroClasses: HeroClasses = generateUtilityClasses('BluiHero', ['root', 'icon', 'label', 'values']); 18 | 19 | export default heroClasses; 20 | -------------------------------------------------------------------------------- /components/src/core/Hero/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Hero'; 2 | -------------------------------------------------------------------------------- /components/src/core/HeroBanner/HeroBannerClasses.tsx: -------------------------------------------------------------------------------- 1 | import generateUtilityClass from '@mui/material/generateUtilityClass'; 2 | 3 | export type HeroBannerClasses = { 4 | root?: string; 5 | }; 6 | 7 | export type HeroBannerClassKey = keyof HeroBannerClasses; 8 | 9 | export function getHeroBannerUtilityClass(slot: string): string { 10 | return generateUtilityClass('BluiHeroBanner', slot); 11 | } 12 | -------------------------------------------------------------------------------- /components/src/core/HeroBanner/index.ts: -------------------------------------------------------------------------------- 1 | export * from './HeroBanner'; 2 | -------------------------------------------------------------------------------- /components/src/core/InfoListItem/InfoListItemClasses.tsx: -------------------------------------------------------------------------------- 1 | import generateUtilityClass from '@mui/material/generateUtilityClass'; 2 | 3 | export type InfoListItemClasses = { 4 | root?: string; 5 | avatar?: string; 6 | divider?: string; 7 | icon?: string; 8 | info?: string; 9 | listItemText?: string; 10 | listItemButtonRoot?: string; 11 | rightComponent?: string; 12 | separator?: string; 13 | statusStripe?: string; 14 | subtitle?: string; 15 | title?: string; 16 | chevron?: string; 17 | }; 18 | 19 | export type InfoListItemClassKey = keyof InfoListItemClasses; 20 | 21 | export function getInfoListItemUtilityClass(slot: string): string { 22 | return generateUtilityClass('BluiInfoListItem', slot); 23 | } 24 | -------------------------------------------------------------------------------- /components/src/core/InfoListItem/index.ts: -------------------------------------------------------------------------------- 1 | export * from './InfoListItem'; 2 | -------------------------------------------------------------------------------- /components/src/core/ListItemTag/ListItemTagClasses.tsx: -------------------------------------------------------------------------------- 1 | import generateUtilityClass from '@mui/material/generateUtilityClass'; 2 | import generateUtilityClasses from '@mui/material/generateUtilityClasses'; 3 | 4 | export type ListItemTagClasses = { 5 | /** Styles applied to the root element. */ 6 | root?: string; 7 | /** Styles applied to the root element if there is no variant. */ 8 | noVariant?: string; 9 | }; 10 | 11 | export type ListItemTagClassKey = keyof ListItemTagClasses; 12 | 13 | export function getListItemTagUtilityClass(slot: string): string { 14 | return generateUtilityClass('BluiListItemTag', slot); 15 | } 16 | 17 | const listItemTagClasses: ListItemTagClasses = generateUtilityClasses('BluiListItemTag', ['root', 'noVariant']); 18 | 19 | export default listItemTagClasses; 20 | -------------------------------------------------------------------------------- /components/src/core/ListItemTag/index.ts: -------------------------------------------------------------------------------- 1 | export * from './ListItemTag'; 2 | -------------------------------------------------------------------------------- /components/src/core/ScoreCard/index.ts: -------------------------------------------------------------------------------- 1 | export * from './ScoreCard'; 2 | -------------------------------------------------------------------------------- /components/src/core/ThreeLiner/ThreeLinerClasses.tsx: -------------------------------------------------------------------------------- 1 | import generateUtilityClass from '@mui/material/generateUtilityClass'; 2 | import generateUtilityClasses from '@mui/material/generateUtilityClasses'; 3 | 4 | export type ThreeLinerClasses = { 5 | /** Styles applied to the root element. */ 6 | root?: string; 7 | /** First Line Content */ 8 | title?: string; 9 | 10 | /** Second Line Content */ 11 | subtitle?: string; 12 | 13 | /** Third Line Content */ 14 | info?: string; 15 | }; 16 | 17 | export type ThreeLinerClassKey = keyof ThreeLinerClasses; 18 | 19 | export function getThreeLinerUtilityClass(slot: string): string { 20 | return generateUtilityClass('BluiThreeLiner', slot); 21 | } 22 | 23 | const threeLinerClasses: ThreeLinerClasses = generateUtilityClasses('BluiThreeLiner', [ 24 | 'root', 25 | 'title', 26 | 'subtitle', 27 | 'info', 28 | ]); 29 | 30 | export default threeLinerClasses; 31 | -------------------------------------------------------------------------------- /components/src/core/ThreeLiner/index.ts: -------------------------------------------------------------------------------- 1 | export * from './ThreeLiner'; 2 | -------------------------------------------------------------------------------- /components/src/core/ToolbarMenu/ToolbarMenuClasses.tsx: -------------------------------------------------------------------------------- 1 | import generateUtilityClass from '@mui/material/generateUtilityClass'; 2 | import generateUtilityClasses from '@mui/material/generateUtilityClasses'; 3 | 4 | export type ToolbarMenuClasses = { 5 | root?: string; 6 | dropdownArrow?: string; 7 | icon?: string; 8 | label?: string; 9 | cursorPointer?: string; 10 | navGroups?: string; 11 | rotatedDropdownArrow?: string; 12 | }; 13 | 14 | export type ToolbarMenuClassKey = keyof ToolbarMenuClasses; 15 | 16 | export function getToolbarMenuUtilityClass(slot: string): string { 17 | return generateUtilityClass('BluiToolbarMenu', slot); 18 | } 19 | 20 | const toolbarMenuClasses: ToolbarMenuClasses = generateUtilityClasses('BluiToolbarMenu', [ 21 | 'root', 22 | 'dropdownArrow', 23 | 'icon', 24 | 'label', 25 | 'cursorPointer', 26 | 'navGroups', 27 | 'rotatedDropdownArrow', 28 | ]); 29 | 30 | export default toolbarMenuClasses; 31 | -------------------------------------------------------------------------------- /components/src/core/ToolbarMenu/index.ts: -------------------------------------------------------------------------------- 1 | export * from './ToolbarMenu'; 2 | -------------------------------------------------------------------------------- /components/src/core/UserMenu/index.ts: -------------------------------------------------------------------------------- 1 | export * from './UserMenu'; 2 | -------------------------------------------------------------------------------- /components/src/core/Utility/SpacerClasses.tsx: -------------------------------------------------------------------------------- 1 | import generateUtilityClass from '@mui/material/generateUtilityClass'; 2 | 3 | export type SpacerClasses = { 4 | /** Styles applied to the root element. */ 5 | root?: string; 6 | }; 7 | 8 | export type SpacerClassKey = keyof SpacerClasses; 9 | 10 | export function getSpacerUtilityClass(slot: string): string { 11 | return generateUtilityClass('BluiSpacer', slot); 12 | } 13 | -------------------------------------------------------------------------------- /components/src/core/Utility/convertColorNameToHex.tsx: -------------------------------------------------------------------------------- 1 | export const convertColorNameToHex = (str?: string): string => { 2 | if (!str) { 3 | return ''; 4 | } 5 | const ctx = document.createElement('canvas').getContext('2d'); 6 | ctx.fillStyle = str; 7 | return ctx.fillStyle; 8 | }; 9 | -------------------------------------------------------------------------------- /components/src/core/Utility/index.ts: -------------------------------------------------------------------------------- 1 | export * from './Spacer'; 2 | export * from './convertColorNameToHex'; 3 | -------------------------------------------------------------------------------- /components/src/core/hooks/usePrevious.tsx: -------------------------------------------------------------------------------- 1 | import { useRef, useEffect } from 'react'; 2 | 3 | /* eslint-disable-next-line @typescript-eslint/ban-types */ 4 | export const usePrevious = (value: T): T | undefined => { 5 | // The ref object is a generic container whose current property is mutable ... 6 | // ... and can hold any value, similar to an instance property on a class 7 | const ref = useRef(); 8 | 9 | // Store current value in ref 10 | useEffect(() => { 11 | ref.current = value; 12 | }, [value]); // Only re-run if value changes 13 | 14 | // Return previous value (happens before update in useEffect above) 15 | return ref.current; 16 | }; 17 | -------------------------------------------------------------------------------- /components/src/core/index.ts: -------------------------------------------------------------------------------- 1 | export * from './ChannelValue'; 2 | export * from './EmptyState'; 3 | export * from './Hero'; 4 | export * from './HeroBanner'; 5 | export * from './InfoListItem'; 6 | export * from './ListItemTag'; 7 | export * from './Drawer'; 8 | export * from './DrawerLayout'; 9 | export * from './ScoreCard'; 10 | export * from './Utility'; 11 | export * from './UserMenu'; 12 | export * from './AppBar'; 13 | export * from './ThreeLiner'; 14 | export * from './ToolbarMenu'; 15 | -------------------------------------------------------------------------------- /components/src/core/utilities.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export function interleave(array: any[], separator: () => JSX.Element): any[] { 4 | const output: any[] = []; 5 | array.forEach((element: any, index: number) => { 6 | if (index) { 7 | output.push(separator()); 8 | } 9 | output.push(element); 10 | }); 11 | return output; 12 | } 13 | export function separate(array: any[], interpunct: () => JSX.Element): any { 14 | return interleave(array, () => interpunct()); 15 | } 16 | export function withKeys(array: any[]): any { 17 | return array.map((element, index) => {element}); 18 | } 19 | -------------------------------------------------------------------------------- /components/src/index.ts: -------------------------------------------------------------------------------- 1 | /** 2 | Copyright (c) 2021-present, Eaton 3 | 4 | All rights reserved. 5 | 6 | This code is licensed under the BSD-3 license found in the LICENSE file in the root directory of this source tree and at https://opensource.org/licenses/BSD-3-Clause. 7 | **/ 8 | /* eslint-disable */ 9 | 10 | import type {} from '@mui/material/themeCssVarsAugmentation'; 11 | 12 | declare global { 13 | namespace React { 14 | interface DOMAttributes { 15 | placeholder?: string | undefined; 16 | onPointerEnterCapture?: string | undefined; 17 | onPointerLeaveCapture?: string | undefined; 18 | } 19 | } 20 | } 21 | export * from './core'; 22 | -------------------------------------------------------------------------------- /components/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "types": ["node", "jest"], 5 | "esModuleInterop": true, 6 | "jsx": "react", 7 | "strict": true, 8 | "allowSyntheticDefaultImports": true, 9 | "strictNullChecks": false 10 | }, 11 | "include": ["src"] 12 | } 13 | -------------------------------------------------------------------------------- /components/tsconfig.lib.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "compilerOptions": { 4 | "outDir": "../dist", 5 | "types": ["node"], 6 | "declaration": true 7 | }, 8 | "exclude": ["src/**/*.test.tsx", "src/core/test-utils.tsx"] 9 | } 10 | -------------------------------------------------------------------------------- /components/tsconfig.test.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig", 3 | "compilerOptions": { 4 | "types": ["node", "jest"], 5 | "declaration": false 6 | }, 7 | "include": ["src"] 8 | } 9 | -------------------------------------------------------------------------------- /docs/.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | parser: '@typescript-eslint/parser', 3 | extends: ['@brightlayer-ui/eslint-config/ts'], 4 | parserOptions: { 5 | project: './tsconfig.json', 6 | }, 7 | env: { 8 | browser: true, 9 | }, 10 | }; 11 | -------------------------------------------------------------------------------- /docs/craco.config.js: -------------------------------------------------------------------------------- 1 | const { addAfterLoader, loaderByName } = require('@craco/craco'); 2 | // const remarkGfm = require('remark-gfm'); 3 | 4 | module.exports = module.exports = async (env) => { 5 | const remarkGfm = (await import('remark-gfm')).default 6 | return{ 7 | webpack: { 8 | configure(webpackConfig) { 9 | addAfterLoader(webpackConfig, loaderByName('babel-loader'), { 10 | test: /\.mdx?$/, 11 | use: [ 12 | { loader: 'babel-loader', options: {} }, 13 | { 14 | loader: '@mdx-js/loader', 15 | /** @type {Options} */ 16 | options: { 17 | remarkPlugins: [remarkGfm], 18 | providerImportSource: '@mdx-js/react', 19 | } 20 | } 21 | ] 22 | }); 23 | 24 | return webpackConfig; 25 | }, 26 | }, 27 | } 28 | }; 29 | -------------------------------------------------------------------------------- /docs/public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/public/favicon.png -------------------------------------------------------------------------------- /docs/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/public/logo192.png -------------------------------------------------------------------------------- /docs/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/public/logo512.png -------------------------------------------------------------------------------- /docs/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#007bc1", 24 | "background_color": "#eef0f0" 25 | } 26 | -------------------------------------------------------------------------------- /docs/src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles'; 4 | import { blueThemes } from '@brightlayer-ui/react-themes'; 5 | import { ComponentPreviewPage } from './pages/componentPreviewPage'; 6 | import { DrawerContext } from './contexts/drawerContextProvider'; 7 | 8 | test('renders welcome text', () => { 9 | render( 10 | 11 | 12 | 18 | 19 | 20 | 21 | 22 | ); 23 | const bluiText = screen.getByText(/App Bar/i); 24 | expect(bluiText).toBeInTheDocument(); 25 | }); 26 | -------------------------------------------------------------------------------- /docs/src/App.tsx: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | import { DrawerContext } from './contexts/drawerContextProvider'; 3 | import { NavigationDrawer } from './router/drawer'; 4 | import { MainRouter } from './router/main'; 5 | import { DrawerLayout } from '@brightlayer-ui/react-components'; 6 | import { Routes } from 'react-router-dom'; 7 | 8 | export const App = (): JSX.Element => { 9 | const [drawerOpen, setDrawerOpen] = useState(false); 10 | 11 | return ( 12 | 18 | } 20 | style={{ height: '100%' }} 21 | sx={{ 22 | '& .BluiDrawerLayout-content': { height: '100%' }, 23 | }} 24 | > 25 | {MainRouter} 26 | 27 | 28 | ); 29 | }; 30 | -------------------------------------------------------------------------------- /docs/src/__configuration__/listOfAllBluiReactPackages.ts: -------------------------------------------------------------------------------- 1 | export const listOfAllBluiReactPackages = [ 2 | '@brightlayer-ui/react-components', 3 | '@brightlayer-ui/icons', 4 | '@brightlayer-ui/icons-svg', 5 | '@brightlayer-ui/icons-mui', 6 | '@brightlayer-ui/symbols', 7 | '@brightlayer-ui/symbols-mui', 8 | '@brightlayer-ui/react-progress-icons', 9 | '@brightlayer-ui/colors', 10 | '@brightlayer-ui/colors-branding', 11 | '@brightlayer-ui/react-themes', 12 | '@brightlayer-ui/react-auth-workflow', 13 | '@brightlayer-ui/eslint-config', 14 | '@brightlayer-ui/prettier-config', 15 | '@brightlayer-ui/cra-template-authentication-typescript', 16 | '@brightlayer-ui/cra-template-routing-typescript', 17 | '@brightlayer-ui/cra-template-blank-typescript', 18 | ]; 19 | -------------------------------------------------------------------------------- /docs/src/__configuration__/markdown.css: -------------------------------------------------------------------------------- 1 | .markdownH1:first-child { 2 | margin-top: 32px; 3 | } 4 | 5 | .markdownH1:first-child .MuiTypography-h4 { 6 | font-size: 3rem; 7 | } 8 | 9 | .markdownH1:first-child .MuiSvgIcon-root { 10 | display: none; 11 | } 12 | .markdownH1:not(:first-child) { 13 | margin-top: 96px; 14 | } 15 | 16 | .headline:not(:first-child) .headline-text .MuiSvgIcon-root { 17 | opacity: 0; 18 | } 19 | .headline:not(:first-child) .headline-text:hover .MuiSvgIcon-root { 20 | opacity: 0.25; 21 | } 22 | .headline:not(:first-child) .MuiIconButton-root:hover .MuiSvgIcon-root { 23 | opacity: 1; 24 | } 25 | .headline:not(:first-child) .MuiIconButton-root:active .MuiSvgIcon-root { 26 | opacity: 0.5; 27 | } 28 | 29 | @media (hover: none) { 30 | .headline:not(:first-child) .headline-text .MuiSvgIcon-root { 31 | opacity: 0.25; 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /docs/src/__types__/index.ts: -------------------------------------------------------------------------------- 1 | export type RangeDataTypes = { 2 | min: number; 3 | max: number; 4 | step: number; 5 | }; 6 | export type SiteThemeType = 'light' | 'dark' | 'system'; 7 | export type UIDirection = 'ltr' | 'rtl'; 8 | 9 | export type SiteThemePayloadType = { 10 | siteTheme: SiteThemeType; 11 | }; 12 | 13 | export type SiteDirectionPayloadType = { 14 | siteDirection: UIDirection; 15 | }; 16 | -------------------------------------------------------------------------------- /docs/src/assets/EatonLogoLight.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/assets/EatonLogoLight.png -------------------------------------------------------------------------------- /docs/src/assets/component-catalog/app-bar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/assets/component-catalog/app-bar.png -------------------------------------------------------------------------------- /docs/src/assets/component-catalog/channel-value.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/assets/component-catalog/channel-value.png -------------------------------------------------------------------------------- /docs/src/assets/component-catalog/drawer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/assets/component-catalog/drawer.png -------------------------------------------------------------------------------- /docs/src/assets/component-catalog/empty-state.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/assets/component-catalog/empty-state.png -------------------------------------------------------------------------------- /docs/src/assets/component-catalog/hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/assets/component-catalog/hero.png -------------------------------------------------------------------------------- /docs/src/assets/component-catalog/info-list-item.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/assets/component-catalog/info-list-item.png -------------------------------------------------------------------------------- /docs/src/assets/component-catalog/list-item-tag.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/assets/component-catalog/list-item-tag.png -------------------------------------------------------------------------------- /docs/src/assets/component-catalog/scorecard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/assets/component-catalog/scorecard.png -------------------------------------------------------------------------------- /docs/src/assets/component-catalog/three-liner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/assets/component-catalog/three-liner.png -------------------------------------------------------------------------------- /docs/src/assets/component-catalog/toolbar-menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/assets/component-catalog/toolbar-menu.png -------------------------------------------------------------------------------- /docs/src/assets/component-catalog/user-menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/assets/component-catalog/user-menu.png -------------------------------------------------------------------------------- /docs/src/assets/cubes_tile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/assets/cubes_tile.png -------------------------------------------------------------------------------- /docs/src/componentDocs/AppBar/examples/AppBar.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { CodeBlock, CodeBlockActionButtonRow } from '../../../shared'; 4 | import { AppBarExample } from './AppBarExample'; 5 | 6 | const codeSnippet = ` 7 | 12 | Content 13 | 14 | 15 | {getBodyFiller()} 16 | 17 | 18 | `; 19 | 20 | export const AppBar = (): JSX.Element => ( 21 | 22 | 23 | 24 | 25 | 26 | ); 27 | -------------------------------------------------------------------------------- /docs/src/componentDocs/AppBar/examples/CollapsedAppBar.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { CodeBlock, CodeBlockActionButtonRow } from '../../../shared'; 4 | import { CollapsedAppBarExample } from './CollapsedAppBarExample'; 5 | 6 | const codeSnippet = ` 7 | 8 | Content 9 | 10 | 11 | {getBodyFiller()} 12 | 13 | 14 | `; 15 | 16 | export const CollapsedAppBar = (): JSX.Element => ( 17 | 18 | 19 | 20 | 24 | 25 | ); 26 | -------------------------------------------------------------------------------- /docs/src/componentDocs/AppBar/examples/CollapsedAppBarExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import Toolbar from '@mui/material/Toolbar'; 4 | import Typography from '@mui/material/Typography'; 5 | import { AppBar } from '@brightlayer-ui/react-components'; 6 | import { getBodyFiller, ExampleShowcase } from '../../../shared'; 7 | 8 | export const CollapsedAppBarExample = (): JSX.Element => ( 9 | 10 | 11 | 12 | Content 13 | 14 | 15 | 24 | {getBodyFiller()} 25 | 26 | 27 | ); 28 | -------------------------------------------------------------------------------- /docs/src/componentDocs/AppBar/examples/ExpandedAppBar.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { CodeBlock, CodeBlockActionButtonRow } from '../../../shared'; 4 | import { ExpandedAppBarExample } from './ExpandedAppBarExample'; 5 | 6 | const codeSnippet = ` 7 | 8 | Content 9 | 10 | 11 | {getBodyFiller()} 12 | 13 | 14 | `; 15 | 16 | export const ExpandedAppBar = (): JSX.Element => ( 17 | 18 | 19 | 20 | 24 | 25 | ); 26 | -------------------------------------------------------------------------------- /docs/src/componentDocs/AppBar/examples/ExpandedAppBarExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import Toolbar from '@mui/material/Toolbar'; 4 | import Typography from '@mui/material/Typography'; 5 | import { AppBar } from '@brightlayer-ui/react-components'; 6 | import { getBodyFiller, ExampleShowcase } from '../../../shared'; 7 | 8 | export const ExpandedAppBarExample = (): JSX.Element => ( 9 | 10 | 11 | 12 | Content 13 | 14 | 15 | 24 | {getBodyFiller()} 25 | 26 | 27 | ); 28 | -------------------------------------------------------------------------------- /docs/src/componentDocs/AppBar/examples/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './AppBar'; 2 | export * from './AppBarWithAdditionalContent'; 3 | export * from './CollapsedAppBar'; 4 | export * from './ExpandedAppBar'; 5 | -------------------------------------------------------------------------------- /docs/src/componentDocs/AppBar/images/appBar.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/componentDocs/AppBar/images/appBar.gif -------------------------------------------------------------------------------- /docs/src/componentDocs/AppBar/images/appBar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/componentDocs/AppBar/images/appBar.png -------------------------------------------------------------------------------- /docs/src/componentDocs/AppBar/images/appBarAnatomy1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/componentDocs/AppBar/images/appBarAnatomy1.png -------------------------------------------------------------------------------- /docs/src/componentDocs/AppBar/images/appBarAnatomy2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/componentDocs/AppBar/images/appBarAnatomy2.png -------------------------------------------------------------------------------- /docs/src/componentDocs/AppBar/images/appBarCollapsed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/componentDocs/AppBar/images/appBarCollapsed.png -------------------------------------------------------------------------------- /docs/src/componentDocs/AppBar/images/farm.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/componentDocs/AppBar/images/farm.jpg -------------------------------------------------------------------------------- /docs/src/componentDocs/AppBar/markdown/AppBarExamples.mdx: -------------------------------------------------------------------------------- 1 | import { AppBar, CollapsedAppBar, ExpandedAppBar, AppBarWithAdditionalContent } from '../examples'; 2 | 3 | ## Collapsible App Bar 4 | 5 | An `` is an extension of the [MUI App Bar](https://mui.com/material-ui/api/app-bar/) that can expand and collapse as you scroll the page. 6 | 7 | 8 | 9 | ## Permanently Collapsed 10 | 11 | Setting the variant to `'collapsed'` will lock the App Bar at its collapsed size and it will behave like a default MUI App Bar. 12 | 13 | 14 | 15 | ## Permanently Expanded 16 | 17 | Setting the variant to `'expanded'` will lock the App Bar at its expanded size. 18 | 19 | 20 | 21 | ## Adding Additional Content 22 | 23 | You can organize the contents of your App Bar by adding a [Toolbar](https://mui.com/material-ui/api/toolbar/) component, just as you would with a MUI App Bar. 24 | 25 | 26 | -------------------------------------------------------------------------------- /docs/src/componentDocs/AppBar/playground/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './PlaygroundPage'; 2 | -------------------------------------------------------------------------------- /docs/src/componentDocs/ChannelValue/examples/ChannelValue.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { CodeBlock, CodeBlockActionButtonRow } from '../../../shared'; 4 | import { ChannelValueExample } from './ChannelValueExample'; 5 | 6 | const codeSnippet = ``; 7 | 8 | export const ChannelValue = (): JSX.Element => ( 9 | 10 | 11 | 12 | 16 | 17 | ); 18 | -------------------------------------------------------------------------------- /docs/src/componentDocs/ChannelValue/examples/ChannelValueExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ChannelValue } from '@brightlayer-ui/react-components'; 3 | import { ExampleShowcase } from '../../../shared'; 4 | 5 | export const ChannelValueExample = (): JSX.Element => ( 6 | 7 | 8 | 9 | ); 10 | -------------------------------------------------------------------------------- /docs/src/componentDocs/ChannelValue/examples/ChannelValueUnitsSpacing.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { CodeBlock, CodeBlockActionButtonRow } from '../../../shared'; 4 | import { ChannelValueUnitsSpacingExample } from './ChannelValueUnitsSpacingExample'; 5 | 6 | const codeSnippet = ` 7 | 8 | 9 | 10 | 11 | 12 | 13 | `; 14 | 15 | export const ChannelValueUnitsSpacing = (): JSX.Element => ( 16 | 17 | 18 | 19 | 23 | 24 | ); 25 | -------------------------------------------------------------------------------- /docs/src/componentDocs/ChannelValue/examples/ChannelValueUnitsSpacingExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Stack from '@mui/material/Stack'; 3 | import { ChannelValue } from '@brightlayer-ui/react-components'; 4 | import { ExampleShowcase } from '../../../shared'; 5 | 6 | export const ChannelValueUnitsSpacingExample = (): JSX.Element => ( 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | ); 18 | -------------------------------------------------------------------------------- /docs/src/componentDocs/ChannelValue/examples/ChannelValueWithIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { CodeBlock, CodeBlockActionButtonRow } from '../../../shared'; 4 | import { ChannelValueWithIconExample } from './ChannelValueWithIconExample'; 5 | 6 | const codeSnippet = `} />`; 7 | 8 | export const ChannelValueWithIcon = (): JSX.Element => ( 9 | 10 | 11 | 12 | 16 | 17 | ); 18 | -------------------------------------------------------------------------------- /docs/src/componentDocs/ChannelValue/examples/ChannelValueWithIconExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ChannelValue } from '@brightlayer-ui/react-components'; 3 | import { TrendingUp } from '@mui/icons-material'; 4 | import { ExampleShowcase } from '../../../shared'; 5 | 6 | export const ChannelValueWithIconExample = (): JSX.Element => ( 7 | 8 | } /> 9 | 10 | ); 11 | -------------------------------------------------------------------------------- /docs/src/componentDocs/ChannelValue/examples/ChannelValueWithPrefix.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { CodeBlock, CodeBlockActionButtonRow } from '../../../shared'; 4 | import { ChannelValueWithPrefixExample } from './ChannelValueWithPrefixExample'; 5 | 6 | const codeSnippet = `} />`; 7 | 8 | export const ChannelValueWithPrefix = (): JSX.Element => ( 9 | 10 | 11 | 12 | 16 | 17 | ); 18 | -------------------------------------------------------------------------------- /docs/src/componentDocs/ChannelValue/examples/ChannelValueWithPrefixExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ChannelValue } from '@brightlayer-ui/react-components'; 3 | import { CheckCircle } from '@mui/icons-material'; 4 | import { ExampleShowcase } from '../../../shared'; 5 | 6 | export const ChannelValueWithPrefixExample = (): JSX.Element => ( 7 | 8 | } /> 9 | 10 | ); 11 | -------------------------------------------------------------------------------- /docs/src/componentDocs/ChannelValue/examples/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './ChannelValue'; 2 | export * from './ChannelValueUnitsSpacing'; 3 | -------------------------------------------------------------------------------- /docs/src/componentDocs/ChannelValue/images/channelValue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/componentDocs/ChannelValue/images/channelValue.png -------------------------------------------------------------------------------- /docs/src/componentDocs/ChannelValue/images/channelValueAnatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/componentDocs/ChannelValue/images/channelValueAnatomy.png -------------------------------------------------------------------------------- /docs/src/componentDocs/ChannelValue/markdown/ChannelValueExamples.mdx: -------------------------------------------------------------------------------- 1 | import { ChannelValue, ChannelValueUnitsSpacing } from '../examples'; 2 | import { ChannelValueWithIcon } from '../examples/ChannelValueWithIcon'; 3 | import { ChannelValueWithPrefix } from '../examples/ChannelValueWithPrefix'; 4 | 5 | ## Channel Value 6 | 7 | The `` is used to show a particular measurement or parameter. 8 | 9 | 10 | 11 | ## Adding an Icon 12 | 13 | You can add an optional icon to show trends or to highlight the category of the value. 14 | 15 | 16 | 17 | ## Flipping the Units 18 | 19 | Some measurements may require the units to appear before the value. This can be achieved by using the `prefix` prop. 20 | 21 | 22 | 23 | ## Units & Spacing 24 | 25 | Some measurements require a space between the value and units, and some do not. The Channel Value handles this automatically for common units, but you can override this behavior through the `unitSpace` prop. 26 | 27 | 28 | -------------------------------------------------------------------------------- /docs/src/componentDocs/ChannelValue/playground/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './PlaygroundPage'; 2 | -------------------------------------------------------------------------------- /docs/src/componentDocs/Drawer/examples/BasicDrawer.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { CodeBlock, CodeBlockActionButtonRow } from '../../../shared'; 4 | import { BasicDrawerExample } from './BasicDrawerExample'; 5 | 6 | const codeSnippet = ` 7 | 8 | 9 | Subheader Content Here 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | Footer Content Here 20 | 21 | 22 | `; 23 | 24 | export const BasicDrawer = (): JSX.Element => ( 25 | 26 | 27 | 28 | 29 | 30 | ); 31 | -------------------------------------------------------------------------------- /docs/src/componentDocs/Drawer/examples/BasicDrawerExample.tsx: -------------------------------------------------------------------------------- 1 | import Box from '@mui/material/Box'; 2 | import { 3 | Drawer, 4 | DrawerBody, 5 | DrawerFooter, 6 | DrawerHeader, 7 | DrawerNavGroup, 8 | DrawerNavItem, 9 | DrawerSubheader, 10 | } from '@brightlayer-ui/react-components'; 11 | import { ExampleShowcase } from '../../../shared'; 12 | 13 | export const BasicDrawerExample = (): JSX.Element => ( 14 | 15 | 16 | 17 | 18 | Subheader Content Here 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | Footer Content Here 29 | 30 | 31 | 32 | ); 33 | -------------------------------------------------------------------------------- /docs/src/componentDocs/Drawer/examples/ComplexDrawer.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { CodeBlock, CodeBlockActionButtonRow } from '../../../shared'; 4 | import { ComplexDrawerExample } from './ComplexDrawerExample'; 5 | 6 | const codeSnippet = ` 7 | } title="Brightlayer UI" subtitle="Drawer Component" /> 8 | 9 | 10 | 11 | 12 | `; 13 | 14 | export const ComplexDrawer = (): JSX.Element => ( 15 | 16 | 17 | 18 | 19 | 20 | ); 21 | -------------------------------------------------------------------------------- /docs/src/componentDocs/Drawer/examples/PermanentDrawer.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { CodeBlock, CodeBlockActionButtonRow } from '../../../shared'; 4 | import { PermanentDrawerExample } from './PermanentDrawerExample'; 5 | 6 | const codeSnippet = ` 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | `; 16 | 17 | export const PermanentDrawer = (): JSX.Element => ( 18 | 19 | 20 | 21 | 25 | 26 | ); 27 | -------------------------------------------------------------------------------- /docs/src/componentDocs/Drawer/examples/PersistentDrawer.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { CodeBlock, CodeBlockActionButtonRow } from '../../../shared'; 4 | import { PersistentDrawerExample } from './PersistentDrawerExample'; 5 | 6 | const codeSnippet = ` 7 | } onClick={(): void => setOpen(!open)} /> 8 | 9 | 10 | } itemID="1" /> 11 | } itemID="2" /> 12 | } itemID="3" /> 13 | 14 | 15 | `; 16 | 17 | export const PersistentDrawer = (): JSX.Element => ( 18 | 19 | 20 | 21 | 25 | 26 | ); 27 | -------------------------------------------------------------------------------- /docs/src/componentDocs/Drawer/examples/RailDrawer.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { CodeBlock, CodeBlockActionButtonRow } from '../../../shared'; 4 | import { RailDrawerExample } from './RailDrawerExample'; 5 | 6 | const codeSnippet = ` 7 | 8 | 9 | } itemID="1" divider /> 10 | } 13 | itemID="2" 14 | divider 15 | /> 16 | } itemID="3" divider /> 17 | 18 | 19 | `; 20 | 21 | export const RailDrawer = (): JSX.Element => ( 22 | 23 | 24 | 25 | 26 | 27 | ); 28 | -------------------------------------------------------------------------------- /docs/src/componentDocs/Drawer/examples/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './BasicDrawer'; 2 | export * from './ComplexDrawer'; 3 | export * from './PermanentDrawer'; 4 | export * from './PersistentDrawer'; 5 | export * from './RailDrawer'; 6 | export * from './TemporaryDrawer'; 7 | -------------------------------------------------------------------------------- /docs/src/componentDocs/Drawer/images/drawer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/componentDocs/Drawer/images/drawer.png -------------------------------------------------------------------------------- /docs/src/componentDocs/Drawer/images/drawerAnatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/componentDocs/Drawer/images/drawerAnatomy.png -------------------------------------------------------------------------------- /docs/src/componentDocs/Drawer/playground/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './PlaygroundPage'; 2 | -------------------------------------------------------------------------------- /docs/src/componentDocs/DrawerBody/examples/BasicDrawerBody.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { CodeBlock, CodeBlockActionButtonRow } from '../../../shared'; 4 | import { BasicDrawerBodyExample } from './BasicDrawerBodyExample'; 5 | 6 | const codeSnippet = ` 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | `; 16 | 17 | export const BasicDrawerBody = (): JSX.Element => ( 18 | 19 | 20 | 21 | 25 | 26 | ); 27 | -------------------------------------------------------------------------------- /docs/src/componentDocs/DrawerBody/examples/BasicDrawerBodyExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Drawer, DrawerBody, DrawerNavGroup, DrawerNavItem } from '@brightlayer-ui/react-components'; 3 | import { ExampleShowcase } from '../../../shared'; 4 | 5 | export const BasicDrawerBodyExample = (): JSX.Element => ( 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | ); 18 | -------------------------------------------------------------------------------- /docs/src/componentDocs/DrawerBody/markdown/DrawerBodyExamples.mdx: -------------------------------------------------------------------------------- 1 | import { BasicDrawerBody } from '../examples/BasicDrawerBody'; 2 | 3 | ## Drawer Body 4 | 5 | The `` is a wrapper for the main content of the Drawer. The typical use case is to display [Nav Group](/components/drawer-nav-group/examples) elements, but custom elements (e.g., for spacing) are accepted as well. The Drawer Body is also useful for setting styling properties that you want to appyly to all of the navigation elements. 6 | 7 | 8 | -------------------------------------------------------------------------------- /docs/src/componentDocs/DrawerFooter/examples/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './DrawerFooter'; 2 | -------------------------------------------------------------------------------- /docs/src/componentDocs/DrawerFooter/images/EatonLogoLight.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/componentDocs/DrawerFooter/images/EatonLogoLight.png -------------------------------------------------------------------------------- /docs/src/componentDocs/DrawerFooter/markdown/DrawerFooterExamples.mdx: -------------------------------------------------------------------------------- 1 | import { DrawerFooter } from '../examples'; 2 | 3 | ## Drawer Footer 4 | 5 | A `` appears at the bottom of the drawer and is used to display custom content. 6 | 7 | 8 | -------------------------------------------------------------------------------- /docs/src/componentDocs/DrawerFooter/playground/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './PlaygroundPage'; 2 | -------------------------------------------------------------------------------- /docs/src/componentDocs/DrawerHeader/examples/DrawerHeader.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { CodeBlock, CodeBlockActionButtonRow } from '../../../shared'; 4 | import { DrawerHeaderExample } from './DrawerHeaderExample'; 5 | 6 | const codeSnippet = ` 7 | } /> 8 | 9 | `; 10 | 11 | export const DrawerHeader = (): JSX.Element => ( 12 | 13 | 14 | 15 | 19 | 20 | ); 21 | -------------------------------------------------------------------------------- /docs/src/componentDocs/DrawerHeader/examples/DrawerHeaderExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Drawer, DrawerHeader } from '@brightlayer-ui/react-components'; 3 | import Menu from '@mui/icons-material/Menu'; 4 | import { ExampleShowcase } from '../../../shared'; 5 | 6 | export const DrawerHeaderExample = (): JSX.Element => ( 7 | 8 | 9 | } /> 10 | 11 | 12 | ); 13 | -------------------------------------------------------------------------------- /docs/src/componentDocs/DrawerHeader/examples/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './DrawerHeader'; 2 | export * from './DrawerHeaderWithTitleContent'; 3 | -------------------------------------------------------------------------------- /docs/src/componentDocs/DrawerHeader/images/drawerHeaderAnatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/componentDocs/DrawerHeader/images/drawerHeaderAnatomy.png -------------------------------------------------------------------------------- /docs/src/componentDocs/DrawerHeader/markdown/DrawerHeaderExamples.mdx: -------------------------------------------------------------------------------- 1 | import { DrawerHeader, DrawerHeaderWithTitleContent } from '../examples'; 2 | 3 | ## Drawer Header 4 | 5 | The `` appears at the top of a drawer. It is commonly used to show your application title and holds controls for the drawer. 6 | 7 | 8 | 9 | ## Customizing the Title Content 10 | 11 | If you want to display more than just a title and subtitle, you can pass custom content via the `titleContent` prop. 12 | 13 | 14 | -------------------------------------------------------------------------------- /docs/src/componentDocs/DrawerHeader/playground/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './PlaygroundPage'; 2 | -------------------------------------------------------------------------------- /docs/src/componentDocs/DrawerLayout/examples/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './DrawerLayout'; 2 | -------------------------------------------------------------------------------- /docs/src/componentDocs/DrawerLayout/images/drawerLayout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/componentDocs/DrawerLayout/images/drawerLayout.png -------------------------------------------------------------------------------- /docs/src/componentDocs/DrawerLayout/markdown/DrawerLayoutExamples.mdx: -------------------------------------------------------------------------------- 1 | import { DrawerLayout } from '../examples'; 2 | 3 | ## Drawer Layout 4 | 5 | The `` component is used to provide the appropriate resizing behavior for your main application content when used in conjunction with a Brightlayer UI [Drawer](/components/drawer/examples). It accepts a Drawer as a prop, and the main page content is passed in through child elements. 6 | 7 | 8 | -------------------------------------------------------------------------------- /docs/src/componentDocs/DrawerNavGroup/examples/CustomNavGroupTitleContent.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { CodeBlock, CodeBlockActionButtonRow } from '../../../shared'; 4 | import { CustomNavGroupTitleContentExample } from './CustomNavGroupTitleContentExample'; 5 | 6 | const codeSnippet = ` 7 | 8 | 11 | Nav Group Title Content 12 | 13 | 14 | } 15 | > 16 | 17 | 18 | 19 | 20 | 21 | `; 22 | 23 | export const CustomNavGroupTitleContent = (): JSX.Element => ( 24 | 25 | 26 | 27 | 31 | 32 | ); 33 | -------------------------------------------------------------------------------- /docs/src/componentDocs/DrawerNavGroup/examples/CustomNavGroupTitleContentExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import Typography from '@mui/material/Typography'; 4 | import { Drawer, DrawerBody, DrawerNavGroup, DrawerNavItem, ListItemTag } from '@brightlayer-ui/react-components'; 5 | import { ExampleShowcase } from '../../../shared'; 6 | 7 | export const CustomNavGroupTitleContentExample = (): JSX.Element => ( 8 | 9 | 10 | 11 | 15 | Nav Group Title Content 16 | 17 | 18 | } 19 | > 20 | 21 | 22 | 23 | 24 | 25 | 26 | ); 27 | -------------------------------------------------------------------------------- /docs/src/componentDocs/DrawerNavGroup/examples/DrawerNavGroup.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { CodeBlock, CodeBlockActionButtonRow } from '../../../shared'; 4 | import { DrawerNavGroupExample } from './DrawerNavGroupExample'; 5 | 6 | const codeSnippet = ` 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | `; 19 | 20 | export const DrawerNavGroup = (): JSX.Element => ( 21 | 22 | 23 | 24 | 28 | 29 | ); 30 | -------------------------------------------------------------------------------- /docs/src/componentDocs/DrawerNavGroup/examples/DrawerNavGroupExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Drawer, DrawerBody, DrawerNavGroup, DrawerNavItem } from '@brightlayer-ui/react-components'; 3 | import { ExampleShowcase } from '../../../shared'; 4 | 5 | export const DrawerNavGroupExample = (): JSX.Element => ( 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | ); 21 | -------------------------------------------------------------------------------- /docs/src/componentDocs/DrawerNavGroup/examples/SpacingNavGroups.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { CodeBlock, CodeBlockActionButtonRow } from '../../../shared'; 4 | import { SpacingNavGroupsExample } from './SpacingNavGroupsExample'; 5 | 6 | const codeSnippet = ` 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | `; 21 | export const SpacingNavGroups = (): JSX.Element => ( 22 | 23 | 24 | 25 | 29 | 30 | ); 31 | -------------------------------------------------------------------------------- /docs/src/componentDocs/DrawerNavGroup/examples/SpacingNavGroupsExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Divider from '@mui/material/Divider'; 3 | import { Drawer, DrawerBody, DrawerNavGroup, DrawerNavItem, Spacer } from '@brightlayer-ui/react-components'; 4 | import { ExampleShowcase } from '../../../shared'; 5 | 6 | export const SpacingNavGroupsExample = (): JSX.Element => ( 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /docs/src/componentDocs/DrawerNavGroup/examples/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './DrawerNavGroup'; 2 | export * from './CustomNavGroupTitleContent'; 3 | export * from './DrawerNavGroupComposition'; 4 | export * from './SpacingNavGroups'; 5 | -------------------------------------------------------------------------------- /docs/src/componentDocs/DrawerNavGroup/images/drawerNavGroupAnatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/componentDocs/DrawerNavGroup/images/drawerNavGroupAnatomy.png -------------------------------------------------------------------------------- /docs/src/componentDocs/DrawerNavGroup/markdown/DrawerNavGroupExamples.mdx: -------------------------------------------------------------------------------- 1 | import { DrawerNavGroup, SpacingNavGroups, CustomNavGroupTitleContent, DrawerNavGroupComposition } from '../examples'; 2 | 3 | ## Drawer Nav Group 4 | 5 | A `` organizes related navigation items together. You can have as many groups as needed. 6 | 7 | 8 | 9 | ## Spacing the Groups 10 | 11 | If you want to add an extra space between your groups, you can use a [Spacer](/components/spacer/examples) component. 12 | 13 | 14 | 15 | ## Customizing the Title 16 | 17 | By default, each nav group has a simple string as the title. You can customize this and pass in your own content through the `titleContent` prop. 18 | 19 | 20 | 21 | ## Composition vs Configuration 22 | 23 | You can define the [Drawer Nav Items](/components/drawer-nav-item/examples) that you want to appear in each group via composition (simply add them as children) or configuration (define them in the `items` prop). Composition will offer slightly better re-rendering performance when props change, but using the `items` prop is easier to read/maintain, especially if you have a large number of items. 24 | 25 | 26 | -------------------------------------------------------------------------------- /docs/src/componentDocs/DrawerNavGroup/playground/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './PlaygroundPage'; 2 | -------------------------------------------------------------------------------- /docs/src/componentDocs/DrawerNavItem/examples/DrawerNavItem.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { CodeBlock, CodeBlockActionButtonRow } from '../../../shared'; 4 | import { DrawerNavItemExample } from './DrawerNavItemExample'; 5 | 6 | const codeSnippet = ` 7 | 8 | } itemID="1" /> 9 | } itemID="2" /> 10 | } itemID="3" /> 11 | 12 | 13 | `; 14 | 15 | export const DrawerNavItem = (): JSX.Element => ( 16 | 17 | 18 | 19 | 23 | 24 | ); 25 | -------------------------------------------------------------------------------- /docs/src/componentDocs/DrawerNavItem/examples/DrawerNavItemExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Drawer, DrawerBody, DrawerNavGroup, DrawerNavItem } from '@brightlayer-ui/react-components'; 3 | import Dashboard from '@mui/icons-material/Dashboard'; 4 | import Notifications from '@mui/icons-material/Notifications'; 5 | import Gavel from '@mui/icons-material/Gavel'; 6 | import { ExampleShowcase } from '../../../shared'; 7 | 8 | export const DrawerNavItemExample = (): JSX.Element => ( 9 | 10 | 11 | 12 | 13 | } itemID="1" /> 14 | } itemID="2" /> 15 | } itemID="3" /> 16 | 17 | 18 | 19 | 20 | ); 21 | -------------------------------------------------------------------------------- /docs/src/componentDocs/DrawerNavItem/examples/DrawerNavItemNestedItems.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { CodeBlock, CodeBlockActionButtonRow } from '../../../shared'; 4 | import { DrawerNavItemNestedItemsExample } from './DrawerNavItemNestedItemsExample'; 5 | 6 | const codeSnippet = ` 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | `; 17 | 18 | export const DrawerNavItemNestedItems = (): JSX.Element => ( 19 | 20 | 21 | 22 | 26 | 27 | ); 28 | -------------------------------------------------------------------------------- /docs/src/componentDocs/DrawerNavItem/examples/DrawerNavItemNestedItemsExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Drawer, DrawerBody, DrawerNavGroup, DrawerNavItem } from '@brightlayer-ui/react-components'; 3 | import { ExampleShowcase } from '../../../shared'; 4 | 5 | export const DrawerNavItemNestedItemsExample = (): JSX.Element => ( 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | ); 21 | -------------------------------------------------------------------------------- /docs/src/componentDocs/DrawerNavItem/examples/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './DrawerNavItem'; 2 | export * from './DrawerNavItemNestedItems'; 3 | export * from './DrawerNavItemSelectedItems'; 4 | -------------------------------------------------------------------------------- /docs/src/componentDocs/DrawerNavItem/images/navItemAnatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/componentDocs/DrawerNavItem/images/navItemAnatomy.png -------------------------------------------------------------------------------- /docs/src/componentDocs/DrawerNavItem/markdown/DrawerNavItemExamples.mdx: -------------------------------------------------------------------------------- 1 | import { DrawerNavItem, DrawerNavItemNestedItems, DrawerNavItemSelectedItems } from '../examples'; 2 | 3 | ## Drawer Nav Item 4 | 5 | A `` represents a single list item in the navigation drawer. Nav items can contain any combination of title, subtitle and icon. 6 | 7 | 8 | 9 | ## Selecting a Nav Item 10 | 11 | Navigation items can be highlighted with an active state by setting the `activeItem` prop. The shape of the highlight can be either "square" (default) or "round". 12 | 13 | 14 | 15 | ## Nesting the Nav Items 16 | 17 | Navigation items can be nested to allow for a multi-level navigation hierarchy. Similar to the [Drawer Nav Group](/components/drawer-nav-group/examples), you can do this by adding additional Nav Items as children or by specifying the nested structure via the `items` prop. Deep nesting can cause performance issues — we recommend limiting yourself to 2-3 levels when possible. 18 | 19 | 20 | -------------------------------------------------------------------------------- /docs/src/componentDocs/DrawerNavItem/markdown/index.tsx: -------------------------------------------------------------------------------- 1 | import DrawerNavItemExamples from './DrawerNavItemExamples.mdx'; 2 | 3 | export { DrawerNavItemExamples }; 4 | -------------------------------------------------------------------------------- /docs/src/componentDocs/DrawerNavItem/playground/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './PlaygroundPage'; 2 | -------------------------------------------------------------------------------- /docs/src/componentDocs/DrawerRailItem/examples/BasicDrawerRailItem.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { CodeBlock, CodeBlockActionButtonRow } from '../../../shared'; 4 | import { BasicDrawerRailItemExample } from './BasicDrawerRailItemExample'; 5 | 6 | const codeSnippet = ` 7 | 8 | 9 | } itemID="1" divider /> 10 | } 13 | itemID="2" 14 | divider 15 | /> 16 | } itemID="3" divider /> 17 | 18 | 19 | `; 20 | 21 | export const BasicDrawerRailItem = (): JSX.Element => ( 22 | 23 | 24 | 25 | 29 | 30 | ); 31 | -------------------------------------------------------------------------------- /docs/src/componentDocs/DrawerRailItem/examples/BasicDrawerRailItemExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Drawer, DrawerBody, DrawerNavGroup, DrawerRailItem } from '@brightlayer-ui/react-components'; 3 | import Gavel from '@mui/icons-material/Gavel'; 4 | import { Devices, LocationOn } from '@mui/icons-material'; 5 | import { ExampleShowcase } from '../../../shared'; 6 | 7 | export const BasicDrawerRailItemExample = (): JSX.Element => ( 8 | 9 | 10 | 11 | 12 | } itemID="1" divider /> 13 | } itemID="2" divider /> 14 | } itemID="3" divider /> 15 | 16 | 17 | 18 | 19 | ); 20 | -------------------------------------------------------------------------------- /docs/src/componentDocs/DrawerRailItem/examples/CondensedDrawerRailItem.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { CodeBlock, CodeBlockActionButtonRow } from '../../../shared'; 4 | import { CondensedDrawerRailItemExample } from './CondensedDrawerRailItemExample'; 5 | 6 | const codeSnippet = ` 7 | 8 | 9 | } itemID="1" /> 10 | } itemID="2" /> 11 | } itemID="3" /> 12 | 13 | 14 | `; 15 | 16 | export const CondensedDrawerRailItem = (): JSX.Element => ( 17 | 18 | 19 | 20 | 24 | 25 | ); 26 | -------------------------------------------------------------------------------- /docs/src/componentDocs/DrawerRailItem/examples/CondensedDrawerRailItemExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Drawer, DrawerBody, DrawerNavGroup, DrawerRailItem } from '@brightlayer-ui/react-components'; 3 | import Gavel from '@mui/icons-material/Gavel'; 4 | import { Devices, LocationOn } from '@mui/icons-material'; 5 | import { ExampleShowcase } from '../../../shared'; 6 | 7 | export const CondensedDrawerRailItemExample = (): JSX.Element => ( 8 | 9 | 10 | 11 | 12 | } itemID="1" /> 13 | } itemID="2" /> 14 | } itemID="3" /> 15 | 16 | 17 | 18 | 19 | ); 20 | -------------------------------------------------------------------------------- /docs/src/componentDocs/DrawerRailItem/examples/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './CondensedDrawerRailItem'; 2 | export * from './BasicDrawerRailItem'; 3 | -------------------------------------------------------------------------------- /docs/src/componentDocs/DrawerRailItem/images/railAnatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/componentDocs/DrawerRailItem/images/railAnatomy.png -------------------------------------------------------------------------------- /docs/src/componentDocs/DrawerRailItem/markdown/DrawerRailItemExamples.mdx: -------------------------------------------------------------------------------- 1 | import { BasicDrawerRailItem, CondensedDrawerRailItem } from '../examples'; 2 | 3 | ## Drawer Rail Item 4 | 5 | When using the `'rail'` variant of the [Drawer](/components/drawer/examples), navigation items are rendered as `` components instead of [Drawer Nav Items](/components/drawer-nav-item/examples). If you are using the `items` prop to declare navigation items for your drawer, the correct component will be selected automatically. If you are building your Drawer structure using composition, make sure you use the correct nav/rail item component for your chosen variant. 6 | 7 | 8 | 9 | ## Condensed Drawer Rail Item 10 | 11 | The Navigation Rail can be made even smaller by setting the `condensed` prop on the Drawer. This will hide the navigation item titles and only show the icons. 12 | 13 | > The `condensed` prop is available on the Rail Item component, but it should always be set at the Drawer level to avoid inconsistent sizing between elements. 14 | 15 | 16 | -------------------------------------------------------------------------------- /docs/src/componentDocs/DrawerRailItem/playground/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './PlaygroundPage'; 2 | -------------------------------------------------------------------------------- /docs/src/componentDocs/DrawerSubheader/examples/BasicDrawerSubheader.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { CodeBlock, CodeBlockActionButtonRow } from '../../../shared'; 4 | import { BasicDrawerSubheaderExample } from './BasicDrawerSubheaderExample'; 5 | 6 | const codeSnippet = ` 7 | 8 | 9 | Custom Content Goes here 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | `; 19 | 20 | export const BasicDrawerSubheader = (): JSX.Element => ( 21 | 22 | 23 | 24 | 28 | 29 | ); 30 | -------------------------------------------------------------------------------- /docs/src/componentDocs/DrawerSubheader/examples/BasicDrawerSubheaderExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { 4 | Drawer, 5 | DrawerBody, 6 | DrawerHeader, 7 | DrawerNavGroup, 8 | DrawerNavItem, 9 | DrawerSubheader, 10 | } from '@brightlayer-ui/react-components'; 11 | import { ExampleShowcase } from '../../../shared'; 12 | 13 | export const BasicDrawerSubheaderExample = (): JSX.Element => ( 14 | 15 | 16 | 17 | 18 | Custom Content Goes here 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | ); 29 | -------------------------------------------------------------------------------- /docs/src/componentDocs/DrawerSubheader/examples/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './BasicDrawerSubheader'; 2 | export * from './ComplexDrawerSubheader'; 3 | -------------------------------------------------------------------------------- /docs/src/componentDocs/DrawerSubheader/markdown/DrawerSubheaderAPIDocs.mdx: -------------------------------------------------------------------------------- 1 | import Box from '@mui/material/Box'; 2 | 3 | # Drawer Subheader 4 | 5 | The `` is an optional section that renders below the header and above the body of the ``. It can be used to support custom content (passed as children), such as filtering options or to display additional information. 6 | 7 | 8 | 9 | | Prop Name | Description | Type | Required | Default | 10 | | --------------------- | -------------------------------------------------- | --------- | -------- | ------- | 11 | | divider | Optional divider which appears below the Subheader | `boolean` | no | `true` | 12 | | hideContentOnCollapse | Hide subheader contents when drawer is closed | `boolean` | no | `true` | 13 | 14 | 15 | 16 | Any other props supplied will be provided to the root element ([``](https://mui.com/material-ui/api/box/)). 17 | 18 | ### Classes 19 | 20 | You can override the classes used by Brightlayer UI by passing a `classes` prop. The `` supports the following keys: 21 | 22 | 23 | 24 | | Name | Description | 25 | | ---- | ---------------------------------- | 26 | | root | Styles applied to the root element | 27 | 28 | 29 | -------------------------------------------------------------------------------- /docs/src/componentDocs/DrawerSubheader/markdown/DrawerSubheaderExamples.mdx: -------------------------------------------------------------------------------- 1 | import { BasicDrawerSubheader } from '../examples/BasicDrawerSubheader'; 2 | import { ComplexDrawerSubheader } from '../examples/ComplexDrawerSubheader'; 3 | 4 | ## Drawer Subheader 5 | 6 | The `` allows you to pass custom content that will appear directly below the drawer header. 7 | 8 | 9 | 10 | ## Interactive Subheader 11 | 12 | The subheader will accept any content but is commonly used for dropdowns or content toggles. 13 | 14 | 15 | -------------------------------------------------------------------------------- /docs/src/componentDocs/DrawerSubheader/playground/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './PlaygroundPage'; 2 | -------------------------------------------------------------------------------- /docs/src/componentDocs/EmptyState/examples/EmptyStateInCard.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { CodeBlock, CodeBlockActionButtonRow } from '../../../shared'; 4 | import { EmptyStateInCardExample } from './EmptyStateInCardExample'; 5 | 6 | const codeSnippet = ` 7 | }> 8 | Device Usage 9 | 10 | 11 | } 13 | title={'No Devices Found'} 14 | description={'Enable Location Services via Settings to receive GPS information'} 15 | actions={ 16 | 19 | } 20 | /> 21 | 22 | `; 23 | 24 | export const EmptyStateInCard = (): JSX.Element => ( 25 | 26 | 27 | 28 | 32 | 33 | ); 34 | -------------------------------------------------------------------------------- /docs/src/componentDocs/EmptyState/examples/EmptyStateWithActions.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { CodeBlock, CodeBlockActionButtonRow } from '../../../shared'; 4 | import { EmptyStateWithActionsExample } from './EmptyStateWithActionsExample'; 5 | 6 | const codeSnippet = `} 8 | title={'No Devices'} 9 | description={'Check your network connection or add a new device'} 10 | actions={ 11 | 14 | } 15 | />`; 16 | 17 | export const EmptyStateWithActions = (): JSX.Element => ( 18 | 19 | 20 | 21 | 25 | 26 | ); 27 | -------------------------------------------------------------------------------- /docs/src/componentDocs/EmptyState/examples/EmptyStateWithActionsExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Button from '@mui/material/Button'; 3 | import Add from '@mui/icons-material/Add'; 4 | import Devices from '@mui/icons-material/Devices'; 5 | import { EmptyState } from '@brightlayer-ui/react-components/core/EmptyState'; 6 | import { ExampleShowcase } from '../../../shared'; 7 | 8 | export const EmptyStateWithActionsExample = (): JSX.Element => ( 9 | 10 | } 12 | title="No Devices" 13 | description="Check your network connection or add a new device" 14 | actions={ 15 | 18 | } 19 | /> 20 | 21 | ); 22 | -------------------------------------------------------------------------------- /docs/src/componentDocs/EmptyState/examples/EmptyStateWithContent.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { CodeBlock, CodeBlockActionButtonRow } from '../../../shared'; 4 | import { EmptyStateWithContentExample } from './EmptyStateWithContentExample'; 5 | 6 | const codeSnippet = `} 8 | title={Request Permission} 9 | description={You must contact your system admin to view this content.} 10 | />`; 11 | 12 | export const EmptyStateWithContent = (): JSX.Element => ( 13 | 14 | 15 | 16 | 20 | 21 | ); 22 | -------------------------------------------------------------------------------- /docs/src/componentDocs/EmptyState/examples/EmptyStateWithContentExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReportIcon from '@mui/icons-material/Report'; 3 | import { EmptyState } from '@brightlayer-ui/react-components/core/EmptyState'; 4 | import { ExampleShowcase } from '../../../shared'; 5 | import Link from '@mui/material/Link'; 6 | import Typography from '@mui/material/Typography'; 7 | 8 | export const EmptyStateWithContentExample = (): JSX.Element => ( 9 | 10 | } 12 | // @ts-ignore 13 | title={ 14 | 15 | Request Permission 16 | 17 | } 18 | description={ 19 | 20 | You must contact your system admin to view this content. 21 | 22 | } 23 | /> 24 | 25 | ); 26 | -------------------------------------------------------------------------------- /docs/src/componentDocs/EmptyState/examples/EmptyStateWithDescription.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { CodeBlock, CodeBlockActionButtonRow } from '../../../shared'; 4 | import { EmptyStateWithDescriptionExample } from './EmptyStateWithDescriptionExample'; 5 | 6 | const codeSnippet = `} 8 | title={'Location Services Disabled'} 9 | description={'Enable Location Services via Settings to receive GPS information'} 10 | />`; 11 | 12 | export const EmptyStateWithDescription = (): JSX.Element => ( 13 | 14 | 15 | 16 | 20 | 21 | ); 22 | -------------------------------------------------------------------------------- /docs/src/componentDocs/EmptyState/examples/EmptyStateWithDescriptionExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import LocationOff from '@mui/icons-material/LocationOff'; 3 | import { EmptyState } from '@brightlayer-ui/react-components/core/EmptyState'; 4 | import { ExampleShowcase } from '../../../shared'; 5 | 6 | export const EmptyStateWithDescriptionExample = (): JSX.Element => ( 7 | 8 | } 10 | title="Location Services Disabled" 11 | description="Enable Location Services via Settings to receive GPS information" 12 | /> 13 | 14 | ); 15 | -------------------------------------------------------------------------------- /docs/src/componentDocs/EmptyState/images/emptyState.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/componentDocs/EmptyState/images/emptyState.png -------------------------------------------------------------------------------- /docs/src/componentDocs/EmptyState/markdown/EmptyStateExamples.mdx: -------------------------------------------------------------------------------- 1 | import { EmptyStateWithDescription } from '../examples/EmptyStateWithDescription'; 2 | import { EmptyStateWithActions } from '../examples/EmptyStateWithActions'; 3 | import { EmptyStateWithContent } from '../examples/EmptyStateWithContent'; 4 | 5 | ## Empty State 6 | 7 | An `` is a placeholder element that you can show when there is no data or content is missing. 8 | 9 | 10 | 11 | ## Adding an Action 12 | 13 | If you want to provide your users with a call-to-action, you can pass in custom content via the `actions` prop. 14 | 15 | 16 | 17 | ## Customizing the Title and Description 18 | 19 | The `title` and `description` props accept ReactNode elements if you need to pass in more than simple strings. 20 | 21 | 22 | -------------------------------------------------------------------------------- /docs/src/componentDocs/EmptyState/playground/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './PlaygroundPage'; 2 | -------------------------------------------------------------------------------- /docs/src/componentDocs/Hero/examples/HeroBanner.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { CodeBlock, CodeBlockActionButtonRow } from '../../../shared'; 4 | import { HeroBannerExample } from './HeroBannerExample'; 5 | 6 | const codeSnippet = ` 7 | } 9 | label="Efficiency" 10 | ChannelValueProps={{ value: '98', units: '%' }} 11 | /> 12 | `; 13 | export const HeroBanner = (): JSX.Element => ( 14 | 15 | 16 | 17 | 18 | 19 | ); 20 | -------------------------------------------------------------------------------- /docs/src/componentDocs/Hero/examples/HeroBannerExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Hero } from '@brightlayer-ui/react-components/core/Hero'; 3 | import { HeroBanner } from '@brightlayer-ui/react-components/core/HeroBanner'; 4 | import GradeA from '@brightlayer-ui/icons-mui/GradeA'; 5 | import { ExampleShowcase } from '../../../shared'; 6 | 7 | export const HeroBannerExample = (): JSX.Element => ( 8 | 9 | 10 | } 12 | label="Efficiency" 13 | ChannelValueProps={{ value: '98', units: '%' }} 14 | /> 15 | 16 | 17 | ); 18 | -------------------------------------------------------------------------------- /docs/src/componentDocs/Hero/examples/HeroWithChannelValue.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { CodeBlock, CodeBlockActionButtonRow } from '../../../shared'; 4 | import { HeroWithChannelValueExample } from './HeroWithChannelValueExample'; 5 | 6 | const codeSnippet = `}> 7 | 13 | 19 | `; 20 | 21 | export const HeroWithChannelValue = (): JSX.Element => ( 22 | 23 | 24 | 25 | 29 | 30 | ); 31 | -------------------------------------------------------------------------------- /docs/src/componentDocs/Hero/examples/HeroWithChannelValueExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ChannelValue } from '@brightlayer-ui/react-components/core/ChannelValue'; 3 | import { Hero } from '@brightlayer-ui/react-components/core/Hero'; 4 | import Schedule from '@mui/icons-material/Schedule'; 5 | import { ExampleShowcase } from '../../../shared'; 6 | 7 | export const HeroWithChannelValueExample = (): JSX.Element => ( 8 | 9 | }> 10 | 11 | 12 | 13 | 14 | ); 15 | -------------------------------------------------------------------------------- /docs/src/componentDocs/Hero/examples/HeroWithSecondaryIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { CodeBlock, CodeBlockActionButtonRow } from '../../../shared'; 4 | import { HeroWithSecondaryIconExample } from './HeroWithSecondaryIconExample'; 5 | 6 | const codeSnippet = `, 10 | value: 470, 11 | units: 'RPM', 12 | }} 13 | icon={} 14 | />`; 15 | 16 | export const HeroWithSecondaryIcon = (): JSX.Element => ( 17 | 18 | 19 | 20 | 24 | 25 | ); 26 | -------------------------------------------------------------------------------- /docs/src/componentDocs/Hero/examples/HeroWithSecondaryIconExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Hero } from '@brightlayer-ui/react-components/core/Hero'; 3 | import TrendingUp from '@mui/icons-material/TrendingUp'; 4 | import Fan from '@brightlayer-ui/icons-mui/Fan'; 5 | import { ExampleShowcase } from '../../../shared'; 6 | 7 | export const HeroWithSecondaryIconExample = (): JSX.Element => ( 8 | 9 | , 13 | value: 470, 14 | units: 'RPM', 15 | }} 16 | icon={} 17 | /> 18 | 19 | ); 20 | -------------------------------------------------------------------------------- /docs/src/componentDocs/Hero/images/heroAnatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/componentDocs/Hero/images/heroAnatomy.png -------------------------------------------------------------------------------- /docs/src/componentDocs/Hero/images/heroes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/componentDocs/Hero/images/heroes.png -------------------------------------------------------------------------------- /docs/src/componentDocs/Hero/images/trex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/componentDocs/Hero/images/trex.png -------------------------------------------------------------------------------- /docs/src/componentDocs/Hero/markdown/HeroExamples.mdx: -------------------------------------------------------------------------------- 1 | import { HeroWithChannelValue } from '../examples/HeroWithChannelValue'; 2 | import { HeroWithSecondaryIcon } from '../examples/HeroWithSecondaryIcon'; 3 | import { HeroBanner } from '../examples/HeroBanner'; 4 | import { HeroBannerWithIconSize } from '../examples/HeroBannerWithIconSize'; 5 | 6 | ## Hero 7 | 8 | A `` is used to call attention to a particular value or parameter. It adds some additional visual elements onto a [Channel Value](/components/channel-value/examples). When showing multiple heroes, they are typically placed within a Hero Banner to help with layout. 9 | 10 | 11 | 12 | ## Showing Multiple Channel Values 13 | 14 | By default, a Hero renders a single Channel Value. If you need to support multiple Channel Values, you can pass them in as children. 15 | 16 | 17 | 18 | ## Adding a Channel Value Icon 19 | 20 | If you want to include an inline icon, specify it in the Channel Value `icon` prop. 21 | 22 | 23 | 24 | ## Icon Formatting 25 | 26 | The primary icon of a Hero can be provided in a variety of formats and sizes. 27 | 28 | 29 | -------------------------------------------------------------------------------- /docs/src/componentDocs/Hero/playground/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './PlaygroundPage'; 2 | -------------------------------------------------------------------------------- /docs/src/componentDocs/InfoListItem/examples/DenseInfoListItem.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { CodeBlock, CodeBlockActionButtonRow } from '../../../shared'; 4 | import { DenseInfoListItemExample } from './DenseInfoListItemExample'; 5 | 6 | const codeSnippet = ` 7 | 8 | 9 | `; 10 | 11 | export const DenseInfoListItem = (): JSX.Element => ( 12 | 13 | 14 | 15 | 19 | 20 | ); 21 | -------------------------------------------------------------------------------- /docs/src/componentDocs/InfoListItem/examples/DenseInfoListItemExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { InfoListItem } from '@brightlayer-ui/react-components/core/InfoListItem'; 3 | import { ExampleShowcase } from '../../../shared'; 4 | 5 | export const DenseInfoListItemExample = (): JSX.Element => ( 6 | 7 | 13 | 19 | 25 | 26 | ); 27 | -------------------------------------------------------------------------------- /docs/src/componentDocs/InfoListItem/examples/InfoListItemWithIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { CodeBlock, CodeBlockActionButtonRow } from '../../../shared'; 4 | import { InfoListItemWithIconExample } from './InfoListItemWithIconExample'; 5 | 6 | const codeSnippet = `} 10 | />`; 11 | 12 | export const InfoListItemWithIcon = (): JSX.Element => ( 13 | 14 | 15 | 16 | 20 | 21 | ); 22 | -------------------------------------------------------------------------------- /docs/src/componentDocs/InfoListItem/examples/InfoListItemWithIconExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { InfoListItem } from '@brightlayer-ui/react-components/core/InfoListItem'; 3 | import { Alarm } from '@mui/icons-material'; 4 | import { ExampleShowcase } from '../../../shared'; 5 | 6 | export const InfoListItemWithIconExample = (): JSX.Element => ( 7 | 8 | } 13 | /> 14 | 15 | ); 16 | -------------------------------------------------------------------------------- /docs/src/componentDocs/InfoListItem/examples/InfoListItemWithRightComponent.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { CodeBlock, CodeBlockActionButtonRow } from '../../../shared'; 4 | import { InfoListItemWithRightComponentExample } from './InfoListItemWithRightComponentExample'; 5 | 6 | const codeSnippet = `} 10 | leftComponent={ 11 | 12 | 13 | 8:32 AM 14 | 15 | 11/21/21 16 | 17 | } 18 | rightComponent={} 19 | />`; 20 | 21 | export const InfoListItemWithRightComponent = (): JSX.Element => ( 22 | 23 | 24 | 25 | 29 | 30 | ); 31 | -------------------------------------------------------------------------------- /docs/src/componentDocs/InfoListItem/examples/InfoListItemWithRightComponentExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { InfoListItem } from '@brightlayer-ui/react-components/core/InfoListItem'; 3 | import * as colors from '@brightlayer-ui/colors'; 4 | import { BatteryChargingFull } from '@mui/icons-material'; 5 | import { ChannelValue } from '@brightlayer-ui/react-components'; 6 | import { ExampleShowcase } from '../../../shared'; 7 | import Box from '@mui/material/Box'; 8 | import Typography from '@mui/material/Typography'; 9 | 10 | export const InfoListItemWithRightComponentExample = (): JSX.Element => ( 11 | 12 | } 17 | leftComponent={ 18 | 19 | 20 | 8:32 AM 21 | 22 | 11/21/21 23 | 24 | } 25 | rightComponent={} 26 | /> 27 | 28 | ); 29 | -------------------------------------------------------------------------------- /docs/src/componentDocs/InfoListItem/examples/InfoListItemWithStatusColor.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { CodeBlock, CodeBlockActionButtonRow } from '../../../shared'; 4 | import { InfoListItemWithStatusColorExample } from './InfoListItemWithStatusColorExample'; 5 | 6 | const codeSnippet = `} 10 | avatar 11 | statusColor='#2ca618' 12 | />`; 13 | 14 | export const InfoListItemWithStatusColor = (): JSX.Element => ( 15 | 16 | 17 | 18 | 22 | 23 | ); 24 | -------------------------------------------------------------------------------- /docs/src/componentDocs/InfoListItem/examples/InfoListItemWithStatusColorExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { InfoListItem } from '@brightlayer-ui/react-components/core/InfoListItem'; 3 | import * as colors from '@brightlayer-ui/colors'; 4 | import { OfflineBolt } from '@mui/icons-material'; 5 | import { ExampleShowcase } from '../../../shared'; 6 | 7 | export const InfoListItemWithStatusColorExample = (): JSX.Element => ( 8 | 9 | } 14 | avatar 15 | statusColor={colors.green[700]} 16 | /> 17 | 18 | ); 19 | -------------------------------------------------------------------------------- /docs/src/componentDocs/InfoListItem/images/infoListItem.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/componentDocs/InfoListItem/images/infoListItem.png -------------------------------------------------------------------------------- /docs/src/componentDocs/InfoListItem/playground/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './PlaygroundPage'; 2 | -------------------------------------------------------------------------------- /docs/src/componentDocs/ListItemTag/examples/ListItemTag.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { CodeBlock, CodeBlockActionButtonRow } from '../../../shared'; 4 | import { ListItemTagExample } from './ListItemTagExample'; 5 | 6 | const codeSnippet = ` 7 | `; 8 | 9 | export const ListItemTag = (): JSX.Element => ( 10 | 11 | 12 | 13 | 17 | 18 | ); 19 | -------------------------------------------------------------------------------- /docs/src/componentDocs/ListItemTag/examples/ListItemTagExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ListItemTag } from '@brightlayer-ui/react-components/core/ListItemTag'; 3 | import { ExampleShowcase } from '../../../shared'; 4 | 5 | export const ListItemTagExample = (): JSX.Element => ( 6 | 7 | 8 | 9 | 10 | ); 11 | -------------------------------------------------------------------------------- /docs/src/componentDocs/ListItemTag/examples/ListItemTagUsingInfoListItem.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { CodeBlock, CodeBlockActionButtonRow } from '../../../shared'; 4 | import { ListItemTagUsingInfoListItemExample } from './ListItemTagUsingInfoListItemExample'; 5 | 6 | const codeSnippet = `} 8 | title="Info List Item" 9 | subtitle="with a ListItemTag component to the right" 10 | iconColor="text.primary" 11 | rightComponent={ 12 | 13 | 18 | 19 | 20 | } 21 | />`; 22 | 23 | export const ListItemTagUsingInfoListItem = (): JSX.Element => ( 24 | 25 | 26 | 27 | 31 | 32 | ); 33 | -------------------------------------------------------------------------------- /docs/src/componentDocs/ListItemTag/examples/ListItemTagWithVariants.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { CodeBlock, CodeBlockActionButtonRow } from '../../../shared'; 4 | import { ListItemTagWithVariantsExample } from './ListItemTagWithVariantsExample'; 5 | 6 | const codeSnippet = ` 7 | 8 | `; 9 | 10 | export const ListItemTagWithVariants = (): JSX.Element => ( 11 | 12 | 13 | 14 | 18 | 19 | ); 20 | -------------------------------------------------------------------------------- /docs/src/componentDocs/ListItemTag/examples/ListItemTagWithVariantsExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ListItemTag } from '@brightlayer-ui/react-components/core/ListItemTag'; 3 | import { ExampleShowcase } from '../../../shared'; 4 | import Stack from '@mui/material/Stack'; 5 | 6 | export const ListItemTagWithVariantsExample = (): JSX.Element => ( 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | ); 15 | -------------------------------------------------------------------------------- /docs/src/componentDocs/ListItemTag/examples/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './ListItemTag'; 2 | export * from './ListItemTagUsingInfoListItem'; 3 | export * from './ListItemTagWithVariants'; 4 | -------------------------------------------------------------------------------- /docs/src/componentDocs/ListItemTag/images/listItemTag.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/componentDocs/ListItemTag/images/listItemTag.png -------------------------------------------------------------------------------- /docs/src/componentDocs/ListItemTag/markdown/ListItemTagExamples.mdx: -------------------------------------------------------------------------------- 1 | import { ListItemTag, ListItemTagUsingInfoListItem, ListItemTagWithVariants } from '../examples'; 2 | 3 | ## List Item Tag 4 | 5 | A `` is a stylized Typography element used for labeling. The text and background colors are customizable via the `fontColor` and `backgroundColor` props. 6 | 7 | 8 | 9 | ## Using Variants 10 | 11 | The List Item Tag is an extension of the [MUI Typography](https://mui.com/material-ui/api/typography/) element, so you can also apply different text styles with the `variant` prop. 12 | 13 | 14 | 15 | ## Using within an Info List Item 16 | 17 | The List Item Tag commonly appears within an [Info List Item](/components/info-list-item/examples). 18 | 19 | 20 | -------------------------------------------------------------------------------- /docs/src/componentDocs/ListItemTag/playground/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './PlaygroundPage'; 2 | -------------------------------------------------------------------------------- /docs/src/componentDocs/ScoreCard/examples/ScoreCardWithHeaderSubtitle.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { CodeBlock, CodeBlockActionButtonRow } from '../../../shared'; 4 | import { ScoreCardWithHeaderSubtitleExample } from './ScoreCardWithHeaderSubtitleExample'; 5 | 6 | const codeSnippet = ` 12 | 13 | 14 | 15 | 16 | 17 | `; 18 | 19 | export const ScoreCardWithHeaderSubtitle = (): JSX.Element => ( 20 | 21 | 22 | 23 | 27 | 28 | ); 29 | -------------------------------------------------------------------------------- /docs/src/componentDocs/ScoreCard/examples/ScoreCardWithHeaderSubtitleExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ScoreCard } from '@brightlayer-ui/react-components'; 3 | import List from '@mui/material/List'; 4 | import ListItem from '@mui/material/ListItem'; 5 | import ListItemText from '@mui/material/ListItemText'; 6 | import { ExampleShowcase } from '../../../shared'; 7 | import Box from '@mui/material/Box'; 8 | 9 | export const ScoreCardWithHeaderSubtitleExample = (): JSX.Element => ( 10 | 11 | 12 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | ); 27 | -------------------------------------------------------------------------------- /docs/src/componentDocs/ScoreCard/images/scoreCard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/componentDocs/ScoreCard/images/scoreCard.png -------------------------------------------------------------------------------- /docs/src/componentDocs/ScoreCard/images/scoreCardAnatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/componentDocs/ScoreCard/images/scoreCardAnatomy.png -------------------------------------------------------------------------------- /docs/src/componentDocs/ScoreCard/images/scoreCard_alt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/componentDocs/ScoreCard/images/scoreCard_alt.png -------------------------------------------------------------------------------- /docs/src/componentDocs/ScoreCard/markdown/ScoreCardExamples.mdx: -------------------------------------------------------------------------------- 1 | import { ScoreCardWithHeaderSubtitle } from '../examples/ScoreCardWithHeaderSubtitle'; 2 | import { ScoreCardWithActions } from '../examples/ScoreCardWithActions'; 3 | import { ScoreCardWithHeros } from '../examples/ScoreCardWithHeros'; 4 | import { ScoreCardWithScoreBadge } from '../examples/ScoreCardWithScoreBadge'; 5 | 6 | ## Score Card 7 | 8 | A `` is a card component that calls attention to particular values. It is frequently seen on dashboard interfaces. 9 | 10 | 11 | 12 | ## Adding a Badge 13 | 14 | A Score Card reserves space for a `badge` element. This space is commonly used to show [Heroes](/components/hero/examples). 15 | 16 | 17 | 18 | ## Adjusting the Badge 19 | 20 | The badge position can be adjusted via the `badgeOffset` prop. 21 | 22 | 23 | 24 | ## Adding Actions 25 | 26 | A Score Card can be interactive. Actions can be added in the header through the `actionItems` prop or at the bottom of the card via the `actionRow` prop. 27 | 28 | 29 | -------------------------------------------------------------------------------- /docs/src/componentDocs/ScoreCard/playground/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './PlaygroundPage'; 2 | -------------------------------------------------------------------------------- /docs/src/componentDocs/Spacer/examples/SpacerWithFlex.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { CodeBlock, CodeBlockActionButtonRow } from '../../../shared'; 4 | import { SpacerWithFlexExample } from './SpacerWithFlexExample'; 5 | 6 | const codeSnippet = ` 7 | 1 8 | 2 9 | 3 10 | `; 11 | 12 | export const SpacerWithFlex = (): JSX.Element => ( 13 | 14 | 15 | 16 | 20 | 21 | ); 22 | -------------------------------------------------------------------------------- /docs/src/componentDocs/Spacer/examples/SpacerWithFlexExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { Spacer } from '@brightlayer-ui/react-components'; 4 | import { ExampleShowcase } from '../../../shared'; 5 | import * as colors from '@brightlayer-ui/colors'; 6 | 7 | export const SpacerWithFlexExample = (): JSX.Element => ( 8 | 9 | 10 | 11 | 1 12 | 13 | 14 | 2 15 | 16 | 17 | 3 18 | 19 | 20 | 21 | ); 22 | -------------------------------------------------------------------------------- /docs/src/componentDocs/Spacer/examples/SpacerWithPixel.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { CodeBlock, CodeBlockActionButtonRow } from '../../../shared'; 4 | import { SpacerWithPixelExample } from './SpacerWithPixelExample'; 5 | 6 | const codeSnippet = ` 7 | 8 | 25 9 | 75 10 | 200 11 | 12 | 13 | 25 14 | 50 15 | 75 16 | 17 | `; 18 | 19 | export const SpacerWithPixel = (): JSX.Element => ( 20 | 21 | 22 | 23 | 27 | 28 | ); 29 | -------------------------------------------------------------------------------- /docs/src/componentDocs/Spacer/images/spacer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/componentDocs/Spacer/images/spacer.png -------------------------------------------------------------------------------- /docs/src/componentDocs/Spacer/markdown/SpacerExamples.mdx: -------------------------------------------------------------------------------- 1 | import { SpacerWithFlex } from '../examples/SpacerWithFlex'; 2 | import { SpacerWithPixel } from '../examples/SpacerWithPixel'; 3 | 4 | ## Spacer with Flex 5 | 6 | A `` is a utility component that adds space between elements (such as [Drawer Nav Groups](/components/drawer-nav-group/examples)). The Spacer is typically used in a flex layout. 7 | 8 | 9 | 10 | ## Spacer with Pixels 11 | 12 | A Spacer can also be given fixed dimensions instead of flex for static layouts. In order to use fixed dimensions the `flex` prop must be set to zero. 13 | 14 | 15 | -------------------------------------------------------------------------------- /docs/src/componentDocs/ThreeLiner/examples/BasicThreeLiner.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { CodeBlock, CodeBlockActionButtonRow } from '../../../shared'; 4 | import { BasicThreeLinerExample } from './BasicThreeLinerExample'; 5 | 6 | const codeSnippet = ``; 7 | 8 | export const BasicThreeLiner = (): JSX.Element => ( 9 | 10 | 11 | 12 | 16 | 17 | ); 18 | -------------------------------------------------------------------------------- /docs/src/componentDocs/ThreeLiner/examples/BasicThreeLinerExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { ThreeLiner } from '@brightlayer-ui/react-components'; 4 | import { ExampleShowcase } from '../../../shared'; 5 | 6 | export const BasicThreeLinerExample = (): JSX.Element => ( 7 | 8 | 9 | 10 | 11 | 12 | ); 13 | -------------------------------------------------------------------------------- /docs/src/componentDocs/ThreeLiner/examples/ThreeLinerWithCustomContent.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { CodeBlock, CodeBlockActionButtonRow } from '../../../shared'; 4 | import { ThreeLinerWithCustomContentExample } from './ThreeLinerWithCustomContentExample'; 5 | 6 | const codeSnippet = ` 28 | } 29 | />`; 30 | 31 | export const ThreeLinerWithCustomContent = (): JSX.Element => ( 32 | 33 | 34 | 35 | 39 | 40 | ); 41 | -------------------------------------------------------------------------------- /docs/src/componentDocs/ThreeLiner/examples/ThreeLinerWithCustomContentExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { ThreeLiner, ToolbarMenu } from '@brightlayer-ui/react-components'; 4 | import { ExampleShowcase } from '../../../shared'; 5 | 6 | export const ThreeLinerWithCustomContentExample = (): JSX.Element => ( 7 | 8 | 9 | 21 | } 22 | /> 23 | 24 | 25 | ); 26 | -------------------------------------------------------------------------------- /docs/src/componentDocs/ThreeLiner/markdown/ThreeLinerExamples.mdx: -------------------------------------------------------------------------------- 1 | import { BasicThreeLiner } from '../examples/BasicThreeLiner'; 2 | import { ThreeLinerWithCustomContent } from '../examples/ThreeLinerWithCustomContent'; 3 | 4 | ## Three Liner 5 | 6 | A `` shows three lines of stylized text. It is commonly used within an [App Bar](/components/app-bar/examples). 7 | 8 | 9 | 10 | ## Adding Custom Content 11 | 12 | If you want to display more than simple strings, you can pass custom content for each line. 13 | 14 | 15 | -------------------------------------------------------------------------------- /docs/src/componentDocs/ThreeLiner/playground/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './PlaygroundPage'; 2 | -------------------------------------------------------------------------------- /docs/src/componentDocs/ToolbarMenu/examples/BasicToolbarMenu.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { CodeBlock, CodeBlockActionButtonRow } from '../../../shared'; 4 | import { BasicToolbarMenuExample } from './BasicToolbarMenuExample'; 5 | 6 | const codeSnippet = ``; 14 | 15 | export const BasicToolbarMenu = (): JSX.Element => ( 16 | 17 | 18 | 19 | 23 | 24 | ); 25 | -------------------------------------------------------------------------------- /docs/src/componentDocs/ToolbarMenu/examples/BasicToolbarMenuExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { ToolbarMenu } from '@brightlayer-ui/react-components'; 4 | import { ExampleShowcase } from '../../../shared'; 5 | 6 | export const BasicToolbarMenuExample = (): JSX.Element => ( 7 | 8 | 9 | 17 | 18 | 19 | ); 20 | -------------------------------------------------------------------------------- /docs/src/componentDocs/ToolbarMenu/examples/ToolbarMenuWithIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { CodeBlock, CodeBlockActionButtonRow } from '../../../shared'; 4 | import { ToolbarMenuWithIconExample } from './ToolbarMenuWithIconExample'; 5 | 6 | const codeSnippet = `} 9 | menuGroups={[ 10 | { 11 | items: [{ title: 'London' }, { title: 'New York' }, { title: 'New Haven' }], 12 | }, 13 | ]} 14 | />`; 15 | 16 | export const ToolbarMenuWithIcon = (): JSX.Element => ( 17 | 18 | 19 | 20 | 24 | 25 | ); 26 | -------------------------------------------------------------------------------- /docs/src/componentDocs/ToolbarMenu/examples/ToolbarMenuWithIconExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { ToolbarMenu } from '@brightlayer-ui/react-components'; 4 | import { Home } from '@mui/icons-material'; 5 | import { ExampleShowcase } from '../../../shared'; 6 | 7 | export const ToolbarMenuWithIconExample = (): JSX.Element => ( 8 | 9 | 10 | } 14 | menuGroups={[ 15 | { 16 | items: [{ title: 'London' }, { title: 'New York' }, { title: 'New Haven' }], 17 | }, 18 | ]} 19 | /> 20 | 21 | 22 | ); 23 | -------------------------------------------------------------------------------- /docs/src/componentDocs/ToolbarMenu/images/ToolbarMenuAnatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/componentDocs/ToolbarMenu/images/ToolbarMenuAnatomy.png -------------------------------------------------------------------------------- /docs/src/componentDocs/ToolbarMenu/markdown/ToolbarMenuExamples.mdx: -------------------------------------------------------------------------------- 1 | import { BasicToolbarMenu } from '../examples/BasicToolbarMenu'; 2 | import { ToolbarMenuWithIcon } from '../examples/ToolbarMenuWithIcon'; 3 | import { ToolbarMenuWithinToolbar } from '../examples/ToolbarMenuWithinToolbar'; 4 | 5 | ## Toolbar Menu 6 | 7 | A `` adds a menu to a text element. 8 | 9 | 10 | 11 | ## Adding an Icon 12 | 13 | You can add icons to the front of the Toolbar Menu. 14 | 15 | 16 | 17 | ## Common Use In Toolbars 18 | 19 | Toolbar Menus are typically used in toolbar subtitles for toggling different views, locations, etc. 20 | 21 | 22 | -------------------------------------------------------------------------------- /docs/src/componentDocs/ToolbarMenu/playground/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './PlaygroundPage'; 2 | -------------------------------------------------------------------------------- /docs/src/componentDocs/UserMenu/examples/UserMenu.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { CodeBlock, CodeBlockActionButtonRow } from '../../../shared'; 4 | import { UserMenuExample } from './UserMenuExample'; 5 | 6 | const codeSnippet = ` 7 | 8 | Toolbar Title 9 | 10 | AV} 12 | menuGroups={[ 13 | { 14 | items: [ 15 | { 16 | title: 'Log Out', 17 | icon: , 18 | }, 19 | ], 20 | }, 21 | ]} 22 | /> 23 | 24 | `; 25 | 26 | export const UserMenu = (): JSX.Element => ( 27 | 28 | 29 | 30 | 31 | 32 | ); 33 | -------------------------------------------------------------------------------- /docs/src/componentDocs/UserMenu/examples/UserMenuExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Avatar from '@mui/material/Avatar'; 3 | import { Spacer, UserMenu } from '@brightlayer-ui/react-components'; 4 | import { ExitToApp } from '@mui/icons-material'; 5 | import AppBar from '@mui/material/AppBar'; 6 | import Toolbar from '@mui/material/Toolbar'; 7 | import Typography from '@mui/material/Typography'; 8 | import { ExampleShowcase } from '../../../shared'; 9 | 10 | export const UserMenuExample = (): JSX.Element => ( 11 | 12 | 13 | 14 | Toolbar Title 15 | 16 | AV} 18 | menuGroups={[ 19 | { 20 | items: [ 21 | { 22 | title: 'Log Out', 23 | icon: , 24 | }, 25 | ], 26 | }, 27 | ]} 28 | /> 29 | 30 | 31 | 32 | ); 33 | -------------------------------------------------------------------------------- /docs/src/componentDocs/UserMenu/examples/UserMenuWithBottomSheet.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { CodeBlock, CodeBlockActionButtonRow } from '../../../shared'; 4 | import { UserMenuWithBottomSheetExample } from './UserMenuWithBottomSheetExample'; 5 | 6 | const codeSnippet = `BS} 8 | menuGroups={[ 9 | { 10 | items: [ 11 | { 12 | title: 'Settings', 13 | icon: , 14 | }, 15 | { 16 | title: 'Contact Us', 17 | icon: , 18 | }, 19 | { 20 | title: 'Log Out', 21 | icon: , 22 | }, 23 | ], 24 | }, 25 | ]} 26 | useBottomSheetAt={100000} 27 | />`; 28 | 29 | export const UserMenuWithBottomSheet = (): JSX.Element => ( 30 | 31 | 32 | 33 | 37 | 38 | ); 39 | -------------------------------------------------------------------------------- /docs/src/componentDocs/UserMenu/examples/UserMenuWithMenuHeader.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { CodeBlock, CodeBlockActionButtonRow } from '../../../shared'; 4 | import { UserMenuWithMenuHeaderExample } from './UserMenuWithMenuHeaderExample'; 5 | 6 | const codeSnippet = `MH} 8 | menuGroups={[ 9 | { 10 | items: [ 11 | { 12 | title: 'Settings', 13 | icon: , 14 | }, 15 | ], 16 | }, 17 | ]} 18 | menuTitle="Sample Title" 19 | menuSubtitle="Sample Subtitle" 20 | />`; 21 | 22 | export const UserMenuWithMenuHeader = (): JSX.Element => ( 23 | 24 | 25 | 26 | 30 | 31 | ); 32 | -------------------------------------------------------------------------------- /docs/src/componentDocs/UserMenu/examples/UserMenuWithMenuHeaderExample.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import Avatar from '@mui/material/Avatar'; 4 | import { UserMenu } from '@brightlayer-ui/react-components'; 5 | import { Settings } from '@mui/icons-material'; 6 | import { ExampleShowcase } from '../../../shared'; 7 | 8 | export const UserMenuWithMenuHeaderExample = (): JSX.Element => ( 9 | 10 | 11 | MH} 13 | menuGroups={[ 14 | { 15 | items: [ 16 | { 17 | title: 'Settings', 18 | icon: , 19 | }, 20 | ], 21 | }, 22 | ]} 23 | menuTitle="Sample Title" 24 | menuSubtitle="Sample Subtitle" 25 | /> 26 | 27 | 28 | ); 29 | -------------------------------------------------------------------------------- /docs/src/componentDocs/UserMenu/examples/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './UserMenu'; 2 | export * from './UserMenuAlternativeAvatarFormats'; 3 | export * from './UserMenuWithBottomSheet'; 4 | export * from './UserMenuWithMenuHeader'; 5 | export * from './UserMenuWithCustomHeader'; 6 | -------------------------------------------------------------------------------- /docs/src/componentDocs/UserMenu/images/trex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/componentDocs/UserMenu/images/trex.png -------------------------------------------------------------------------------- /docs/src/componentDocs/UserMenu/images/userMenuAnatomy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/componentDocs/UserMenu/images/userMenuAnatomy.png -------------------------------------------------------------------------------- /docs/src/componentDocs/UserMenu/images/userMenuAvatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/componentDocs/UserMenu/images/userMenuAvatar.png -------------------------------------------------------------------------------- /docs/src/componentDocs/UserMenu/images/userMenuOpened.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/componentDocs/UserMenu/images/userMenuOpened.png -------------------------------------------------------------------------------- /docs/src/componentDocs/UserMenu/images/userMenuOpenedMobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/componentDocs/UserMenu/images/userMenuOpenedMobile.png -------------------------------------------------------------------------------- /docs/src/componentDocs/UserMenu/markdown/UserMenuExamples.mdx: -------------------------------------------------------------------------------- 1 | import { 2 | UserMenu, 3 | UserMenuAlternativeAvatarFormats, 4 | UserMenuWithMenuHeader, 5 | UserMenuWithCustomHeader, 6 | UserMenuWithBottomSheet, 7 | } from '../examples'; 8 | 9 | ## User Menu 10 | 11 | The `` is a combination of an avatar and a [MUI Menu](https://mui.com/api/menu/) that is used to hold user account-related information and actions. It is typically located in the top corner of your application within a toolbar. 12 | 13 | 14 | 15 | ## Alternative Avatar Formats 16 | 17 | The User Menu supports multiple avatar formats (text, icon, image). 18 | 19 | 20 | 21 | ## Adding a Menu Header 22 | 23 | You can add a header to the top of the menu by passing `menuTitle` and `menuSubtitle` props. The avatar will also appear in the menu header. 24 | 25 | 26 | 27 | ## Customizing the Menu 28 | 29 | If you want to supply your own custom menu, you can pass in your own menu element via the `menu` prop. 30 | 31 | 32 | 33 | ## Using a Bottom Sheet 34 | 35 | On larger screens the User Menu opens as a dropdown, but on smaller screens it opens as a bottomsheet. You can customize the point where this transition occurs via the `useBottomSheetAt` prop (default of 600px). 36 | 37 | 38 | -------------------------------------------------------------------------------- /docs/src/componentDocs/UserMenu/playground/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './PlaygroundPage'; 2 | -------------------------------------------------------------------------------- /docs/src/contexts/drawerContextProvider.tsx: -------------------------------------------------------------------------------- 1 | import { createContext, useContext } from 'react'; 2 | 3 | type DrawerContextType = { 4 | drawerOpen: boolean; 5 | setDrawerOpen: (open: boolean) => void; 6 | }; 7 | 8 | export const DrawerContext = createContext(null); 9 | 10 | export const useDrawer = (): DrawerContextType => { 11 | const context = useContext(DrawerContext); 12 | if (context === null) { 13 | throw new Error('useDrawer must be used within a DrawerContextProvider'); 14 | } 15 | return context; 16 | }; 17 | -------------------------------------------------------------------------------- /docs/src/global.d.ts: -------------------------------------------------------------------------------- 1 | declare module '@mdx-js/react'; 2 | declare module '*.mdx'; -------------------------------------------------------------------------------- /docs/src/index.css: -------------------------------------------------------------------------------- 1 | @import 'prismjs/themes/prism-tomorrow.css'; 2 | @import 'prismjs/plugins/line-numbers/prism-line-numbers.css'; 3 | @import 'prismjs/plugins/line-highlight/prism-line-highlight.css'; 4 | 5 | html, 6 | body, 7 | #root { 8 | height: 100%; 9 | margin: 0; 10 | padding: 0; 11 | } 12 | .drawerBodyStyle { 13 | flex: 1 1 auto; 14 | } 15 | .line-highlight { 16 | margin-top: 16px; 17 | } 18 | 19 | a, 20 | a:not(.MuiTab-root):visited { 21 | font-weight: 400; 22 | } 23 | 24 | code[class*='language-'], 25 | pre[class*='language-'], 26 | code[class*='language-'] *, 27 | pre[class*='language-'] * { 28 | font-family: 'Roboto Mono', monospace !important; 29 | } 30 | 31 | pre[class*='language-'] { 32 | margin: 0; 33 | padding-left: 1em; 34 | padding-right: 1rem; 35 | } 36 | 37 | /* HIDE INCREMENT/DECREMENT BUTTONS ON NUMBER INPUTS */ 38 | /* Chrome, Safari, Edge, Opera */ 39 | input::-webkit-outer-spin-button, 40 | input::-webkit-inner-spin-button { 41 | -webkit-appearance: none; 42 | margin: 0; 43 | } 44 | 45 | /* Firefox */ 46 | input[type='number'] { 47 | -moz-appearance: textfield; 48 | } 49 | -------------------------------------------------------------------------------- /docs/src/layout/Divider.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Divider as MuiDivider, DividerProps as MuiDividerProps } from '@mui/material'; 3 | import { PAGE_WIDTH } from '../shared'; 4 | 5 | type DividerProps = MuiDividerProps & { 6 | wide?: true; 7 | }; 8 | 9 | export const Divider: React.FC = (props): JSX.Element => ( 10 | 19 | ); 20 | -------------------------------------------------------------------------------- /docs/src/layout/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './Divider'; 2 | export * from './SharedAppBar'; 3 | -------------------------------------------------------------------------------- /docs/src/markdownDocs/allComponents.mdx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { ComponentCatalogGrids } from '../pages/ComponentCatalogGrids'; 3 | 4 | {/* KEYWORDS: components typography icon devdoc catalogue catalog */} 5 | 6 | # Brightlayer UI Components 7 | 8 | Brightlayer UI offers custom component libraries to simplify building your application by implementing common use cases in Brightlayer UI and eliminating the need for multiple teams to build their own components. These components are supplementary to basic components offered by [MUI](https://mui.com/material-ui/getting-started/supported-components/). Brightlayer UI react components are available as an NPM package, [@brightlayer-ui/react-components](https://www.npmjs.com/package/@brightlayer-ui/react-components). 9 | 10 | 11 | -------------------------------------------------------------------------------- /docs/src/markdownDocs/index.tsx: -------------------------------------------------------------------------------- 1 | // Getting Started 2 | import Environment from './gettingStarted/environment.mdx'; 3 | import React from './gettingStarted/react.mdx'; 4 | import ReactTesting from './gettingStarted/reactTesting.mdx'; 5 | 6 | // Themes 7 | import ThemesOverview from './themes/overview.mdx'; 8 | import ThemesUsage from './themes/usage.mdx'; 9 | import ThemeCustomization from './themes/customization.mdx'; 10 | 11 | // Components 12 | import AllComponents from './allComponents.mdx'; 13 | 14 | // Workflows 15 | import UserAuth from './workflows/user-auth.mdx'; 16 | 17 | export { Environment, React, ReactTesting, ThemesOverview, ThemesUsage, ThemeCustomization, AllComponents, UserAuth }; 18 | -------------------------------------------------------------------------------- /docs/src/markdownDocs/workflowDocs/Components/ErrorManager/images/error-box.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/markdownDocs/workflowDocs/Components/ErrorManager/images/error-box.png -------------------------------------------------------------------------------- /docs/src/markdownDocs/workflowDocs/Components/ErrorManager/images/error-dialog.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/markdownDocs/workflowDocs/Components/ErrorManager/images/error-dialog.png -------------------------------------------------------------------------------- /docs/src/markdownDocs/workflowDocs/Components/PasswordTextField/images/password-text-field.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/markdownDocs/workflowDocs/Components/PasswordTextField/images/password-text-field.png -------------------------------------------------------------------------------- /docs/src/markdownDocs/workflowDocs/Components/PasswordTextField/passwordTextField.mdx: -------------------------------------------------------------------------------- 1 | import passwordTextField from './images/password-text-field.png'; 2 | import { CodeBlock } from '../../../../shared'; 3 | 4 | # PasswordTextField 5 | 6 | Component that renders a text field with a visibility toggle. 7 | 8 | passwordTextField 9 | 10 | ## Usage 11 | 12 | 19 | `} /> 20 | 21 | ## API 22 | 23 | See MUI [TextFieldProps](https://mui.com/components/text-fields/). 24 | -------------------------------------------------------------------------------- /docs/src/markdownDocs/workflowDocs/Components/SetPassword/images/set-password.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/markdownDocs/workflowDocs/Components/SetPassword/images/set-password.png -------------------------------------------------------------------------------- /docs/src/markdownDocs/workflowDocs/Components/WorkflowCard/images/workflow-card.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/markdownDocs/workflowDocs/Components/WorkflowCard/images/workflow-card.png -------------------------------------------------------------------------------- /docs/src/markdownDocs/workflowDocs/Components/components.mdx: -------------------------------------------------------------------------------- 1 | # Components 2 | 3 | There are a number of additional components that are exported by this workflow package, including Core components and Utility components. 4 | 5 | ## Core Components 6 | 7 | Core components provide core functionality related to the workflows in this package. It's expected that you will use them in most cases. 8 | 9 | - [RegistrationWorkflow](/workflows/registration-workflow/) 10 | 11 | ## Utility Components 12 | 13 | These utility components are used as sub-components to build some of our other screens and components. If you have a need for them elsewhere in your application, we export them for your convenience. These are most useful if you are creating custom screens to inject into the Registration Workflow. 14 | 15 | - [BasicDialog](/workflows/basic-dialog/) 16 | - [ErrorManager](/workflows/error-manager/) 17 | - [PasswordTextField](/workflows/password-text-field/) 18 | - [SetPassword](/workflows/set-password/) 19 | - [WorkflowCard\*](/workflows/workflow-card/) 20 | -------------------------------------------------------------------------------- /docs/src/markdownDocs/workflowDocs/Example/constants/index.ts: -------------------------------------------------------------------------------- 1 | export const USER_SETTINGS = 'user_settings'; 2 | export const LOCAL_USER_DATA = 'user_data'; 3 | export const REMEMBER_ME_DATA = 'remember_me_data'; 4 | -------------------------------------------------------------------------------- /docs/src/markdownDocs/workflowDocs/Example/contexts/AppContextProvider.tsx: -------------------------------------------------------------------------------- 1 | import { createContext, useContext } from 'react'; 2 | 3 | export type LoginData = { 4 | email: string; 5 | rememberMe: boolean; 6 | }; 7 | 8 | export type AppContextType = { 9 | isAuthenticated: boolean; 10 | setIsAuthenticated: (isAuthenticated: boolean) => void; 11 | loginData: LoginData; 12 | onUserAuthenticated: (args: { email: string; userId: string; rememberMe: boolean }) => void; 13 | onUserNotAuthenticated: (clearRememberMe?: boolean, overrideRememberMeEmail?: string) => void; 14 | language: string; 15 | setLanguage: (language: string) => void; 16 | setLoginData: (args: LoginData) => void; 17 | showChangePasswordDialog: boolean; 18 | setShowChangePasswordDialog: (arg: boolean) => void; 19 | }; 20 | 21 | export const AppContext = createContext(null); 22 | 23 | export const useApp = (): AppContextType => { 24 | const context = useContext(AppContext); 25 | 26 | if (context === null) { 27 | throw new Error('useApp must be used within a AppContextProvider'); 28 | } 29 | return context; 30 | }; 31 | -------------------------------------------------------------------------------- /docs/src/markdownDocs/workflowDocs/Overview/overview.mdx: -------------------------------------------------------------------------------- 1 | # React Workflows 2 | 3 | These workflows contain reusable, multi-screen components that can significantly speed up your product development using Brightlayer UI. They implement the screens and behaviors associated with common workflows and can be seamlessly integrated into your application. Simply connect them to your back-end/API, and you're ready to go. 4 | 5 | We currently have workflows available for: 6 | 7 | - [Authentication Workflow](/workflows/authentication-workflow/) 8 | - [Registration Workflow](/workflows/registration-workflow/) 9 | -------------------------------------------------------------------------------- /docs/src/markdownDocs/workflowDocs/Screens/AccountDetails/images/account-details.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/markdownDocs/workflowDocs/Screens/AccountDetails/images/account-details.png -------------------------------------------------------------------------------- /docs/src/markdownDocs/workflowDocs/Screens/ChangePassword/images/change-password.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/markdownDocs/workflowDocs/Screens/ChangePassword/images/change-password.png -------------------------------------------------------------------------------- /docs/src/markdownDocs/workflowDocs/Screens/Contact/images/contact-support.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/markdownDocs/workflowDocs/Screens/Contact/images/contact-support.png -------------------------------------------------------------------------------- /docs/src/markdownDocs/workflowDocs/Screens/CreateAccount/images/create-account.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/markdownDocs/workflowDocs/Screens/CreateAccount/images/create-account.png -------------------------------------------------------------------------------- /docs/src/markdownDocs/workflowDocs/Screens/CreatePassword/createPassword.mdx: -------------------------------------------------------------------------------- 1 | import CreatePassword from './images/create-password.png'; 2 | import { CodeBlock } from '../../../../shared'; 3 | 4 | # CreatePasswordScreen 5 | 6 | A screen that displays text fields to create a new user's password. The CreatePasswordScreen must be used within a `RegistrationContextProvider`. 7 | 8 | Create Password 9 | 10 | ## Usage 11 | 12 | 19 | 20 | 21 | `} /> 22 | 23 | ## API 24 | 25 | | Prop Name | Type | Description | Default | 26 | | ------------------ | ------------------- | ---------------------------------------------------- | ------- | 27 | | PasswordProps | `SetPasswordProps` | See [Set Password](/workflows/set-password/) | | 28 | | errorDisplayConfig | `ErrorManagerProps` | See [Error Management](/workflows/error-management/) | | 29 | 30 | This screen also extends the `WorkflowCardProps` type for updating the title, instructions, buttons, etc. See [Workflow Card](/workflows/workflow-card/) for more details. 31 | -------------------------------------------------------------------------------- /docs/src/markdownDocs/workflowDocs/Screens/CreatePassword/images/create-password.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/markdownDocs/workflowDocs/Screens/CreatePassword/images/create-password.png -------------------------------------------------------------------------------- /docs/src/markdownDocs/workflowDocs/Screens/Eula/images/eula.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/markdownDocs/workflowDocs/Screens/Eula/images/eula.png -------------------------------------------------------------------------------- /docs/src/markdownDocs/workflowDocs/Screens/ExistingAccountSuccess/images/existing-account-success.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/markdownDocs/workflowDocs/Screens/ExistingAccountSuccess/images/existing-account-success.png -------------------------------------------------------------------------------- /docs/src/markdownDocs/workflowDocs/Screens/ForgotPassword/images/forgot-password.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/markdownDocs/workflowDocs/Screens/ForgotPassword/images/forgot-password.png -------------------------------------------------------------------------------- /docs/src/markdownDocs/workflowDocs/Screens/Login/images/login.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/markdownDocs/workflowDocs/Screens/Login/images/login.png -------------------------------------------------------------------------------- /docs/src/markdownDocs/workflowDocs/Screens/OktaLogin/images/okta-login.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/markdownDocs/workflowDocs/Screens/OktaLogin/images/okta-login.png -------------------------------------------------------------------------------- /docs/src/markdownDocs/workflowDocs/Screens/RegistrationSuccess/images/registration-success.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/markdownDocs/workflowDocs/Screens/RegistrationSuccess/images/registration-success.png -------------------------------------------------------------------------------- /docs/src/markdownDocs/workflowDocs/Screens/ResetPassword/images/reset-password.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/markdownDocs/workflowDocs/Screens/ResetPassword/images/reset-password.png -------------------------------------------------------------------------------- /docs/src/markdownDocs/workflowDocs/Screens/Success/images/success.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/markdownDocs/workflowDocs/Screens/Success/images/success.png -------------------------------------------------------------------------------- /docs/src/markdownDocs/workflowDocs/Screens/VerifyCode/images/verify-email.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/markdownDocs/workflowDocs/Screens/VerifyCode/images/verify-email.png -------------------------------------------------------------------------------- /docs/src/markdownDocs/workflows/user-auth.mdx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | # React User Authentication Workflow 4 | 5 | The React User Authentication Workflow package, `@brightlayer-ui/react-auth-workflow`, provides a consistent and comprehensive UI implementation of authentication-related capabilities for use in Eaton web applications built with React. 6 | 7 | The package is intended to provide a standard, out-of-the-box experience for capabilities such as: 8 | 9 | - Login 10 | - Forgot / Reset Password 11 | - Change Password 12 | - Contact Support 13 | - Self Registration 14 | - Invitation-based Registration 15 | 16 | This package is flexible, allowing you to use the Login and Registration flows independently or in combination (or simply use individual screen components), while also providing many opportunities to customize the flows if needed for your particular application. 17 | 18 | [Read more about this package](https://github.com/etn-ccis/blui-react-workflows/tree/master/login-workflow) on GitHub. 19 | -------------------------------------------------------------------------------- /docs/src/pages/ComponentCatalogGrids.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Grid } from '@mui/material'; 3 | import { componentCatalogLinks } from './ComponentCatalogLinks'; 4 | import { InfoCard } from '../shared/components/InfoCard'; 5 | import { useNavigate } from 'react-router-dom'; 6 | 7 | export const ComponentCatalogGrids: React.FC = () => { 8 | const navigate = useNavigate(); 9 | return ( 10 | 11 | {componentCatalogLinks.map((link) => ( 12 | 13 | { 20 | navigate(`/components/${link.path}`); 21 | }} 22 | /> 23 | 24 | ))} 25 | 26 | ); 27 | }; 28 | -------------------------------------------------------------------------------- /docs/src/pages/MarkdownPage.tsx: -------------------------------------------------------------------------------- 1 | import React, { HTMLAttributes } from 'react'; 2 | import { PageContent } from './PageContent'; 3 | import { SharedAppBar } from '../layout'; 4 | 5 | export type MarkdownPageProps = HTMLAttributes & { 6 | title: string; 7 | markdown: React.FC; 8 | noPadding?: boolean; 9 | background?: string; 10 | wideLayout?: boolean; 11 | sidebar?: boolean; 12 | }; 13 | 14 | export const MarkdownPage: React.FC = (props): JSX.Element => { 15 | const { markdown: Markdown, noPadding, wideLayout, title, ...divProps } = props; 16 | 17 | return ( 18 |
19 | 20 | 21 | 22 | 23 |
24 | ); 25 | }; 26 | MarkdownPage.displayName = 'MarkdownPage'; 27 | -------------------------------------------------------------------------------- /docs/src/pages/componentPreviewPage.tsx: -------------------------------------------------------------------------------- 1 | import React, { HTMLAttributes } from 'react'; 2 | import Box from '@mui/material/Box'; 3 | import { SharedAppBar } from '../layout'; 4 | import { ComponentPreviewTabs } from '../shared'; 5 | 6 | export type ComponentPreviewPageProps = HTMLAttributes & { 7 | title: string; 8 | }; 9 | export const ComponentPreviewPage: React.FC = (props): JSX.Element => { 10 | const { title } = props; 11 | 12 | return ( 13 | 14 | 15 | 16 | 17 | ); 18 | }; 19 | -------------------------------------------------------------------------------- /docs/src/pages/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './componentPreviewPage'; 2 | export * from './MarkdownPage'; 3 | export * from './ComponentCatalogGrids'; 4 | export * from './HomePage'; 5 | -------------------------------------------------------------------------------- /docs/src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /docs/src/redux/hooks.ts: -------------------------------------------------------------------------------- 1 | import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'; 2 | import type { RootState, AppDispatch } from './store'; 3 | 4 | export const useAppDispatch: () => AppDispatch = useDispatch; 5 | export const useAppSelector: TypedUseSelectorHook = useSelector; 6 | -------------------------------------------------------------------------------- /docs/src/redux/store.tsx: -------------------------------------------------------------------------------- 1 | import { configureStore } from '@reduxjs/toolkit'; 2 | import appStateReducer from './appState'; 3 | 4 | export const store = configureStore({ 5 | reducer: { 6 | appState: appStateReducer, 7 | }, 8 | }); 9 | 10 | // Infer the `RootState` and `AppDispatch` types from the store itself 11 | export type RootState = ReturnType; 12 | // Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState} 13 | export type AppDispatch = typeof store.dispatch; 14 | -------------------------------------------------------------------------------- /docs/src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | import { ReportHandler } from 'web-vitals'; 3 | 4 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 5 | if (onPerfEntry && onPerfEntry instanceof Function) { 6 | void import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 7 | getCLS(onPerfEntry); 8 | getFID(onPerfEntry); 9 | getFCP(onPerfEntry); 10 | getLCP(onPerfEntry); 11 | getTTFB(onPerfEntry); 12 | }); 13 | } 14 | }; 15 | 16 | export default reportWebVitals; 17 | -------------------------------------------------------------------------------- /docs/src/router/GoogleAnalyticsWrapper.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from 'react'; 2 | import { useLocation } from 'react-router-dom'; 3 | import ReactGA from 'react-ga4'; 4 | 5 | export const GoogleAnalyticsWrapper: React.FC = () => { 6 | const location = useLocation(); 7 | useEffect(() => { 8 | ReactGA.send({ hitType: 'pageview', page: window.location.pathname + window.location.search }); 9 | }, [location.pathname, location.search]); 10 | 11 | return null; 12 | }; 13 | -------------------------------------------------------------------------------- /docs/src/router/ScrollToTop.tsx: -------------------------------------------------------------------------------- 1 | import { useEffect } from 'react'; 2 | import { useLocation } from 'react-router'; 3 | 4 | export const ScrollToTop = (): any => { 5 | const { pathname, hash } = useLocation(); 6 | useEffect(() => { 7 | // if an anchor link is present, scroll to the anchor link; 8 | // else scroll the page to the top 9 | 10 | if (hash) { 11 | const id = hash.replace('#', ''); 12 | const headline = document.getElementById(id); 13 | if (headline) { 14 | window.scrollTo(0, headline.offsetTop); 15 | } else { 16 | window.scrollTo(0, 0); 17 | } 18 | } else { 19 | window.scrollTo(0, 0); 20 | } 21 | }, [pathname, hash]); 22 | 23 | return null; 24 | }; 25 | -------------------------------------------------------------------------------- /docs/src/router/main.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Navigate, Route } from 'react-router-dom'; 3 | import { pageDefinitions, RouteConfig } from '../__configuration__/navigationMenu/navigation'; 4 | 5 | const buildRoutes = (routes: RouteConfig[]): JSX.Element[] => 6 | routes.map((route) => { 7 | const subPages = [...(route.pages || []), ...(route.children || [])]; 8 | return ( 9 | 10 | {buildRoutes(subPages)} 11 | {subPages.length > 0 && ( 12 | <> 13 | } /> 14 | } /> 15 | 16 | )} 17 | 18 | ); 19 | }); 20 | 21 | export const MainRouter = ( 22 | <> 23 | {buildRoutes(pageDefinitions)} 24 | } /> 25 | 26 | ); 27 | -------------------------------------------------------------------------------- /docs/src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /docs/src/shared/ExampleShowcase.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Box, { BoxProps } from '@mui/material/Box'; 3 | import { Theme, SxProps, useTheme } from '@mui/material/styles'; 4 | import * as colors from '@brightlayer-ui/colors'; 5 | 6 | export type ExampleShowcaseProps = BoxProps & { 7 | sx?: SxProps; 8 | }; 9 | 10 | export const ExampleShowcase = React.forwardRef((props: ExampleShowcaseProps, ref): JSX.Element => { 11 | const theme = useTheme(); 12 | return ( 13 | 27 | {props.children} 28 | 29 | ); 30 | }); 31 | -------------------------------------------------------------------------------- /docs/src/shared/FullCodeOnGithubButton.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Button from '@mui/material/Button'; 3 | import GitHubIcon from '@mui/icons-material/GitHub'; 4 | import { SxProps, Theme } from '@mui/material/styles'; 5 | import { DOCS_BRANCH } from './constants'; 6 | 7 | type FullCodeOnGithubProps = { 8 | url: string; 9 | sx?: SxProps; 10 | }; 11 | 12 | export const FullCodeOnGithub: React.FC = (props) => ( 13 | 22 | ); 23 | -------------------------------------------------------------------------------- /docs/src/shared/Logo.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | type BluiSVGProps = { 4 | className?: string; 5 | color?: string; 6 | size?: number; 7 | }; 8 | export const BluiSVG: React.FC = (props) => { 9 | const { color, size, className } = props; 10 | return ( 11 | 12 | 13 | 22 | 23 | ); 24 | }; 25 | -------------------------------------------------------------------------------- /docs/src/shared/TabPanel.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Typography from '@mui/material/Typography'; 3 | import Box, { BoxProps } from '@mui/material/Box'; 4 | 5 | type TabPanelProps = BoxProps & { 6 | children?: React.ReactNode; 7 | index: number; 8 | value: number; 9 | }; 10 | 11 | export const TabPanel = (props: TabPanelProps): JSX.Element => { 12 | const { children, value, index, ...other } = props; 13 | 14 | return ( 15 | 28 | ); 29 | }; 30 | -------------------------------------------------------------------------------- /docs/src/shared/components/InfoCard/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './InfoCard'; 2 | -------------------------------------------------------------------------------- /docs/src/shared/constants.ts: -------------------------------------------------------------------------------- 1 | export const DRAWER_WIDTH = 300; 2 | 3 | export const PADDING = 24; 4 | 5 | export const PAGE_WIDTH = { 6 | WIDE: 1280, // medias, components 7 | REGULAR: 766 + PADDING * 2, // text 8 | }; 9 | 10 | export const CTA_BUTTON = { 11 | WIDTH: 320 - PADDING * 2, 12 | HEIGHT: 154, 13 | }; 14 | 15 | export const REGULAR_WIDTH_STYLE = { 16 | marginLeft: 'auto', 17 | marginRight: 'auto', 18 | maxWidth: PAGE_WIDTH.REGULAR, 19 | }; 20 | 21 | export const DOCS_BRANCH = process.env.REACT_APP_BRANCH || 'master'; // default to master if there is no value 22 | -------------------------------------------------------------------------------- /docs/src/shared/images/farm.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/shared/images/farm.jpg -------------------------------------------------------------------------------- /docs/src/shared/images/topology_40.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/etn-ccis/blui-react-component-library/796a03fa829256d1919440fe2d69cb2312e7abc1/docs/src/shared/images/topology_40.png -------------------------------------------------------------------------------- /docs/src/shared/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './CodeBlock'; 2 | export * from './ComponentPreviewTabs'; 3 | export * from './constants'; 4 | export * from './CopyToClipboardButton'; 5 | export * from './utilities'; 6 | export * from './Logo'; 7 | export * from './TabPanel'; 8 | export * from './FullCodeOnGithubButton'; 9 | export * from './CodeBlockActionButtonRow'; 10 | export * from './ExampleShowcase'; 11 | export * from './CallToActionButton'; 12 | export * from './theme'; 13 | export * from './markdown'; 14 | -------------------------------------------------------------------------------- /docs/src/shared/markdown/ForMoreDetailsOnStylingOptions.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { DOCS_BRANCH } from '../constants'; 3 | import Box from '@mui/material/Box'; 4 | import { useTheme } from '@mui/material'; 5 | 6 | // This blurb gets strange styling when used directly in markdown files 7 | export const ForMoreDetailsOnStylingOptions = (): JSX.Element => { 8 | const theme = useTheme(); 9 | 10 | return ( 11 | 12 | For more details on styling options check out our{' '} 13 | 17 | Styling Guide 18 | 19 | . 20 | 21 | ); 22 | }; 23 | -------------------------------------------------------------------------------- /docs/src/shared/markdown/index.tsx: -------------------------------------------------------------------------------- 1 | export * from './ForMoreDetailsOnStylingOptions'; 2 | -------------------------------------------------------------------------------- /docs/src/shared/theme/componentList.tsx: -------------------------------------------------------------------------------- 1 | import { AppBarDemo } from './demos/AppBarDemo'; 2 | import { ButtonDemo } from './demos/ButtonDemo'; 3 | import { TextFieldDemo } from './demos/TextFieldDemo'; 4 | import { SwitchDemo } from './demos/SwitchDemo'; 5 | import { ChipDemo } from './demos/ChipDemo'; 6 | import { ListDemo } from './demos/ListDemo'; 7 | import { DialogDemo } from './demos/DialogDemo'; 8 | import { ScoreCardDemo } from './demos/ScoreCardDemo'; 9 | import { SnackbarDemo } from './demos/SnackbarDemo'; 10 | import { BottomNavigationDemo } from './demos/BottomNavigationDemo'; 11 | import { EmptyStateDemo } from './demos/EmptyStateDemo'; 12 | 13 | export const componentNameList: string[] = [ 14 | 'App Bar with Tab Bar', 15 | 'Bottom Navigation', 16 | 'Button', 17 | 'Chip', 18 | 'Dialog', 19 | 'Empty State', 20 | 'List', 21 | 'Scorecard', 22 | 'Snackbar', 23 | 'Switch', 24 | 'Text Field', 25 | ]; 26 | 27 | export const componentList: JSX.Element[] = [ 28 | AppBarDemo, 29 | BottomNavigationDemo, 30 | ButtonDemo, 31 | ChipDemo, 32 | DialogDemo, 33 | EmptyStateDemo, 34 | ListDemo, 35 | ScoreCardDemo, 36 | SnackbarDemo, 37 | SwitchDemo, 38 | TextFieldDemo, 39 | ]; 40 | -------------------------------------------------------------------------------- /docs/src/shared/theme/demos/BottomNavigationDemo.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { BottomNavigation, BottomNavigationAction } from '@mui/material'; 3 | import { Dashboard } from '@mui/icons-material'; 4 | import { Device, MapMarkerThree } from '@brightlayer-ui/icons-mui'; 5 | 6 | export const BottomNavigationDemo: JSX.Element = ( 7 | 8 | } /> 9 | } /> 10 | } /> 11 | 12 | ); 13 | -------------------------------------------------------------------------------- /docs/src/shared/theme/demos/DialogDemo.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Button, Paper, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@mui/material'; 3 | 4 | export const DialogDemo: JSX.Element = ( 5 | 6 | Enjoy Brightlayer UI so far? 7 | 8 | 9 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | ); 18 | -------------------------------------------------------------------------------- /docs/src/shared/theme/demos/EmptyStateDemo.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { EmptyState } from '@brightlayer-ui/react-components'; 3 | import { Box, Button } from '@mui/material'; 4 | import { HelpOutline, Add } from '@mui/icons-material'; 5 | 6 | export const EmptyStateDemo: JSX.Element = ( 7 | 8 | } 10 | title={'No Folders Found'} 11 | description={ 12 | 'Folders let you keep your teams’ documents organized all in one place. Create a new folder to add files.' 13 | } 14 | actions={ 15 | 18 | } 19 | /> 20 | 21 | ); 22 | -------------------------------------------------------------------------------- /docs/src/shared/theme/demos/SnackbarDemo.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Box, IconButton, Snackbar } from '@mui/material'; 3 | import { Delete } from '@mui/icons-material'; 4 | 5 | export const SnackbarDemo: JSX.Element = ( 6 | 7 | 12 | 13 | 14 | } 15 | sx={{ position: 'static', transform: 'none' }} 16 | /> 17 | 18 | ); 19 | -------------------------------------------------------------------------------- /docs/src/shared/theme/index.ts: -------------------------------------------------------------------------------- 1 | export * from './ThemeExplorer'; 2 | -------------------------------------------------------------------------------- /docs/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "esModuleInterop": true, 8 | "allowSyntheticDefaultImports": true, 9 | "strict": true, 10 | "forceConsistentCasingInFileNames": true, 11 | "noFallthroughCasesInSwitch": true, 12 | "module": "esnext", 13 | "moduleResolution": "node", 14 | "resolveJsonModule": true, 15 | "isolatedModules": true, 16 | "noEmit": true, 17 | "jsx": "react-jsx" 18 | }, 19 | "include": ["src"] 20 | } 21 | -------------------------------------------------------------------------------- /firebase.json: -------------------------------------------------------------------------------- 1 | { 2 | "hosting": { 3 | "public": "docs/build", 4 | "ignore": ["firebase.json", "**/.*", "**/node_modules/**"], 5 | "rewrites": [ 6 | { 7 | "source": "**", 8 | "destination": "/index.html" 9 | } 10 | ] 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /scripts/buildComponents.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | BLUE='\033[0;34m' 3 | BBLUE='\033[1;34m' #BOLD 4 | PURPLE='\033[0;35m' 5 | RED='\033[0;31m' 6 | BRED='\033[1;31m' #BOLD 7 | GREEN='\033[0;32m' 8 | BGREEN='\033[1;32m' #BOLD 9 | GRAY='\033[1;30m' 10 | NC='\033[0m' # No Color 11 | 12 | # Remove previous build 13 | rm -rf ./dist 14 | 15 | cd ./components 16 | yarn && yarn build 17 | cd .. 18 | 19 | echo -e "${BLUE}Copying Package Resources${NC}" 20 | cp -r components/package.json ./dist/package.json 21 | cp -r README.md ./dist/README.md 22 | cp -r LICENSE ./dist/LICENSE 23 | cp -r components/LICENSES.json ./dist/LICENSES.json 24 | cp -r CHANGELOG.md ./dist/CHANGELOG.md 25 | 26 | echo -e "${GRAY}Complete${NC}\r\n" 27 | -------------------------------------------------------------------------------- /scripts/initializeSubmodule.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | BLUE='\033[0;34m' 3 | BBLUE='\033[1;34m' #BOLD 4 | PURPLE='\033[0;35m' 5 | RED='\033[0;31m' 6 | BRED='\033[1;31m' #BOLD 7 | GREEN='\033[0;32m' 8 | BGREEN='\033[1;32m' #BOLD 9 | GRAY='\033[1;30m' 10 | NC='\033[0m' # No Color 11 | 12 | echo -e "${BLUE}Initializing Showcase Submodule...${NC}" 13 | if [ ! -f ./demos/showcase/package.json ]; 14 | then git submodule init && git submodule update; 15 | else echo -e "${BBLUE}Already initialized${NC}" && exit 0; 16 | fi 17 | echo -e "${BBLUE}Initialization Complete${NC}\r\n" 18 | --------------------------------------------------------------------------------