stylized-component - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

dist/index.d.ts

@@ -1,3 +0,3 @@
-export { StyledComponent, ThemeProps } from './StyledComponent';
-export { Style } from './Style';
+export { ThemedComponent } from './ThemedComponent';
 export { Theme } from './Theme';
+export { ThemeProvider, ThemeProps } from './ThemeProvider';

dist/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var StyledComponent_1 = require("./StyledComponent");
-exports.StyledComponent = StyledComponent_1.StyledComponent;
-var Theme_1 = require("./Theme");
-exports.Theme = Theme_1.Theme;
+var ThemedComponent_1 = require("./ThemedComponent");
+exports.ThemedComponent = ThemedComponent_1.ThemedComponent;
+var ThemeProvider_1 = require("./ThemeProvider");
+exports.ThemeProvider = ThemeProvider_1.ThemeProvider;
 //# sourceMappingURL=index.js.map

dist/Style.d.ts

@@ -1,2 +0,2 @@
-export interface Style {
+export interface ThemeStyle {
     colors: {
@@ -24,2 +24,2 @@ absolute: {
 }
-export declare const DefaultStyle: Style;
+export declare const defaultStyle: ThemeStyle;

dist/Style.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-;
 var absoluteColors = {
@@ -21,3 +20,3 @@ red: '#d9534f',
 };
-exports.DefaultStyle = {
+exports.defaultStyle = {
     colors: {
@@ -24,0 +23,0 @@ absolute: absoluteColors,

dist/StyledComponent.d.ts

 /// <reference types="react" />
 import * as React from 'react';
-import { Style } from './Style';
+import { ThemeStyle } from './Style';
 export interface ThemeProps {
-    theme?: Style;
+    theme?: ThemeStyle;
 }
-export interface StyledComponent<StyleT = {}, PropsT = {}, StateT = {}> {
-    theme: StyleT;
-    globalTheme: Style;
+export interface StyledComponent<Style = {}, Props = {}, State = {}> {
+    theme: ThemeStyle;
+    globalTheme: ThemeStyle;
     props: Readonly<{
         children?: React.ReactNode;
-    }> & Readonly<PropsT> & ThemeProps;
-    setTheme(global: Style, override?: StyleT): StyleT;
+    }> & Readonly<Props> & ThemeProps;
+    setTheme(global: ThemeStyle, override?: Style): ThemeStyle;
 }
-export declare class StyledComponent<StyleT, PropsT, StateT> extends React.Component<PropsT, StateT> implements StyledComponent {
-    theme: StyleT;
-    globalTheme: Style;
-    constructor(props?: PropsT, context?: any);
+export declare class StyledComponent<Style, Props, State> extends React.Component<Props, State> {
+    theme: ThemeStyle;
+    globalTheme: ThemeStyle;
+    constructor(props?: Props, context?: any);
     componentWillUpdate(nextProps: any): void;
 }

dist/StyledComponent.js

@@ -15,3 +15,2 @@ "use strict";
 var Style_1 = require("./Style");
-;
 var StyledComponent = /** @class */ (function (_super) {
@@ -21,3 +20,3 @@ __extends(StyledComponent, _super);
         var _this = _super.call(this, props, context) || this;
-        _this.globalTheme = _this.props.theme ? _this.props.theme : Style_1.DefaultStyle;
+        _this.globalTheme = _this.props.theme ? _this.props.theme : Style_1.defaultStyle;
         _this.theme = _this.setTheme(_this.globalTheme);
@@ -24,0 +23,0 @@ return _this;

dist/Theme.d.ts

@@ -1,9 +0,24 @@
-/// <reference types="react" />
-import * as React from 'react';
-import { ThemeProps } from './StyledComponent';
-export interface ThemeProps {
-    children?: React.ReactNode;
+export interface Theme {
+    colors: {
+        absolute: {
+            red: string;
+            green: string;
+            blue: string;
+            lightGrey: string;
+            darkGrey: string;
+            black: string;
+            white: string;
+        };
+        semantic: {
+            primary: string;
+            secondary: string;
+            success: string;
+            info: string;
+            warning: string;
+            danger: string;
+        };
+    };
+    fontSize: string;
+    borderRadius: string;
 }
-export declare class Theme extends React.Component<ThemeProps, {}> {
-    render(): JSX.Element;
-}
+export declare const defaultTheme: Theme;

dist/Theme.js

 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 Object.defineProperty(exports, "__esModule", { value: true });
-var React = require("react");
-function cloneElementWithTheme(child, theme) {
-    // Hackity hack hack - If the child specifys a theme, respect it.
-    var element = child;
-    var childThemeProp = element.props['theme'];
-    var childTheme = childThemeProp ? childThemeProp : theme;
-    return React.cloneElement(child, { theme: childTheme });
-}
-var Theme = /** @class */ (function (_super) {
-    __extends(Theme, _super);
-    function Theme() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Theme.prototype.render = function () {
-        var theme = this.props.theme;
-        var children = React.Children.map(this.props.children, function (c) { return cloneElementWithTheme(c, theme); });
-        return (React.createElement("div", null, children));
-    };
-    return Theme;
-}(React.Component));
-exports.Theme = Theme;
+var absoluteColors = {
+    red: '#d9534f',
+    green: '#5cb85c',
+    blue: '#0275d8',
+    lightGrey: '#ddd',
+    darkGrey: '#333',
+    black: '#000',
+    white: '#fff',
+};
+var semanticColors = {
+    primary: absoluteColors.blue,
+    secondary: absoluteColors.lightGrey,
+    success: absoluteColors.green,
+    info: absoluteColors.lightGrey,
+    warning: absoluteColors.red,
+    danger: absoluteColors.red,
+};
+exports.defaultTheme = {
+    colors: {
+        absolute: absoluteColors,
+        semantic: semanticColors,
+    },
+    fontSize: '16px',
+    borderRadius: '4px',
+};
 //# sourceMappingURL=Theme.js.map

package.json

 {
   "name": "stylized-component",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "A design prototype",
@@ -17,2 +17,5 @@ "main": "dist/index.js",
   "dependencies": {
+    "@types/lodash": "^4.14.85",
+    "@types/prop-types": "^15.5.2",
+    "lodash": "^4.17.4",
     "react": "^16.0.0"
@@ -22,4 +25,5 @@ },
     "@types/react": "^16.0.7",
+    "tslint-config-airbnb": "^5.3.0",
     "typescript": "^2.5.3"
   }
 }

src/index.ts

@@ -1,3 +0,3 @@
-export { StyledComponent, ThemeProps } from './StyledComponent';
-export { Style } from './Style';
-export { Theme } from './Theme';
+export { ThemedComponent } from './ThemedComponent';
+export { Theme } from './Theme';
+export { ThemeProvider, ThemeProps } from './ThemeProvider';

tslint.json

 {
-  "extends": [
-    "tslint-config-standard",
-    "tslint-config-prettier"
-  ]
+  "extends": "tslint-config-airbnb"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

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

Worsened metrics

Total package byte prevSize

18098

decreased by-56.3%

Dependency count

4

increased by300%

Dev dependency count

3

increased by50%

Number of package files

29

decreased by-42%

Lines of code

417

decreased by-48.39%

Dependency changes

• + Added@types/lodash@^4.14.85

• + Added@types/prop-types@^15.5.2

• + Addedlodash@^4.17.4

• + Added@types/lodash@4.17.13(transitive)

• + Added@types/prop-types@15.7.14(transitive)

• + Addedlodash@4.17.21(transitive)