feat: ui-kit-unified (#392)

RocketChat · Jun 11, 2021 · ce48ca9 · ce48ca9
1 parent 67a86ec
commit ce48ca9
Show file tree

Hide file tree

Showing 144 changed files with 2,071 additions and 1,292 deletions.
diff --git a/...it/.loki/reference/chrome_iphone7_Surfaces_Message_Actions_With_All_Selects.png b/...it/.loki/reference/chrome_iphone7_Surfaces_Message_Actions_With_All_Selects.png
diff --git a/...-ui-kit/.loki/reference/chrome_iphone7_Surfaces_Message_Actions_With_Button.png b/...-ui-kit/.loki/reference/chrome_iphone7_Surfaces_Message_Actions_With_Button.png
diff --git a/...it/.loki/reference/chrome_iphone7_Surfaces_Message_Actions_With_Date_Picker.png b/...it/.loki/reference/chrome_iphone7_Surfaces_Message_Actions_With_Date_Picker.png
diff --git a/...ge-ui-kit/.loki/reference/chrome_iphone7_Surfaces_Message_Conditional_Block.png b/...ge-ui-kit/.loki/reference/chrome_iphone7_Surfaces_Message_Conditional_Block.png
diff --git a/...-ui-kit/.loki/reference/chrome_iphone7_Surfaces_Message_Context_With_Mrkdwn.png b/...-ui-kit/.loki/reference/chrome_iphone7_Surfaces_Message_Context_With_Mrkdwn.png
diff --git a/...kit/.loki/reference/chrome_iphone7_Surfaces_Message_Context_With_Plain_Text.png b/...kit/.loki/reference/chrome_iphone7_Surfaces_Message_Context_With_Plain_Text.png
diff --git a/...loki/reference/chrome_iphone7_Surfaces_Message_Context_With_Text_And_Images.png b/...loki/reference/chrome_iphone7_Surfaces_Message_Context_With_Text_And_Images.png
diff --git a/...ges/fuselage-ui-kit/.loki/reference/chrome_iphone7_Surfaces_Message_Divider.png b/...ges/fuselage-ui-kit/.loki/reference/chrome_iphone7_Surfaces_Message_Divider.png
diff --git a/...age-ui-kit/.loki/reference/chrome_iphone7_Surfaces_Message_Image_With_Title.png b/...age-ui-kit/.loki/reference/chrome_iphone7_Surfaces_Message_Image_With_Title.png
diff --git a/...-ui-kit/.loki/reference/chrome_iphone7_Surfaces_Message_Image_Without_Title.png b/...-ui-kit/.loki/reference/chrome_iphone7_Surfaces_Message_Image_Without_Title.png
diff --git a/...oki/reference/chrome_iphone7_Surfaces_Message_Section_With_Button_Accessory.png b/...oki/reference/chrome_iphone7_Surfaces_Message_Section_With_Button_Accessory.png
diff --git a/...eference/chrome_iphone7_Surfaces_Message_Section_With_Date_Picker_Accessory.png b/...eference/chrome_iphone7_Surfaces_Message_Section_With_Date_Picker_Accessory.png
diff --git a/...loki/reference/chrome_iphone7_Surfaces_Message_Section_With_Image_Accessory.png b/...loki/reference/chrome_iphone7_Surfaces_Message_Section_With_Image_Accessory.png
diff --git a/...-ui-kit/.loki/reference/chrome_iphone7_Surfaces_Message_Section_With_Mrkdwn.png b/...-ui-kit/.loki/reference/chrome_iphone7_Surfaces_Message_Section_With_Mrkdwn.png
diff --git a/...erence/chrome_iphone7_Surfaces_Message_Section_With_Overflow_Menu_Accessory.png b/...erence/chrome_iphone7_Surfaces_Message_Section_With_Overflow_Menu_Accessory.png
diff --git a/...kit/.loki/reference/chrome_iphone7_Surfaces_Message_Section_With_Plain_Text.png b/...kit/.loki/reference/chrome_iphone7_Surfaces_Message_Section_With_Plain_Text.png
diff --git a/...it/.loki/reference/chrome_iphone7_Surfaces_Message_Section_With_Text_Fields.png b/...it/.loki/reference/chrome_iphone7_Surfaces_Message_Section_With_Text_Fields.png
diff --git a/...s/fuselage-ui-kit/.loki/reference/chrome_iphone7_Surfaces_Text_All_Elements.png b/...s/fuselage-ui-kit/.loki/reference/chrome_iphone7_Surfaces_Text_All_Elements.png
diff --git a/...elage-ui-kit/.loki/reference/chrome_iphone7_Surfaces_Text_Conditional_Block.png b/...elage-ui-kit/.loki/reference/chrome_iphone7_Surfaces_Text_Conditional_Block.png
diff --git a/packages/fuselage-ui-kit/.loki/reference/chrome_iphone7_Surfaces_Text_Mrkdwn.png b/packages/fuselage-ui-kit/.loki/reference/chrome_iphone7_Surfaces_Text_Mrkdwn.png
diff --git a/...ges/fuselage-ui-kit/.loki/reference/chrome_iphone7_Surfaces_Text_Plain_Text.png b/...ges/fuselage-ui-kit/.loki/reference/chrome_iphone7_Surfaces_Text_Plain_Text.png
diff --git a/...kit/.loki/reference/chrome_laptop_Surfaces_Message_Actions_With_All_Selects.png b/...kit/.loki/reference/chrome_laptop_Surfaces_Message_Actions_With_All_Selects.png
diff --git a/...e-ui-kit/.loki/reference/chrome_laptop_Surfaces_Message_Actions_With_Button.png b/...e-ui-kit/.loki/reference/chrome_laptop_Surfaces_Message_Actions_With_Button.png
diff --git a/...kit/.loki/reference/chrome_laptop_Surfaces_Message_Actions_With_Date_Picker.png b/...kit/.loki/reference/chrome_laptop_Surfaces_Message_Actions_With_Date_Picker.png
diff --git a/...age-ui-kit/.loki/reference/chrome_laptop_Surfaces_Message_Conditional_Block.png b/...age-ui-kit/.loki/reference/chrome_laptop_Surfaces_Message_Conditional_Block.png
diff --git a/...e-ui-kit/.loki/reference/chrome_laptop_Surfaces_Message_Context_With_Mrkdwn.png b/...e-ui-kit/.loki/reference/chrome_laptop_Surfaces_Message_Context_With_Mrkdwn.png
diff --git a/...-kit/.loki/reference/chrome_laptop_Surfaces_Message_Context_With_Plain_Text.png b/...-kit/.loki/reference/chrome_laptop_Surfaces_Message_Context_With_Plain_Text.png
diff --git a/....loki/reference/chrome_laptop_Surfaces_Message_Context_With_Text_And_Images.png b/....loki/reference/chrome_laptop_Surfaces_Message_Context_With_Text_And_Images.png
diff --git a/...ages/fuselage-ui-kit/.loki/reference/chrome_laptop_Surfaces_Message_Divider.png b/...ages/fuselage-ui-kit/.loki/reference/chrome_laptop_Surfaces_Message_Divider.png
diff --git a/...lage-ui-kit/.loki/reference/chrome_laptop_Surfaces_Message_Image_With_Title.png b/...lage-ui-kit/.loki/reference/chrome_laptop_Surfaces_Message_Image_With_Title.png
diff --git a/...e-ui-kit/.loki/reference/chrome_laptop_Surfaces_Message_Image_Without_Title.png b/...e-ui-kit/.loki/reference/chrome_laptop_Surfaces_Message_Image_Without_Title.png
diff --git a/...loki/reference/chrome_laptop_Surfaces_Message_Section_With_Button_Accessory.png b/...loki/reference/chrome_laptop_Surfaces_Message_Section_With_Button_Accessory.png
diff --git a/...reference/chrome_laptop_Surfaces_Message_Section_With_Date_Picker_Accessory.png b/...reference/chrome_laptop_Surfaces_Message_Section_With_Date_Picker_Accessory.png
diff --git a/....loki/reference/chrome_laptop_Surfaces_Message_Section_With_Image_Accessory.png b/....loki/reference/chrome_laptop_Surfaces_Message_Section_With_Image_Accessory.png
diff --git a/...e-ui-kit/.loki/reference/chrome_laptop_Surfaces_Message_Section_With_Mrkdwn.png b/...e-ui-kit/.loki/reference/chrome_laptop_Surfaces_Message_Section_With_Mrkdwn.png
diff --git a/...ference/chrome_laptop_Surfaces_Message_Section_With_Overflow_Menu_Accessory.png b/...ference/chrome_laptop_Surfaces_Message_Section_With_Overflow_Menu_Accessory.png
diff --git a/...-kit/.loki/reference/chrome_laptop_Surfaces_Message_Section_With_Plain_Text.png b/...-kit/.loki/reference/chrome_laptop_Surfaces_Message_Section_With_Plain_Text.png
diff --git a/...kit/.loki/reference/chrome_laptop_Surfaces_Message_Section_With_Text_Fields.png b/...kit/.loki/reference/chrome_laptop_Surfaces_Message_Section_With_Text_Fields.png
diff --git a/...es/fuselage-ui-kit/.loki/reference/chrome_laptop_Surfaces_Text_All_Elements.png b/...es/fuselage-ui-kit/.loki/reference/chrome_laptop_Surfaces_Text_All_Elements.png
diff --git a/...selage-ui-kit/.loki/reference/chrome_laptop_Surfaces_Text_Conditional_Block.png b/...selage-ui-kit/.loki/reference/chrome_laptop_Surfaces_Text_Conditional_Block.png
diff --git a/packages/fuselage-ui-kit/.loki/reference/chrome_laptop_Surfaces_Text_Mrkdwn.png b/packages/fuselage-ui-kit/.loki/reference/chrome_laptop_Surfaces_Text_Mrkdwn.png
diff --git a/...ages/fuselage-ui-kit/.loki/reference/chrome_laptop_Surfaces_Text_Plain_Text.png b/...ages/fuselage-ui-kit/.loki/reference/chrome_laptop_Surfaces_Text_Plain_Text.png
diff --git a/packages/fuselage-ui-kit/package.json b/packages/fuselage-ui-kit/package.json
@@ -65,12 +65,12 @@
     "@rocket.chat/icons": "^0.26.0",
     "@rocket.chat/prettier-config": "^0.26.0",
     "@rocket.chat/ui-kit": "^0.26.0",
-    "@storybook/addon-essentials": "^6.2.9",
-    "@storybook/addons": "^6.2.9",
-    "@storybook/builder-webpack5": "^6.2.9",
-    "@storybook/react": "^6.2.9",
-    "@storybook/source-loader": "^6.2.9",
-    "@storybook/theming": "^6.2.9",
+    "@storybook/addon-essentials": "^6.1.11",
+    "@storybook/addons": "^6.1.11",
+    "@storybook/builder-webpack5": "^6.1.11",
+    "@storybook/react": "^6.1.11",
+    "@storybook/source-loader": "^6.1.11",
+    "@storybook/theming": "^6.1.11",
     "babel-loader": "^8.2.2",
     "cross-env": "^7.0.3",
     "eslint": "^7.26.0",

diff --git a/packages/fuselage-ui-kit/src/elements/OverflowElement.js b/packages/fuselage-ui-kit/src/elements/OverflowElement.js
@@ -21,7 +21,7 @@ const OverflowElement = ({ element, context, parser }) => {
     action,
   ]);
 
-  const convertedOptions = convertOptions(options, parser.text);
+  const convertedOptions = convertOptions(options, parser.text.bind(parser));
   const [
     cursor,
     handleKeyDown,
@@ -68,7 +68,7 @@ const OverflowElement = ({ element, context, parser }) => {
       >
         <Options
           onSelect={handleSelection}
-          options={convertOptions(options, parser.text)}
+          options={convertOptions(options, parser.text.bind(parser))}
           cursor={cursor}
         />
       </PositionAnimated>

diff --git a/packages/fuselage-ui-kit/src/index.js b/packages/fuselage-ui-kit/src/index.js
@@ -9,5 +9,4 @@ export const UiKitComponent = ({ render, blocks }) => render(blocks);
 export * from './surfaces/banner';
 export * from './surfaces/message';
 export * from './surfaces/modal';
-export * from './surfaces/text';
 export * from './hooks';
diff --git a/packages/fuselage-ui-kit/src/surfaces/banner.js b/packages/fuselage-ui-kit/src/surfaces/banner.js
@@ -1,4 +1,4 @@
-import { uiKitBanner, UiKitParserBanner } from '@rocket.chat/ui-kit';
+import { UiKitParserBanner } from '@rocket.chat/ui-kit';
 import React from 'react';
 
 import {
@@ -42,8 +42,6 @@ export const bannerParser = new BannerParser();
 
 export const UiKitBanner = (blocks, conditions = {}) => (
   <BannerSurface>
-    {uiKitBanner(bannerParser, { engine: 'rocket.chat', ...conditions })(
-      blocks
-    )}
+    {bannerParser.render(blocks, { engine: 'rocket.chat', ...conditions })}
   </BannerSurface>
 );
diff --git a/packages/fuselage-ui-kit/src/surfaces/message.js b/packages/fuselage-ui-kit/src/surfaces/message.js
@@ -1,4 +1,4 @@
-import { uiKitMessage, UiKitParserMessage } from '@rocket.chat/ui-kit';
+import { UiKitParserMessage } from '@rocket.chat/ui-kit';
 import React from 'react';
 
 import {
@@ -36,8 +36,6 @@ export const messageParser = new MessageParser();
 
 export const UiKitMessage = (blocks, conditions = {}) => (
   <MessageSurface>
-    {uiKitMessage(messageParser, { engine: 'rocket.chat', ...conditions })(
-      blocks
-    )}
+    {messageParser.render(blocks, { engine: 'rocket.chat', ...conditions })}
   </MessageSurface>
 );
diff --git a/packages/fuselage-ui-kit/src/surfaces/message.stories.js b/packages/fuselage-ui-kit/src/surfaces/message.stories.js
diff --git a/packages/fuselage-ui-kit/src/surfaces/modal.js b/packages/fuselage-ui-kit/src/surfaces/modal.js
@@ -1,4 +1,4 @@
-import { uiKitModal, UiKitParserModal } from '@rocket.chat/ui-kit';
+import { UiKitParserModal } from '@rocket.chat/ui-kit';
 import React from 'react';
 
 import {
@@ -42,6 +42,6 @@ export const modalParser = new ModalParser();
 
 export const UiKitModal = (blocks, conditions = {}) => (
   <ModalSurface>
-    {uiKitModal(modalParser, { engine: 'rocket.chat', ...conditions })(blocks)}
+    {modalParser.render(blocks, { engine: 'rocket.chat', ...conditions })}
   </ModalSurface>
 );
diff --git a/packages/fuselage-ui-kit/src/surfaces/text.js b/packages/fuselage-ui-kit/src/surfaces/text.js
diff --git a/packages/fuselage-ui-kit/src/surfaces/text.stories.js b/packages/fuselage-ui-kit/src/surfaces/text.stories.js
diff --git a/packages/fuselage-ui-kit/tsconfig.json b/packages/fuselage-ui-kit/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "allowSyntheticDefaultImports": true,
+    "module": "es2015",
+    "target": "es5",
+    "lib": ["es6", "dom"],
+    "sourceMap": true,
+    "allowJs": false,
+    "jsx": "react",
+    "moduleResolution": "node",
+    "rootDir": "../",
+    "outDir": "dist",
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "declaration": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}
diff --git a/packages/ui-kit/jest.config.js b/packages/ui-kit/jest.config.js
@@ -1,5 +1,6 @@
 module.exports = {
   preset: 'ts-jest',
+  testEnvironment: 'node',
   errorOnDeprecated: true,
   testMatch: ['<rootDir>/src/**/*.spec.[jt]s?(x)'],
   globals: {

diff --git a/packages/ui-kit/package.json b/packages/ui-kit/package.json
@@ -15,18 +15,28 @@
   "bugs": {
     "url": "https://github.com/RocketChat/Rocket.Chat.Fuselage/issues"
   },
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/esm/index.d.ts",
+  "typesVersions": {
+    "<4.1": {
+      "*": [
+        "ts3.4/*"
+      ]
+    }
+  },
   "files": [
     "/dist"
   ],
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "build": "run-s .:build:clean .:build:prod",
+    "build": "run-s .:build:clean .:build:esm .:build:cjs .:build:ts3.4",
     ".:build:clean": "rimraf dist",
-    ".:build:prod": "webpack --mode production",
+    ".:build:esm": "tsc -p tsconfig.json",
+    ".:build:cjs": "tsc -p tsconfig-cjs.json",
+    ".:build:ts3.4": "downlevel-dts dist/esm/ dist/ts3.4/ --to=3.4",
     "lint": "eslint --ext js,ts src",
     "lint-fix": "eslint --fix --ext js,ts src",
     "lint-staged": "lint-staged",
@@ -43,6 +53,7 @@
     "@rocket.chat/prettier-config": "^0.26.0",
     "@types/jest": "^26.0.23",
     "babel-loader": "^8.2.2",
+    "downlevel-dts": "^0.7.0",
     "eslint": "^7.26.0",
     "jest": "^26.6.3",
     "lint-staged": "^11.0.0",