Merge pull request #197 from ynput/search-filter

Component: Search filter

Author: Innders

package.json

@@ -125,5 +125,8 @@
   },
   "resolutions": {
     "jackspeak": "2.1.1"
+  },
+  "dependencies": {
+    "short-uuid": "^5.2.0"
   }
 }

src/SearchFilter/SearchFilter.stories.tsx

@@ -0,0 +1,45 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { SearchFilter } from './SearchFilter'
+import { useState } from 'react'
+import { Filter, Option } from './types'
+
+const meta: Meta<typeof SearchFilter> = {
+  component: SearchFilter,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof SearchFilter>
+
+const options: Option[] = [
+  {
+    id: 'status',
+    label: 'Status',
+    operator: 'OR',
+    allowExcludes: true,
+    allowHasValue: true,
+    allowNoValue: true,
+    allowsCustomValues: true,
+    operatorChangeable: true,
+
+    values: [
+      { id: 'waiting', label: 'Waiting', color: '#FFA500', icon: 'hourglass_empty' },
+      { id: 'inProgress', label: 'In Progress', color: '#4CAF50', icon: 'play_circle' },
+      { id: 'completed', label: 'Completed', color: '#2196F3', icon: 'check_circle' },
+      { id: 'error', label: 'Error', color: '#F44336', icon: 'error' },
+      { id: 'paused', label: 'Paused', color: '#9C27B0', icon: 'pause_circle' },
+      { id: 'cancelled', label: 'Cancelled', color: '#757575', icon: 'cancel' },
+    ],
+  },
+]
+
+const Template = (args: Story['args']) => {
+  const [filters, setFilters] = useState<Filter[]>([])
+
+  return <SearchFilter {...args} options={options} filters={filters} onChange={setFilters} />
+}
+
+export const Default: Story = {
+  args: {},
+  render: Template,
+}

src/SearchFilter/SearchFilter.styled.ts

@@ -0,0 +1,56 @@
+import styled from 'styled-components'
+import { Button } from '../Button'
+
+export const Container = styled.div`
+  position: relative;
+  width: 100%;
+`
+
+export const SearchBar = styled.div`
+  display: flex;
+
+  padding: 3px 8px;
+  height: 32px;
+  align-items: center;
+  gap: var(--base-gap-small);
+
+  border-radius: var(--border-radius-m);
+  border: 1px solid var(--md-sys-color-outline-variant);
+  background-color: var(--md-sys-color-surface-container-low);
+
+  position: relative;
+  z-index: 301;
+  overflow: hidden;
+
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--md-sys-color-surface-container-low-hover);
+  }
+
+  &:has(.search-filter-item:hover) {
+    background-color: var(--md-sys-color-surface-container-low);
+  }
+`
+
+export const SearchBarFilters = styled.div`
+  display: flex;
+  gap: var(--base-gap-small);
+  white-space: nowrap;
+`
+
+export const FilterButton = styled(Button)`
+  &.hasIcon {
+    padding: 2px;
+  }
+`
+
+export const Backdrop = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+
+  z-index: 300;
+`