Merge branch 'new/image-manipulation' of github.com:RocketChat/Rocket…

….Chat.Fuselage into new/image-manipulation

* 'new/image-manipulation' of github.com:RocketChat/Rocket.Chat.Fuselage:
  Update tsconfig.json
  chore: Update icon building readme (#472)
  fix: Menu component and options.label prop type (#476)
  fix: endReached prop in _Options of PaginatedSelectFiltered Component (#475)
  fix: Export MultiSelect component in .d.ts file (#473)
  feat(ui-kit): Attachment Surface (#474)
  fix(fuselage): Fuselage production build (#477)
  feat: onboarding-ui package (#463)
  fix(eslint): Add missing ESLint rule for TypeScript (#470)
  fix(string-helpers):  typesVersions (#469)

.github/workflows/cd.yml

@@ -37,6 +37,7 @@ jobs:
           path: |
             packages/fuselage/storybook-static
             packages/fuselage-ui-kit/storybook-static
+            packages/onboarding-ui/storybook-static
       - if: github.ref == 'refs/heads/master'
         uses: actions/upload-artifact@v2
         with:
@@ -111,9 +112,10 @@ jobs:
           name: docs
           path: .
       - run: |
-          rm -rf "fuselage/${{ needs.build-and-test.outputs.branch-name }}" "fuselage-ui-kit/${{ needs.build-and-test.outputs.branch-name }}"
+          rm -rf "fuselage/${{ needs.build-and-test.outputs.branch-name }}" "fuselage-ui-kit/${{ needs.build-and-test.outputs.branch-name }}" "onboarding-ui/${{ needs.build-and-test.outputs.branch-name }}"
           mv -v "packages/fuselage/storybook-static" "fuselage/${{ needs.build-and-test.outputs.branch-name }}"
           mv -v "packages/fuselage-ui-kit/storybook-static" "fuselage-ui-kit/${{ needs.build-and-test.outputs.branch-name }}"
+          mv -v "packages/onboarding-ui/storybook-static" "onboarding-ui/${{ needs.build-and-test.outputs.branch-name }}"
           rm -rf packages
       - uses: crazy-max/ghaction-github-pages@v2
         with:

.github/workflows/ci-pr-closed.yml

@@ -13,7 +13,7 @@ jobs:
       - uses: actions/checkout@v2
         with:
           ref: gh-pages
-      - run: rm -rf "fuselage/${{ github.event.number }}" "fuselage-ui-kit/${{ github.event.number }}"
+      - run: rm -rf "fuselage/${{ github.event.number }}" "fuselage-ui-kit/${{ github.event.number }}" "onboarding-ui/${{ github.event.number }}"
       - uses: crazy-max/ghaction-github-pages@v2
         with:
           target_branch: gh-pages

.github/workflows/ci-pr-opened.yml

@@ -43,6 +43,7 @@ jobs:
           path: |
             fuselage/storybook-static
             fuselage-ui-kit/storybook-static
+            onboarding-ui/storybook-static
 
   publish-to-gh-pages:
     name: Publish to GitHub Pages
@@ -61,9 +62,10 @@ jobs:
           name: storybooks
           path: packages
       - run: |
-          rm -rf "fuselage/${{ needs.download-artifact.outputs.pr-number }}" "fuselage-ui-kit/${{ needs.download-artifact.outputs.pr-number }}"
+          rm -rf "fuselage/${{ needs.download-artifact.outputs.pr-number }}" "fuselage-ui-kit/${{ needs.download-artifact.outputs.pr-number }}" "onboarding-ui/${{ needs.download-artifact.outputs.pr-number }}"
           mv -v packages/fuselage/storybook-static "fuselage/${{ needs.download-artifact.outputs.pr-number }}"
           mv -v packages/fuselage-ui-kit/storybook-static "fuselage-ui-kit/${{ needs.download-artifact.outputs.pr-number }}"
+          mv -v packages/onboarding-ui/storybook-static "onboarding-ui/${{ needs.download-artifact.outputs.pr-number }}"
           rm -rf packages
       - uses: crazy-max/ghaction-github-pages@v2
         with:

.github/workflows/ci-pr.yml

@@ -35,6 +35,7 @@ jobs:
           path: |
             packages/fuselage/storybook-static
             packages/fuselage-ui-kit/storybook-static
+            packages/onboarding-ui/storybook-static
 
   test-with-loki:
     name: Test with Loki
@@ -63,11 +64,16 @@ jobs:
       - run: |
           cat packages/fuselage/package.json | sed s/\.docker/.app/ > packages/fuselage/package.json-new
           cat packages/fuselage-ui-kit/package.json | sed s/\.docker/.app/ > packages/fuselage-ui-kit/package.json-new
+          cat packages/onboarding-ui/package.json | sed s/\.docker/.app/ > packages/onboarding-ui/package.json-new
           mv packages/fuselage/package.json-new packages/fuselage/package.json
           mv packages/fuselage-ui-kit/package.json-new packages/fuselage-ui-kit/package.json
+          mv packages/onboarding-ui/package.json-new packages/onboarding-ui/package.json
       - uses: ./.github/actions/loki/test
         with:
           working_dir: ./packages/fuselage
       - uses: ./.github/actions/loki/test
         with:
           working_dir: ./packages/fuselage-ui-kit
+      - uses: ./.github/actions/loki/test
+        with:
+          working_dir: ./packages/onboarding-ui

.vscode/settings.json

@@ -40,6 +40,10 @@
       "directory": "packages/mp3-encoder",
       "changeProcessCWD": true
     },
+    {
+      "directory": "packages/onboarding-ui",
+      "changeProcessCWD": true
+    },
     {
       "directory": "packages/peggy-loader",
       "changeProcessCWD": true

README.md

@@ -26,6 +26,7 @@
 | 📦 [`@rocket.chat/fuselage-ui-kit`](/packages/@rocket.chat/fuselage-ui-kit)       | UiKit elements for Rocket.Chat Apps built under Fuselage design system | ![npm](https://img.shields.io/npm/v/@rocket.chat/fuselage-ui-kit?style=flat-square)    | ![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Ffuselage-ui-kit&style=flat-square)    |
 | 📦 [`@rocket.chat/icons`](/packages/@rocket.chat/icons)                           |                                                                        | ![npm](https://img.shields.io/npm/v/@rocket.chat/icons?style=flat-square)              | ![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Ficons&style=flat-square)              |
 | 📦 [`@rocket.chat/image-manipulation`](/packages/@rocket.chat/image-manipulation) | Image transform functions                                              | ![npm](https://img.shields.io/npm/v/@rocket.chat/image-manipulation?style=flat-square) | ![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Fimage-manipulation&style=flat-square) |
+| 📦 [`@rocket.chat/image-manipulation`](/packages/@rocket.chat/image-manipulation) | Image transform functions                                              | ![npm](https://img.shields.io/npm/v/@rocket.chat/image-manipulation?style=flat-square) | ![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Fimage-manipulation&style=flat-square) |
 | 📦 [`@rocket.chat/memo`](/packages/@rocket.chat/memo)                             | Memoization utilities                                                  | ![npm](https://img.shields.io/npm/v/@rocket.chat/memo?style=flat-square)               | ![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Fmemo&style=flat-square)               |
 | 📦 [`@rocket.chat/message-parser`](/packages/@rocket.chat/message-parser)         | Rocket.Chat parser for messages                                        | ![npm](https://img.shields.io/npm/v/@rocket.chat/message-parser?style=flat-square)     | ![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Fmessage-parser&style=flat-square)     |
 | 📦 [`@rocket.chat/mp3-encoder`](/packages/@rocket.chat/mp3-encoder)               | A LAME encoder to be used in web workers                               | ![npm](https://img.shields.io/npm/v/@rocket.chat/mp3-encoder?style=flat-square)        | ![deps](https://img.shields.io/david/RocketChat/Rocket.Chat.Fuselage?path=packages%2Fmp3-encoder&style=flat-square)        |

packages/eslint-config-alt/typescript/index.js

@@ -18,6 +18,7 @@ module.exports = {
         argsIgnorePattern: '^_',
       },
     ],
+    '@typescript-eslint/no-use-before-define': ['error'],
     'func-call-spacing': 'off',
     'indent': 'off',
     'import/order': [

packages/fuselage/README.md

@@ -23,11 +23,11 @@
 Firstly, install the peer dependencies (prerequisites):
 
 ```sh
-npm i @rocket.chat/fuselage-hooks @rocket.chat/fuselage-polyfills @rocket.chat/icons react react-dom
+npm i @rocket.chat/fuselage-hooks @rocket.chat/fuselage-polyfills @rocket.chat/icons react react-dom react-virtuoso
 
 # or, if you are using yarn:
 
-yarn add @rocket.chat/fuselage-hooks @rocket.chat/fuselage-polyfills @rocket.chat/icons react react-dom
+yarn add @rocket.chat/fuselage-hooks @rocket.chat/fuselage-polyfills @rocket.chat/icons react react-dom react-virtuoso
 ```
 
 Add `@rocket.chat/fuselage` as a dependency:

packages/fuselage/index.js

@@ -1,5 +1,5 @@
-module.exports = require('./dist/fuselage.development.js');
-// if (process.env.NODE_ENV === 'production') {
-//   module.exports = require('./dist/fuselage.production.js');
-// } else {
-// }
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./dist/fuselage.production.js');
+} else {
+  module.exports = require('./dist/fuselage.development.js');
+}

packages/fuselage/src/components/Menu/index.d.ts

@@ -9,10 +9,7 @@ type MenuProps = Omit<ComponentProps<typeof ActionButton>, 'icon'> & {
   icon?: string;
   options: {
     [id: string]: {
-      label: {
-        title: string;
-        icon: string;
-      };
+      label: ReactElement | string;
       action: () => void;
     };
   };

packages/fuselage/src/components/Message/Metrics/index.tsx

@@ -11,12 +11,6 @@ const ContentItem: FC = (props) => (
   <div className='rcx-message-metrics__content-item' {...props} />
 );
 
-export const Reply: FC<ComponentProps<typeof Button>> = (props) => (
-  <MetricsItem>
-    <Button {...props} {...{ small: true, primary: true }} />
-  </MetricsItem>
-);
-
 type IconProps = { name: 'thread' | 'user' | 'clock' | 'discussion' };
 type FollowingProps = { name: 'bell' | 'bell-off' };
 
@@ -47,6 +41,12 @@ const MetricsFollowing: FC<FollowingProps> = ({ name }) => (
   />
 );
 
+export const Reply: FC<ComponentProps<typeof Button>> = (props) => (
+  <MetricsItem>
+    <Button {...props} {...{ small: true, primary: true }} />
+  </MetricsItem>
+);
+
 Metrics.Reply = Reply;
 
 Metrics.Item = MetricsItem;

packages/fuselage/src/components/OptionsPaginated/index.js

@@ -28,6 +28,7 @@ export const CheckOption = React.memo(
 export const OptionsPaginated = React.forwardRef(
   (
     {
+      title,
       multiple,
       renderEmpty: EmptyComponent = Empty,
       options,
@@ -43,6 +44,7 @@ export const OptionsPaginated = React.forwardRef(
       const { value, label, selected } = data;
       return (
         <OptionComponent
+          {...(title && { title: label })}
           role='option'
           label={label}
           onMouseDown={(e) => {

packages/fuselage/src/components/Select/index.d.ts

@@ -11,3 +11,5 @@ type SelectProps = Omit<ComponentProps<typeof Box>, 'onChange'> & {
 };
 
 export const Select: ForwardRefExoticComponent<SelectProps>;
+
+export const MultiSelect: ForwardRefExoticComponent<SelectProps>;

packages/fuselage/src/components/SelectPaginated/PaginatedMultiSelect.js

@@ -12,7 +12,9 @@ import Margins from '../Margins';
 import { OptionsPaginated, useVisible } from '../OptionsPaginated';
 import { Focus, Addon } from '../Select';
 
-const SelectedOptions = React.memo((props) => <Chip {...props} />);
+const SelectedOptions = React.memo((props) => (
+  <Chip maxWidth='150px' withTruncatedText {...props} />
+));
 
 const prevent = (e) => {
   e.preventDefault();
@@ -21,6 +23,7 @@ const prevent = (e) => {
 };
 
 export const PaginatedMultiSelect = ({
+  withTitle,
   value,
   filter,
   options = [],
@@ -94,6 +97,11 @@ export const PaginatedMultiSelect = ({
                   />
                   {currentValue.map((value) => (
                     <SelectedOptions
+                      {...(withTitle && {
+                        title:
+                          value.label ||
+                          options.find((val) => val.value === value)?.label,
+                      })}
                       tabIndex={-1}
                       role='option'
                       key={value && value.value}
@@ -133,6 +141,7 @@ export const PaginatedMultiSelect = ({
       <AnimatedVisibility visibility={visible}>
         <Position anchor={containerRef}>
           <_Options
+            {...(withTitle && { title: withTitle })}
             width={borderBoxSize.inlineSize}
             onMouseDown={prevent}
             multiple

packages/fuselage/src/components/SelectPaginated/PaginatedSelect.js

@@ -50,6 +50,7 @@ const useDidUpdate = (func = []) => {
 
 export const PaginatedSelect = ({
   value,
+  withTitle,
   filter,
   setFilter,
   error,
@@ -59,6 +60,7 @@ export const PaginatedSelect = ({
   onChange = () => {},
   placeholder = '',
   renderOptions: _Options = OptionsPaginated,
+  endReached,
   ...props
 }) => {
   const [internalValue, setInternalValue] = useState(value);
@@ -144,11 +146,13 @@ export const PaginatedSelect = ({
       </Wrapper>
       <PositionAnimated visible={visible} anchor={containerRef}>
         <_Options
+          {...(withTitle && { title: withTitle })}
           width={borderBoxSize.inlineSize}
           role='listbox'
           filter={filter}
           options={options}
           onSelect={internalChangedByClick}
+          endReached={endReached}
         />
       </PositionAnimated>
     </Box>

packages/fuselage/src/components/SelectPaginated/SelectPaginated.stories.mdx

@@ -14,7 +14,10 @@ export const thumb =
   'data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==';
 
 export const optionsEllipses = [
-  [11, 'Very very very very very very very very very large text'],
+  {
+    value: 1000,
+    label: 'Very very very very very very very very very large text',
+  },
   ...options,
 ];
 
@@ -37,6 +40,17 @@ An input for selection of options.
   </Story>
 </Canvas>
 
+<Canvas>
+  <Story name='WithTitle'>
+    <PaginatedSelect
+      withTitle
+      width='250px'
+      placeholder='Placeholder here...'
+      options={optionsEllipses}
+    />
+  </Story>
+</Canvas>
+
 <Canvas>
   <Story name='Error'>
     <PaginatedSelect
@@ -87,7 +101,7 @@ An input for selection of options.
   <Story name='Select with filter and ellipses'>
     <PaginatedSelectFiltered
       width='250px'
-      value={11}
+      value={1000}
       placeholder='Placeholder here...'
       options={optionsEllipses}
     />
@@ -125,7 +139,12 @@ An input for selection of options.
 
 <Canvas>
   <Story name='PaginatedMultiSelect'>
-    <PaginatedMultiSelect placeholder='Placeholder here...' options={options} />
+    <PaginatedMultiSelect
+      withTitle
+      placeholder='Placeholder here...'
+      value={[1000, 2, 3]}
+      options={optionsEllipses}
+    />
   </Story>
 </Canvas>
 

packages/icons/README.md

@@ -53,6 +53,14 @@ yarn build
 
 <!--/yarn(build)-->
 
+After building, make sure to run at the root: 
+
+```sh
+yarn 
+
+yarn update-storybook
+```
+
 ### Linting
 
 To ensure the source is matching our coding style, we perform [linting](<https://en.wikipedia.org/wiki/Lint_(software)>).

packages/image-manipulation/tsconfig.json

@@ -9,6 +9,7 @@
     "sourceMap": true,
     "outDir": "./dist/esm",
     "strict": true,
+    "jsx": "react-jsx",
     "esModuleInterop": true,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,

packages/message-parser/src/utils.ts

@@ -22,11 +22,6 @@ export const color = (r: number, g: number, b: number, a = 255): Color => ({
   value: { r, g, b, a },
 });
 
-export const emoji = (() => {
-  const fn = generate('EMOJI');
-  return (value: string) => fn(plain(value));
-})();
-
 export const heading = (
   value: Heading['value'],
   level: Heading['level'] = 1
@@ -89,6 +84,11 @@ export const mentionUser = (() => {
   return (value: string) => fn(plain(value));
 })();
 
+export const emoji = (() => {
+  const fn = generate('EMOJI');
+  return (value: string) => fn(plain(value));
+})();
+
 export const reducePlainTexts = (
   values: Paragraph['value']
 ): Paragraph['value'] =>

packages/onboarding-ui/.eslintignore

@@ -0,0 +1,3 @@
+/node_modules
+/dist
+!/.storybook

packages/onboarding-ui/.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+  extends: '@rocket.chat/eslint-config-alt/typescript',
+  env: {
+    jest: true,
+  },
+};

packages/onboarding-ui/.gitignore

@@ -0,0 +1,2 @@
+/.storybook/jest-results.json
+/dist

packages/onboarding-ui/.prettierignore

@@ -0,0 +1,2 @@
+/node_modules
+/dist

packages/onboarding-ui/.prettierrc.js

@@ -0,0 +1 @@
+module.exports = require('@rocket.chat/prettier-config/fuselage');