feat(fuselage): New paginated Selects/Options

.github/workflows/cd.yml

@@ -17,13 +17,13 @@ jobs:
         with:
           node-version: "14"
       - uses: actions/checkout@v2
-      - uses: actions/cache@v2
-        id: yarn-cache
-        with:
-          path: |
-            **/node_modules
-            .yarn/cache
-          key: ${{ runner.os }}-modules-${{ hashFiles('yarn.lock') }}
+        - uses: actions/cache@v2
+          id: yarn-cache
+          with:
+            path: |
+              **/node_modules
+              .yarn/cache
+            key: ${{ runner.os }}-modules-${{ hashFiles('yarn.lock') }}
       - run: yarn install
         if: steps.yarn-cache.outputs.cache-hit != 'true'
       - run: yarn run build

packages/fuselage/package.json

@@ -57,7 +57,8 @@
     "@rocket.chat/fuselage-polyfills": "*",
     "@rocket.chat/icons": "*",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "react-virtuoso": "1.2.4"
   },
   "dependencies": {
     "@rocket.chat/css-in-js": "^0.24.0",

packages/fuselage/src/components/OptionsPaginated/Option/Option.stories.mdx

@@ -0,0 +1,154 @@
+import { Meta, Canvas, ArgsTable, Story } from '@storybook/addon-docs/blocks';
+import LinkTo from '@storybook/addon-links/react';
+
+import { Option } from '.';
+import { Box, Avatar, Menu, StatusBullet } from '../..';
+import { exampleAvatar, menuOptions } from '../../../../.storybook/helpers.js';
+
+<Meta title='Misc/Options/Option' parameters={{ jest: ['Option/spec'] }} />
+
+# Option
+
+The generic <LinkTo kind='Misc/Options/Option' story='Default'>`Option`</LinkTo> item of options. Can be freely used or inside the <LinkTo kind='Misc/Options/Options' story='Default'>`Options`</LinkTo> as well.
+
+<Canvas>
+  <Story name='Default'>
+    <Box position='relative' maxWidth={250}>
+      <Option>
+        <Option.Content>Lorem Ipsum Lorem</Option.Content>
+      </Option>
+      <Option>
+        <Option.Content>Lorem Ipsum Lorem Lorem Ipsum Lorem Lorem Ipsum Lorem Lorem Ipsum Lorem</Option.Content>
+      </Option>
+      <Option>
+        <Option.Content>Lorem Ipsum Lorem <Option.Description>Lorem Lorem Ipsum Lorem Lorem Ipsum Lorem</Option.Description></Option.Content>
+      </Option>
+    </Box>
+  </Story>
+</Canvas>
+
+
+## With avatar
+
+<Canvas>
+  <Story name='withAvatar'>
+    <Box position='relative' maxWidth={250}>
+      <Option>
+        <Option.Avatar>
+          <Avatar url={exampleAvatar} size='x28' />
+        </Option.Avatar>
+        <Option.Content>Lorem Ipsum Lorem</Option.Content>
+      </Option>
+      <Option>
+        <Option.Avatar>
+          <Avatar url={exampleAvatar} size='x28' />
+        </Option.Avatar>        
+        <Option.Content>Lorem Ipsum Lorem Lorem Ipsum Lorem Lorem Ipsum Lorem Lorem Ipsum Lorem</Option.Content>
+      </Option>
+      <Option>
+        <Option.Avatar>
+          <Avatar url={exampleAvatar} size='x28' />
+        </Option.Avatar>        
+        <Option.Content>Lorem Ipsum Lorem <Option.Description>Lorem Lorem Ipsum Lorem Lorem Ipsum Lorem</Option.Description></Option.Content>
+      </Option>
+    </Box>
+  </Story>
+</Canvas>
+
+## With presence
+
+<Canvas>
+  <Story name='withPresence'>
+    <Box position='relative' maxWidth={250}>
+      <Option>
+        <Option.Column><StatusBullet /></Option.Column>
+        <Option.Content>Lorem Ipsum Lorem</Option.Content>
+      </Option>
+      <Option>
+        <Option.Avatar>
+          <Avatar url={exampleAvatar} size='x28' />
+        </Option.Avatar>
+        <Option.Column><StatusBullet /></Option.Column>
+        <Option.Content>Lorem Ipsum Lorem Lorem Ipsum Lorem Lorem Ipsum Lorem Lorem Ipsum Lorem</Option.Content>
+      </Option>
+    </Box>
+  </Story>
+</Canvas>
+
+## With menu
+
+<Canvas>
+  <Story name='withMenu'>
+    <Box position='relative' maxWidth={250}>
+      <Option>
+        <Option.Content>Lorem Ipsum Lorem</Option.Content>
+        <Option.Menu><Menu options={menuOptions} /></Option.Menu>
+      </Option>
+      <Option>
+        <Option.Avatar>
+          <Avatar url={exampleAvatar} size='x28' />
+        </Option.Avatar>
+        <Option.Column><StatusBullet /></Option.Column>
+        <Option.Content>Lorem Ipsum Lorem Lorem Ipsum Lorem Lorem Ipsum Lorem Lorem Ipsum Lorem</Option.Content>
+        <Option.Menu><Menu options={menuOptions} /></Option.Menu>
+      </Option>
+    </Box>
+  </Story>
+</Canvas>
+
+## With Icon
+
+<Canvas>
+  <Story name='withIcon'>
+    <Box position='relative' maxWidth={250}>
+      <Option>
+        <Option.Icon name='bell'/>
+        <Option.Content>Lorem Ipsum Lorem</Option.Content>
+        <Option.Menu><Menu options={menuOptions} /></Option.Menu>
+      </Option>
+      <Option>
+        <Option.Avatar>
+          <Avatar url={exampleAvatar} size='x28' />
+        </Option.Avatar>
+        <Option.Icon name='bell'/>
+        <Option.Column><StatusBullet /></Option.Column>
+        <Option.Content>Lorem Ipsum Lorem Lorem Ipsum Lorem Lorem Ipsum Lorem Lorem Ipsum Lorem</Option.Content>
+        <Option.Menu><Menu options={menuOptions} /></Option.Menu>
+      </Option>
+    </Box>
+  </Story>
+</Canvas>
+
+## As UserItem
+
+<Canvas>
+  <Story name='asUserItem'>
+    <Box maxWidth={330}>
+      <Option>
+        <Option.Avatar>
+          <Avatar url={exampleAvatar} size='x28' />
+        </Option.Avatar> 
+
+        <Option.Column><StatusBullet status='online' /></Option.Column>
+        <Option.Content>
+          <Box withTruncatedText fontScale='p1'>carla.culhane <Box is='span' color='neutral-500'>(carla hune)</Box></Box>
+        </Option.Content>
+        <Option.Menu><Menu options={menuOptions} /></Option.Menu>
+      </Option>
+    </Box>
+  </Story>
+</Canvas>
+
+## As Skeleton
+
+<Canvas>
+  <Story name='Skeleton'>
+    <Box position='relative' maxWidth={330}>
+      <Option.Skeleton /> 
+    </Box>
+  </Story>
+</Canvas>
+
+<ArgsTable of={Option} />
+
+

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

@@ -0,0 +1,85 @@
+import React from 'react';
+
+import { Icon } from '../../Icon';
+import { Skeleton } from '../../Skeleton';
+
+const OptionColumn = (props) => (
+  <div className='rcx-option__column' {...props} />
+);
+const OptionContent = (props) => (
+  <div className='rcx-option__content' {...props} />
+);
+const OptionAvatar = (props) => (
+  <div className='rcx-option__avatar' {...props} />
+);
+const OptionDescription = (props) => (
+  <div className='rcx-option__description' {...props} />
+);
+const OptionIcon = ({ name }) => (
+  <OptionColumn>
+    <Icon size='x20' name={name} />
+  </OptionColumn>
+);
+
+const OptionSkeleton = (props) => (
+  <Option {...props}>
+    <Option.Avatar>
+      <Skeleton variant='rect' width={28} height={28} />
+    </Option.Avatar>
+    <Option.Content>
+      <Skeleton width='100%' />
+    </Option.Content>
+  </Option>
+);
+
+export const OptionMenu = (props) => (
+  <div className='rcx-box--animated rcx-option__menu-wraper' {...props} />
+);
+
+export const Option = React.memo(
+  ({
+    is: Tag = 'li',
+    id,
+    presence,
+    children,
+    label,
+    focus,
+    selected,
+    className,
+    ref,
+    icon,
+    avatar,
+    ...options
+  }) => (
+    <Tag
+      key={id}
+      id={id}
+      ref={ref}
+      aria-selected={selected}
+      {...options}
+      className={[
+        'rcx-option',
+        className,
+        focus && 'rcx-option--focus',
+        selected && 'rcx-option--selected',
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      <div className='rcx-option__wrapper'>
+        {avatar && <Option.Avatar>{avatar}</Option.Avatar>}
+        {icon && <Option.Icon name={icon} />}
+        {label && <Option.Content>{label}</Option.Content>}
+        {label !== children && children}
+      </div>
+    </Tag>
+  )
+);
+
+Option.Description = OptionDescription;
+Option.Skeleton = OptionSkeleton;
+Option.Avatar = OptionAvatar;
+Option.Menu = OptionMenu;
+Option.Icon = OptionIcon;
+Option.Column = OptionColumn;
+Option.Content = OptionContent;

packages/fuselage/src/components/OptionsPaginated/Option/spec.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { Option } from '.';
+
+it('Option renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<Option />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});