cosmo-ui - npm Package Compare versions

Comparing version 0.1.8 to 0.1.9

dist/index.js

@@ -12,2 +12,5 @@ "use strict";
         var _this = _super.call(this, props) || this;
+        _this.setTextInputVal = function (event) {
+            _this.setState({ textInputVal: event.currentTarget.value });
+        };
         _this.state = {
@@ -18,15 +21,11 @@ textInputVal: '',
     }
-    App.prototype._setTextInputVal = function (val) {
-        this.setState({ textInputVal: val });
-    };
     App.prototype.render = function () {
-        var _this = this;
         return (React.createElement(web_1.Container, null,
-            React.createElement(web_1.Row, { column: "xs", columnReverse: "sm", row: "md", justifyContent: "flex-end" },
-                React.createElement("div", { style: { minWidth: '5em', minHeight: '2em', border: '1px solid black' } }, "heeey"),
-                React.createElement("div", { style: { minWidth: '5em', minHeight: '2em', border: '1px solid black' } }, "hoooo"),
-                React.createElement("div", { style: { minWidth: '5em', minHeight: '2em', border: '1px solid black' } },
+            React.createElement(web_1.Row, { column: "xs", columnReverse: "sm", row: "md", justify: "flex-end", align: "flex-start" },
+                React.createElement(web_1.Column, null, "heeey"),
+                React.createElement(web_1.Column, null, "hoooo"),
+                React.createElement(web_1.Column, null,
                     React.createElement(web_1.Icon, { icon: "motorbike", fill: "yellow", rotate: 90, size: 64, stroke: "red" }))),
             React.createElement(web_1.Text, null, "An example text input"),
-            React.createElement(web_1.TextInput, { name: "demoTextInput", onChange: function (e) { return _this._setTextInputVal(e.target.value); }, value: this.state.textInputVal })));
+            React.createElement(web_1.TextInput, { name: "demoTextInput", onChange: this.setTextInputVal, value: this.state.textInputVal })));
     };
@@ -33,0 +32,0 @@ return App;

dist/utils/index.js

@@ -6,4 +6,4 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+__export(require("./event-utils"));
 __export(require("./random"));
-__export(require("./event-utils"));
 /**
@@ -10,0 +10,0 @@ * Replace camelCase with dashed-space

dist/web/col.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
-var React = require("react");
+var _1 = require(".");
 var Col = (function (_super) {
     tslib_1.__extends(Col, _super);
     function Col() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.defaultProps = {
+            column: 'xs',
+        };
+        return _this;
     }
-    Col.prototype.render = function () {
-        var _a = this.props, justify = _a.justify, align = _a.align, width = _a.width, className = _a.className;
-        var classNames = "col justify-" + justify + " align-" + align + " width-" + width + " " + (className ? className : '');
-        return (React.createElement("div", { className: classNames, onClick: this.props.onClick || null }, this.props.children));
-    };
     return Col;
-}(React.Component));
-Col.defaultProps = {
-    justify: 'start',
-    align: 'center',
-    width: 100,
-};
+}(_1.Flex));
 exports.Col = Col;
 //# sourceMappingURL=col.js.map

dist/web/container.js

@@ -5,3 +5,3 @@ "use strict";
 var React = require("react");
-var styles = require("../../src/styles/components/container.scss");
+var styles = require('../../src/styles/components/container.scss');
 var Container = (function (_super) {
@@ -8,0 +8,0 @@ tslib_1.__extends(Container, _super);

dist/web/divider.js

@@ -5,3 +5,3 @@ "use strict";
 var React = require("react");
-var styles = require("../../src/styles/components/divider.scss");
+var styles = require('../../src/styles/components/divider.scss');
 var Divider = (function (_super) {
@@ -8,0 +8,0 @@ tslib_1.__extends(Divider, _super);

dist/web/header.js

@@ -27,5 +27,5 @@ "use strict";
 Header.defaultProps = {
-    size: 'md'
+    size: 'md',
 };
 exports.Header = Header;
 //# sourceMappingURL=header.js.map

dist/web/index.js

@@ -6,3 +6,5 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-__export(require("./col"));
+// Abstract classes *must* be exported first !!
+__export(require("./flex"));
+// Stuff that may or may not inherit from it
 __export(require("./container"));
@@ -20,2 +22,3 @@ __export(require("./divider"));
 __export(require("./radio-group"));
+__export(require("./column"));
 __export(require("./row"));
@@ -22,0 +25,0 @@ __export(require("./select"));

dist/web/number-input.js

@@ -12,6 +12,6 @@ "use strict";
         // prevent it from going above the max
-        //if(this.props.max && this.props.value.toString().length >= this.props.max) return 
-        // make sure it's a valid integer 
+        // if(this.props.max && this.props.value.toString().length >= this.props.max) return
+        // make sure it's a valid integer
         // (i know chrome does this but i'm not sure about some of the others)
-        var n = parseInt(e);
+        var n = Number(e);
         if (n) {
@@ -18,0 +18,0 @@ this.props.onChange(n);

dist/web/radio-button.js

@@ -5,3 +5,3 @@ "use strict";
 var React = require("react");
-var styles = require("../../src/styles/components/select.scss");
+var styles = require('../../src/styles/components/select.scss');
 var RadioButton = (function (_super) {
@@ -8,0 +8,0 @@ tslib_1.__extends(RadioButton, _super);

dist/web/radio-group.js

@@ -30,3 +30,3 @@ "use strict";
         var _this = this;
-        return (React.createElement(web_1.Row, { row: "sm", justifyContent: "between" },
+        return (React.createElement(web_1.Row, { row: "sm", justify: "between" },
             this.props.options.slice(0, 4).map(function (o) {
@@ -33,0 +33,0 @@ return React.createElement(web_1.RadioButton, { isSelected: _this._isSelected(o), onChange: function () { return _this._onChange(o.id); }, key: o.id, name: _this.props.formName, label: o.label, value: o, img: o.img });

dist/web/row.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
-var React = require("react");
-var cx = require("classnames");
-var utils_1 = require("../utils");
-var styles = require('../../src/styles/components/row.scss');
-var widths = ['xs', 'sm', 'lg', 'md'];
-var widthConfig = ['flexDirection', 'justifyContent'];
-var shortcutProps = {
-    row: { key: 'flexDirection', propIsValue: true },
-    rowReverse: { key: 'flexDirection', propIsValue: true },
-    column: { key: 'flexDirection', propIsValue: true },
-    columnReverse: { key: 'flexDirection', propIsValue: true },
-    justifyContent: { key: 'justifyContent', propIsValue: false },
-    alignItems: { key: 'alignItems', propIsValue: false },
-};
-// Basically we are normalising class for comparison of values so we don't get overlaps
-var classAndNormalised = function (key, width, value) { return [
-    styles[utils_1.dasherize(key) + "-" + width + "-" + value],
-    utils_1.dasherize(key) + "-" + width,
-]; };
-var classFromOverride = function (props, width, key) {
-    return classAndNormalised(key, width, props[width][key]);
-};
-var classesFromProp = function (prop, value) {
-    var _a = shortcutProps[prop], key = _a.key, propIsValue = _a.propIsValue;
-    return propIsValue
-        ? [classAndNormalised(key, value, utils_1.dasherize(prop))]
-        : widths.map(function (width) { return classAndNormalised(key, width, value); });
-};
+var constants_1 = require("../constants");
+var _1 = require(".");
 var Row = (function (_super) {
@@ -36,42 +10,11 @@ tslib_1.__extends(Row, _super);
         var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.handleClick = utils_1.eventValue(function (value) {
-            console.log('event', _this, value);
-        });
+        _this.shortcutProps = constants_1.ROW_SHORTCUT_PROPS;
         return _this;
     }
-    Row.prototype.render = function () {
-        var children = this.props.children;
-        return (React.createElement("div", { style: { width: '100%' }, className: this.classes(), onClick: this.handleClick }, children));
-    };
-    Row.prototype.classes = function () {
-        var _this = this;
-        var props = this.props;
-        // Build a map of classes keyed by their normal name
-        var shortcutClasses = utils_1.flatten(Object.keys(shortcutProps)
-            .filter(function (prop) { return props[prop] !== undefined; })
-            .map(function (prop) { return classesFromProp(prop, props[prop]); }))
-            .reduce(function (dst, _a) {
-            var cls = _a[0], nrmCls = _a[1];
-            return (tslib_1.__assign({}, dst, (_b = {}, _b[nrmCls] = cls, _b)));
-            var _b;
-        }, {});
-        // Reduce override classes into the initial map, overriding based on normalised name
-        var classes = utils_1.flatten(widths
-            .map(function (width) { return widthConfig
-            .filter(function (key) { return _this.props[width] !== undefined
-            && _this.props[width][key] !== undefined; })
-            .map(function (key) { return classFromOverride(_this.props, width, key); }); }))
-            .reduce(function (dst, _a) {
-            var cls = _a[0], nrmCls = _a[1];
-            return (tslib_1.__assign({}, dst, (_b = {}, _b[nrmCls] = cls, _b)));
-            var _b;
-        }, shortcutClasses);
-        // Use classnames to build up a string of classnames
-        return cx.apply(void 0, [props.className,
-            styles.container].concat(Object.values(classes)));
-    };
     return Row;
-}(React.Component));
-Row.defaultProps = {};
+}(_1.Flex));
+Row.defaultProps = {
+    row: 'xs',
+};
 exports.Row = Row;
 //# sourceMappingURL=row.js.map

dist/web/spacer.js

@@ -17,5 +17,5 @@ "use strict";
     width: 5,
-    widthType: '%'
+    widthType: '%',
 };
 exports.Spacer = Spacer;
 //# sourceMappingURL=spacer.js.map

package.json

 {
   "name": "cosmo-ui",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "Common React components",
@@ -5,0 +5,0 @@ "main": "./index.js",

src/interfaces/index.ts

@@ -1,4 +0,6 @@
-export * from './col'
+export * from './column'
+export * from './common'
 export * from './container'
 export * from './divider'
+export * from './flex'
 export * from './form-box'
@@ -5,0 +7,0 @@ export * from './form-group'

src/interfaces/radio-group.ts

@@ -1,3 +0,3 @@
-import { Row, RadioButton, Divider } from "../web"
-import { RadioOption } from "../interfaces"
+import { Row, RadioButton, Divider } from '../web'
+import { RadioOption } from '../interfaces'
 
@@ -4,0 +4,0 @@ export interface RadioGroupProps {

src/interfaces/row.ts

@@ -1,55 +0,19 @@
-export type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse'
+import { Breakpoint, FlexProps, FlexShortcutProps, FlexShortcutProp } from '.'
 
-export type JustifyContent = 'flex-start'
-    | 'flex-end'
-    | 'center'
-    | 'space-between'
-    | 'space-around'
-    | 'around'
-    | 'between'
-
-export type AlignItems = 'flex-start' | 'flex-end' | 'center' | 'between' | 'around'
-
-export interface FlexConfig {
-    flexDirection?: FlexDirection,
-    justifyContent?: JustifyContent,
-    alignItems?: AlignItems,
+export interface RowProps extends FlexProps {
+    row?: Breakpoint
+    rowReverse?: Breakpoint
+    column?: Breakpoint
+    columnReverse?: Breakpoint
 }
 
-export type FlexConfigKey = keyof FlexConfig;
-
-export type Width = 'xs' | 'sm' | 'md' | 'lg'
-
-export interface RowProps {
-    className?: string
-    row?: Width
-    rowReverse?: Width
-    column?: Width
-    columnReverse?: Width
-    justifyContent?: JustifyContent
-    alignItems?: AlignItems
-    width?: number
-    onClick?: any
-    xs?: FlexConfig
-    sm?: FlexConfig
-    md?: FlexConfig
-    lg?: FlexConfig
-}
-
 export type RowPropsKey = keyof RowProps;
 
-export interface ShortcutProp {
-    key: FlexConfigKey,
-    propIsValue: boolean,
+export interface RowShortcutProps extends FlexShortcutProps {
+    row: FlexShortcutProp
+    rowReverse: FlexShortcutProp
+    column: FlexShortcutProp
+    columnReverse: FlexShortcutProp
 }
 
-export interface ShortcutProps {
-    row: ShortcutProp
-    rowReverse: ShortcutProp
-    column: ShortcutProp
-    columnReverse: ShortcutProp
-    justifyContent: ShortcutProp
-    alignItems: ShortcutProp
-}
-
-export type ShortcutPropsKey = keyof ShortcutProps
+export type RowShortcutPropsKey = keyof RowShortcutProps

src/utils/index.ts

@@ -0,3 +1,3 @@
+export * from './event-utils'
 export * from './random'
-export * from './event-utils'
 
@@ -4,0 +4,0 @@ /**

src/web/index.ts

@@ -1,2 +0,7 @@
-export * from './col'
+import * as React from 'react'
+
+// Abstract classes *must* be exported first !!
+export * from './flex'
+
+// Stuff that may or may not inherit from it
 export * from './container'
@@ -14,2 +19,3 @@ export * from './divider'
 export * from './radio-group'
+export * from './column'
 export * from './row'
@@ -16,0 +22,0 @@ export * from './select'

tslint.json

@@ -82,4 +82,8 @@ {
     "no-var-requires": false,
-    "jsx-boolean-value": false
+    "jsx-boolean-value": false,
+    "no-namespace": false,
+    "max-classes-per-file": [
+      false
+    ]
   }
 }

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

507509

increased by1.45%

Number of package files

190

increased by22.58%

Lines of code

1747

increased by10.22%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes