react-sm-ui - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

lib/collections/Form.js

@@ -36,5 +36,5 @@ 'use strict';
 
-var _Label = require('../elements/Label');
+var _index = require('../index');
 
-var _Label2 = _interopRequireDefault(_Label);
+var _index2 = _interopRequireDefault(_index);
 
@@ -140,4 +140,4 @@ var _spellNumber = require('../util/spellNumber');
       var pointingLabel = hasErrors ? _react2.default.createElement(
-        _Label2.default,
-        { type: 'basic', className: 'prompt red', pointing: true },
+        _index2.default,
+        { basic: true, pointing: true, className: 'prompt red' },
         errors.get(0)
@@ -144,0 +144,0 @@ ) : undefined;

lib/collections/grid/Column.js

@@ -59,6 +59,9 @@ 'use strict';
     value: function render() {
-      var classes = (0, _classnames2.default)('column', this.props.className, this.widthClasses());
+      var className = this.props.className;
+
+      var classes = (0, _classnames2.default)(this.widthClasses(), 'column', className);
+
       return _react2.default.createElement(
         'div',
-        { className: classes },
+        { className: classes, style: this.props.style },
         this.props.children
@@ -65,0 +68,0 @@ );

lib/collections/grid/Grid.js

@@ -63,4 +63,9 @@ 'use strict';
     value: function render() {
-      var classes = (0, _classnames2.default)('ui', this.columnClasses(), 'grid', { 'container': this.props.page }, this.props.className);
+      var _props = this.props;
+      var page = _props.page;
+      var container = _props.container;
+      var className = _props.className;
 
+      var classes = (0, _classnames2.default)('ui', this.columnClasses(), 'grid', { 'container': page || container }, className);
+
       return _react2.default.createElement(
@@ -79,4 +84,5 @@ 'div',
   columns: _react.PropTypes.number,
-  page: _react.PropTypes.bool
+  page: _react.PropTypes.bool,
+  container: _react.PropTypes.bool
 };
 exports.default = Grid;

lib/collections/Menu.js

@@ -35,2 +35,6 @@ 'use strict';
 
+var _propsToClasses = require('../util/propsToClasses');
+
+var _propsToClasses2 = _interopRequireDefault(_propsToClasses);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -49,3 +53,7 @@
     value: function render() {
-      var classes = (0, _classnames2.default)('ui menu vertical', this.props.className);
+      var className = this.props.className;
+
+      var classesFromProps = (0, _propsToClasses2.default)(['vertical', 'basic'], this.props);
+      var classes = (0, _classnames2.default)('ui', classesFromProps, 'menu', className);
+
       return _react2.default.createElement(
@@ -61,2 +69,6 @@ 'div',
 
+Menu.propTypes = {
+  vertical: _react.PropTypes.bool,
+  basic: _react.PropTypes.bool
+};
 exports.default = Menu;

lib/common/semanticClasses.js

@@ -15,2 +15,10 @@ 'use strict';
     return 'attached';
+  } else if (attached === 'topRight') {
+    return 'top right attached';
+  } else if (attached === 'topLeft') {
+    return 'top left attached';
+  } else if (attached === 'bottomRight') {
+    return 'bottom right attached';
+  } else if (attached === 'bottomLeft') {
+    return 'bottom left attached';
   }
@@ -17,0 +25,0 @@ };

lib/common/SemanticUiProptypes.js

@@ -11,14 +11,18 @@ 'use strict';
 var attached = _react.PropTypes.oneOf(['top', 'bottom', 'both']);
+var labelAttachment = _react.PropTypes.oneOf(['top', 'bottom', 'right', 'left', 'topLeft', 'bottomLeft', 'topRight', 'bottomRight']);
 var aligned = _react.PropTypes.oneOf(['right', 'left', 'center']);
 var imageAlignment = _react.PropTypes.oneOf(['top', 'bottom', 'middle']);
 var floated = _react.PropTypes.oneOf(['right', 'left']);
+var color = _react.PropTypes.oneOf(['red', 'orange', 'yellow', 'olive', 'green', 'teal', 'blue', 'violet', 'purple', 'pink', 'brown', 'grey', 'black']);
 
 var SemanticUiPropTypes = {
-  size: size,
   attached: attached,
   aligned: aligned,
+  color: color,
+  floated: floated,
   imageAlignment: imageAlignment,
-  floated: floated
+  labelAttachment: labelAttachment,
+  size: size
 };
 
 exports.default = SemanticUiPropTypes;

lib/elements/Button.js

@@ -35,2 +35,8 @@ 'use strict';
 
+var _SemanticUiPropTypes = require('../common/SemanticUiPropTypes');
+
+var _SemanticUiPropTypes2 = _interopRequireDefault(_SemanticUiPropTypes);
+
+var _semanticClasses = require('../common/semanticClasses');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -54,3 +60,3 @@
 
-      var classes = (0, _classnames2.default)('ui button', { 'primary': primary }, { 'secondary': secondary }, { 'fluid': fluid }, this.props.className);
+      var classes = (0, _classnames2.default)('ui', { 'primary': primary }, { 'secondary': secondary }, { 'fluid': fluid }, (0, _semanticClasses.floatedClasses)(this.props), 'button', this.props.className);
 
@@ -70,4 +76,5 @@ return _react2.default.createElement(
   secondary: _react.PropTypes.bool,
-  fluid: _react.PropTypes.bool
+  fluid: _react.PropTypes.bool,
+  floated: _SemanticUiPropTypes2.default.floated
 };
 exports.default = Button;

lib/elements/Container.js

@@ -35,2 +35,8 @@ 'use strict';
 
+var _SemanticUiPropTypes = require('../common/SemanticUiPropTypes');
+
+var _SemanticUiPropTypes2 = _interopRequireDefault(_SemanticUiPropTypes);
+
+var _semanticClasses = require('../common/semanticClasses');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -49,4 +55,10 @@
     value: function render() {
-      var classes = (0, _classnames2.default)('ui container', this.props.classname);
+      var _props = this.props;
+      var text = _props.text;
+      var fluid = _props.fluid;
+      var justified = _props.justified;
+      var className = _props.className;
 
+      var classes = (0, _classnames2.default)('ui', { 'fluid': fluid }, { 'text': text }, (0, _semanticClasses.alignedClasses)(this.props), { 'justified': justified }, 'container', className);
+
       return _react2.default.createElement(
@@ -62,2 +74,8 @@ 'div',
 
+Container.propTypes = {
+  text: _react.PropTypes.bool,
+  fluid: _react.PropTypes.bool,
+  justified: _react.PropTypes.bool,
+  aligned: _SemanticUiPropTypes2.default.aligned
+};
 exports.default = Container;

lib/elements/image/Image.js

@@ -66,2 +66,3 @@ 'use strict';
       var className = _props.className;
+      var style = _props.style;
 
@@ -74,3 +75,3 @@ var classesFromProps = (0, _propsToClasses2.default)(['avatar', 'bordered', 'fluid', 'rounded', 'circular', 'centered'], this.props);
           'div',
-          { className: classes },
+          { className: classes, style: style },
           _react2.default.createElement('img', { src: src })
@@ -81,3 +82,3 @@ );
           'div',
-          { className: classes },
+          { className: classes, style: style },
           this.props.children
@@ -88,7 +89,7 @@ );
           'a',
-          { href: href, className: classes },
+          { href: href, className: classes, style: style },
           _react2.default.createElement('img', { src: src })
         );
       } else {
-        return _react2.default.createElement('img', { className: classes, src: src });
+        return _react2.default.createElement('img', { className: classes, src: src, style: style });
       }
@@ -95,0 +96,0 @@ }

lib/elements/segment/Segment.js

@@ -58,6 +58,6 @@ 'use strict';
     value: function render() {
-      var props = ['raised', 'stacked', 'piled', 'vertical', 'disabled', 'loading', 'secondary', 'tertiary', 'inverted', 'padded', 'compact', 'circular', 'clearing'];
+      var props = ['basic', 'raised', 'stacked', 'piled', 'vertical', 'disabled', 'loading', 'secondary', 'tertiary', 'inverted', 'padded', 'compact', 'circular', 'clearing', 'container'];
 
       var classesFromProps = (0, _propsToClasses2.default)(props, this.props);
-      var classes = (0, _classnames2.default)('ui', classesFromProps, (0, _semanticClasses.attachedClasses)(this.props), (0, _semanticClasses.alignedClasses)(this.props), (0, _semanticClasses.floatedClasses)(this.props), 'segment', this.props.className);
+      var classes = (0, _classnames2.default)('ui', classesFromProps, this.props.color, (0, _semanticClasses.attachedClasses)(this.props), (0, _semanticClasses.alignedClasses)(this.props), (0, _semanticClasses.floatedClasses)(this.props), { 'very padded': this.props.veryPadded }, 'segment', this.props.className);
 
@@ -89,2 +89,5 @@ return _react2.default.createElement(
   clearing: _react.PropTypes.bool,
+  container: _react.PropTypes.bool,
+  basic: _react.PropTypes.bool,
+  color: _SemanticUiPropTypes2.default.color,
   attached: _SemanticUiPropTypes2.default.attached,
@@ -91,0 +94,0 @@ aligned: _SemanticUiPropTypes2.default.aligned,

lib/elements/segment/SegmentGroup.js

@@ -53,3 +53,3 @@ 'use strict';
 
-      var classesFromProps = (0, _propsToClasses2.default)(['horizontal', 'raised', 'stacked', 'piled'], this.props);
+      var classesFromProps = (0, _propsToClasses2.default)(['horizontal', 'raised', 'stacked', 'piled', 'compact'], this.props);
       var classes = (0, _classnames2.default)('ui', classesFromProps, 'segments', this.props.className);
@@ -71,4 +71,5 @@
   stacked: _react.PropTypes.bool,
-  piled: _react.PropTypes.bool
+  piled: _react.PropTypes.bool,
+  compact: _react.PropTypes.bool
 };
 exports.default = SegmentGroup;

lib/index.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.Statistic = exports.SegmentGroup = exports.Segment = exports.Row = exports.Rail = exports.Message = exports.ModalActions = exports.ModalContent = exports.ModalHeader = exports.Modal = exports.Menu = exports.ListItem = exports.List = exports.Label = exports.ItemGroup = exports.Item = exports.ImageGroup = exports.Image = exports.Grid = exports.FormField = exports.Form = exports.Flag = exports.Header = exports.Divider = exports.Column = exports.Container = exports.Button = undefined;
+exports.Statistic = exports.SegmentGroup = exports.Segment = exports.Row = exports.Rail = exports.Message = exports.ModalActions = exports.ModalContent = exports.ModalHeader = exports.Modal = exports.Menu = exports.ListItem = exports.List = exports.LabelGroup = exports.Label = exports.ItemGroup = exports.Item = exports.ImageGroup = exports.Image = exports.Grid = exports.FormField = exports.Form = exports.Flag = exports.Input = exports.Header = exports.Divider = exports.Column = exports.Container = exports.Button = undefined;
 
@@ -67,6 +67,14 @@ var _Form = require('./collections/Form');
 
-var _Label = require('./elements/Label');
+var _Input = require('./elements/Input');
 
+var _Input2 = _interopRequireDefault(_Input);
+
+var _Label = require('./elements/label/Label');
+
 var _Label2 = _interopRequireDefault(_Label);
 
+var _LabelGroup = require('./elements/label/LabelGroup');
+
+var _LabelGroup2 = _interopRequireDefault(_LabelGroup);
+
 var _Segment = require('./elements/segment/Segment');
@@ -113,2 +121,3 @@
 exports.Header = _Header2.default;
+exports.Input = _Input2.default;
 exports.Flag = _Flag2.default;
@@ -123,2 +132,3 @@ exports.Form = _Form.Form;
 exports.Label = _Label2.default;
+exports.LabelGroup = _LabelGroup2.default;
 exports.List = _List.List;
@@ -125,0 +135,0 @@ exports.ListItem = _List.ListItem;

package.json

 {
   "name": "react-sm-ui",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Semantic UI components built with React",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -18,2 +18,14 @@ # react-sm-ui
 
- - Very experimental early stage.
+The project is still in its infancy but you can check the demo to see what's already implemented.
+
+To run the demo:
+
+    $ git clone https://github.com/shinzui/react-sm-ui.git
+    $ cd react-sm-ui && npm install && npm run demo
+
+Then go to http://localhost:8080/demo
+
+Alternatively, you can look at the [closed component issues](https://github.com/shinzui/react-sm-ui/issues?q=is%3Aissue+label%3AComponent+is%3Aclosed) which has all the
+**fully implemented** Semantic UI components.
+
+Please note that the API will likely change as I use it on my projects.

No alert changes

Improved metrics

Total package byte prevSize

99839

increased by18.06%

Number of package files

39

increased by8.33%

Lines of code

2252

increased by18.84%

Number of lines in readme file

31

increased by63.16%

No dependency changes