@zohodesk/react-cli 0.0.1-beta.172 → 0.0.1-beta.174

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,247 @@
1
+ "use strict";
2
+
3
+ const postcss = require('postcss');
4
+
5
+ const fs = require('fs');
6
+
7
+ const path = require('path');
8
+
9
+ const errors = [];
10
+ let allowedErrs = {};
11
+ const convertableProps = {
12
+ 'font-size': true,
13
+ margin: true,
14
+ 'margin-left': true,
15
+ 'margin-right': true,
16
+ 'margin-top': true,
17
+ 'margin-bottom': true,
18
+ padding: true,
19
+ 'padding-top': true,
20
+ 'padding-bottom': true,
21
+ 'padding-left': true,
22
+ 'padding-right': true,
23
+ width: true,
24
+ 'min-width': true,
25
+ 'max-width': true,
26
+ height: true,
27
+ 'min-height': true,
28
+ 'max-height': true,
29
+ top: true,
30
+ bottom: true,
31
+ left: true,
32
+ right: true
33
+ };
34
+ const constantValues = {
35
+ inherit: true,
36
+ initial: true,
37
+ auto: true,
38
+ 'fit-content': true,
39
+ unset: true
40
+ };
41
+
42
+ function getNumericValue(value) {
43
+ if (value.includes('var')) {
44
+ return parseInt(value.replace(/var\(--zd_size(\d+)\)/gi, '$1').replace(/var\(--zd_font_size(\d+)\)/gi, '$1'));
45
+ } // Not need for this dum loop
46
+ // allowed.forEach(alwdUnit => {
47
+ // if (value.includes(alwdUnit)) {
48
+ // return parseInt(value);
49
+ // }
50
+ // });
51
+
52
+
53
+ if (constantValues[value.toLowerCase()]) {
54
+ return 1;
55
+ }
56
+
57
+ return parseInt(value);
58
+ }
59
+
60
+ function pxToCalc(value) {
61
+ const arr = value.split(' ');
62
+ arr.forEach((val, index) => {
63
+ ['px'].forEach(unit => {
64
+ const valWithUnit = new RegExp(`(\\d+)${unit}`, 'gi');
65
+
66
+ if (valWithUnit.test(val)) {
67
+ arr[index] = val.replace(valWithUnit, '(var(--zd_size$1))');
68
+ }
69
+ });
70
+ });
71
+ return arr.join(' ');
72
+ }
73
+
74
+ const addError = errstr => {
75
+ errors.push(`{\n${errstr}\n}\n`);
76
+ };
77
+
78
+ const errorFunction = (errStr, type) => {
79
+ if (type === 'DECLARATION_IGNORED' && allowedErrs.DECLARATION_IGNORED) {
80
+ addError(errStr);
81
+ } else if (type === 'UNIT_ERROR' && allowedErrs.UNIT_ERROR) {
82
+ addError(errStr);
83
+ } else if (type === 'RANGE_ERROR' && allowedErrs.RANGE_ERROR) {
84
+ addError(errStr);
85
+ } else if (type === 'VARIABLE_PRESENT' && allowedErrs.VARIABLE_PRESENT) {
86
+ addError(errStr);
87
+ }
88
+ };
89
+
90
+ const singleConvertor = (value, changeVal, details, range) => {
91
+ const {
92
+ path,
93
+ filename,
94
+ decl
95
+ } = details;
96
+
97
+ if (getNumericValue(value) >= range.start && getNumericValue(value) <= range.end || getNumericValue(value) === 0) {
98
+ let retVal = value.replace(/(\d+)px/gi, changeVal.replace('$$', '$1'));
99
+
100
+ if (/^-var/.test(retVal)) {
101
+ retVal = `calc( ${retVal.substring(1)} * -1 )`;
102
+ }
103
+
104
+ return retVal;
105
+ } // if(unitErrorVal && unitErrorVal != '0' ){
106
+ // console.log(value, 'not within range')
107
+
108
+
109
+ errorFunction(` prop: ${decl.prop} ,\n value : ${decl.value} ,\n filename : ${filename} ,\n filepath : ${path} ,\n line : ${decl.source.start.line} ,\n message : value (${value}) (${typeof value}) not within range (${range.start},${range.end})\r`, 'RANGE_ERROR'); // }
110
+ // addError(` prop: ${decl.prop} ,\n value : ${decl.value} ,\n filename : ${filename} ,\n filepath : ${path} ,\n line : ${decl.source.start.line} ,\n message : value (${value}) not within range (${range.start},${range.end})\r`)
111
+
112
+ return value;
113
+ };
114
+
115
+ module.exports = postcss.plugin('postcss-variable-report', cssVariableReplacementConfig => {
116
+ const rawdata = fs.readFileSync(cssVariableReplacementConfig);
117
+ const data = JSON.parse(rawdata);
118
+ const {
119
+ errorsAllowed,
120
+ settings: settingsObject,
121
+ errorLog: errorLogStatus,
122
+ errorInConsole: errorConsoleStatus
123
+ } = data; // const keys = Object.keys(settingsObject);
124
+
125
+ allowedErrs = errorsAllowed;
126
+ const replacementArray = [];
127
+ Object.keys(settingsObject).forEach(key => {
128
+ Object.values(settingsObject[key].replacements).forEach(val => {
129
+ if (!replacementArray.includes(val)) {
130
+ replacementArray.push(val);
131
+ }
132
+ });
133
+ });
134
+ let regValStr = '';
135
+ replacementArray.forEach((val, index) => {
136
+ if (index !== replacementArray.length - 1) {
137
+ regValStr += `${val.replace('$$', '\\d+').replace('(', '\\(').replace(')', '\\)')}|`;
138
+ } else {
139
+ regValStr += `${val.replace('$$', '\\d+').replace('(', '\\(').replace(')', '\\)')}`;
140
+ }
141
+ });
142
+ const valRegex = new RegExp(regValStr, 'gi');
143
+ return rootOriginal => {
144
+ rootOriginal.walkRules(rule => {
145
+ // rule.nodes[-1] = {}
146
+ // need map, forEach fine less memory
147
+ rule.nodes.forEach((decl, position) => {
148
+ // case font-size
149
+ const commentStr = 'variable:ignore';
150
+ const prevNode = rule.nodes[position - 1];
151
+ const fromPath = rootOriginal.source.input.from; // this will be problem for linux and mac use require('path').sep
152
+ // split not need use slice and lastIndexOf less memory
153
+
154
+ const filename = fromPath.split(path.sep).pop();
155
+
156
+ if (prevNode && prevNode.type === 'comment' && prevNode.text.toLowerCase().includes(commentStr)) {
157
+ const errStr = ` prop: ${decl.prop} ,\n value : ${decl.value} ,\n filename : ${filename} ,\n filepath : ${fromPath} ,\n line : ${decl.source.start.line} ,\n message : Declaration Ignored \r`;
158
+ errorFunction(errStr, 'DECLARATION_IGNORED');
159
+ return;
160
+ }
161
+
162
+ if (settingsObject[decl.prop] && !decl.value.includes('var(--')) {
163
+ const settings = settingsObject[decl.prop]; // console.log(settings)
164
+
165
+ const {
166
+ allowed,
167
+ range
168
+ } = settings; // suggestion filter !decl.value.includes('calc')
169
+ // Reason below some of logic happen based on this
170
+
171
+ const unit = decl.value.toString() // no need round braket since you do not need group for less memory
172
+ .replace(/\d+/gi, '').replace('var(--zd_size)', 'px').replace('var(--zd_font_size)', 'px').split(' ').filter(x => x !== ''); // unit = unit.replace(unit, unit.replace('-',''))
173
+ // console.log('unit : ');
174
+ // console.log(unit);
175
+
176
+ unit.forEach((val, index) => {
177
+ allowed.forEach(alwdVal => {
178
+ if (val.includes(alwdVal)) {
179
+ // ## for what purpose
180
+ unit[index] = val.replace(`-${alwdVal}`, `${alwdVal}`).replace(`-.${alwdVal}`, `${alwdVal}`);
181
+ }
182
+ });
183
+ });
184
+ let unitError = false;
185
+ let unitErrorVal = '';
186
+ unit.forEach(val => {
187
+ if (!val.includes('calc')) {
188
+ if (!allowed.includes(val.toString())) {
189
+ unitError = true;
190
+ unitErrorVal = val;
191
+ }
192
+ }
193
+ }); // console.log(allowed, replacements, range)
194
+
195
+ if (!unitError) {
196
+ // use variable decl.value.split(' ')
197
+ if (range) {
198
+ // console.log('multiple :', decl.value)
199
+ let newVal = '';
200
+ decl.value.split(' ').forEach(singleVal => {
201
+ newVal += `${singleConvertor(singleVal, settings.replacements.px, {
202
+ decl,
203
+ filename,
204
+ path: fromPath
205
+ }, range)} `;
206
+ });
207
+ decl.value = newVal;
208
+ }
209
+ } else {
210
+ if (!decl.value.includes('calc')) {
211
+ // addError(` prop: ${decl.prop} ,\n value : ${decl.value} ,\n filename : ${filename} ,\n filepath : ${path} ,\n line : ${decl.source.start.line} ,\n unit : ${unitErrorVal} ,\n message : ${unitErrorVal} (Unit) Not Allowed \r`);
212
+ errorFunction(` prop: ${decl.prop} ,\n value : ${decl.value} ,\n filename : ${filename} ,\n filepath : ${fromPath} ,\n line : ${decl.source.start.line} ,\n unit : ${unitErrorVal} ,\n message : ${unitErrorVal} (Unit) Not Allowed \r`, 'UNIT_ERROR');
213
+ } else {
214
+ decl.value = pxToCalc(decl.value);
215
+ }
216
+ }
217
+ } else {
218
+ if (decl.prop && decl.value && !decl.prop.includes('--') && valRegex.test(decl.value) && (settingsObject[decl.prop] || convertableProps[decl.prop]) && decl.value.includes('var') && !decl.value.includes('calc')) {
219
+ errorFunction(` prop: ${decl.prop} ,\n value : ${decl.value} ,\n filename : ${filename} ,\n filepath : ${fromPath} ,\n line : ${decl.source.start.line} ,\n message : value (${decl.value}) has var in it, kindly check`, 'VARIABLE_PRESENT');
220
+ }
221
+ }
222
+ });
223
+ }); // console.log(filename)
224
+ // console.log('Done!')
225
+ // console.log('----------------------------------------------------------------------------------------------------------------------')
226
+
227
+ if (errorLogStatus) {
228
+ fs.writeFileSync('./css_error.log', '');
229
+
230
+ if (errors.length > 0) {
231
+ errors.forEach(err => {
232
+ fs.appendFileSync('./css_error.log', err);
233
+ }); // console.log('----------------------------------------------------------------------------------------------------------------------')
234
+ }
235
+ }
236
+
237
+ if (errorConsoleStatus) {
238
+ if (errors.length > 0) {
239
+ errors.forEach(err => {
240
+ // fs.appendFileSync('./css_error.log', err);
241
+ console.log(err);
242
+ });
243
+ console.log('----------------------------------------------------------------------------------------------------------------------');
244
+ }
245
+ }
246
+ };
247
+ });
@@ -101,6 +101,7 @@ module.exports = postcss.plugin('postcss-variable-report', () => rootOriginal =>
101
101
  rule.walkDecls((decl, position) => {
102
102
  // case font-size
103
103
  if (!hasIgnoreComment(rule.nodes[position - 1])) {
104
+ console.log(settings);
104
105
  let unit = decl.value.replace(/[0-9]/g, '');
105
106
  let settings = numberObject[decl.prop];
106
107
  let path = rootOriginal.source.input.from;
@@ -216,13 +216,16 @@ var _default = {
216
216
  plugins: {
217
217
  hasRTL: false,
218
218
  hoverActive: false,
219
- combinerMediaQuery: false
219
+ combinerMediaQuery: false,
220
+ cssVariableReplacement: false
220
221
  },
221
222
  exclude: {
222
223
  rtl: [],
223
224
  hoverActive: [],
224
- combinerMediaQuery: []
225
+ combinerMediaQuery: [],
226
+ cssVariableReplacement: []
225
227
  },
228
+ cssVariableReplacementConfig: '',
226
229
  seperateCssModules: {
227
230
  value: false,
228
231
  cli: 'sep_cssmodules'
@@ -302,13 +305,16 @@ var _default = {
302
305
  plugins: {
303
306
  hasRTL: false,
304
307
  hoverActive: false,
305
- combinerMediaQuery: false
308
+ combinerMediaQuery: false,
309
+ cssVariableReplacement: false
306
310
  },
307
311
  exclude: {
308
312
  rtl: [],
309
313
  hoverActive: [],
310
- combinerMediaQuery: []
314
+ combinerMediaQuery: [],
315
+ cssVariableReplacement: []
311
316
  },
317
+ cssVariableReplacementConfig: '',
312
318
  cssHashSelectors: {
313
319
  filenames: [],
314
320
  packages: []
@@ -319,6 +325,7 @@ var _default = {
319
325
  }
320
326
  },
321
327
  test: {
328
+ classnameFormat: '[classname]',
322
329
  srcBranch: {
323
330
  value: 'master',
324
331
  cli: 'src_branch'
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zohodesk/react-cli",
3
- "version": "0.0.1-beta.172",
3
+ "version": "0.0.1-beta.174",
4
4
  "description": "A CLI tool for build modern web application and libraries",
5
5
  "scripts": {
6
6
  "init": "node ./lib/utils/init.js",
@@ -78,7 +78,6 @@
78
78
  "html-webpack-inject-attributes-plugin": "1.0.6",
79
79
  "html-webpack-plugin": "4.3.0",
80
80
  "http-proxy-middleware": "1.0.5",
81
- "identity-obj-proxy": "3.0.0",
82
81
  "jest": "26.4.0",
83
82
  "jsdom": "16.4.0",
84
83
  "loader-utils": "2.0.0",
@@ -93,7 +92,6 @@
93
92
  "postcss": "7.0.32",
94
93
  "postcss-combine-media-query": "1.0.1",
95
94
  "postcss-hash-classname": "0.4.0",
96
- "postcss-import": "14.1.0",
97
95
  "postcss-loader": "3.0.0",
98
96
  "postcss-mobile-hover": "1.0.2",
99
97
  "postcss-selector-replace": "1.0.2",
@@ -660,8 +660,8 @@ section {
660
660
  flex: 1;
661
661
  overflow: hidden;
662
662
  text-overflow: ellipsis;
663
- white-space: nowrap;
664
663
  word-wrap: normal;
664
+ word-break: break-word;
665
665
  border-right: 1px solid #ebedf0;
666
666
  padding: 16px 24px;
667
667
  text-align: left;
@@ -438,6 +438,7 @@
438
438
  Components[propComName].propTypes) ||
439
439
  {};
440
440
  let currentCompProps = Object.keys(propsObj) || [];
441
+ let currentCompPropsDescription = window.componentList && window.componentList[propComName] && window.componentList[propComName].propsDescription || (Components[propComName] && Components[propComName].propsDescription) || {};
441
442
  let currentCompDefault = Window.componentList && window.componentList[propComName] && window.componentList[propComName].defaultProps || (Components[propComName] && Components[propComName].defaultProps) || {};
442
443
  let componentsObj=componentObj && this.filter(Object.keys(componentObj),'').map((item,i)=>{
443
444
  return ({key:item,value:componentObj[item],length:Object.keys(componentObj[item]).length})
@@ -767,6 +768,7 @@
767
768
  <span className="brR">Type</span>
768
769
  <span className="brR">isRequired</span>
769
770
  <span className="brR ">Default Props</span>
771
+ <span className="brR ">Description</span>
770
772
  </div>
771
773
  {
772
774
  currentCompProps.map((value, i) => {
@@ -796,9 +798,15 @@
796
798
  </span>
797
799
  <span className="defaultProps">
798
800
  <div className="bn">
799
- {JSON.stringify(currentCompDefault[value])}
801
+ {JSON.stringify(currentCompDefault[value] || '')}
800
802
  </div>
801
803
  </span>
804
+ <span className="defaultProps">
805
+ <div className="bn">
806
+ {JSON.stringify(currentCompPropsDescription[value] || '')}
807
+ </div>
808
+ </span>
809
+
802
810
  </div>
803
811
  );
804
812
  })