Skip to content

P
paragon
Commit f74f0959 by Ari Rizzitano Committed by GitHub
Options

Merge pull request #4 from edx/ari/reorg 

new directory structure + upgrade + integrations
parents b2c1510b 38ddc861
Showing with 571 additions and 501 deletions
.eslintignore
coverage/*
dist/* dist/*
.gitignore
...@@ -2,3 +2,4 @@ ...@@ -2,3 +2,4 @@
.eslintcache .eslintcache
node_modules node_modules
npm-debug.log npm-debug.log
coverage
stories/Welcome.jsx → .storybook/Paragon.stories.jsx
/* eslint-disable import/no-extraneous-dependencies */
import React from 'react'; import React from 'react';
import { storiesOf } from '@storybook/react';
const styles = { const styles = {
main: { main: {
...@@ -7,45 +9,19 @@ const styles = { ...@@ -7,45 +9,19 @@ const styles = {
lineHeight: 1.4, lineHeight: 1.4,
fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif', fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
}, },
logo: {
width: 200,
},
link: {
color: '#1474f3',
textDecoration: 'none',
borderBottom: '1px solid #1474f3',
paddingBottom: 2,
},
code: {
fontSize: 15,
fontWeight: 600,
padding: '2px 5px',
border: '1px solid #eae9e9',
borderRadius: 4,
backgroundColor: '#f3f2f2',
color: '#3a3a3a',
},
note: {
opacity: 0.5,
},
}; };
export default function Welcome() { storiesOf('Paragon', module)
return ( .add('Welcome', () => (
<div style={styles.main}> <div style={styles.main}>
<h1>Paragon</h1> <h1>💎 Paragon</h1>
<p> <p>
This is a documentation and demo space for the Paragon accessible UI Component This is a documentation and demo space for the Paragon accessible UI component
library. Better docs coming soon, but for now, check out our existing components library. Better docs coming soon, but for now, check out our existing components
via the links to the left-hand side. via the links to the left-hand side.
</p> </p>
<p> <p>
Documentation generated with <a Documentation generated with <a
style={styles.link}
href="https://github.com/kadirahq/react-storybook" href="https://github.com/kadirahq/react-storybook"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
...@@ -54,5 +30,4 @@ export default function Welcome() { ...@@ -54,5 +30,4 @@ export default function Welcome() {
</a>. </a>.
</p> </p>
</div> </div>
); ));
}
.storybook/Storyshots.test.js 0 → 100644
import initStoryshots from '@storybook/addon-storyshots';
initStoryshots();
.storybook/__snapshots__/Storyshots.test.js.snap 0 → 100644
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Storyshots CheckBox basic usage 1`] = `
<label
htmlFor="checkbox1"
>
<input
aria-checked={false}
aria-describedby="checkbox"
defaultChecked={false}
disabled={undefined}
id="checkbox1"
name="checkbox"
onClick={[Function]}
tabIndex="0"
type="checkbox"
/>
check me out!
</label>
`;
exports[`Storyshots CheckBox call a function 1`] = `
<label
htmlFor="checkbox4"
>
<input
aria-checked={false}
aria-describedby="checkbox"
defaultChecked={false}
disabled={undefined}
id="checkbox4"
name="checkbox"
onClick={[Function]}
tabIndex="0"
type="checkbox"
/>
check out the console
</label>
`;
exports[`Storyshots CheckBox default checked 1`] = `
<label
htmlFor="checkbox3"
>
<input
aria-checked={true}
aria-describedby="checkbox"
defaultChecked={true}
disabled={undefined}
id="checkbox3"
name="checkbox"
onClick={[Function]}
tabIndex="0"
type="checkbox"
/>
(un)check me out
</label>
`;
exports[`Storyshots CheckBox disabled 1`] = `
<label
htmlFor="checkbox2"
>
<input
aria-checked={false}
aria-describedby="checkbox"
defaultChecked={false}
disabled={true}
id="checkbox2"
name="checkbox"
onClick={[Function]}
tabIndex="0"
type="checkbox"
/>
you cannot check me out
</label>
`;
exports[`Storyshots InputSelect basic usage 1`] = `
<div
className="form-group"
>
<label
className=""
htmlFor="textInput5"
>
Fruits
</label>
<select
aria-describedby={undefined}
className="form-control"
id="textInput5"
name="fruits"
onBlur={[Function]}
onChange={[Function]}
value="strawberry"
>
<option
value="apple"
>
apple
</option>
<option
value="orange"
>
orange
</option>
<option
value="strawberry"
>
strawberry
</option>
<option
value="banana"
>
banana
</option>
</select>
</div>
`;
exports[`Storyshots InputSelect separate labels and values 1`] = `
<div
className="form-group"
>
<label
className=""
htmlFor="textInput6"
>
New England States
</label>
<select
aria-describedby={undefined}
className="form-control"
id="textInput6"
name="new-england-states"
onBlur={[Function]}
onChange={[Function]}
value="RI"
>
<option
value="CN"
>
Connecticut
</option>
<option
value="ME"
>
Maine
</option>
<option
value="MA"
>
Massachusetts
</option>
<option
value="NH"
>
New Hampshire
</option>
<option
value="RI"
>
Rhode Island
</option>
<option
value="VT"
>
Vermont
</option>
</select>
</div>
`;
exports[`Storyshots InputSelect separate option groups 1`] = `
<div
className="form-group"
>
<label
className=""
htmlFor="textInput7"
>
Northeast States
</label>
<select
aria-describedby={undefined}
className="form-control"
id="textInput7"
name="northeast-states"
onBlur={[Function]}
onChange={[Function]}
value="MD"
>
<optgroup
label="New England States"
>
<option
value="CN"
>
Connecticut
</option>
<option
value="ME"
>
Maine
</option>
<option
value="MA"
>
Massachusetts
</option>
<option
value="NH"
>
New Hampshire
</option>
<option
value="RI"
>
Rhode Island
</option>
<option
value="VT"
>
Vermont
</option>
</optgroup>
<optgroup
label="Mid Atlantic States"
>
<option
value="DE"
>
Delaware
</option>
<option
value="MD"
>
Maryland
</option>
<option
value="NJ"
>
New Jersey
</option>
<option
value="NY"
>
New York
</option>
<option
value="PA"
>
Pennsylvania
</option>
<option
value="VA"
>
Virginia
</option>
<option
value="DC"
>
Washington, DC
</option>
<option
value="WV"
>
West Virginia
</option>
</optgroup>
</select>
</div>
`;
exports[`Storyshots InputSelect with validation 1`] = `
<div
className="form-group"
>
<label
className=""
htmlFor="textInput8"
>
Favorite Color
</label>
<select
aria-describedby={undefined}
className="form-control"
id="textInput8"
name="color"
onBlur={[Function]}
onChange={[Function]}
value=""
>
<option
value=""
>
</option>
<option
value="red"
>
red
</option>
<option
value="orange"
>
orange
</option>
<option
value="yellow"
>
yellow
</option>
<option
value="green"
>
green
</option>
<option
value="blue"
>
blue
</option>
<option
value="purple"
>
purple
</option>
</select>
</div>
`;
exports[`Storyshots InputText minimal usage 1`] = `
<div
className="form-group"
>
<label
className=""
htmlFor="textInput9"
>
First Name
</label>
<input
aria-describedby={undefined}
aria-invalid={false}
className="form-control"
disabled={false}
id="textInput9"
name="name"
onBlur={[Function]}
onChange={[Function]}
placeholder={undefined}
required={false}
type="text"
value="Foo Bar"
/>
</div>
`;
exports[`Storyshots InputText validation 1`] = `
<div
className="form-group"
>
<label
className=""
htmlFor="textInput10"
>
Username
</label>
<input
aria-describedby="undefined description-textInput10"
aria-invalid={false}
className="form-control"
disabled={false}
id="textInput10"
name="username"
onBlur={[Function]}
onChange={[Function]}
placeholder={undefined}
required={false}
type="text"
value=""
/>
<small
className="form-text"
id="description-textInput10"
>
The unique name that identifies you throughout the site.
</small>
</div>
`;
exports[`Storyshots Paragon Welcome 1`] = `
<div
style={
Object {
"fontFamily": "\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif",
"lineHeight": 1.4,
"margin": 15,
"maxWidth": 600,
}
}
>
<h1>
💎 Paragon
</h1>
<p>
This is a documentation and demo space for the Paragon accessible UI component library. Better docs coming soon, but for now, check out our existing components via the links to the left-hand side.
</p>
<p>
Documentation generated with
<a
href="https://github.com/kadirahq/react-storybook"
rel="noopener noreferrer"
target="_blank"
>
React Storybook
</a>
.
</p>
</div>
`;
.storybook/__storyshots__/CheckBox.shot deleted 100644 → 0
exports[`basic usage`] = `
<label>
<input
aria-checked={false}
aria-describedby="checkbox"
defaultChecked={false}
disabled={undefined}
name="checkbox"
onClick={[Function]}
tabIndex="0"
type="checkbox" />
check me out!
</label>
`;
exports[`call a function`] = `
<label>
<input
aria-checked={false}
aria-describedby="checkbox"
defaultChecked={false}
disabled={undefined}
name="checkbox"
onClick={[Function]}
tabIndex="0"
type="checkbox" />
check out the console
</label>
`;
exports[`default checked`] = `
<label>
<input
aria-checked={true}
aria-describedby="checkbox"
defaultChecked={true}
disabled={undefined}
name="checkbox"
onClick={[Function]}
tabIndex="0"
type="checkbox" />
(un)check me out
</label>
`;
exports[`disabled`] = `
<label>
<input
aria-checked={false}
aria-describedby="checkbox"
defaultChecked={false}
disabled="true"
name="checkbox"
onClick={[Function]}
tabIndex="0"
type="checkbox" />
you cannot check me out
</label>
`;
.storybook/__storyshots__/SelectInput.shot deleted 100644 → 0
exports[`basic usage`] = `
<div
className="form-group">
<label
className=""
htmlFor="textInput3">
Fruits
</label>
<select
aria-describedby={undefined}
className="form-control"
id="textInput3"
name="fruits"
onBlur={[Function]}
onChange={[Function]}
value="strawberry">
<option
value="apple">
apple
</option>
<option
value="orange">
orange
</option>
<option
value="strawberry">
strawberry
</option>
<option
value="banana">
banana
</option>
</select>
</div>
`;
exports[`separate labels and values`] = `
<div
className="form-group">
<label
className=""
htmlFor="textInput4">
New England States
</label>
<select
aria-describedby={undefined}
className="form-control"
id="textInput4"
name="new-england-states"
onBlur={[Function]}
onChange={[Function]}
value="RI">
<option
value="CN">
Connecticut
</option>
<option
value="ME">
Maine
</option>
<option
value="MA">
Massachusetts
</option>
<option
value="NH">
New Hampshire
</option>
<option
value="RI">
Rhode Island
</option>
<option
value="VT">
Vermont
</option>
</select>
</div>
`;
exports[`separate option groups`] = `
<div
className="form-group">
<label
className=""
htmlFor="textInput5">
Northeast States
</label>
<select
aria-describedby={undefined}
className="form-control"
id="textInput5"
name="northeast-states"
onBlur={[Function]}
onChange={[Function]}
value="MD">
<optgroup
label="New England States">
<option
value="CN">
Connecticut
</option>
<option
value="ME">
Maine
</option>
<option
value="MA">
Massachusetts
</option>
<option
value="NH">
New Hampshire
</option>
<option
value="RI">
Rhode Island
</option>
<option
value="VT">
Vermont
</option>
</optgroup>
<optgroup
label="Mid Atlantic States">
<option
value="DE">
Delaware
</option>
<option
value="MD">
Maryland
</option>
<option
value="NJ">
New Jersey
</option>
<option
value="NY">
New York
</option>
<option
value="PA">
Pennsylvania
</option>
<option
value="VA">
Virginia
</option>
<option
value="DC">
Washington, DC
</option>
<option
value="WV">
West Virginia
</option>
</optgroup>
</select>
</div>
`;
exports[`with validation`] = `
<div
className="form-group">
<label
className=""
htmlFor="textInput6">
Favorite Color
</label>
<select
aria-describedby={undefined}
className="form-control"
id="textInput6"
name="color"
onBlur={[Function]}
onChange={[Function]}
value="">
<option
value="">
</option>
<option
value="red">
red
</option>
<option
value="orange">
orange
</option>
<option
value="yellow">
yellow
</option>
<option
value="green">
green
</option>
<option
value="blue">
blue
</option>
<option
value="purple">
purple
</option>
</select>
</div>
`;
.storybook/__storyshots__/TextInput.shot deleted 100644 → 0
exports[`minimal usage`] = `
<div
className="form-group">
<label
className=""
htmlFor="textInput1">
First Name
</label>
<input
aria-describedby={undefined}
aria-invalid={false}
className="form-control"
disabled={false}
id="textInput1"
name="name"
onBlur={[Function]}
onChange={[Function]}
placeholder={undefined}
required={false}
type="text"
value="Foo Bar" />
</div>
`;
exports[`validation`] = `
<div
className="form-group">
<label
className=""
htmlFor="textInput2">
Username
</label>
<input
aria-describedby="undefined description-textInput2"
aria-invalid={false}
className="form-control"
disabled={false}
id="textInput2"
name="username"
onBlur={[Function]}
onChange={[Function]}
placeholder={undefined}
required={false}
type="text"
value="" />
<small
className="form-text"
id="description-textInput2">
The unique name that identifies you throughout the site.
</small>
</div>
`;
.storybook/__storyshots__/Welcome.shot deleted 100644 → 0
exports[`to Storybook`] = `
<div
style={
Object {
"fontFamily": "\"Helvetica Neue\", Helvetica, \"Segoe UI\", Arial, freesans, sans-serif",
"lineHeight": 1.4,
"margin": 15,
"maxWidth": 600,
}
}>
<h1>
Paragon
</h1>
<p>
This is a documentation and demo space for the Paragon accessible UI Component library. Better docs coming soon, but for now, check out our existing components via the links to the left-hand side.
</p>
<p>
Documentation generated with
<a
href="https://github.com/kadirahq/react-storybook"
rel="noopener noreferrer"
style={
Object {
"borderBottom": "1px solid #1474f3",
"color": "#1474f3",
"paddingBottom": 2,
"textDecoration": "none",
}
}
target="_blank">
React Storybook
</a>
.
</p>
</div>
`;
.storybook/addons.js 0 → 100644
import '@storybook/addon-options/register';
.storybook/config.js
import { configure } from '@kadira/storybook'; import { configure } from '@storybook/react';
import { setOptions } from '@storybook/addon-options';
setOptions({
name: '💎 PARAGON',
url: 'https://github.com/edx/paragon',
showDownPanel: false,
});
const req = require.context('../src', true, /\.stories\.jsx$/);
function loadStories() { function loadStories() {
require('../stories'); require('./Paragon.stories.jsx');
req.keys().forEach((filename) => req(filename));
} }
configure(loadStories, module); configure(loadStories, module);
.storybook/head.html deleted 100644 → 0
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
.travis.yml 0 → 100644
language: node_js
node_js:
- 6
after_script:
- yarn run coveralls
package.json
...@@ -8,34 +8,35 @@ ...@@ -8,34 +8,35 @@
"scripts": { "scripts": {
"build": "NODE_ENV=production webpack", "build": "NODE_ENV=production webpack",
"build-storybook": "build-storybook", "build-storybook": "build-storybook",
"coveralls": "cat ./coverage/lcov.info | coveralls",
"deploy-storybook": "storybook-to-ghpages", "deploy-storybook": "storybook-to-ghpages",
"lint": "eslint --ext .js --ext .jsx .", "lint": "eslint --ext .js --ext .jsx .",
"precommit": "yarn run lint", "precommit": "yarn run lint",
"start": "start-storybook -p 6006", "start": "start-storybook -p 6006",
"test": "jest", "test": "jest --coverage"
"test-storybook": "storyshots"
}, },
"dependencies": { "dependencies": {
"babel-jest": "^20.0.3",
"babel-preset-es2015": "^6.24.1",
"classnames": "^2.2.5", "classnames": "^2.2.5",
"prop-types": "^15.5.8", "prop-types": "^15.5.8",
"react": "^15.5.4", "react": "^15.5.4",
"react-dom": "^15.5.4", "react-dom": "^15.5.4",
"react-test-renderer": "^15.6.1",
"react-transition-group": "^1.1.2", "react-transition-group": "^1.1.2",
"reactstrap": "^4.6.2" "reactstrap": "^4.6.2"
}, },
"devDependencies": { "devDependencies": {
"@kadira/storybook": "^2.35.3", "@storybook/addon-options": "^3.1.6",
"@kadira/storybook-deployer": "^1.2.0", "@storybook/addon-storyshots": "^3.1.7",
"@kadira/storyshots": "^2.1.0", "@storybook/react": "3.1.3",
"@storybook/storybook-deployer": "^2.0.0",
"babel-cli": "^6.24.1", "babel-cli": "^6.24.1",
"babel-jest": "^20.0.3",
"babel-loader": "^7.0.0", "babel-loader": "^7.0.0",
"babel-plugin-transform-object-rest-spread": "^6.23.0", "babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-preset-babili": "^0.0.12", "babel-preset-babili": "^0.0.12",
"babel-preset-env": "^1.4.0", "babel-preset-env": "^1.4.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1", "babel-preset-react": "^6.24.1",
"coveralls": "^2.13.1",
"enzyme": "^2.8.2", "enzyme": "^2.8.2",
"eslint": "^3.19.0", "eslint": "^3.19.0",
"eslint-config-airbnb": "^14.1.0", "eslint-config-airbnb": "^14.1.0",
...@@ -46,6 +47,7 @@ ...@@ -46,6 +47,7 @@
"husky": "^0.13.4", "husky": "^0.13.4",
"jest": "^20.0.4", "jest": "^20.0.4",
"react-router-dom": "^4.1.1", "react-router-dom": "^4.1.1",
"react-test-renderer": "^15.6.1",
"source-map-loader": "^0.2.1", "source-map-loader": "^0.2.1",
"webpack": "^2.4.1", "webpack": "^2.4.1",
"webpack-dev-server": "^2.4.4" "webpack-dev-server": "^2.4.4"
......
src/CheckBox/CheckBox.stories.jsx 0 → 100644
/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable no-console */
import React from 'react';
import { storiesOf } from '@storybook/react';
import CheckBox from './index';
storiesOf('CheckBox', module)
.add('basic usage', () => (
<CheckBox
name="checkbox"
describedBy="checkbox"
label="check me out!"
checked="false"
/>
))
.add('disabled', () => (
<CheckBox
name="checkbox"
describedBy="checkbox"
label="you cannot check me out"
checked="false"
disabled
/>
))
.add('default checked', () => (
<CheckBox
name="checkbox"
describedBy="checkbox"
label="(un)check me out"
checked="true"
/>
))
.add('call a function', () => (
<CheckBox
name="checkbox"
describedBy="checkbox"
label="check out the console"
checked="false"
onChange={() => console.log('the checkbox changed state')}
/>
));
__tests__/checkbox-test.jsx → src/CheckBox/CheckBox.test.jsx
/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable no-console */ /* eslint-disable no-console */
import React from 'react'; import React from 'react';
import { shallow, mount } from 'enzyme'; import { shallow, mount } from 'enzyme';
import CheckBox from '../src/CheckBox'; import CheckBox from './index';
describe('<CheckBox />', () => { describe('<CheckBox />', () => {
it('attributes are set correctly', () => { it('attributes are set correctly', () => {
......
src/CheckBox.jsx → src/CheckBox/index.jsx
import React from 'react'; import React from 'react';
import { inputProps } from './utils/asInput'; import { inputProps } from '../utils/asInput';
import newId from './utils/newId'; import newId from '../utils/newId';
class CheckBox extends React.Component { class CheckBox extends React.Component {
constructor(props) { constructor(props) {
......
stories/index.jsx → src/InputSelect/InputSelect.stories.jsx
/* eslint-disable import/no-extraneous-dependencies */ /* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable no-console */
import React from 'react'; import React from 'react';
import { storiesOf, linkTo } from '@kadira/storybook'; import { storiesOf } from '@storybook/react';
import TextInput from '../src/TextInput'; import InputSelect from './index';
import SelectInput from '../src/SelectInput';
import CheckBox from '../src/CheckBox';
import Welcome from './Welcome';
storiesOf('Welcome', module) storiesOf('InputSelect', module)
.add('to Storybook', () => (
<Welcome showApp={linkTo('Button')} />
));
storiesOf('TextInput', module)
.add('minimal usage', () => (
<TextInput
name="name"
label="First Name"
value="Foo Bar"
/>
))
.add('validation', () => (
<TextInput
name="username"
label="Username"
description="The unique name that identifies you throughout the site."
validator={(value) => {
let feedback = { isValid: true };
if (value.length < 3) {
feedback = {
isValid: false,
validationMessage: 'Username must be at least 3 characters in length.',
};
}
return feedback;
}}
/>
));
storiesOf('SelectInput', module)
.add('basic usage', () => ( .add('basic usage', () => (
<SelectInput <InputSelect
name="fruits" name="fruits"
label="Fruits" label="Fruits"
value="strawberry" value="strawberry"
...@@ -54,7 +19,7 @@ storiesOf('SelectInput', module) ...@@ -54,7 +19,7 @@ storiesOf('SelectInput', module)
/> />
)) ))
.add('separate labels and values', () => ( .add('separate labels and values', () => (
<SelectInput <InputSelect
name="new-england-states" name="new-england-states"
label="New England States" label="New England States"
value="RI" value="RI"
...@@ -69,7 +34,7 @@ storiesOf('SelectInput', module) ...@@ -69,7 +34,7 @@ storiesOf('SelectInput', module)
/> />
)) ))
.add('separate option groups', () => ( .add('separate option groups', () => (
<SelectInput <InputSelect
name="northeast-states" name="northeast-states"
label="Northeast States" label="Northeast States"
value="MD" value="MD"
...@@ -102,7 +67,7 @@ storiesOf('SelectInput', module) ...@@ -102,7 +67,7 @@ storiesOf('SelectInput', module)
/> />
)) ))
.add('with validation', () => ( .add('with validation', () => (
<SelectInput <InputSelect
name="color" name="color"
label="Favorite Color" label="Favorite Color"
options={[ options={[
...@@ -126,39 +91,3 @@ storiesOf('SelectInput', module) ...@@ -126,39 +91,3 @@ storiesOf('SelectInput', module)
}} }}
/> />
)); ));
storiesOf('CheckBox', module)
.add('basic usage', () => (
<CheckBox
name="checkbox"
describedBy="checkbox"
label="check me out!"
checked="false"
/>
))
.add('disabled', () => (
<CheckBox
name="checkbox"
describedBy="checkbox"
label="you cannot check me out"
checked="false"
disabled
/>
))
.add('default checked', () => (
<CheckBox
name="checkbox"
describedBy="checkbox"
label="(un)check me out"
checked="true"
/>
))
.add('call a function', () => (
<CheckBox
name="checkbox"
describedBy="checkbox"
label="check out the console"
checked="false"
onChange={() => console.log('the checkbox changed state')}
/>
));
src/SelectInput.jsx → src/InputSelect/index.jsx
...@@ -2,7 +2,7 @@ import React from 'react'; ...@@ -2,7 +2,7 @@ import React from 'react';
import { Input } from 'reactstrap'; import { Input } from 'reactstrap';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import asInput, { inputProps } from './utils/asInput'; import asInput, { inputProps } from '../utils/asInput';
class Select extends React.Component { class Select extends React.Component {
static getOption(option, i) { static getOption(option, i) {
...@@ -63,11 +63,11 @@ Select.propTypes = { ...@@ -63,11 +63,11 @@ Select.propTypes = {
]).isRequired, ]).isRequired,
}; };
const SelectInput = asInput(Select); const InputSelect = asInput(Select);
SelectInput.propTypes = { InputSelect.propTypes = {
...SelectInput.propTypes, ...InputSelect.propTypes,
...Select.propTypes, ...Select.propTypes,
}; };
export default SelectInput; export default InputSelect;
src/InputText/InputText.stories.jsx 0 → 100644
/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import { storiesOf } from '@storybook/react';
import InputText from './index';
storiesOf('InputText', module)
.add('minimal usage', () => (
<InputText
name="name"
label="First Name"
value="Foo Bar"
/>
))
.add('validation', () => (
<InputText
name="username"
label="Username"
description="The unique name that identifies you throughout the site."
validator={(value) => {
let feedback = { isValid: true };
if (value.length < 3) {
feedback = {
isValid: false,
validationMessage: 'Username must be at least 3 characters in length.',
};
}
return feedback;
}}
/>
));
src/TextInput.jsx → src/InputText/index.jsx
import React from 'react'; import React from 'react';
import { Input } from 'reactstrap'; import { Input } from 'reactstrap';
import asInput, { inputProps } from './utils/asInput'; import asInput, { inputProps } from '../utils/asInput';
function TextField(props) { function Text(props) {
return ( return (
<Input <Input
id={props.id} id={props.id}
...@@ -22,8 +22,8 @@ function TextField(props) { ...@@ -22,8 +22,8 @@ function TextField(props) {
); );
} }
TextField.propTypes = inputProps; Text.propTypes = inputProps;
const TextInput = asInput(TextField); const InputText = asInput(Text);
export default TextInput; export default InputText;
src/TabInterface.jsx → src/Tabs/index.jsx
...@@ -3,9 +3,9 @@ import { TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap'; ...@@ -3,9 +3,9 @@ import { TabContent, TabPane, Nav, NavItem, NavLink } from 'reactstrap';
import classnames from 'classnames'; import classnames from 'classnames';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { newId } from './utils/newId'; import { newId } from '../utils/newId';
class TabInterface extends React.Component { class Tabs extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
...@@ -95,7 +95,7 @@ class TabInterface extends React.Component { ...@@ -95,7 +95,7 @@ class TabInterface extends React.Component {
} }
// TODO: custom validator that ensures tabLabels and panels are the same length // TODO: custom validator that ensures tabLabels and panels are the same length
TabInterface.propTypes = { Tabs.propTypes = {
tabLabels: PropTypes.oneOfType([ tabLabels: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.String), PropTypes.arrayOf(PropTypes.String),
PropTypes.arrayOf(PropTypes.Element), PropTypes.arrayOf(PropTypes.Element),
...@@ -103,4 +103,4 @@ TabInterface.propTypes = { ...@@ -103,4 +103,4 @@ TabInterface.propTypes = {
panels: PropTypes.arrayOf(PropTypes.Element).isRequired, panels: PropTypes.arrayOf(PropTypes.Element).isRequired,
}; };
export default TabInterface; export default Tabs;
src/index.js
import SelectInput from './SelectInput'; import CheckBox from './CheckBox';
import TabInterface from './TabInterface'; import InputSelect from './InputSelect';
import TextInput from './TextInput'; import InputText from './InputText';
import Tabs from './Tabs';
export { export {
SelectInput, CheckBox,
TabInterface, InputSelect,
TextInput, InputText,
Tabs,
}; };
yarn.lock
This source diff could not be displayed because it is too large. You can view the blob instead.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment