This repo has been archived and moved here.

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)	CodeSandbox
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.	CodeSandbox
Action List	A list with actions available on individual list items.	CodeSandbox
Action List In Button Panel	A list with global actions in its own button panel.	CodeSandbox
Action List In Panel Header	A list with global actions in the panel header.	CodeSandbox
Action List With Inline Actions	A list with inline actions available on individual list items.	CodeSandbox
Action List With Local Actions	A list with local actions available on individual list items.	CodeSandbox
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.	CodeSandbox
Collapsible App Bar	At the top of the page, the appbar is large, but as you scroll, it changes to a standard appbar.	CodeSandbox
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.	CodeSandbox
Contextual Action Bar	Contextual action bar to provide contextual actions to selected items.	CodeSandbox
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.	CodeSandbox
Data List	A basic list dynamically built from a JSON data object.	CodeSandbox
Toolbar Menu	The ToolbarMenu component is used to display a dropdown menu with label, primarily inside of <Toolbar> or Card Header elements.	CodeSandbox
Dynamic Stepper	A dynamic stepper that allows the user to create an arbitrary number of steps for a procedure.	CodeSandbox
Fixed Length Passcode	Form validation starts after specific length of passcode	CodeSandbox
Forms In a List	Input validations in a list	CodeSandbox
Forms In a Table	Validate inputs inside table which works on larger screens and collapse the data into list at mobile size.	CodeSandbox
Internationalization	A simple shopping app that allows the user to switch between the different languages including the languages that are right to left.	CodeSandbox
List As A Tree Structure	A list that navigates a tree-like structure.	CodeSandbox
Multiselect List	A multiselect list with group actions.	CodeSandbox
Page-Wide Search	Page-wide search can be placed below the primary app bar when searching content on a single page or screen.	CodeSandbox
Password	Form Validation such as verifying phone number.	CodeSandbox
Phone Number Format	Validate phone number as per format.	CodeSandbox
Progress Bars	Use progress bar where progress is discrete / measurable	CodeSandbox
Progress Bars (Indeterminate)	Use Progress bar with indeterminate variation	CodeSandbox
Responsive Table	A responsive table that works on larger screens and collapse the data into list at mobile size.	CodeSandbox
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.	CodeSandbox
Sectioned Form	Validate form once you submit complete form.	CodeSandbox
Skeleton Loader	When your application is loading structured data, use skeletons that mimic the data that will eventually be loaded.	CodeSandbox
Sortable List	A sortable list with drag handles.	CodeSandbox
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.	CodeSandbox
Status List	A basic list with status stripes for list items.	CodeSandbox
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.	CodeSandbox

Running Locally

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

git clone https://github.com/brightlayer-ui/react-design-patterns.git
cd 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