Material Bread
v0.2.10
Home
Getting Started
React Native
Web
Electron
MacOS
Windows
NextJs
Expo
Vue Native
Style
Font
Icons
Theme
Components
Appbar
Searchbar
Appbar Bottom
Avatar
Backdrop
Badge
Banner
Bottom Navigation
Bottom Navigation Item
Button
Card
CardActions
CardContent
CardHeader
CardMedia
Checkbox
Chip
DataTable
DataTableCell
DataTableHeader
DataTablePagination
DataTableRow
Dialog
Divider
Drawer
DrawerHeader
DrawerItem
DrawerSection
DrawerBottom
Fab
Speed dial
Icon
IconButton
List
ListExpand
ListItem
ListSection
Menu
MenuItem
Paper
Progress Bar
Progress Circle
Radio Button
Ripple
Select
SheetBottom
SheetSide
Slider
Snackbar
SwipeNav
Switch
Tabs
Tab
Textfield
Searchfield
ToggleButton
ToggleButtonGroup
Tooltip
Typography
Utils
Anchor
Color
Hoverable
Shadow
Storybook
Showcase
Contributing
Library
Docs
About

Contributing to Library

All contributions are welcome, please follow the guide below to get started

Getting Started #

This project uses Storybook as it's development environment for both React Native and the web. Storybook has it's own simple webserver to run the web components, but the project uses a bare React Native app to run it's components and the Storybook environment.
The main project folders are as follows:
folder
description
.storybook
storybook config
docs
documentation site
public
storybook web files
src
component library
Essentially the project files are in the root of the folder, and all documtation files live in the docs folder.

Setup #

You can follow the React Native Docs to get React Native installed if you need to. Once you have React Native set up, follow these steps to get the project set up:
  1. Fork material-bread repo on github
  2. Clone the fork to your machine git clone git@github.com:copypearce/material-bread.git
  3. Cd into project cd material-bread
  4. Install dependencies by running npm i or yarn
  5. Start up react native app by running react-native run-ios or react-native run-android
  6. Start up web project by openning a new terminal tab and running npm run storybook-web
The app should be running on whichever simulator you set up, and the web app should be available at localhost:9009 .

Developing #

Components all live in src/Components , and they're displayed in the dev environment in a corresponding file src/storybook/stories/index .
Use the following steps to create a new component:
  1. Create a basic component folder and file in src/Components/ComponentName named ComponentName.js .
  2. Import withTheme and Wrap component in the HOC theme component as such export default withTheme(ComponentName);
  3. Add component to src/index.js as such export { default as ComponentName } from './Components/ComponentName/ComponentName' .
  4. Create component file in src/Components/ComponentName.stories.js as shown in the other files
  5. Add component story to src/storybook/stories/index as such export { default as ComponentName } from '../Components/ComponentName/ComponentName.stories.js' .
You should now see your component listed in your Storybook environment on the app or the web.

Storybook Docs #

The storybook environment houses all of the components for development, but its also used in the docs to display more variations. This means the storybook stories you write will appear in the docs for users to play with. For more information about writing storybook stories, refer to storybook documentation