chore(fuselage): add filter to icons storybook (#1360)

packages/fuselage/src/components/Icon/Icon.stories.tsx

@@ -1,16 +1,38 @@
 import type { Keys } from '@rocket.chat/icons';
 import nameToCharacterMapping from '@rocket.chat/icons';
+import {
+  Title,
+  Description,
+  Primary,
+  Stories,
+  ArgsTable,
+} from '@storybook/addon-docs';
 import type { ComponentStory, ComponentMeta } from '@storybook/react';
-import type { CSSProperties } from 'react';
-import React from 'react';
+import React, { useState } from 'react';
 
-import { Box, Icon } from '../..';
+import { Box, Divider, Icon } from '../..';
+import InputBox from '../InputBox';
 
-const iconsList = Object.keys(nameToCharacterMapping) as Keys[];
+const iconsList = Object.keys(nameToCharacterMapping).sort((a, b) =>
+  a.localeCompare(b)
+) as Keys[];
 
 export default {
   title: 'Data Display/Icon',
   component: Icon,
+  parameters: {
+    docs: {
+      page: () => (
+        <>
+          <Title />
+          <Description />
+          <Primary />
+          <Stories />
+          <ArgsTable />
+        </>
+      ),
+    },
+  },
 } as ComponentMeta<typeof Icon>;
 
 export const Default: ComponentStory<typeof Icon> = () => (
@@ -21,32 +43,43 @@ export const Default: ComponentStory<typeof Icon> = () => (
   </Box>
 );
 
-const styles: {
-  container?: CSSProperties;
-  wrapper?: CSSProperties;
-} = {
-  container: {
-    display: 'flex',
-    flexFlow: 'row wrap',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    textAlign: 'center',
-  },
-  wrapper: {
-    margin: '2rem 0.5rem',
-    flex: '1 0 8rem',
-  },
-};
+export const AvailableIcons: ComponentStory<typeof Icon> = () => {
+  const [filter, setFilter] = useState('');
 
-export const AvailableIcons: ComponentStory<typeof Icon> = () => (
-  <div style={styles.container}>
-    {iconsList.map((name) => (
-      <div key={name} style={styles.wrapper}>
-        <Box>
-          <Icon name={name} size='x40' />
+  const filteredIcons = iconsList.filter((name) =>
+    name.toLowerCase().includes(filter.toLowerCase())
+  );
+  return (
+    <>
+      <Box display='flex' flexDirection='column'>
+        <Box maxWidth='x200'>
+          <InputBox
+            type='text'
+            value={filter}
+            onChange={(e) => setFilter((e.target as HTMLInputElement).value)}
+            placeholder='Search icons'
+            addon={<Icon name='magnifier' size='x20' />}
+          />
         </Box>
-        <Box color='hint'>{name}</Box>
-      </div>
-    ))}
-  </div>
-);
+      </Box>
+      <Divider />
+      <Box
+        display='flex'
+        flexWrap='wrap'
+        alignContent='flex-start'
+        textAlign='center'
+        height='90vh'
+        overflow='auto'
+      >
+        {filteredIcons.map((name) => (
+          <Box mb='x32' mi='x8' flexShrink={0} flexGrow={0} flexBasis='128px'>
+            <Box>
+              <Icon name={name} size='x40' color='default' />
+            </Box>
+            <Box color='hint'>{name}</Box>
+          </Box>
+        ))}
+      </Box>
+    </>
+  );
+};