From 630e622d8535fcaa06a8a736c6e0d273b450b739 Mon Sep 17 00:00:00 2001 From: Guilherme Gazzo Date: Wed, 5 Feb 2020 13:29:26 -0300 Subject: [PATCH 1/4] fix: Select/MultiSelect focus submitting form (#134) --- packages/fuselage-ui-kit/src/index.js | 2 +- packages/fuselage/src/components/Select/Select.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/fuselage-ui-kit/src/index.js b/packages/fuselage-ui-kit/src/index.js index 39e651e44b..69f4d32a52 100644 --- a/packages/fuselage-ui-kit/src/index.js +++ b/packages/fuselage-ui-kit/src/index.js @@ -35,7 +35,7 @@ export const defaultContext = { action: (...args) => console.log(JSON.stringify(args)), state: console.log, appId: '123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz', - errors: {} + errors: {}, }; export const kitContext = React.createContext(defaultContext); diff --git a/packages/fuselage/src/components/Select/Select.js b/packages/fuselage/src/components/Select/Select.js index 62c3b1410d..72e183bc30 100644 --- a/packages/fuselage/src/components/Select/Select.js +++ b/packages/fuselage/src/components/Select/Select.js @@ -11,7 +11,7 @@ export const Addon = Box.extend('rcx-select__addon', 'div'); const Wrapper = Box.extend('rcx-select__wrapper', 'div'); // ({ children, ...props }) => {c})} {...props} />; -export const Focus = React.forwardRef((props, ref) => ); +export const Focus = React.forwardRef((props, ref) => ); export const Select = ({ value, From e31537c44395cc63e412cf35f512e20e66a5ee75 Mon Sep 17 00:00:00 2001 From: Guilherme Gazzo Date: Wed, 5 Feb 2020 13:30:03 -0300 Subject: [PATCH 2/4] v0.2.0-alpha.21 --- CHANGELOG.md | 8 ++++++++ lerna.json | 2 +- packages/fuselage-hooks/CHANGELOG.md | 8 ++++++++ packages/fuselage-hooks/package.json | 2 +- packages/fuselage-tokens/CHANGELOG.md | 8 ++++++++ packages/fuselage-tokens/package.json | 2 +- packages/fuselage-ui-kit/CHANGELOG.md | 8 ++++++++ packages/fuselage-ui-kit/package-lock.json | 2 +- packages/fuselage-ui-kit/package.json | 6 +++--- packages/fuselage/CHANGELOG.md | 8 ++++++++ packages/fuselage/package.json | 8 ++++---- packages/icons/CHANGELOG.md | 8 ++++++++ packages/icons/package.json | 2 +- packages/ui-kit/CHANGELOG.md | 8 ++++++++ packages/ui-kit/package.json | 2 +- 15 files changed, 69 insertions(+), 13 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 77b6cc4857..3943e39322 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.2.0-alpha.21](https://github.com/RocketChat/Rocket.Chat.Fuselage/compare/v0.2.0-alpha.20...v0.2.0-alpha.21) (2020-02-05) + +**Note:** Version bump only for package Rocket.Chat.Fuselage + + + + + # [0.2.0-alpha.20](https://github.com/RocketChat/Rocket.Chat.Fuselage/compare/v0.2.0-alpha.19...v0.2.0-alpha.20) (2020-02-01) diff --git a/lerna.json b/lerna.json index c9b0ffef47..5d2478cde0 100644 --- a/lerna.json +++ b/lerna.json @@ -1,5 +1,5 @@ { - "version": "0.2.0-alpha.20", + "version": "0.2.0-alpha.21", "npmClient": "yarn", "useWorkspaces": true, "packages": [ diff --git a/packages/fuselage-hooks/CHANGELOG.md b/packages/fuselage-hooks/CHANGELOG.md index 7e43268c30..5ea04e6282 100644 --- a/packages/fuselage-hooks/CHANGELOG.md +++ b/packages/fuselage-hooks/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.2.0-alpha.21](https://github.com/RocketChat/Rocket.Chat.Fuselage/compare/v0.2.0-alpha.20...v0.2.0-alpha.21) (2020-02-05) + +**Note:** Version bump only for package @rocket.chat/fuselage-hooks + + + + + # [0.2.0-alpha.20](https://github.com/RocketChat/Rocket.Chat.Fuselage/compare/v0.2.0-alpha.19...v0.2.0-alpha.20) (2020-02-01) **Note:** Version bump only for package @rocket.chat/fuselage-hooks diff --git a/packages/fuselage-hooks/package.json b/packages/fuselage-hooks/package.json index 284775a1cc..9981d17ba5 100644 --- a/packages/fuselage-hooks/package.json +++ b/packages/fuselage-hooks/package.json @@ -1,6 +1,6 @@ { "name": "@rocket.chat/fuselage-hooks", - "version": "0.2.0-alpha.20", + "version": "0.2.0-alpha.21", "description": "React Hooks for Fuselage, Rocket.Chat's design system", "homepage": "https://rocket.chat/Rocket.Chat.Fuselage", "author": { diff --git a/packages/fuselage-tokens/CHANGELOG.md b/packages/fuselage-tokens/CHANGELOG.md index caab5b8e72..68125ffddb 100644 --- a/packages/fuselage-tokens/CHANGELOG.md +++ b/packages/fuselage-tokens/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.2.0-alpha.21](https://github.com/RocketChat/Rocket.Chat.Fuselage/compare/v0.2.0-alpha.20...v0.2.0-alpha.21) (2020-02-05) + +**Note:** Version bump only for package @rocket.chat/fuselage-tokens + + + + + # [0.2.0-alpha.20](https://github.com/RocketChat/Rocket.Chat.Fuselage/compare/v0.2.0-alpha.19...v0.2.0-alpha.20) (2020-02-01) **Note:** Version bump only for package @rocket.chat/fuselage-tokens diff --git a/packages/fuselage-tokens/package.json b/packages/fuselage-tokens/package.json index 3fb41e00ce..c414baadbc 100644 --- a/packages/fuselage-tokens/package.json +++ b/packages/fuselage-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@rocket.chat/fuselage-tokens", - "version": "0.2.0-alpha.20", + "version": "0.2.0-alpha.21", "description": "Design tokens for Fuselage, Rocket.Chat's design system", "homepage": "https://rocket.chat/Rocket.Chat.Fuselage", "author": { diff --git a/packages/fuselage-ui-kit/CHANGELOG.md b/packages/fuselage-ui-kit/CHANGELOG.md index 564fbde4f9..639e98aec4 100644 --- a/packages/fuselage-ui-kit/CHANGELOG.md +++ b/packages/fuselage-ui-kit/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.2.0-alpha.21](https://github.com/RocketChat/Rocket.Chat.Fuselage/compare/v0.2.0-alpha.20...v0.2.0-alpha.21) (2020-02-05) + +**Note:** Version bump only for package @rocket.chat/fuselage-ui-kit + + + + + # [0.2.0-alpha.20](https://github.com/RocketChat/Rocket.Chat.Fuselage/compare/v0.2.0-alpha.19...v0.2.0-alpha.20) (2020-02-01) diff --git a/packages/fuselage-ui-kit/package-lock.json b/packages/fuselage-ui-kit/package-lock.json index 786e7e8f2f..7ac6264aef 100644 --- a/packages/fuselage-ui-kit/package-lock.json +++ b/packages/fuselage-ui-kit/package-lock.json @@ -1,6 +1,6 @@ { "name": "@rocket.chat/fuselage-ui-kit", - "version": "0.2.0-alpha.20", + "version": "0.2.0-alpha.21", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/packages/fuselage-ui-kit/package.json b/packages/fuselage-ui-kit/package.json index 01424e2f91..3699e56519 100644 --- a/packages/fuselage-ui-kit/package.json +++ b/packages/fuselage-ui-kit/package.json @@ -1,6 +1,6 @@ { "name": "@rocket.chat/fuselage-ui-kit", - "version": "0.2.0-alpha.20", + "version": "0.2.0-alpha.21", "description": "Package ui kit ", "author": "Guilherme Gazzo ", "homepage": "https://github.com/RocketChat/Rocket.Chat.Fuselage#readme", @@ -35,7 +35,7 @@ "url": "https://github.com/RocketChat/Rocket.Chat.Fuselage/issues" }, "dependencies": { - "@rocket.chat/ui-kit": "^0.2.0-alpha.20" + "@rocket.chat/ui-kit": "^0.2.0-alpha.21" }, "peerDependencies": { "@rocket.chat/fuselage": "^0.2.0-alpha.16" @@ -45,7 +45,7 @@ "@babel/plugin-transform-runtime": "^7.5.0", "@babel/preset-env": "^7.4.5", "@babel/preset-react": "^7.7.4", - "@rocket.chat/fuselage": "^0.2.0-alpha.20", + "@rocket.chat/fuselage": "^0.2.0-alpha.21", "@storybook/addon-actions": "5.2.4", "@storybook/addon-backgrounds": "5.2.4", "@storybook/addon-centered": "5.2.4", diff --git a/packages/fuselage/CHANGELOG.md b/packages/fuselage/CHANGELOG.md index bdb663fdc6..13fc27337f 100644 --- a/packages/fuselage/CHANGELOG.md +++ b/packages/fuselage/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.2.0-alpha.21](https://github.com/RocketChat/Rocket.Chat.Fuselage/compare/v0.2.0-alpha.20...v0.2.0-alpha.21) (2020-02-05) + +**Note:** Version bump only for package @rocket.chat/fuselage + + + + + # [0.2.0-alpha.20](https://github.com/RocketChat/Rocket.Chat.Fuselage/compare/v0.2.0-alpha.19...v0.2.0-alpha.20) (2020-02-01) diff --git a/packages/fuselage/package.json b/packages/fuselage/package.json index e50e0c0469..cc001355a8 100644 --- a/packages/fuselage/package.json +++ b/packages/fuselage/package.json @@ -1,6 +1,6 @@ { "name": "@rocket.chat/fuselage", - "version": "0.2.0-alpha.20", + "version": "0.2.0-alpha.21", "author": { "name": "Rocket.Chat", "url": "https://rocket.chat/" @@ -47,7 +47,7 @@ "@babel/preset-env": "^7.7.6", "@babel/preset-react": "^7.7.4", "@rocket.chat/eslint-config": "^0.4.0", - "@rocket.chat/fuselage-hooks": "^0.2.0-alpha.20", + "@rocket.chat/fuselage-hooks": "^0.2.0-alpha.21", "@storybook/addon-actions": "5.2.8", "@storybook/addon-backgrounds": "5.2.8", "@storybook/addon-centered": "5.2.8", @@ -119,8 +119,8 @@ } }, "dependencies": { - "@rocket.chat/fuselage-tokens": "^0.2.0-alpha.20", - "@rocket.chat/icons": "^0.2.0-alpha.20" + "@rocket.chat/fuselage-tokens": "^0.2.0-alpha.21", + "@rocket.chat/icons": "^0.2.0-alpha.21" }, "browserslist": { "production": [ diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md index 539814d1a5..edc52f752e 100644 --- a/packages/icons/CHANGELOG.md +++ b/packages/icons/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.2.0-alpha.21](https://github.com/RocketChat/Rocket.Chat.Fuselage/compare/v0.2.0-alpha.20...v0.2.0-alpha.21) (2020-02-05) + +**Note:** Version bump only for package @rocket.chat/icons + + + + + # [0.2.0-alpha.20](https://github.com/RocketChat/Rocket.Chat.Fuselage/compare/v0.2.0-alpha.19...v0.2.0-alpha.20) (2020-02-01) **Note:** Version bump only for package @rocket.chat/icons diff --git a/packages/icons/package.json b/packages/icons/package.json index 3177f6f241..e146d1af6e 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,6 +1,6 @@ { "name": "@rocket.chat/icons", - "version": "0.2.0-alpha.20", + "version": "0.2.0-alpha.21", "author": { "name": "Rocket.Chat", "url": "https://rocket.chat/" diff --git a/packages/ui-kit/CHANGELOG.md b/packages/ui-kit/CHANGELOG.md index aa974b86cb..695d861b7a 100644 --- a/packages/ui-kit/CHANGELOG.md +++ b/packages/ui-kit/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.2.0-alpha.21](https://github.com/RocketChat/Rocket.Chat.Fuselage/compare/v0.2.0-alpha.20...v0.2.0-alpha.21) (2020-02-05) + +**Note:** Version bump only for package @rocket.chat/ui-kit + + + + + # [0.2.0-alpha.20](https://github.com/RocketChat/Rocket.Chat.Fuselage/compare/v0.2.0-alpha.19...v0.2.0-alpha.20) (2020-02-01) **Note:** Version bump only for package @rocket.chat/ui-kit diff --git a/packages/ui-kit/package.json b/packages/ui-kit/package.json index 9c73c81378..0583e1ed4c 100644 --- a/packages/ui-kit/package.json +++ b/packages/ui-kit/package.json @@ -1,6 +1,6 @@ { "name": "@rocket.chat/ui-kit", - "version": "0.2.0-alpha.20", + "version": "0.2.0-alpha.21", "description": "Package Fuselage ui kit ", "author": "Guilherme Gazzo ", "homepage": "https://github.com/RocketChat/Rocket.Chat.Fuselage#readme", From 52fcedb0efbc33ad4240c83fd92a325fcc9f0f4c Mon Sep 17 00:00:00 2001 From: Guilherme Gazzo Date: Thu, 6 Feb 2020 15:11:41 -0300 Subject: [PATCH 3/4] fix: uikit using react components (#135) --- packages/fuselage-ui-kit/src/Button.js | 22 +++ packages/fuselage-ui-kit/src/Input.js | 49 +++++-- packages/fuselage-ui-kit/src/MultiSelect.js | 22 +++ packages/fuselage-ui-kit/src/Overflow.js | 10 +- packages/fuselage-ui-kit/src/StaticSelect.js | 31 +++-- .../src/UIKitModal.stories.mdx | 69 ++++++++++ packages/fuselage-ui-kit/src/hooks.js | 45 ++++++ packages/fuselage-ui-kit/src/index.js | 129 +++--------------- packages/ui-kit/src/index.ts | 10 +- 9 files changed, 249 insertions(+), 138 deletions(-) create mode 100644 packages/fuselage-ui-kit/src/Button.js create mode 100644 packages/fuselage-ui-kit/src/MultiSelect.js create mode 100644 packages/fuselage-ui-kit/src/hooks.js diff --git a/packages/fuselage-ui-kit/src/Button.js b/packages/fuselage-ui-kit/src/Button.js new file mode 100644 index 0000000000..177082997f --- /dev/null +++ b/packages/fuselage-ui-kit/src/Button.js @@ -0,0 +1,22 @@ +import React from 'react'; +import { + Button, +} from '@rocket.chat/fuselage'; + +import { useBlockContext, getStyle } from './hooks'; + +export const UIKitButton = ({ element, context, parser }) => { + const [{ loading }, action] = useBlockContext(element, context); + return ( + diff --git a/packages/fuselage-ui-kit/src/StaticSelect.js b/packages/fuselage-ui-kit/src/StaticSelect.js index 7558efa3db..1e838c9887 100644 --- a/packages/fuselage-ui-kit/src/StaticSelect.js +++ b/packages/fuselage-ui-kit/src/StaticSelect.js @@ -4,25 +4,38 @@ import { MultiSelect, } from '@rocket.chat/fuselage'; +import { useBlockContext } from './hooks'; + export const StaticSelect = ({ options, onChange, parser, placeholder = { text: 'select a option' }, -}) => ( - [option.value, parser.text(option.text)])} - onChange={(value) => onChange({ target: { value } })} - placeholder={parser.text(placeholder)} />); + onChange={(value) => action({ target: { value } })} + placeholder={parser.text(placeholder)} />; +}; export const MultiStaticSelect = ({ + context, options, - onChange, parser, placeholder = { text: 'select a option' }, -}) => ( - { + const [{ loading, value }, action] = useBlockContext(element, context); + return [option.value, parser.text(option.text)])} - onChange={(value) => onChange({ target: { value } })} - placeholder={parser.text(placeholder)} />); + onChange={(value) => action({ target: { value } })} + placeholder={parser.text(placeholder)} />; +}; diff --git a/packages/fuselage-ui-kit/src/UIKitModal.stories.mdx b/packages/fuselage-ui-kit/src/UIKitModal.stories.mdx index 28ca137653..c105442124 100644 --- a/packages/fuselage-ui-kit/src/UIKitModal.stories.mdx +++ b/packages/fuselage-ui-kit/src/UIKitModal.stories.mdx @@ -21,6 +21,10 @@ import { withKnobs, text, boolean, number } from "@storybook/addon-knobs"; "element": { "type": "plain_text_input", "actionId": "input-test", + "placeholder": { + "text": "plain_text_input", + text: text('placeholder', 'asdas') + } }, "label": { "type": "plain_text", @@ -102,6 +106,59 @@ import { withKnobs, text, boolean, number } from "@storybook/addon-knobs"; + + + + {UiKitModal([ + { + "type": "actions", + "elements": [ + { + "type": "button", + "text": { + "type": "plain_text", + "emoji": true, + "text": "Approve" + }, + "confirm": { + "title": { + "type": "plain_text", + "text": "Are you sure?" + }, + "text": { + "type": "mrkdwn", + "text": "Wouldn't you prefer a good game of _chess_?" + }, + "confirm": { + "type": "plain_text", + "text": "Do it" + }, + "deny": { + "type": "plain_text", + "text": "Stop, I've changed my mind!" + } + }, + "style": "primary", + "value": "click_me_123" + }, + { + "type": "button", + "text": { + "type": "plain_text", + "emoji": true, + "text": "Deny" + }, + "style": "danger", + "value": "click_me_123" + } + ] + } + ])} + + + + + @@ -152,4 +209,16 @@ import { withKnobs, text, boolean, number } from "@storybook/addon-knobs"; + + + + + + + + {UiKitModal(JSON.parse(text('json', '[]')))} + + + + diff --git a/packages/fuselage-ui-kit/src/hooks.js b/packages/fuselage-ui-kit/src/hooks.js new file mode 100644 index 0000000000..3a2ec2ca59 --- /dev/null +++ b/packages/fuselage-ui-kit/src/hooks.js @@ -0,0 +1,45 @@ +import React, { useContext, useState } from 'react'; +import { + BLOCK_CONTEXT, +} from '@rocket.chat/ui-kit'; + +export const defaultContext = { + action: (...args) => console.log(JSON.stringify(args)), + state: console.log, + appId: '123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz', + errors: {}, +}; + +export const kitContext = React.createContext(defaultContext); + +export const useBlockContext = ({ blockId, actionId, appId, initialValue }, context) => { + const [value, setValue] = useState(initialValue); + const [loading, setLoading] = useState(false); + const { action, appId: appIdFromContext, viewId, state, errors } = useContext(kitContext); + const error = errors && actionId && errors[actionId]; + + if ([BLOCK_CONTEXT.SECTION, BLOCK_CONTEXT.ACTION].includes(context)) { + return [{ loading, setLoading, error }, async ({ target: { value } }) => { + setLoading(true); + await action({ blockId, appId: appId || appIdFromContext, actionId, value, viewId }); + setLoading(false); + }]; + } + + return [{ loading, setLoading, value, error }, async ({ target: { value } }) => { + setValue(value); + setLoading(true); + await state({ blockId, appId, actionId, value }); + setLoading(false); + }]; +}; + +export const getStyle = (style) => { + switch (style) { + case 'primary': + case 'danger': + return { + [style]: true, + }; + } +}; diff --git a/packages/fuselage-ui-kit/src/index.js b/packages/fuselage-ui-kit/src/index.js index 69f4d32a52..631e359a22 100644 --- a/packages/fuselage-ui-kit/src/index.js +++ b/packages/fuselage-ui-kit/src/index.js @@ -1,12 +1,8 @@ -import React, { useContext, useState } from 'react'; +import React from 'react'; import { Divider, - Button, - SelectInput, Flex, Margins, - TextAreaInput, - TextInput, InputBox, Box, } from '@rocket.chat/fuselage'; @@ -25,53 +21,15 @@ import { import { Section as SectionLayoutBlock } from './Section'; import { Actions as ActionsLayoutBlock } from './Actions'; -import { Input as InputLayoutBlock } from './Input'; +import { Input as InputLayoutBlock, PlainInput } from './Input'; import { MessageImage, ModalImage } from './Image'; import { StaticSelect, MultiStaticSelect } from './StaticSelect'; import { Block } from './Block'; import { Overflow } from './Overflow'; +import { UIKitButton } from './Button'; +import { useBlockContext } from './hooks'; -export const defaultContext = { - action: (...args) => console.log(JSON.stringify(args)), - state: console.log, - appId: '123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz', - errors: {}, -}; - -export const kitContext = React.createContext(defaultContext); - -export const useBlockContext = ({ blockId, actionId, appId, initialValue }, context) => { - const [value, setValue] = useState(initialValue); - const [loading, setLoading] = useState(false); - const { action, appId: appIdFromContext, state, errors } = useContext(kitContext); - const error = errors && actionId && errors[actionId]; - - if ([BLOCK_CONTEXT.SECTION, BLOCK_CONTEXT.ACTION].includes(context)) { - return [{ loading, setLoading, error }, async ({ target: { value } }) => { - setLoading(true); - await action({ blockId, appId: appId || appIdFromContext, actionId, value }); - setLoading(false); - }]; - } - - return [{ loading, setLoading, value, error }, async ({ target: { value } }) => { - setValue(value); - setLoading(true); - await state({ blockId, appId, actionId, value }); - setLoading(false); - }]; -}; - -const getStyle = (style) => { - switch (style) { - case 'primary': - case 'danger': - return { - [style]: true, - }; - } -}; - +export * from './hooks'; function mrkdwn({ text/* , type = 'plain_text'*/ } = { text: '' }) { return text; @@ -95,20 +53,7 @@ class TextParser extends UiKitParserText { class ButtonsParser extends UiKitParserButtons { button(element, context, key) { - const [{ loading }, action] = useBlockContext(element, context); - return ( -