Skip to content

Commit 034fea4

Browse files
stomitastomita
committed
Merge branch 'master' into examples-to-storybook
2 parents ff7e4fb + f02e334 commit 034fea4

File tree

14 files changed

+9405
-16
lines changed

14 files changed

+9405
-16
lines changed

‎examples/client/scripts/components/CardExamples.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React from 'react';
2+
import { Card } from 'react-lightning-design-system';
3+
4+
const { Header, Body, Footer } = Card;
5+
6+
const CardExamples = () => {
7+
const styles = {
8+
maxWidth: '360px',
9+
};
10+
11+
return (
12+
<div>
13+
<h2 className='slds-m-vertical--medium'>Card base narrow</h2>
14+
<div style={ styles }>
15+
<Card size='narrow'>
16+
<Header
17+
cardIconCategory='doctype'
18+
cardIcon='excel'
19+
closeButton
20+
>
21+
sample_file_name.csv
22+
</Header>
23+
<Body textAlign='center'>Card Body</Body>
24+
<Footer>Card Footer</Footer>
25+
</Card>
26+
</div>
27+
<h2 className='slds-m-vertical--medium'>Card base narrow empty</h2>
28+
<div style={ styles }>
29+
<Card size='narrow'>
30+
<Header
31+
cardIconCategory='doctype'
32+
cardIcon='excel'
33+
closeButton
34+
>
35+
sample_file_name.csv
36+
</Header>
37+
</Card>
38+
</div>
39+
</div>
40+
);
41+
};
42+
43+
export default CardExamples;

‎examples/client/scripts/components/FileSelectorExamples.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from 'react';
2+
3+
import { FileSelector } from 'react-lightning-design-system';
4+
5+
export default () => (
6+
<FileSelector
7+
label='Attachment'
8+
multiple={ false }
9+
accept='image/png'
10+
buttonText='Upload Files'
11+
errorMessage='File type not supported'
12+
/>
13+
);

‎examples/client/scripts/components/Root.js‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
import React from 'react';
2+
import { Router } from 'director';
3+
4+
import { Grid, Row, Col, Tree, TreeNode } from 'react-lightning-design-system';
5+
6+
import ButtonExamples from './ButtonExamples';
7+
import ButtonGroupExamples from './ButtonGroupExamples';
8+
import DatepickerExamples from './DatepickerExamples';
9+
import DropdownButtonExamples from './DropdownButtonExamples';
10+
import FormExamples from './FormExamples';
11+
import GridExamples from './GridExamples';
12+
import IconExamples from './IconExamples';
13+
import LookupExamples from './LookupExamples';
14+
import ModalExamples from './ModalExamples';
15+
import NotificationExamples from './NotificationExamples';
16+
import TabsExamples from './TabsExamples';
17+
import TreeExamples from './TreeExamples';
18+
import BadgeExamples from './BadgeExamples';
19+
import BreadCrumbsExamples from './BreadCrumbsExamples';
20+
import PopoverExamples from './PopoverExamples';
21+
import PageHeaderExamples from './PageHeaderExamples';
22+
import MediaObjectExamples from './MediaObjectExamples';
23+
import TableExamples from './TableExamples';
24+
import SpinnerExamples from './SpinnerExamples';
25+
import ToggleExamples from './ToggleExamples';
26+
import FileSelectorExamples from './FileSelectorExamples';
27+
import CardExamples from './CardExamples';
28+
29+
const SECTIONS = {
30+
table: { label: 'Data Table', klass: TableExamples, src: 'TableExamples' },
31+
badge: { label: 'Badge', klass: BadgeExamples, src: 'BadgeExamples' },
32+
breadcrumbs: { label: 'Breadcrumbs', klass: BreadCrumbsExamples, src: 'BreadCrumbsExamples' },
33+
button: { label: 'Button', klass: ButtonExamples, src: 'ButtonExamples' },
34+
buttongroup: { label: 'Button Group', klass: ButtonGroupExamples, src: 'ButtonGroupExamples' },
35+
datepicker: { label: 'Datepicker', klass: DatepickerExamples, src: 'DatepickerExamples' },
36+
dropdownbutton:
37+
{ label: 'Dropdown Button', klass: DropdownButtonExamples, src: 'DropdownButtonExamples' },
38+
form: { label: 'Form', klass: FormExamples, src: 'FormExamples' },
39+
grid: { label: 'Grid', klass: GridExamples, src: 'GridExamples' },
40+
icon: { label: 'Icon', klass: IconExamples, src: 'IconExamples' },
41+
lookup: { label: 'Lookup', klass: LookupExamples, src: 'LookupExamples' },
42+
mediaobject: { label: 'Media Object', klass: MediaObjectExamples, src: 'MediaObjectExamples' },
43+
modal: { label: 'Modal', klass: ModalExamples, src: 'ModalExamples' },
44+
notification: { label: 'Notification', klass: NotificationExamples, src: 'NotificationExamples' },
45+
pageheader: { label: 'Page Header', klass: PageHeaderExamples, src: 'PageHeaderExamples' },
46+
popover: { label: 'Popovers', klass: PopoverExamples, src: 'PopoverExamples' },
47+
tabs: { label: 'Tabs', klass: TabsExamples, src: 'TabsExamples' },
48+
tree: { label: 'Tree', klass: TreeExamples, src: 'TreeExamples' },
49+
spinner: { label: 'Spinners', klass: SpinnerExamples, src: 'SpinnerExamples' },
50+
toggle: { label: 'Toggle', klass: ToggleExamples, src: 'ToggleExamples' },
51+
fileselector: { label: 'File Selector', klass: FileSelectorExamples, src: 'FileSelectorExamples' },
52+
card: { label: 'Card', klass: CardExamples, src: 'CardExamples' },
53+
};
54+
55+
const GITHUB_EXAMPLE_SRC_DIR_URL = 'https://github.com/stomita/react-lightning-design-system/blob/master/examples/client/scripts/components/';
56+
57+
export default class Root extends React.Component {
58+
constructor() {
59+
super();
60+
this.state = { section: 'button' };
61+
}
62+
63+
componentDidMount() {
64+
const routes = {};
65+
for (const [section] of Object.entries(SECTIONS)) {
66+
routes[`/${section}`] = this.setState.bind(this, { section });
67+
}
68+
routes['/'] = this.setState.bind(this, { section: 'button' });
69+
/* eslint-disable new-cap */
70+
const router = Router(routes);
71+
router.init();
72+
}
73+
74+
onSelectSection(e, props) {
75+
if (props.name) {
76+
location.hash = `#/${props.name}`;
77+
}
78+
}
79+
80+
render() {
81+
const targetSection = this.state.section;
82+
return (
83+
<Grid frame>
84+
<Row>
85+
<Col className='slds-page-header'>
86+
<h1>Lightning Design System for React</h1>
87+
</Col>
88+
</Row>
89+
<Row cols={4} nowrap>
90+
<Col cols={1}>
91+
<Tree onNodeClick={ this.onSelectSection.bind(this) } toggleOnNodeClick>
92+
<TreeNode label='Components' defaultOpened>
93+
{
94+
Object.keys(SECTIONS).map((name, index) => {
95+
const section = SECTIONS[name];
96+
return (
97+
<TreeNode
98+
key={ index }
99+
name={ name }
100+
label={ section.label }
101+
leaf
102+
selected={ name === targetSection }
103+
/>
104+
);
105+
})
106+
}
107+
</TreeNode>
108+
</Tree>
109+
</Col>
110+
<Col cols={4} padded='large'>
111+
{
112+
Object.keys(SECTIONS).filter(name => name === targetSection)
113+
.map((name, index) => {
114+
const Example = SECTIONS[name].klass;
115+
const src = SECTIONS[name].src;
116+
return (
117+
<div key={`child-${index}`}>
118+
<div style={ { textAlign: 'right' } }>
119+
<a
120+
target='_blank'
121+
rel='noopener noreferrer'
122+
href={ `${GITHUB_EXAMPLE_SRC_DIR_URL}${src}.js` }
123+
>
124+
View source file in Github
125+
</a>
126+
</div>
127+
<Example key={ index } />
128+
</div>
129+
);
130+
})
131+
}
132+
</Col>
133+
</Row>
134+
</Grid>
135+
);
136+
}
137+
}

‎examples/package.json‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
{
2+
"name": "react-lightning-design-system-examples",
3+
"private": true,
4+
"description": "",
5+
"scripts": {
6+
"start": "node server.js",
7+
"start:dev": "npm run build:assets && npm run webpack:server",
8+
"webpack:server": "webpack-dev-server --progress --colors --inline",
9+
"build:assets": "npm install && cp -r node_modules/@salesforce-ux/design-system/assets public/",
10+
"build": "webpack && npm run build:assets",
11+
"deploy": "npm run build && gh-pages -d public"
12+
},
13+
"dependencies": {
14+
"@salesforce-ux/design-system": "^2.1.2",
15+
"babelify": "^7.3.0",
16+
"browserify": "^13.0.1",
17+
"browserify-middleware": "^7.0.0",
18+
"director": "^1.2.8",
19+
"express": "^4.13.4",
20+
"less-middleware": "^2.1.0",
21+
"moment": "^2.15.0",
22+
"react": "^15.3.0",
23+
"react-dom": "^15.3.0",
24+
"react-lightning-design-system": "file:.."
25+
},
26+
"devDependencies": {
27+
"babel-loader": "^6.2.4",
28+
"gh-pages": "^0.11.0",
29+
"html-webpack-plugin": "^2.22.0",
30+
"react-hot-loader": "^3.0.0-beta.6",
31+
"react-dropzone": "^3.7.3",
32+
"webpack": "^1.13.1",
33+
"webpack-dev-server": "^1.14.1"
34+
}
35+
}

0 commit comments

Comments
 (0)