@zohodesk/dot 1.7.20 → 1.7.22

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.
Files changed (29) hide show
  1. package/README.md +6 -1
  2. package/es/Hooks/Dragger/useDragger.js +52 -33
  3. package/es/dot_layer.module.css +1 -0
  4. package/es/form/fields/Fields.module.css +1 -1
  5. package/es/form/fields/ValidationMessage/ValidationMessage.module.css +1 -0
  6. package/es/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css +1 -0
  7. package/lib/Hooks/Dragger/useDragger.js +51 -28
  8. package/lib/dot_layer.module.css +1 -0
  9. package/lib/form/fields/Fields.module.css +1 -1
  10. package/lib/form/fields/ValidationMessage/ValidationMessage.module.css +1 -0
  11. package/lib/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css +1 -0
  12. package/package.json +14 -6
  13. package/.cli/MissedPropType_Keys.html +0 -101
  14. package/.cli/PropLessFiles.html +0 -101
  15. package/.cli/PropUnificationExcludeFilesArray.js +0 -345
  16. package/.cli/PropValidationExcludeFilesArray.js +0 -8
  17. package/.cli/ThemeValidationExcludeFiles.js +0 -1
  18. package/.cli/UnValidatedFiles.html +0 -101
  19. package/.cli/propValidation_report.html +0 -182
  20. package/.cli/stringContains.js +0 -1
  21. package/css_error.log +0 -1
  22. package/images/audio_thumbnail.png +0 -0
  23. package/install.md +0 -12
  24. package/postPublish.js +0 -8
  25. package/prePublish.js +0 -70
  26. package/propValidationArg.json +0 -12
  27. package/react-cli.config.js +0 -24
  28. package/result.json +0 -1
  29. package/unittest/index.html +0 -37
package/README.md CHANGED
@@ -2,7 +2,12 @@
2
2
 
3
3
  In this Library, we Provide Some Basic Components to Build Your Application
4
4
 
5
- # 1.7.20
5
+ # 1.7.22
6
+
7
+ - **useDragger**
8
+ - While using the dragger, it was triggering even on a simple click inside the draggable element. The fixed position should only apply during an actual drag. To handle this, we added a drag distance threshold to accurately detect dragging and prevent the CSS from applying on click.
9
+
10
+ # 1.7.20, 1.7.21
6
11
 
7
12
  - **PhoneField**
8
13
  - RTL unicode-bidi issue fixed
package/es/Hooks/Dragger/useDragger.js CHANGED
@@ -22,6 +22,12 @@ export default function useDragger(_ref) {
22
22
  y: 0
23
23
  });
24
24
  const draggable = useRef(false);
25
+ const dragStarted = useRef(false);
26
+ const initialMouse = useRef({
27
+ x: 0,
28
+ y: 0
29
+ });
30
+ const DRAG_DISTANCE_THRESHOLD = 4;
25
31
  useEffect(() => {
26
32
  if (isActive) {
27
33
  parentEle.current = ChildRef.current.closest('[data-drag-parent=true]') || getDotLibraryConfig('draggerBoundary') || document.body;
@@ -48,49 +54,62 @@ export default function useDragger(_ref) {
48
54
  e = e || window.event;
49
55
  e.preventDefault();
50
56
 
51
- if (draggable.current) {
52
- const left = offset.current.x + e.clientX;
53
- const top = offset.current.y + e.clientY;
54
- const {
55
- x,
56
- y
57
- } = calculateDragPosition(left, top);
58
- draggableEle.current.style.left = x + 'px';
59
- draggableEle.current.style.top = y + 'px';
57
+ if (!draggable.current) {
58
+ return;
59
+ }
60
+
61
+ if (!dragStarted.current) {
62
+ const dx = Math.abs(e.clientX - initialMouse.current.x);
63
+ const dy = Math.abs(e.clientY - initialMouse.current.y);
64
+
65
+ if (dx < DRAG_DISTANCE_THRESHOLD && dy < DRAG_DISTANCE_THRESHOLD) {
66
+ return;
67
+ }
68
+
69
+ const draggableEleRect = draggableEle.current.getBoundingClientRect();
70
+ const parentEleRect = parentEle ? parentEle.current.getBoundingClientRect() : {
71
+ left: 0,
72
+ top: 0
73
+ };
74
+ offset.current.x = draggableEleRect.left - e.clientX;
75
+ offset.current.y = draggableEleRect.top - e.clientY;
76
+ const relativeRect = {
77
+ left: draggableEleRect.left - parentEleRect.left,
78
+ top: draggableEleRect.top - parentEleRect.top
79
+ };
80
+ const styleRef = draggableEle.current.style;
81
+ styleRef.top = `${relativeRect.top}px`;
82
+ styleRef.left = `${relativeRect.left}px`;
83
+ styleRef.width = `${draggableEleRect.width}px`;
84
+ styleRef.position = "fixed";
85
+ styleRef.bottom = "initial";
86
+ styleRef.right = "initial";
87
+ dragStarted.current = true;
60
88
  }
89
+
90
+ const left = offset.current.x + e.clientX;
91
+ const top = offset.current.y + e.clientY;
92
+ const {
93
+ x,
94
+ y
95
+ } = calculateDragPosition(left, top);
96
+ draggableEle.current.style.left = `${x}px`;
97
+ draggableEle.current.style.top = `${y}px`;
61
98
  }, [calculateDragPosition]);
62
99
  const closeDragElement = useCallback(() => {
63
100
  document.removeEventListener('mouseup', closeDragElement);
64
101
  document.removeEventListener('mousemove', elementDrag);
102
+ dragStarted.current = false;
103
+ draggable.current = false;
65
104
  }, []);
66
105
  const dragMouseDown = useCallback(e => {
67
106
  e = e || window.event; // e.preventDefault();
68
107
 
69
- const draggableEleRect = draggableEle.current.getBoundingClientRect();
70
- const style = draggableEle.current.style;
71
- const {
72
- width
73
- } = draggableEleRect;
74
- const parentEleRect = parentEle ? parentEle.current.getBoundingClientRect() : {
75
- left: 0,
76
- top: 0
108
+ initialMouse.current = {
109
+ x: e.clientX,
110
+ y: e.clientY
77
111
  };
78
- const relativeRect = {
79
- left: draggableEleRect.left - parentEleRect.left,
80
- top: draggableEleRect.top - parentEleRect.top
81
- };
82
- const {
83
- top,
84
- left
85
- } = relativeRect;
86
- style.top = `${top}px`;
87
- style.left = `${left}px`;
88
- style.width = `${width}px`;
89
- style.bottom = 'initial';
90
- style.right = 'initial';
91
- style.position = 'fixed';
92
- offset.current.x = draggableEle.current.offsetLeft - e.clientX;
93
- offset.current.y = draggableEle.current.offsetTop - e.clientY;
112
+ dragStarted.current = false;
94
113
  draggable.current = true;
95
114
  document.addEventListener('mouseup', closeDragElement);
96
115
  document.addEventListener('mousemove', elementDrag);
package/es/dot_layer.module.css ADDED
@@ -0,0 +1 @@
1
+ @layer dot-core, dot-core.ActionButton, dot-core.AlphabeticList, dot-core.Attachment, dot-core.AttachmentViewer, dot-core.ChannelIcon, dot-core.Drawer, dot-core.ExternalLink, dot-core.FlipCard, dot-core.FormAction, dot-core.css, dot-core.IconButton, dot-core.Image, dot-core.ImportantNotes, dot-core.Link, dot-core.Loader, dot-core.Message, dot-core.MessageBanner, dot-core.NewStar, dot-core.PlusIcon, dot-core.Separator, dot-core.TagWithIcon, dot-core.ToastMessage, dot-core.Upload, dot-core.AlertHeader, dot-core.AlertLookup, dot-core.AvatarClose, dot-core.AvatarCollision, dot-core.AvatarIcon, dot-core.AvatarStatus, dot-core.AvatarThread, dot-core.AvatarUser, dot-core.AvatarWithTeam, dot-core.common, dot-core.FreezeLayer, dot-core.SelectDropdown, dot-core.ToggleDropDown, dot-core.CommonEmptyState, dot-core.EditionPage, dot-core.errorstate, dot-core.Inconvenience, dot-core.LinkText, dot-core.NoRequestFound, dot-core.PermissionPlay, dot-core.RequestUrlNotFound, dot-core.UnableToProcess, dot-core.UnauthorizedLogin, dot-core.WillBack, dot-core.fields, dot-core.TagsMultiSelect, dot-core.TagsMultiSelectField, dot-core.TextEditor, dot-core.TextEditorWrapper, dot-core.ValidationMessage, dot-core.Field, dot-core.Section, dot-core.SetupDetailLayout, dot-core.SubtabLayout, dot-core.AvatarFlip, dot-core.BluePrintStatus, dot-core.Comment, dot-core.DepartmentDropDown, dot-core.Dot, dot-core.DotNew, dot-core.GridStencils, dot-core.Icons, dot-core.ListLayout, dot-core.ListStencils, dot-core.SecondaryText, dot-core.SecondryPanel, dot-core.SentimentStatus, dot-core.Subject, dot-core.TagNew, dot-core.Thread, dot-core.list, dot-core.StatusDropdown, dot-core.StatusListItem, dot-core.EmptyPage, dot-core.Lookup, dot-core.Close, dot-core.Search, dot-core.TicketHeader, dot-core.Title, dot-core.ViewDropDown, dot-core.header, dot-core.Button, dot-core.Views, dot-core.Description, dot-core.ListGroup, dot-core.TableData, dot-core.TableHead, dot-core.TableRow, dot-core.Text, dot-core.AlertClose, dot-core.GlobalNotification, dot-core.alertIcons, dot-core.lookup, dot-core.DesktopNotification, dot-core.DesktopNotificationHeader, dot-core.mode, dot-core.blue, dot-core.green, dot-core.orange, dot-core.red, dot-core.yellow;
package/es/form/fields/Fields.module.css CHANGED
@@ -223,5 +223,5 @@ position: relative;
223
223
  }
224
224
 
225
225
  .phoneField{
226
- composes: ltr from '~@zohodesk/components/es/common/common.module.css';
226
+ composes: ltr-zone from '~@zohodesk/components/es/common/common.module.css';
227
227
  }
package/es/form/fields/ValidationMessage/ValidationMessage.module.css CHANGED
@@ -5,6 +5,7 @@
5
5
  display: inline;
6
6
  }
7
7
  .icon{
8
+ /*css:theme-validation:ignore*/
8
9
  color:var(--label_text_color);
9
10
  display: inline-block;
10
11
  margin: 0 var(--zd_size5) ;
package/es/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css CHANGED
@@ -6,6 +6,7 @@
6
6
  composes: varClass;
7
7
  min-height: var(--zd_size54) ;
8
8
  position: relative;
9
+ /*css:theme-validation:ignore*/
9
10
  color: var(--zdt_desktopnotification_text);
10
11
  background-color: var(--alert_lookup_bg_color);
11
12
  border-style: solid;
package/lib/Hooks/Dragger/useDragger.js CHANGED
@@ -36,6 +36,12 @@ function useDragger(_ref) {
36
36
  y: 0
37
37
  });
38
38
  var draggable = (0, _react.useRef)(false);
39
+ var dragStarted = (0, _react.useRef)(false);
40
+ var initialMouse = (0, _react.useRef)({
41
+ x: 0,
42
+ y: 0
43
+ });
44
+ var DRAG_DISTANCE_THRESHOLD = 4;
39
45
  (0, _react.useEffect)(function () {
40
46
  if (isActive) {
41
47
  parentEle.current = ChildRef.current.closest('[data-drag-parent=true]') || (0, _Config.getDotLibraryConfig)('draggerBoundary') || document.body;
@@ -62,46 +68,63 @@ function useDragger(_ref) {
62
68
  e = e || window.event;
63
69
  e.preventDefault();
64
70
 
65
- if (draggable.current) {
66
- var left = offset.current.x + e.clientX;
67
- var top = offset.current.y + e.clientY;
71
+ if (!draggable.current) {
72
+ return;
73
+ }
74
+
75
+ if (!dragStarted.current) {
76
+ var dx = Math.abs(e.clientX - initialMouse.current.x);
77
+ var dy = Math.abs(e.clientY - initialMouse.current.y);
68
78
 
69
- var _calculateDragPositio = calculateDragPosition(left, top),
70
- x = _calculateDragPositio.x,
71
- y = _calculateDragPositio.y;
79
+ if (dx < DRAG_DISTANCE_THRESHOLD && dy < DRAG_DISTANCE_THRESHOLD) {
80
+ return;
81
+ }
72
82
 
73
- draggableEle.current.style.left = x + 'px';
74
- draggableEle.current.style.top = y + 'px';
83
+ var draggableEleRect = draggableEle.current.getBoundingClientRect();
84
+ var parentEleRect = parentEle ? parentEle.current.getBoundingClientRect() : {
85
+ left: 0,
86
+ top: 0
87
+ };
88
+ offset.current.x = draggableEleRect.left - e.clientX;
89
+ offset.current.y = draggableEleRect.top - e.clientY;
90
+ var relativeRect = {
91
+ left: draggableEleRect.left - parentEleRect.left,
92
+ top: draggableEleRect.top - parentEleRect.top
93
+ };
94
+ var styleRef = draggableEle.current.style;
95
+ styleRef.top = "".concat(relativeRect.top, "px");
96
+ styleRef.left = "".concat(relativeRect.left, "px");
97
+ styleRef.width = "".concat(draggableEleRect.width, "px");
98
+ styleRef.position = "fixed";
99
+ styleRef.bottom = "initial";
100
+ styleRef.right = "initial";
101
+ dragStarted.current = true;
75
102
  }
103
+
104
+ var left = offset.current.x + e.clientX;
105
+ var top = offset.current.y + e.clientY;
106
+
107
+ var _calculateDragPositio = calculateDragPosition(left, top),
108
+ x = _calculateDragPositio.x,
109
+ y = _calculateDragPositio.y;
110
+
111
+ draggableEle.current.style.left = "".concat(x, "px");
112
+ draggableEle.current.style.top = "".concat(y, "px");
76
113
  }, [calculateDragPosition]);
77
114
  var closeDragElement = (0, _react.useCallback)(function () {
78
115
  document.removeEventListener('mouseup', closeDragElement);
79
116
  document.removeEventListener('mousemove', elementDrag);
117
+ dragStarted.current = false;
118
+ draggable.current = false;
80
119
  }, []);
81
120
  var dragMouseDown = (0, _react.useCallback)(function (e) {
82
121
  e = e || window.event; // e.preventDefault();
83
122
 
84
- var draggableEleRect = draggableEle.current.getBoundingClientRect();
85
- var style = draggableEle.current.style;
86
- var width = draggableEleRect.width;
87
- var parentEleRect = parentEle ? parentEle.current.getBoundingClientRect() : {
88
- left: 0,
89
- top: 0
90
- };
91
- var relativeRect = {
92
- left: draggableEleRect.left - parentEleRect.left,
93
- top: draggableEleRect.top - parentEleRect.top
123
+ initialMouse.current = {
124
+ x: e.clientX,
125
+ y: e.clientY
94
126
  };
95
- var top = relativeRect.top,
96
- left = relativeRect.left;
97
- style.top = "".concat(top, "px");
98
- style.left = "".concat(left, "px");
99
- style.width = "".concat(width, "px");
100
- style.bottom = 'initial';
101
- style.right = 'initial';
102
- style.position = 'fixed';
103
- offset.current.x = draggableEle.current.offsetLeft - e.clientX;
104
- offset.current.y = draggableEle.current.offsetTop - e.clientY;
127
+ dragStarted.current = false;
105
128
  draggable.current = true;
106
129
  document.addEventListener('mouseup', closeDragElement);
107
130
  document.addEventListener('mousemove', elementDrag);
package/lib/dot_layer.module.css ADDED
@@ -0,0 +1 @@
1
+ @layer dot-core, dot-core.ActionButton, dot-core.AlphabeticList, dot-core.Attachment, dot-core.AttachmentViewer, dot-core.ChannelIcon, dot-core.Drawer, dot-core.ExternalLink, dot-core.FlipCard, dot-core.FormAction, dot-core.css, dot-core.IconButton, dot-core.Image, dot-core.ImportantNotes, dot-core.Link, dot-core.Loader, dot-core.Message, dot-core.MessageBanner, dot-core.NewStar, dot-core.PlusIcon, dot-core.Separator, dot-core.TagWithIcon, dot-core.ToastMessage, dot-core.Upload, dot-core.AlertHeader, dot-core.AlertLookup, dot-core.AvatarClose, dot-core.AvatarCollision, dot-core.AvatarIcon, dot-core.AvatarStatus, dot-core.AvatarThread, dot-core.AvatarUser, dot-core.AvatarWithTeam, dot-core.common, dot-core.FreezeLayer, dot-core.SelectDropdown, dot-core.ToggleDropDown, dot-core.CommonEmptyState, dot-core.EditionPage, dot-core.errorstate, dot-core.Inconvenience, dot-core.LinkText, dot-core.NoRequestFound, dot-core.PermissionPlay, dot-core.RequestUrlNotFound, dot-core.UnableToProcess, dot-core.UnauthorizedLogin, dot-core.WillBack, dot-core.fields, dot-core.TagsMultiSelect, dot-core.TagsMultiSelectField, dot-core.TextEditor, dot-core.TextEditorWrapper, dot-core.ValidationMessage, dot-core.Field, dot-core.Section, dot-core.SetupDetailLayout, dot-core.SubtabLayout, dot-core.AvatarFlip, dot-core.BluePrintStatus, dot-core.Comment, dot-core.DepartmentDropDown, dot-core.Dot, dot-core.DotNew, dot-core.GridStencils, dot-core.Icons, dot-core.ListLayout, dot-core.ListStencils, dot-core.SecondaryText, dot-core.SecondryPanel, dot-core.SentimentStatus, dot-core.Subject, dot-core.TagNew, dot-core.Thread, dot-core.list, dot-core.StatusDropdown, dot-core.StatusListItem, dot-core.EmptyPage, dot-core.Lookup, dot-core.Close, dot-core.Search, dot-core.TicketHeader, dot-core.Title, dot-core.ViewDropDown, dot-core.header, dot-core.Button, dot-core.Views, dot-core.Description, dot-core.ListGroup, dot-core.TableData, dot-core.TableHead, dot-core.TableRow, dot-core.Text, dot-core.AlertClose, dot-core.GlobalNotification, dot-core.alertIcons, dot-core.lookup, dot-core.DesktopNotification, dot-core.DesktopNotificationHeader, dot-core.mode, dot-core.blue, dot-core.green, dot-core.orange, dot-core.red, dot-core.yellow;
package/lib/form/fields/Fields.module.css CHANGED
@@ -223,5 +223,5 @@ position: relative;
223
223
  }
224
224
 
225
225
  .phoneField{
226
- composes: ltr from '~@zohodesk/components/es/common/common.module.css';
226
+ composes: ltr-zone from '~@zohodesk/components/es/common/common.module.css';
227
227
  }
package/lib/form/fields/ValidationMessage/ValidationMessage.module.css CHANGED
@@ -5,6 +5,7 @@
5
5
  display: inline;
6
6
  }
7
7
  .icon{
8
+ /*css:theme-validation:ignore*/
8
9
  color:var(--label_text_color);
9
10
  display: inline-block;
10
11
  margin: 0 var(--zd_size5) ;
package/lib/version2/notification/DesktopNotificationHeader/DesktopNotificationHeader.module.css CHANGED
@@ -6,6 +6,7 @@
6
6
  composes: varClass;
7
7
  min-height: var(--zd_size54) ;
8
8
  position: relative;
9
+ /*css:theme-validation:ignore*/
9
10
  color: var(--zdt_desktopnotification_text);
10
11
  background-color: var(--alert_lookup_bg_color);
11
12
  border-style: solid;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zohodesk/dot",
3
- "version": "1.7.20",
3
+ "version": "1.7.22",
4
4
  "main": "lib/index",
5
5
  "module": "es/index.js",
6
6
  "private": false,
@@ -26,22 +26,23 @@
26
26
  "build:watch": "npm run build:variables && npm run build && npm run build:es --module:mode=dev -- -w",
27
27
  "rtl:watch": "react-cli rtl ./src ./es -w",
28
28
  "rtl": "react-cli rtl ./src ./lib && react-cli rtl ./src ./es",
29
- "prepare": "react-cli clean assets && npm run init && npm run build && npm run rtl && npm run cssVariableConvert ",
29
+ "prepare": "react-cli clean assets && npm run init && npm run css:build ",
30
30
  "init": "npm run clean && npm run build:variables",
31
31
  "build:variables": "react-cli clean ./assets && node ./preprocess/index",
32
32
  "lint": "react-cli lint",
33
33
  "lintAll": "react-cli lint ./src",
34
34
  "lintAllFix": "npm run lintAll --eslint:fix=true",
35
+ "customTest": "node ./__testUtils__/runTest.js",
35
36
  "test": "react-cli test",
36
37
  "_test": "",
37
38
  "snap-update": "npm run test-clean && npm run test -- -u",
38
39
  "sstest": "react-cli sstest",
39
40
  "common_package_build": "cd ../common && npm run build && cd ../dot",
40
41
  "docs": "npm run css:review && review:props && react-cli docs",
41
- "prepublishOnly": "node prePublish.js && npm run downloadOnly && npm run css:review && npm run review:props",
42
+ "prepublishOnly": "node prePublish.js && npm run downloadOnly && npm run css:review && npm run review:props",
42
43
  "postpublish": "node postPublish.js",
43
44
  "test-clean": "react-cli clean ./coverage && react-cli clean ./unittest react-cli clean ./es && react-cli clean ./lib && react-cli clean ./package-lock.json && react-cli clean ./result.json",
44
- "download": "react-cli clean ./node_modules ./package-lock.json && npm install && cd ../ && npm run download",
45
+ "download": "npm run downloadOnly && cd ../ && npm run download",
45
46
  "downloadOnly": "react-cli clean ./node_modules ./package-lock.json && npm install",
46
47
  "expublish": "npm publish --tag experimental-version",
47
48
  "css:lineheight:validate": "node ./node_modules/@zohodesk-private/node-plugins/es/lineheight_automation/lineHeightErrorCheck.js ./src/",
@@ -53,7 +54,14 @@
53
54
  "theme:validate": "node ./node_modules/@zohodesk-private/node-plugins/es/appearance_theme_validation validate ./src ./.cli ./.cli/stringContains.js",
54
55
  "theme:addignore": "node ./node_modules/@zohodesk-private/node-plugins/es/appearance_theme_validation addignore ./src ./.cli ./.cli/stringContains.js",
55
56
  "theme:removeignore": "node ./node_modules/@zohodesk-private/node-plugins/es/appearance_theme_validation removeignore ./src ./.cli",
56
- "review:props": "node ./node_modules/@zohodesk-private/react-prop-validator/es/propValidation.js propValidationArg.json"
57
+ "review:props": "node ./node_modules/@zohodesk-private/react-prop-validator/es/propValidation.js propValidationArg.json",
58
+ "css:layer_config_generate": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/scan_css_generate_json.js ./src ./assets css_layer_config.json",
59
+ "css:layer_wrap_es": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/write_layer_in_css.js ./es ./assets css_layer_config.json --rewrite=src=es --rewrite=assets=assets --skip-existing-layer",
60
+ "css:layer_wrap_lib": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/write_layer_in_css.js ./lib ./assets css_layer_config.json --rewrite=src=lib --rewrite=assets=assets --skip-existing-layer",
61
+ "css:layer_generate_order": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/generate_layer_order.js css_layer_config.json ./src/dot_layer.module.css",
62
+ "css:layer_config_validate": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/validate.js css_layer_config.json ./src/ ./assets",
63
+ "css:build": "npm run css:layer_config_validate && npm run css:layer_generate_order && npm run build && npm run rtl && npm run cssVariableConvert ",
64
+ "css:layer_remove": "node ./node_modules/@zohodesk-private/node-plugins/es/css_layer_generator/remove_layer.js ./es ./assets css_layer_config.json --rewrite=src=es --rewrite=assets=assets"
57
65
  },
58
66
  "devDependencies": {
59
67
  "@testing-library/jest-dom": "^5.11.9",
@@ -62,7 +70,7 @@
62
70
  "@testing-library/user-event": "^13.0.10",
63
71
  "@zohodesk-private/color-variable-preprocessor": "1.2.0",
64
72
  "@zohodesk-private/css-variable-migrator": "1.0.9",
65
- "@zohodesk-private/node-plugins": "1.1.8",
73
+ "@zohodesk-private/node-plugins": "1.1.13",
66
74
  "@zohodesk-private/react-prop-validator": "1.2.3",
67
75
  "@zohodesk/a11y": "2.3.7",
68
76
  "@zohodesk/components": "1.4.12",
package/.cli/MissedPropType_Keys.html DELETED
@@ -1,101 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
-
4
- <head>
5
- <link rel="preconnect" href="https://fonts.googleapis.com">
6
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
7
- <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
8
-
9
- <title>Missed PropType Key</title>
10
- <style>
11
- body {
12
- margin: 0;
13
- padding: 0;
14
- font-family: 'Asap Condensed', sans-serif;
15
- }
16
-
17
- table {
18
- width: 100%;
19
- border-collapse: collapse;
20
- }
21
-
22
- th {
23
- position: sticky;
24
- top: 0;
25
- background-color: #001C30;
26
- color: #F5F5F5;
27
- }
28
-
29
- th,
30
- td {
31
- border: 1px solid black;
32
- padding: 8px;
33
- }
34
-
35
- tr:nth-child(even) {
36
- background-color: #EDEEF7;
37
- }
38
-
39
- .table-container {
40
- margin-bottom: 20px;
41
- }
42
- </style>
43
- </head>
44
-
45
- <body>
46
- <div id="table-container"></div>
47
- <script>
48
- const jsonData = {}
49
- const tableContainer = document.getElementById('table-container');
50
- const table = document.createElement('table');
51
- const thead = document.createElement('thead');
52
- const tbody = document.createElement('tbody');
53
-
54
- const headerRow = document.createElement('tr');
55
- const headers = ['No', 'Component', 'FilePath'];
56
- headers.forEach(header => {
57
- const th = document.createElement('th');
58
- th.textContent = header;
59
- headerRow.appendChild(th);
60
- });
61
- thead.appendChild(headerRow);
62
- table.appendChild(thead);
63
- var componentCount = 1;
64
- function generateRows(component, data, innerComponent = '') {
65
-
66
- const filePath = data.filePath ? data.filePath : '';
67
-
68
- const row = document.createElement('tr');
69
- const numbers = document.createElement('td');
70
- const componentCell = document.createElement('td');
71
- const filePathCell = document.createElement('td');
72
-
73
- numbers.textContent = componentCount;
74
- componentCell.textContent = component;
75
- filePathCell.textContent = filePath;
76
-
77
- row.appendChild(numbers);
78
- row.appendChild(componentCell);
79
- row.appendChild(filePathCell);
80
- tbody.appendChild(row);
81
-
82
- if (data.innerComponent) {
83
- Object.entries(data.innerComponent).forEach(([innerComp, innerData]) => {
84
- generateRows(innerComp, innerData, component);
85
- });
86
- }
87
- componentCount++;
88
- }
89
-
90
- Object.entries(jsonData).forEach(([component, data]) => {
91
- generateRows(component, data);
92
- });
93
-
94
- table.appendChild(tbody);
95
- tableContainer.appendChild(table);
96
-
97
- generateTable(jsonData);
98
- </script>
99
- </body>
100
-
101
- </html>
package/.cli/PropLessFiles.html DELETED
@@ -1,101 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
-
4
- <head>
5
- <link rel="preconnect" href="https://fonts.googleapis.com">
6
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
7
- <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
8
-
9
- <title>Prop Less components</title>
10
- <style>
11
- body {
12
- margin: 0;
13
- padding: 0;
14
- font-family: 'Asap Condensed', sans-serif;
15
- }
16
-
17
- table {
18
- width: 100%;
19
- border-collapse: collapse;
20
- }
21
-
22
- th {
23
- position: sticky;
24
- top: 0;
25
- background-color: #001C30;
26
- color: #F5F5F5;
27
- }
28
-
29
- th,
30
- td {
31
- border: 1px solid black;
32
- padding: 8px;
33
- }
34
-
35
- tr:nth-child(even) {
36
- background-color: #EDEEF7;
37
- }
38
-
39
- .table-container {
40
- margin-bottom: 20px;
41
- }
42
- </style>
43
- </head>
44
-
45
- <body>
46
- <div id="table-container"></div>
47
- <script>
48
- const jsonData = {"LinkContext":{"filePath":"src/Link/LinkContext.js"},"Loader":{"filePath":"src/v1/Loader/Loader.js"},"MessageNew":{"filePath":"src/v1/Message/Message.js"},"GlobalNotificationNew":{"filePath":"src/version2/GlobalNotification/GlobalNotification.js"},"DesktopNotification":{"filePath":"src/version2/notification/DesktopNotification/DesktopNotification.js"}}
49
- const tableContainer = document.getElementById('table-container');
50
- const table = document.createElement('table');
51
- const thead = document.createElement('thead');
52
- const tbody = document.createElement('tbody');
53
-
54
- const headerRow = document.createElement('tr');
55
- const headers = ['No', 'Component', 'FilePath'];
56
- headers.forEach(header => {
57
- const th = document.createElement('th');
58
- th.textContent = header;
59
- headerRow.appendChild(th);
60
- });
61
- thead.appendChild(headerRow);
62
- table.appendChild(thead);
63
- var componentCount = 1;
64
- function generateRows(component, data, innerComponent = '') {
65
-
66
- const filePath = data.filePath ? data.filePath : '';
67
-
68
- const row = document.createElement('tr');
69
- const numbers = document.createElement('td');
70
- const componentCell = document.createElement('td');
71
- const filePathCell = document.createElement('td');
72
-
73
- numbers.textContent = componentCount;
74
- componentCell.textContent = component;
75
- filePathCell.textContent = filePath;
76
-
77
- row.appendChild(numbers);
78
- row.appendChild(componentCell);
79
- row.appendChild(filePathCell);
80
- tbody.appendChild(row);
81
-
82
- if (data.innerComponent) {
83
- Object.entries(data.innerComponent).forEach(([innerComp, innerData]) => {
84
- generateRows(innerComp, innerData, component);
85
- });
86
- }
87
- componentCount++;
88
- }
89
-
90
- Object.entries(jsonData).forEach(([component, data]) => {
91
- generateRows(component, data);
92
- });
93
-
94
- table.appendChild(tbody);
95
- tableContainer.appendChild(table);
96
-
97
- generateTable(jsonData);
98
- </script>
99
- </body>
100
-
101
- </html>