Skills Selector (#124)

* skills map in context

* using react-select

* removed sudo from package.json

* fixed lint and format issues

packages/design-system/src/SelectSearch.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import Select, { Props as SelectProps, Styles } from 'react-select';
+
+import { theme } from './theme';
+
+const selectStyles: Styles = {
+  menu: (styles) => ({
+    ...styles,
+    background: theme.colors.purple[400],
+  }),
+  noOptionsMessage: (styles) => ({
+    ...styles,
+    color: theme.colors.white,
+  }),
+  input: (styles) => ({
+    ...styles,
+    color: theme.colors.white,
+  }),
+  groupHeading: (styles) => ({
+    ...styles,
+    color: theme.colors.white,
+  }),
+  option: (styles) => ({
+    ...styles,
+    background: theme.colors.dark,
+    ':hover': {
+      backgroundColor: theme.colors.purpleTag,
+      color: theme.colors.white,
+    },
+  }),
+  control: (styles) => ({
+    ...styles,
+    background: theme.colors.dark,
+    border: theme.colors.dark,
+  }),
+  multiValue: (styles) => ({
+    ...styles,
+    background: theme.colors.purpleTag,
+    color: theme.colors.white,
+  }),
+  multiValueLabel: (styles) => ({
+    ...styles,
+    background: theme.colors.purpleTag,
+    color: theme.colors.white,
+  }),
+  multiValueRemove: (styles) => ({
+    ...styles,
+    color: theme.colors.white,
+    cursor: 'pointer',
+    ':hover': {
+      color: theme.colors.blueLight,
+    },
+  }),
+  clearIndicator: (styles) => ({
+    ...styles,
+    color: theme.colors.white,
+    cursor: 'pointer',
+    ':hover': {
+      color: theme.colors.blueLight,
+    },
+  }),
+  dropdownIndicator: (styles) => ({
+    ...styles,
+    color: theme.colors.white,
+    cursor: 'pointer',
+    ':hover': {
+      color: theme.colors.blueLight,
+    },
+  }),
+};
+export const SelectSearch: React.FC<SelectProps> = (props) => (
+  <Select styles={selectStyles} {...props} />
+);

packages/design-system/src/index.ts

@@ -40,3 +40,4 @@ export { MetaBox } from './MetaBox';
 export { MetaTag } from './MetaTag';
 export { H1, P } from './typography';
 export { ResponsiveText } from './ResponsiveText';
+export { SelectSearch } from './SelectSearch';