From 6333307e137e218a7475b0c56f4c2c8fa04efcaa Mon Sep 17 00:00:00 2001 From: Guilherme Gazzo Date: Thu, 10 Jun 2021 22:32:58 -0300 Subject: [PATCH] Storybook build --- packages/fuselage-ui-kit/package.json | 12 ++-- .../fuselage-ui-kit/src/surfaces/banner.js | 55 ++++++------------ .../fuselage-ui-kit/src/surfaces/message.js | 46 +++++---------- .../src/surfaces/message.stories.js | 58 +++++++++++++++---- .../fuselage-ui-kit/src/surfaces/modal.js | 55 ++++++------------ packages/fuselage-ui-kit/tsconfig.json | 22 +++++++ packages/ui-kit/src/index.ts | 2 + .../src/rendering/BaseSurfaceRenderer.ts | 2 +- yarn.lock | 24 ++++---- 9 files changed, 142 insertions(+), 134 deletions(-) create mode 100644 packages/fuselage-ui-kit/tsconfig.json diff --git a/packages/fuselage-ui-kit/package.json b/packages/fuselage-ui-kit/package.json index 0f109aafaf..a17aa35a55 100644 --- 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/surfaces/banner.js b/packages/fuselage-ui-kit/src/surfaces/banner.js index c1c0aeeda9..c04d5300a4 100644 --- a/packages/fuselage-ui-kit/src/surfaces/banner.js +++ b/packages/fuselage-ui-kit/src/surfaces/banner.js @@ -1,9 +1,4 @@ -import { - UiKitParserBanner, - TextObjectType, - BlockElementType, - LayoutBlockType, -} from '@rocket.chat/ui-kit'; +import { UiKitParserBanner } from '@rocket.chat/ui-kit'; import React from 'react'; import { @@ -25,37 +20,23 @@ import { } from '../renderers'; import BannerSurface from './BannerSurface'; -class BannerParser extends UiKitParserBanner { - [TextObjectType.PLAIN_TEXT] = plainText; - - [TextObjectType.MARKDOWN] = mrkdwn; - - [BlockElementType.BUTTON] = button; - - [BlockElementType.DATEPICKER] = datePicker; - - [BlockElementType.IMAGE] = image; - - [BlockElementType.STATIC_SELECT] = staticSelect; - - [BlockElementType.MULTI_STATIC_SELECT] = multiStaticSelect; - - [BlockElementType.OVERFLOW] = overflow; - - [BlockElementType.PLAIN_TEXT_INPUT] = plainInput; - - [BlockElementType.LINEAR_SCALE] = linearScale; - - [LayoutBlockType.ACTIONS] = actions; - - [LayoutBlockType.CONTEXT] = context; - - [LayoutBlockType.DIVIDER] = divider; - - [LayoutBlockType.INPUT] = input; - - [LayoutBlockType.SECTION] = section; -} +class BannerParser extends UiKitParserBanner {} + +BannerParser.prototype.plainText = plainText; +BannerParser.prototype.mrkdwn = mrkdwn; +BannerParser.prototype.divider = divider; +BannerParser.prototype.section = section; +BannerParser.prototype.image = image; +BannerParser.prototype.actions = actions; +BannerParser.prototype.context = context; +BannerParser.prototype.input = input; +BannerParser.prototype.button = button; +BannerParser.prototype.datePicker = datePicker; +BannerParser.prototype.staticSelect = staticSelect; +BannerParser.prototype.multiStaticSelect = multiStaticSelect; +BannerParser.prototype.overflow = overflow; +BannerParser.prototype.plainInput = plainInput; +BannerParser.prototype.linearScale = linearScale; export const bannerParser = new BannerParser(); diff --git a/packages/fuselage-ui-kit/src/surfaces/message.js b/packages/fuselage-ui-kit/src/surfaces/message.js index 53a1fa275e..4caa12e8c8 100644 --- a/packages/fuselage-ui-kit/src/surfaces/message.js +++ b/packages/fuselage-ui-kit/src/surfaces/message.js @@ -1,9 +1,4 @@ -import { - TextObjectType, - UiKitParserMessage, - BlockElementType, - LayoutBlockType, -} from '@rocket.chat/ui-kit'; +import { UiKitParserMessage } from '@rocket.chat/ui-kit'; import React from 'react'; import { @@ -22,31 +17,20 @@ import { } from '../renderers'; import MessageSurface from './MessageSurface'; -class MessageParser extends UiKitParserMessage { - [TextObjectType.PLAIN_TEXT] = plainText; - - [TextObjectType.MARKDOWN] = mrkdwn; - - [BlockElementType.BUTTON] = button; - - [BlockElementType.DATEPICKER] = datePicker; - - [BlockElementType.IMAGE] = image; - - [BlockElementType.STATIC_SELECT] = staticSelect; - - [BlockElementType.MULTI_STATIC_SELECT] = multiStaticSelect; - - [BlockElementType.OVERFLOW] = overflow; - - [LayoutBlockType.ACTIONS] = actions; - - [LayoutBlockType.CONTEXT] = context; - - [LayoutBlockType.DIVIDER] = divider; - - [LayoutBlockType.SECTION] = section; -} +class MessageParser extends UiKitParserMessage {} + +MessageParser.prototype.plainText = plainText; +MessageParser.prototype.mrkdwn = mrkdwn; +MessageParser.prototype.divider = divider; +MessageParser.prototype.section = section; +MessageParser.prototype.image = image; +MessageParser.prototype.actions = actions; +MessageParser.prototype.context = context; +MessageParser.prototype.button = button; +MessageParser.prototype.datePicker = datePicker; +MessageParser.prototype.staticSelect = staticSelect; +MessageParser.prototype.multiStaticSelect = multiStaticSelect; +MessageParser.prototype.overflow = overflow; export const messageParser = new MessageParser(); diff --git a/packages/fuselage-ui-kit/src/surfaces/message.stories.js b/packages/fuselage-ui-kit/src/surfaces/message.stories.js index 7a6a00df55..d5cf10b325 100644 --- a/packages/fuselage-ui-kit/src/surfaces/message.stories.js +++ b/packages/fuselage-ui-kit/src/surfaces/message.stories.js @@ -1,4 +1,5 @@ /* eslint-disable new-cap */ +import { Message, Avatar } from '@rocket.chat/fuselage'; import { action } from '@storybook/addon-actions'; import React from 'react'; @@ -11,16 +12,53 @@ export default { }, decorators: [ (storyFn) => ( - - {storyFn()} - + + + + + + + Haylie George + @haylie.george + Admin + User + Owner + 12:00 PM + + + + {storyFn()} + + + + + + + + + + + ), ], }; diff --git a/packages/fuselage-ui-kit/src/surfaces/modal.js b/packages/fuselage-ui-kit/src/surfaces/modal.js index 5d43dfe0db..c19fb9ad08 100644 --- a/packages/fuselage-ui-kit/src/surfaces/modal.js +++ b/packages/fuselage-ui-kit/src/surfaces/modal.js @@ -1,9 +1,4 @@ -import { - UiKitParserModal, - TextObjectType, - BlockElementType, - LayoutBlockType, -} from '@rocket.chat/ui-kit'; +import { UiKitParserModal } from '@rocket.chat/ui-kit'; import React from 'react'; import { @@ -25,37 +20,23 @@ import { } from '../renderers'; import ModalSurface from './ModalSurface'; -class ModalParser extends UiKitParserModal { - [TextObjectType.PLAIN_TEXT] = plainText; - - [TextObjectType.MARKDOWN] = mrkdwn; - - [BlockElementType.BUTTON] = button; - - [BlockElementType.DATEPICKER] = datePicker; - - [BlockElementType.IMAGE] = image; - - [BlockElementType.STATIC_SELECT] = staticSelect; - - [BlockElementType.MULTI_STATIC_SELECT] = multiStaticSelect; - - [BlockElementType.OVERFLOW] = overflow; - - [BlockElementType.PLAIN_TEXT_INPUT] = plainInput; - - [BlockElementType.LINEAR_SCALE] = linearScale; - - [LayoutBlockType.ACTIONS] = actions; - - [LayoutBlockType.CONTEXT] = context; - - [LayoutBlockType.DIVIDER] = divider; - - [LayoutBlockType.INPUT] = input; - - [LayoutBlockType.SECTION] = section; -} +class ModalParser extends UiKitParserModal {} + +ModalParser.prototype.plainText = plainText; +ModalParser.prototype.mrkdwn = mrkdwn; +ModalParser.prototype.divider = divider; +ModalParser.prototype.section = section; +ModalParser.prototype.image = image; +ModalParser.prototype.actions = actions; +ModalParser.prototype.context = context; +ModalParser.prototype.input = input; +ModalParser.prototype.button = button; +ModalParser.prototype.datePicker = datePicker; +ModalParser.prototype.staticSelect = staticSelect; +ModalParser.prototype.multiStaticSelect = multiStaticSelect; +ModalParser.prototype.overflow = overflow; +ModalParser.prototype.plainInput = plainInput; +ModalParser.prototype.linearScale = linearScale; export const modalParser = new ModalParser(); diff --git a/packages/fuselage-ui-kit/tsconfig.json b/packages/fuselage-ui-kit/tsconfig.json new file mode 100644 index 0000000000..af607e13ee --- /dev/null +++ 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/src/index.ts b/packages/ui-kit/src/index.ts index d288eb8cbc..a32e29ec88 100644 --- a/packages/ui-kit/src/index.ts +++ b/packages/ui-kit/src/index.ts @@ -6,6 +6,8 @@ export { PlainText } from './blocks/text/PlainText'; export { Markdown } from './blocks/text/Markdown'; export { TextObject } from './blocks/TextObject'; +export { Conditions } from './rendering/Conditions'; + export { ButtonElement } from './blocks/elements/ButtonElement'; export { ChannelsSelectElement } from './blocks/elements/ChannelsSelectElement'; export { ConversationsSelectElement } from './blocks/elements/ConversationsSelectElement'; diff --git a/packages/ui-kit/src/rendering/BaseSurfaceRenderer.ts b/packages/ui-kit/src/rendering/BaseSurfaceRenderer.ts index 2ac409642f..890c84cc44 100644 --- a/packages/ui-kit/src/rendering/BaseSurfaceRenderer.ts +++ b/packages/ui-kit/src/rendering/BaseSurfaceRenderer.ts @@ -179,7 +179,7 @@ export abstract class BaseSurfaceRenderer< } /** @deprecated */ - public mrkdwn( + public [TextObjectType.MARKDOWN]( _element: Markdown, _context: BlockContext, _index: number diff --git a/yarn.lock b/yarn.lock index f1e7bb214c..58960ab550 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4231,12 +4231,12 @@ __metadata: "@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 @@ -4810,7 +4810,7 @@ __metadata: languageName: node linkType: hard -"@storybook/addon-essentials@npm:^6.2.9": +"@storybook/addon-essentials@npm:^6.1.11, @storybook/addon-essentials@npm:^6.2.9": version: 6.2.9 resolution: "@storybook/addon-essentials@npm:6.2.9" dependencies: @@ -4948,7 +4948,7 @@ __metadata: languageName: node linkType: hard -"@storybook/addons@npm:6.2.9, @storybook/addons@npm:^6.2.9": +"@storybook/addons@npm:6.2.9, @storybook/addons@npm:^6.1.11, @storybook/addons@npm:^6.2.9": version: 6.2.9 resolution: "@storybook/addons@npm:6.2.9" dependencies: @@ -5083,7 +5083,7 @@ __metadata: languageName: node linkType: hard -"@storybook/builder-webpack5@npm:^6.2.9": +"@storybook/builder-webpack5@npm:^6.1.11, @storybook/builder-webpack5@npm:^6.2.9": version: 6.2.9 resolution: "@storybook/builder-webpack5@npm:6.2.9" dependencies: @@ -5479,7 +5479,7 @@ __metadata: languageName: node linkType: hard -"@storybook/react@npm:^6.2.9": +"@storybook/react@npm:^6.1.11, @storybook/react@npm:^6.2.9": version: 6.2.9 resolution: "@storybook/react@npm:6.2.9" dependencies: @@ -5556,7 +5556,7 @@ __metadata: languageName: node linkType: hard -"@storybook/source-loader@npm:6.2.9, @storybook/source-loader@npm:^6.2.9": +"@storybook/source-loader@npm:6.2.9, @storybook/source-loader@npm:^6.1.11, @storybook/source-loader@npm:^6.2.9": version: 6.2.9 resolution: "@storybook/source-loader@npm:6.2.9" dependencies: @@ -5577,7 +5577,7 @@ __metadata: languageName: node linkType: hard -"@storybook/theming@npm:6.2.9, @storybook/theming@npm:^6.2.9": +"@storybook/theming@npm:6.2.9, @storybook/theming@npm:^6.1.11, @storybook/theming@npm:^6.2.9": version: 6.2.9 resolution: "@storybook/theming@npm:6.2.9" dependencies: