stylized-component - npm Package Compare versions

Comparing version 0.0.4 to 0.0.5

dist/index.d.ts

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

dist/Theme.d.ts

 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;
+    overrides?: ComponentThemes;
+    content?: Partial<CSSStyleDeclaration>;
+    h1?: Partial<CSSStyleDeclaration>;
+    h2?: Partial<CSSStyleDeclaration>;
+    h3?: Partial<CSSStyleDeclaration>;
+    h4?: Partial<CSSStyleDeclaration>;
+    h5?: Partial<CSSStyleDeclaration>;
+    h6?: Partial<CSSStyleDeclaration>;
+    ul?: Partial<CSSStyleDeclaration>;
+    ol?: Partial<CSSStyleDeclaration>;
+    p?: Partial<CSSStyleDeclaration>;
+    table?: Partial<CSSStyleDeclaration>;
+    fieldset?: Partial<CSSStyleDeclaration>;
+    blockquote?: Partial<CSSStyleDeclaration>;
+    form?: Partial<CSSStyleDeclaration>;
+    img?: Partial<CSSStyleDeclaration>;
 }
-export declare const defaultTheme: Theme;
+export interface ComponentTheme {
+    dangerouslyOverrideCss?: CSSStyleDeclaration;
+    [prop: string]: any;
+}
+export interface ComponentThemes {
+    [key: string]: ComponentTheme;
+}

dist/Theme.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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

dist/ThemedComponent.d.ts

@@ -10,3 +10,2 @@ /// <reference types="react" />
     };
-    setTheme(theme: Theme, override?: Partial<ComponentTheme>): ComponentTheme;
 }
@@ -17,5 +16,6 @@ export declare class ThemedComponent<ComponentTheme, Props, State> extends React.Component<Props, State> {
     };
+    styleId: string;
     context: ThemeProviderContext;
-    theme: ComponentTheme;
+    theme: Partial<ComponentTheme>;
     constructor(props: Props, context: ThemeProviderContext);
 }

dist/ThemedComponent.js

@@ -16,3 +16,2 @@ "use strict";
 var PropTypes = require("prop-types");
-var Theme_1 = require("./Theme");
 var ThemedComponent = /** @class */ (function (_super) {
@@ -22,4 +21,4 @@ __extends(ThemedComponent, _super);
         var _this = _super.call(this, props, context) || this;
-        var theme = _.extend({}, Theme_1.defaultTheme, context.theme, _.get(props, 'theme'));
-        _this.theme = _this.setTheme(theme);
+        var theme = _.extend({}, context.theme, _.get(props, 'theme'));
+        _this.theme = _.get(_this, 'theme.overrides[this.styleId]');
         return _this;
@@ -26,0 +25,0 @@ }

package.json

 {
   "name": "stylized-component",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "A design prototype",
@@ -17,8 +17,9 @@ "main": "dist/index.js",
   "dependencies": {
-    "@types/lodash": "^4.14.85",
-    "@types/prop-types": "^15.5.2",
     "lodash": "^4.17.4",
-    "react": "^16.0.0"
+    "prop-types": "^15.5.2",
+    "react": "^16.0.7"
   },
   "devDependencies": {
+    "@types/lodash": "^4.14.85",
+    "@types/prop-types": "^15.5.2",
     "@types/react": "^16.0.7",
@@ -25,0 +26,0 @@ "tslint-config-airbnb": "^5.3.0",

src/index.ts

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

src/Theme.ts

 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;
+  overrides?: ComponentThemes;
+  content?: Partial<CSSStyleDeclaration>;
+  h1?: Partial<CSSStyleDeclaration>;
+  h2?: Partial<CSSStyleDeclaration>;
+  h3?: Partial<CSSStyleDeclaration>;
+  h4?: Partial<CSSStyleDeclaration>;
+  h5?: Partial<CSSStyleDeclaration>;
+  h6?: Partial<CSSStyleDeclaration>;
+  ul?: Partial<CSSStyleDeclaration>;
+  ol?: Partial<CSSStyleDeclaration>;
+  p?: Partial<CSSStyleDeclaration>;
+  table?: Partial<CSSStyleDeclaration>;
+  fieldset?: Partial<CSSStyleDeclaration>;
+  blockquote?: Partial<CSSStyleDeclaration>;
+  form?: Partial<CSSStyleDeclaration>;
+  img?: Partial<CSSStyleDeclaration>;
 }
 
-const absoluteColors = {
-  red: '#d9534f',
-  green: '#5cb85c',
-  blue: '#0275d8',
-  lightGrey: '#ddd',
-  darkGrey: '#333',
-  black: '#000',
-  white: '#fff',
-};
+export interface ComponentTheme {
+  dangerouslyOverrideCss?: CSSStyleDeclaration;
+  [prop: string]: any;
+}
 
-const semanticColors = {
-  primary: absoluteColors.blue,
-  secondary: absoluteColors.lightGrey,
-  success: absoluteColors.green,
-  info: absoluteColors.lightGrey,
-  warning: absoluteColors.red,
-  danger: absoluteColors.red,
-};
-
-export const defaultTheme: Theme = {
-  colors: {
-    absolute: absoluteColors,
-    semantic: semanticColors,
-  },
-  fontSize: '16px',
-  borderRadius: '4px',
-};
+export interface ComponentThemes {
+  [key: string]: ComponentTheme;
+}

src/ThemedComponent.ts

@@ -6,7 +6,6 @@ import * as _ from 'lodash';
 import { ThemeProps, ThemeProviderContext } from './ThemeProvider';
-import { Theme, defaultTheme } from './Theme';
+import { Theme } from './Theme';
 
 export interface ThemedComponent<ComponentTheme = {}, Props = {}, State = {}> {
   props: Props & { theme?: Theme };
-  setTheme(theme: Theme, override?: Partial<ComponentTheme>): ComponentTheme;
 }
@@ -19,10 +18,11 @@
 
+  styleId: string;
   context: ThemeProviderContext;
-  theme: ComponentTheme;
+  theme: Partial<ComponentTheme>;
 
   constructor(props: Props, context: ThemeProviderContext) {
     super(props, context);
-    const theme = _.extend({}, defaultTheme, context.theme, _.get(props, 'theme'));
-    this.theme = this.setTheme(theme);
+    const theme = _.extend({}, context.theme, _.get(props, 'theme')) as Theme;
+    this.theme = _.get(this, 'theme.overrides[this.styleId]');
   }
 }

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

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

Improved metrics

Dependency count

3

decreased by-25%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

17019

decreased by-5.96%

Dev dependency count

5

increased by66.67%

Lines of code

369

decreased by-11.51%

Dependency changes

• + Addedprop-types@^15.5.2

• - Removed@types/lodash@^4.14.85

• - Removed@types/prop-types@^15.5.2

• - Removed@types/lodash@4.17.13(transitive)

• - Removed@types/prop-types@15.7.14(transitive)

• Updatedreact@^16.0.7