chore: restructure project into yarn workspaces, remove next

packages/design-system/molecules/role-search/RoleSearch.stories.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { roleCategory } from '../../fixtures/storyData';
+import { RoleSearch } from './RoleSearch';
+
+export default {
+    title: 'Molecules/Role Search',
+    component: RoleSearch,
+    args: {
+        roles: roleCategory,
+        searchTerm: '',
+    },
+};
+
+export const Search = (args) => <RoleSearch {...args} />;

packages/design-system/molecules/role-search/RoleSearch.tsx

@@ -0,0 +1,57 @@
+import { Role } from '@roleypoly/design-system/atoms/role';
+import { Space } from '@roleypoly/design-system/atoms/space';
+import { TextInputWithIcon } from '@roleypoly/design-system/atoms/text-input';
+import Fuse from 'fuse.js';
+import * as React from 'react';
+import { GoSearch } from 'react-icons/go';
+import styled from 'styled-components';
+import { Role as RoleType } from '../../../../src/common/types';
+
+type Props = {
+    roles: RoleType[];
+    placeholder?: string;
+    onSelect: (role: RoleType) => void;
+    onSearchUpdate: (newTerm: string) => void;
+    searchTerm: string;
+};
+
+export const RoleSearch = (props: Props) => {
+    const fuse = new Fuse(props.roles, { includeScore: true, keys: ['name'] });
+    const results =
+        props.searchTerm !== ''
+            ? fuse.search(props.searchTerm)
+            : props.roles.map((role) => ({
+                  item: role,
+              }));
+
+    const handleClick = (role: RoleType) => () => {
+        props.onSelect(role);
+    };
+
+    return (
+        <div>
+            <TextInputWithIcon
+                icon={<GoSearch />}
+                placeholder={props.placeholder || 'Search or drag a role...'}
+                value={props.searchTerm}
+                onChange={(x) => props.onSearchUpdate(x.target.value)}
+            />
+            <Space />
+            {results.map((resultRole, idx) => (
+                <RoleInliner key={idx}>
+                    <Role
+                        selected={false}
+                        role={resultRole.item}
+                        onClick={handleClick(resultRole.item)}
+                        key={`${idx}role`}
+                    />
+                </RoleInliner>
+            ))}
+        </div>
+    );
+};
+
+const RoleInliner = styled.div`
+    display: flex;
+    margin: 5px 0;
+`;

packages/design-system/molecules/role-search/index.ts

@@ -0,0 +1 @@
+export * from './RoleSearch';