Skip to content

Commit

Permalink
Merge pull request #4 from russell-ingram/develop
Browse files Browse the repository at this point in the history 
Updating to 0.7.0 version of fdns-ui-react
  • Loading branch information
@russell-ingram
russell-ingram authored Feb 28, 2019
2 parents 08bad0d + 05c86d2 commit 3bc38af
Show file tree
Hide file tree
Showing 10 changed files with 2,982 additions and 1,881 deletions.
4,515 changes: 2,815 additions & 1,700 deletions package-lock.json
View file

Large diffs are not rendered by default.

7 changes: 4 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
},
"dependencies": {
"ajv": "^6.5.1",
"fdns-ui-react": "0.5.8",
"fdns-ui-react": "0.7.0",
"prop-types": "^15.6.0",
"react": "^16.2.0",
"react-dom": "^16.2.0",
Expand All @@ -21,14 +21,15 @@
},
"devDependencies": {
"babel-polyfill": "^6.26.0",
"react-scripts": "^2.1.1"
"react-scripts": "^2.1.2"
},
"scripts": {
"start": "PORT=3001 react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"restart": "cd .. && npm link && cd example && npm i && npm start"
"restart": "cd .. && npm link && cd example && npm i && npm start",
"link": "npm link ../fdns-ui-react && cd node_modules/fdns-ui-react && npm link react"
},
"browserslist": [
">0.2%",
Expand Down
164 changes: 82 additions & 82 deletions src/App.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { Component } from 'react';
import { Collapse, fixtures } from 'fdns-ui-react';
import { Collapse, Grid, Typography, fixtures } from 'fdns-ui-react';

// import docs
import DocSuperGrid from './docs/DocSuperGrid';
Expand Down Expand Up @@ -32,7 +32,6 @@ import DocOptionErrorsWarnings from './docs/DocOptionErrorsWarnings';
import DocOptionView from './docs/DocOptionView';
import DocOptionExport from './docs/DocOptionExport';
import DocOptionPageLimit from './docs/DocOptionPageLimit';
import DocBootstrap from './docs/DocBootstrap';

// import shapes
import ShapeAnalysis from './shapes/ShapeAnalysis';
Expand Down Expand Up @@ -78,16 +77,16 @@ class App extends Component {

return (
<div className="App" role="main">
<div className="jumbotron">
<h1>FDNS UI React</h1>
<p>{'A front-end framework for Foundation Services (FDNS).'}</p>
<p className="version">{`Currently v${fixtures.version}`}</p>
</div>
<div className="row-fluid" id="docs">
<div className="col-md-10">
<Grid className="jumbotron" item xs={12}>
<Typography variant="h2" color="inherit" gutterBottom>FDNS UI React</Typography>
<Typography variant="h5" color="inherit" paragraph={true} gutterBottom>A front-end framework for Foundation Services (FDNS).</Typography>
<Typography className="version" variant="caption" color="inherit">{`Currently v${fixtures.version}`}</Typography>
</Grid>
<Grid container id="docs">
<Grid item xs={10}>
<img src={icoLayout} alt="Layout" className="ico" />
<h2>Layout</h2>
<p>{'Layout components are used for basic layout of data and other components.'}</p>
<Typography variant="h3" color="inherit" paragraph={true}>Layout</Typography>
<Typography>{'Layout components are used for basic layout of data and other components.'}</Typography>
<DocSuperGrid />
<DocSuperTable />
<DocPane />
Expand All @@ -102,40 +101,40 @@ class App extends Component {
<DocLogin />

<img src={icoSearch} alt="Search" className="ico" />
<h2>Search</h2>
<p>{'Search components are used with the FDNS Indexing Microservice to provide an easy way to search data for your application.'}</p>
<Typography variant="h3" color="inherit" paragraph={true}>Search</Typography>
<Typography>{'Search components are used with the FDNS Indexing Microservice to provide an easy way to search data for your application.'}</Typography>
<DocSearchBar />

<img src={icoFilters} alt="Filters" className="ico" />
<h2>Filters</h2>
<p>{'Filters are used to filter information from the user to a backend.'}</p>
<Typography variant="h3" color="inherit" paragraph={true}>Filters</Typography>
<Typography>{'Filters are used to filter information from the user to a backend.'}</Typography>
<DocFilter />
<DocFilterDate />
<DocFilterSelect />
<DocFilterGroup />
<DocFilterAction />

<img src={icoData} alt="Data" className="ico" />
<h2>Data</h2>
<p>{'The Data components are used to display and navigate data.'}</p>
<Typography variant="h3" color="inherit" paragraph={true}>Data</Typography>
<Typography>{'The Data components are used to display and navigate data.'}</Typography>
<DocDataEndpoint />
<DocDataInspector />
<DocDataLayers />
<DocUploader />
<DocUploaderDrop />
<DocUploaderPaste />
<DocUploaderList />

<img src={icoOptions} alt="Options" className="ico" />
<h2>Options</h2>
<p>{'Options are used for changing settings often interacting with other components in callbacks.'}</p>
<Typography variant="h3" color="inherit" paragraph={true}>Options</Typography>
<Typography>{'Options are used for changing settings often interacting with other components in callbacks.'}</Typography>
<DocOptionAction />
<DocOptionErrorsWarnings />
<DocOptionView />
<DocOptionExport />
<DocOptionPageLimit />

<h2>Shapes</h2>
<Typography variant="h3" color="inherit" paragraph={true}>Shapes</Typography>
<ShapeAnalysis />
<ShapeDownload />
<ShapeDownloadEvent />
Expand All @@ -146,105 +145,106 @@ class App extends Component {
<ShapeOption />
<ShapeWarningOrError />
<ShapeUser />

<h2>Bundled Libraries</h2>
<DocBootstrap />
</div>
<div className="col-md-2">
</Grid>
<Grid item xs={2}>
<ul id="sidenav">
<li>
<h3 onClick={this.collapseNav.bind(this, 'layout')}>Layout</h3>
<Typography onClick={this.collapseNav.bind(this, 'layout')} component="h6" variant="h6" color="inherit">Layout</Typography>
<Collapse timeout={timeout} in={this.state.layout}>
<ul>
<li><a href="#DocSuperGrid">{'<SuperGrid>'}</a></li>
<li><a href="#DocSuperTable">{'<SuperTable>'}</a></li>
<li><a href="#DocPane">{'<Pane>'}</a></li>
<li><a href="#DocPaneHistory">{'<PaneHistory>'}</a></li>
<li><a href="#DocIconButton">{'<IconButton>'}</a></li>
<li><a href="#DocContainer">{'<Container>'}</a></li>
<li><a href="#DocLoader">{'<Loader>'}</a></li>
<li><a href="#DocDropdownUser">{'<DropdownUser>'}</a></li>
<li><a href="#DocDropdownDownloads">{'<DropdownDownloads>'}</a></li>
<li><a href="#DocSuperInput">{'<SuperInput>'}</a></li>
<li><a href="#DocSuperButton">{'<SuperButton>'}</a></li>
<li><a href="#DocLogin">{'<Login>'}</a></li>
<Typography>
<li><a href="#DocSuperGrid">{'<SuperGrid>'}</a></li>
<li><a href="#DocSuperTable">{'<SuperTable>'}</a></li>
<li><a href="#DocPane">{'<Pane>'}</a></li>
<li><a href="#DocPaneHistory">{'<PaneHistory>'}</a></li>
<li><a href="#DocIconButton">{'<IconButton>'}</a></li>
<li><a href="#DocContainer">{'<Container>'}</a></li>
<li><a href="#DocLoader">{'<Loader>'}</a></li>
<li><a href="#DocDropdownUser">{'<DropdownUser>'}</a></li>
<li><a href="#DocDropdownDownloads">{'<DropdownDownloads>'}</a></li>
<li><a href="#DocSuperInput">{'<SuperInput>'}</a></li>
<li><a href="#DocSuperButton">{'<SuperButton>'}</a></li>
<li><a href="#DocLogin">{'<Login>'}</a></li>
</Typography>
</ul>
</Collapse>
</li>
<li>
<h3 onClick={this.collapseNav.bind(this, 'search')}>Search</h3>
<Typography onClick={this.collapseNav.bind(this, 'search')} component="h6" variant="h6" color="inherit">Search</Typography>
<Collapse timeout={timeout} in={this.state.search}>
<ul>
<li><a href="#DocSearchBar">{'<SearchBar>'}</a></li>
<Typography>
<li><a href="#DocSearchBar">{'<SearchBar>'}</a></li>
</Typography>
</ul>
</Collapse>
</li>
<li>
<h3 onClick={this.collapseNav.bind(this, 'filters')}>Filters</h3>
<Typography onClick={this.collapseNav.bind(this, 'filters')} component="h6" variant="h6" color="inherit">Filters</Typography>
<Collapse timeout={timeout} in={this.state.filters}>
<ul>
<li><a href="#DocFilter">{'<Filter>'}</a></li>
<li><a href="#DocFilterDate">{'<FilterDate>'}</a></li>
<li><a href="#DocFilterSelect">{'<FilterSelect>'}</a></li>
<li><a href="#DocFilterGroup">{'<FilterGroup>'}</a></li>
<li><a href="#DocFilterAction">{'<FilterAction>'}</a></li>
<Typography>
<li><a href="#DocFilter">{'<Filter>'}</a></li>
<li><a href="#DocFilterDate">{'<FilterDate>'}</a></li>
<li><a href="#DocFilterSelect">{'<FilterSelect>'}</a></li>
<li><a href="#DocFilterGroup">{'<FilterGroup>'}</a></li>
<li><a href="#DocFilterAction">{'<FilterAction>'}</a></li>
</Typography>
</ul>
</Collapse>
</li>
<li>
<h3 onClick={this.collapseNav.bind(this, 'data')}>Data</h3>
<Typography onClick={this.collapseNav.bind(this, 'data')} component="h6" variant="h6" color="inherit">Data</Typography>
<Collapse timeout={timeout} in={this.state.data}>
<ul>
<li><a href="#DocDataEndpoint">{'<DataEndpoint>'}</a></li>
<li><a href="#DocDataInspector">{'<DataInspector>'}</a></li>
<li><a href="#DocDataLayers">{'<DataLayers>'}</a></li>
<li><a href="#DocUploader">{'<Uploader>'}</a></li>
<li><a href="#DocUploaderDrop">{'<UploaderDrop>'}</a></li>
<li><a href="#DocUploaderPaste">{'<UploaderPaste>'}</a></li>
<li><a href="#DocUploaderList">{'<UploaderList>'}</a></li>
<Typography>
<li><a href="#DocDataEndpoint">{'<DataEndpoint>'}</a></li>
<li><a href="#DocDataInspector">{'<DataInspector>'}</a></li>
<li><a href="#DocDataLayers">{'<DataLayers>'}</a></li>
<li><a href="#DocUploader">{'<Uploader>'}</a></li>
<li><a href="#DocUploaderDrop">{'<UploaderDrop>'}</a></li>
<li><a href="#DocUploaderPaste">{'<UploaderPaste>'}</a></li>
<li><a href="#DocUploaderList">{'<UploaderList>'}</a></li>
</Typography>
</ul>
</Collapse>
</li>
<li>
<h3 onClick={this.collapseNav.bind(this, 'options')}>Options</h3>
<Typography onClick={this.collapseNav.bind(this, 'options')} component="h6" variant="h6" color="inherit">Options</Typography>
<Collapse timeout={timeout} in={this.state.options}>
<ul>
<li><a href="#DocOptionAction">{'<OptionAction>'}</a></li>
<li><a href="#DocOptionErrorsWarnings">{'<OptionErrorsWarnings>'}</a></li>
<li><a href="#DocOptionView">{'<OptionView>'}</a></li>
<li><a href="#DocOptionExport">{'<OptionExport>'}</a></li>
<li><a href="#DocOptionPageLimit">{'<OptionPageLimit>'}</a></li>
<Typography>
<li><a href="#DocOptionAction">{'<OptionAction>'}</a></li>
<li><a href="#DocOptionErrorsWarnings">{'<OptionErrorsWarnings>'}</a></li>
<li><a href="#DocOptionView">{'<OptionView>'}</a></li>
<li><a href="#DocOptionExport">{'<OptionExport>'}</a></li>
<li><a href="#DocOptionPageLimit">{'<OptionPageLimit>'}</a></li>
</Typography>
</ul>
</Collapse>
</li>
<li>
<h3 onClick={this.collapseNav.bind(this, 'shapes')}>Shapes</h3>
<Typography onClick={this.collapseNav.bind(this, 'shapes')} component="h6" variant="h6" color="inherit">Shapes</Typography>
<Collapse timeout={timeout} in={this.state.shapes}>
<ul>
<li><a href="#ShapeAnalysis">_analysis</a></li>
<li><a href="#ShapeDownload">_download</a></li>
<li><a href="#ShapeDownloadEvent">_downloadEvent</a></li>
<li><a href="#ShapeDownloadFile">_downloadFile</a></li>
<li><a href="#ShapeHeader">_header</a></li>
<li><a href="#ShapeHistoryItem">_historyItem</a></li>
<li><a href="#ShapeHistoryGroup">_historyGroup</a></li>
<li><a href="#ShapeOption">_option</a></li>
<li><a href="#ShapeWarningOrError">_warningOrError</a></li>
<li><a href="#ShapeUser">_user</a></li>
</ul>
</Collapse>
</li>
<li>
<h3 onClick={this.collapseNav.bind(this, 'libs')}>Bundled Libraries</h3>
<Collapse timeout={timeout} in={this.state.libs}>
<ul>
<li><a href="#DocBootstrap">Bootstrap</a></li>
<Typography>
<li><a href="#ShapeAnalysis">_analysis</a></li>
<li><a href="#ShapeDownload">_download</a></li>
<li><a href="#ShapeDownloadEvent">_downloadEvent</a></li>
<li><a href="#ShapeDownloadFile">_downloadFile</a></li>
<li><a href="#ShapeHeader">_header</a></li>
<li><a href="#ShapeHistoryItem">_historyItem</a></li>
<li><a href="#ShapeHistoryGroup">_historyGroup</a></li>
<li><a href="#ShapeOption">_option</a></li>
<li><a href="#ShapeWarningOrError">_warningOrError</a></li>
<li><a href="#ShapeUser">_user</a></li>
</Typography>
</ul>
</Collapse>
</li>
</ul>
</div>
</div>
</Grid>
</Grid>
</div>
);
}
Expand Down
55 changes: 29 additions & 26 deletions src/docs/Doc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import Highlight from 'react-highlight';
import Markdown from 'react-remarkable';
import JSONPretty from 'react-json-pretty';
import { Paper, Typography, Table, TableBody, TableCell, TableHead, TableRow } from 'fdns-ui-react';

// set the prop types from predefined shapes or standard types
const _sampleProp = PropTypes.shape({
Expand Down Expand Up @@ -42,25 +43,25 @@ class Doc extends Component {
if (defaultProp[0] === '{') {
preDefaultProp = (<JSONPretty json={defaultProp}></JSONPretty>);
} else {
preDefaultProp = (<pre>{defaultProp}</pre>);
preDefaultProp = (<pre>{defaultProp}</pre>);
}
}
return (
<tr key={i}>
<td>{propName}</td>
<td><em><Markdown>{propType}</Markdown></em></td>
<td>{preDefaultProp}</td>
<td><Markdown>{desc}</Markdown></td>
</tr>
<TableRow key={i}>
<TableCell>{propName}</TableCell>
<TableCell><em><Markdown>{propType}</Markdown></em></TableCell>
<TableCell>{preDefaultProp}</TableCell>
<TableCell><Markdown>{desc}</Markdown></TableCell>
</TableRow>
);
}

renderImportant(important) {
if (important) {
return (
<div className="important-notes">
<h4><i className="fa fa-exclamation-triangle" aria-hidden="true"></i>Important:</h4>
<p>{important}</p>
<Typography variant="h5" color="inherit" gutterBottom><i className="fa fa-exclamation-triangle" aria-hidden="true"></i>Important:</Typography>
<Typography variant="h4" color="inherit" gutterBottom>{important}</Typography>
</div>
);
}
Expand All @@ -73,30 +74,32 @@ class Doc extends Component {

return (
<div className={componentClassName} id={this.props.id}>
<h3>{this.props.tag}</h3>
<p>{this.props.desc}</p>
<Typography variant="h5" color="inherit" gutterBottom>{this.props.tag}</Typography>
<Typography color="inherit" gutterBottom>{this.props.desc}</Typography>
<div className="contain-component">
{this.props.sampleComponent}
</div>
<h4>Sample Code</h4>
<Typography variant="h6" color="inherit" gutterBottom>Sample Code</Typography>
<Highlight className='jsx'>
{this.props.sampleCode}
</Highlight>
{this.renderImportant(this.props.important)}
<h4>Props</h4>
<table className="table table-striped table-bordered">
<thead>
<tr>
<th width="15%">Name</th>
<th width="15%">Type</th>
<th width="15%">Default</th>
<th width="55%">Description</th>
</tr>
</thead>
<tbody>
{this.props.sampleProps.map(this.renderSampleProp)}
</tbody>
</table>
<Typography variant="h6" color="inherit" gutterBottom>Props</Typography>
<Paper elevation={12}>
<Table>
<TableHead>
<TableRow>
<TableCell>Name</TableCell>
<TableCell>Type</TableCell>
<TableCell>Default</TableCell>
<TableCell colSpan={3}>Description</TableCell>
</TableRow>
</TableHead>
<TableBody>
{this.props.sampleProps.map(this.renderSampleProp)}
</TableBody>
</Table>
</Paper>
</div>
);
}
Expand Down
2 changes: 1 addition & 1 deletion src/docs/DocDataInspector.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import swal from 'sweetalert2';
import Doc from './Doc';
import { DataInspector, fixtures } from 'fdns-ui-react';
const { messages } = fixtures;
const data = messages.slice(0)[0];
const data = Object.assign({}, messages.slice(0)[0]);
data.total = 100;
data.isUser = true;
data.isAdmin = null;
Expand Down
Loading

0 comments on commit 3bc38af

Please sign in to comment.