Feature: Implement generic filtering and search capabilities

CHANGELOG.md

@@ -145,4 +145,4 @@
 ## Privacy Sandbox API
 * Update `RWS` submission steps text https://github.com/GoogleChromeLabs/ps-analysis-tool/pull/229
 * Fix: opaque origin error when using in https://github.com/GoogleChromeLabs/ps-analysis-tool/pull/235
-* Refactor: Make functional components in landing page non-collapsible https://github.com/GoogleChromeLabs/ps-analysis-tool/pull/232
+* Refactor: Make functional components in landing page non-collapsible https://github.com/GoogleChromeLabs/ps-analysis-tool/pull/232

packages/design-system/src/components/table/columnMenu/columnList.tsx → packages/design-system/src/components/table/components/columnMenu/columnList.tsx

@@ -18,14 +18,13 @@
  * External dependencies.
  */
 import React, { useEffect } from 'react';
-import { PreferenceDataValues } from '@ps-analysis-tool/common';
+import { PreferenceDataValues, noop } from '@ps-analysis-tool/common';
 
 /**
  * Internal dependencies.
  */
 import ColumnListItem from './columnListItem';
-import type { TableOutput } from '../useTable';
-import { noop } from '../../../utils';
+import type { TableOutput } from '../../useTable';
 
 interface ColumnListProps {
   table: TableOutput;

packages/design-system/src/components/table/columnMenu/columnListItem.tsx → packages/design-system/src/components/table/components/columnMenu/columnListItem.tsx

@@ -23,7 +23,7 @@ import classNames from 'classnames';
 /**
  * Internal dependencies.
  */
-import type { TableColumn } from '../useTable';
+import { TableColumn } from '../../useTable';
 
 interface ColumnListItemProps {
   column: TableColumn;

packages/design-system/src/components/table/columnMenu/index.tsx → packages/design-system/src/components/table/components/columnMenu/index.tsx

@@ -19,15 +19,14 @@
  */
 import React, { useEffect, useRef, useState } from 'react';
 import classNames from 'classnames';
-import { type PreferenceDataValues } from '@ps-analysis-tool/common';
+import { noop, type PreferenceDataValues } from '@ps-analysis-tool/common';
 import { createPortal } from 'react-dom';
 
 /**
  * Internal dependencies.
  */
 import ColumnList from './columnList';
-import type { TableOutput } from '../useTable';
-import { noop } from '../../../utils';
+import { TableOutput } from '../../useTable';
 
 interface ColumnMenuProps {
   table: TableOutput;

packages/design-system/src/components/table/components/filtersSidebar/chips/chip.tsx

@@ -0,0 +1,48 @@
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * External dependencies.
+ */
+import React from 'react';
+
+/**
+ * Internal dependencies.
+ */
+import { ClearIcon } from '../../../../../icons';
+
+interface ChipProps {
+  filterTitle: string;
+  value: string;
+  toggleFilterSelection: () => void;
+}
+
+const Chip = ({ filterTitle, value, toggleFilterSelection }: ChipProps) => {
+  return (
+    <div className="flex items-center px-2 rounded-sm bg-gainsboro dark:bg-charleston-green mx-1 h-4">
+      <span className="block whitespace-nowrap text-onyx dark:text-manatee">
+        {filterTitle + ': ' + value}
+      </span>
+      <button
+        onClick={toggleFilterSelection}
+        className="w-1.5 h-1.5 text-gray-600 hover:text-gray-800 focus:outline-none ml-1"
+      >
+        <ClearIcon className="text-mischka" />
+      </button>
+    </div>
+  );
+};
+
+export default Chip;

packages/design-system/src/components/table/components/filtersSidebar/chips/chipList.tsx

@@ -0,0 +1,52 @@
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * External dependencies.
+ */
+import React from 'react';
+
+/**
+ * Internal dependencies.
+ */
+import Chip from './chip';
+import type { TableFilter, TableOutput } from '../../../useTable';
+
+interface ChipListProps {
+  selectedFilters: TableFilter;
+  toggleFilterSelection: TableOutput['toggleFilterSelection'];
+}
+
+const ChipList = ({
+  selectedFilters,
+  toggleFilterSelection,
+}: ChipListProps) => (
+  <div className="flex flex-nowrap max-w-full">
+    {Object.entries(selectedFilters).map(([filterKey, filter]) => {
+      return Object.keys(filter.filterValues || {}).map((filterValue) => (
+        <Chip
+          key={filterValue}
+          filterTitle={filter.title}
+          value={filterValue}
+          toggleFilterSelection={() => {
+            toggleFilterSelection(filterKey, filterValue);
+          }}
+        />
+      ));
+    })}
+  </div>
+);
+
+export default ChipList;

packages/design-system/src/components/table/components/filtersSidebar/chips/index.tsx

@@ -0,0 +1,66 @@
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * External dependencies.
+ */
+import React from 'react';
+
+/**
+ * Internal dependencies.
+ */
+import ChipList from './chipList';
+import { StopIcon } from '../../../../../icons';
+import type { TableFilter, TableOutput } from '../../../useTable';
+
+interface ChipsBarProps {
+  selectedFilters: TableFilter;
+  toggleFilterSelection: TableOutput['toggleFilterSelection'];
+  resetFilters: TableOutput['resetFilters'];
+}
+
+const ChipsBar = ({
+  selectedFilters,
+  toggleFilterSelection,
+  resetFilters,
+}: ChipsBarProps) => {
+  return (
+    <div
+      className={`${
+        Object.keys(selectedFilters).length === 0 && 'hidden'
+      } w-full h-[25px] py-1 px-2 flex items-center overflow-x-scroll no-scrollbar bg-anti-flash-white dark:bg-raisin-black border-b border-gray-300 dark:border-quartz`}
+    >
+      {Object.keys(selectedFilters).length > 1 && (
+        <a
+          href="#"
+          className="h-full flex items-center text-link text-xs whitespace-nowrap"
+          onClick={resetFilters}
+        >
+          <StopIcon className="text-gray min-w-[14px] min-h-[14px]" />
+          <span className="ml-1 mr-1 dark:text-bright-gray bg-transparent">
+            Clear all
+          </span>
+          <div className="w-[1px] bg-gainsboro dark:bg-quartz h-[20px]"></div>
+        </a>
+      )}
+      <ChipList
+        selectedFilters={selectedFilters}
+        toggleFilterSelection={toggleFilterSelection}
+      />
+    </div>
+  );
+};
+
+export default ChipsBar;

packages/design-system/src/components/table/components/filtersSidebar/index.tsx

@@ -0,0 +1,60 @@
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * External dependencies.
+ */
+import React from 'react';
+
+/**
+ * Internal dependencies.
+ */
+import ListItem from './listItem';
+import type { TableFilter, TableOutput } from '../../useTable';
+
+interface FiltersSidebarProps {
+  filters: TableFilter;
+  toggleFilterSelection: TableOutput['toggleFilterSelection'];
+}
+
+const FiltersSidebar = ({
+  filters,
+  toggleFilterSelection,
+}: FiltersSidebarProps) => {
+  if (!Object.keys(filters).length) {
+    return null;
+  }
+
+  return (
+    <div className="h-full overflow-auto p-3">
+      <ul>
+        {Object.entries(filters)
+          .filter(([, filter]) =>
+            Boolean(Object.keys(filter.filterValues || {}).length)
+          )
+          .map(([filterKey, filter]) => (
+            <ListItem
+              key={filterKey}
+              filter={filter}
+              filterKey={filterKey}
+              toggleFilterSelection={toggleFilterSelection}
+            />
+          ))}
+      </ul>
+    </div>
+  );
+};
+
+export default FiltersSidebar;

packages/design-system/src/components/table/components/filtersSidebar/listItem.tsx

@@ -0,0 +1,96 @@
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * External dependencies.
+ */
+import React, { useState } from 'react';
+import {
+  ArrowDown,
+  InfoIcon,
+  TableFilter,
+  TableOutput,
+} from '@ps-analysis-tool/design-system';
+
+/**
+ * Internal dependencies.
+ */
+import SubList from './subList';
+
+interface ListItemProps {
+  filter: TableFilter[keyof TableFilter];
+  filterKey: string;
+  toggleFilterSelection: TableOutput['toggleFilterSelection'];
+}
+
+const ListItem = ({
+  filter,
+  filterKey,
+  toggleFilterSelection,
+}: ListItemProps) => {
+  const [isExpanded, setExpanded] = useState<boolean>(false);
+  const [showSubList, setShowSubList] = useState<boolean>(false);
+
+  const toggleShowMore = () => {
+    setExpanded(!isExpanded);
+  };
+
+  const toggleSubList = () => {
+    setShowSubList(!showSubList);
+  };
+
+  return (
+    <li className="py-[3px]">
+      <div className="flex gap-2 items-center">
+        <a
+          href="#"
+          className="flex items-center text-asteriod-black dark:text-bright-gray"
+          onClick={toggleSubList}
+        >
+          <span className={showSubList ? '' : '-rotate-90'}>
+            <ArrowDown />
+          </span>
+          <p className="ml-1 leading-normal font-semi-thick">{filter.title}</p>
+        </a>
+        {filter.description && (
+          <p title={filter.description}>
+            <InfoIcon />
+          </p>
+        )}
+      </div>
+      {showSubList && (
+        <>
+          <SubList
+            filterValues={filter.filterValues}
+            filterKey={filterKey}
+            toggleFilterSelection={toggleFilterSelection}
+            isExpanded={isExpanded}
+          />
+          {Number(Object.keys(filter.filterValues || {}).length) > 4 && (
+            <a
+              onClick={toggleShowMore}
+              className="text-md text-link ml-2 mt-1 block text-royal-blue dark:text-medium-persian-blue"
+              href="#"
+            >
+              {isExpanded ? 'Show Less' : 'Show More'}
+            </a>
+          )}
+        </>
+      )}
+    </li>
+  );
+};
+
+export default ListItem;