@salutejs/plasma-new-hope - npm Package Compare versions

Comparing version 0.1.0-canary.657.5952048566.0 to 0.1.0-canary.657.5952638429.0

cjs/components/Button/Button.js

@@ -46,3 +46,4 @@ import './Button_1tjxyc5.css';
     disabled: {
-      css: base$3.base
+      css: base$3.base,
+      attrs: true
     },
@@ -49,0 +50,0 @@ focused: {

cjs/engines/common.js

@@ -67,2 +67,5 @@ 'use strict';
       res.variations[key].css = baseConfig.variations[key].css;
+      if (baseConfig.variations[key].attrs) {
+        res.variations[key].attrs = baseConfig.variations[key].attrs;
+      }
     }
@@ -69,0 +72,0 @@ }

cjs/engines/linaria.js

@@ -12,6 +12,2 @@ 'use strict';
 
-// TODO: tagResolver: (source, tag) => string
-// export { styled, css };
-
-// TODO: remove props => _view=primary
 /** linaria engine */
@@ -31,5 +27,29 @@ var _component = function _component(componentConfig) {
     var cls = core.cx.apply(void 0, [className, base].concat(_rollupPluginBabelHelpers.toConsumableArray(staticVarians), _rollupPluginBabelHelpers.toConsumableArray(variants)));
+
+    // styled-components do it inside
+    // filter props
+    var props = {};
+    for (var key in rest) {
+      if (!(key in componentConfig.variations)) {
+        props[key] = rest[key];
+      }
+    }
+
+    // styled-components do it inside
+    // add props that should be attr( disabled for example)
+    var htmlAttrs = {};
+    for (var _i = 0, _Object$entries = Object.entries(componentConfig.variations || {}); _i < _Object$entries.length; _i++) {
+      var _Object$entries$_i = _rollupPluginBabelHelpers.slicedToArray(_Object$entries[_i], 2),
+        _key = _Object$entries$_i[0],
+        value = _Object$entries$_i[1];
+      if (_key in rest) {
+        var attrs = value.attrs;
+        if (typeof attrs === 'boolean') {
+          htmlAttrs[_key] = rest[_key];
+        }
+      }
+    }
     return /*#__PURE__*/React.createElement(Root, _rollupPluginBabelHelpers.extends({
       className: cls
-    }, defaults, rest));
+    }, htmlAttrs, props));
   };
@@ -36,0 +56,0 @@ if (name) {

es/components/Button/Button.js

@@ -42,3 +42,4 @@ import './Button_1tjxyc5.css';
     disabled: {
-      css: base$3
+      css: base$3,
+      attrs: true
     },
@@ -45,0 +46,0 @@ focused: {

es/engines/common.js

@@ -63,2 +63,5 @@ import { objectSpread2 as _objectSpread2, slicedToArray as _slicedToArray } from '../_virtual/_rollupPluginBabelHelpers.js';
       res.variations[key].css = baseConfig.variations[key].css;
+      if (baseConfig.variations[key].attrs) {
+        res.variations[key].attrs = baseConfig.variations[key].attrs;
+      }
     }
@@ -65,0 +68,0 @@ }

es/engines/linaria.js

@@ -1,2 +0,2 @@
-import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray, extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray, slicedToArray as _slicedToArray, extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.js';
 import React from 'react';
@@ -8,6 +8,2 @@ import { cx } from '@linaria/core';
 
-// TODO: tagResolver: (source, tag) => string
-// export { styled, css };
-
-// TODO: remove props => _view=primary
 /** linaria engine */
@@ -27,5 +23,29 @@ var _component = function _component(componentConfig) {
     var cls = cx.apply(void 0, [className, base].concat(_toConsumableArray(staticVarians), _toConsumableArray(variants)));
+
+    // styled-components do it inside
+    // filter props
+    var props = {};
+    for (var key in rest) {
+      if (!(key in componentConfig.variations)) {
+        props[key] = rest[key];
+      }
+    }
+
+    // styled-components do it inside
+    // add props that should be attr( disabled for example)
+    var htmlAttrs = {};
+    for (var _i = 0, _Object$entries = Object.entries(componentConfig.variations || {}); _i < _Object$entries.length; _i++) {
+      var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
+        _key = _Object$entries$_i[0],
+        value = _Object$entries$_i[1];
+      if (_key in rest) {
+        var attrs = value.attrs;
+        if (typeof attrs === 'boolean') {
+          htmlAttrs[_key] = rest[_key];
+        }
+      }
+    }
     return /*#__PURE__*/React.createElement(Root, _extends({
       className: cls
-    }, defaults, rest));
+    }, htmlAttrs, props));
   };
@@ -32,0 +52,0 @@ if (name) {

package.json

 {
     "name": "@salutejs/plasma-new-hope",
-    "version": "0.1.0-canary.657.5952048566.0",
+    "version": "0.1.0-canary.657.5952638429.0",
     "description": "Salute Design System blueprint",
-    "main": "index.js",
+    "main": "cjs/index.js",
     "module": "es/index.js",
@@ -18,3 +18,3 @@ "types": "types/index.d.ts",
     "scripts": {
-        "test": "echo \"Error: no test specified\" && exit 1",
+        "test": "echo \"Error: no test specified\"",
         "prepare": "npm run build",
@@ -33,3 +33,5 @@ "build": "npm run build:css && npm run build:styled-components",
         "generate:typings": "npm run generate:typings:css && npm run generate:typings:styled-components",
-        "storybook": "NODE_OPTIONS=--openssl-legacy-provider start-storybook -s .storybook/public -p ${PORT:-7002} -c .storybook"
+        "storybook": "NODE_OPTIONS=--openssl-legacy-provider start-storybook -s .storybook/public -p ${PORT:-7002} -c .storybook",
+        "prestorybook:sc": "npm run prebuild:styled-components",
+        "storybook:sc": "USE_STYLED_COMPONENTS=true NODE_OPTIONS=--openssl-legacy-provider start-storybook -s .storybook/public -p ${PORT:-7002} -c .storybook"
     },
@@ -96,3 +98,3 @@ "repository": {
     },
-    "gitHead": "00d030decc31f8849c793b1efa3fd78ddbe7044f"
+    "gitHead": "8525315cdb9323cd188f9c14246265249777d785"
 }

README.md

@@ -60,9 +60,17 @@ ## HOW TO PLASMA
 
+[] tokens-mapping: Dark / Light Theme
+[] tokens-mapping: switch tokens with theme
+[] new-hope: storybook ThemeSwitch
+[] new-hope: Button: pin
+[] new-hope: Button: plasma-b2c
+[] new-hope: sds => sds-eng
+[] new-hope: Button: sds-eng
 [x] tokens-mapping: defaults saving
 [x] tokens-mapping: boolean modifier
 [] tokens-mapping: state vc modifier ???
-[] tokens-mapping: intersection
+[] tokens-mapping: intersection ???
 [] tokens-mapping: default values for tokens
-[] new-hope: engine: filer props
+[x] new-hope: engine: linaria filter props
 [x] ds-generator: Генерация componentConfig из theme.json
+[x] ds-generator: examples plasma-new-hope
 [] new-hope: Типизация componentConfig
@@ -76,7 +84,9 @@ [] new-hope: Типизация Button
 [] new-hope: Spin
+[] new-hope: Button: isLoading
 [] new-hope: TextField
 [] new-hope: TextArea
-[] example: Переключение engines
+[x] new-hope: storybook: linaria
+[x] new-hope: storybook: styled-components
+[] example: Переключение engines ???
 [] tokens-mapping: Включить eslint
-[] tokens-mapping: Dark / Light Theme
 [] example-ds: Dark / Light Theme
@@ -89,3 +99,3 @@ [] plasma-hope: Замена plasma-b2c/web:Button => plasma-new-hope:Button
 [] ds-generator: Включить eslint
-[] ds-generator: Генерация компонент??
+[] ds-generator: Генерация компонент
 [] ds-generator: Геренрация stories

styled-components/es/components/Button/Button.js

@@ -41,3 +41,4 @@ var _excluded = ["children", "text", "contentLeft", "contentRight"];
     disabled: {
-      css: disabled
+      css: disabled,
+      attrs: true
     },
@@ -44,0 +45,0 @@ focused: {

styled-components/es/engines/common.js

@@ -73,2 +73,5 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
       res.variations[key].css = baseConfig.variations[key].css;
+      if (baseConfig.variations[key].attrs) {
+        res.variations[key].attrs = baseConfig.variations[key].attrs;
+      }
     }
@@ -75,0 +78,0 @@ }

styled-components/es/examples/plasma_b2c/components/Button/Button.config.js

@@ -1,6 +0,4 @@
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 // generated by theme-builder { version } { plasma-hope-version??? }
 
-import { css } from '@linaria/core';
+import { css } from 'styled-components';
 export var config = {
@@ -13,17 +11,17 @@ defaults: {
     view: {
-      primary: /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n                --plasma-button-color: var(--plasma-colors-white);\n                --plasma-button-bg-color: var(--plasma-colors-button-accent);\n                --plasma-button-color-hover: var(--plasma-colors-white);\n                --plasma-button-bg-color-hover: var(--plasma-colors-button-primary-hover);\n                --plasma-button-color-active: var(--plasma-colors-white);\n                --plasma-button-bg-color-active: var(--plasma-colors-button-primary-active);\n            "]))),
-      secondary: /*#__PURE__*/css(_templateObject2 || (_templateObject2 = /*#__PURE__*/_taggedTemplateLiteral(["\n                --plasma-button-color: var(--plasma-colors-text);\n                --plasma-button-bg-color: var(--plasma-colors-button-secondary);\n                --plasma-button-color-hover: var(--plasma-colors-text);\n                --plasma-button-bg-color-hover: var(--plasma-colors-button-secondary-hover);\n                --plasma-button-color-active: var(--plasma-colors-text);\n                --plasma-button-bg-color-active: var(--plasma-colors-button-secondary-active);\n            "])))
+      primary: /*#__PURE__*/css(["--plasma-button-color:var(--plasma-colors-white);--plasma-button-bg-color:var(--plasma-colors-button-accent);--plasma-button-color-hover:var(--plasma-colors-white);--plasma-button-bg-color-hover:var(--plasma-colors-button-primary-hover);--plasma-button-color-active:var(--plasma-colors-white);--plasma-button-bg-color-active:var(--plasma-colors-button-primary-active);"]),
+      secondary: /*#__PURE__*/css(["--plasma-button-color:var(--plasma-colors-text);--plasma-button-bg-color:var(--plasma-colors-button-secondary);--plasma-button-color-hover:var(--plasma-colors-text);--plasma-button-bg-color-hover:var(--plasma-colors-button-secondary-hover);--plasma-button-color-active:var(--plasma-colors-text);--plasma-button-bg-color-active:var(--plasma-colors-button-secondary-active);"])
     },
     size: {
-      s: /*#__PURE__*/css(_templateObject3 || (_templateObject3 = /*#__PURE__*/_taggedTemplateLiteral(["\n                --plasma-button-padding-y: var(--plasma-button-s-padding-y);\n                --plasma-button-padding-x: var(--plasma-button-s-padding-x);\n                --plasma-button-height: var(--plasma-button-s-height);\n                --plasma-button-radius: var(--plasma-button-s-radius);\n            "]))),
-      m: /*#__PURE__*/css(_templateObject4 || (_templateObject4 = /*#__PURE__*/_taggedTemplateLiteral(["\n                --plasma-button-padding-y: var(--plasma-button-m-padding-y);\n                --plasma-button-padding-x: var(--plasma-button-m-padding-x);\n                --plasma-button-height: var(--plasma-button-m-height);\n                --plasma-button-radius: var(--plasma-button-m-radius);\n            "]))),
-      l: /*#__PURE__*/css(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteral(["\n                --plasma-button-padding-y: var(--plasma-button-l-padding-y);\n                --plasma-button-padding-x: var(--plasma-button-l-padding-x);\n                --plasma-button-height: var(--plasma-button-l-height);\n                --plasma-button-radius:  var(--plasma-button-l-radius);\n            "])))
+      s: /*#__PURE__*/css(["--plasma-button-padding-y:var(--plasma-button-s-padding-y);--plasma-button-padding-x:var(--plasma-button-s-padding-x);--plasma-button-height:var(--plasma-button-s-height);--plasma-button-radius:var(--plasma-button-s-radius);"]),
+      m: /*#__PURE__*/css(["--plasma-button-padding-y:var(--plasma-button-m-padding-y);--plasma-button-padding-x:var(--plasma-button-m-padding-x);--plasma-button-height:var(--plasma-button-m-height);--plasma-button-radius:var(--plasma-button-m-radius);"]),
+      l: /*#__PURE__*/css(["--plasma-button-padding-y:var(--plasma-button-l-padding-y);--plasma-button-padding-x:var(--plasma-button-l-padding-x);--plasma-button-height:var(--plasma-button-l-height);--plasma-button-radius:var(--plasma-button-l-radius);"])
     },
     disabled: {
-      "true": /*#__PURE__*/css(_templateObject6 || (_templateObject6 = /*#__PURE__*/_taggedTemplateLiteral(["\n                --plasma-button-disabled-opacity: 0.4;\n            "])))
+      "true": /*#__PURE__*/css(["--plasma-button-disabled-opacity:0.4;"])
     },
     focused: {
-      "true": /*#__PURE__*/css(_templateObject7 || (_templateObject7 = /*#__PURE__*/_taggedTemplateLiteral(["\n                --plasma-button-focus-color: var(--plasma-colors-button-focused);\n            "])))
+      "true": /*#__PURE__*/css(["--plasma-button-focus-color:var(--plasma-colors-button-focused);"])
     }
   }
 };

types/engines/common.d.ts

@@ -5,2 +5,3 @@ export declare function getStaticVariants(config: ComponentConfig): any[];
     css?: any;
+    attrs?: boolean;
 } & Record<string, any>;
@@ -7,0 +8,0 @@ export interface ComponentConfig {

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

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

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

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

99

increased by11.24%

Worsened metrics

Total package byte prevSize

117026

decreased by-0.59%

Number of package files

131

decreased by-0.76%

Lines of code

1394

decreased by-0.85%

No dependency changes