Chore: Upgrading livechat's ui-kit package to latest version (#26709)

packages/livechat/package.json

@@ -87,7 +87,7 @@
 	},
 	"dependencies": {
 		"@rocket.chat/sdk": "^1.0.0-alpha.42",
-		"@rocket.chat/ui-kit": "^0.14.1",
+		"@rocket.chat/ui-kit": "^0.31.16",
 		"crypto-js": "^4.1.1",
 		"css-vars-ponyfill": "^2.4.7",
 		"date-fns": "^2.15.0",

packages/livechat/src/components/uiKit/message/ActionsBlock/index.js

@@ -1,4 +1,4 @@
-import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
+import { BlockContext } from '@rocket.chat/ui-kit';
 import { useState, useMemo, useCallback } from 'preact/compat';
 import { withTranslation } from 'react-i18next';
 
@@ -21,7 +21,8 @@ const ActionsBlock = ({ appId, blockId, elements, parser, t }) => {
 		<Block appId={appId} blockId={blockId}>
 			<div className={createClassName(styles, 'uikit-actions-block')}>
 				{renderableElements.map((element, key) => {
-					const renderedElement = parser.renderActions(element, BLOCK_CONTEXT.ACTION);
+					const renderedElement = parser.renderActions(element, BlockContext.ACTION);
+
 					if (!renderedElement) {
 						return null;
 					}

packages/livechat/src/components/uiKit/message/ButtonElement/index.js

@@ -1,4 +1,4 @@
-import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
+import { BlockContext } from '@rocket.chat/ui-kit';
 import { memo, useCallback } from 'preact/compat';
 
 import { createClassName } from '../../../helpers';
@@ -35,8 +35,8 @@ const ButtonElement = ({ text, actionId, url, value, style, context, confirm, pa
 			children={parser.text(text)}
 			className={createClassName(styles, 'uikit-button', {
 				style,
-				accessory: context === BLOCK_CONTEXT.SECTION,
-				action: context === BLOCK_CONTEXT.ACTION,
+				accessory: context === BlockContext.SECTION,
+				action: context === BlockContext.ACTION,
 			})}
 			disabled={performingAction}
 			type='button'

packages/livechat/src/components/uiKit/message/ButtonElement/stories.js

@@ -1,4 +1,4 @@
-import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
+import { BlockContext } from '@rocket.chat/ui-kit';
 import { action } from '@storybook/addon-actions';
 
 import ButtonElement from '.';
@@ -27,7 +27,7 @@ export default {
 		url: { control: 'text' },
 		value: { control: 'text' },
 		style: { control: { type: 'inline-radio', options: [null, 'primary', 'danger'] } },
-		context: { control: { type: 'select', options: BLOCK_CONTEXT } },
+		context: { control: { type: 'select', options: BlockContext } },
 	},
 	args: {
 		text: { type: 'plain_text', text: 'Click Me' },

packages/livechat/src/components/uiKit/message/ContextBlock/index.js

@@ -1,4 +1,4 @@
-import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
+import { BlockContext } from '@rocket.chat/ui-kit';
 import { memo } from 'preact/compat';
 
 import { createClassName } from '../../../helpers';
@@ -10,7 +10,7 @@ const ContextBlock = ({ appId, blockId, elements, parser }) => (
 		<div className={createClassName(styles, 'uikit-context-block')}>
 			{elements.map((element, key) => (
 				<div key={key} className={createClassName(styles, 'uikit-context-block__item')}>
-					{parser.renderContext(element, BLOCK_CONTEXT.CONTEXT)}
+					{parser.renderContext(element, BlockContext.CONTEXT)}
 				</div>
 			))}
 		</div>

packages/livechat/src/components/uiKit/message/ImageElement/index.js

@@ -1,4 +1,4 @@
-import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
+import { BlockContext } from '@rocket.chat/ui-kit';
 import { memo } from 'preact/compat';
 
 import { createClassName } from '../../../helpers';
@@ -8,8 +8,8 @@ const ImageElement = ({ imageUrl, altText, context }) => (
 	<div
 		aria-label={altText}
 		className={createClassName(styles, 'uikit-image', {
-			accessory: context === BLOCK_CONTEXT.SECTION,
-			context: context === BLOCK_CONTEXT.CONTEXT,
+			accessory: context === BlockContext.SECTION,
+			context: context === BlockContext.CONTEXT,
 		})}
 		role='img'
 		style={{

packages/livechat/src/components/uiKit/message/SectionBlock/index.js

@@ -1,4 +1,4 @@
-import { BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
+import { BlockContext } from '@rocket.chat/ui-kit';
 import { memo } from 'preact/compat';
 
 import { createClassName } from '../../../helpers';
@@ -9,12 +9,12 @@ const SectionBlock = ({ appId, blockId, text, fields, accessory, parser }) => (
 	<Block appId={appId} blockId={blockId}>
 		<div className={createClassName(styles, 'uikit-section-block')}>
 			<div className={createClassName(styles, 'uikit-section-block__content')}>
-				{text && <div className={createClassName(styles, 'uikit-section-block__text')}>{parser.text(text, BLOCK_CONTEXT.SECTION)}</div>}
+				{text && <div className={createClassName(styles, 'uikit-section-block__text')}>{parser.text(text, BlockContext.SECTION)}</div>}
 				{Array.isArray(fields) && fields.length > 0 && (
 					<div className={createClassName(styles, 'uikit-section-block__fields')}>
 						{fields.map((field, i) => (
 							<div key={i} className={createClassName(styles, 'uikit-section-block__field')}>
-								{parser.text(field, BLOCK_CONTEXT.SECTION)}
+								{parser.text(field, BlockContext.SECTION)}
 							</div>
 						))}
 					</div>
@@ -22,7 +22,7 @@ const SectionBlock = ({ appId, blockId, text, fields, accessory, parser }) => (
 			</div>
 			{accessory && (
 				<div className={createClassName(styles, 'uikit-section-block__accessory')}>
-					{parser.renderAccessories(accessory, BLOCK_CONTEXT.SECTION)}
+					{parser.renderAccessories(accessory, BlockContext.SECTION)}
 				</div>
 			)}
 		</div>

packages/livechat/src/components/uiKit/message/index.js

@@ -1,4 +1,4 @@
-import { uiKitMessage, UiKitParserMessage, BLOCK_CONTEXT } from '@rocket.chat/ui-kit';
+import { uiKitMessage, UiKitParserMessage, BlockContext } from '@rocket.chat/ui-kit';
 
 import ActionsBlock from './ActionsBlock';
 import ButtonElement from './ButtonElement';
@@ -15,7 +15,7 @@ import StaticSelectElement from './StaticSelectElement';
 
 class MessageParser extends UiKitParserMessage {
 	divider = (element, context, index) => {
-		if (context !== BLOCK_CONTEXT.BLOCK) {
+		if (context !== BlockContext.BLOCK) {
 			return null;
 		}
 
@@ -23,7 +23,7 @@ class MessageParser extends UiKitParserMessage {
 	};
 
 	section = (element, context, index) => {
-		if (context !== BLOCK_CONTEXT.BLOCK) {
+		if (context !== BlockContext.BLOCK) {
 			return null;
 		}
 
@@ -31,7 +31,7 @@ class MessageParser extends UiKitParserMessage {
 	};
 
 	image = (element, context, index) => {
-		if (context === BLOCK_CONTEXT.BLOCK) {
+		if (context === BlockContext.BLOCK) {
 			return <ImageBlock key={index} {...element} parser={this} />;
 		}
 
@@ -39,7 +39,7 @@ class MessageParser extends UiKitParserMessage {
 	};
 
 	actions = (element, context, index) => {
-		if (context !== BLOCK_CONTEXT.BLOCK) {
+		if (context !== BlockContext.BLOCK) {
 			return null;
 		}
 
@@ -47,15 +47,15 @@ class MessageParser extends UiKitParserMessage {
 	};
 
 	context = (element, context, index) => {
-		if (context !== BLOCK_CONTEXT.BLOCK) {
+		if (context !== BlockContext.BLOCK) {
 			return null;
 		}
 
 		return <ContextBlock key={index} {...element} parser={this} />;
 	};
 
-	plainText = (element, context, index) => {
-		if (context === BLOCK_CONTEXT.BLOCK) {
+	plain_text = (element, context, index) => {
+		if (context === BlockContext.BLOCK) {
 			return null;
 		}
 
@@ -63,7 +63,7 @@ class MessageParser extends UiKitParserMessage {
 	};
 
 	mrkdwn = (element, context, index) => {
-		if (context === BLOCK_CONTEXT.BLOCK) {
+		if (context === BlockContext.BLOCK) {
 			return null;
 		}
 
@@ -71,7 +71,7 @@ class MessageParser extends UiKitParserMessage {
 	};
 
 	button = (element, context, index) => {
-		if (context === BLOCK_CONTEXT.BLOCK) {
+		if (context === BlockContext.BLOCK) {
 			return null;
 		}
 
@@ -79,7 +79,7 @@ class MessageParser extends UiKitParserMessage {
 	};
 
 	overflow = (element, context, index) => {
-		if (context === BLOCK_CONTEXT.BLOCK) {
+		if (context === BlockContext.BLOCK) {
 			return null;
 		}
 
@@ -87,7 +87,7 @@ class MessageParser extends UiKitParserMessage {
 	};
 
 	datePicker = (element, context, index) => {
-		if (context === BLOCK_CONTEXT.BLOCK) {
+		if (context === BlockContext.BLOCK) {
 			return null;
 		}
 
@@ -95,7 +95,7 @@ class MessageParser extends UiKitParserMessage {
 	};
 
 	staticSelect = (element, context, index) => {
-		if (context === BLOCK_CONTEXT.BLOCK) {
+		if (context === BlockContext.BLOCK) {
 			return null;
 		}
 

yarn.lock

@@ -5202,7 +5202,7 @@ __metadata:
     "@rocket.chat/fuselage-tokens": 0.31.18
     "@rocket.chat/logo": 0.31.18
     "@rocket.chat/sdk": ^1.0.0-alpha.42
-    "@rocket.chat/ui-kit": ^0.14.1
+    "@rocket.chat/ui-kit": ^0.31.16
     "@storybook/addon-actions": ~6.5.10
     "@storybook/addon-backgrounds": ~6.5.10
     "@storybook/addon-essentials": ~6.5.10
@@ -5882,10 +5882,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@rocket.chat/ui-kit@npm:^0.14.1":
-  version: 0.14.1
-  resolution: "@rocket.chat/ui-kit@npm:0.14.1"
-  checksum: c9da95fbb079b2bbd39d746552083f0a67171347f303a3f27cad875f0eedf8d121d372fd0671c2ba9b2cd93b727fec10b01fe906cd71057a98872338c58f48bb
+"@rocket.chat/ui-kit@npm:^0.31.16":
+  version: 0.31.16
+  resolution: "@rocket.chat/ui-kit@npm:0.31.16"
+  checksum: 08e161a629476338aacbe9a9b46feeb372f052c4548999b2611894cf9778b1dab4ac48586c43827345d8024c86ddea509022d627bbb4bb39ca1b667172260a38
   languageName: node
   linkType: hard