Merge branch 'develop' of github.com:RocketChat/Rocket.Chat.Fuselage …

…into feat/buttons * 'develop' of github.com:RocketChat/Rocket.Chat.Fuselage: Replace eval-based source maps (#136) fix: uikit using react components (#135) v0.2.0-alpha.21 fix: Select/MultiSelect focus submitting form (#134)
RocketChat · Feb 7, 2020 · ecbaefc · ecbaefc
2 parents f606d27 + 7a32d58
commit ecbaefc
Show file tree

Hide file tree

Showing 28 changed files with 322 additions and 158 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
diff --git 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 <guilhermegazzo@gmail.com>",
   "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-ui-kit/src/Button.js 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 (
+    <Button
+      mod-mod-loading={loading}
+      {...getStyle(element.style)}
+      small
+      data-group={element.groupId}
+      key={element.actionId}
+      children={parser.plainText(element.text)}
+      onClick={action}
+      value={element.value}
+    />
+  );
+};
diff --git a/packages/fuselage-ui-kit/src/Input.js b/packages/fuselage-ui-kit/src/Input.js
@@ -2,22 +2,47 @@ import React from 'react';
 import {
   Field,
   FieldGroup,
+  TextAreaInput,
+  TextInput,
 } from '@rocket.chat/fuselage';
 import {
   BLOCK_CONTEXT,
 } from '@rocket.chat/ui-kit';
 
 import { Block } from './Block';
+import { useBlockContext } from './hooks';
 
-export const Input = ({ label, element, parser, index, error, hint }) => (
-  <Block>
-    <FieldGroup>
-      <Field>
-        {label && <Field.Label>{label}</Field.Label>}
-        {parser.renderInputs(element, BLOCK_CONTEXT.FORM, parser, index)}
-        {error && <Field.Error>{error}</Field.Error>}
-        {hint && <Field.Hint>{hint}</Field.Hint>}
-      </Field>
-    </FieldGroup>
-  </Block>
-);
+export const Input = ({ label, element, parser, index, hint, context }) => {
+  const [{ error }] = useBlockContext(element, context);
+  return (
+    <Block>
+      <FieldGroup>
+        <Field>
+          {label && <Field.Label>{label}</Field.Label>}
+          {parser.renderInputs(element, BLOCK_CONTEXT.FORM, parser, index)}
+          {error && <Field.Error>{error}</Field.Error>}
+          {hint && <Field.Hint>{hint}</Field.Hint>}
+        </Field>
+      </FieldGroup>
+    </Block>
+  );
+};
+
+export const PlainInput = ({ element, context, index, parser }) => {
+  const [{ loading, value, error }, action] = useBlockContext(element, context);
+  const { multiline, actionId, placeholder } = element;
+  const Component = multiline ? TextAreaInput : TextInput;
+  return (
+    <Component
+      key={index}
+      mod-loading={loading}
+      id={actionId}
+      name={actionId}
+      rows={6}
+      error={error}
+      value={value}
+      onInput={action}
+      placeholder={parser.plainText(placeholder)}
+    />
+  );
+};
diff --git a/packages/fuselage-ui-kit/src/MultiSelect.js b/packages/fuselage-ui-kit/src/MultiSelect.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import {
+  Button,
+} from '@rocket.chat/fuselage';
+
+import { useBlockContext, getStyle } from './hooks';
+
+export const UIKitMultiSelect = ({ element, context, parser }) => {
+  const [{ loading }, action] = useBlockContext(element, context);
+  return (
+    <Button
+      mod-mod-loading={loading}
+      {...getStyle(element.style)}
+      small
+      data-group={element.groupId}
+      key={element.actionId}
+      children={parser.plainText(element.text)}
+      onClick={action}
+      value={element.value}
+    />
+  );
+};
diff --git a/packages/fuselage-ui-kit/src/Overflow.js b/packages/fuselage-ui-kit/src/Overflow.js
@@ -8,9 +8,14 @@ import {
   useCursor,
 } from '@rocket.chat/fuselage';
 
+import { useBlockContext } from './hooks';
+
 const convertOptions = (options, parser) => options.map(({ text, value }) => [value, parser(text)]);
-export const Overflow = ({ options, parser, onChange = console.log }) => {
-  const handleSelection = ([value]) => onChange({ target: { value } });
+
+export const Overflow = ({ context, options, parser, element }) => {
+  const [{ loading }, action] = useBlockContext(element, context);
+
+  const handleSelection = ([value]) => action({ target: { value } });
   const convertedOptions = convertOptions(options, parser.text);
   const [cursor, handleKeyDown, handleKeyUp, , [visible, hide, show]] = useCursor(-1, convertedOptions, (args, [, hide]) => {
     handleSelection(args);
@@ -26,6 +31,7 @@ export const Overflow = ({ options, parser, onChange = console.log }) => {
         onBlur={hide}
         onKeyUp={handleKeyUp}
         onKeyDown={handleKeyDown}
+        mod-loading={loading}
       >
         <Icon name='menu' size={20} />
       </Button>

diff --git 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' },
-}) => (
-  <Select
+  context,
+  ...element
+}) => {
+  const [{ loading, value }, action] = useBlockContext(element, context);
+  return <Select
+    value={value}
+    mod-loading={loading}
     options={options.map((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' },
-}) => (
-  <MultiSelect
+  ...element
+}) => {
+  const [{ loading, value }, action] = useBlockContext(element, context);
+  return <MultiSelect
+    value={value}
+    mod-loading={loading}
     options={options.map((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)} />;
+};
diff --git 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";
   </Story>
 </Preview>
 
+<Preview>
+  <Story name='confirm button'>
+    <Demo visible={boolean('visible', true) ? 1 : 0}>
+    {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"
+				}
+			]
+		}
+	])}
+  </Demo>
+  </Story>
+</Preview>
+
+
 <Preview>
   <Story name='Poll'>
     <Demo visible={boolean('visible', true) ? 1 : 0}>
@@ -152,4 +209,16 @@ import { withKnobs, text, boolean, number } from "@storybook/addon-knobs";
   </Story>
 </Preview>
 
+
+
+
+
+<Preview>
+  <Story name='live button'>
+    <Demo visible={boolean('visible', true) ? 1 : 0}>
+    {UiKitModal(JSON.parse(text('json', '[]')))}
+  </Demo>
+  </Story>
+</Preview>
+
 <Props of={UiKitModal}/>