diff --git a/.gitignore b/.gitignore index c6a671e..01e9ed7 100644 --- a/.gitignore +++ b/.gitignore @@ -2,4 +2,5 @@ .DS_Store coverage lib +componentsIndex.js node_modules diff --git a/README.md b/README.md index b06e097..7da7354 100644 --- a/README.md +++ b/README.md @@ -69,7 +69,6 @@ npm install cd ./example npm install gulp -npm start open http://127.0.0.1:8001 ``` this will start development server and then you can play with Library components diff --git a/example/src/componentsIndex.js b/example/src/componentsIndex.js deleted file mode 100644 index 7472311..0000000 --- a/example/src/componentsIndex.js +++ /dev/null @@ -1,202 +0,0 @@ -/* eslint-disable */ -// Generated by component library do not modify -import ExampleComponentsABC from '../../example_components/ABC.js'; -import ExampleComponentsButton from '../../example_components/Button.react.js'; -import ExampleComponentsCheckbox from '../../example_components/Checkbox.react.js'; -import ExampleComponentsCheckboxOnChange from '../../example_components/CheckboxOnChange.js'; -import ExampleComponentsEmptyProps from '../../example_components/EmptyProps.react.js'; -import ExampleComponentsErrorMessage from '../../example_components/ErrorMessage.react.js'; -import ExampleComponentsIcon from '../../example_components/Icon.react.js'; -import ExampleComponentsNoProps from '../../example_components/NoProps.react.js'; -import ExampleComponentsOnChangeEvent from '../../example_components/OnChangeEvent.js'; -import ExampleComponentsOnChangeNameAndValue from '../../example_components/OnChangeNameAndValue.js'; -import ExampleComponentsRadioInput from '../../example_components/RadioInput.react.js'; -import ExampleComponentsWithExtendProps from '../../example_components/WithExtendProps.react.js'; -import ExampleComponentsWithShapePropsWithDefaults from '../../example_components/WithShapePropsWithDefaults.react.js'; - -export default { - ExampleComponentsABC: { - name: 'ExampleComponentsABC', - menu: 'Example Components ABC', - file: '../../example_components/ABC.js', - component: ExampleComponentsABC, - componentName: 'ABC', - description: 'Example component description', - customProps: {}, - propsDefinition: {foo:{type:{name:"bool"},required:false,description:"Example prop description",defaultValue:{value:"true",computed:false}},bar:{defaultValue:{value:"'String'",computed:false}}}, - simpleProps: {foo:true,bar:"String"}, - fullProps: {foo:true,bar:"String"} - }, - ExampleComponentsButton: { - name: 'ExampleComponentsButton', - menu: 'Example Components Button', - file: '../../example_components/Button.react.js', - component: ExampleComponentsButton, - componentName: 'Button', - description: '', - customProps: {}, - propsDefinition: {children:{type:{name:"any"},required:true,description:""},disabled:{type:{name:"bool"},required:false,description:""},fullWidth:{type:{name:"bool"},required:false,description:""},inheritedStyle:{type:{name:"object"},required:false,description:""},kind:{type:{name:"enum",value:[{value:"'primary'",computed:false},{value:"'secondary'",computed:false},{value:"'outlined'",computed:false}]},required:true,description:""},onClick:{type:{name:"func"},required:true,description:""},size:{type:{name:"enum",value:[{value:"'small'",computed:false},{value:"'large'",computed:false}]},required:false,description:""},type:{type:{name:"string"},required:false,description:""}}, - simpleProps: {children:"Default ANY",kind:"primary",onClick:function () { - alert('called function'); - }}, - fullProps: {children:"Default ANY",disabled:true,fullWidth:true,inheritedStyle:null,kind:"primary",onClick:function () { - alert('called function'); - },size:"small",type:"Default string type"} - }, - ExampleComponentsCheckbox: { - name: 'ExampleComponentsCheckbox', - menu: 'Example Components Checkbox', - file: '../../example_components/Checkbox.react.js', - component: ExampleComponentsCheckbox, - componentName: 'Checkbox', - description: '', - customProps: {}, - propsDefinition: {error:{type:{name:"string"},required:false,description:""},label:{type:{name:"string"},required:true,description:""},name:{type:{name:"string"},required:true,description:""},onChange:{type:{name:"func"},required:true,description:""},value:{type:{name:"bool"},required:false,description:""}}, - simpleProps: {label:"Default string label",name:"Default string name",onChange:function () { - alert('called function'); - }}, - fullProps: {error:"Default string error",label:"Default string label",name:"Default string name",onChange:function () { - alert('called function'); - },value:true} - }, - ExampleComponentsCheckboxOnChange: { - name: 'ExampleComponentsCheckboxOnChange', - menu: 'Example Components CheckboxOnChange', - file: '../../example_components/CheckboxOnChange.js', - component: ExampleComponentsCheckboxOnChange, - componentName: 'CheckboxOnChange', - description: '', - customProps: {}, - propsDefinition: {error:{type:{name:"string"},required:false,description:""},label:{type:{name:"string"},required:true,description:""},name:{type:{name:"string"},required:true,description:""},onChange:{type:{name:"func"},required:true,description:""},value:{type:{name:"bool"},required:false,description:""}}, - simpleProps: {label:"Default string label",name:"Default string name",onChange:function () { - alert('called function'); - }}, - fullProps: {error:"Default string error",label:"Default string label",name:"Default string name",onChange:function () { - alert('called function'); - },value:true} - }, - ExampleComponentsEmptyProps: { - name: 'ExampleComponentsEmptyProps', - menu: 'Example Components EmptyProps', - file: '../../example_components/EmptyProps.react.js', - component: ExampleComponentsEmptyProps, - componentName: 'EmptyProps', - description: '', - customProps: {}, - propsDefinition: {}, - simpleProps: {}, - fullProps: {} - }, - ExampleComponentsErrorMessage: { - name: 'ExampleComponentsErrorMessage', - menu: 'Example Components ErrorMessage', - file: '../../example_components/ErrorMessage.react.js', - component: ExampleComponentsErrorMessage, - componentName: 'ErrorMessage', - description: '', - customProps: {}, - propsDefinition: {children:{type:{name:"any"},required:true,description:""},type:{type:{name:"string"},required:false,description:""}}, - simpleProps: {children:"Default ANY"}, - fullProps: {children:"Default ANY",type:"Default string type"} - }, - ExampleComponentsIcon: { - name: 'ExampleComponentsIcon', - menu: 'Example Components Icon', - file: '../../example_components/Icon.react.js', - component: ExampleComponentsIcon, - componentName: 'Icon', - description: '', - customProps: {}, - propsDefinition: {color:{type:{name:"string"},required:false,description:""},display:{type:{name:"string"},required:false,description:""},inheritedStyle:{type:{name:"object"},required:false,description:""},kind:{type:{name:"enum",value:[{value:"'check'",computed:false},{value:"'star'",computed:false}]},required:true,description:""},size:{type:{name:"string"},required:false,description:""}}, - simpleProps: {kind:"check"}, - fullProps: {color:"Default string color",display:"Default string display",inheritedStyle:null,kind:"check",size:"Default string size"} - }, - ExampleComponentsNoProps: { - name: 'ExampleComponentsNoProps', - menu: 'Example Components NoProps', - file: '../../example_components/NoProps.react.js', - component: ExampleComponentsNoProps, - componentName: 'NoProps', - description: '', - customProps: {}, - propsDefinition: {}, - simpleProps: {}, - fullProps: {} - }, - ExampleComponentsOnChangeEvent: { - name: 'ExampleComponentsOnChangeEvent', - menu: 'Example Components OnChangeEvent', - file: '../../example_components/OnChangeEvent.js', - component: ExampleComponentsOnChangeEvent, - componentName: 'OnChangeEvent', - description: '', - customProps: {}, - propsDefinition: {children:{type:{name:"any"},required:false,description:""},error:{type:{name:"string"},required:false,description:""},icon:{type:{name:"enum",value:[{value:"'star'",computed:false},{value:"'check'",computed:false}]},required:false,description:""},iconSize:{type:{name:"string"},required:false,description:""},label:{type:{name:"string"},required:false,description:""},name:{type:{name:"string"},required:true,description:""},onChange:{type:{name:"func"},required:true,description:""},placeholder:{type:{name:"string"},required:true,description:""},tooltip:{type:{name:"string"},required:false,description:""},type:{type:{name:"string"},required:true,description:"",defaultValue:{value:"'text'",computed:false}},unit:{type:{name:"string"},required:false,description:""},value:{type:{name:"string"},required:false,description:""}}, - simpleProps: {name:"Default string name",onChange:function () { - alert('called function'); - },placeholder:"Default string placeholder",type:"text"}, - fullProps: {tooltip:"Default string tooltip",unit:"Default string unit",error:"Default string error",name:"Default string name",onChange:function () { - alert('called function'); - },value:"Default string value",placeholder:"Default string placeholder",label:"Default string label",icon:"star",iconSize:"Default string iconSize",type:"text",children:"Default ANY"} - }, - ExampleComponentsOnChangeNameAndValue: { - name: 'ExampleComponentsOnChangeNameAndValue', - menu: 'Example Components OnChangeNameAndValue', - file: '../../example_components/OnChangeNameAndValue.js', - component: ExampleComponentsOnChangeNameAndValue, - componentName: 'OnChangeNameAndValue', - description: '', - customProps: {}, - propsDefinition: {children:{type:{name:"any"},required:false,description:""},error:{type:{name:"string"},required:false,description:""},icon:{type:{name:"string"},required:false,description:""},iconSize:{type:{name:"string"},required:false,description:""},label:{type:{name:"string"},required:false,description:""},name:{type:{name:"string"},required:true,description:""},onChange:{type:{name:"func"},required:true,description:""},placeholder:{type:{name:"string"},required:true,description:""},tooltip:{type:{name:"string"},required:false,description:""},type:{type:{name:"string"},required:true,description:"",defaultValue:{value:"'text'",computed:false}},unit:{type:{name:"string"},required:false,description:""},value:{type:{name:"string"},required:false,description:""}}, - simpleProps: {name:"Default string name",onChange:function () { - alert('called function'); - },placeholder:"Default string placeholder",type:"text"}, - fullProps: {tooltip:"Default string tooltip",unit:"Default string unit",error:"Default string error",name:"Default string name",onChange:function () { - alert('called function'); - },value:"Default string value",placeholder:"Default string placeholder",label:"Default string label",icon:"Default string icon",iconSize:"Default string iconSize",type:"text",children:"Default ANY"} - }, - ExampleComponentsRadioInput: { - name: 'ExampleComponentsRadioInput', - menu: 'Example Components RadioInput', - file: '../../example_components/RadioInput.react.js', - component: ExampleComponentsRadioInput, - componentName: 'RadioInput', - description: '', - customProps: {}, - propsDefinition: {horizontal:{type:{name:"bool"},required:false,description:""},name:{type:{name:"string"},required:true,description:""},onChange:{type:{name:"func"},required:true,description:""},selected:{type:{name:"bool"},required:true,description:""},text:{type:{name:"string"},required:false,description:""},value:{type:{name:"string"},required:true,description:""}}, - simpleProps: {name:"Default string name",onChange:function () { - alert('called function'); - },selected:true,value:"Default string value"}, - fullProps: {horizontal:true,name:"Default string name",onChange:function () { - alert('called function'); - },selected:true,text:"Default string text",value:"Default string value"} - }, - ExampleComponentsWithExtendProps: { - name: 'ExampleComponentsWithExtendProps', - menu: 'Example Components WithExtendProps', - file: '../../example_components/WithExtendProps.react.js', - component: ExampleComponentsWithExtendProps, - componentName: 'WithExtendProps', - description: '', - customProps: {}, - propsDefinition: {children:{type:{name:"node"},required:true,description:"",defaultValue:{value:"'Editable field with value'",computed:false}},editing:{type:{name:"bool"},required:true,description:"",defaultValue:{value:"false",computed:false}},label:{type:{name:"string"},required:true,description:"",defaultValue:{value:"'Value to show'",computed:false}},onEditingModeChange:{type:{name:"func"},required:true,description:""}}, - simpleProps: {children:"Editable field with value",editing:false,label:"Value to show",onEditingModeChange:function () { - alert('called function'); - }}, - fullProps: {children:"Editable field with value",editing:false,label:"Value to show",onEditingModeChange:function () { - alert('called function'); - }} - }, - ExampleComponentsWithShapePropsWithDefaults: { - name: 'ExampleComponentsWithShapePropsWithDefaults', - menu: 'Example Components WithShapePropsWithDefaults', - file: '../../example_components/WithShapePropsWithDefaults.react.js', - component: ExampleComponentsWithShapePropsWithDefaults, - componentName: 'WithShapePropsWithDefaults', - description: '', - customProps: {}, - propsDefinition: {interval:{type:{name:"shape",value:{value:{name:"number",required:true},text:{name:"string",required:true}}},required:true,description:"",defaultValue:{value:"{\n value: 123,\n text: 'Foo'\n}",computed:false}}}, - simpleProps: {interval:{value:123,text:"Foo"}}, - fullProps: {interval:{value:123,text:"Foo"}} - }, -} diff --git a/package.json b/package.json index b1763b4..ba1f3ae 100644 --- a/package.json +++ b/package.json @@ -37,6 +37,7 @@ "devDependencies": { "babel-cli": ">=5", "babel-core": ">=5", + "babel-eslint": "^5.0.0", "babel-loader": ">=5", "babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-preset-es2015": ">=5", @@ -50,6 +51,7 @@ "expect": "^1.12.2", "gulp": "^3.9.1", "mocha": "^2.3.3", + "react-hot-loader": "^1.3.0", "rimraf": "^2.4.3" }, "dependencies": { diff --git a/src/components/Component.js b/src/components/Component.js index 3dd7f9f..743eda6 100644 --- a/src/components/Component.js +++ b/src/components/Component.js @@ -77,6 +77,9 @@ export default class LibraryComponent extends Component {

Code

+

+ Prop Variants +

) diff --git a/src/components/ExampleSource.js b/src/components/ExampleSource.js index 7161eb7..a7536db 100644 --- a/src/components/ExampleSource.js +++ b/src/components/ExampleSource.js @@ -1,4 +1,4 @@ -import Highlight from './highlight'; +import Highlight from './Highlight.react'; import Radium from 'radium'; import React, {Component, PropTypes as RPT} from 'react'; import renderProp from '../helpers/renderProp'; @@ -52,9 +52,11 @@ export default class ExampleSource extends Component { } renderInlineProps() { + const {atom: {propsDefinition}} = this.props + const {componentProps} = this.props return Object.keys(componentProps) - .map((key) => ` ${renderProp(key, componentProps[key])}`) + .map((key) => ` ${renderProp(key, propsDefinition[key].type.name, componentProps[key])}`) .join('\n') } diff --git a/src/components/Highlight.react.js b/src/components/Highlight.react.js new file mode 100644 index 0000000..f69825e --- /dev/null +++ b/src/components/Highlight.react.js @@ -0,0 +1,7 @@ +import Highlight from 'react-highlight/lib/optimized'; +import hljs from 'highlight.js/lib/highlight'; +import javascriptHighlight from 'highlight.js/lib/languages/javascript'; + +hljs.registerLanguage('javascript', javascriptHighlight) + +export default Highlight; diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js index c7ebebe..8a6607c 100644 --- a/src/components/Sidebar.js +++ b/src/components/Sidebar.js @@ -11,11 +11,20 @@ export default class Sidebar extends Component { } render() { - const {componentsIndex} = this.props + const {componentsIndex, selectAtom, selectedAtom} = this.props return (
    +
  • +
    selectAtom(null)} + style={[styles.link, !selectedAtom && styles.sidebarLinkActive]} + > + All components +
    +
    • {Object.keys(componentsIndex).map(name => this.renderAtom(name))}
diff --git a/src/components/Variants.js b/src/components/Variants.js index 0ff9965..2b44461 100644 --- a/src/components/Variants.js +++ b/src/components/Variants.js @@ -1,5 +1,5 @@ import extendComponentProps from '../helpers/extendComponentProps'; -import Highlight from './highlight'; +import Highlight from './Highlight.react'; import Radium from 'radium'; import React, {Component, PropTypes as RPT} from 'react'; import renderProp from '../helpers/renderProp'; @@ -41,27 +41,27 @@ export default class Variants extends Component { const {type: {name, value}} = definition switch (name) { - case 'string': return this.renderVariants(key, ['', `Default string ${key}`]) - case 'number': return this.renderVariants(key, [0, 1, 100, 1234.56]) - case 'bool': return this.renderVariants(key, [false, true]) - case 'enum' : return this.renderVariants(key, value.map(text => text.value.replace(/\'/g, ''))) + case 'string': return this.renderVariants(key, name, ['', `Default string ${key}`]) + case 'number': return this.renderVariants(key, name, [0, 1, 100, 1234.56]) + case 'bool': return this.renderVariants(key, name, [false, true]) + case 'enum' : return this.renderVariants(key, name, value.map(text => text.value.replace(/\'/g, ''))) } return null } - renderVariants(key, variants) { + renderVariants(key, type, variants) { const {styles} = this.props return (
-

Prop variant: {key}

- {variants.map(variant => this.renderVariant(key, variant))} +

{key} ({type})

+ {variants.map(variant => this.renderVariant(key, type, variant))}
) } - renderVariant(key, variant) { + renderVariant(key, type, variant) { const {atom, componentProps} = this.props const ExampleAtom = resolveComponent(atom.component) const variantProps = {...componentProps, [key]: variant} @@ -69,25 +69,10 @@ export default class Variants extends Component { return (
- <{atom.componentName} {renderProp(key, variant)} /> + <{atom.componentName} {renderProp(key, type, variant)} />
) } } - -const styles = { - pre: { - background: 'white', - border: '1px solid hsl(0, 0%, 70%)', - padding: '3px 10px', - margin: '0' - }, - - blockHeading: { - color: 'hsl(202, 40%, 50%)', - marginRight: '20px', - display: 'inline-block' - } -}; diff --git a/src/components/highlight.js b/src/components/highlight.js deleted file mode 100644 index dce46cc..0000000 --- a/src/components/highlight.js +++ /dev/null @@ -1,25 +0,0 @@ -// import Highlight from 'react-highlight/lib/optimized'; -// import hljs from 'highlight.js/lib/highlight'; -// import javascriptHighlight from 'highlight.js/lib/languages/javascript'; -// -// hljs.registerLanguage('javascript', javascriptHighlight) -// -// export default Highlight; - -import React, {Component, PropTypes as RPT} from 'react'; - -export default class Highlight extends Component { - static propTypes = { - children: RPT.object.isRequired, - } - - render() { - const {children} = this.props - - return ( -
- {children} -
- ) - } -} diff --git a/src/helpers/buildProps.js b/src/helpers/buildProps.js index f02f8d0..73ffd80 100644 --- a/src/helpers/buildProps.js +++ b/src/helpers/buildProps.js @@ -23,7 +23,7 @@ function calculateProp(type, prop) { case 'string': return `Default string ${prop}` case 'bool': return true case 'number': return 1 - case 'func': return () => {alert('called function')} // eslint-disable-line no-eval + case 'func': return eval(`[function () { alert('called function ${prop}') }][0]`) // eslint-disable-line no-eval case 'enum': return type.value[0].value.replace(/'/g, '') case 'shape': return Map(type.value) .map((subType, name) => calculateProp(subType, name)) diff --git a/src/helpers/renderProp.js b/src/helpers/renderProp.js index a25a9f7..ce2b0b9 100644 --- a/src/helpers/renderProp.js +++ b/src/helpers/renderProp.js @@ -1,5 +1,8 @@ -export default function renderProp(key, value) { - if (typeof value === 'object' || typeof value === 'boolean') { +export default function renderProp(key, type, value) { + if (type === 'func') { + return `${key}={${value}}` + } + else if (typeof value === 'object' || typeof value === 'boolean') { return `${key}={${JSON.stringify(value)}}` } else if (typeof value === 'number')