feat: icons with search (#1121)

Co-authored-by: João Salvador <[email protected]>

Author: StereoPT

frontend/src/components/icons/Sprite.tsx

@@ -1,6 +1,7 @@
 /* eslint react/no-unknown-property: 0 */
 const Sprite = () => (
   <svg
+    id="iconSprite"
     focusable="false"
     preserveAspectRatio="xMidYMid meet"
     style={{ visibility: 'hidden', position: 'absolute', pointerEvents: 'none' }}

frontend/src/stories/Icons.stories.tsx

@@ -0,0 +1,83 @@
+import React, { useEffect, useState } from 'react';
+import { ComponentStory } from '@storybook/react';
+
+import Sprite from '@/components/icons/Sprite';
+import dedent from 'ts-dedent';
+import Icon from '@/components/icons/Icon';
+import Flex from '@/components/Primitives/Flex';
+import Text from '@/components/Primitives/Text';
+import Input from '@/components/Primitives/Input';
+import { FormProvider, useForm } from 'react-hook-form';
+import Card from './components/Card';
+
+export default {
+  title: 'Misc/Icons',
+  component: Sprite,
+  parameters: {
+    layout: 'start',
+    controls: { hideNoControlsWarning: true },
+    docs: {
+      description: {
+        component: dedent`List of Icons that can be used in the \`Icon\` Primitive.`,
+      },
+      source: {
+        code: null,
+      },
+    },
+  },
+};
+
+const Template: ComponentStory<typeof Sprite> = () => {
+  const [icons, setIcons] = useState<string[]>([]);
+  const [filteredIcons, setFilteredIcons] = useState<string[]>(icons);
+
+  const methods = useForm({
+    defaultValues: {
+      search: '',
+    },
+  });
+
+  const handleOnChange = () => {
+    const searchValue = methods.getValues('search');
+    setFilteredIcons(icons.filter((icon) => icon.includes(searchValue)));
+  };
+
+  useEffect(() => {
+    const iconSymbols = document.querySelectorAll('#iconSprite symbol');
+    const iconIDs = [...iconSymbols].map((icon) => icon.getAttribute('id')!);
+    setIcons(iconIDs);
+    setFilteredIcons(iconIDs);
+  }, []);
+
+  return (
+    <Flex direction="column">
+      <FormProvider {...methods}>
+        <form
+          style={{ margin: '0 2.5rem 2rem' }}
+          onChange={handleOnChange}
+          onSubmit={(e) => {
+            e.preventDefault();
+          }}
+        >
+          <Input id="search" type="text" placeholder="Search" icon="search" iconPosition="left" />
+        </form>
+      </FormProvider>
+      <Flex wrap="wrap" gap="16" justify="center">
+        {filteredIcons.map((icon) => {
+          const displayIcon = <Icon name={icon} size={32} />;
+
+          return (
+            <Card display={displayIcon} key={icon}>
+              <Text>
+                <Text fontWeight="bold">Name:</Text> {icon}
+              </Text>
+            </Card>
+          );
+        })}
+      </Flex>
+    </Flex>
+  );
+};
+
+export const Default = Template.bind({});
+Default.storyName = 'Basic Usage';

frontend/src/stories/components/Card.tsx

@@ -0,0 +1,19 @@
+import Box from '@/components/Primitives/Box';
+import Flex from '@/components/Primitives/Flex';
+import React from 'react';
+
+const Card = ({ display, children }: any) => (
+  <Box variant="bordered" css={{ width: '$260' }}>
+    <Flex
+      css={{ py: '$24', backgroundColor: '$white', borderRadius: '$8 $8 0 0' }}
+      justify="center"
+    >
+      {display}
+    </Flex>
+    <Flex direction="column" css={{ p: '$12', borderTop: '1px solid $primary100' }}>
+      {children}
+    </Flex>
+  </Box>
+);
+
+export default Card;