contentoh-components-library 21.4.17 → 21.4.18

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 (113) hide show
  1. package/.env.development +5 -1
  2. package/.env.production +3 -1
  3. package/dist/assets/fonts/roboto/LICENSE.txt +202 -0
  4. package/dist/components/atoms/Avatar/index.js +3 -2
  5. package/dist/components/atoms/Card/index.js +46 -5
  6. package/dist/components/atoms/Card/styles.js +3 -1
  7. package/dist/components/atoms/CheckBox/index.js +7 -2
  8. package/dist/components/atoms/CheckBox/styles.js +1 -1
  9. package/dist/components/atoms/InputFormatter/styles.js +1 -1
  10. package/dist/components/molecules/CarouselImagesLogin/index.js +1 -1
  11. package/dist/components/molecules/HeaderTop/index.js +68 -11
  12. package/dist/components/molecules/TagAndInput/index.js +1 -1
  13. package/dist/components/organisms/Chat/Chat.stories.js +27 -8
  14. package/dist/components/organisms/Chat/ContainerItems/index.js +19 -3
  15. package/dist/components/organisms/Chat/ContainerItems/styles.js +1 -1
  16. package/dist/components/organisms/Chat/ContentChat/index.js +350 -197
  17. package/dist/components/organisms/Chat/Footer/index.js +48 -39
  18. package/dist/components/organisms/Chat/index.js +49 -4
  19. package/dist/components/organisms/FullProductNameHeader/index.js +2 -2
  20. package/dist/components/organisms/Modal/styles.js +1 -1
  21. package/dist/components/organisms/PanelLayout/PanelLayout.stories.js +1 -1
  22. package/dist/components/organisms/PanelLayout/index.js +4 -4
  23. package/dist/components/pages/ProviderProductEdition/ProviderProductEdition.stories.js +88 -120
  24. package/dist/components/pages/ProviderProductEdition/index.js +216 -200
  25. package/dist/components/pages/ProviderProductEdition/styles.js +1 -1
  26. package/dist/components/pages/RetailerProductEdition/RetailerProductEdition.stories.js +56 -52
  27. package/dist/components/pages/RetailerProductEdition/index.js +318 -300
  28. package/dist/components/pages/RetailerProductEdition/styles.js +1 -1
  29. package/dist/components/pages/RetailerProductEdition/utils.js +61 -2
  30. package/dist/index.js +247 -52
  31. package/package.json +4 -1
  32. package/src/components/atoms/Avatar/index.js +8 -2
  33. package/src/components/atoms/Card/index.js +35 -2
  34. package/src/components/atoms/Card/styles.js +41 -5
  35. package/src/components/atoms/CheckBox/index.js +4 -1
  36. package/src/components/atoms/CheckBox/styles.js +2 -0
  37. package/src/components/atoms/ImageCarousel/ImgeSlider.stories.js +76 -0
  38. package/src/components/atoms/ImageCarousel/index.js +103 -0
  39. package/src/components/atoms/ImageCarousel/styles.js +79 -0
  40. package/src/components/atoms/InputFormatter/styles.js +2 -1
  41. package/src/components/atoms/PercentTag/PercentTag.stories.js +7 -0
  42. package/src/components/atoms/PercentTag/index.js +9 -0
  43. package/src/components/atoms/PercentTag/styles.js +69 -0
  44. package/src/components/atoms/RatingStars/RatingStars.stories.js +10 -0
  45. package/src/components/atoms/RatingStars/index.js +31 -0
  46. package/src/components/atoms/RatingStars/styles.js +28 -0
  47. package/src/components/atoms/RetailerCatalog/RetailerCatalog.stories.js +36 -0
  48. package/src/components/atoms/RetailerCatalog/index.js +49 -0
  49. package/src/components/atoms/RetailerCatalog/styles.js +30 -0
  50. package/src/components/atoms/RetailerOption/RetailerOption.stories.js +15 -0
  51. package/src/components/atoms/RetailerOption/index.js +53 -0
  52. package/src/components/atoms/RetailerOption/styles.js +41 -0
  53. package/src/components/atoms/RetailersList/RetailersList.stories.js +33 -0
  54. package/src/components/atoms/RetailersList/index.js +20 -0
  55. package/src/components/atoms/RetailersList/styles.js +19 -0
  56. package/src/components/atoms/UserCatalog/UserCatalog.stories.js +67 -0
  57. package/src/components/atoms/UserCatalog/index.js +100 -0
  58. package/src/components/atoms/UserCatalog/styles.js +24 -0
  59. package/src/components/atoms/UserOption/UserOption.stories.js +25 -0
  60. package/src/components/atoms/UserOption/index.js +95 -0
  61. package/src/components/atoms/UserOption/styles.js +61 -0
  62. package/src/components/atoms/UserSelector/UserSelector.stories.js +25 -0
  63. package/src/components/atoms/UserSelector/index.js +86 -0
  64. package/src/components/atoms/UserSelector/styles.js +55 -0
  65. package/src/components/molecules/CarouselImagesLogin/index.js +1 -1
  66. package/src/components/molecules/GridItem/GridItem.stories.js +126 -0
  67. package/src/components/molecules/GridItem/index.js +105 -0
  68. package/src/components/molecules/GridItem/styles.js +104 -0
  69. package/src/components/molecules/HeaderItem/ColumnItem.js +9 -0
  70. package/src/components/molecules/HeaderItem/HeaderItem.stories.js +24 -0
  71. package/src/components/molecules/HeaderItem/index.js +26 -0
  72. package/src/components/molecules/HeaderItem/styles.js +27 -0
  73. package/src/components/molecules/HeaderTop/index.js +52 -6
  74. package/src/components/molecules/RowItem/ColumnItem.js +9 -0
  75. package/src/components/molecules/RowItem/RowItem.stories.js +5660 -0
  76. package/src/components/molecules/RowItem/index.js +45 -0
  77. package/src/components/molecules/RowItem/styles.js +40 -0
  78. package/src/components/molecules/StripeCardForm/StripeCardForm.stories.js +13 -0
  79. package/src/components/molecules/StripeCardForm/index.js +42 -0
  80. package/src/components/molecules/StripeCardForm/paymentForm.js +124 -0
  81. package/src/components/molecules/StripeCardForm/styles.js +73 -0
  82. package/src/components/molecules/StripeCardSelector/CardSelector.stories.js +12 -0
  83. package/src/components/molecules/StripeCardSelector/index.js +44 -0
  84. package/src/components/molecules/StripeCardSelector/styles.js +4 -0
  85. package/src/components/molecules/StripeCardSelector/utils.js +17 -0
  86. package/src/components/molecules/TagAndInput/index.js +10 -8
  87. package/src/components/organisms/Chat/Chat.stories.js +27 -7
  88. package/src/components/organisms/Chat/ContainerItems/index.js +18 -2
  89. package/src/components/organisms/Chat/ContainerItems/styles.js +10 -2
  90. package/src/components/organisms/Chat/ContentChat/index.js +88 -12
  91. package/src/components/organisms/Chat/Footer/index.js +11 -0
  92. package/src/components/organisms/Chat/index.js +46 -4
  93. package/src/components/organisms/FullProductNameHeader/index.js +1 -1
  94. package/src/components/organisms/GridProducts/GridProducts.stories.js +5485 -0
  95. package/src/components/organisms/GridProducts/index.js +50 -0
  96. package/src/components/organisms/GridProducts/styles.js +14 -0
  97. package/src/components/organisms/GridProducts/utils.js +111 -0
  98. package/src/components/organisms/Modal/styles.js +4 -1
  99. package/src/components/organisms/OrderDetail/utils/Table/utils.js +6 -16
  100. package/src/components/organisms/PanelLayout/PanelLayout.stories.js +63 -0
  101. package/src/components/organisms/PanelLayout/index.js +11 -0
  102. package/src/components/organisms/PanelLayout/styles.js +33 -0
  103. package/src/components/organisms/SideModal/SideModal.stories.js +23 -0
  104. package/src/components/organisms/SideModal/index.js +50 -0
  105. package/src/components/organisms/SideModal/styles.js +30 -0
  106. package/src/components/pages/ProviderProductEdition/ProviderProductEdition.stories.js +95 -127
  107. package/src/components/pages/ProviderProductEdition/index.js +135 -129
  108. package/src/components/pages/ProviderProductEdition/styles.js +5 -1
  109. package/src/components/pages/RetailerProductEdition/RetailerProductEdition.stories.js +55 -52
  110. package/src/components/pages/RetailerProductEdition/index.js +124 -136
  111. package/src/components/pages/RetailerProductEdition/styles.js +4 -0
  112. package/src/components/pages/RetailerProductEdition/utils.js +37 -0
  113. package/src/index.js +16 -0
package/dist/components/organisms/Chat/ContainerItems/styles.js CHANGED
@@ -15,6 +15,6 @@ var _variables = require("../../../../global-files/variables");
15
15
 
16
16
  var _templateObject;
17
17
 
18
- var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n max-height: 100%;\n flex-grow: 2;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n gap: 8px;\n background: white;\n padding: 15px 11px;\n overflow: auto;\n //border: 1px solid red;\n\n .btn-loadMore {\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n flex-grow: 2;\n\n .container-btnLoadMore {\n border-radius: 10px;\n .button {\n padding: 5px 10px;\n border: none;\n gap: 10px;\n font-family: ", ";\n .icon,\n .iconLoading {\n font-size: 10px;\n }\n }\n }\n }\n\n // lista de items\n > ul {\n --marginUserValue: 10px;\n list-style: none;\n margin: 0;\n padding: 0;\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 0px;\n\n // items cambio de estatus general del article\n // items cambio de estatus en servicio del article\n .label-statusArticle,\n .label-statusService {\n width: 100%;\n padding: 10px;\n border-radius: 10px;\n display: grid;\n place-items: center;\n cursor: default;\n\n text-align: left;\n font-family: ", ", sans-serif;\n color: white;\n font-size: 12px;\n\n .label {\n text-align: left;\n font-family: ", ", sans-serif;\n color: white;\n font-size: 12px;\n white-space: pre-wrap;\n cursor: inherit;\n }\n }\n .label-statusArticle {\n background-color: #85bc5b;\n }\n .label-statusService {\n background-color: #8a6caa;\n }\n\n // cada item dentro de la lista (fechas|message|img|file|status...)\n li {\n width: 90%;\n padding: 0px;\n margin: 16px 0px 0px 0px;\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n flex-wrap: nowrap;\n gap: var(--marginUserValue);\n align-items: center;\n align-self: flex-start;\n //border: 1px solid blue;\n\n & > label:first-child,\n .item-img {\n margin: 0px 0px 0px 44px;\n }\n\n &.sameUser {\n margin: 2px 0px 0px 0px;\n /* padding: 0px 0px 0px calc(34px + var(--marginUserValue)); */\n }\n\n // items gray label (para fechas)\n &.label-gray {\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 0px; //0px calc(34px + var(--marginUserValue));\n\n .separator {\n flex-grow: 2;\n min-width: 35px;\n border: 0.3px solid #f0f0f0;\n }\n label {\n padding: 4px 15px;\n text-align: center;\n font-family: ", ", sans-serif;\n color: #b3b3b3;\n font-size: 10px;\n }\n }\n\n // container ImageTooltip del user de un item\n .container-imgUser {\n display: grid;\n place-items: center;\n width: 34px;\n min-width: min-content;\n border-radius: 50%;\n overflow: hidden;\n align-self: flex-start;\n margin: 0;\n }\n .icon-imgUser.fill {\n padding: 0px;\n width: 34px;\n height: 34px;\n color: #9d9d9d;\n border-color: #9d9d9d;\n border-width: 2px;\n }\n .tooltip-imgUser {\n .label-nameUser {\n font-family: ", ", sans-serif;\n color: #262626;\n font-size: 12px;\n text-align: center;\n }\n }\n\n // items de tipo message, comment y file\n .item-message,\n .item-comment,\n .item-file,\n .item-statusTicket {\n border-radius: 10px;\n padding: 10px;\n font-family: ", ", sans-serif;\n font-size: 12px;\n text-align: left;\n white-space: pre-line;\n color: white;\n word-break: break-word;\n }\n .item-message,\n .item-comment,\n .item-file {\n background-color: #8386ee;\n }\n .item-statusTicket {\n background-color: #85bc5b;\n }\n\n .item-message {\n &.different-company {\n border: 1px solid #e33aa9;\n }\n }\n /*\n .item-comment {\n background-color: #5e61b2;\n }\n */\n\n // items de tipo img\n .item-img {\n display: grid;\n place-items: center;\n background-color: #f7f7f7;\n border-radius: 10px;\n overflow: hidden;\n max-width: 60%;\n max-height: 300px;\n\n .container-ImagePreview {\n max-height: inherit;\n\n > .img {\n max-height: inherit;\n }\n\n .label-nameImg {\n .iconDefaultImg {\n border-radius: 0px;\n border: none;\n padding: 0px;\n color: #8386ee;\n }\n }\n }\n }\n\n // items de tipo file\n .item-file {\n width: auto;\n max-width: 70%;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 6px;\n\n .btnDownloadFileItem {\n width: 28px;\n min-width: 28px;\n height: 28px;\n min-height: 28px;\n }\n\n // nameFile solo 1 linea\n .label-nameFileShort {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n flex-grow: 2;\n cursor: default;\n font-family: ", ", sans-serif;\n font-size: 12px;\n text-align: center;\n color: white;\n }\n }\n\n // label hora del item\n .label-time {\n min-width: fit-content;\n color: #c7c7c7;\n font-family: ", ", sans-serif;\n font-size: 9px;\n }\n\n & > .label-time:first-child {\n display: none;\n }\n\n // items del currentUser\n &.own-message {\n align-self: flex-end;\n flex-direction: row-reverse;\n\n /* &.sameUser {\n padding: 0px calc(34px + var(--marginUserValue)) 0px 0px;\n } */\n\n .item-message,\n .item-comment {\n color: #262626;\n }\n .item-message,\n .item-comment,\n .item-file {\n background-color: #f0f0f0;\n }\n\n & > .item-message:first-child {\n margin: 0px 40px 0px 0px;\n }\n /*\n .item-comment {\n background-color: #d7d7d7;\n }\n */\n\n // items de tipo img\n .item-img {\n .container-ImagePreview {\n .label-nameImg {\n .iconDefaultImg {\n color: #c9c7c7;\n }\n }\n }\n }\n\n // items de tipo file\n .item-file {\n .btnDownloadFileItem {\n .iconFile,\n .container-btnDownload .buttonMUI .icon {\n color: #262626;\n }\n }\n\n // nameFile solo 1 linea\n .label-nameFileShort {\n color: #262626;\n }\n }\n }\n\n // items neutrales (center aligned)\n &.itemNeutral {\n width: 100%;\n\n .itemStatus {\n width: 100%;\n padding: 10px;\n border-radius: 10px;\n display: grid;\n place-items: center;\n cursor: default;\n text-align: center;\n font-family: ", ", sans-serif;\n color: white;\n font-size: 12px;\n line-height: 1.2;\n white-space: pre-wrap;\n\n &.ticket {\n color: white;\n background-color: #85bc5b;\n }\n }\n }\n }\n }\n\n .content-chat {\n ::-webkit-scrollbar {\n width: 0;\n }\n }\n"])), _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoMedium, _variables.FontFamily.RobotoMedium, _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoRegular);
18
+ var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n width: 100%;\n max-height: 100%;\n flex-grow: 2;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n gap: 8px;\n background: white;\n padding: 15px 11px;\n overflow: auto;\n //border: 1px solid red;\n\n .btn-loadMore {\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n flex-grow: 2;\n\n .container-btnLoadMore {\n border-radius: 10px;\n .button {\n padding: 5px 10px;\n border: none;\n gap: 10px;\n font-family: ", ";\n .icon,\n .iconLoading {\n font-size: 10px;\n }\n }\n }\n }\n\n // lista de items\n > ul {\n --marginUserValue: 10px;\n list-style: none;\n margin: 0;\n padding: 0;\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 0px;\n\n // items cambio de estatus general del article\n // items cambio de estatus en servicio del article\n .label-statusArticle,\n .label-statusService {\n width: 100%;\n padding: 10px;\n border-radius: 10px;\n display: grid;\n place-items: center;\n cursor: default;\n\n text-align: left;\n font-family: ", ", sans-serif;\n color: white;\n font-size: 12px;\n\n .label {\n text-align: left;\n font-family: ", ", sans-serif;\n color: white;\n font-size: 12px;\n white-space: pre-wrap;\n cursor: inherit;\n }\n }\n .label-statusArticle {\n background-color: #85bc5b;\n }\n .label-statusService {\n background-color: #8a6caa;\n }\n\n // cada item dentro de la lista (fechas|message|img|file|status...)\n li {\n width: 90%;\n padding: 0px;\n margin: 16px 0px 0px 0px;\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n flex-wrap: nowrap;\n gap: var(--marginUserValue);\n align-items: center;\n align-self: flex-start;\n //border: 1px solid blue;\n\n & > label:first-child,\n .item-img {\n margin: 0px 0px 0px 44px;\n }\n\n &.sameUser {\n margin: 2px 0px 0px 0px;\n /* padding: 0px 0px 0px calc(34px + var(--marginUserValue)); */\n }\n\n // items gray label (para fechas)\n &.label-gray {\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n padding: 0px; //0px calc(34px + var(--marginUserValue));\n\n .separator {\n flex-grow: 2;\n min-width: 35px;\n border: 0.3px solid #f0f0f0;\n }\n label {\n padding: 4px 15px;\n text-align: center;\n font-family: ", ", sans-serif;\n color: #b3b3b3;\n font-size: 10px;\n }\n }\n\n // container ImageTooltip del user de un item\n .container-imgUser {\n display: grid;\n place-items: center;\n width: 34px;\n min-width: min-content;\n border-radius: 50%;\n overflow: hidden;\n align-self: flex-start;\n margin: 0;\n }\n .icon-imgUser.fill {\n padding: 0px;\n width: 34px;\n height: 34px;\n color: #9d9d9d;\n border-color: #9d9d9d;\n border-width: 2px;\n }\n .tooltip-imgUser {\n .label-nameUser {\n font-family: ", ", sans-serif;\n color: #262626;\n font-size: 12px;\n text-align: center;\n }\n }\n\n // items de tipo message, comment y file\n .item-message,\n .item-comment,\n .item-file,\n .item-statusTicket,\n .item-statusItem {\n border-radius: 10px;\n padding: 10px;\n font-family: ", ", sans-serif;\n font-size: 12px;\n text-align: left;\n white-space: pre-line;\n color: white;\n word-break: break-word;\n }\n .item-message,\n .item-comment,\n .item-file {\n background-color: #8386ee;\n }\n .item-statusTicket,\n .item-statusItem {\n background-color: #85bc5b;\n }\n\n .item-statusItem {\n display: flex;\n gap: 3px;\n align-items: center;\n }\n\n .item-message {\n &.different-company {\n border: 1px solid #e33aa9;\n }\n }\n /*\n .item-comment {\n background-color: #5e61b2;\n }\n */\n\n // items de tipo img\n .item-img {\n display: grid;\n place-items: center;\n background-color: #f7f7f7;\n border-radius: 10px;\n overflow: hidden;\n max-width: 60%;\n max-height: 300px;\n\n .container-ImagePreview {\n max-height: inherit;\n\n > .img {\n max-height: inherit;\n }\n\n .label-nameImg {\n .iconDefaultImg {\n border-radius: 0px;\n border: none;\n padding: 0px;\n color: #8386ee;\n }\n }\n }\n }\n\n // items de tipo file\n .item-file {\n width: auto;\n max-width: 70%;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 6px;\n\n .btnDownloadFileItem {\n width: 28px;\n min-width: 28px;\n height: 28px;\n min-height: 28px;\n }\n\n // nameFile solo 1 linea\n .label-nameFileShort {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n flex-grow: 2;\n cursor: default;\n font-family: ", ", sans-serif;\n font-size: 12px;\n text-align: center;\n color: white;\n }\n }\n\n // label hora del item\n .label-time {\n min-width: fit-content;\n color: #c7c7c7;\n font-family: ", ", sans-serif;\n font-size: 9px;\n }\n\n & > .label-time:first-child {\n display: none;\n }\n\n // items del currentUser\n &.own-message {\n align-self: flex-end;\n flex-direction: row-reverse;\n\n /* &.sameUser {\n padding: 0px calc(34px + var(--marginUserValue)) 0px 0px;\n } */\n\n .item-message,\n .item-comment {\n color: #262626;\n }\n .item-message,\n .item-comment,\n .item-file {\n background-color: #f0f0f0;\n }\n\n & > .item-message:first-child {\n margin: 0px 40px 0px 0px;\n }\n /*\n .item-comment {\n background-color: #d7d7d7;\n }\n */\n\n // items de tipo img\n .item-img {\n .container-ImagePreview {\n .label-nameImg {\n .iconDefaultImg {\n color: #c9c7c7;\n }\n }\n }\n }\n\n // items de tipo file\n .item-file {\n .btnDownloadFileItem {\n .iconFile,\n .container-btnDownload .buttonMUI .icon {\n color: #262626;\n }\n }\n\n // nameFile solo 1 linea\n .label-nameFileShort {\n color: #262626;\n }\n }\n }\n\n // items neutrales (center aligned)\n &.itemNeutral {\n width: 100%;\n\n .itemStatus {\n width: 100%;\n padding: 10px;\n border-radius: 10px;\n display: grid;\n place-items: center;\n cursor: default;\n text-align: center;\n font-family: ", ", sans-serif;\n color: white;\n font-size: 12px;\n line-height: 1.2;\n white-space: pre-wrap;\n\n &.ticket {\n color: white;\n background-color: #85bc5b;\n }\n }\n }\n }\n }\n\n .content-chat {\n ::-webkit-scrollbar {\n width: 0;\n }\n }\n"])), _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoMedium, _variables.FontFamily.RobotoMedium, _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoRegular, _variables.FontFamily.RobotoRegular);
19
19
 
20
20
  exports.Container = Container;