React Design Patterns

This repository holds the source code examples for Brightlayer UI design patterns, written in React. The code is organized to make it easy to copy and paste the examples into your own projects.

Current Patterns

Pattern	Description	Interactive Demo
Account Menu In A Navigation Drawer	This involves placing an avatar in the drawer header along with basic information about the user (e.g., their name, username, email address, job title and / or organization affiliation)	Demo
Account Menu In An App Bar	The user menu appears as an Avatar in the App Bar which opens a menu with the user-related content.	Demo
Action List	A list with actions available on individual list items.	Demo
Action List In Button Panel	A list with global actions in its own button panel.	Demo
Action List In Panel Header	A list with global actions in the panel header.	Demo
Action List With Inline Actions	A list with inline actions available on individual list items.	Demo
Action List With Local Actions	A list with local actions available on individual list items.	Demo
Basic Bottom Sheet	At the top of the page, the app bar has a 3dot icon on right. When clicking on 3dot icon bottomsheet slides up from bottom of the page, revealing global actions that affect the whole page.	Demo
Collapsible App Bar	At the top of the page, the appbar is large, but as you scroll, it changes to a standard appbar.	Demo
Complex Bottom Sheet	At the top of the page, the app bar has a 3dot icon on right. When clicking on 3dot icon bottomsheet slides up from bottom of the page, revealing filters that affect the whole page.	Demo
Contextual Action Bar	Contextual action bar to provide contextual actions to selected items.	Demo
Contextual Spinners	If you need to wait for a server response to validate inputs in a form (after clicking the submit button), you should disable the submit button and replace its label with a spinner.	Demo
Data List	A basic list dynamically built from a JSON data object.	Demo
Toolbar Menu	The ToolbarMenu component is used to display a dropdown menu with label, primarily inside of <Toolbar> or Card Header elements.	Demo
Dynamic Stepper	A dynamic stepper that allows the user to create an arbitrary number of steps for a procedure.	Demo
Fixed Length Passcode	Form validation starts after specific length of passcode	Demo
Forms In a List	Input validations in a list	Demo
Forms In a Table	Validate inputs inside table which works on larger screens and collapse the data into list at mobile size.	Demo
Internationalization	A simple shopping app that allows the user to switch between the different languages including the languages that are right to left.	Demo
List As A Tree Structure	A list that navigates a tree-like structure.	Demo
Multiselect List	A multiselect list with group actions.	Demo
Page-Wide Search	Page-wide search can be placed below the primary app bar when searching content on a single page or screen.	Demo
Password	Form Validation such as verifying phone number.	Demo
Phone Number Format	Validate phone number as per format.	Demo
Progress Bars	Use progress bar where progress is discrete / measurable	Demo
Progress Bars (Indeterminate)	Use Progress bar with indeterminate variation	Demo
Responsive Table	A responsive table that works on larger screens and collapse the data into list at mobile size.	Demo
Search Bar	At the top of the page, the app bar has a search icon on the right. After clicking on the search icon, the search bar slides in from the right of the app bar.	Demo
Sectioned Form	Validate form once you submit complete form.	Demo
Skeleton Loader	When your application is loading structured data, use skeletons that mimic the data that will eventually be loaded.	Demo
Sortable List	A sortable list with drag handles.	Demo
Spinner Overlay	Spinner overlays make use of a semi-transparent overlay with a large, centered spinner. It is useful when you want to block user interaction with the screen (or a section of the screen) while processing occurs.	Demo
Status List	A basic list with status stripes for list items.	Demo
Verify on Submit	This type of verification is common when the checks cannot be performed on the client, such as making an API call to verify a registration code, check user login credentials, or search for a device on the network.	Demo

Running Locally

To run this project (with all patterns) locally, first clone the repository:

git clone https://github.com/etn-ccis/blui-react-design-patterns.git
cd blui-react-design-patterns

Then you may run yarn && yarn start to start a local server.

Folder Structure

All our design patterns are located inside /src/pages.

└── /src
    |── index.tsx                           // the root file that renders the application
    |── App.tsx                             // the file for the global layout
    |── LandingPage.tsx                     // the landing page
    |── style.css                           // global css stylesheet
    |── /assets                             // constants used by the global layout
    |── /router                             // the main application router
    |── /redux                              // actions, reducers, and store
    └── /pages                              // individual design patterns