Skip to content

Commit 4145d8f

Browse files
shaurya947shaurya947
committed
Add import statements to every component's doc page
1 parent 49feb2e commit 4145d8f

26 files changed

+529
-224
lines changed

‎docs/src/app/components/pages/components/app-bar.jsx‎

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
let React = require('react');
2-
let { AppBar, DropDownMenu } = require('material-ui');
3-
let IconButton = require('icon-button');
4-
let NavigationClose = require('svg-icons/navigation/close');
5-
let FlatButton = require('flat-button');
6-
let ComponentDoc = require('../../component-doc');
7-
let CodeExample = require('../../code-example/code-example');
8-
let Code = require('app-bar-code');
1+
const React = require('react');
2+
const { AppBar, DropDownMenu, Paper } = require('material-ui');
3+
const IconButton = require('icon-button');
4+
const NavigationClose = require('svg-icons/navigation/close');
5+
const FlatButton = require('flat-button');
6+
const ComponentDoc = require('../../component-doc');
7+
const CodeExample = require('../../code-example/code-example');
8+
const CodeBlock = require('../../code-example/code-block');
9+
const Code = require('app-bar-code');
910
const IconMenu = require('menus/icon-menu');
1011
const MenuItem = require('menus/menu-item');
1112
const MoreVertIcon = require('svg-icons/navigation/more-vert');
@@ -113,6 +114,16 @@ export default class AppBarPage extends React.Component {
113114
name="AppBar"
114115
desc={this.desc}
115116
componentInfo={this.componentInfo}>
117+
118+
<Paper style = {{marginBottom: '22px'}}>
119+
<CodeBlock>
120+
{
121+
'//Import statement:\nconst AppBar = require(\'material-ui/lib/app-bar\');\n\n' +
122+
'//See material-ui/lib/index.js for more\n'
123+
}
124+
</CodeBlock>
125+
</Paper>
126+
116127
<CodeExample code={Code}>
117128
<AppBar
118129
title="Title"

‎docs/src/app/components/pages/components/avatars.jsx‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
let React = require('react');
2-
let { Avatar, FontIcon, List, ListItem, Styles } = require('material-ui');
3-
let ComponentDoc = require('../../component-doc');
4-
let FileFolder = require('svg-icons/file/folder');
5-
let { Colors } = Styles;
6-
let Code = require('avatars-code');
7-
let CodeExample = require('../../code-example/code-example');
1+
const React = require('react');
2+
const { Avatar, FontIcon, List, ListItem, Styles, Paper } = require('material-ui');
3+
const ComponentDoc = require('../../component-doc');
4+
const FileFolder = require('svg-icons/file/folder');
5+
const { Colors } = Styles;
6+
const Code = require('avatars-code');
7+
const CodeExample = require('../../code-example/code-example');
8+
const CodeBlock = require('../../code-example/code-block');
89

910

1011
export default class AvatarsPage extends React.Component {
@@ -70,6 +71,16 @@ export default class AvatarsPage extends React.Component {
7071
name="Avatars"
7172
desc={desc}
7273
componentInfo={componentInfo}>
74+
75+
<Paper style = {{marginBottom: '22px'}}>
76+
<CodeBlock>
77+
{
78+
'//Import statement:\nconst Avatar = require(\'material-ui/lib/avatar\');\n\n' +
79+
'//See material-ui/lib/index.js for more\n'
80+
}
81+
</CodeBlock>
82+
</Paper>
83+
7384
<CodeExample code={Code}>
7485
<List>
7586
<ListItem leftAvatar={imageAvatar} disabled={true}>Image Avatar</ListItem>

‎docs/src/app/components/pages/components/badge.jsx‎

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
let React = require('react');
2-
let { FontIcon, IconButton, Badge } = require('material-ui');
3-
let ComponentDoc = require('../../component-doc');
4-
let Code = require('badge-code');
5-
let CodeExample = require('../../code-example/code-example');
1+
const React = require('react');
2+
const { FontIcon, IconButton, Badge, Paper } = require('material-ui');
3+
const ComponentDoc = require('../../component-doc');
4+
const Code = require('badge-code');
5+
const CodeExample = require('../../code-example/code-example');
66
const NotificationsIcon = require('svg-icons/social/notifications');
77
const ShoppingCartIcon = require('svg-icons/action/shopping-cart');
88
const FolderIcon = require('svg-icons/file/folder-open');
99
const UploadIcon = require('svg-icons/file/cloud-upload');
10+
const CodeBlock = require('../../code-example/code-block');
1011

1112
export default class BadgePage extends React.Component {
1213
constructor(props) {
@@ -59,6 +60,16 @@ export default class BadgePage extends React.Component {
5960
name="Badge"
6061
desc={this.desc}
6162
componentInfo={this.componentInfo}>
63+
64+
<Paper style = {{marginBottom: '22px'}}>
65+
<CodeBlock>
66+
{
67+
'//Import statement:\nconst Badge = require(\'material-ui/lib/badge\');\n\n' +
68+
'//See material-ui/lib/index.js for more\n'
69+
}
70+
</CodeBlock>
71+
</Paper>
72+
6273
<CodeExample code={Code}>
6374

6475
<Badge badgeContent={4} primary={true}>

‎docs/src/app/components/pages/components/buttons.jsx‎

Lines changed: 26 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,27 @@
1-
let React = require('react');
2-
let ComponentDoc = require('../../component-doc');
3-
let mui = require('material-ui');
4-
let ToggleStar = require('svg-icons/toggle/star');
1+
const React = require('react');
2+
const ComponentDoc = require('../../component-doc');
3+
const mui = require('material-ui');
4+
const ToggleStar = require('svg-icons/toggle/star');
55

6-
let {
6+
const {
77
ClearFix,
88
FlatButton,
99
FloatingActionButton,
1010
FontIcon,
1111
RaisedButton,
12+
Paper,
1213
Styles,
1314
Tab,
1415
Tabs,
1516
Utils,
1617
} = mui;
17-
let extend = Utils.Extend;
18-
let { Colors, Typography } = Styles;
19-
let RaisedButtonCode = require('raised-button-code');
20-
let FloatingActionButtonCode = require('floating-action-button-code');
21-
let FlatButtonCode = require('flat-button-code');
22-
let CodeExample = require('../../code-example/code-example');
18+
const extend = Utils.Extend;
19+
const { Colors, Typography } = Styles;
20+
const RaisedButtonCode = require('raised-button-code');
21+
const FloatingActionButtonCode = require('floating-action-button-code');
22+
const FlatButtonCode = require('flat-button-code');
23+
const CodeExample = require('../../code-example/code-example');
24+
const CodeBlock = require('../../code-example/code-block');
2325

2426

2527
export default class ButtonPage extends React.Component {
@@ -352,12 +354,25 @@ export default class ButtonPage extends React.Component {
352354
return (
353355
<div>
354356
<h2 style={styles.headline}>Buttons</h2>
357+
358+
<Paper style = {{marginBottom: '22px'}}>
359+
<CodeBlock>
360+
{
361+
'//Import statements:\nconst FlatButton = require(\'material-ui/lib/flat-button\');\n' +
362+
'const RaisedButton = require(\'material-ui/lib/raised-button\');\n' +
363+
'const FloatingActionButton = require(\'material-ui/lib/floating-action-button\');\n\n' +
364+
'//See material-ui/lib/index.js for more\n'
365+
}
366+
</CodeBlock>
367+
</Paper>
368+
355369
<Tabs>
356370
<Tab label="Flat Buttons">
357371
<ComponentDoc
358372
name=""
359373
desc={this.desc}
360374
componentInfo={this.componentInfo.slice(0, 1)}>
375+
361376
<CodeExample code={FlatButtonCode}>
362377
<div style={styles.group}>
363378
<div style={styles.container}>

‎docs/src/app/components/pages/components/cards.jsx‎

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
let React = require('react');
2-
let mui = require('material-ui');
3-
let ComponentDoc = require('../../component-doc');
4-
let CodeExample = require('../../code-example/code-example');
1+
const React = require('react');
2+
const mui = require('material-ui');
3+
const ComponentDoc = require('../../component-doc');
4+
const CodeExample = require('../../code-example/code-example');
55

6-
let {
6+
const {
77
Avatar,
88
Card,
99
CardActions,
@@ -13,8 +13,10 @@ let {
1313
CardText,
1414
CardTitle,
1515
FlatButton,
16+
Paper,
1617
} = mui;
17-
let Code = require('cards-code');
18+
const Code = require('cards-code');
19+
const CodeBlock = require('../../code-example/code-block');
1820

1921
export default class CardPage extends React.Component {
2022

@@ -96,6 +98,22 @@ export default class CardPage extends React.Component {
9698
name="Card"
9799
desc={this.desc}
98100
componentInfo={this.componentInfo}>
101+
102+
<Paper style = {{marginBottom: '22px'}}>
103+
<CodeBlock>
104+
{
105+
'//Import statements:\nconst Card = require(\'material-ui/lib/card/card\');\n' +
106+
'const CardActions = require(\'material-ui/lib/card/card-actions\');\n' +
107+
'const CardExpandable = require(\'material-ui/lib/card/card-expandable\');\n' +
108+
'const CardHeader = require(\'material-ui/lib/card/card-header\');\n' +
109+
'const CardMedia = require(\'material-ui/lib/card/card-media\');\n' +
110+
'const CardText = require(\'material-ui/lib/card/card-text\');\n' +
111+
'const CardTitle = require(\'material-ui/lib/card/card-title\');\n\n' +
112+
'//See material-ui/lib/index.js for more\n'
113+
}
114+
</CodeBlock>
115+
</Paper>
116+
99117
<CodeExample code={Code}>
100118
<Card>
101119
<CardHeader

‎docs/src/app/components/pages/components/date-picker.jsx‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
let React = require('react');
2-
let { DatePicker, TextField, Toggle } = require('material-ui');
3-
let ComponentDoc = require('../../component-doc');
4-
let Code = require('date-picker-code');
5-
let CodeExample = require('../../code-example/code-example');
6-
1+
const React = require('react');
2+
const { DatePicker, TextField, Paper, Toggle } = require('material-ui');
3+
const ComponentDoc = require('../../component-doc');
4+
const Code = require('date-picker-code');
5+
const CodeExample = require('../../code-example/code-example');
6+
const CodeBlock = require('../../code-example/code-block');
77

88
export default class DatePickerPage extends React.Component {
99
constructor(props) {
@@ -196,6 +196,17 @@ export default class DatePickerPage extends React.Component {
196196
<ComponentDoc
197197
name="Date Picker"
198198
componentInfo={componentInfo}>
199+
200+
<Paper style = {{marginBottom: '22px'}}>
201+
<CodeBlock>
202+
{
203+
'//Import statements:\nconst DatePicker = require(\'material-ui/lib/date-picker/date-picker\');\n' +
204+
'const DatePickerDialog = require(\'material-ui/lib/date-picker/date-picker-dialog\');\n\n' +
205+
'//See material-ui/lib/index.js for more\n'
206+
}
207+
</CodeBlock>
208+
</Paper>
209+
199210
<CodeExample code={Code}>
200211
<DatePicker
201212
hintText="Portrait Dialog" />

‎docs/src/app/components/pages/components/dialog.jsx‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
let React = require('react');
2-
let { Dialog, FlatButton, RaisedButton, Toggle } = require('material-ui');
3-
let ComponentDoc = require('../../component-doc');
4-
let Code = require('dialog-code');
5-
let CodeExample = require('../../code-example/code-example');
6-
1+
const React = require('react');
2+
const { Dialog, FlatButton, RaisedButton, Paper, Toggle } = require('material-ui');
3+
const ComponentDoc = require('../../component-doc');
4+
const Code = require('dialog-code');
5+
const CodeExample = require('../../code-example/code-example');
6+
const CodeBlock = require('../../code-example/code-block');
77

88
export default class DialogPage extends React.Component {
99

@@ -170,6 +170,16 @@ export default class DialogPage extends React.Component {
170170
<ComponentDoc
171171
name="Dialog"
172172
componentInfo={componentInfo}>
173+
174+
<Paper style = {{marginBottom: '22px'}}>
175+
<CodeBlock>
176+
{
177+
'//Import statement:\nconst Dialog = require(\'material-ui/lib/dialog\');\n\n' +
178+
'//See material-ui/lib/index.js for more\n'
179+
}
180+
</CodeBlock>
181+
</Paper>
182+
173183
<CodeExample code={Code}>
174184
<RaisedButton label="Standard Actions" onTouchTap={this._handleStandardDialogTouchTap} />
175185
<br/><br/>

‎docs/src/app/components/pages/components/drop-down-menu.jsx‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
let React = require('react');
2-
let { DropDownMenu } = require('material-ui');
3-
let ComponentDoc = require('../../component-doc');
4-
let Code = require('drop-down-menu-code');
5-
let CodeExample = require('../../code-example/code-example');
6-
1+
const React = require('react');
2+
const { DropDownMenu, Paper } = require('material-ui');
3+
const ComponentDoc = require('../../component-doc');
4+
const Code = require('drop-down-menu-code');
5+
const CodeExample = require('../../code-example/code-example');
6+
const CodeBlock = require('../../code-example/code-block');
77

88
export default class DropDownMenuPage extends React.Component {
99

@@ -117,6 +117,16 @@ export default class DropDownMenuPage extends React.Component {
117117
<ComponentDoc
118118
name="Drop Down Menu"
119119
componentInfo={componentInfo}>
120+
121+
<Paper style = {{marginBottom: '22px'}}>
122+
<CodeBlock>
123+
{
124+
'//Import statement:\nconst DropDownMenu = require(\'material-ui/lib/drop-down-menu\');\n\n' +
125+
'//See material-ui/lib/index.js for more\n'
126+
}
127+
</CodeBlock>
128+
</Paper>
129+
120130
<CodeExample code={Code}>
121131
<DropDownMenu menuItems={menuItems} />
122132
</CodeExample>

‎docs/src/app/components/pages/components/grid-list.jsx‎

Lines changed: 19 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
1-
let React = require('react');
2-
let { GridList, GridTile } = require('material-ui');
1+
const React = require('react');
2+
const { GridList, GridTile, Paper } = require('material-ui');
33

4-
let StarBorder = require('svg-icons/toggle/star-border');
5-
let IconButton = require('icon-button');
4+
const StarBorder = require('svg-icons/toggle/star-border');
5+
const IconButton = require('icon-button');
66

7-
let ComponentDoc = require('../../component-doc');
8-
let Code = require('grid-list-code');
9-
let CodeExample = require('../../code-example/code-example');
7+
const ComponentDoc = require('../../component-doc');
8+
const Code = require('grid-list-code');
9+
const CodeExample = require('../../code-example/code-example');
10+
const CodeBlock = require('../../code-example/code-block');
1011

1112
class GridListPage extends React.Component {
1213

@@ -185,6 +186,17 @@ class GridListPage extends React.Component {
185186
code={this.code}
186187
desc={this.desc}
187188
componentInfo={this.componentInfo}>
189+
190+
<Paper style = {{marginBottom: '22px'}}>
191+
<CodeBlock>
192+
{
193+
'//Import statement:\nconst GridList = require(\'material-ui/lib/grid-list/grid-list\');\n' +
194+
'const GridTile = require(\'material-ui/lib/grid-list/grid-tile\');\n\n' +
195+
'//See material-ui/lib/index.js for more\n'
196+
}
197+
</CodeBlock>
198+
</Paper>
199+
188200
<CodeExample code={Code}>
189201
<div style={{display: 'flex', flexWrap: 'wrap', justifyContent: 'space-around'}}>
190202
{/* Basic grid list with mostly default options */}

0 commit comments

Comments
 (0)